/* ===== Hanzi Master — landing ===== */
:root{
  --bg:#0a0a0c; --bg-2:#0d0c10; --bg-3:#08080a;
  --surface:#16151b; --surface-2:#1b1922;
  --line:rgba(216,184,115,.14); --line-soft:rgba(255,255,255,.07);
  --ink:#f5f1e8; --muted:#9b958a; --muted-2:#6f6a62;
  --gold:#d8b873; --gold-bright:#f1dca0; --gold-deep:#b9923a;
  --grad-gold:linear-gradient(120deg,#f3dca0 0%,#d8b873 45%,#b9923a 100%);
  --r-a:#8ec0ff; --r-a-bg:rgba(59,130,246,.16);
  --r-s:#6fe3b4; --r-s-bg:rgba(16,185,129,.16);
  --r-z:#f6cf63; --r-z-bg:rgba(245,158,11,.18);
  --r-c:#c7b6fb; --r-c-bg:rgba(139,92,246,.18);
  --r-m:#ff9fb0; --r-m-bg:rgba(244,63,94,.16);
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --cjk:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Heiti SC',sans-serif;
  --wrap:1140px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  line-height:1.55; overflow-x:hidden; position:relative;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
em{font-style:italic;}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.narrow{max-width:760px;}
.center{text-align:center;}

/* ---- ambient background ---- */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;}
.glow-gold{width:620px;height:620px;top:-200px;right:-160px;background:radial-gradient(circle,rgba(216,184,115,.30),transparent 65%);}
.glow-deep{width:680px;height:680px;bottom:-260px;left:-200px;background:radial-gradient(circle,rgba(120,90,40,.22),transparent 65%);}
.enso{position:absolute;top:-160px;right:-120px;width:560px;height:560px;border-radius:50%;
  border:2px solid rgba(216,184,115,.16);
  mask:conic-gradient(from 200deg, transparent 0 8%, #000 12% 92%, transparent 96%);
  -webkit-mask:conic-gradient(from 200deg, transparent 0 8%, #000 12% 92%, transparent 96%);}

main,.nav,.footer{position:relative;z-index:1;}

/* ---- nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent;}
.nav.scrolled{background:rgba(10,10,12,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px;}
.brand{display:flex;align-items:center;gap:11px;font-weight:600;font-size:17px;letter-spacing:-.01em;}
.brand-mark{width:30px;height:30px;border-radius:8px;}
.nav-links{display:flex;gap:30px;}
.nav-links a{color:var(--muted);font-size:14.5px;font-weight:500;transition:color .2s;}
.nav-links a:hover{color:var(--ink);}
.nav-cta{font-size:14px;}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:999px;font-weight:600;font-size:15px;cursor:pointer;border:1px solid transparent;transition:transform .15s,box-shadow .25s,background .2s;}
.btn:active{transform:scale(.97);}
.btn-gold{background:var(--grad-gold);color:#1a1407;box-shadow:0 6px 26px rgba(216,184,115,.28);}
.btn-gold:hover{box-shadow:0 10px 34px rgba(216,184,115,.42);}

/* ---- store badges ---- */
.store-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}
.center-row{justify-content:center;}
.badge{display:inline-flex;align-items:center;gap:11px;height:56px;padding:0 20px;border-radius:14px;background:#101013;border:1px solid rgba(255,255,255,.12);transition:border-color .2s,transform .15s,background .2s;}
.badge:hover{border-color:rgba(216,184,115,.5);transform:translateY(-2px);}
.badge svg{width:26px;height:26px;flex:none;}
.badge .bt{display:flex;flex-direction:column;line-height:1.05;text-align:left;}
.badge .bt small{font-size:10.5px;color:var(--muted);letter-spacing:.02em;}
.badge .bt b{font-size:17px;font-weight:600;letter-spacing:-.01em;}

/* ---- type ---- */
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;}
h1{font-family:var(--serif);font-weight:500;font-size:clamp(46px,8vw,86px);line-height:1.02;letter-spacing:-.02em;}
h1 em{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5.2vw,58px);line-height:1.05;letter-spacing:-.02em;}
h2 em{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;}
h3{font-size:21px;font-weight:600;letter-spacing:-.01em;}
.lede{font-size:clamp(16px,2.1vw,20px);color:var(--muted);max-width:46ch;}
.center .lede{margin-left:auto;margin-right:auto;}
.micro{font-size:13.5px;color:var(--muted-2);margin-top:16px;}
.big{font-size:clamp(48px,9vw,104px);}

/* ---- sections ---- */
.section{padding:clamp(80px,12vw,150px) 0;}
.band{padding:clamp(80px,12vw,150px) 0;}
.problem{background:var(--bg-3);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
.band#science{background:linear-gradient(180deg,var(--bg),var(--bg-2));}
.speed{background:var(--bg-3);}
.hsk{background:linear-gradient(180deg,var(--bg-2),var(--bg));}

/* ---- hero ---- */
.hero{padding:clamp(120px,16vw,170px) 0 clamp(60px,8vw,110px);}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;}
.hero-copy h1{margin-bottom:24px;}
.hero-art{display:flex;justify-content:center;}

/* ---- phone mockups ---- */
.phone{position:relative;width:300px;border-radius:50px;padding:11px;
  background:linear-gradient(155deg,#2a2831,#121117);
  box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(216,184,115,.18), inset 0 0 0 1px rgba(255,255,255,.04);}
.phone-hero{width:clamp(280px,30vw,330px);}
.phone-sm{width:clamp(250px,26vw,290px);}
.phone::before{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);width:96px;height:26px;background:#0a0a0c;border-radius:99px;z-index:3;}
.phone-screen{position:relative;border-radius:40px;overflow:hidden;aspect-ratio:1/2.06;
  background:radial-gradient(120% 80% at 50% 0%, #1a1822, #0c0b10 70%);
  padding:46px 18px 20px;display:flex;flex-direction:column;gap:8px;}
.app-top{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:600;}
.app-brand{color:var(--gold);}
.app-streak{color:var(--gold-bright);font-size:11px;}
.app-hz{font-family:var(--cjk);font-weight:600;font-size:72px;line-height:1;text-align:center;margin-top:6px;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;}
.app-hz.sm{font-size:58px;}
.app-py{text-align:center;font-size:20px;font-weight:600;color:var(--r-z);}
.app-mean{text-align:center;font-size:13px;color:var(--muted);margin-bottom:4px;}
.app-card{background:rgba(255,255,255,.035);border:1px solid var(--line-soft);border-left:2px solid var(--gold);border-radius:12px;padding:11px 12px;}
.app-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);font-weight:700;margin-bottom:6px;}
.app-story{font-size:12.5px;line-height:1.7;color:#e9e4d9;}
.app-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;}
.ac{font-size:9px;font-weight:600;padding:2px 7px;border-radius:6px;}
.ac-a{color:var(--r-a);background:var(--r-a-bg);}
.ac-s{color:var(--r-s);background:var(--r-s-bg);}
.ac-z{color:var(--r-z);background:var(--r-z-bg);}

/* role colours in stories */
.r-a,.r-s,.r-z,.r-c,.r-m{font-weight:600;border-radius:5px;padding:0 3px;}
.r-a{color:var(--r-a);background:var(--r-a-bg);}
.r-s{color:var(--r-s);background:var(--r-s-bg);}
.r-z{color:var(--r-z);background:var(--r-z-bg);}
.r-c{color:var(--r-c);background:var(--r-c-bg);}
.r-m{color:var(--r-m);background:var(--r-m-bg);}

/* ---- stroke mockup ---- */
.stroke-screen{justify-content:flex-start;}
.stroke-box{position:relative;margin:14px auto 0;width:190px;height:190px;border-radius:18px;border:1px dashed rgba(255,255,255,.12);display:grid;place-items:center;background:rgba(255,255,255,.02);}
.stroke-box span{font-family:var(--cjk);font-weight:600;font-size:140px;line-height:1;grid-area:1/1;}
.stroke-ghost{color:rgba(255,255,255,.13);}
.stroke-ink{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;clip-path:inset(0 60% 0 0);}
.stroke-dots{display:flex;gap:7px;justify-content:center;margin-top:18px;}
.stroke-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18);}
.stroke-dots i.on{background:var(--gold);}

