* { margin:0; padding:0; box-sizing:border-box; }
:root{
    --bg:#0E0E12;
    --bg-2:#16161E;
    --bg-3:#1E1E2A;
    --card:#1A1A24;
    --border:rgba(255,255,255,.08);
    --text:#F2F2F7;
    --text-2:#A0A0B0;
    --text-3:#6A6A7A;
    --accent:#ffd242;
    --accent-2:#ffe580;
    --accent-3:#e6b800;
    --pink:#FD79A8;
    --gold:#FDCB6E;
    --green:#00B894;
    --radius:16px;
    --radius-sm:10px;
    --font:"Inter","PingFang SC","Microsoft YaHei",-apple-system,sans-serif;
}
html{ scroll-behavior:smooth; }
body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font);
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.section-wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }

/* ═══════ 导航 ═══════ */
.nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(14,14,18,.82);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
}
.nav-inner{
    max-width:1200px; margin:0 auto; padding:0 24px;
    height:64px;
    display:flex; align-items:center; justify-content:space-between;
    gap:20px;
}
.nav-brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-logo{ width:32px; height:32px; border-radius:8px; }
.nav-name{ font-size:16px; font-weight:800; letter-spacing:-.3px; color:var(--accent); }
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
    padding:8px 14px; border-radius:8px;
    font-size:13.5px; font-weight:600; color:var(--text-2);
    transition:.2s;
}
.nav-links a:hover{ color:var(--text); background:rgba(255,255,255,.06); }
.nav-cta{
    background:var(--accent) !important;
    color:#15140F !important;
    padding:9px 20px !important;
    border-radius:8px !important;
    font-weight:700 !important;
    margin-left:6px;
    box-shadow:0 4px 16px rgba(255,210,66,.35);
    transition:.2s;
}
.nav-cta:hover{ background:var(--accent-2) !important; transform:translateY(-1px); }
.nav-toggle{
    display:none;
    width:40px; height:40px;
    flex-direction:column; justify-content:center; align-items:center; gap:5px;
    border-radius:8px;
}
.nav-toggle span{ width:20px; height:2px; background:var(--text); border-radius:2px; transition:.3s; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
    position:fixed; top:64px; left:0; right:0; z-index:99;
    background:var(--bg-2);
    border-bottom:1px solid var(--border);
    padding:12px 24px 20px;
    display:none;
    flex-direction:column; gap:4px;
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{
    padding:12px 8px; border-radius:8px;
    font-size:15px; font-weight:600; color:var(--text-2);
    border-bottom:1px solid var(--border);
}
.mobile-menu a:hover{ color:var(--text); }
.mobile-cta{
    margin-top:10px; background:var(--accent); color:#15140F !important;
    text-align:center; border-radius:10px; font-weight:700;
    border-bottom:none !important;
}

/* ═══════ 主视觉 ═══════ */
.hero{
    position:relative;
    min-height:100vh;
    display:flex; align-items:center;
    padding:100px 0 60px;
    overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.hero-overlay{
    position:absolute; inset:0; z-index:1;
    background:
        linear-gradient(90deg, rgba(14,14,18,.96) 0%, rgba(14,14,18,.78) 45%, rgba(14,14,18,.4) 75%, rgba(14,14,18,.65) 100%),
        linear-gradient(0deg, var(--bg) 0%, rgba(14,14,18,0) 35%);
}
.hero-content{
    position:relative; z-index:2;
    max-width:1200px; margin:0 auto; padding:0 24px;
    width:100%;
    max-width:720px;
}
.hero-badge{
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(255,210,66,.12);
    border:1px solid rgba(255,210,66,.35);
    color:var(--accent);
    font-size:12px; font-weight:700; letter-spacing:.5px;
    padding:7px 14px; border-radius:100px;
    margin-bottom:20px;
}
.hero-title{
    font-size:clamp(42px, 7vw, 80px);
    font-weight:900;
    line-height:1.02;
    letter-spacing:-2px;
    margin-bottom:16px;
    background:linear-gradient(135deg, #fff 30%, var(--accent) 70%, var(--gold) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.hero-tagline{
    font-size:clamp(17px, 2vw, 21px);
    font-weight:600;
    color:var(--text);
    margin-bottom:14px;
    line-height:1.4;
}
.hero-desc{
    font-size:14.5px;
    color:var(--text-2);
    line-height:1.8;
    max-width:540px;
    margin-bottom:30px;
}
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px; }
.btn-primary{
    display:inline-flex; align-items:center; gap:10px;
    background:linear-gradient(135deg, var(--accent), var(--gold));
    color:#15140F;
    padding:15px 32px;
    border-radius:12px;
    font-size:15px; font-weight:800;
    box-shadow:0 8px 30px rgba(255,210,66,.35);
    transition:.25s;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 40px rgba(255,210,66,.5); }
.btn-play{
    font-size:11px;
    background:rgba(21,20,15,.2);
    width:26px; height:26px;
    border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
}
.btn-ghost{
    display:inline-flex; align-items:center;
    padding:15px 28px;
    border-radius:12px;
    font-size:15px; font-weight:600;
    color:var(--text-2);
    border:1.5px solid var(--border);
    transition:.25s;
}
.btn-ghost:hover{ color:var(--accent); border-color:rgba(255,210,66,.4); background:rgba(255,210,66,.05); }
.hero-meta{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    font-size:12.5px; color:var(--text-3); font-weight:600;
}
.hero-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--text-3); }

