:root{--bg:#0b0d12;--card:#141821;--fg:#eef0f4;--muted:#9aa3b2;--line:#232938;--a:#7c5cff;--b:#22d3ee;--c:#ff6bb5;color-scheme:dark}@media (prefers-color-scheme:light){:root{--bg:#f8f8fb;--card:#fff;--fg:#14171c;--muted:#566070;--line:#e3e6eb;color-scheme:light}}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow-x:hidden}.wrap{max-width:1040px;margin:0 auto;padding:0 16px}nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0;font-weight:700}nav span{display:flex;align-items:center;gap:10px}nav img{width:32px;height:32px;border-radius:50%}.grad{background:linear-gradient(100deg,var(--a),var(--b),var(--c));-webkit-background-clip:text;background-clip:text;color:transparent}.glow{position:fixed;inset:-20% -10% auto;height:70vh;background:radial-gradient(600px 300px at 25% 20%,#7c5cff33,transparent),radial-gradient(500px 300px at 75% 30%,#22d3ee26,transparent);pointer-events:none;z-index:-1}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding:48px 0 64px}h1{font-size:clamp(2.3rem,6vw,3.8rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 .4em}h2{font-size:clamp(1.6rem,4vw,2.2rem);letter-spacing:-.02em;margin:0 0 .5em}h3{margin:0 0 .3em;font-size:1.05rem}p{color:var(--muted);margin:0 0 1em}.lead{font-size:1.15rem}.btn{display:inline-block;padding:.75em 1.4em;border-radius:12px;font-weight:600;text-decoration:none;color:#fff;background:linear-gradient(100deg,var(--a),#4f8cff);box-shadow:0 8px 30px #7c5cff55;transition:transform .15s}.btn:hover{transform:translateY(-2px)}.btn.ghost{background:none;box-shadow:none;border:1px solid var(--line);color:var(--fg);margin-left:8px}.player{border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 20px 60px #0006}section{padding:56px 0}.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;transition:transform .2s,border-color .2s}.card:hover{transform:translateY(-4px);border-color:var(--a)}.card p{margin:0}.card .ic{font-size:1.6rem;margin-bottom:.3em}.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s}.reveal.in{opacity:1;transform:none}.demo{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.phone{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;min-height:300px}.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.chip{border:1px solid var(--line);background:var(--card);color:var(--fg);padding:.4em .9em;border-radius:99px;cursor:pointer;font:inherit;font-size:.9rem}.chip:hover,.chip.on{border-color:var(--b);color:var(--b)}.msg{padding:.55em .95em;border-radius:16px;width:fit-content;max-width:90%;margin:8px 0;animation:pop .35s both}.msg.u{background:var(--line)}.msg.b{background:linear-gradient(100deg,var(--a),#4f8cff);color:#fff;margin-left:auto}.tag{font-size:.75rem;color:var(--muted);margin-top:10px}@keyframes pop{0%{opacity:0;transform:translateY(8px) scale(.96)}}.steps{counter-reset:s}.steps .card:before{counter-increment:s;content:counter(s);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--b));color:#fff;font-weight:700;margin-bottom:10px}.cta{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:48px 20px}footer{padding:32px 0 48px;color:var(--muted);font-size:.9rem;border-top:1px solid var(--line);margin-top:56px}footer a{color:var(--b)}@media (max-width:800px){.hero,.demo{grid-template-columns:1fr}.btn.ghost{margin:8px 0 0}}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}.heroR{position:relative}.mascot{position:absolute;width:30%;left:-7%;bottom:-9%;z-index:2;image-rendering:pixelated;filter:drop-shadow(0 10px 20px #0006);animation:float 4s ease-in-out infinite}@keyframes float{50%{transform:translateY(-10px) rotate(3deg)}}.stk{width:72px;height:72px;image-rendering:pixelated;margin-top:12px;animation:pop .4s .9s both}.strip{display:flex;gap:14px;overflow-x:auto;padding:8px 2px 16px;scroll-snap-type:x proximity}.strip img{width:96px;height:96px;flex:none;image-rendering:pixelated;transition:transform .2s;scroll-snap-align:start}.strip img:hover{transform:scale(1.2) rotate(-6deg)}nav img{image-rendering:pixelated}