:root{
    --purple-900:#25113f;
    --purple-800:#351b57;
    --purple-700:#4b2478;
    --purple-600:#6a35a8;
    --purple-500:#8b4fd6;
    --purple-400:#a97ae8;
    --purple-300:#cbb0f3;
    --purple-100:#f1e9fc;
    --ink:#171021;
    --ink-soft:#4c4358;
    --white:#ffffff;
    --paper:#faf7ff;
    --radius:18px;
    --shadow:0 14px 36px rgba(52,20,92,.16);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
    background:var(--paper);
    color:var(--ink);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  img{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  h1,h2,h3{margin:0;line-height:1.3;}
  p{margin:0;}
  .wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px;}
  .eyebrow{
    display:inline-block;font-size:13px;letter-spacing:.14em;
    color:var(--purple-600);font-weight:700;margin-bottom:12px;
  }

  /* ---------- header ---------- */
  .site-header{
    position:sticky;top:0;z-index:50;
    background:rgba(37,17,63,.94);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(203,176,243,.18);
  }
  .header-inner{
    display:flex;align-items:center;justify-content:space-between;
    gap:16px;height:64px;
  }
  .brand{display:flex;align-items:center;gap:10px;}
  .brand img{height:32px;width:auto;border-radius:8px;}
  .brand-name{color:var(--white);font-weight:800;font-size:17px;letter-spacing:.02em;}
  .nav{display:flex;gap:26px;}
  .nav a{color:var(--purple-300);font-size:14px;font-weight:600;transition:color .2s;}
  .nav a:hover{color:var(--white);}
  .header-cta{
    display:inline-flex;align-items:center;gap:8px;
    background:linear-gradient(135deg,var(--purple-500),var(--purple-600));
    color:var(--white);font-weight:700;font-size:14px;
    padding:9px 20px;border-radius:999px;
    box-shadow:0 6px 18px rgba(139,79,214,.4);
    transition:transform .2s;
  }
  .header-cta:hover{transform:translateY(-1px);}

  /* ---------- hero ---------- */
  .hero{
    background:
      radial-gradient(circle at 82% 8%,rgba(139,79,214,.42),transparent 52%),
      radial-gradient(circle at 12% 92%,rgba(75,36,120,.55),transparent 55%),
      linear-gradient(160deg,#25113f 0%,#3a1a5e 48%,#22103a 100%);
    color:var(--white);
    padding:76px 0 84px;
    position:relative;
    overflow:hidden;
  }
  .hero::after{
    content:"";position:absolute;right:-120px;top:-90px;
    width:420px;height:420px;border-radius:50%;
    border:1px solid rgba(203,176,243,.18);
  }
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;position:relative;z-index:2;}
  .hero h1{
    font-size:44px;font-weight:900;letter-spacing:-.01em;
    margin-bottom:20px;
  }
  .hero h1 em{
    font-style:normal;
    background:linear-gradient(100deg,#c9a4ff,#8b4fd6 60%,#b98cff);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero-lead{font-size:17px;color:#d8c8f2;max-width:33em;margin-bottom:14px;}
  .hero-sub{font-size:14.5px;color:#a892c9;max-width:34em;margin-bottom:30px;}
  .hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
  .btn-primary{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    background:linear-gradient(135deg,#9d63ec,#6a35a8);
    color:var(--white);font-weight:800;font-size:16px;
    padding:16px 34px;border-radius:999px;
    box-shadow:0 0 0 4px rgba(157,99,236,.22),0 14px 30px rgba(106,53,168,.55);
    transition:transform .2s,box-shadow .2s;
  }
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 6px rgba(157,99,236,.26),0 18px 36px rgba(106,53,168,.6);}
  .btn-ghost{
    display:inline-flex;align-items:center;gap:8px;
    color:#d8c8f2;font-weight:700;font-size:15px;
    border:1px solid rgba(203,176,243,.35);
    padding:14px 24px;border-radius:999px;
  }
  .hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;}
  .hero-tags span{
    font-size:13px;color:#e2d4fb;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(203,176,243,.2);
    padding:6px 14px;border-radius:999px;
  }
  .phone-stage{position:relative;display:flex;justify-content:center;}
  .phone{
    width:266px;border-radius:36px;
    background:linear-gradient(160deg,#4b2478,#1d0e33);
    padding:12px;
    box-shadow:0 30px 60px rgba(10,3,24,.6),0 0 0 1px rgba(203,176,243,.22);
  }
  .phone-screen{
    border-radius:26px;overflow:hidden;background:#120a1f;
    display:grid;grid-template-columns:1fr 1fr;gap:3px;
  }
  .phone-screen img{width:100%;height:118px;object-fit:cover;}
  .phone-floating{
    position:absolute;right:-6px;bottom:26px;
    width:132px;border-radius:14px;overflow:hidden;
    border:2px solid rgba(203,176,243,.4);
    box-shadow:0 18px 34px rgba(10,3,24,.6);
  }
  .phone-floating img{width:100%;height:180px;object-fit:cover;}

  /* ---------- sections ---------- */
  section{position:relative;}
  .section-pad{padding:76px 0;}
  .section-head{max-width:660px;margin-bottom:40px;}
  .section-head h2{font-size:31px;font-weight:900;letter-spacing:-.01em;color:var(--ink);}
  .section-head p{font-size:15.5px;color:var(--ink-soft);margin-top:12px;}
  .section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

  /* intro */
  .intro{background:var(--white);}
  .intro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .intro-card{
    background:var(--paper);
    border:1px solid var(--purple-100);
    border-radius:var(--radius);
    padding:28px 26px;
  }
  .intro-card .num{
    font-size:13px;font-weight:800;color:var(--purple-500);
    letter-spacing:.12em;margin-bottom:14px;display:block;
  }
  .intro-card h3{font-size:19px;font-weight:800;margin-bottom:10px;}
  .intro-card p{font-size:14.5px;color:var(--ink-soft);}

  /* reasons */
  .reasons{background:linear-gradient(180deg,#f5eeff,#faf7ff);}
  .reason-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .reason{
    background:var(--white);border-radius:16px;padding:26px 22px;
    border-top:3px solid var(--purple-500);
    box-shadow:0 6px 20px rgba(52,20,92,.07);
  }
  .reason h3{font-size:17px;font-weight:800;margin-bottom:9px;color:var(--purple-800);}
  .reason p{font-size:14px;color:var(--ink-soft);}

  /* hot list */
  .hot{background:var(--white);}
  .poster-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .poster{
    background:#120a1f;border-radius:14px;overflow:hidden;
    box-shadow:var(--shadow);position:relative;
  }
  .poster img{width:100%;height:300px;object-fit:cover;transition:transform .45s;}
  .poster:hover img{transform:scale(1.04);}
  .poster-meta{padding:13px 14px 15px;background:var(--white);}
  .poster-meta strong{display:block;font-size:15px;font-weight:800;color:var(--ink);}
  .poster-meta span{font-size:12.5px;color:var(--purple-600);font-weight:600;}

  /* topics */
  .topics{background:var(--purple-900);color:var(--white);}
  .topics .section-head h2{color:var(--white);}
  .topics .section-head p{color:#bda6de;}
  .topic-list{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .topic{
    display:flex;gap:16px;align-items:flex-start;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(203,176,243,.18);
    border-radius:16px;padding:20px;
  }
  .topic img{width:78px;height:104px;object-fit:cover;border-radius:10px;flex:none;}
  .topic h3{font-size:16.5px;font-weight:800;margin-bottom:6px;color:#f1e9fc;}
  .topic p{font-size:13.5px;color:#bda6de;}

  /* picker */
  .picker{background:linear-gradient(180deg,#faf7ff,#f1e9fc);}
  .picker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
  .pick-card{
    background:var(--white);border-radius:16px;padding:24px;
    box-shadow:0 8px 24px rgba(52,20,92,.08);
    border:1px solid var(--purple-100);
  }
  .pick-card span{
    display:inline-block;font-size:12px;font-weight:800;
    color:var(--white);background:var(--purple-500);
    padding:4px 12px;border-radius:999px;margin-bottom:14px;
  }
  .pick-card h3{font-size:18px;font-weight:800;margin-bottom:8px;}
  .pick-card p{font-size:14px;color:var(--ink-soft);}

  /* gallery */
  .gallery{background:var(--white);}
  .scroll-rail{
    display:grid;grid-auto-flow:column;grid-auto-columns:190px;
    gap:16px;overflow-x:auto;padding-bottom:16px;
    scroll-snap-type:x mandatory;
  }
  .scroll-rail::-webkit-scrollbar{height:6px;}
  .scroll-rail::-webkit-scrollbar-thumb{background:var(--purple-300);border-radius:99px;}
  .rail-item{scroll-snap-align:start;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);}
  .rail-item img{width:100%;height:264px;object-fit:cover;}

  /* faq */
  .faq{background:var(--paper);}
  .faq-list{max-width:820px;margin:0 auto;display:grid;gap:14px;}
  .faq-item{
    background:var(--white);border-radius:14px;
    border:1px solid var(--purple-100);
    padding:22px 26px;
  }
  .faq-item h3{font-size:16.5px;font-weight:800;color:var(--purple-800);margin-bottom:8px;}
  .faq-item p{font-size:14.5px;color:var(--ink-soft);}

  /* reviews */
  .reviews{background:var(--purple-800);color:var(--white);}
  .reviews .section-head h2{color:var(--white);}
  .reviews .section-head p{color:#c2aae2;}
  .review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .review{
    background:rgba(255,255,255,.07);
    border:1px solid rgba(203,176,243,.2);
    border-radius:16px;padding:24px;
  }
  .review p{font-size:14.5px;color:#eadffa;margin-bottom:16px;}
  .review footer{font-size:13px;color:var(--purple-300);font-weight:700;}

  /* download */
  .download{
    background:
      radial-gradient(circle at 20% 20%,rgba(157,99,236,.4),transparent 55%),
      linear-gradient(135deg,#2c1249,#4b2478 55%,#1d0e33);
    color:var(--white);
    padding:84px 0;
    text-align:center;
  }
  .download h2{font-size:34px;font-weight:900;margin-bottom:16px;}
  .download p{font-size:15.5px;color:#cbb0f3;max-width:40em;margin:0 auto 34px;}
  .btn-download{
    display:inline-flex;align-items:center;gap:12px;
    background:linear-gradient(135deg,#c9a4ff,#9d63ec 45%,#7a3fbe);
    color:#1d0e33;font-weight:900;font-size:19px;
    padding:20px 52px;border-radius:999px;
    box-shadow:0 0 0 6px rgba(157,99,236,.2),0 20px 44px rgba(0,0,0,.4);
    transition:transform .22s,box-shadow .22s;
  }
  .btn-download:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 0 0 9px rgba(157,99,236,.26),0 24px 52px rgba(0,0,0,.46);}
  .download-note{font-size:13px;color:#a892c9;margin-top:22px;}

  /* footer */
  .site-footer{
    background:#160a26;color:#8d7aa8;
    padding:34px 0 40px;font-size:12.5px;
  }
  .footer-inner{
    display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
    align-items:flex-start;
  }
  .footer-inner p{max-width:52em;color:#8d7aa8;}
  .footer-inner a{color:#a892c9;border-bottom:1px solid rgba(168,146,201,.35);}
  .footer-time{color:#75638f;}

  @media (max-width:1024px){
    .hero-grid{grid-template-columns:1fr;gap:44px;}
    .hero h1{font-size:37px;}
    .phone-stage{order:-1;}
    .reason-grid{grid-template-columns:repeat(2,1fr);}
    .poster-grid{grid-template-columns:repeat(3,1fr);}
    .intro-grid,.topic-list,.picker-grid,.review-grid{grid-template-columns:repeat(2,1fr);}
    .nav{display:none;}
  }
  @media (max-width:768px){
    .header-inner{height:58px;}
    .hero{padding:52px 0 60px;}
    .hero h1{font-size:29px;}
    .hero-lead{font-size:15.5px;}
    .btn-primary{padding:14px 26px;font-size:15px;}
    .section-pad{padding:52px 0;}
    .section-head h2{font-size:24px;}
    .intro-grid,.reason-grid,.topic-list,.picker-grid,.review-grid{grid-template-columns:1fr;}
    .poster-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
    .poster img{height:232px;}
    .scroll-rail{grid-auto-columns:150px;}
    .rail-item img{height:212px;}
    .download h2{font-size:25px;}
    .btn-download{padding:17px 34px;font-size:16.5px;}
    .footer-inner{display:block;}
    .footer-inner p{margin-bottom:10px;}
  }