/* 右侧热播封面卡 */
.hero-poster{
    position:absolute; right:max(24px, calc((100vw - 1200px)/2 + 24px)); top:50%;
    transform:translateY(-50%);
    z-index:3;
    width:220px;
    background:rgba(26,26,36,.85);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,210,66,.25);
    border-radius:20px;
    padding:14px;
    box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.poster-frame{
    position:relative;
    border-radius:12px;
    overflow:hidden;
    aspect-ratio:3/4;
    margin-bottom:12px;
}
.poster-frame img{ width:100%; height:100%; object-fit:cover; }
.poster-tag{
    position:absolute; top:10px; left:10px;
    background:var(--accent);
    color:#15140F;
    font-size:10px; font-weight:800; letter-spacing:1px;
    padding:4px 10px; border-radius:100px;
}
.poster-info{ margin-bottom:12px; }
.poster-name{ font-size:15px; font-weight:800; margin-bottom:3px; }
.poster-sub{ font-size:11px; color:var(--accent); }
.poster-go{
    display:block; text-align:center;
    background:var(--accent);
    color:#15140F;
    font-size:12.5px; font-weight:800;
    padding:10px;
    border-radius:10px;
    transition:.2s;
}
.poster-go:hover{ background:var(--accent-2); }

/* ═══════ 数据条 ═══════ */
.stats-bar{
    background:var(--bg-2);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}
.stats-inner{
    max-width:1200px; margin:0 auto; padding:0 24px;
    display:grid; grid-template-columns:repeat(4,1fr);
}
.stat{
    text-align:center;
    padding:32px 16px;
    border-right:1px solid var(--border);
}
.stat:last-child{ border-right:none; }
.stat-num{
    font-size:clamp(28px, 3vw, 38px);
    font-weight:900;
    line-height:1;
    letter-spacing:-1px;
    margin-bottom:8px;
    background:linear-gradient(135deg, #fff, var(--accent));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.stat-num span{ font-size:.5em; margin-left:2px; }
.stat-label{ font-size:12px; color:var(--text-3); font-weight:600; }

/* ═══════ 通用 section ═══════ */
section{ padding:80px 0; }
.section-head{ margin-bottom:40px; }
.section-title{
    font-size:clamp(26px, 4vw, 38px);
    font-weight:900;
    line-height:1.15;
    letter-spacing:-1px;
    margin-bottom:10px;
}
.section-title .accent{
    color:var(--accent);
}
.section-desc{ font-size:14px; color:var(--text-3); }

/* ═══════ 剧情看点 ═══════ */
.story{ background:var(--bg); }
.story-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}
.story-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    transition:.3s;
}
.story-card:hover{
    transform:translateY(-6px);
    border-color:rgba(255,210,66,.45);
    box-shadow:0 20px 50px rgba(255,210,66,.12);
}
.story-img{ aspect-ratio:16/10; overflow:hidden; }
.story-img img{ width:100%; height:100%; object-fit:cover; transition:.5s; }
.story-card:hover .story-img img{ transform:scale(1.06); }
.story-body{ padding:18px 18px 20px; }
.story-body h3{ font-size:16.5px; font-weight:800; margin-bottom:8px; }
.story-body p{ font-size:12.5px; color:var(--text-2); line-height:1.65; margin-bottom:12px; }
.story-tag{
    display:inline-block;
    font-size:10.5px; font-weight:700; letter-spacing:.5px;
    color:var(--accent);
    background:rgba(255,210,66,.1);
    padding:4px 10px; border-radius:100px;
}

