:root {
    --bg: #080808;
    --bg-soft: #12100f;
    --panel: #171310;
    --panel-2: #211711;
    --gold: #d7b56d;
    --gold-soft: #ffe3a0;
    --red: #7d1718;
    --red-soft: #b7372b;
    --text: #f6efe2;
    --muted: #b9aa91;
    --line: rgba(215, 181, 109, .24);
    --shadow: 0 24px 70px rgba(0, 0, 0, .45);
    --radius: 24px;
    --radius-sm: 16px;
    --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 15% 0%, rgba(215,181,109,.16), transparent 32%),
        radial-gradient(circle at 85% 18%, rgba(125,23,24,.20), transparent 36%),
        linear-gradient(180deg, #090909 0%, #0e0b0a 52%, #070707 100%);
    line-height: 1.75;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(100% - 32px, var(--max)); margin: 0 auto; }
.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(8, 8, 8, .80);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(215,181,109,.16);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: .02em; }
.brand-mark {
    width: 38px; height: 38px; display: grid; place-items: center;
    border: 1px solid rgba(215,181,109,.55); border-radius: 50%;
    background: radial-gradient(circle, rgba(255,227,160,.30), rgba(125,23,24,.12));
    color: var(--gold-soft); box-shadow: 0 0 30px rgba(215,181,109,.18);
}
.brand-text { font-size: 20px; }
.site-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.site-nav a {
    padding: 10px 12px; color: var(--muted); border-radius: 999px; font-size: 14px;
    transition: color .2s ease, background .2s ease;
}
.site-nav a:hover, .site-nav a:focus { color: var(--gold-soft); background: rgba(215,181,109,.10); }
.nav-toggle { display: none; border: 0; background: transparent; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; margin: 5px 0; background: var(--gold-soft); }
.hero { position: relative; overflow: hidden; padding: 84px 0 56px; }
.hero:before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(8,8,8,.96) 0%, rgba(8,8,8,.78) 45%, rgba(8,8,8,.22) 100%);
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 44px; }
.eyebrow { color: var(--gold-soft); font-size: 14px; letter-spacing: .20em; text-transform: uppercase; margin: 0 0 14px; }
h1, h2, h3 { line-height: 1.22; margin: 0; }
h1 { font-size: clamp(38px, 6vw, 72px); letter-spacing: -.04em; }
.hero p.lead, .page-hero .lead { font-size: 18px; color: #d8c8af; max-width: 720px; margin: 22px 0 0; }
.hero-actions, .section-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    border-radius: 999px; padding: 13px 22px; border: 1px solid var(--line);
    background: rgba(255,255,255,.03); color: var(--text); font-weight: 700;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.btn.primary { background: linear-gradient(135deg, #f4cf80, #8f5b24); color: #140d08; border-color: rgba(255,227,160,.75); }
.btn:hover { transform: translateY(-2px); border-color: rgba(255,227,160,.72); background: rgba(215,181,109,.10); }
.hero-visual { position: relative; }
.hero-visual img { border-radius: 30px; border: 1px solid rgba(215,181,109,.24); box-shadow: var(--shadow); }
.glow-card {
    position: absolute; left: -22px; bottom: 24px; max-width: 280px; padding: 18px;
    border: 1px solid rgba(215,181,109,.26); border-radius: 20px;
    background: rgba(14, 11, 10, .88); box-shadow: 0 18px 60px rgba(0,0,0,.40);
}
.glow-card strong { display: block; color: var(--gold-soft); margin-bottom: 4px; }
.glow-card span { color: var(--muted); font-size: 14px; }
.section { padding: 76px 0; }
.section.alt { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.section-head .copy { max-width: 740px; }
.section h2 { font-size: clamp(28px, 4vw, 46px); letter-spacing: -.03em; }
.section-head p, .muted { color: var(--muted); margin: 12px 0 0; }
.grid { display: grid; gap: 20px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card {
    position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    box-shadow: 0 20px 55px rgba(0,0,0,.24);
}
.card-body { padding: 22px; }
.card h3 { font-size: 22px; margin-bottom: 8px; }
.card p { color: var(--muted); margin: 0; }
.poster { aspect-ratio: 16 / 9; overflow: hidden; background: #120d0b; }
.poster img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); transition: transform .35s ease, filter .35s ease; }
.card:hover .poster img { transform: scale(1.06); filter: brightness(.82); }
.play-overlay {
    position: absolute; inset: 0; display: grid; place-items: center; opacity: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.54)); transition: opacity .25s ease;
}
.card:hover .play-overlay { opacity: 1; }
.play-overlay span {
    width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,227,160,.92); color: #1a0f08; font-weight: 900;
    box-shadow: 0 0 36px rgba(255,227,160,.30);
}
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.badge, .chip {
    display: inline-flex; align-items: center; border: 1px solid rgba(215,181,109,.25);
    color: var(--gold-soft); background: rgba(215,181,109,.08); border-radius: 999px; padding: 6px 10px; font-size: 13px;
}
.feature {
    padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: rgba(255,255,255,.035);
}
.feature .icon { font-size: 28px; margin-bottom: 12px; }
.feature h3 { font-size: 20px; margin-bottom: 8px; }
.panel {
    border: 1px solid var(--line); border-radius: var(--radius); background:
    radial-gradient(circle at top right, rgba(215,181,109,.12), transparent 32%), rgba(255,255,255,.035);
    padding: 28px;
}
.channel-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.channel-list a {
    min-height: 110px; padding: 18px; border: 1px solid var(--line); border-radius: 20px;
    background: linear-gradient(145deg, rgba(215,181,109,.12), rgba(125,23,24,.10));
    display: flex; flex-direction: column; justify-content: space-between;
}
.channel-list strong { color: var(--gold-soft); }
.topic-row { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; align-items: stretch; }
.topic-row img { height: 100%; object-fit: cover; border-radius: 24px; border: 1px solid var(--line); }
.quote { padding: 24px; border-left: 3px solid var(--gold); background: rgba(255,255,255,.035); border-radius: 18px; }
.quote p { color: #e5d6bd; }
.avatar { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(215,181,109,.4); }
.quote-user { display: flex; align-items: center; gap: 12px; margin-top: 18px; color: var(--muted); }
.faq { display: grid; gap: 14px; }
details { border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.035); padding: 18px 20px; }
summary { cursor: pointer; font-weight: 800; color: var(--gold-soft); }
details p { color: var(--muted); margin: 10px 0 0; }
.page-hero { padding: 78px 0 44px; border-bottom: 1px solid rgba(215,181,109,.14); background: radial-gradient(circle at 20% 0%, rgba(215,181,109,.12), transparent 36%); }
.breadcrumb { color: var(--muted); margin-bottom: 12px; font-size: 14px; }
.breadcrumb a { color: var(--gold-soft); }
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.chip { cursor: default; }
.timeline { display: grid; gap: 16px; }
.timeline-item { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: start; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.035); }
.timeline-item time { color: var(--gold-soft); font-weight: 800; }
.contact-box { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-like { display: grid; gap: 12px; }
.form-like div { padding: 15px 16px; border: 1px solid var(--line); border-radius: 14px; color: var(--muted); background: rgba(255,255,255,.035); }
.site-footer { border-top: 1px solid rgba(215,181,109,.18); background: #060606; padding: 48px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr .7fr 1fr; gap: 28px; }
.site-footer h2 { font-size: 20px; color: var(--gold-soft); margin-bottom: 10px; }
.site-footer p, .site-footer a { display: block; color: var(--muted); margin: 6px 0; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid rgba(215,181,109,.13); margin-top: 28px; padding-top: 18px; color: var(--muted); }
@media (max-width: 980px) {
    .hero-grid, .topic-row, .contact-box { grid-template-columns: 1fr; }
    .grid.cols-4, .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .channel-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .glow-card { position: static; margin-top: 14px; max-width: none; }
}
@media (max-width: 720px) {
    .nav-toggle { display: block; }
    .site-nav { display: none; position: absolute; left: 16px; right: 16px; top: 72px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: rgba(8,8,8,.96); }
    .site-nav.is-open { display: grid; }
    .site-nav a { padding: 12px; }
    .hero { padding-top: 52px; }
    .section { padding: 54px 0; }
    .section-head { display: block; }
    .grid.cols-2, .grid.cols-3, .grid.cols-4, .channel-list, .footer-grid { grid-template-columns: 1fr; }
    .timeline-item { grid-template-columns: 1fr; }
    .footer-bottom { display: block; }
    .card h3 { font-size: 20px; }
}