@font-face{font-family:"HL Sans";src:url(fonts/hl.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--paper:#f3f5f1;--paper2:#e9eee8;--card:#fff;--ink:#122019;--mute:#56645d;--dim:#8a978f;--line:rgba(18,32,25,.12);--jade:#2fbf94;--jade-d:#1a8f6c;--deep:#0d1512;--deep2:#16221d;--pad:clamp(20px,5.5vw,96px)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);color:var(--ink);font-family:"HL Sans",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
html,body{overflow-x:clip}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
.nw{white-space:nowrap}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}

nav{display:flex;align-items:center;justify-content:space-between;padding:22px var(--pad);position:sticky;top:0;z-index:20;background:rgba(243,245,241,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:38px;height:38px;border-radius:11px}
.brand b{font-size:19px;font-weight:700}
.brand span{display:block;font-size:12px;color:var(--mute)}
.links{display:flex;align-items:center;gap:30px;font-size:15px;color:var(--mute)}
.links a.l:hover{color:var(--ink)}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;font-size:13px}
.lang b,.lang a{padding:4px 11px;border-radius:999px}
.lang b{background:var(--ink);color:var(--paper);font-weight:600}
.lang a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 28px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:600;font-size:16px;white-space:nowrap;transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn i{width:8px;height:8px;border-radius:50%;background:var(--jade)}
.btn.sm{height:40px;padding:0 18px;font-size:14px}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:40px;padding:30px var(--pad) 0;min-height:760px}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--jade-d);background:rgba(47,191,148,.12);border-radius:999px;padding:7px 14px}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--jade)}
h1{font-size:clamp(64px,7.4vw,120px);font-weight:700;line-height:1;letter-spacing:-.035em;margin-top:26px}
h1 span{display:block;font-size:.42em;letter-spacing:-.01em;color:var(--jade-d);margin-top:16px;font-weight:600}
.what{font-size:clamp(20px,1.7vw,26px);font-weight:600;margin-top:28px;line-height:1.4}
.hero .lead{margin-top:16px;max-width:520px;font-size:17px;line-height:1.8;color:var(--mute)}
.cta{display:flex;align-items:center;flex-wrap:wrap;gap:14px 26px;margin-top:36px}
.alt{font-size:14px;color:var(--mute)}
.alt a{color:var(--ink);border-bottom:1px solid currentColor;margin-left:6px;padding-bottom:1px}
.meta{margin-top:18px;font-size:13px;color:var(--dim)}
.visual{position:relative;height:740px}
.glow{position:absolute;left:50%;top:50%;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:radial-gradient(circle,#cfeee1 0%,#e3f3ec 45%,rgba(243,245,241,0) 70%)}
.ring{position:absolute;left:50%;top:50%;width:500px;height:500px;margin:-250px 0 0 -250px;border-radius:50%;border:1px solid rgba(47,191,148,.32)}
.ring.r2{width:660px;height:660px;margin:-330px 0 0 -330px;border-color:rgba(47,191,148,.14)}
.phone{position:relative;width:300px;border-radius:46px;padding:8px;background:#fff;box-shadow:0 0 0 1px rgba(18,32,25,.08),0 36px 80px rgba(18,52,40,.16)}
.phone img{border-radius:39px;width:100%}
.visual .phone{position:absolute}
.ph-a{left:10%;top:40px;z-index:2}
.ph-b{right:4%;top:100px;transform:rotate(3deg);z-index:1}

.stats{display:grid;grid-template-columns:repeat(4,1fr);margin:30px var(--pad) 0;border-top:1px solid var(--line)}
.stats div{padding:26px 20px 0 0}
.stats b{font-size:46px;font-weight:600;letter-spacing:-.02em;display:block;line-height:1.1}
.stats span{display:block;font-size:14px;color:var(--mute);margin-top:6px;line-height:1.5}

/* feature rows */
section{padding:120px var(--pad)}
h2{font-size:clamp(32px,3.6vw,54px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.feat{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:center}
.feat.rev .txt{order:2}
.txt p{color:var(--mute);font-size:17px;line-height:1.85;margin-top:22px;max-width:520px}
.txt .note{font-size:15px;margin-top:18px}
.sub{font-size:13px;font-weight:600;color:var(--dim);margin-top:30px;letter-spacing:.04em}
.levels{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.levels li{background:var(--card);border-radius:16px;padding:14px 18px;min-width:120px}
.levels b{display:block;font-size:17px}
.levels span{font-size:13px;color:var(--mute)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;max-width:540px}
.chips li{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14px}
.extras{margin-top:12px;max-width:520px;border-top:1px solid var(--line)}
.extras li{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.en .extras li{grid-template-columns:150px 1fr}
.extras span{color:var(--mute);line-height:1.6}
.tests{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;background:var(--deep);border-radius:32px;padding:22px}
.tests figure{background:var(--deep2);border-radius:18px;overflow:hidden}
.tests img{aspect-ratio:1;object-fit:cover;width:100%}
.tests figcaption{padding:10px 12px 14px;color:#e8efe9}
.tests b{display:block;font-size:15px;font-weight:600}
.tests span{font-size:12px;color:#8fa298}
.pair{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
.radar{background:var(--card);border-radius:32px;padding:30px 30px 40px;max-width:560px;width:100%;justify-self:center}
.radar svg{display:block;width:100%;max-width:400px;margin:10px auto 0}
.radar .poly{fill:rgba(47,191,148,.22);stroke:var(--jade);stroke-width:2.5;stroke-linejoin:round}
.radar text{font-family:"HL Sans",sans-serif;font-size:14px;fill:var(--mute)}
.radar .weak{fill:#c97a1f;font-weight:700}
.score{font-size:13px;color:var(--mute)}
.score b{display:block;font-size:20px;color:var(--ink);font-weight:700;margin-top:2px}
.phone.small{width:250px;border-radius:40px;padding:7px}.phone.small img{border-radius:34px}
.solo{display:flex;justify-content:center;padding:30px 0;background:radial-gradient(circle at 50% 50%,#d9f1e7 0%,rgba(243,245,241,0) 62%)}
.duo{position:relative;height:680px}
.duo .phone{position:absolute;width:280px}
.d1{left:6%;top:0}
.d2{right:6%;top:80px}

/* library (dark poster wall) */
.lib{background:var(--deep);color:#e8efe9}
.libhead{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:50px}
.libhead p{color:#9aaca2;font-size:17px;line-height:1.85;max-width:540px}
.filters{display:flex;gap:10px;margin-bottom:28px;flex-wrap:wrap}
.filters span{border:1px solid rgba(232,239,233,.16);border-radius:999px;padding:9px 18px;font-size:14px;color:#b9c6be}
.filters span.on{background:var(--jade);border-color:var(--jade);color:#06130e;font-weight:600}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.card{background:var(--deep2);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.card img{aspect-ratio:1;object-fit:cover;width:100%}
.card figcaption{padding:12px 14px 16px}
.card b{font-size:14px;font-weight:600;display:block;line-height:1.4}
.card span{font-size:12px;color:#7f9087}
.card.big{grid-column:span 2;grid-row:span 2}
.card.big img{flex:1;min-height:0;aspect-ratio:auto;height:0}
.card.big b{font-size:22px}
.card.big span{font-size:14px}
.more{margin-top:34px;color:#8fa298;font-size:14px;border-top:1px solid rgba(232,239,233,.12);padding-top:22px}

/* how */
.how{padding-top:110px;padding-bottom:110px;background:var(--paper2)}
.how ol{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.how li{background:var(--card);border-radius:24px;padding:28px 26px 32px}
.how i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:15px;font-weight:600}
.how b{display:block;font-size:22px;margin-top:20px}
.how span{display:block;color:var(--mute);font-size:15px;line-height:1.7;margin-top:8px}

/* beta */
.beta{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center}
.beta p{color:var(--mute);font-size:17px;line-height:1.85;margin-top:22px;max-width:600px}
.beta p.small{font-size:14px;margin-top:18px;color:var(--dim)}
.facts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:36px;max-width:580px}
.facts div{padding:18px 20px 18px 0;border-bottom:1px solid var(--line)}
.facts span{font-size:13px;color:var(--dim)}
.facts b{display:block;font-size:18px;font-weight:600;margin-top:4px}
.visual.sm{height:660px}
.ph-c{left:50%;top:20px;transform:translateX(-50%)}

/* faq */
.faq{display:grid;grid-template-columns:1fr 1.6fr;gap:60px;padding-top:110px;border-top:1px solid var(--line)}
.qs details{border-bottom:1px solid var(--line);padding:22px 0}
.qs details:first-child{border-top:1px solid var(--line)}
.qs summary{font-size:19px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"+";color:var(--jade-d);font-weight:400;font-size:24px;line-height:1}
.qs details[open] summary::after{content:"−"}
.qs p{color:var(--mute);font-size:16px;line-height:1.8;margin-top:12px;max-width:640px}

footer{padding:40px var(--pad) 50px;border-top:1px solid var(--line);color:var(--dim);font-size:13px;line-height:1.8;background:var(--paper2)}
.fbrand{display:flex;align-items:center;gap:10px;color:var(--ink);margin-bottom:14px}
.fbrand img{border-radius:8px}
.fbrand span{color:var(--mute)}
footer a{border-bottom:1px solid currentColor}

@media (max-width:1100px){
  .links a.l{display:none}
  .feat{gap:50px}
  .grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:760px){
  nav{padding:14px var(--pad)}
  .links{gap:10px}
  .btn.sm{display:none}
  .hero{grid-template-columns:1fr;min-height:0;padding-top:24px;gap:10px}
  h1{font-size:60px}
  .what{margin-top:22px}
  .hero .lead{font-size:16px}
  .cta{margin-top:28px}
  .cta .btn{width:100%;justify-content:center}
  .visual{height:610px;margin:0 calc(var(--pad)*-1)}
  .glow{width:400px;height:400px;margin:-200px 0 0 -200px}
  .ring{width:340px;height:340px;margin:-170px 0 0 -170px}.ring.r2{display:none}
  .phone{width:230px;border-radius:36px;padding:6px}.phone img{border-radius:31px}
  .ph-a{left:7%;top:20px}.ph-b{right:-8%;top:90px}
  .stats{grid-template-columns:1fr 1fr;margin-top:10px}
  .stats div{padding:20px 12px 18px 0}
  .stats b{font-size:36px}
  section{padding:84px var(--pad)}
  h2{font-size:32px}
  .feat{grid-template-columns:1fr;gap:36px}
  .feat.rev .txt{order:0}
  .txt p,.libhead p,.beta p{font-size:16px}
  .tests{grid-template-columns:repeat(2,1fr);padding:14px;gap:10px;border-radius:24px}
  .solo{padding:10px 0}
  .duo{height:520px}
  .duo .phone{width:210px}
  .d1{left:0}.d2{right:0;top:70px}
  .extras li,.en .extras li{grid-template-columns:1fr;gap:4px}
  .libhead{grid-template-columns:1fr;gap:18px;margin-bottom:30px}
  .filters{gap:8px}.filters span{padding:7px 13px;font-size:13px}
  .grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .card.big{grid-column:span 2;grid-row:auto}
  .card.big img{flex:none;height:auto;aspect-ratio:1}
  .card:nth-child(n+10){display:none}
  .how ol{grid-template-columns:1fr;gap:10px;margin-top:30px}
  .how li{display:grid;grid-template-columns:34px 1fr;column-gap:16px;padding:22px}
  .how b{margin-top:4px;font-size:19px}.how span{grid-column:2}
  .beta{grid-template-columns:1fr;gap:20px}
  .visual.sm{display:none}
  .faq{grid-template-columns:1fr;gap:24px;padding-top:84px}
  .qs summary{font-size:17px}
}