/* ═══════ 角色特写 ═══════ */
.characters{ background:var(--bg-2); }
.char-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:20px;
}
.char-main{
    position:relative;
    border-radius:var(--radius);
    overflow:hidden;
    min-height:440px;
}
.char-main img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.char-main::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(14,14,18,.95) 0%, rgba(14,14,18,.2) 55%, transparent 100%);
}
.char-main-overlay{
    position:relative; z-index:2;
    display:flex; flex-direction:column; justify-content:flex-end;
    height:100%; padding:32px;
}
.char-label{
    display:inline-block; width:fit-content;
    background:var(--accent);
    color:#15140F;
    font-size:10.5px; font-weight:800; letter-spacing:1.5px;
    padding:5px 12px; border-radius:100px;
    margin-bottom:14px;
}
.char-main-overlay h3{ font-size:clamp(20px, 2.5vw, 28px); font-weight:900; line-height:1.25; }
.char-list{ display:flex; flex-direction:column; gap:12px; }
.char-item{
    display:flex; align-items:center; gap:14px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:14px;
    transition:.25s;
}
.char-item:hover{ border-color:rgba(255,210,66,.45); background:var(--bg-3); }
.char-item-img{
    width:64px; height:64px;
    border-radius:10px;
    overflow:hidden;
    flex-shrink:0;
}
.char-item-img img{ width:100%; height:100%; object-fit:cover; }
.char-item-info .t{ font-size:14px; font-weight:700; margin-bottom:4px; line-height:1.35; }
.char-item-info .d{ font-size:11.5px; color:var(--text-3); }