/* ---- review mockup ---- */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;}
.stat{background:rgba(255,255,255,.04);border:1px solid var(--line-soft);border-radius:11px;padding:12px 6px;text-align:center;}
.stat b{display:block;font-size:24px;font-weight:700;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat span{font-size:9.5px;color:var(--muted);}
.bar{height:7px;border-radius:99px;background:rgba(255,255,255,.08);margin-top:16px;overflow:hidden;}
.bar i{display:block;height:100%;background:var(--grad-gold);}
.pill-row{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap;}
.pill{font-size:10px;font-weight:600;color:var(--muted);background:rgba(255,255,255,.05);border:1px solid var(--line-soft);padding:5px 10px;border-radius:99px;}

/* ---- method ---- */
.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center;}
.method-copy h2{margin-bottom:22px;}
.legend{list-style:none;margin-top:26px;display:grid;gap:13px;}
.legend li{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--muted);}
.dot{width:11px;height:11px;border-radius:50%;flex:none;}
.d-a{background:var(--r-a);} .d-s{background:var(--r-s);} .d-z{background:var(--r-z);} .d-c{background:var(--r-c);}
.worked{background:linear-gradient(165deg,var(--surface-2),var(--surface));border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:0 30px 70px rgba(0,0,0,.45);}
.worked-head{display:flex;align-items:center;gap:18px;padding-bottom:18px;border-bottom:1px solid var(--line-soft);}
.worked-hz{font-family:var(--cjk);font-weight:600;font-size:64px;line-height:1;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;}
.worked-py{font-size:24px;font-weight:600;color:var(--r-z);}
.worked-mean{font-size:14px;color:var(--muted);}
.worked-map{display:grid;gap:9px;padding:18px 0;}
.map-row{display:flex;align-items:center;gap:10px;font-size:15px;}
.map-row .arrow{color:var(--muted-2);}
.map-row b{font-weight:600;}
.worked-story{font-size:16px;line-height:1.8;padding:16px 0 4px;border-top:1px solid var(--line-soft);}
.worked-foot{font-size:13px;color:var(--muted-2);margin-top:12px;}

