:root{--ink:#0b0d12;--ink2:#14171f;--text:#f5f7fa;--dim:#9aa4b2;--blue:#1456c9;--sky:#3d8fe6;--duck:#f3ff4a;--line:rgba(255,255,255,.1);--card:rgba(255,255,255,.05)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--text);font:17px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:20;height:52px;background:rgba(11,13,18,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between}
.nav .brand{display:flex;align-items:center;gap:10px;font-weight:600;text-decoration:none}
.nav .brand img{width:24px;height:24px;border-radius:6px}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:14px}
.nav ul a{color:var(--dim);text-decoration:none;transition:color .2s}.nav ul a:hover{color:var(--text)}

/* hero */
.hero{position:relative;padding:130px 0 0;text-align:center;overflow:hidden;background:radial-gradient(1200px 600px at 50% -10%,rgba(20,80,190,.55),transparent 70%),radial-gradient(800px 400px at 85% 30%,rgba(243,255,74,.10),transparent 60%)}
.eyebrow{display:inline-block;padding:6px 14px;border:1px solid var(--line);border-radius:99px;color:var(--sky);font-size:14px;background:var(--card)}
.hero h1{font-size:clamp(40px,7.2vw,84px);line-height:1.02;letter-spacing:-.03em;margin:22px auto 18px;max-width:900px;font-weight:700}
.grad{background:linear-gradient(90deg,#5aa9f0,var(--blue) 40%,var(--duck));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{font-size:clamp(18px,2.2vw,24px);color:var(--dim);max-width:640px;margin:0 auto 30px}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:99px;font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s}
.btn.primary{background:var(--text);color:var(--ink)}.btn.primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(61,143,230,.35)}
.btn.ghost{border:1px solid var(--line);color:var(--text)}.btn.ghost:hover{background:var(--card)}
.hero-stage{position:relative;height:640px;margin-top:56px}
.hero-stage .phone{position:absolute;left:50%;top:0;width:340px;transform:translateX(-50%) translateY(calc(var(--p,0) * -40px)) rotate(calc(var(--p,0) * -3deg))}
.hero-stage .glow{position:absolute;left:50%;top:60px;width:520px;height:520px;transform:translateX(-50%);background:radial-gradient(circle,rgba(18,74,180,.55),transparent 65%);filter:blur(30px);animation:breathe 6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.55;transform:translateX(-50%) scale(1.08)}}

/* phone frame */
.phone{aspect-ratio:1320/2868;border-radius:15% / 7%;padding:3.2%;background:linear-gradient(145deg,#3a3f4a,#12141a 40%,#2b2f38);box-shadow:0 0 0 1.5px #555b68 inset,0 40px 90px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.04)}
.phone img{display:block;width:100%;height:100%;object-fit:cover;border-radius:11.5% / 5.3%}
.float{animation:float 7s ease-in-out infinite}
@keyframes float{50%{translate:0 -10px}}

/* reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}.reveal.d2{transition-delay:.24s}.reveal.d3{transition-delay:.36s}

/* sections */
section{padding:120px 0}
.kicker{color:var(--sky);font-weight:600;font-size:15px;letter-spacing:.04em;text-transform:uppercase}
h2{font-size:clamp(32px,5vw,56px);line-height:1.06;letter-spacing:-.025em;margin:12px 0 18px}
.lede{font-size:clamp(18px,2vw,22px);color:var(--dim);max-width:520px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split.flip .copy{order:2}
.split .phone{width:min(330px,80%);margin:0 auto}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.chip{padding:10px 18px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-weight:600;transition:transform .25s,border-color .25s,background .25s}
.chip:hover{transform:translateY(-3px);border-color:var(--sky);background:rgba(61,143,230,.12)}
.band{background:linear-gradient(180deg,var(--ink),var(--ink2) 20%,var(--ink2) 80%,var(--ink))}

/* ping marker */
.ping{position:relative;width:14px;height:14px;border-radius:50%;background:var(--duck);margin:0 0 28px 6px}
.ping::before,.ping::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--duck);animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite}
.ping::after{animation-delay:1.2s}
@keyframes ping{80%,100%{transform:scale(4.5);opacity:0}}

/* feature cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.fcard{padding:28px;border-radius:24px;background:var(--card);border:1px solid var(--line);transition:transform .3s,border-color .3s}
.fcard:hover{transform:translateY(-6px);border-color:rgba(61,143,230,.55)}
.fcard svg{width:34px;height:34px;stroke:var(--sky);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.fcard h3{margin:0 0 6px;font-size:21px}.fcard p{margin:0;color:var(--dim);font-size:16px}
.center{text-align:center}.center .lede{margin:0 auto}

/* ipad */
.ipad{max-width:900px;margin:56px auto 0;border-radius:28px;padding:14px;background:linear-gradient(145deg,#3a3f4a,#12141a 40%,#2b2f38);box-shadow:0 40px 100px rgba(0,0,0,.6)}
.ipad img{display:block;width:100%;border-radius:16px}

/* pricing */
.price{max-width:720px;margin:48px auto 0;padding:48px 32px;border-radius:32px;text-align:center;background:radial-gradient(600px 240px at 50% 0,rgba(20,80,190,.35),transparent 70%),var(--card);border:1px solid var(--line)}
.price .big{font-size:clamp(56px,10vw,96px);font-weight:700;letter-spacing:-.04em}
.price ul{list-style:none;padding:0;margin:20px 0 0;color:var(--dim);display:grid;gap:8px}
.price li::before{content:"✓";color:var(--duck);margin-right:10px;font-weight:700}

footer{border-top:1px solid var(--line);padding:34px 0 60px;color:var(--dim);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}footer a{text-decoration:none;margin-left:18px}footer a:hover{color:var(--text)}

@media(max-width:820px){
 .split{grid-template-columns:1fr;gap:40px;text-align:center}.split.flip .copy{order:0}.lede{margin:0 auto}.chips{justify-content:center}
 .cards{grid-template-columns:1fr}.hero-stage{height:520px}.hero-stage .phone{width:270px}section{padding:84px 0}.nav ul li:not(:last-child){display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.hero-stage .phone{transform:translateX(-50%)}}

/* language switcher */
.lang{display:flex;gap:2px;margin-left:18px}
.lang a{padding:4px 7px;border-radius:8px;font-size:12px;font-weight:600;color:var(--dim);text-decoration:none;transition:color .2s,background .2s}
.lang a:hover{color:var(--text)}
.lang a.cur{color:var(--text);background:rgba(255,255,255,.1)}
@media(max-width:820px){.nav .wrap{gap:8px}.lang{margin-left:0}.lang a{padding:4px 5px}}