:root{
    --gold:#c9a96e;
    --gold-light:#e8d5a8;
    --gold-dark:#a8864a;
    --bg-dark:#0a0a0f;
    --bg-card:#14141c;
    --bg-card2:#1b1b26;
    --text-main:#f5f5f7;
    --text-sub:#a0a0a8;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family:'PingFang SC','HarmonyOS Sans SC','Microsoft YaHei',sans-serif;
    background:var(--bg-dark);
    color:var(--text-main);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  .font-serif-cn{font-family:'Songti SC','STSong','SimSun',serif}
  .gold-gradient-text{
    background:linear-gradient(135deg,#f3e5c0 0%,#c9a96e 40%,#a8864a 70%,#e8d5a8 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
  }
  .gold-gradient-bg{
    background:linear-gradient(135deg,#c9a96e 0%,#e8d5a8 50%,#a8864a 100%);
  }
  .gold-border{border:1px solid rgba(201,169,110,0.3)}
  .gold-glow{
    box-shadow:0 0 40px rgba(201,169,110,0.15),0 0 80px rgba(201,169,110,0.05);
  }
  .noise-bg::before{
    content:"";
    position:absolute;inset:0;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
    opacity:0.04;pointer-events:none;z-index:1;mix-blend-mode:overlay;
  }
  /* Hero */
  .hero-bg{
    background:
      radial-gradient(ellipse 80% 60% at 70% 20%,rgba(201,169,110,0.12) 0%,transparent 60%),
      radial-gradient(ellipse 60% 50% at 20% 80%,rgba(168,134,74,0.08) 0%,transparent 60%),
      linear-gradient(180deg,#0a0a0f 0%,#10101a 100%);
  }
  .hero-title{
    animation:fadeUp .9s cubic-bezier(.2,.8,.2,1) both;
  }
  .hero-sub{
    animation:fadeUp .9s cubic-bezier(.2,.8,.2,1) .15s both;
  }
  .hero-cta{
    animation:fadeUp .9s cubic-bezier(.2,.8,.2,1) .3s both;
  }
  .hero-visual{
    animation:fadeUp 1s cubic-bezier(.2,.8,.2,1) .2s both;
  }
  @keyframes fadeUp{
    from{opacity:.92;transform:translateY(18px)}
    to{opacity:1;transform:translateY(0)}
  }
  /* phone frame */
  .phone-frame{
    width:220px;height:440px;
    border-radius:32px;
    background:linear-gradient(145deg,#2a2a38,#0e0e15);
    border:1px solid rgba(255,255,255,0.08);
    padding:10px;
    position:relative;
    box-shadow:
      0 30px 60px rgba(0,0,0,0.6),
      0 0 0 1px rgba(201,169,110,0.15),
      inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .phone-screen{
    width:100%;height:100%;
    border-radius:24px;
    overflow:hidden;
    background:#000;
    position:relative;
  }
  .phone-screen img{width:100%;height:100%;object-fit:cover}
  .phone-notch{
    position:absolute;top:14px;left:50%;transform:translateX(-50%);
    width:70px;height:18px;background:#000;border-radius:12px;z-index:5;
  }
  /* poster card */
  .poster-card{
    position:relative;
    border-radius:12px;overflow:hidden;
    transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;
    cursor:pointer;
  }
  .poster-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(0,0,0,0.5),0 0 30px rgba(201,169,110,0.2);
  }
  .poster-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
  .poster-card:hover img{transform:scale(1.05)}
  .poster-overlay{
    position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,0.85) 100%);
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:16px;
  }
  .poster-tag{
    position:absolute;top:12px;left:12px;
    background:rgba(201,169,110,0.9);color:#0a0a0f;
    font-size:11px;font-weight:700;padding:3px 8px;border-radius:4px;
    letter-spacing:.5px;
  }
  /* nav */
  .nav-blur{
    backdrop-filter:blur(20px) saturate(180%);
    background:rgba(10,10,15,0.7);
    border-bottom:1px solid rgba(201,169,110,0.08);
  }
  /* feature */
  .feature-card{
    background:linear-gradient(145deg,rgba(30,30,42,0.6),rgba(20,20,28,0.8));
    border:1px solid rgba(255,255,255,0.06);
    border-radius:16px;
    padding:28px;
    transition:all .4s;
    position:relative;
    overflow:hidden;
  }
  .feature-card:hover{
    border-color:rgba(201,169,110,0.3);
    transform:translateY(-4px);
  }
  .feature-card::before{
    content:"";
    position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(201,169,110,0.5),transparent);
    opacity:0;transition:opacity .4s;
  }
  .feature-card:hover::before{opacity:1}
  .icon-box{
    width:52px;height:52px;border-radius:12px;
    background:linear-gradient(135deg,rgba(201,169,110,0.15),rgba(201,169,110,0.05));
    border:1px solid rgba(201,169,110,0.2);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:20px;
  }
  /* CTA button */
  .btn-primary{
    display:inline-flex;align-items:center;gap:10px;
    padding:14px 32px;border-radius:50px;
    background:linear-gradient(135deg,#c9a96e,#a8864a);
    color:#0a0a0f;font-weight:600;font-size:15px;
    letter-spacing:.5px;
    transition:all .3s;
    box-shadow:0 8px 24px rgba(201,169,110,0.3);
    text-decoration:none;
  }
  .btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 32px rgba(201,169,110,0.4);
    background:linear-gradient(135deg,#d8b97e,#b8965a);
  }
  .btn-ghost{
    display:inline-flex;align-items:center;gap:10px;
    padding:14px 32px;border-radius:50px;
    border:1px solid rgba(201,169,110,0.4);
    color:var(--gold-light);font-weight:500;font-size:15px;
    letter-spacing:.5px;transition:all .3s;text-decoration:none;
    background:rgba(201,169,110,0.05);
  }
  .btn-ghost:hover{
    background:rgba(201,169,110,0.12);
    border-color:rgba(201,169,110,0.6);
  }
  /* section heading */
  .section-label{
    display:inline-flex;align-items:center;gap:10px;
    font-size:13px;letter-spacing:3px;text-transform:uppercase;
    color:var(--gold);font-weight:500;margin-bottom:14px;
  }
  .section-label::before{
    content:"";width:28px;height:1px;background:var(--gold);
  }
  /* stats */
  .stat-num{
    font-family:'Georgia',serif;
    font-size:42px;font-weight:700;
    background:linear-gradient(135deg,#f3e5c0,#c9a96e);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    line-height:1;
  }
  /* category pill */
  .cat-pill{
    padding:8px 20px;border-radius:50px;
    border:1px solid rgba(201,169,110,0.25);
    color:var(--gold-light);font-size:14px;
    transition:all .3s;cursor:pointer;
    background:rgba(201,169,110,0.04);
  }
  .cat-pill:hover{
    background:rgba(201,169,110,0.15);
    border-color:rgba(201,169,110,0.5);
    color:#fff;
  }
  /* decorative lines */
  .divider-gold{
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(201,169,110,0.4),transparent);
    margin:0 auto;
  }
  /* floating elements */
  .float-deco{
    position:absolute;border-radius:50%;
    filter:blur(60px);opacity:.4;pointer-events:none;
  }
  /* marquee */
  .marquee-wrap{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
  .marquee-track{display:flex;gap:16px;animation:scroll 30s linear infinite;width:max-content}
  @keyframes scroll{to{transform:translateX(-50%)}}
  /* footer */
  footer{background:#06060a;border-top:1px solid rgba(201,169,110,0.08)}
  /* responsive */
  @media (max-width:768px){
    .phone-frame{width:180px;height:360px}
    .stat-num{font-size:32px}
  }


.people-grid,.hl-grid,.tag-cloud{display:grid;gap:12px;margin:12px 0}
.people-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.person-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
.person-card h3{margin:0 0 4px;font-size:16px}.person-card .role{color:var(--accent);font-size:12px}
.person-card p{margin:8px 0 0;color:var(--muted);font-size:13px}
.hl-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.hl-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
.hl-card h3{margin:0 0 6px;font-size:15px}.hl-card p{margin:0;color:var(--muted);font-size:13px}
.tag-cloud{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.tag-chip{background:var(--card);border:1px dashed var(--line);border-radius:999px;padding:8px 12px;text-align:center;font-size:13px;color:var(--muted)}
.sec-desc{color:var(--muted);font-size:13px;margin:0 0 10px}
/* 视频卡加分：图铺满参站封面盒（保留 aspect-ratio），角标钉封面右下常显 */
/* 含相关小卡 .rc；门面 hero-poster / hero-banner / .hero .poster */
.card-cover,.cover,.thumb,.poster-cover,.rel-cover,.related-cover,.rel-thumb,
.rc-cover,.rcover,.rec-poster,.drama-cover,.poster,.pic,.rc,
.hero-poster,.hero-banner{
  position:relative !important;
  overflow:hidden;
}
.card-cover>img,.cover>img,.thumb>img,.poster-cover>img,.rel-cover>img,
.related-cover>img,.rel-thumb>img,.rc-cover>img,.rcover>img,.rec-poster>img,
.drama-cover>img,.poster>img,.pic>img,.rc>img,
.hero-poster>img,.hero-banner>img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;height:100% !important;
  object-fit:cover !important;
  z-index:0;
  display:block;
}
span.vid-dur,.vid-dur{
  position:absolute !important;
  right:8px !important;bottom:8px !important;left:auto !important;top:auto !important;
  z-index:20 !important;
  opacity:1 !important;visibility:visible !important;display:inline-block !important;
  padding:2px 7px;font-size:12px;line-height:1.25;font-weight:600;
  background:rgba(0,0,0,.78) !important;color:#fff !important;
  border-radius:4px;pointer-events:none;white-space:nowrap;
  transform:none !important;
}
.vid-plays{margin:4px 0 0;font-size:12px;color:var(--muted)}