:root{--ink:#3a3f4b;--ink-deep:#1e2330;--muted:#6b7280;--line:#3a3f4b1a;--foam:#f4f7f8;--paper:#fff;--teal:#2ec4b6;--mint:#8fd9c4;--teal-deep:#1a9e90;--glow:#2ec4b638}*{box-sizing:border-box}html{scroll-behavior:smooth}html,body{min-height:100%;color:var(--ink-deep);background:var(--foam);font-family:var(--font-sc), var(--font-sans), system-ui, sans-serif;margin:0;padding:0}html.locale-hant,html.locale-hant body{font-family:var(--font-tc), var(--font-sans), system-ui, sans-serif}a{color:inherit;text-decoration:none}button,.btn{font:inherit}.page{background:radial-gradient(900px 520px at 85% -5%, var(--glow), transparent 60%), radial-gradient(700px 420px at 0% 8%, #8fd9c447, transparent 55%), linear-gradient(180deg, #f7fbfb 0%, #eef4f5 42%, #f7fbfb 100%);overflow-x:hidden}.shell{width:min(1120px,100% - 2rem);margin:0 auto}.nav{justify-content:space-between;align-items:center;padding:1.1rem 0 .5rem;display:flex}.nav-brand{align-items:center;gap:.65rem;display:inline-flex}.nav-brand img{object-fit:contain;width:42px;height:42px}.nav-brand strong{letter-spacing:.04em;color:var(--ink);white-space:nowrap;font-size:1.05rem}.nav-brand-zh{letter-spacing:.06em;font-weight:700}.nav-tools{align-items:center;gap:1.1rem;display:flex}.nav-links{color:var(--muted);gap:1.25rem;font-size:.95rem;display:none}.locale-switch{letter-spacing:.02em;align-items:center;gap:.45rem;font-size:.82rem;display:flex}.locale-switch a{color:var(--muted);padding:.15rem .2rem}.locale-switch a[aria-current=page]{color:var(--ink-deep);font-weight:700}@media (min-width:800px){.nav-links{display:flex}}.hero{align-items:center;gap:2.5rem;min-height:calc(100svh - 4.5rem);padding:2rem 0 4rem;display:grid}@media (min-width:960px){.hero{grid-template-columns:1.05fr .95fr;gap:3rem;padding-top:1rem}}.hero-copy{max-width:36rem}.hero-logo{filter:drop-shadow(0 18px 40px #2ec4b62e);width:min(168px,42vw);height:auto;margin:0 0 1.5rem;animation:.7s both float-in;display:block}.hero h1{letter-spacing:-.02em;color:var(--ink-deep);margin:0;font-size:clamp(2.35rem,5.6vw,3.85rem);font-weight:900;line-height:1.18;animation:.7s 80ms both rise}.hero h1 em{background:linear-gradient(90deg, var(--teal), var(--mint));color:#0000;-webkit-background-clip:text;background-clip:text;font-style:normal}.hero-lede{color:var(--muted);margin:1.15rem 0 0;font-size:clamp(1.02rem,1.7vw,1.18rem);line-height:1.7;animation:.7s .14s both rise}.cta-row{flex-wrap:wrap;gap:.75rem;margin-top:1.75rem;animation:.7s .2s both rise;display:flex}.btn{border:0;border-radius:999px;justify-content:center;align-items:center;min-height:3.05rem;padding:0 1.3rem;font-weight:700;transition:transform .16s,box-shadow .16s,background .16s;display:inline-flex}.btn:hover{transform:translateY(-1px)}.btn-primary{color:#fff;background:linear-gradient(90deg, var(--teal-deep), var(--teal));box-shadow:0 12px 28px #1a9e9047}.btn-primary:hover{box-shadow:0 16px 34px #1a9e9057}.btn-ghost{color:var(--ink-deep);border:1px solid var(--line);background:#ffffffb8}.hero-panel{animation:.8s .12s both float-in;position:relative}.phone{background:var(--paper);border:1px solid var(--line);border-radius:28px;width:min(360px,100%);margin:0 auto;overflow:hidden;box-shadow:0 30px 80px #1e23301f,inset 0 2px #fffc}.phone-bar{color:var(--muted);justify-content:space-between;align-items:center;padding:1rem 1.1rem .4rem;font-size:.8rem;display:flex}.phone-body{padding:.4rem 1.1rem 1.25rem}.target-word{letter-spacing:.08em;margin:.4rem 0 .15rem;font-size:2.6rem;font-weight:900}.jyutping{color:var(--muted);margin:0 0 1rem}.score-row{grid-template-columns:88px 1fr;align-items:center;gap:.9rem;margin-bottom:1rem;display:grid}.score-big{width:88px;height:88px;color:var(--teal-deep);background:radial-gradient(circle at 35% 30%, #fff, transparent 45%), conic-gradient(var(--teal) 0 295deg, #e5eef0 295deg 360deg);border-radius:50%;place-items:center;font-size:1.7rem;font-weight:900;display:grid;box-shadow:inset 0 0 0 6px #fff}.metrics{gap:.45rem;display:grid}.metric{color:var(--muted);grid-template-columns:48px 1fr 28px;align-items:center;gap:.45rem;font-size:.82rem;display:grid}.metric b{color:var(--ink-deep);text-align:right;font-weight:700}.bar{background:#e8eef0;border-radius:99px;height:7px;overflow:hidden}.bar>span{border-radius:inherit;background:linear-gradient(90deg, var(--teal), var(--mint));height:100%;display:block}.tip{color:var(--ink);background:#2ec4b61a;border-radius:14px;margin:0;padding:.85rem .95rem;font-size:.88rem;line-height:1.55}.wave{pointer-events:none;filter:blur(8px);z-index:-1;background:radial-gradient(circle at 20% 40%,#2ec4b633,#0000 55%),radial-gradient(circle at 70% 60%,#8fd9c440,#0000 50%);width:68%;height:42%;position:absolute;inset:auto -8% -8% auto}.section{padding:5rem 0}.section-head{max-width:40rem;margin-bottom:1.75rem}.eyebrow{color:var(--teal-deep);letter-spacing:.02em;margin:0 0 .75rem;font-size:.92rem;font-weight:700;display:inline-block}.section h2{letter-spacing:-.02em;margin:0;font-size:clamp(1.85rem,4vw,2.75rem);font-weight:900;line-height:1.22}.section-lead{color:var(--muted);margin:.9rem 0 0;font-size:1.05rem;line-height:1.7}.feature{align-items:start;gap:1.75rem;display:grid}@media (min-width:900px){.feature{grid-template-columns:1.05fr .95fr;align-items:center;gap:3rem}.feature.reverse{grid-template-columns:.95fr 1.05fr}.feature.reverse .feature-copy{order:2}}.point-list{gap:.7rem;margin:1.35rem 0 0;padding:0;list-style:none;display:grid}.point-list li{color:var(--ink);padding-left:1.2rem;line-height:1.55;position:relative}.point-list li:before{content:"";background:linear-gradient(90deg, var(--teal), var(--mint));border-radius:50%;width:.45rem;height:.45rem;position:absolute;top:.55rem;left:0}.demo{border:1px solid var(--line);background:#ffffffd1;border-radius:22px;padding:1.15rem;box-shadow:0 18px 50px #1e233014}.demo-title{color:var(--muted);margin:0 0 .85rem;font-size:.85rem;font-weight:600}.tone-grid{grid-template-columns:repeat(3,1fr);gap:.55rem;display:grid}.tone-chip{text-align:center;background:#f3f7f8;border-radius:14px;padding:.8rem .65rem}.tone-chip strong{margin-bottom:.15rem;font-size:1.15rem;display:block}.tone-chip span{color:var(--muted);font-size:.78rem}.tone-chip.active{background:linear-gradient(#2ec4b62e,#8fd9c438);box-shadow:inset 0 0 0 1px #2ec4b659}.flow{gap:.55rem;display:grid}.flow-step{background:#f3f7f8;border-radius:14px;align-items:center;gap:.8rem;padding:.85rem .95rem;display:flex}.flow-step i{color:#fff;background:linear-gradient(135deg, var(--teal-deep), var(--mint));border-radius:50%;flex:none;place-items:center;width:1.8rem;height:1.8rem;font-size:.85rem;font-style:normal;font-weight:800;display:grid}.compare{gap:1rem;display:grid}@media (min-width:800px){.compare{grid-template-columns:1fr 1fr}}.compare-col{border:1px solid var(--line);background:#ffffffb3;border-radius:22px;padding:1.35rem 1.4rem 1.5rem}.compare-col.good{background:linear-gradient(#2ec4b61f,#ffffffe6);border-color:#2ec4b647}.compare-col h3{margin:0 0 1rem;font-size:1.15rem}.compare-col ul{gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.compare-col li{color:var(--muted);padding-left:1.15rem;line-height:1.5;position:relative}.compare-col li:before{content:"·";color:var(--muted);position:absolute;left:0}.compare-col.good li{color:var(--ink)}.compare-col.good li:before{content:"✓";color:var(--teal-deep);font-size:.85rem}.cta-band{text-align:center;color:#fff;background:radial-gradient(600px 220px at 20% 0,#ffffff2e,#0000 60%),linear-gradient(120deg,#178f84 0%,#2ec4b6 55%,#7fd3b8 100%);border-radius:28px;margin:1rem 0 3rem;padding:2.4rem 1.6rem;box-shadow:0 24px 60px #1a9e9047}.cta-band h2{margin:0;font-size:clamp(1.7rem,3.5vw,2.4rem);font-weight:900}.cta-band p{opacity:.92;max-width:32rem;margin:.75rem auto 1.35rem;line-height:1.6}.cta-band .btn-primary{color:var(--teal-deep);box-shadow:none;background:#fff}.cta-band .btn-ghost{color:#fff;background:0 0;border-color:#ffffff73}.footer{color:var(--muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;padding:0 0 2.5rem;font-size:.9rem;display:flex}.footer-brand{align-items:center;gap:.5rem;display:inline-flex}.footer-brand img{object-fit:contain;width:28px;height:28px}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes float-in{0%{opacity:0;transform:translateY(18px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}