@font-face{font-family:Fredoka;src:url(/fredoka.ttf) format("truetype");font-weight:700;font-display:swap}
:root{--bg:#14111f;--surface:rgba(255,255,255,.055);--text:#f6f3ff;--muted:#b7aecb;--pink:#ff4f8b;--blue:#5ad1ff;--orange:#ffb547;--line:rgba(255,255,255,.1)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;background:var(--bg) linear-gradient(180deg,#2b1846 0,var(--bg) 420px) no-repeat}
body{margin:0;min-height:100vh;color:var(--text);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;overflow-x:hidden}
a{color:var(--orange)}main{position:relative;max-width:860px;margin:0 auto;padding:0 16px 56px}
/* Glowing circles, like the app's background. */
.glow{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.glow i{position:absolute;border-radius:50%;filter:blur(8px)}
.g1{width:520px;height:520px;background:var(--pink);opacity:.22;top:-260px;left:-200px;animation:drift1 18s ease-in-out infinite alternate}
.g2{width:560px;height:560px;background:var(--blue);opacity:.12;bottom:-320px;right:-220px;animation:drift2 22s ease-in-out infinite alternate}
.g3{width:300px;height:300px;background:#b28bff;opacity:.10;top:38%;right:-120px;animation:drift1 26s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(60px,40px) scale(1.08)}}@keyframes drift2{to{transform:translate(-50px,-60px) scale(1.06)}}
.top{position:relative;max-width:860px;margin:0 auto;padding:16px}.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}.brand img{border-radius:9px}
.wm{display:inline-flex;align-items:flex-end;font-family:Fredoka,sans-serif;font-weight:700;letter-spacing:.5px}
.wm span{display:inline-block;transform:rotate(var(--r));text-shadow:0 .06em .02em rgba(0,0,0,.35)}
.wm.small{font-size:24px}.wm.big{font-size:clamp(56px,13vw,96px);line-height:1}
.home .wm.big span{animation:hop .7s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(.35s + var(--d))}
@keyframes hop{from{opacity:0;transform:translateY(30px) rotate(var(--r))}to{opacity:1;transform:rotate(var(--r))}}
/* Hero with floating cards. */
.hero{text-align:center;padding:8px 0 20px}
.stage{position:relative;height:200px;margin:0 auto 6px;max-width:460px}
.fcard{position:absolute;left:50%;top:10px;width:96px;height:132px;margin-left:calc(-48px + (var(--i) - 1.5) * 92px);border-radius:20px;border:1px solid rgba(255,255,255,.25);box-shadow:0 14px 30px rgba(0,0,0,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transform:translateY(var(--y)) rotate(var(--r));animation:enter .8s cubic-bezier(.2,1.2,.4,1) both,bob 3.4s ease-in-out infinite alternate;animation-delay:calc(var(--i) * .08s),calc(.8s + var(--i) * .4s)}
.fcard span{font-size:36px}.fcard b{font-size:12.5px;font-weight:800}
@keyframes enter{from{opacity:0;transform:translateY(160px) rotate(var(--r))}}
@keyframes bob{to{transform:translateY(calc(var(--y) - 12px)) rotate(calc(var(--r) * 1.15))}}
.confetti{position:absolute;width:10px;height:22px;border-radius:5px;opacity:.85;animation:float 6s ease-in-out infinite alternate}
.c1{background:#5ad1ff;left:2%;top:20px;transform:rotate(30deg)}.c2{background:#ffd93b;right:4%;top:6px;width:12px;height:12px;animation-delay:-2s}
.c3{background:#3ddc97;left:8%;bottom:6px;width:12px;height:12px;animation-delay:-4s}.c4{background:#ff4f8b;right:1%;bottom:30px;transform:rotate(-40deg);animation-delay:-1s}
.c5{background:#fff;left:46%;top:-4px;width:9px;height:9px;animation-delay:-3s}.c6{background:#ff8a3c;left:28%;bottom:-6px;transform:rotate(60deg);animation-delay:-5s}
@keyframes float{to{translate:0 -16px;rotate:25deg}}
.eyebrow{margin:0;color:var(--blue);font-size:13px;font-weight:800;letter-spacing:2px}
.title{margin:4px 0 6px}
.headline{font:700 clamp(28px,6vw,44px)/1.15 Fredoka,sans-serif;margin:8px 0 12px}.accent{color:var(--pink)}
.lead{font-size:18px;color:var(--muted);max-width:620px;margin:0 auto}
.soon{display:inline-flex;align-items:center;gap:10px;margin-top:24px;padding:13px 24px;border-radius:999px;background:linear-gradient(135deg,#ff4f8b,#ff7a59);font-weight:800;box-shadow:0 10px 30px rgba(255,79,139,.4);animation:glowpulse 2.6s ease-in-out infinite}
.pulse{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:ping 1.8s ease-out infinite}
@keyframes ping{to{box-shadow:0 0 0 12px rgba(255,255,255,0)}}@keyframes glowpulse{50%{box-shadow:0 10px 44px rgba(255,79,139,.65)}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:36px 0 8px}
.stats div{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 8px;text-align:center}
.stats b{display:block;font:700 30px/1.1 Fredoka,sans-serif;background:linear-gradient(135deg,#ffd93b,#ff4f8b);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{color:var(--muted);font-size:14px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-top:18px}
.card{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:14px;transition:transform .25s,border-color .25s,background .25s}
.card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.08)}
.tile{flex:none;width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px;border:1px solid rgba(255,255,255,.25);box-shadow:0 8px 18px rgba(0,0,0,.35)}
h1{font:700 clamp(30px,7vw,48px)/1.1 Fredoka,sans-serif;margin:18px 0 12px}
.doc{background:rgba(20,17,31,.55);border:1px solid var(--line);border-radius:24px;padding:8px 22px 18px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.doc h1{font-size:clamp(28px,6vw,40px)}
h2{font:700 20px/1.3 Fredoka,sans-serif;margin:28px 0 6px}h3{margin:0 0 2px;font:700 18px Fredoka,sans-serif}
.card p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.45}
.facts{text-align:center;color:var(--muted);margin-top:30px}.facts p{margin:6px 0}
.doc p{color:#e6e0f5}.muted{color:var(--muted)}.todo{color:var(--orange);font-style:normal;opacity:.85}
footer{position:relative;border-top:1px solid var(--line);color:var(--muted);text-align:center;padding:24px 16px 40px;font-size:14px}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-bottom:8px}footer a{color:var(--muted)}
/* Scroll reveal (only with JavaScript). */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,1,.3,1);transition-delay:calc(var(--i,0) * .07s)}
.js .reveal.in{opacity:1;transform:none}
@media (max-width:440px){.stage{height:170px}.fcard{width:78px;height:108px;margin-left:calc(-39px + (var(--i) - 1.5) * 74px);border-radius:16px}.fcard span{font-size:30px}.fcard b{font-size:11px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}