:root{--ink:#0a0a0b;--ink2:#17171a;--mut:#5d5d66;--line:rgba(10,10,11,.12);--paper:#fff;--pearl:#f4f4f6;--r:20px;--f:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:var(--f);color:var(--ink);background:linear-gradient(180deg,#fff 0,#f1f1f4 100vh,#fff 100%);-webkit-font-smoothing:antialiased;line-height:1.55}
a{color:inherit}img{max-width:100%}
#scene{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
main,.foot,.nav{position:relative;z-index:2}
.sec,.final,.strip,.modex{position:relative}
.sec{padding:110px max(6vw,calc((100vw - 1240px)/2));background:#fff}
.wide{max-width:none;margin:0;padding:110px 6vw}
.wide>.in{max-width:1240px;margin:0 auto}
.dark{background:linear-gradient(180deg,#0b0b0d,#16161a);color:#fff;position:relative;overflow:hidden}
.dark:before{content:"";position:absolute;inset:-30% -10% auto auto;width:60vw;height:60vw;background:radial-gradient(circle,rgba(255,255,255,.1),transparent 60%);pointer-events:none}
.pearl{background:linear-gradient(180deg,#f7f7f9,#ececef)}
.white{background:#fff}
h1,h2,h3{font-weight:600;letter-spacing:-.025em;margin:0}
h1{font-size:clamp(2.5rem,5.2vw,4.4rem);line-height:1.02}
h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.08}
.kicker{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);margin:0 0 14px;font-weight:600}
.dark .kicker{color:#a1a1aa}
.lead{font-size:1.2rem;color:var(--mut);max-width:34em}
.dark .lead,.dark p{color:#c4c4cc}
.sub{max-width:38em;color:var(--mut);font-size:1.08rem;margin:16px 0 0}
.dark .sub{color:#b5b5bd}
.grad{background:linear-gradient(100deg,#0a0a0b 10%,#8d8d96 55%,#0a0a0b 95%);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:sheen 7s linear infinite}
.dark .grad,.final .grad{background-image:linear-gradient(100deg,#fff 10%,#8d8d96 55%,#fff 95%)}
@keyframes sheen{to{background-position:-200% 0}}
/* nav */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:min(1180px,calc(100% - 28px));display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 14px 10px 20px;border-radius:999px;background:rgba(255,255,255,.85);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.9);box-shadow:0 8px 30px rgba(0,0,0,.08),inset 0 1px 0 #fff;z-index:50}
.nav.scrolled{box-shadow:0 10px 40px rgba(0,0,0,.14),inset 0 1px 0 #fff}
.nav .logo img{display:block;height:30px}
.nav nav{display:flex;gap:26px;font-size:.92rem}.nav nav a{text-decoration:none;color:#3b3b42}.nav nav a:hover{color:#000}
.navcta{display:flex;align-items:center;gap:14px}.navcta .link{font-size:.92rem;text-decoration:none;color:#3b3b42}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.98rem;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:transform .2s,box-shadow .2s}
.btn.sm{padding:9px 18px;font-size:.88rem}.btn.big{padding:17px 34px;font-size:1.05rem}
.btn.glow{color:#fff;background:linear-gradient(180deg,#3a3a40 0,#0a0a0b 55%,#000 100%);box-shadow:0 10px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.6)}
.btn.glow:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.4)}
.btn.ghost{background:linear-gradient(180deg,#fff,#eeeef1);color:var(--ink);border-color:var(--line);box-shadow:0 4px 14px rgba(0,0,0,.06),inset 0 1px 0 #fff}
.btn.ghost:hover{transform:translateY(-2px)}
.dark .btn.glow,.final .btn.glow{background:linear-gradient(180deg,#fff,#d9d9de);color:#0a0a0b;box-shadow:0 10px 30px rgba(255,255,255,.12),inset 0 1px 0 #fff}
.dark .btn.ghost,.final .btn.ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.25);box-shadow:none}
/* hero */
.hero{min-height:100vh;display:flex;align-items:center;padding:120px 6vw 80px;position:relative}
.heroin{max-width:660px;position:relative}
.heroin:before{content:"";position:absolute;inset:-60px -80px -60px -60px;background:radial-gradient(closest-side,rgba(255,255,255,1),rgba(255,255,255,.92) 62%,transparent);z-index:-1}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.85);border:1px solid var(--line);font-size:.82rem;color:#3b3b42;margin:0 0 24px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.dot{width:8px;height:8px;border-radius:50%;background:#0a0a0b;box-shadow:0 0 0 4px rgba(0,0,0,.1)}
.hero .lead{margin:26px 0 32px}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.chips{list-style:none;display:flex;gap:10px;flex-wrap:wrap;padding:0;margin:34px 0 0}
.chips li{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.8);font-size:.82rem;color:#3b3b42}
.scrollcue{position:absolute;left:50%;bottom:26px;width:26px;height:42px;border:2px solid #0a0a0b;border-radius:14px;opacity:.5}
.scrollcue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#0a0a0b;animation:cue 1.6s infinite}
@keyframes cue{50%{transform:translateY(12px);opacity:.2}}
/* strip */
.strip{background:#0a0a0b;color:#fff;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:48px 6vw}
.stat{text-align:center}.stat b{display:block;font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:600;letter-spacing:-.02em}.stat span{color:#a1a1aa;font-size:.9rem}
/* glass cards */
.card,.step,.panel{background:linear-gradient(180deg,#fff,#f3f3f6);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 40px -18px rgba(0,0,0,.18),inset 0 1px 0 #fff;position:relative;transition:transform .25s ease,box-shadow .25s}
.card{padding:28px}.step{padding:30px}
.card h3,.step h3{font-size:1.2rem;margin:12px 0 8px}.card p,.step p{margin:0;color:var(--mut)}
.num{font-size:.8rem;letter-spacing:.2em;color:var(--mut);font-weight:600}
.ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(180deg,#2b2b31,#0a0a0b);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 16px rgba(0,0,0,.25)}
.ico svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.tilt{will-change:transform}
/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}.reveal.in{opacity:1;transform:none}
/* mock windows */
.win{border-radius:18px;overflow:hidden;background:#fff;color:var(--ink);border:1px solid rgba(255,255,255,.18);box-shadow:0 40px 80px -20px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.4)}
.sec .win{border-color:var(--line);box-shadow:0 40px 70px -24px rgba(0,0,0,.3)}
.wbar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:linear-gradient(180deg,#f7f7f9,#e9e9ed);border-bottom:1px solid var(--line);font-size:.78rem;color:#55555d}
.wbar i{width:11px;height:11px;border-radius:50%;background:#c9c9ce}.wbar span{margin-left:10px}
/* admin demo */
.admin{display:grid;grid-template-columns:200px 1fr;min-height:470px;margin-top:44px}
.side{background:#0f0f12;color:#d4d4d8;padding:16px 12px;display:flex;flex-direction:column;gap:4px}
.side .org{display:flex;align-items:center;gap:10px;padding:6px 10px 16px;color:#fff;font-weight:600;font-size:.9rem}
.side .org img{width:26px;height:26px;border-radius:7px}
.side button{all:unset;cursor:pointer;padding:10px 12px;border-radius:10px;font-size:.9rem;display:flex;gap:10px;align-items:center}
.side button:hover{background:rgba(255,255,255,.08)}.side button.on{background:#fff;color:#0a0a0b;font-weight:600}
.side button:focus-visible{outline:2px solid #fff}
.main{padding:22px 26px;background:#fafafb;position:relative;min-height:420px}
.main h4{margin:0 0 4px;font-size:1.15rem;letter-spacing:-.01em}.main .hint{margin:0 0 16px;color:var(--mut);font-size:.86rem}
.pane{display:none;animation:fade .35s}.pane.on{display:block}@keyframes fade{from{opacity:0;transform:translateY(6px)}}
.tbl{width:100%;border-collapse:collapse;font-size:.88rem;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tbl th{text-align:left;font-weight:600;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);padding:10px 14px;background:#f3f3f6}.tbl td{padding:11px 14px;border-top:1px solid var(--line)}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.74rem;background:#ececef;border:1px solid var(--line)}.pill.k{background:#0a0a0b;color:#fff;border-color:#0a0a0b}
.row{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.in-f{flex:1;min-width:120px;padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;font:inherit;font-size:.88rem;color:var(--ink)}
.in-f:focus{outline:2px solid #0a0a0b;outline-offset:1px}
.bt{padding:10px 18px;border-radius:10px;border:0;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;color:#fff;background:linear-gradient(180deg,#34343a,#0a0a0b);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.bt.l{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.tpl{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;font-size:.9rem}
.tpl small{color:var(--mut)}
.toast{position:absolute;right:20px;bottom:18px;background:#0a0a0b;color:#fff;padding:10px 16px;border-radius:12px;font-size:.84rem;opacity:0;transform:translateY(10px);transition:.3s;pointer-events:none}.toast.on{opacity:1;transform:none}
.cat{display:inline-flex;gap:8px;align-items:center;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);margin:0 8px 8px 0;font-size:.88rem}
.cat i{font-style:normal;color:var(--mut);font-size:.78rem}
.roles{display:grid;gap:8px}.roleopt{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:12px;font-size:.9rem}
.sel{padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:#fff;font:inherit;font-size:.85rem}
.guide{display:flex;gap:10px;margin:22px 0 0;flex-wrap:wrap;justify-content:center;color:#a1a1aa;font-size:.88rem}
/* editor <-> outlook */
.live{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:44px;align-items:start}
.edit{padding:22px}.edit label{display:block;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:12px 0 6px;font-weight:600}
.edit .in-f{width:100%}.edit textarea{min-height:150px;resize:vertical;line-height:1.5}
.fields{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.fchip{padding:6px 12px;border-radius:999px;border:1px dashed #0a0a0b;background:#fff;font-size:.8rem;cursor:pointer;font-family:ui-monospace,Menlo,Consolas,monospace}
.fchip:hover{background:#0a0a0b;color:#fff}
.flow{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 14px;color:var(--mut);font-size:.82rem}
.flow b{display:inline-block;width:8px;height:8px;border-radius:50%;background:#0a0a0b;animation:pulse 1.4s infinite}@keyframes pulse{50%{opacity:.2;transform:scale(1.6)}}
.compose{padding:18px 20px}.field{display:flex;gap:12px;border-bottom:1px solid var(--line);padding:9px 0;font-size:.88rem}.field label{width:58px;color:var(--mut)}.field span{flex:1}
.msg{white-space:pre-wrap;padding-top:14px;font-size:.92rem;min-height:170px}
.msg .tok{background:#0a0a0b;color:#fff;border-radius:5px;padding:0 5px}
.obody{display:grid;grid-template-columns:1fr 210px}.paneo{background:#f3f3f6;border-left:1px solid var(--line);padding:14px;font-size:.84rem}
.phead{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:10px}.phead img{width:20px;height:20px;border-radius:5px}
.ptabs{display:flex;gap:6px;margin-bottom:10px}.ptabs span{padding:3px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:.76rem}.ptabs .on{background:#0a0a0b;color:#fff}
.plist{list-style:none;margin:0;padding:0;display:grid;gap:6px}.plist li{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:8px 10px;background:#fff;border:1px solid var(--line);border-radius:9px;cursor:pointer;font-size:.8rem}
.plist li.hot{border-color:#0a0a0b;box-shadow:0 0 0 2px rgba(0,0,0,.12)}.plist button{border:0;background:#0a0a0b;color:#fff;border-radius:6px;font-size:.7rem;padding:3px 8px}
.type:after{content:"";display:inline-block;width:2px;height:1em;background:#0a0a0b;margin-left:2px;vertical-align:-2px;animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:0}}
/* deploy */
.deploy{display:grid;grid-template-columns:340px 1fr;gap:34px;margin-top:44px;align-items:stretch}
.dsteps{display:grid;gap:12px;align-content:start}
.ds{all:unset;cursor:pointer;display:grid;grid-template-columns:42px 1fr;gap:14px;padding:16px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);position:relative;overflow:hidden}
.ds b{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.3);font-weight:600}
.ds strong{display:block;font-size:1rem;color:#fff}.ds span{font-size:.84rem;color:#a1a1aa}
.ds.on{background:#fff;border-color:#fff}.ds.on strong{color:#0a0a0b}.ds.on span{color:#55555d}.ds.on b{background:#0a0a0b;color:#fff;border-color:#0a0a0b}
.ds.done b{background:#fff;color:#0a0a0b}
.ds i{position:absolute;left:0;bottom:0;height:3px;width:0;background:#0a0a0b}.ds.on i{animation:prog 4.5s linear forwards}@keyframes prog{to{width:100%}}
.ds:focus-visible{outline:2px solid #fff}
.stage{min-height:360px;position:relative}
.scene{display:none;animation:fade .5s;height:100%}.scene.on{display:block}
.win .body{padding:22px}
.ln{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:#fff;font-size:.9rem}
.file{display:inline-flex;gap:10px;align-items:center;padding:12px 16px;border:1px dashed #0a0a0b;border-radius:12px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.84rem;background:#fafafb}
.drop{animation:drop 1.6s ease-in-out infinite}@keyframes drop{0%{transform:translateY(-14px);opacity:.3}60%,100%{transform:none;opacity:1}}
.bar{height:8px;border-radius:5px;background:#e4e4e8;overflow:hidden;margin:12px 0}.bar i{display:block;height:100%;width:0;background:#0a0a0b;animation:fill 3.4s ease-out forwards}@keyframes fill{to{width:100%}}
.avs{display:flex;margin:10px 0}.avs span{width:34px;height:34px;border-radius:50%;background:linear-gradient(180deg,#e9e9ee,#b9b9c0);border:2px solid #fff;margin-left:-8px;display:grid;place-items:center;font-size:.7rem;font-weight:600;animation:pop .5s both}.avs span:first-child{margin-left:0}@keyframes pop{from{transform:scale(0)}}
.ok{display:inline-flex;gap:8px;align-items:center;padding:6px 12px;border-radius:999px;background:#0a0a0b;color:#fff;font-size:.8rem}
/* security */
.sec2{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:44px}
.panel{padding:26px}.panel h3{font-size:1.1rem;margin-bottom:6px}.panel p{margin:0 0 14px;color:var(--mut);font-size:.92rem}
.tenants{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tn{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff;text-align:center;font-size:.8rem;position:relative;transition:.3s}
.tn svg{width:28px;height:28px;stroke:#0a0a0b;fill:none;stroke-width:1.6;display:block;margin:0 auto 6px}
.tn.hot{background:#0a0a0b;color:#fff;transform:translateY(-4px)}.tn.hot svg{stroke:#fff}
.vault{margin-top:14px;padding:12px;border-radius:12px;background:#0a0a0b;color:#fff;font-size:.82rem;text-align:center}
.matrix{width:100%;border-collapse:collapse;font-size:.86rem}.matrix th,.matrix td{padding:9px 8px;text-align:center;border-bottom:1px solid var(--line)}.matrix th:first-child,.matrix td:first-child{text-align:left}
.matrix th{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}.matrix .y{color:#0a0a0b;font-weight:700}.matrix .n{color:#b5b5bd}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.badges span{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:.78rem}
/* split */
.split2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
.ticks{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:12px}.ticks li{padding-left:28px;position:relative;color:var(--mut);font-size:.96rem}.ticks li:before{content:"";position:absolute;left:0;top:7px;width:14px;height:8px;border-left:2px solid #0a0a0b;border-bottom:2px solid #0a0a0b;transform:rotate(-45deg)}.ticks b{color:var(--ink)}
/* pricing */
.price{display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center;padding:40px;margin-top:44px;max-width:900px}
.amt{display:block;font-size:4rem;font-weight:600;letter-spacing:-.04em;line-height:1}.per,.from{display:block;color:var(--mut);font-size:.9rem}
.price ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;color:var(--mut)}
.faq{max-width:860px}
details{border-bottom:1px solid var(--line);padding:18px 0}summary{cursor:pointer;font-weight:600;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between}summary::-webkit-details-marker{display:none}summary:after{content:"+";font-size:1.4rem;line-height:1}details[open] summary:after{content:"\2013"}details p{color:var(--mut);margin:10px 0 0}
/* final + modex */
.final{background:linear-gradient(180deg,#0b0b0d,#1b1b1f);color:#fff;text-align:center;padding:130px 6vw 90px;overflow:hidden}
.final:before{content:"";position:absolute;left:50%;top:-40%;width:900px;height:900px;margin-left:-450px;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 62%)}
.final h2{position:relative}.final p{color:#b5b5bd;position:relative}.final .cta{justify-content:center;position:relative;margin-top:30px}
.modex{background:#000;color:#fff;text-align:center;padding:90px 6vw 70px;border-top:1px solid rgba(255,255,255,.12)}
.modex p{margin:0;color:#a1a1aa;letter-spacing:.2em;text-transform:uppercase;font-size:.78rem}
.modex .mx{display:block;margin:26px auto;width:min(560px,80%);opacity:.95}
.modex .tag{font-size:1.05rem;color:#d4d4d8;letter-spacing:0;text-transform:none;max-width:36em;margin:0 auto 22px}
.modex a.v{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:26px 6vw;background:#000;color:#8b8b94;font-size:.82rem;border-top:1px solid rgba(255,255,255,.1)}
.foot a{color:#c4c4cc}
.no-webgl .hero{background:radial-gradient(circle at 80% 30%,#d9d9de,transparent 50%)}
@media(max-width:960px){.nav nav{display:none}.steps,.grid3,.split2,.sec2,.live,.deploy{grid-template-columns:1fr}.admin{grid-template-columns:1fr}.side{flex-direction:row;flex-wrap:wrap}.side .org{display:none}.strip{grid-template-columns:1fr 1fr}.price{grid-template-columns:1fr;gap:20px;padding:26px}.obody{grid-template-columns:1fr}.paneo{border-left:0;border-top:1px solid var(--line)}.heroin:before{inset:-30px}.hero{align-items:flex-start;padding-top:130px}.sec,.wide{padding:80px 5vw}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
.dark .win p,.dark .win .msg{color:var(--ink)}
html,body{overflow-x:clip}
.btn{white-space:nowrap}
@media(max-width:600px){.navcta .link{display:none}.nav .logo img{height:24px}.hero .cta .btn{width:100%;justify-content:center}.deploy .stage{min-height:0}.live,.admin{margin-top:30px}.in-f{min-width:0}}

/* scroll story: three clicks */
.s3{position:relative;height:440vh;background:#fff}
.s3-stick{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:clip}
.s3-in{width:100%;max-width:1240px;margin:0 auto;padding:0 6vw;display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center}
.s3-copy h2{margin-bottom:26px}
.s3-cap{list-style:none;margin:0;padding:0;display:grid;min-height:170px}
.s3-cap li{grid-area:1/1;opacity:0;transform:translateY(16px);transition:opacity .45s,transform .45s;pointer-events:none}
.s3-cap li.on{opacity:1;transform:none}
.s3-n{font-size:.8rem;letter-spacing:.2em;color:var(--mut);font-weight:600}
.s3-cap h3{font-size:1.7rem;margin:6px 0 8px}
.s3-cap p{margin:0;color:var(--mut);font-size:1.05rem;max-width:26em}.s3-cap b{color:var(--ink)}
.s3-rail{position:relative;display:flex;justify-content:space-between;width:min(320px,100%);margin-top:26px;height:4px;background:#e4e4e8;border-radius:4px}
.s3-rail i{position:absolute;top:-4px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #c9c9cf}
.s3-rail i:nth-child(1){left:0}.s3-rail i:nth-child(2){left:calc(50% - 6px)}.s3-rail i:nth-child(3){right:0}
.s3-rail b{position:absolute;left:0;top:0;height:100%;width:0;background:#0a0a0b;border-radius:4px}
.s3-stage{perspective:1400px;perspective-origin:30% 40%;display:flex;justify-content:center}
.s3-o3d{position:relative;width:min(660px,100%);transform-style:preserve-3d;will-change:transform}
.s3-win{border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 50px 90px -30px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.06);min-height:400px}
.s3-rib{display:flex;align-items:center;gap:10px;padding:9px 14px;background:#f7f7f9;border-bottom:1px solid var(--line);font-size:.82rem}
.s3-sp{flex:1}
.s3-send{padding:6px 16px;border-radius:8px;background:#0a0a0b;color:#fff;font-weight:600;transition:box-shadow .4s,transform .4s}
.s3-send.go{box-shadow:0 0 0 4px rgba(10,10,11,.15),0 10px 24px rgba(0,0,0,.3);transform:scale(1.06)}
.s3-rb{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:8px;border:1px solid var(--line);background:#fff;font-weight:600;transition:background .2s,color .2s,transform .2s}
.s3-rb img{width:18px;height:18px;border-radius:5px}
.s3-rb.press{background:#0a0a0b;color:#fff;transform:scale(.95)}
.s3-msg{min-height:210px;font-size:.92rem}
.s3-pane{position:absolute;top:84px;right:-18px;width:44%;bottom:18px;background:#f3f3f6;border:1px solid var(--line);border-radius:14px;padding:14px;font-size:.84rem;box-shadow:0 30px 60px -18px rgba(0,0,0,.4);transform:translateZ(60px) translateX(110%);opacity:0;will-change:transform,opacity}
.s3-pane .plist li.hot{border-color:#0a0a0b;box-shadow:0 0 0 2px rgba(0,0,0,.12)}
.s3-pane button.press{transform:scale(.9);background:#3a3a40}
.s3-cur{position:absolute;left:0;top:0;width:22px;height:22px;z-index:3;transform:translateZ(110px);pointer-events:none;will-change:left,top;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l16 9-7 2-3 7z' fill='%230a0a0b' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");filter:drop-shadow(0 6px 6px rgba(0,0,0,.35))}
.s3-done{position:absolute;left:50%;bottom:-18px;transform:translate(-50%,10px) translateZ(80px);padding:9px 18px;border-radius:999px;background:#0a0a0b;color:#fff;font-size:.86rem;font-weight:600;opacity:0;transition:opacity .4s,transform .4s;white-space:nowrap}
.s3-done.on{opacity:1;transform:translate(-50%,0) translateZ(80px)}
@media(max-width:960px){.s3{height:400vh}.s3-in{grid-template-columns:1fr;gap:18px;padding-top:76px;align-content:start}.s3-stick{align-items:flex-start}.s3-copy h2{font-size:1.9rem;margin-bottom:12px}.s3-cap{min-height:120px}.s3-cap h3{font-size:1.3rem}.s3-rail{margin-top:14px}.s3-win{min-height:330px}.s3-msg{min-height:150px;font-size:.84rem}.s3-pane{width:52%;top:76px}}
@media(prefers-reduced-motion:reduce){.s3{height:auto;padding:90px 6vw}.s3-stick{position:static;height:auto}.s3-cap{min-height:0;gap:18px}.s3-cap li{opacity:1;transform:none;grid-area:auto}.s3-pane{opacity:1;transform:none;position:relative;top:0;right:0;width:100%;margin-top:14px}.s3-cur,.s3-rail{display:none}}

/* multi-page */
.nav nav a.on{color:#000;font-weight:600}
.menu{display:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;padding:0;align-items:center;justify-content:center}
.menu i,.menu i:before,.menu i:after{display:block;width:18px;height:2px;background:#0a0a0b;border-radius:2px;position:relative;content:""}
.menu i:before{position:absolute;top:-6px}.menu i:after{position:absolute;top:6px}
.sub-page>section:first-child{padding-top:150px}
.sub-page>section.dark:first-child,.sub-page>section.pearl:first-child{padding-top:150px}
.tease{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.tease a.card{display:block;text-decoration:none;color:inherit;padding:28px}
.tease a.card h3{margin:10px 0 8px}.tease a.card p{margin:0 0 16px;color:var(--mut)}
.tease .go{font-weight:600;font-size:.92rem;display:inline-flex;gap:6px;align-items:center}
.tease a.card:hover .go{gap:10px}
.nextpage{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:26px;border-top:1px solid var(--line)}
.dark .nextpage{border-color:rgba(255,255,255,.18)}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
@media(max-width:960px){.menu{display:inline-flex}.nav{flex-wrap:wrap;border-radius:26px}.nav nav{display:none;order:5;width:100%;flex-direction:column;gap:2px;padding:8px 0 4px}.nav.open nav{display:flex}.nav nav a{padding:12px 6px;font-size:1rem;border-top:1px solid var(--line)}.tease{grid-template-columns:1fr}.navcta{margin-left:auto}.sub-page>section:first-child{padding-top:130px}}

/* pricing page: restrained deep-teal accent */
.acc{--acc:#0f6b66;--acc2:#e3f1ef}
.acc .kicker{color:var(--acc)}
.acc .grad{background-image:linear-gradient(100deg,#0a0a0b 10%,#0f6b66 60%,#0a0a0b 95%)}
.pcard{display:grid;grid-template-columns:1.25fr 1fr;margin-top:46px;max-width:1040px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.25);overflow:hidden;position:relative}
.pcard:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--acc)}
.pcol{padding:38px 40px;display:flex;flex-direction:column;gap:6px}
.pcol.pside{background:linear-gradient(180deg,#fafafb,#f1f1f4);border-left:1px solid var(--line)}
.plabel{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--acc)}
.pline{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:6px}
.pcard .amt{display:inline-block;font-size:4.2rem}.pcard .amt.sm{font-size:3rem}
.unit{font-size:1rem;color:#3b3b42;font-weight:500}
.pnote{margin:6px 0 4px;color:var(--mut);font-size:.94rem;max-width:34em}
.pcard .ticks{margin:12px 0 18px}
.acc .ticks li:before{border-color:var(--acc)}
.pcol.pmain .btn{align-self:flex-start;margin-top:auto}
.pshow{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:64px;max-width:1040px}
.pshow .kicker{margin-bottom:12px}
.pshow .win{box-shadow:0 30px 60px -28px rgba(0,0,0,.3)}
.pshow .obody{grid-template-columns:1fr 170px}.pshow .msg{min-height:130px;font-size:.84rem}
.adm{padding:18px}.pm-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.pm-btn{padding:6px 12px;border-radius:8px;background:#0a0a0b;color:#fff;font-size:.78rem;font-weight:600}
.pm-foot{display:flex;justify-content:space-between;font-size:.78rem;color:var(--mut);padding-top:10px;border-top:1px solid var(--line);margin-top:4px}
.acc .faq summary:hover{color:var(--acc)}
.final.tight{padding:84px 6vw 64px}.final.tight .cta{margin-top:22px}
.final.tight+.modex{padding-top:64px}
@media(max-width:960px){.pcard{grid-template-columns:1fr}.pcol{padding:28px 24px}.pcol.pside{border-left:0;border-top:1px solid var(--line)}.pshow{grid-template-columns:1fr}.pcard .amt{font-size:3.4rem}.pshow .obody{grid-template-columns:1fr}}

/* accents: black and white plus four colours */
:root{--blue:#2f6bff;--amber:#ffb020;--mint:#14c38e;--coral:#ff5a3c}
.dot{background:var(--blue);box-shadow:0 0 0 4px rgba(47,107,255,.2)}
.kicker,.num,.s3-n{color:var(--blue)}
.dark .kicker{color:#8fb0ff}
.grad{background-image:linear-gradient(100deg,#0a0a0b 8%,var(--blue) 55%,#0a0a0b 95%)}
.dark .grad,.final .grad{background-image:linear-gradient(100deg,#fff 8%,#8fb0ff 55%,#fff 95%)}
.strip .stat:nth-child(1) b{color:#8fb0ff}.strip .stat:nth-child(2) b{color:var(--amber)}.strip .stat:nth-child(3) b{color:var(--mint)}.strip .stat:nth-child(4) b{color:#ff8a70}
.s3-rail b{background:var(--blue)}.s3-rail i{border-color:var(--blue)}
.s3-send.go{background:var(--blue);box-shadow:0 0 0 4px rgba(47,107,255,.22),0 10px 24px rgba(47,107,255,.4)}
.s3-rb.press{background:var(--blue)}
.s3-pane .plist li.hot{border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,107,255,.18)}
.s3-pane button.press{background:var(--blue)}
.s3-pane .ptabs .on{background:var(--blue);color:#fff}
.s3-done{background:var(--mint);color:#04261b}
.s3-cur{filter:drop-shadow(0 6px 6px rgba(47,107,255,.5))}
.tease .card:nth-child(1) .num,.steps .step:nth-child(1) .num{color:var(--blue)}
.tease .card:nth-child(2) .num,.steps .step:nth-child(2) .num{color:#d98a00}
.tease .card:nth-child(3) .num,.steps .step:nth-child(3) .num{color:#0c9a70}
.tease .card:nth-child(4) .num{color:#e5421f}.tease .card:nth-child(5) .num{color:var(--blue)}
.grid3 .card:nth-child(4n+1) .ico{background:linear-gradient(180deg,#5b8cff,var(--blue))}
.grid3 .card:nth-child(4n+2) .ico{background:linear-gradient(180deg,#ffc95a,#e89a00)}
.grid3 .card:nth-child(4n+3) .ico{background:linear-gradient(180deg,#3fdcae,#0c9a70)}
.grid3 .card:nth-child(4n+4) .ico{background:linear-gradient(180deg,#ff8a70,#e5421f)}
.btn.glow:hover{box-shadow:0 16px 32px rgba(47,107,255,.35),inset 0 1px 0 rgba(255,255,255,.4)}

.ecard{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:22px;max-width:1040px;padding:36px 40px;border-radius:22px;background:#0a0a0b;color:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.45);border-top:3px solid var(--blue)}
.ecard h3{font-size:1.7rem;margin:10px 0 12px}.ecard .plabel{color:#8fb0ff}.ecard .pnote{color:#b5b5bd}.ecard .pnote b{color:#fff}
.ecard .btn.glow{background:linear-gradient(180deg,#fff,#d9d9de);color:#0a0a0b;margin-top:14px}
.eopts{display:grid;gap:14px;align-content:start}.eopt{padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.eopt b{color:var(--amber)}.eopt:nth-child(2) b{color:var(--mint)}.eopt p{margin:6px 0 0;color:#c4c4cc;font-size:.95rem}
@media(max-width:960px){.ecard{grid-template-columns:1fr;padding:28px 24px}}


/* ===== Design v2: one typeface, one accent, flat surfaces ===== */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/inter-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/inter-var-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--ink:#0f1218;--ink2:#1a1f29;--mut:#5b6270;--line:#e4e7ec;--soft:#f6f7f9;--blue:#2457f5;--blue-d:#1b44c4;--tint:#eef2ff;--blue-l:#9db6ff;--foot:#0a0d12;--hf:var(--f);--r:14px;--f:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif}
body{font-family:var(--f);font-feature-settings:"cv11","ss03";background:#fff;color:var(--ink);line-height:1.6}
h1,h2,h3{font-family:var(--hf);font-weight:650;letter-spacing:-.032em}
h1{line-height:1.05}h2{line-height:1.12}
.kicker,.num,.s3-n,.plabel{color:var(--blue)!important;font-weight:600;letter-spacing:.14em}
.dark .kicker,.ecard .plabel{color:var(--blue-l)!important}
/* no 3D scene, no shimmer, no tilt */
#scene{display:none}
.tilt{transform:none!important}
.grad,.dark .grad,.final .grad,.acc .grad{background:none!important;-webkit-background-clip:initial;background-clip:initial;animation:none;color:var(--blue)}
.dark .grad,.final .grad,.ecard .grad{color:var(--blue-l)}
/* nav */
.nav{background:rgba(255,255,255,.92);box-shadow:0 1px 0 var(--line);border:1px solid var(--line)}
.nav.scrolled{box-shadow:0 6px 24px rgba(15,18,24,.08)}
.nav nav a,.navcta .link{color:var(--ink2);font-weight:500}.nav nav a:hover{color:var(--blue)}
/* buttons */
.btn{font-weight:600;border-radius:10px;padding:13px 24px}
.btn.sm{padding:9px 16px;border-radius:9px}.btn.big{padding:16px 30px}
.btn.glow{background:var(--blue);color:#fff;box-shadow:none;border-color:var(--blue)}
.btn.glow:hover{background:var(--blue-d);transform:none;box-shadow:0 6px 18px rgba(36,87,245,.28)}
.btn.ghost{background:#fff;color:var(--ink);border-color:#cfd4dc;box-shadow:none}
.btn.ghost:hover{transform:none;border-color:var(--ink)}
.dark .btn.glow,.final .btn.glow,.ecard .btn.glow{background:#fff;color:var(--ink);border-color:#fff;box-shadow:none}
.dark .btn.glow:hover,.final .btn.glow:hover,.ecard .btn.glow:hover{background:var(--tint);box-shadow:none}
.dark .btn.ghost,.final .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
/* hero: centred, flat, calm */
.hero{background:var(--soft);justify-content:center;text-align:center;border-bottom:1px solid var(--line)}
.heroin{max-width:860px}.heroin:before{display:none}
.hero .lead{margin:24px auto 32px;max-width:36em}
.hero .cta,.chips{justify-content:center}
.eyebrow{background:#fff;border:1px solid var(--line);box-shadow:none;color:var(--ink2);font-weight:500}
.dot{background:var(--blue);box-shadow:0 0 0 4px rgba(36,87,245,.15)}
.chips li{background:#fff;border-color:var(--line);color:var(--ink2)}
.scrollcue{border-color:var(--ink);opacity:.35}
/* sections */
.pearl{background:var(--soft)}
.dark,.final{background:var(--ink)}.dark:before,.final:before{display:none}
.strip{background:var(--ink)}
.strip .stat b,.strip .stat:nth-child(n) b{color:#fff}
.stat span{color:#9aa3b2}
.modex,.foot{background:var(--foot)}
/* cards: flat white, hairline border */
.card,.step,.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:none}
.card:hover,.step:hover{border-color:#c5ccd8;box-shadow:0 8px 24px rgba(15,18,24,.06)}
.tease .card:nth-child(n) .num,.steps .step:nth-child(n) .num{color:var(--blue)}
.ico,.grid3 .card:nth-child(n) .ico{background:var(--tint);box-shadow:none;border-radius:12px}
.ico svg{stroke:var(--blue)}
.tease .go{color:var(--blue)}
/* windows and mock UI */
.win,.s3-win{border-radius:14px;border:1px solid var(--line);box-shadow:0 24px 60px -24px rgba(15,18,24,.28)}
.sec .win{box-shadow:0 24px 60px -24px rgba(15,18,24,.25)}
.wbar{background:var(--soft)}
.side{background:var(--ink)}
.pcard,.ecard{border-radius:16px;box-shadow:none}
.pcard{border:1px solid var(--line)}
.pcard:before{background:var(--blue)}
.pcol.pside{background:var(--soft)}
.acc{--acc:var(--blue);--acc2:var(--tint)}
.ecard{background:var(--ink);border-top:0}
.ecard .pnote b{color:#fff}
.eopt{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.eopt b,.eopt:nth-child(2) b{color:#fff}
.pm-btn,.msg .tok{background:var(--ink)}
/* scroll story */
.s3{background:var(--soft)}
.s3-done{background:var(--blue);color:#fff}
.s3-pane{background:#fff}
.s3-cur{filter:drop-shadow(0 4px 4px rgba(15,18,24,.3))}
/* deployment steps on a light page */
.ds{border:1px solid var(--line);background:#fff}
.ds b{border-color:#cfd4dc;color:var(--ink)}
.ds strong{color:var(--ink)}.ds span{color:var(--mut)}
.ds.on{background:var(--ink);border-color:var(--ink)}.ds.on strong{color:#fff}.ds.on span{color:#c4cad6}
.ds.on b{background:var(--blue);border-color:var(--blue);color:#fff}
.ds.done b{background:var(--tint);color:var(--blue);border-color:var(--tint)}
.ds i{background:var(--blue)}.ds:focus-visible{outline:2px solid var(--blue)}
.nextpage{border-color:var(--line)}
/* before/after scroll story */
.s3-stat{position:absolute;left:-40px;top:-78px;min-width:190px;padding:14px 18px;border-radius:12px;background:#0a0a0b;color:#fff;display:grid;gap:2px;transform:translateZ(90px);box-shadow:0 24px 50px -18px rgba(0,0,0,.55)}
.s3-stat span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#f0a090;font-weight:600}
.s3-stat b{font-size:2.2rem;line-height:1.05;font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.02em;color:#fff}
.s3-stat i{font-style:normal;font-size:.8rem;color:#b5b5bd}
.s3-stat.after span{color:#86e0b4}
.s3-sentlist{position:absolute;right:-8px;bottom:-26px;display:grid;gap:8px;transform:translateZ(60px);justify-items:end}
.s3-sentlist span{padding:7px 14px;border-radius:999px;background:#fff;color:#0a0a0b;border:1px solid var(--line);font-size:.8rem;font-weight:600;box-shadow:0 10px 24px -10px rgba(0,0,0,.35);opacity:0;transform:translateY(16px) translateZ(0);transition:opacity .35s,transform .35s}
.s3-sentlist span.on{opacity:1;transform:none}
.s3-cap .s3-n{letter-spacing:.14em;font-size:.72rem}
.s3-done{white-space:nowrap}
@media(max-width:960px){.s3-stat{left:0;top:-44px;min-width:0;padding:10px 14px}.s3-stat b{font-size:1.5rem}.s3-sentlist{display:none}}