/* ═══════ 热播榜 ═══════ */
.rank{ background:var(--bg); }
.rank-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.rank-tab{
    padding:9px 18px;
    border-radius:100px;
    font-size:13px; font-weight:700;
    color:var(--text-2);
    background:var(--card);
    border:1px solid var(--border);
    transition:.2s;
}
.rank-tab:hover{ color:var(--text); border-color:rgba(255,210,66,.35); }
.rank-tab.on{ background:var(--accent); color:#15140F; border-color:var(--accent); box-shadow:0 4px 16px rgba(255,210,66,.3); }
.rank-list{ display:flex; flex-direction:column; gap:10px; }
.rank-row{
    display:grid;
    grid-template-columns:48px 80px 1fr auto auto;
    align-items:center;
    gap:16px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:12px 18px;
    transition:.25s;
}
.rank-row:hover{ border-color:rgba(255,210,66,.45); background:var(--bg-3); transform:translateX(4px); }
.rank-num{
    font-size:22px; font-weight:900;
    color:var(--text-3);
    text-align:center;
    letter-spacing:-1px;
}
.rank-row:nth-child(1) .rank-num{ color:var(--accent); }
.rank-row:nth-child(2) .rank-num{ color:var(--accent-2); }
.rank-row:nth-child(3) .rank-num{ color:var(--accent-3); }
.rank-thumb{
    width:80px; height:52px;
    border-radius:8px;
    overflow:hidden;
    flex-shrink:0;
}
.rank-thumb img{ width:100%; height:100%; object-fit:cover; }
.rank-info .t{ font-size:14.5px; font-weight:700; margin-bottom:3px; }
.rank-info .d{ font-size:11px; color:var(--text-3); }
.rank-cat{
    font-size:10.5px; font-weight:700;
    color:var(--accent);
    background:rgba(255,210,66,.1);
    padding:4px 10px; border-radius:100px;
    white-space:nowrap;
}
.rank-heat{ font-size:13px; font-weight:800; color:var(--accent); white-space:nowrap; }
.rank-foot{
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    flex-wrap:wrap;
    margin-top:20px;
    padding:16px 20px;
    background:var(--bg-2);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    font-size:12px;
    color:var(--text-3);
}
.rank-foot a{ color:var(--accent); font-weight:700; }
.rank-foot a:hover{ color:var(--accent-2); }

/* ═══════ 正版对比 ═══════ */
.compare{ background:var(--bg-2); }
.compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.compare-col{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:28px 26px;
}
.compare-col.bad{ border-top:3px solid #E17055; }
.compare-col.good{ border-top:3px solid var(--accent); background:linear-gradient(160deg, rgba(255,210,66,.05), var(--card) 60%); }
.compare-head{ font-size:17px; font-weight:800; margin-bottom:18px; }
.compare-col.good .compare-head{ color:var(--accent); }
.compare-col ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.compare-col li{
    font-size:13.5px;
    color:var(--text-2);
    padding-left:24px;
    position:relative;
    line-height:1.5;
}
.compare-col.bad li::before{
    content:"✕"; position:absolute; left:0; top:1px;
    color:#E17055; font-weight:800; font-size:12px;
}
.compare-col.good li::before{
    content:"✓"; position:absolute; left:0; top:1px;
    color:var(--accent); font-weight:800; font-size:12px;
}

/* ═══════ 观众评价 ═══════ */
.reviews{ background:var(--bg); }
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.review-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:24px 22px;
    transition:.25s;
}
.review-card:hover{ border-color:rgba(255,210,66,.35); transform:translateY(-4px); }
.review-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:10px; }
.review-user{ display:flex; align-items:center; gap:10px; }
.review-avatar{ width:38px; height:38px; border-radius:50%; overflow:hidden; flex-shrink:0; }
.review-avatar img{ width:100%; height:100%; object-fit:cover; }
.review-name{ font-size:13.5px; font-weight:700; }
.review-meta{ font-size:10.5px; color:var(--text-3); }
.review-stars{ color:var(--accent); font-size:12px; letter-spacing:1px; white-space:nowrap; }
.review-card p{ font-size:13px; color:var(--text-2); line-height:1.75; }

/* ═══════ 下载观看 ═══════ */
.download{
    background:linear-gradient(160deg, #1C190E 0%, var(--bg-2) 50%, #141310 100%);
    position:relative; overflow:hidden;
}
.download::before{
    content:""; position:absolute; top:-150px; left:-150px;
    width:500px; height:500px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,210,66,.18), transparent 70%);
    pointer-events:none;
}
.download::after{
    content:""; position:absolute; bottom:-150px; right:-100px;
    width:400px; height:400px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,210,66,.1), transparent 70%);
    pointer-events:none;
}
.download .section-wrap{ position:relative; z-index:1; }
.download-head{ text-align:center; margin-bottom:44px; }
.download-kicker{
    display:inline-block;
    font-size:11px; font-weight:800; letter-spacing:3px;
    color:var(--accent);
    margin-bottom:14px;
}
.download-head h2{
    font-size:clamp(30px, 5vw, 46px);
    font-weight:900;
    line-height:1.12;
    letter-spacing:-1px;
    margin-bottom:16px;
}
.download-head p{
    font-size:14.5px; color:var(--text-2);
    max-width:540px; margin:0 auto;
    line-height:1.8;
}
.download-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.download-card{
    display:flex; align-items:center; gap:16px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:22px 24px;
    transition:.3s;
}
.download-card:hover{
    background:rgba(255,210,66,.08);
    border-color:rgba(255,210,66,.45);
    transform:translateY(-4px);
    box-shadow:0 16px 40px rgba(255,210,66,.12);
}
.download-icon{
    width:48px; height:48px; flex-shrink:0;
    border-radius:12px;
    background:linear-gradient(135deg, var(--accent), var(--gold));
    color:#15140F;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; font-weight:900;
    box-shadow:0 6px 18px rgba(255,210,66,.3);
}
.download-text{ flex:1; min-width:0; }
.download-text strong{ display:block; font-size:15px; font-weight:800; margin-bottom:4px; }
.download-text span{ font-size:11.5px; color:var(--text-3); }
.download-arrow{ font-size:16px; color:var(--text-3); transition:.3s; }
.download-card:hover .download-arrow{ color:var(--accent); transform:translateX(4px); }