/* ---- science pillars ---- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:54px;}
.pillar{background:linear-gradient(165deg,var(--surface),rgba(22,21,27,.4));border:1px solid var(--line);border-radius:20px;padding:30px 26px;}
.pillar-no{font-family:var(--serif);font-size:34px;color:var(--gold);opacity:.55;margin-bottom:14px;}
.pillar h3{margin-bottom:10px;}
.pillar p{font-size:15px;color:var(--muted);}
.proof-line{text-align:center;margin-top:46px;font-family:var(--serif);font-style:italic;font-size:clamp(18px,2.6vw,24px);color:var(--gold-bright);}

/* ---- speed ---- */
.speed h2{margin-bottom:20px;}

/* ---- features ---- */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center;padding:clamp(40px,6vw,70px) 0;}
.feature-row.reverse .feature-copy{order:2;}
.feature-copy h3{font-size:clamp(24px,3.4vw,34px);font-family:var(--serif);font-weight:500;margin-bottom:14px;letter-spacing:-.01em;}
.feature-copy p{font-size:17px;color:var(--muted);max-width:40ch;}
.feature-art{display:flex;justify-content:center;}

/* ---- hsk ---- */
.hsk-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:30px;}
.hsk-chip{font-size:14px;font-weight:600;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line-soft);padding:9px 18px;border-radius:999px;}
.hsk-chip.on{color:#1a1407;background:var(--grad-gold);border-color:transparent;}

/* ---- cta ---- */
.cta{background:radial-gradient(120% 120% at 50% 0%, rgba(216,184,115,.10), transparent 60%), var(--bg-3);border-top:1px solid var(--line);}
.cta-icon{width:84px;height:84px;border-radius:20px;margin:0 auto 26px;box-shadow:0 20px 50px rgba(0,0,0,.5);}
.cta h2{margin-bottom:16px;}

/* ---- footer ---- */
.footer{padding:56px 0 70px;border-top:1px solid var(--line-soft);background:var(--bg-3);}
.foot-inner{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.foot-brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px;}
.foot-brand img{width:26px;height:26px;border-radius:7px;}
.foot-tag{color:var(--muted);font-size:14px;}
.foot-links{display:flex;gap:24px;margin-top:4px;}
.foot-links a{color:var(--muted);font-size:14px;transition:color .2s;}
.foot-links a:hover{color:var(--gold);}
.foot-copy{color:var(--muted-2);font-size:12.5px;margin-top:8px;}

/* ---- reveal animation ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.65,.2,1),transform .9s cubic-bezier(.2,.65,.2,1);}
.reveal.in{opacity:1;transform:none;}

/* ---- anatomy diagram ---- */
.anatomy{ background:linear-gradient(165deg,var(--surface-2),var(--surface)); border:1px solid var(--line); border-radius:24px; padding:clamp(24px,4vw,46px); box-shadow:0 30px 70px rgba(0,0,0,.45); margin-top:44px; }
.anatomy-top{ display:flex; align-items:center; justify-content:center; gap:22px; padding-bottom:28px; margin-bottom:28px; border-bottom:1px solid var(--line-soft); }
.ah-char{ font-family:var(--cjk); font-weight:600; font-size:clamp(78px,12vw,120px); line-height:.92; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ah-meta{ display:flex; flex-direction:column; gap:2px; }
.ah-py{ font-size:clamp(24px,3.4vw,34px); font-weight:600; color:var(--ink); }
.ah-mean{ font-size:17px; color:var(--muted); }
.ah-cap{ font-size:12px; color:var(--gold); letter-spacing:.03em; margin-top:7px; }
.anatomy-cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,4vw,48px); position:relative; }
.anatomy-cols::before{ content:""; position:absolute; left:50%; top:4px; bottom:4px; width:1px; background:var(--line-soft); }
.acol-tag{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:16px; }
.acol-parts{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cglyph{ font-family:var(--cjk); font-size:30px; line-height:1; width:50px; height:50px; display:inline-grid; place-items:center; border-radius:12px; color:var(--r-c); background:var(--r-c-bg); flex:none; }
.acol-lbl{ color:var(--muted); font-size:15px; }
.acol-plus{ color:var(--muted-2); font-size:18px; padding:0 2px; }
.acol-note{ margin-top:16px; font-size:15px; color:var(--muted); line-height:1.6; }
.srow{ display:flex; align-items:center; gap:11px; margin:11px 0; font-size:16px; flex-wrap:wrap; }
.srow .slot{ display:inline-grid; place-items:center; min-width:42px; height:34px; padding:0 9px; border-radius:9px; background:rgba(255,255,255,.05); border:1px solid var(--line-soft); font-weight:700; font-size:16px; flex:none; }
.srow .arrow{ color:var(--muted-2); }
.srow small{ color:var(--muted-2); font-size:12px; margin-left:auto; }
.anatomy-story{ margin-top:28px; padding-top:26px; border-top:1px solid var(--line-soft); }
.anatomy-story p{ font-size:clamp(16px,2vw,20px); line-height:1.85; }
.say{ font-family:var(--serif); font-style:italic; color:var(--gold-bright); }
.anatomy-foot{ font-size:13px; color:var(--muted-2); margin-top:14px; }

/* ---- what you learn ---- */
.learn-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:50px; }
.learn-cell{ background:linear-gradient(165deg,var(--surface),rgba(22,21,27,.4)); border:1px solid var(--line); border-radius:18px; padding:28px 24px; }
.lc-ic{ font-size:28px; display:block; margin-bottom:14px; }
.learn-cell h3{ font-size:18px; margin-bottom:9px; }
.learn-cell p{ font-size:14.5px; color:var(--muted); line-height:1.6; }
.tones-strip{ margin-top:22px; background:linear-gradient(165deg,var(--surface-2),transparent); border:1px solid var(--line); border-radius:20px; padding:26px 22px; }
.ts-title{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:700; text-align:center; margin-bottom:20px; }
.ts-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.ts{ text-align:center; }
.ts b{ font-family:var(--serif); font-size:30px; color:var(--gold-bright); display:block; line-height:1; }
.ts span{ display:block; font-weight:600; font-size:14.5px; margin:8px 0 5px; }
.ts small{ color:var(--muted); font-size:12px; line-height:1.4; display:block; }
@media (max-width:780px){
  .anatomy-cols{ grid-template-columns:1fr; gap:24px; }
  .anatomy-cols::before{ display:none; }
  .acol-sound{ border-top:1px solid var(--line-soft); padding-top:24px; }
  .anatomy-top{ flex-direction:column; gap:8px; text-align:center; }
  .learn-grid{ grid-template-columns:1fr 1fr; }
  .ts-row{ grid-template-columns:1fr 1fr; gap:18px 14px; }
}
@media (max-width:460px){
  .learn-grid{ grid-template-columns:1fr; }
  .ts-row{ grid-template-columns:1fr; text-align:left; }
  .ts{ text-align:left; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
  .ts b{ display:inline; }
  .ts span{ margin:0; }
  .ts small{ flex-basis:100%; }
}

/* ---- responsive ---- */
@media (max-width:900px){
  .nav-links{display:none;}
  .hero-grid{grid-template-columns:1fr;gap:50px;text-align:center;}
  .hero-copy .store-row,.hero-copy .lede{margin-left:auto;margin-right:auto;}
  .hero-copy .eyebrow{margin-left:0;}
  .hero-art{order:-1;}
  .method-grid{grid-template-columns:1fr;}
  .pillars{grid-template-columns:1fr;}
  .feature-row{grid-template-columns:1fr;gap:34px;text-align:center;}
  .feature-row .feature-copy,.feature-row.reverse .feature-copy{order:0;}
  .feature-copy p{margin-left:auto;margin-right:auto;}
  .feature-art{order:-1;}
}
@media (max-width:520px){
  .wrap{padding:0 18px;}
  .store-row{justify-content:center;}
  .badge{height:52px;padding:0 16px;}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}