:root{
    --ink:#15121c;
    --ink-soft:#272233;
    --cream:#faf7f2;
    --muted:#6f6a7a;
    --accent:#d8456b;
    --accent-soft:#ffe4ec;
    --gold:#c9a25a;
    --card:#ffffff;
    --line:#e8e3da;
    --radius:18px;
    --shadow:0 10px 30px rgba(21,18,28,.08);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
    background:var(--cream);
    color:var(--ink);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  .wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px;}
  .eyebrow{
    display:inline-block;
    font-size:12px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--accent);
    font-weight:700;
    margin-bottom:10px;
  }
  .sec-title{font-size:clamp(24px,3.2vw,34px);line-height:1.3;letter-spacing:.01em;}
  .sec-sub{color:var(--muted);font-size:15px;margin-top:10px;max-width:640px;}

  /* ---------- header ---------- */
  .site-header{
    position:sticky;top:0;z-index:60;
    background:rgba(250,247,242,.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .header-inner{
    display:flex;align-items:center;gap:18px;
    height:64px;
  }
  .brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
  .brand img{height:34px;width:auto;border-radius:8px;}
  .brand-name{font-size:17px;font-weight:800;letter-spacing:.02em;white-space:nowrap;}
  .nav{display:none;flex:1;}
  .nav ul{display:flex;gap:22px;list-style:none;font-size:14px;color:var(--ink-soft);}
  .nav a{padding:6px 0;border-bottom:2px solid transparent;transition:border-color .2s,color .2s;}
  .nav a:hover{color:var(--accent);border-color:var(--accent);}
  .header-cta{
    margin-left:auto;
    display:inline-flex;align-items:center;gap:6px;
    background:var(--ink);color:#fff;
    font-size:13px;font-weight:600;
    padding:9px 16px;border-radius:999px;
    white-space:nowrap;
    transition:transform .2s, background .2s;
  }
  .header-cta:hover{background:var(--accent);transform:translateY(-1px);}
  .menu-toggle{
    display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:38px;height:38px;border:1px solid var(--line);border-radius:10px;
    background:#fff;cursor:pointer;padding:0 9px;
  }
  .menu-toggle span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s;}
  .mobile-nav{display:none;border-top:1px solid var(--line);background:var(--cream);}
  .mobile-nav.open{display:block;}
  .mobile-nav ul{list-style:none;padding:8px 20px 16px;}
  .mobile-nav li{border-bottom:1px dashed var(--line);}
  .mobile-nav li:last-child{border-bottom:none;}
  .mobile-nav a{display:block;padding:12px 0;font-size:15px;color:var(--ink-soft);}

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    background:radial-gradient(1200px 500px at 80% -10%, #2b2036 0%, #15121c 55%, #0f0d14 100%);
    color:#fff;
    overflow:hidden;
    padding:44px 0 56px;
  }
  .hero::after{
    content:"";position:absolute;inset:auto -10% -60% 40%;
    height:420px;background:radial-gradient(circle, rgba(216,69,107,.35), transparent 65%);
    pointer-events:none;
  }
  .hero-grid{position:relative;z-index:2;display:grid;gap:34px;}
  .hero-copy .eyebrow{color:#ff9ab4;}
  .hero h1{
    font-size:clamp(30px,5.4vw,52px);
    line-height:1.22;
    letter-spacing:.01em;
    font-weight:800;
  }
  .hero h1 em{font-style:normal;color:#ffb3c4;}
  .hero-lead{margin-top:16px;color:#cfc8d8;font-size:16px;max-width:520px;}
  .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:13px 26px;border-radius:999px;font-size:15px;font-weight:700;
    transition:transform .2s, box-shadow .2s, background .2s;
  }
  .btn-primary{background:linear-gradient(135deg,#e0567a,#c2315a);color:#fff;box-shadow:0 12px 26px rgba(216,69,107,.35);}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(216,69,107,.45);}
  .btn-ghost{border:1px solid rgba(255,255,255,.28);color:#fff;}
  .btn-ghost:hover{background:rgba(255,255,255,.1);}
  .hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;}
  .hero-tags span{
    font-size:12.5px;color:#e8e2ef;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.06);
    padding:5px 12px;border-radius:999px;
  }

  /* carousel */
  .carousel{position:relative;}
  .carousel-track{
    display:flex;gap:16px;overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:12px;
    scrollbar-width:none;
  }
  .carousel-track::-webkit-scrollbar{display:none;}
  .slide{
    flex:0 0 78%;
    scroll-snap-align:center;
    border-radius:22px;
    overflow:hidden;
    position:relative;
    box-shadow:0 22px 44px rgba(0,0,0,.45);
    background:#221c2b;
  }
  .slide img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;transition:transform .6s;}
  .slide:hover img{transform:scale(1.04);}
  .slide-caption{
    position:absolute;left:0;right:0;bottom:0;
    padding:52px 18px 16px;
    background:linear-gradient(to top, rgba(9,8,13,.92), rgba(9,8,13,0));
    color:#fff;
  }
  .slide-caption h3{font-size:17px;font-weight:800;letter-spacing:.02em;}
  .slide-caption p{font-size:12.5px;color:#d7d0e2;margin-top:3px;}
  .carousel-dots{display:flex;justify-content:center;gap:8px;margin-top:14px;}
  .carousel-dots button{
    width:22px;height:5px;border-radius:999px;border:none;cursor:pointer;
    background:rgba(255,255,255,.25);transition:background .25s,width .25s;
  }
  .carousel-dots button.active{background:#ff8fae;width:34px;}
  .carousel-hint{text-align:center;font-size:12px;color:#8f889d;margin-top:8px;}

  /* ---------- generic section ---------- */
  .section{padding:64px 0;}
  .section.alt{background:#fff;}
  .section-head{
    display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
    gap:16px;margin-bottom:32px;
  }
  .link-more{font-size:14px;font-weight:700;color:var(--accent);display:inline-flex;align-items:center;gap:6px;}
  .link-more::after{content:"→";}

  /* poster grid */
  .poster-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }
  .poster{
    background:var(--card);
    border-radius:16px;
    overflow:hidden;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    transition:transform .25s, box-shadow .25s;
  }
  .poster:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(21,18,28,.14);}
  .poster img{width:100%;aspect-ratio:3/4;object-fit:cover;}
  .poster-body{padding:12px 14px 16px;}
  .poster-body h3{font-size:15px;font-weight:800;line-height:1.4;}
  .poster-body p{font-size:12.5px;color:var(--muted);margin-top:4px;}
  .badge{
    display:inline-block;margin-top:10px;
    font-size:11.5px;font-weight:700;
    color:var(--accent);background:var(--accent-soft);
    padding:3px 9px;border-radius:6px;
  }

  /* hot list */
  .hot-list{display:grid;gap:14px;}
  .hot-item{
    display:flex;gap:14px;align-items:center;
    background:var(--card);border:1px solid var(--line);
    border-radius:16px;padding:12px;
    transition:transform .22s, border-color .22s;
  }
  .hot-item:hover{transform:translateX(4px);border-color:var(--accent);}
  .hot-item img{width:64px;height:86px;object-fit:cover;border-radius:10px;flex:0 0 auto;}
  .hot-index{
    font-size:20px;font-weight:900;color:var(--gold);
    min-width:26px;text-align:center;flex:0 0 auto;
  }
  .hot-text h3{font-size:15px;font-weight:800;}
  .hot-text p{font-size:12.5px;color:var(--muted);margin-top:3px;}

  /* AI feature */
  .ai-block{
    display:grid;gap:28px;align-items:center;
    background:linear-gradient(135deg,#191423,#2c1d33);
    border-radius:26px;padding:28px 24px;color:#fff;
    overflow:hidden;position:relative;
  }
  .ai-block::before{
    content:"";position:absolute;width:320px;height:320px;border-radius:50%;
    background:radial-gradient(circle,rgba(201,162,90,.35),transparent 70%);
    right:-90px;top:-110px;
  }
  .ai-copy{position:relative;z-index:2;}
  .ai-copy .eyebrow{color:var(--gold);}
  .ai-copy h2{font-size:clamp(22px,3vw,30px);line-height:1.35;}
  .ai-copy p{color:#cfc7dc;font-size:14.5px;margin-top:12px;max-width:520px;}
  .ai-points{display:grid;gap:10px;margin-top:20px;}
  .ai-points li{list-style:none;font-size:14px;color:#e9e3f2;display:flex;gap:10px;align-items:flex-start;}
  .ai-points li::before{
    content:"";flex:0 0 auto;width:7px;height:7px;margin-top:8px;border-radius:50%;
    background:var(--gold);
  }
  .ai-pic{border-radius:18px;overflow:hidden;position:relative;z-index:2;box-shadow:0 20px 40px rgba(0,0,0,.45);}
  .ai-pic img{width:100%;aspect-ratio:4/3;object-fit:cover;}

  /* genre chips + split */
  .split{display:grid;gap:28px;align-items:start;}
  .genre-rows{display:grid;gap:12px;}
  .genre-row{
    background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:16px 18px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
    transition:border-color .2s, box-shadow .2s;
  }
  .genre-row:hover{border-color:var(--accent);box-shadow:var(--shadow);}
  .genre-row strong{font-size:14.5px;min-width:74px;}
  .chip{
    font-size:12.5px;color:var(--ink-soft);
    background:#f4f0e9;border-radius:999px;padding:5px 12px;
  }
  .side-note{
    background:var(--accent-soft);border-radius:16px;padding:20px;
    font-size:14px;color:#7a2740;border:1px solid #ffd0dd;
  }
  .side-note h3{font-size:16px;font-weight:800;color:#8c2244;margin-bottom:8px;}

  /* steps */
  .steps{display:grid;gap:16px;counter-reset:step;}
  .step{
    background:#fff;border:1px solid var(--line);border-radius:16px;
    padding:20px 20px 20px 64px;position:relative;
    transition:transform .22s, border-color .22s;
  }
  .step:hover{transform:translateY(-3px);border-color:var(--accent);}
  .step::before{
    counter-increment:step;content:counter(step);
    position:absolute;left:18px;top:18px;
    width:32px;height:32px;border-radius:50%;
    background:var(--ink);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:14px;font-weight:800;
  }
  .step h3{font-size:16px;font-weight:800;}
  .step p{font-size:14px;color:var(--muted);margin-top:6px;}

  /* gallery strip */
  .strip{
    display:flex;gap:14px;overflow-x:auto;
    padding:4px 0 18px;scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .strip::-webkit-scrollbar{display:none;}
  .strip figure{flex:0 0 150px;scroll-snap-align:start;}
  .strip img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;box-shadow:var(--shadow);}
  .strip figcaption{font-size:12.5px;color:var(--muted);margin-top:8px;text-align:center;}

  /* download band */
  .download-band{
    background:var(--ink);color:#fff;border-radius:26px;
    padding:34px 24px;display:grid;gap:24px;align-items:center;
    position:relative;overflow:hidden;
  }
  .download-band::after{
    content:"";position:absolute;right:-80px;bottom:-120px;
    width:280px;height:280px;border-radius:50%;
    background:radial-gradient(circle,rgba(216,69,107,.5),transparent 70%);
  }
  .download-band h2{font-size:clamp(22px,3vw,30px);line-height:1.35;position:relative;z-index:2;}
  .download-band p{color:#c9c3d4;font-size:14.5px;margin-top:10px;position:relative;z-index:2;max-width:520px;}
  .download-band .btn{position:relative;z-index:2;justify-self:start;}

  /* faq */
  .faq-list{display:grid;gap:12px;}
  .faq-list details{
    background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:16px 18px;
  }
  .faq-list summary{
    font-size:15px;font-weight:700;cursor:pointer;list-style:none;
    display:flex;justify-content:space-between;gap:12px;align-items:center;
  }
  .faq-list summary::-webkit-details-marker{display:none;}
  .faq-list summary::after{content:"+";font-size:18px;color:var(--accent);font-weight:400;}
  .faq-list details[open] summary::after{content:"–";}
  .faq-list p{font-size:14px;color:var(--muted);margin-top:10px;}

  /* footer */
  .site-footer{background:#0f0d14;color:#a9a2b8;padding:44px 0 26px;font-size:13.5px;}
  .footer-top{display:grid;gap:28px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.1);}
  .footer-brand{display:flex;align-items:center;gap:10px;color:#fff;}
  .footer-brand img{height:32px;border-radius:8px;}
  .footer-brand span{font-size:16px;font-weight:800;}
  .footer-desc{margin-top:12px;max-width:420px;line-height:1.8;color:#918aa4;}
  .footer-nav{display:flex;flex-wrap:wrap;gap:10px 22px;}
  .footer-nav a{color:#b9b2c9;transition:color .2s;}
  .footer-nav a:hover{color:#fff;}
  .footer-bottom{padding-top:20px;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;color:#726c82;font-size:12.5px;}
  .footer-bottom time{color:#8b8499;}

  /* reveal (可见为初始状态) */
  .reveal{transform:translateY(0);transition:transform .6s ease;}
  .reveal.will-move{transform:translateY(22px);}

  /* ---------- breakpoints ---------- */
  @media (min-width:768px){
    .wrap{padding:0 32px;}
    .poster-grid{grid-template-columns:repeat(3,1fr);gap:20px;}
    .hot-list{grid-template-columns:repeat(2,1fr);}
    .steps{grid-template-columns:repeat(2,1fr);}
    .ai-block{grid-template-columns:1.1fr .9fr;padding:36px 32px;}
    .split{grid-template-columns:1.4fr 1fr;}
    .download-band{grid-template-columns:1fr auto;padding:44px 40px;}
    .download-band .btn{justify-self:end;}
    .slide{flex:0 0 46%;}
    .footer-top{grid-template-columns:1.2fr 1fr;}
    .strip figure{flex:0 0 180px;}
    .section{padding:80px 0;}
  }
  @media (min-width:1024px){
    .nav{display:block;}
    .menu-toggle{display:none;}
    .mobile-nav{display:none !important;}
    .hero{padding:66px 0 78px;}
    .hero-grid{grid-template-columns:1fr 1.05fr;align-items:center;gap:48px;}
    .slide{flex:0 0 40%;}
    .poster-grid{grid-template-columns:repeat(4,1fr);}
    .hot-list{grid-template-columns:repeat(2,1fr);gap:16px;}
    .steps{grid-template-columns:repeat(4,1fr);}
  }