:root{--bg:#fafafa;--fg:#0b0b0c;--g:#6e6e73;--line:#e5e5ea;--card:#fff;--soft:#f0f0f3;--accent:#7a5cff}
@media (prefers-color-scheme:dark){:root{--bg:#0b0b0c;--fg:#f5f5f7;--g:#9a9aa0;--line:#26262a;--card:#151517;--soft:#1d1d20}}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font:16px/1.5 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
h1{font-size:clamp(44px,7vw,84px);line-height:1.02;letter-spacing:-.035em;font-weight:800}
h2{font-size:clamp(30px,4.4vw,48px);letter-spacing:-.03em;line-height:1.1;font-weight:800;margin-bottom:28px}
h3{font-size:18px;letter-spacing:-.01em}
section{max-width:1100px;margin:0 auto;padding:96px 16px}
.sub{color:var(--g);margin:-16px 0 28px}
.fine{font-size:13px;color:var(--g);margin-top:14px}

nav{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;max-width:1100px;margin:0 auto;backdrop-filter:blur(14px)}
.brand{display:flex;gap:9px;align-items:center;font-weight:800;text-decoration:none;letter-spacing:-.02em;font-size:19px}
.mark{width:26px;height:26px;border-radius:50%;background:conic-gradient(#ff4fa0,#7a5cff,#2f8bff,#25e2ef,#ff9a4d,#ff4fa0)}
.links{display:flex;gap:20px;align-items:center;font-size:14px;font-weight:500}
.links a{text-decoration:none;color:var(--g)}.links a:hover{color:var(--fg)}
.links .pill{background:var(--fg);color:var(--bg);padding:7px 14px;border-radius:99px}
@media (max-width:640px){.links a:not(.pill){display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--fg);font:600 15px Inter,sans-serif;text-decoration:none;cursor:pointer}
.btn.dark{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.big{height:56px;padding:0 30px;font-size:16px}
.btn.sm{height:32px;padding:0 12px;font-size:13px;border-radius:9px}

.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;max-width:1100px;margin:0 auto;padding:56px 16px 40px}
.eyebrow{font-weight:600;color:var(--g);margin-bottom:18px}
.lead{font-size:19px;color:var(--g);max-width:520px;margin:24px 0 30px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:860px){.hero{grid-template-columns:1fr}.phone{margin:0 auto}}

.phone{width:300px;height:620px;border-radius:52px;padding:10px;background:linear-gradient(145deg,#56565c,#1f1f22 25%,#3e3e44 50%,#17171a 80%);box-shadow:0 50px 100px -30px rgba(0,0,0,.45)}
.screen{position:relative;height:100%;border-radius:43px;overflow:hidden;background:radial-gradient(130% 75% at 28% 16%,#f4f4f6,#cfd0d5 34%,#80818a 68%,#34353a)}
.clock{position:absolute;top:60px;width:100%;text-align:center;color:#fff;font-size:76px;font-weight:700;letter-spacing:-.02em}
.glow{position:absolute;inset:0;border-radius:43px;padding:12px;background:conic-gradient(from var(--a,0deg),#ff6fae,#b45cff,#5b8cff,#3fe6f0,#ffd36b,#ff8a5b,#ff6fae);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;filter:blur(10px);opacity:0;transition:opacity .4s}
.screen.on .glow{opacity:1}
.screen.on{background:radial-gradient(130% 75% at 28% 16%,#9a9aa0,#6a6b72 34%,#3a3b40 68%,#1a1a1d)}
.orb{position:absolute;left:50%;bottom:30px;width:52px;height:52px;margin-left:-26px;border-radius:50%;background:conic-gradient(from var(--a,0deg),#ff4fa0,#7a5cff,#2f8bff,#25e2ef,#ff9a4d,#ff4fa0);filter:blur(1px);opacity:0;transition:opacity .4s}
.screen.on .orb{opacity:1}
.said{position:absolute;left:18px;right:18px;bottom:100px;text-align:center;color:#fff;font-weight:600;font-size:21px;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.card{background:rgba(248,248,250,.92);color:#000;border-radius:24px;padding:13px 15px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.screen .card{position:absolute;left:8px;right:8px;top:48px;opacity:0;transform:translateY(-12px);transition:.3s}
.screen .card.show{opacity:1;transform:none}
.card .hd{display:flex;gap:7px;align-items:center;font-size:12px;font-weight:700;color:#6e6e73;letter-spacing:.04em}
.card .hd i{width:18px;height:18px;border-radius:5px;background:#0b0b0c;display:inline-block}
.card .bd{font-size:18px;font-weight:600;margin-top:7px;letter-spacing:-.01em}
.card .lv{display:flex;gap:12px;align-items:center;margin-top:8px}
.card .coin{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px}
.card .lv b{display:block;font-size:20px}.card .lv span{font-size:13px;color:#6e6e73}
.bar{height:5px;border-radius:3px;background:#e2e2e6;margin-top:10px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:#0b0b0c;transition:width 2s linear}

.chat{display:flex;flex-direction:column;gap:10px;max-width:560px;margin-bottom:56px}
.chat .ln{max-width:80%;padding:10px 16px;border-radius:20px;background:var(--soft)}
.chat .ln.you{align-self:flex-end;background:var(--fg);color:var(--bg)}
.chat small{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;opacity:.6;text-transform:uppercase}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.steps>div{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px}
.steps b{font-size:28px;letter-spacing:-.03em;display:block;margin-bottom:10px}
.steps p{color:var(--g);font-size:14px;margin-top:4px}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}

.three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.three>div{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px}
.three q{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:10px}
.three p{color:var(--g)}
@media (max-width:760px){.three{grid-template-columns:1fr}}

#try{text-align:center}
.mic{width:112px;height:112px;border-radius:50%;border:0;cursor:pointer;background:conic-gradient(from var(--a,0deg),#ff4fa0,#7a5cff,#2f8bff,#25e2ef,#ff9a4d,#ff4fa0);display:inline-grid;place-items:center;transition:transform .2s}
.mic span{width:96px;height:96px;border-radius:50%;background:var(--bg)}
.mic.on{transform:scale(1.08)}.mic.on span{background:transparent}
.heard{margin:18px 0;font-size:20px;font-weight:600;min-height:30px}
.typed{display:flex;gap:8px;max-width:480px;margin:0 auto}
.typed input{flex:1;min-width:0;height:48px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--fg);padding:0 14px;font:15px Inter,sans-serif}
.result{max-width:360px;margin:24px auto 0;text-align:left;display:none}.result.on{display:block}

.setup{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.setup li{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px;counter-increment:s}
.setup li:before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--fg);color:var(--bg);font-weight:700;margin-bottom:14px}
.setup p{color:var(--g);margin-top:6px}
@media (max-width:760px){.setup{grid-template-columns:1fr}}
.panel{margin-top:28px;text-align:center}
.err{color:#e5484d;margin-top:10px;min-height:24px}
.key{display:none;max-width:560px;margin:10px auto 0;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px;text-align:left}
.key.on{display:block}
.key .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.key .row span{color:var(--g);font-size:14px;width:120px}
.key code{flex:1;min-width:0;overflow-wrap:anywhere;font-size:15px;font-weight:700}
.warn{font-size:13px;color:#d97706;margin:6px 0 16px}
.bal{font-size:14px;color:var(--g);margin-top:8px}
.qr{width:200px;margin:20px auto 10px;background:#fff;padding:12px;border-radius:16px}.qr svg{display:block;width:100%}
.key>p:last-child{text-align:center;font-size:14px;color:var(--g)}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;z-index:50;padding:16px}
.modal[hidden]{display:none}
.sheet{position:relative;background:var(--card);border-radius:22px;padding:24px;width:100%;max-width:360px}
.sheet .x{position:absolute;right:14px;top:10px;border:0;background:none;color:var(--fg);font-size:26px;cursor:pointer}
.wop{display:flex;align-items:center;gap:12px;width:100%;height:54px;margin-top:10px;padding:0 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--fg);font:600 15px Inter,sans-serif;text-decoration:none;cursor:pointer}
.wop img{width:28px;height:28px;border-radius:7px}.wop span{margin-left:auto;font-size:11px;color:var(--g);letter-spacing:.06em}

footer{max-width:1100px;margin:0 auto;padding:40px 16px 60px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
footer p{font-size:13px;color:var(--g)}