/* ═══════ 常见问题 ═══════ */
.faq{ background:var(--bg); }
.faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.faq-item{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:20px 22px;
    transition:.25s;
}
.faq-item:hover{ border-color:rgba(255,210,66,.35); }
.faq-q{
    font-size:14.5px; font-weight:800;
    margin-bottom:10px;
    padding-left:26px;
    position:relative;
    line-height:1.45;
}
.faq-q::before{
    content:"Q"; position:absolute; left:0; top:0;
    width:18px; height:18px;
    background:var(--accent);
    color:#15140F;
    border-radius:50%;
    font-size:10px; font-weight:900;
    display:flex; align-items:center; justify-content:center;
}
.faq-a{
    font-size:13px; color:var(--text-2);
    line-height:1.75;
    padding-left:26px;
}

/* ═══════ 页脚 ═══════ */
.footer{
    background:var(--bg-2);
    border-top:1px solid var(--border);
    padding:48px 0 32px;
}
.footer-top{
    display:flex; justify-content:space-between; align-items:center;
    gap:24px; flex-wrap:wrap;
    padding-bottom:28px;
    border-bottom:1px solid var(--border);
    margin-bottom:24px;
}
.footer-brand{ display:flex; align-items:center; gap:12px; }
.footer-brand img{ width:40px; height:40px; border-radius:10px; }
.footer-name{ font-size:16px; font-weight:800; margin-bottom:2px; }
.footer-sub{ font-size:11.5px; color:var(--text-3); }
.footer-links{ display:flex; gap:6px; flex-wrap:wrap; }
.footer-links a{
    padding:8px 14px;
    font-size:13px; font-weight:600;
    color:var(--text-2);
    border-radius:8px;
    transition:.2s;
}
.footer-links a:hover{ color:var(--accent); background:rgba(255,210,66,.06); }
.footer-bottom p{
    font-size:11.5px; color:var(--text-3);
    line-height:1.8;
    max-width:800px;
    margin-bottom:12px;
}
.footer-copy{ font-size:11px !important; }

/* ═══════ 响应式 ═══════ */
@media (max-width:1024px){
    .hero-poster{ display:none; }
    .hero-content{ max-width:100%; }
    .story-grid{ grid-template-columns:repeat(3,1fr); }
    .char-grid{ grid-template-columns:1fr; }
    .char-main{ min-height:360px; }
    .review-grid{ grid-template-columns:1fr; }
    .download-cards{ grid-template-columns:1fr; }
    .faq-grid{ grid-template-columns:1fr; }
    .compare-grid{ grid-template-columns:1fr; }
}
@media (max-width:820px){
    .nav-links{ display:none; }
    .nav-toggle{ display:flex; }
    .story-grid{ grid-template-columns:repeat(2,1fr); }
    .stats-inner{ grid-template-columns:repeat(2,1fr); }
    .stat:nth-child(2){ border-right:none; }
    .stat:nth-child(1), .stat:nth-child(2){ border-bottom:1px solid var(--border); }
    .rank-row{ grid-template-columns:40px 64px 1fr auto; }
    .rank-cat{ display:none; }
    .rank-thumb{ width:64px; height:44px; }
    section{ padding:60px 0; }
    .hero{ padding:90px 0 48px; min-height:auto; }
}
@media (max-width:560px){
    .section-wrap{ padding:0 16px; }
    .story-grid{ grid-template-columns:1fr; }
    .stats-inner{ grid-template-columns:1fr 1fr; }
    .stat{ padding:24px 12px; }
    .hero-actions{ flex-direction:column; }
    .btn-primary, .btn-ghost{ justify-content:center; width:100%; }
    .footer-top{ flex-direction:column; align-items:flex-start; }
    .rank-row{ grid-template-columns:36px 56px 1fr; gap:12px; padding:10px 14px; }
    .rank-heat{ display:none; }
    .rank-thumb{ width:56px; height:40px; }
}