@font-face{font-family:"Nunito";src:url("/fonts/nunito-latin.woff") format("woff");font-weight:200 1000;font-display:swap}
:root{--p:#4338ca;--p2:#6366f1;--navy:#14213d;--ink:#0f172a;--mut:#475569;--line:#e4e7f2;--bg2:#f5f6fd}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--navy);line-height:1.65;background:#fff;font-size:17px;-webkit-font-smoothing:antialiased}
a{color:var(--p)}a:hover{color:var(--p2)}
.w{max-width:1160px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-weight:900;letter-spacing:-.02em;line-height:1.15}
h2{font-size:clamp(1.7rem,3.6vw,2.4rem);margin:0 0 14px}h3{font-size:1.15rem;margin:0 0 8px}
section{padding:88px 0}section.tint{background:var(--bg2)}
.eyebrow{display:inline-block;margin:0 0 12px;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--p);background:#e8e9fd;padding:4px 12px;border-radius:99px}
.intro{max-width:760px;color:var(--mut);margin:0 0 36px}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(14,22,48,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:10px;padding-bottom:10px}
.logo img{display:block;width:150px;height:auto;margin-left:-14px}
nav{display:flex;align-items:center;gap:22px}nav a{color:#c7cbe6;text-decoration:none;font-weight:700;font-size:.95rem}nav a:hover{color:#fff}
nav a.pill{color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);padding:7px 16px;border-radius:99px}nav a.pill:hover{background:rgba(255,255,255,.18)}

/* buttons */
.btn{display:inline-block;background:linear-gradient(135deg,#6366f1,#4338ca);color:#fff;padding:15px 26px;border-radius:14px;text-decoration:none;font-weight:800;box-shadow:0 10px 30px -8px rgba(99,102,241,.7),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .15s,box-shadow .15s}
.btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 36px -8px rgba(99,102,241,.85)}
.btn.light{background:#fff;color:var(--p);box-shadow:0 12px 30px -10px rgba(0,0,0,.45)}.btn.light:hover{color:var(--p)}

/* hero */
.hero,.phero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(1200px 600px at 85% -10%,#6366f1 0%,transparent 60%),radial-gradient(900px 500px at -10% 110%,#4338ca 0%,transparent 55%),linear-gradient(160deg,#1a2550 0%,#14213d 55%,#0d1530 100%)}
.hero{margin-top:-71px;padding:150px 0 100px}.phero{margin-top:-71px;height:150px}
.glow{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 70%);pointer-events:none}
.hgrid{position:relative;display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.5rem);margin:0 0 20px;background:linear-gradient(180deg,#fff 30%,#c7c9ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:1.15rem;color:#cdd2ee;max-width:560px;margin:0 0 30px}
.hvis{display:flex;flex-direction:column;align-items:center;gap:18px}
.hlabels{position:relative;height:34px;width:100%;}
.lb{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.85rem;font-weight:800;padding:6px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08)}
.lb2{background:rgba(99,102,241,.35);border-color:rgba(165,170,255,.6);opacity:0}
.lb1{animation:lb1 9s ease-in-out infinite}.lb2{animation:lb2 9s ease-in-out infinite}
@keyframes lb1{0%,32%{opacity:1}42%,88%{opacity:0}98%,100%{opacity:1}}
@keyframes lb2{0%,32%{opacity:0}42%,88%{opacity:1}98%,100%{opacity:0}}

/* devices: --u = CSS px per screen pixel, so every drawing keeps Apple's ratios and relative sizes */
.dev{--u:.135px;display:inline-block;padding:calc(var(--u)*64);background:linear-gradient(145deg,#3a4566,#121a33 45%,#0a0f22);border-radius:calc(var(--u)*230);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 0 0 1px #05081a,0 24px 50px -18px rgba(20,33,61,.55)}
.hdev{--u:.19px;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 0 0 1px #05081a,0 40px 90px -20px rgba(0,0,0,.7),0 0 120px -20px rgba(99,102,241,.55)}
.scr{position:relative;display:flex;justify-content:center;background:#000;border-radius:calc(var(--u)*170);overflow:hidden}
.scr.fold{width:calc(var(--u)*1398);height:calc(var(--u)*2034)}
.scr.open{width:calc(var(--u)*2670);height:calc(var(--u)*1878)}
.scr.open::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:linear-gradient(90deg,rgba(20,33,61,.16),rgba(255,255,255,.35));opacity:.8;pointer-events:none;z-index:3}
/* generic app UI */
.app{position:relative;width:40%;height:100%;background:linear-gradient(180deg,#eef0ff,#dfe3ff);overflow:hidden;padding:calc(var(--u)*60);padding-bottom:calc(var(--u)*230)}
.app.fit{width:100%}
.abar{height:calc(var(--u)*130);border-radius:calc(var(--u)*65);background:#fff;margin-bottom:calc(var(--u)*50);box-shadow:0 1px 2px rgba(67,56,202,.12)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*420),1fr));gap:calc(var(--u)*40)}
.tiles i{display:block;aspect-ratio:4/5;border-radius:calc(var(--u)*50);background:linear-gradient(160deg,#a5b4fc,#6366f1)}
.tiles i:nth-child(3n+2){background:linear-gradient(160deg,#c4b5fd,#7c3aed)}
.tiles i:nth-child(3n){background:linear-gradient(160deg,#93c5fd,#4338ca)}
.tiles i:nth-child(4n+1){background:linear-gradient(160deg,#fbcfe8,#a78bfa)}
.tabs,.rail{position:absolute;display:flex;background:rgba(255,255,255,.92);box-shadow:0 -1px 2px rgba(20,33,61,.08)}
.tabs{left:0;right:0;bottom:0;height:calc(var(--u)*180);justify-content:space-around;align-items:center}
.rail{top:0;bottom:0;left:0;width:calc(var(--u)*190);flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*90);opacity:0}
.tabs i,.rail i{display:block;width:calc(var(--u)*70);height:calc(var(--u)*70);border-radius:50%;background:#c7cbe6}
.tabs i:first-child,.rail i:first-child{background:var(--p)}
/* fitted open screen: side rail instead of bottom tabs */
.app.fit:not(.fold){padding-left:calc(var(--u)*250);padding-bottom:calc(var(--u)*60)}
.app.fit:not(.fold) .tabs{opacity:0}.app.fit:not(.fold) .rail{opacity:1}
/* hero animation: black bars -> fitted */
.anim .app{animation:grow 9s cubic-bezier(.65,0,.35,1) infinite}
.anim .tabs{animation:fadeout 9s ease-in-out infinite}.anim .rail{animation:fadein 9s ease-in-out infinite}
@keyframes grow{0%,30%{width:40%;padding-left:calc(var(--u)*60);padding-bottom:calc(var(--u)*230)}44%,86%{width:100%;padding-left:calc(var(--u)*250);padding-bottom:calc(var(--u)*60)}100%{width:40%;padding-left:calc(var(--u)*60);padding-bottom:calc(var(--u)*230)}}
@keyframes fadein{0%,34%{opacity:0}44%,86%{opacity:1}94%,100%{opacity:0}}
@keyframes fadeout{0%,34%{opacity:1}42%,90%{opacity:0}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.anim .app,.anim .tabs,.anim .rail,.lb1,.lb2{animation:none}.anim .app{width:100%;padding-left:calc(var(--u)*250);padding-bottom:calc(var(--u)*60)}.anim .rail{opacity:1}.anim .tabs{opacity:0}.lb1{opacity:0}.lb2{opacity:1}}

/* to-scale demo */
.demo{display:grid;grid-template-columns:repeat(3,auto);grid-template-rows:auto auto;column-gap:44px;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:24px;padding:40px 28px 32px;box-shadow:0 20px 50px -30px rgba(20,33,61,.35)}
.demo figure{margin:0;width:min-content;display:grid;grid-row:span 2;grid-template-rows:subgrid;justify-items:center}.demo .dev{align-self:end}
.demo figcaption{font-size:.88rem;color:var(--mut);margin-top:14px;line-height:1.5;justify-self:stretch}
.cap{font-size:.88rem;color:var(--mut);margin:14px 0 0;text-align:center}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:0 1px 2px rgba(20,33,61,.04);transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -24px rgba(67,56,202,.45);border-color:#c7cbf6}
.card p{color:var(--mut);margin:0}
.ico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;margin-bottom:18px;background:linear-gradient(135deg,#6366f1,#4338ca);box-shadow:0 10px 22px -10px rgba(67,56,202,.8)}
.ico svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.step b{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;margin-bottom:18px;font-size:1.2rem;color:var(--p);background:#eef0ff;border:2px solid #c7cbf6}
@media (min-width:900px){.steps .step:not(:last-child)::after{content:"";position:absolute;top:50px;right:-25px;width:26px;height:2px;background:linear-gradient(90deg,#c7cbf6,#6366f1)}}

/* pricing */
.prices{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.price{display:flex;flex-direction:column;justify-content:space-between;gap:18px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 22px;transition:transform .2s,box-shadow .2s}
.price:hover{transform:translateY(-4px);box-shadow:0 22px 44px -24px rgba(67,56,202,.45)}
.price h3{font-size:1rem;font-weight:800;color:var(--mut);letter-spacing:0}
.amt{margin:0;font-size:1.9rem;font-weight:900;letter-spacing:-.02em;color:var(--navy)}
.price.feat{background:linear-gradient(160deg,#6366f1,#4338ca);border-color:transparent;box-shadow:0 20px 40px -18px rgba(67,56,202,.75)}
.from{font-size:1rem;font-weight:800;color:var(--mut);margin-right:2px}.price.feat h3{color:#dfe1ff}.price.feat .amt{color:#fff}

/* CTA band */
.cta{position:relative;overflow:hidden;color:#fff;text-align:center;background:radial-gradient(700px 300px at 50% 0%,#6366f1,transparent 70%),linear-gradient(135deg,#4338ca,#14213d)}
.ctain{max-width:760px}.cta h2{font-size:clamp(2rem,4vw,2.8rem)}.cta p{color:#dfe1ff;font-size:1.1rem}.cta p a:not(.btn){color:#fff;font-weight:800}
.ico.big{width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);box-shadow:none}.ico.big svg{width:32px;height:32px}

/* footer */
footer{background:#0d1530;color:#9aa3c7;padding:40px 0;font-size:.88rem}footer a{color:#c7cbe6}footer a:hover{color:#fff}
footer .logo img{width:130px;margin-bottom:6px}footer p{margin:6px 0}footer .tm{font-size:.8rem;color:#7c86ad}

/* privacy */
.psec{padding:0 0 80px}
.prose{position:relative;max-width:820px;margin:-70px auto 0;background:#fff;border:1px solid var(--line);border-radius:24px;padding:48px 56px;box-shadow:0 30px 60px -30px rgba(20,33,61,.4)}
.prose h1{font-size:clamp(2rem,4vw,2.6rem);margin:0 0 4px}.prose h1+p{color:var(--mut);margin-top:0}
.prose h2{font-size:1.3rem;margin:34px 0 8px;padding-top:18px;border-top:1px solid var(--line)}.prose p{color:#334155}

/* responsive */
@media (max-width:1100px){.prices{grid-template-columns:repeat(3,1fr)}.dev{--u:.12px}.demo{column-gap:28px}}
@media (max-width:980px){.hgrid{grid-template-columns:1fr;gap:44px}.hvis{order:2}.hdev{--u:.17px}}
@media (max-width:720px){
 body{font-size:16px}section{padding:64px 0}.w{padding:0 20px}
 nav a:not(.pill){display:none}
 .hero{padding:120px 0 64px}
 .hdev{--u:.118px}.dev{--u:.118px}
 .demo{display:flex;flex-direction:column;align-items:center;padding:28px 12px 24px;gap:32px}.demo figure{display:flex;flex-direction:column;align-items:center;width:auto;max-width:100%}.demo .dev{flex:0 0 auto;align-self:center}.scr,.app{flex-shrink:0}
 .prices{grid-template-columns:1fr 1fr}.price.feat{grid-column:1/-1}
 .prose{padding:30px 22px;margin-top:-60px}.amt{font-size:1.45rem}.from{font-size:.85rem}
}
@media (max-width:380px){.hdev,.dev{--u:.108px}.prices{grid-template-columns:1fr}}