:root{--bg:#0b0920;--ink:#fff;--mut:rgba(255,255,255,.72);--gold:#ffd166;--gold2:#f4a300;--pink:#ff2d75;--violet:#7b2ff7;--cyan:#00d4ff;--card:rgba(255,255,255,.06);--line:rgba(255,255,255,.12)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;line-height:1.5;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:12px}

/* animated background */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(120% 80% at 50% 0%,#2a0f4f 0%,#120a2e 45%,#0b0920 100%)}
.bg i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform}
.bg .b1{width:70vmax;height:70vmax;left:-25vmax;top:-20vmax;background:radial-gradient(circle,#ff2d75 0%,transparent 65%);animation:fl1 18s ease-in-out infinite alternate}
.bg .b2{width:60vmax;height:60vmax;right:-25vmax;top:20vh;background:radial-gradient(circle,#7b2ff7 0%,transparent 65%);animation:fl2 22s ease-in-out infinite alternate}
.bg .b3{width:55vmax;height:55vmax;left:10vw;bottom:-30vmax;background:radial-gradient(circle,#f4a300 0%,transparent 62%);opacity:.38;animation:fl1 26s ease-in-out infinite alternate-reverse}
.bg .grain{inset:0;width:auto;height:auto;border-radius:0;filter:none;opacity:.5;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:22px 22px;animation:none}
@keyframes fl1{to{transform:translate(12vw,10vh) scale(1.1)}}
@keyframes fl2{to{transform:translate(-14vw,-8vh) scale(.92)}}

/* top bar */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:rgba(11,9,32,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;font-size:18px;letter-spacing:.2px}
.brand img{border-radius:9px}
.top-dl{text-decoration:none;font-weight:800;font-size:14px;color:#1d1300;background:linear-gradient(135deg,#ffe08a,#ffb703 55%,#ff8c00);padding:8px 16px;border-radius:999px;box-shadow:0 4px 18px rgba(255,183,3,.35)}

main{max-width:1080px;margin:0 auto;padding:0 18px}

/* hero */
.hero{text-align:center;padding:38px 0 10px;overflow-x:clip}
.logo-wrap{position:relative;width:132px;height:132px;margin:0 auto 18px}
.logo{width:132px;height:132px;border-radius:32px;position:relative;z-index:1;box-shadow:0 18px 50px rgba(255,180,40,.38),0 0 0 1px rgba(255,255,255,.12) inset;animation:bob 5s ease-in-out infinite}
.ring{position:absolute;inset:-10px;border-radius:40px;background:conic-gradient(from 0deg,#ffd166,#ff2d75,#7b2ff7,#00d4ff,#ffd166);filter:blur(14px);opacity:.75;animation:spin 8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{50%{transform:translateY(-6px)}}
.kicker{display:inline-block;margin:0 0 12px;font-size:12.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);padding:5px 12px;border:1px solid rgba(255,209,102,.35);border-radius:999px;background:rgba(255,209,102,.08)}
h1{margin:0 auto 12px;max-width:640px;text-wrap:balance;font-size:clamp(30px,8.4vw,56px);line-height:1.08;letter-spacing:-.8px;font-weight:900}
.grad-text{background:linear-gradient(100deg,#ffe08a 0%,#ffb703 30%,#ff5c8a 65%,#b388ff 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 6s linear infinite}
@keyframes sheen{to{background-position:200% center}}
.sub{margin:0 auto 24px;max-width:480px;color:var(--mut);font-size:16.5px}

.cta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:360px;margin:0 auto;padding:18px 24px;border-radius:20px;text-decoration:none;font-weight:900;font-size:19px;color:#1d1300;background:linear-gradient(135deg,#ffe9a8 0%,#ffc531 40%,#ff9500 100%);box-shadow:0 14px 40px rgba(255,160,0,.42),0 0 0 1px rgba(255,255,255,.35) inset;transition:transform .15s ease}
.cta::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);animation:shine 3.2s ease-in-out infinite}
@keyframes shine{0%,55%{left:-60%}100%{left:130%}}
.cta:active{transform:scale(.97)}
.meta{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 0 0;font-size:14px;color:var(--mut)}
.meta b{color:#fff}
.meta i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.4)}
.ghost{display:inline-block;margin-top:16px;padding:11px 22px;border-radius:999px;text-decoration:none;font-weight:700;font-size:15px;border:1px solid var(--line);background:rgba(255,255,255,.06);backdrop-filter:blur(6px)}
.chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0;margin:26px auto 0;max-width:560px}
.chips li{font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}

/* phone mockup */
.phone{position:relative;width:240px;aspect-ratio:260/563;padding:9px;border-radius:40px;background:linear-gradient(145deg,#3a3550,#14121f 40%,#2b2740);box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 0 1.5px rgba(255,255,255,.14) inset,0 0 0 1px #000}
.phone::before{content:"";position:absolute;top:18px;left:50%;width:70px;height:20px;margin-left:-35px;border-radius:12px;background:#05050a;z-index:2}
.phone::after{content:"";position:absolute;right:-3px;top:110px;width:3px;height:56px;border-radius:0 3px 3px 0;background:#2b2740}
.scr{width:100%;height:100%;border-radius:32px;overflow:hidden;background:#111}
.scr img{width:100%;height:100%;object-fit:cover;object-position:top}

.hero-phones{position:relative;display:flex;justify-content:center;align-items:flex-end;margin:40px auto 0;height:430px}
.hero-phones .mid{width:210px;z-index:2;animation:rise 1s cubic-bezier(.2,.8,.2,1) both}
.hero-phones .sm{width:170px;position:absolute;bottom:26px;opacity:.92}
.hero-phones .tilt-l{right:calc(50% + 55px);transform:rotate(-9deg);animation:inl 1.1s .1s cubic-bezier(.2,.8,.2,1) both}
.hero-phones .tilt-r{left:calc(50% + 55px);transform:rotate(9deg);animation:inr 1.1s .1s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(40px)}}
@keyframes inl{from{opacity:0;transform:translate(40px,30px) rotate(0)}}
@keyframes inr{from{opacity:0;transform:translate(-40px,30px) rotate(0)}}

/* features */
.feat,.install,.faq{padding:64px 0 8px}
.feat-head{max-width:560px}
.tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;padding:5px 11px;border-radius:999px;margin-bottom:10px}
.t-pink{background:rgba(255,45,117,.16);color:#ff7aa8}
.t-cyan{background:rgba(0,212,255,.14);color:#6fe6ff}
.t-gold{background:rgba(255,209,102,.14);color:#ffd166}
.t-violet{background:rgba(155,100,255,.18);color:#c3a3ff}
h2{margin:0 0 8px;text-wrap:balance;font-size:clamp(26px,6.6vw,40px);line-height:1.12;letter-spacing:-.5px;font-weight:900}
.feat-head p{margin:0;color:var(--mut);font-size:16px}
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:26px 18px 18px;margin:0 -18px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.card{flex:0 0 auto;margin:0;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 16px 16px;border-radius:30px;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.09)}
#social .card{background:linear-gradient(160deg,rgba(255,45,117,.2),rgba(123,47,247,.08))}
#chat .card{background:linear-gradient(160deg,rgba(0,212,255,.18),rgba(123,47,247,.08))}
#games .card{background:linear-gradient(160deg,rgba(255,183,3,.2),rgba(255,45,117,.08))}
#shop .card{background:linear-gradient(160deg,rgba(155,100,255,.24),rgba(255,209,102,.08))}
.card figcaption{text-align:center;max-width:230px}
.card figcaption b{display:block;font-size:17px}
.card figcaption span{display:block;font-size:14px;color:var(--mut)}
.rail.one{justify-content:flex-start}

/* install */
.steps{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.steps li{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:20px;background:var(--card);border:1px solid rgba(255,255,255,.08)}
.steps .n{flex:0 0 38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:900;color:#1d1300;background:linear-gradient(135deg,#ffe08a,#ff9500)}
.steps b{font-size:16.5px}
.steps p{margin:2px 0 0;color:var(--mut);font-size:15px}
.steps em{font-style:normal;color:#fff;font-weight:700}

/* faq */
.qa{margin-top:22px;display:grid;gap:10px}
details{border-radius:18px;background:var(--card);border:1px solid rgba(255,255,255,.08);padding:0 16px}
summary{cursor:pointer;list-style:none;padding:16px 28px 16px 0;font-weight:700;font-size:16px;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:4px;top:50%;width:10px;height:10px;margin-top:-7px;border-right:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);transform:rotate(45deg);transition:transform .2s}
details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
details p{margin:0 0 16px;color:var(--mut);font-size:15px}
details a{color:#ffd166}

/* final */
.final{text-align:center;margin:70px 0 20px;padding:40px 20px 36px;border-radius:32px;background:linear-gradient(150deg,rgba(255,45,117,.28),rgba(123,47,247,.28) 50%,rgba(255,183,3,.22));border:1px solid rgba(255,255,255,.12)}
.final img{margin:0 auto 14px;border-radius:20px;box-shadow:0 10px 30px rgba(255,180,40,.35)}
.final p{color:var(--mut);margin:0 0 20px}
.final .meta{margin-top:12px}
footer{text-align:center;padding:24px 18px 40px;color:rgba(255,255,255,.5);font-size:13px}
footer p{margin:4px 0}
footer a{color:rgba(255,255,255,.7)}

/* see it in action */
.action{padding:56px 0 8px}
.vrail{gap:16px}
.vcard{flex:0 0 auto;width:min(62vw,250px);margin:0;scroll-snap-align:center;display:flex;flex-direction:column;gap:12px}
.vbox{position:relative;width:100%;aspect-ratio:9/16;border-radius:24px;overflow:hidden;background:#140d2c;box-shadow:0 20px 44px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.12) inset}
.vbox video{width:100%;height:100%;object-fit:cover;display:block;background:#140d2c}
.vplay{position:absolute;inset:0;margin:auto;width:66px;height:66px;border:0;border-radius:50%;display:grid;place-items:center;padding:0 0 0 4px;color:#1d1300;background:linear-gradient(135deg,#ffe9a8,#ffc531 45%,#ff9500);box-shadow:0 10px 30px rgba(255,160,0,.5),0 0 0 6px rgba(255,255,255,.14);cursor:pointer;transition:opacity .2s,transform .2s}
.vplay:active{transform:scale(.94)}
.vbox.playing .vplay{opacity:0;pointer-events:none}
.vbox.playing{cursor:pointer}
.vdur{position:absolute;left:10px;bottom:10px;font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.5)}
.vdur:empty{display:none}
.vbox.playing .vdur{display:none}
.vcard figcaption{text-align:center}
.vcard figcaption b{display:block;font-size:16.5px}
.vcard figcaption span{display:block;font-size:14px;color:var(--mut)}

/* gallery */
.gallery{padding:64px 0 8px}
.ggrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.gi{display:block;border-radius:18px;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transition:transform .15s}
.gi:active{transform:scale(.97)}
.gi img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.gi.st img{aspect-ratio:9/16}

/* lightbox */
.lb{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:56px 12px 48px;background:rgba(6,4,18,.94)}
.lb[hidden]{display:none}
.lb-img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.6);touch-action:pan-y}
.lb button{position:absolute;border:0;color:#fff;background:rgba(255,255,255,.12);border-radius:50%;width:44px;height:44px;display:grid;place-items:center;cursor:pointer}
.lb-x{top:max(10px,env(safe-area-inset-top));right:12px}
.lb-p{left:8px;top:50%;margin-top:-22px}
.lb-n{right:8px;top:50%;margin-top:-22px}
.lb-c{position:absolute;bottom:12px;left:0;right:0;margin:0;text-align:center;font-size:14px;color:var(--mut)}
body.lb-open{overflow:hidden}

@media (min-width:820px){
  .action{display:grid;grid-template-columns:minmax(260px,1fr) 2fr;gap:30px;align-items:center}
  .vrail{margin:0;padding:10px 4px 18px}
  .vcard{width:220px}
  .ggrid{grid-template-columns:repeat(4,1fr)}
  .gi.st{grid-column:span 2}
  .gi.st img{aspect-ratio:auto;height:100%;max-height:none}
}

/* tagline + about */
.tagline{margin:0 auto 12px;max-width:560px;text-wrap:balance;font-size:clamp(22px,6vw,34px);line-height:1.15;font-weight:800;letter-spacing:-.4px}
.hero h1{margin-bottom:4px}
.about{padding:64px 0 8px}
.about-body{margin-top:18px;max-width:720px;padding:20px 18px 6px;border-radius:24px;background:var(--card);border:1px solid rgba(255,255,255,.08)}
.about-body p{margin:0 0 14px;color:var(--mut);font-size:15.5px}
.about-body h3{margin:0 0 4px;font-size:17px;font-weight:800;color:#fff}

/* reveal on scroll (only when JS runs) */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}

@media (min-width:820px){
  .hero{padding-top:64px}
  .hero-phones{height:520px}
  .hero-phones .mid{width:250px}
  .hero-phones .sm{width:200px}
  .hero-phones .tilt-l{right:calc(50% + 80px)}
  .hero-phones .tilt-r{left:calc(50% + 80px)}
  .feat{display:grid;grid-template-columns:minmax(260px,1fr) 2fr;gap:30px;align-items:center}
  .rail{margin:0;padding:10px 4px 18px}
  .steps{grid-template-columns:1fr 1fr}
  .qa{grid-template-columns:1fr 1fr;align-items:start}
}
@media (max-width:380px){.phone{width:216px}.hero-phones .mid{width:190px}.hero-phones .sm{width:150px}.hero-phones{height:390px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}