:root{
  --void:#05070f; --ink:#0a0f1f; --line:rgba(148,163,184,.13); --line2:rgba(148,163,184,.24);
  --text:#f4f6fd; --text2:#cdd4e4; --muted:#97a3bc; --faint:#6b778f;
  --cyan:#22d3ee; --indigo:#6366f1; --violet:#a855f7; --amber:#f59e0b; --green:#4ade80; --rose:#fb7185;
  --grad:linear-gradient(120deg,#22d3ee 0%,#6366f1 52%,#a855f7 100%);
  --maxw:1220px; --r:22px; --ease:cubic-bezier(.2,.8,.2,1);
  --display:"Space Grotesk","Inter",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html{background:var(--void); scroll-behavior:smooth; scroll-padding-top:86px}
body{margin:0; color:var(--text); font:16px/1.6 "Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-family:var(--display); letter-spacing:-.025em; line-height:1.12}
p{margin:0} ul{margin:0; padding:0; list-style:none}
svg{display:block}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:8px}
.skip{position:absolute; left:-9999px; top:8px; z-index:3000; padding:10px 16px; background:var(--indigo); color:#fff; border-radius:10px}
.skip:focus{left:12px}
.gt{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.mono{font-family:var(--mono)}

/* ---------- background VFX ---------- */
#bg{position:fixed; inset:0; width:100%; height:100%; z-index:-2; pointer-events:none}
.aurora{position:fixed; inset:0; z-index:-3; pointer-events:none; overflow:hidden; background:radial-gradient(120% 80% at 50% -10%,#0e1438 0%,var(--void) 62%)}
.aurora i{position:absolute; border-radius:50%; filter:blur(110px); opacity:.5; animation:drift 34s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:52vw; height:52vw; left:-16vw; top:-18vw; background:radial-gradient(circle,rgba(99,102,241,.6),transparent 65%)}
.aurora i:nth-child(2){width:44vw; height:44vw; right:-14vw; top:30vh; background:radial-gradient(circle,rgba(34,211,238,.32),transparent 65%); animation-duration:40s}
.aurora i:nth-child(3){width:50vw; height:50vw; left:28vw; bottom:-34vw; background:radial-gradient(circle,rgba(168,85,247,.38),transparent 65%); animation-duration:46s}
@keyframes drift{to{transform:translate3d(6vw,5vh,0) scale(1.15)}}
.noise{position:fixed; inset:0; z-index:1500; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.spot{position:fixed; width:600px; height:600px; left:0; top:0; margin:-300px 0 0 -300px; border-radius:50%; pointer-events:none; z-index:-1; background:radial-gradient(circle,rgba(99,102,241,.13),transparent 60%); transform:translate3d(-999px,-999px,0)}
.progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:1001; background:var(--grad); transform-origin:left; transform:scaleX(0); box-shadow:0 0 12px rgba(34,211,238,.8)}

/* ---------- buttons ---------- */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 24px; border-radius:12px; border:1px solid transparent; overflow:hidden; font:600 15px/1 "Inter",sans-serif; cursor:pointer; white-space:nowrap; transition:transform .2s var(--ease), box-shadow .2s, background .2s, border-color .2s, color .2s}
.btn svg{width:16px; height:16px}
.btn--p{background:linear-gradient(135deg,#6366f1,#4f46e5 50%,#7c3aed); color:#fff; box-shadow:0 12px 32px rgba(79,70,229,.45), inset 0 1px 0 rgba(255,255,255,.22)}
.btn--p::after{content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent); transform:skewX(-20deg); animation:sheen 4.5s 1.5s var(--ease) infinite}
@keyframes sheen{0%{left:-60%}30%,100%{left:140%}}
.btn--p:hover{transform:translateY(-2px); box-shadow:0 18px 44px rgba(79,70,229,.6)}
.btn--g{background:rgba(148,163,184,.07); border-color:var(--line2); color:var(--text2)}
.btn--g:hover{background:rgba(148,163,184,.14); color:#fff; border-color:rgba(34,211,238,.5)}
.btn--sm{padding:10px 16px; font-size:14px; border-radius:10px}

/* ---------- header ---------- */
.head{position:fixed; top:0; left:0; right:0; z-index:1000; border-bottom:1px solid transparent; transition:background .3s, border-color .3s}
.head.solid{background:rgba(5,7,15,.78); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom-color:var(--line)}
.nav{display:flex; align-items:center; gap:26px; height:72px}
.brand{display:flex; align-items:center; gap:10px; font:700 18px var(--display); letter-spacing:-.02em}
.brand svg{width:30px; height:30px}
.links{display:flex; gap:4px; margin-left:10px}
.links a{font-size:14.5px; color:var(--muted); padding:8px 13px; border-radius:9px; transition:color .2s, background .2s}
.links a:hover{color:#fff; background:rgba(148,163,184,.08)}
.acts{display:flex; align-items:center; gap:12px; margin-left:14px}
.acts .login{font-size:14.5px; color:var(--muted)} .acts .login:hover{color:#fff}
.burger{display:none; margin-left:auto; width:44px; height:44px; border-radius:10px; border:1px solid var(--line2); background:rgba(148,163,184,.08); color:#fff; cursor:pointer; place-items:center}
.burger svg{width:20px; height:20px} .burger .x{display:none}
.burger[aria-expanded="true"] .m{display:none} .burger[aria-expanded="true"] .x{display:block}
.mcta{display:none}

/* ---------- shared ---------- */
.sec{position:relative; padding:120px 0}
.eyebrow{display:inline-flex; align-items:center; gap:10px; margin-bottom:18px; font:600 12.5px/1 "Inter",sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#a5b4fc}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--grad); box-shadow:0 0 8px rgba(34,211,238,.8)}
.h2{font-size:clamp(30px,4.3vw,52px)}
.lede{margin-top:18px; color:var(--muted); font-size:18px; max-width:62ch}
.shead{margin-bottom:58px; max-width:820px}
.shead.c{text-align:center; margin-left:auto; margin-right:auto} .shead.c .lede{margin-left:auto; margin-right:auto}
.glass{position:relative; background:linear-gradient(160deg,rgba(24,33,64,.8),rgba(7,10,24,.9)); border:1px solid var(--line); border-radius:var(--r); box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 30px 60px -30px rgba(0,0,0,.7)}
.edge::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; background:conic-gradient(from var(--ang,0deg),transparent 0 70%,rgba(34,211,238,.9) 80%,rgba(168,85,247,.9) 88%,transparent 95%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:edge 6s linear infinite; opacity:.75}
@property --ang{syntax:"<angle>"; initial-value:0deg; inherits:false}
@keyframes edge{to{--ang:360deg}}
.tilt{transition:transform .35s var(--ease), border-color .3s, box-shadow .3s; transform-style:preserve-3d}
.tilt::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s; background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(99,102,241,.2),transparent 45%)}
.tilt:hover{border-color:rgba(99,102,241,.45); box-shadow:0 40px 80px -30px rgba(79,70,229,.5)} .tilt:hover::after{opacity:1}
.js [data-rv]{opacity:0; translate:0 60px; rotate:x 18deg; scale:.97; transform-origin:50% 0; transition:opacity .9s var(--ease), translate 1.1s var(--ease), rotate 1.1s var(--ease), scale 1.1s var(--ease); transition-delay:var(--d,0s)}
.js [data-rv].in{opacity:1; translate:0 0; rotate:x 0deg; scale:1}
.persp{perspective:1400px}
.live{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); animation:pulse 2s infinite; flex:none}
@keyframes pulse{50%{opacity:.35}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ripple{from{transform:scale(.6); opacity:1}to{transform:scale(1.4); opacity:0}}
.note{font-size:11.5px; color:var(--faint)}
.chk li{position:relative; padding:5px 0 5px 26px; font-size:14.5px; color:var(--text2)}
.chk li::before{content:""; position:absolute; left:0; top:9px; width:16px; height:16px; border-radius:5px; border:1px solid rgba(34,211,238,.35);
  background:rgba(34,211,238,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2322d3ee' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center/11px no-repeat}

/* ---------- hero ---------- */
.hero{position:relative; min-height:100vh; display:flex; align-items:center; padding:130px 0 80px; overflow:hidden}
.floor{position:absolute; left:-50%; right:-50%; bottom:-10%; height:60%; z-index:-1; pointer-events:none; transform:perspective(700px) rotateX(68deg); transform-origin:50% 100%;
  background-image:linear-gradient(rgba(99,102,241,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.22) 1px,transparent 1px); background-size:64px 64px; animation:floor 3s linear infinite;
  -webkit-mask:linear-gradient(to top,#000 10%,transparent 85%); mask:linear-gradient(to top,#000 10%,transparent 85%)}
@keyframes floor{to{background-position:0 64px}}
.hgrid{display:grid; grid-template-columns:1fr 1.05fr; gap:40px; align-items:center; width:100%}
.pill{display:inline-flex; align-items:center; gap:10px; padding:7px 16px 7px 8px; border-radius:999px; font-size:13px; font-weight:600; color:#c7d2fe; background:rgba(99,102,241,.1); border:1px solid rgba(99,102,241,.35)}
.pill b{font-size:11px; padding:4px 9px; border-radius:999px; background:var(--grad); color:#fff; letter-spacing:.04em}
.hero h1{margin-top:24px; font-size:clamp(40px,5.4vw,74px); line-height:1.02; letter-spacing:-.045em}
.hero h1 .ln{display:block; overflow:hidden; padding-bottom:.08em}
.hero h1 .ln>span{display:inline-block; animation:rise 1.1s var(--ease) both}
.hero h1 .ln:nth-child(2)>span{animation-delay:.12s} .hero h1 .ln:nth-child(3)>span{animation-delay:.24s}
@keyframes rise{from{transform:translateY(105%) rotateX(-40deg); opacity:0}to{transform:none; opacity:1}}
.hsub{margin-top:24px; color:var(--muted); font-size:18.5px; max-width:54ch; animation:fadeUp 1s .45s var(--ease) both}
.hcta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; animation:fadeUp 1s .6s var(--ease) both}
.hproof{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:30px; animation:fadeUp 1s .75s var(--ease) both}
.hproof li{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text2)}
.hproof svg{width:16px; height:16px; color:var(--cyan)}
@keyframes fadeUp{from{opacity:0; transform:translateY(24px)}to{opacity:1; transform:none}}

.stage{position:relative; height:600px; perspective:1600px; animation:fadeIn 1.4s .2s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.rig{position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(var(--rx,10deg)) rotateY(var(--ry,-16deg)); transition:transform .1s linear}
.app{position:absolute; left:4%; top:10%; width:92%; height:76%; transform:translateZ(0); border-radius:18px; overflow:hidden; display:grid; grid-template-columns:54px 1fr;
  background:linear-gradient(160deg,rgba(18,26,56,.95),rgba(6,9,22,.97)); border:1px solid rgba(99,102,241,.45); box-shadow:0 50px 100px -20px rgba(0,0,0,.8), 0 0 70px -10px rgba(99,102,241,.45)}
.app::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(100deg,transparent 40%,rgba(34,211,238,.18) 49%,rgba(255,255,255,.28) 50%,rgba(168,85,247,.14) 51%,transparent 60%); background-size:280% 100%; animation:scan 6s cubic-bezier(.6,0,.4,1) infinite; mix-blend-mode:screen}
@keyframes scan{0%{background-position:130% 0}50%,100%{background-position:-60% 0}}
.side{border-right:1px solid var(--line); background:rgba(4,6,14,.6); display:flex; flex-direction:column; align-items:center; gap:12px; padding:14px 0}
.side i{width:26px; height:26px; border-radius:8px; background:rgba(148,163,184,.08); border:1px solid var(--line)}
.side i.on{background:var(--grad); border-color:transparent; box-shadow:0 0 14px rgba(99,102,241,.7)}
.main{padding:16px 18px; display:grid; grid-template-rows:auto auto 1fr; gap:12px; min-width:0}
.mtop{display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--muted)}
.mtop b{font:600 14px var(--display); color:#fff}
.mtop .rng{display:flex; gap:4px} .mtop .rng span{padding:4px 8px; border-radius:7px; font-size:10.5px; border:1px solid var(--line)} .mtop .rng span.on{background:rgba(99,102,241,.2); border-color:rgba(99,102,241,.5); color:#e0e7ff}
.kp4{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.kp4 div{padding:9px 10px; border-radius:10px; background:rgba(148,163,184,.06); border:1px solid var(--line)}
.kp4 small{display:block; font-size:9.5px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kp4 strong{font:700 16px var(--display); font-variant-numeric:tabular-nums}
.kp4 .c1 strong{color:#a5f3fc}
.mbody{display:grid; grid-template-columns:1.4fr 1fr; gap:10px; min-height:0}
.panel{border-radius:12px; background:rgba(148,163,184,.04); border:1px solid var(--line); padding:10px 12px; min-height:0; overflow:hidden}
.panel h5{margin:0 0 8px; font:600 10px "Inter",sans-serif; letter-spacing:.1em; text-transform:uppercase; color:#a5b4fc; display:flex; justify-content:space-between}
.chart{height:110px} .chart path.ln{fill:none; stroke:url(#gH); stroke-width:2.5; stroke-dasharray:900; stroke-dashoffset:900; animation:draw 2.4s .6s var(--ease) forwards; filter:drop-shadow(0 0 5px rgba(34,211,238,.8))}
.chart path.ar{fill:url(#gA); opacity:0; animation:fadeIn 1s 1.6s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.tl{display:grid; gap:6px; margin-top:8px}
.tl div{position:relative; height:9px; border-radius:4px; background:rgba(148,163,184,.07)}
.tl b{position:absolute; top:0; bottom:0; border-radius:4px}
.cp{background:linear-gradient(90deg,#22d3ee,#6366f1)} .cm{background:linear-gradient(90deg,#8b5cf6,#a855f7)} .cn{background:#64748b} .cu{background:#f59e0b} .ci{background:repeating-linear-gradient(45deg,rgba(148,163,184,.3) 0 3px,rgba(148,163,184,.08) 3px 6px)}
.apps{display:grid; gap:7px}
.apps div{display:grid; grid-template-columns:1fr 34px; gap:6px; font-size:10.5px; color:var(--text2); align-items:center}
.apps div i{grid-column:1/-1; height:5px; border-radius:4px; background:rgba(148,163,184,.08); position:relative; overflow:hidden}
.apps div i::before{content:""; position:absolute; inset:0; width:var(--w); background:var(--c,var(--grad)); border-radius:4px; transform-origin:left; animation:grow 1.4s var(--ease) both; animation-delay:var(--dl,.8s)}
@keyframes grow{from{transform:scaleX(0)}}
.apps em{font-style:normal; color:var(--faint); text-align:right; font-family:var(--mono)}
.float{position:absolute; z-index:3; transform-style:preserve-3d}
.fpanel{right:-2%; bottom:6%; transform:translateZ(120px)}
.fbar{display:flex; align-items:center; gap:10px; padding:9px 12px 9px 8px; border-radius:14px; background:rgba(10,14,30,.94); border:1px solid var(--line2); box-shadow:0 30px 60px -15px rgba(0,0,0,.9), 0 0 40px -10px rgba(34,211,238,.5); animation:bob 6s ease-in-out infinite}
.fbar .grip{display:grid; grid-template-columns:repeat(3,3px); gap:2.5px} .fbar .grip i{width:3px; height:3px; border-radius:50%; background:#475569}
.fbar .pp{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#16a34a,#059669); box-shadow:0 0 14px rgba(74,222,128,.5)}
.fbar .pp svg{width:13px; height:13px; color:#fff}
.fbar .tm{font:600 17px var(--mono); letter-spacing:.02em; font-variant-numeric:tabular-nums}
.fbar .sel{font-size:11px; padding:5px 9px; border-radius:8px; border:1px solid var(--line2); color:var(--text2); background:rgba(148,163,184,.06); display:flex; gap:6px; align-items:center; white-space:nowrap}
.fbar .sel svg{width:10px; height:10px}
.fbar .wk{width:120px; overflow:hidden; font-size:10.5px; color:var(--muted); white-space:nowrap; -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.fbar .wk span{display:inline-block; padding-left:100%; animation:mq 9s linear infinite}
@keyframes mq{to{transform:translateX(-100%)}}
.chip{display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:15px; white-space:nowrap; background:linear-gradient(160deg,rgba(28,38,72,.94),rgba(8,12,28,.96)); border:1px solid var(--line2); box-shadow:0 24px 50px -20px rgba(0,0,0,.9), 0 0 30px -8px rgba(99,102,241,.5); animation:bob 6s ease-in-out infinite}
.chip small{display:block; font-size:11px; color:var(--faint); line-height:1.3} .chip strong{display:block; font:700 14px/1.3 var(--display)}
.chip .ic{width:32px; height:32px; border-radius:10px; display:grid; place-items:center; flex:none}
.chip .ic svg{width:17px; height:17px}
.f1{left:-4%; top:2%; transform:translateZ(90px)} .f1 .chip{animation-delay:-2s}
.f2{right:2%; top:-1%; transform:translateZ(150px)} .f2 .chip{animation-delay:-4s}
@keyframes bob{50%{transform:translateY(-12px)}}
.hnote{position:absolute; left:6%; bottom:2%; font-size:11px; color:var(--faint)}

/* ---------- marquee ---------- */
.mq{position:relative; padding:24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(6,9,20,.5); overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mq p{text-align:center; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:14px}
.mqt{display:flex; gap:12px; width:max-content; animation:marq 46s linear infinite}
.mq:hover .mqt{animation-play-state:paused}
.mqt span{display:inline-flex; align-items:center; gap:9px; padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:rgba(148,163,184,.05); color:var(--text2); font-size:14px; font-weight:500; white-space:nowrap}
.mqt span i{width:7px; height:7px; border-radius:50%; background:var(--c,#22d3ee); box-shadow:0 0 8px var(--c,#22d3ee)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- facts ---------- */
.facts{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.fact{padding:22px 18px}
.fact .n{font:700 46px/1 var(--display); letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.fact .n small{font-size:20px}
.fact p{margin-top:10px; font-size:13.5px; color:var(--muted); line-height:1.45}

/* ---------- pipeline ---------- */
.pipe{display:grid; grid-template-columns:250px 1fr 270px; padding:30px; gap:0}
.col{display:flex; flex-direction:column; justify-content:space-around; gap:12px; height:400px}
.node{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; background:rgba(148,163,184,.06); border:1px solid var(--line2)}
.node .ic{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex:none; background:rgba(34,211,238,.1); border:1px solid rgba(34,211,238,.35); color:var(--cyan)}
.node .ic svg{width:18px; height:18px}
.node.o .ic{background:rgba(168,85,247,.12); border-color:rgba(168,85,247,.4); color:#d8b4fe}
.node b{display:block; font-size:14px; line-height:1.25} .node small{font-size:12px; color:var(--faint)}
.flow{position:relative; height:400px}
.flow svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.flow path,.flow use{fill:none; stroke-width:1.5; vector-effect:non-scaling-stroke}
.flow .b{stroke:rgba(148,163,184,.16)} .flow .d{stroke:url(#gH); stroke-dasharray:6 10; animation:dash 1.1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-32}}
.core{position:absolute; left:50%; top:50%; width:160px; height:160px; margin:-80px 0 0 -80px; border-radius:50%; display:grid; place-items:center; text-align:center;
  background:radial-gradient(circle at 35% 30%,#3b3fae,#1b1f5a 45%,#080b22 75%); border:1px solid rgba(99,102,241,.7); box-shadow:0 0 60px rgba(99,102,241,.6), 0 0 120px rgba(34,211,238,.22), inset 0 0 40px rgba(34,211,238,.25)}
.core::before{content:""; position:absolute; inset:-16px; border-radius:50%; border:1.5px dashed rgba(34,211,238,.5); animation:spin 14s linear infinite}
.core::after{content:""; position:absolute; inset:-34px; border-radius:50%; border:1px solid transparent; border-top-color:rgba(168,85,247,.9); animation:spin 3s linear infinite}
.core .pl{position:absolute; inset:0; border-radius:50%; border:1px solid rgba(34,211,238,.7); animation:ripple 2.4s ease-out infinite}
.core b{display:block; font:700 22px/1.1 var(--display)} .core small{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text2)}
.cls{position:absolute; left:50%; bottom:6px; transform:translateX(-50%); display:flex; gap:6px}
.cls span{font-size:11px; padding:4px 9px; border-radius:999px; border:1px solid var(--line2); background:rgba(5,7,15,.8)}

/* ---------- platform explorer ---------- */
.xp{display:grid; grid-template-columns:290px 1fr; padding:0; overflow:hidden}
.tabs{padding:16px; display:grid; gap:6px; align-content:start; border-right:1px solid var(--line); background:rgba(4,6,13,.35)}
.tab{position:relative; display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:center; text-align:left; padding:13px 14px; border-radius:14px; border:1px solid transparent; background:none; color:inherit; font:inherit; cursor:pointer; overflow:hidden; transition:background .3s, border-color .3s}
.tab:hover{background:rgba(148,163,184,.05)}
.tab[aria-selected="true"]{background:linear-gradient(160deg,rgba(30,41,80,.8),rgba(10,15,34,.7)); border-color:rgba(99,102,241,.45)}
.tab .ic{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:rgba(148,163,184,.07); border:1px solid var(--line2); color:var(--muted); transition:all .3s}
.tab .ic svg{width:19px; height:19px}
.tab[aria-selected="true"] .ic{background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 0 20px rgba(99,102,241,.6)}
.tab b{display:block; font-size:15px; font-weight:600; color:var(--text2)} .tab[aria-selected="true"] b{color:#fff}
.tab small{display:block; font-size:12px; color:var(--faint); line-height:1.35}
.tab .bar{position:absolute; left:14px; right:14px; bottom:6px; height:2px; border-radius:2px; background:rgba(148,163,184,.1); overflow:hidden; opacity:0}
.tab[aria-selected="true"] .bar{opacity:1}
.tab .bar i{display:block; height:100%; width:0; background:var(--grad)}
.tab .bar i.run{animation:tbar 8s linear forwards} .xp.paused .tab .bar i.run{animation-play-state:paused}
@keyframes tbar{to{width:100%}}
.panes{position:relative; min-height:520px}
.pane{position:absolute; inset:0; display:grid; grid-template-columns:.85fr 1.15fr; gap:28px; padding:32px; align-items:center; opacity:0; visibility:hidden; transform:translateY(14px); transition:opacity .5s, transform .6s var(--ease), visibility 0s .5s}
.pane.on{opacity:1; visibility:visible; transform:none; transition:opacity .5s, transform .6s var(--ease), visibility 0s}
.pane .k{font:600 12px var(--mono); color:var(--cyan); letter-spacing:.08em; text-transform:uppercase}
.pane h3{font-size:clamp(23px,2.3vw,30px); margin:10px 0 12px}
.pane>div>p{color:var(--muted); font-size:15.5px}
.pane .chk{margin-top:16px}
.pane .chk li{opacity:0; transform:translateX(-10px); transition:opacity .4s, transform .4s var(--ease); transition-delay:calc(.12s + var(--i,0) * .07s)}
.pane.on .chk li{opacity:1; transform:none}
.mock{position:relative; border-radius:18px; padding:18px; background:linear-gradient(165deg,rgba(14,20,44,.96),rgba(6,9,22,.96)); border:1px solid var(--line2); box-shadow:0 30px 60px -20px rgba(0,0,0,.8), 0 0 40px -14px rgba(99,102,241,.5)}
.mock h4{font:600 12px "Inter",sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#a5b4fc; display:flex; justify-content:space-between; align-items:center; margin-bottom:14px}
.mock h4 em{font-style:normal; text-transform:none; letter-spacing:0; color:#86efac; display:flex; gap:6px; align-items:center}
.mock .note{margin-top:12px; text-align:right}
/* mock: dashboard sunburst */
.sun{display:grid; grid-template-columns:170px 1fr; gap:16px; align-items:center}
.sun svg{width:170px; height:170px}
.sun circle{fill:none} .pane .sg{stroke-dasharray:0 999; transition:stroke-dasharray 1.1s var(--ease); transition-delay:var(--dl)}
.pane.on .sg{stroke-dasharray:var(--l) 999}
.leg{display:grid; gap:8px} .leg div{display:grid; grid-template-columns:12px 1fr auto; gap:10px; align-items:center; font-size:13px; color:var(--text2)}
.leg i{width:12px; height:12px; border-radius:4px} .leg b{font:600 12px var(--mono)}
.kp3{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px}
.kp3 div{padding:10px; border-radius:10px; border:1px solid var(--line); background:rgba(148,163,184,.05)}
.kp3 small{display:block; font-size:10.5px; color:var(--faint)} .kp3 strong{font:700 17px var(--display)}
/* mock: meetings */
.mplat{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.mplat span{padding:10px 6px; text-align:center; border-radius:10px; font-size:12px; border:1px solid var(--line); background:rgba(148,163,184,.04); color:var(--muted); transition:all .3s}
.mplat span.hit{color:#fff; border-color:rgba(168,85,247,.6); background:rgba(168,85,247,.16); box-shadow:0 0 18px rgba(168,85,247,.4)}
.mstat{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px}
.mstat div{padding:10px; border-radius:10px; border:1px solid var(--line); background:rgba(148,163,184,.05)} .mstat small{display:block; font-size:10.5px; color:var(--faint)} .mstat strong{font:700 17px var(--display)}
.hrs{display:flex; align-items:flex-end; gap:5px; height:70px; margin-top:14px}
.hrs i{flex:1; border-radius:4px 4px 0 0; background:linear-gradient(180deg,#c084fc,#6366f1); height:0; transition:height .8s var(--ease); transition-delay:var(--dl)}
.pane.on .hrs i{height:var(--h)}
.ovl{display:flex; align-items:center; gap:8px; margin-top:12px; font-size:12px; color:#e9d5ff; padding:9px 11px; border-radius:10px; background:rgba(168,85,247,.1); border:1px solid rgba(168,85,247,.35)}
.ovl svg{width:14px; height:14px; flex:none}
/* mock: attendance */
.att{display:grid; grid-template-columns:44px repeat(7,1fr); gap:6px; align-items:center}
.att span{font:500 11px var(--mono); color:var(--faint); text-align:center} .att span.l{text-align:left}
.att i{height:24px; border-radius:6px; transform:scale(0); transition:transform .4s cubic-bezier(.3,1.5,.5,1); transition-delay:var(--dl)}
.pane.on .att i{transform:none}
.att .p{background:linear-gradient(135deg,rgba(34,211,238,.6),rgba(99,102,241,.6))} .att .lt{background:rgba(245,158,11,.6)} .att .pa{background:linear-gradient(90deg,rgba(99,102,241,.6) 50%,rgba(148,163,184,.12) 50%)} .att .a{background:rgba(251,113,133,.35)} .att .o{background:rgba(148,163,184,.08)}
.aleg{display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; font-size:12px; color:var(--muted)} .aleg span{display:flex; align-items:center; gap:6px} .aleg i{width:11px; height:11px; border-radius:3px}
.shift{margin-top:14px; padding:11px 12px; border-radius:11px; border:1px solid var(--line); background:rgba(148,163,184,.04); font-size:12.5px; display:flex; justify-content:space-between; gap:10px; align-items:center}
.shift b{font-weight:600} .shift em{font-style:normal; font:600 11.5px var(--mono); color:#cffafe}
/* mock: reports */
.rtabs{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.rtabs span{font-size:11.5px; padding:5px 10px; border-radius:8px; border:1px solid var(--line); color:var(--muted)}
.rtabs span.on{border-color:rgba(99,102,241,.5); background:rgba(99,102,241,.16); color:#fff}
.rt{width:100%; border-collapse:collapse; font-size:12px}
.rt th{text-align:left; font:600 10px "Inter",sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); padding:6px 6px; border-bottom:1px solid var(--line)}
.rt td{padding:8px 6px; border-bottom:1px solid var(--line); color:var(--text2)} .rt td.m{font-family:var(--mono); color:#cffafe}
.rt tr{opacity:0; transition:opacity .4s; transition-delay:var(--dl)} .pane.on .rt tr{opacity:1}
.st{display:inline-block; padding:2px 8px; border-radius:999px; font-size:10.5px; font-weight:600}
.st.p{background:rgba(74,222,128,.12); color:#86efac} .st.l{background:rgba(245,158,11,.14); color:#fcd34d} .st.pa{background:rgba(99,102,241,.16); color:#c7d2fe}
.exp{display:flex; gap:8px; margin-top:14px} .exp span{display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:9px; font-size:12px; font-weight:600; border:1px solid var(--line2); background:rgba(148,163,184,.06)}
.exp svg{width:13px; height:13px; color:var(--cyan)}
/* mock: payroll */
.pr{display:grid; gap:8px}
.pr div{display:grid; grid-template-columns:30px 1fr 70px 80px; gap:10px; align-items:center; padding:9px 11px; border-radius:11px; background:rgba(148,163,184,.04); border:1px solid var(--line); font-size:12.5px; opacity:0; transform:translateY(8px); transition:all .45s var(--ease); transition-delay:var(--dl)}
.pane.on .pr div{opacity:1; transform:none}
.pr .av{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font:700 10.5px var(--display); background:linear-gradient(135deg,rgba(34,211,238,.25),rgba(99,102,241,.35))}
.pr small{display:block; font-size:10.5px; color:var(--faint)} .pr em{font-style:normal; font:600 11.5px var(--mono); color:var(--text2)} .pr .adj{color:#86efac} .pr .adj.n{color:#fda4af}
.pfoot{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; font-size:12px; color:var(--muted)}
.lock{display:inline-flex; gap:6px; align-items:center} .lock svg{width:13px; height:13px}
.send{display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:9px; font-size:12px; font-weight:600; color:#fff; background:linear-gradient(135deg,#6366f1,#4f46e5); box-shadow:0 6px 16px rgba(79,70,229,.45)}
.send svg{width:13px; height:13px}
/* mock: AI */
.ai{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.gauge{text-align:center; padding:10px 6px; border-radius:12px; border:1px solid var(--line); background:rgba(148,163,184,.04)}
.gauge svg{width:84px; height:52px; margin:0 auto}
.gauge .t{fill:none; stroke:rgba(148,163,184,.15); stroke-width:8; stroke-linecap:round}
.gauge .f{fill:none; stroke-width:8; stroke-linecap:round; stroke-dasharray:110; stroke-dashoffset:110; transition:stroke-dashoffset 1.3s var(--ease) .3s}
.pane.on .gauge .f{stroke-dashoffset:var(--o)}
.gauge b{display:block; font:700 18px var(--display); margin-top:2px} .gauge small{font-size:11px; color:var(--faint)}
.narr{margin-top:12px; padding:12px 14px; border-radius:12px; font-size:13px; line-height:1.55; color:#e9d5ff; background:rgba(168,85,247,.09); border:1px solid rgba(168,85,247,.35); min-height:92px}
.narr .cur{display:inline-block; width:2px; height:14px; background:var(--cyan); vertical-align:-2px; margin-left:2px; animation:pulse .8s steps(1) infinite}
.distr{display:flex; justify-content:space-between; margin-top:10px; font-size:12px; color:var(--muted)} .distr b{color:#fcd34d; font-weight:600}

/* ---------- bento ---------- */
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:18px}
.tile{overflow:hidden; display:flex; flex-direction:column}
.tile .viz{position:relative; height:200px; overflow:hidden; border-bottom:1px solid var(--line); background:radial-gradient(120% 90% at 50% 0%,rgba(99,102,241,.15),transparent 60%)}
.tile .viz::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.55; background-image:linear-gradient(rgba(148,163,184,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.06) 1px,transparent 1px); background-size:24px 24px; -webkit-mask:radial-gradient(ellipse,#000 30%,transparent 80%); mask:radial-gradient(ellipse,#000 30%,transparent 80%)}
.tile .tx{padding:22px 24px 24px}
.tag{font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#a5b4fc}
.tile h3{font-size:20px; margin:8px 0} .tile p{color:var(--muted); font-size:14.5px}
.s2{grid-column:span 2} .s3{grid-column:span 3} .s4{grid-column:span 4}
.cen{display:grid; place-items:center}
/* screenshot tile */
.shot{position:relative; width:78%; max-width:330px; border-radius:12px; overflow:hidden; border:1px solid var(--line2); background:#0a1024; box-shadow:0 20px 40px rgba(0,0,0,.5)}
.shot .tb{display:flex; gap:5px; padding:7px 10px; border-bottom:1px solid var(--line)} .shot .tb i{width:7px; height:7px; border-radius:50%; background:#334155}
.shot .ct{padding:12px; display:grid; gap:7px; animation:blurT 6s ease-in-out infinite}
.shot .ct i{display:block; height:7px; border-radius:4px; background:rgba(148,163,184,.35)} .shot .ct i:nth-child(1){width:55%; background:rgba(165,180,252,.6)} .shot .ct i:nth-child(2){width:90%} .shot .ct i:nth-child(4){width:70%}
.shot .ct .blk{height:36px; border-radius:6px; background:linear-gradient(135deg,rgba(34,211,238,.35),rgba(99,102,241,.35))}
@keyframes blurT{0%,35%{filter:none}50%,90%{filter:blur(6px)}100%{filter:none}}
.ctx{position:absolute; right:8%; bottom:12px; display:grid; gap:4px; padding:9px 11px; border-radius:10px; font:500 10.5px var(--mono); color:var(--text2); background:rgba(5,8,20,.92); border:1px solid rgba(34,211,238,.4); box-shadow:0 0 20px rgba(34,211,238,.2)}
.ctx b{color:#a5f3fc; font-weight:600}
/* category rules tile */
.rules{width:86%; display:grid; gap:7px}
.rules div{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:8px 11px; border-radius:10px; background:rgba(5,8,20,.75); border:1px solid var(--line); font:500 11.5px var(--mono); color:var(--text2); animation:ruleIn 6s var(--ease) infinite; animation-delay:var(--dl)}
@keyframes ruleIn{0%,8%{opacity:0; transform:translateX(-12px)}18%,88%{opacity:1; transform:none}100%{opacity:0}}
.rules em{font:600 10.5px "Inter",sans-serif; font-style:normal; padding:3px 8px; border-radius:999px}
.rules .pr1{background:rgba(34,211,238,.14); color:#a5f3fc} .rules .ne{background:rgba(148,163,184,.14); color:#cbd5e1} .rules .un{background:rgba(245,158,11,.14); color:#fcd34d}
/* roles tile */
.roles{display:flex; flex-wrap:wrap; gap:7px; justify-content:center; padding:0 18px}
.roles span{font-size:12px; padding:6px 11px; border-radius:999px; border:1px solid var(--line2); background:rgba(5,8,20,.7); color:var(--text2); animation:roleGlow 9s ease-in-out infinite; animation-delay:var(--dl)}
@keyframes roleGlow{0%,8%,20%,100%{border-color:var(--line2); box-shadow:none; color:var(--text2)}12%{border-color:rgba(34,211,238,.7); box-shadow:0 0 16px rgba(34,211,238,.4); color:#fff}}
/* email tile */
.mail{width:78%; max-width:300px; border-radius:12px; background:linear-gradient(180deg,#f8fafc,#e2e8f0); color:#0f172a; padding:13px 14px; box-shadow:0 20px 40px rgba(0,0,0,.5); animation:bob 6s ease-in-out infinite}
.mail h5{margin:0 0 8px; font:700 12px var(--display); display:flex; justify-content:space-between} .mail h5 span{font:500 10px "Inter",sans-serif; color:#64748b}
.mail .row{display:flex; align-items:center; gap:12px}
.mail .pie{width:58px; height:58px; border-radius:50%; flex:none; background:conic-gradient(#22d3ee 0 46%,#6366f1 46% 70%,#a855f7 70% 86%,#cbd5e1 86%)}
.mail ul{display:grid; gap:3px; font-size:10.5px; flex:1} .mail li{display:flex; justify-content:space-between; border-bottom:1px dashed #cbd5e1; padding-bottom:2px} .mail li b{font-weight:700}
/* tray tile */
.tray{width:84%; max-width:320px; border-radius:12px; overflow:hidden; background:#0b1022; border:1px solid var(--line2); box-shadow:0 20px 40px rgba(0,0,0,.6); font-size:12px}
.tray div{display:flex; align-items:center; gap:9px; padding:7px 12px; color:var(--text2)} .tray div+div{border-top:1px solid var(--line)}
.tray svg{width:13px; height:13px; color:var(--cyan); flex:none} .tray .hd{background:rgba(99,102,241,.14); color:#fff; font-weight:600} .tray em{margin-left:auto; font-style:normal; font:600 11px var(--mono); color:#86efac}
/* projects tile */
.proj{width:86%; display:grid; gap:10px}
.proj div{font-size:11.5px; color:var(--text2); display:grid; grid-template-columns:1fr auto; gap:4px}
.proj div em{font-style:normal; font-family:var(--mono); color:var(--faint)}
.proj i{grid-column:1/-1; position:relative; height:8px; border-radius:5px; background:rgba(148,163,184,.08)}
.proj i::before{content:""; position:absolute; inset:0; width:var(--w); border-radius:5px; background:var(--c,var(--grad)); animation:grow 2.2s var(--ease) infinite alternate}
.proj i::after{content:""; position:absolute; top:-3px; bottom:-3px; left:var(--lim); width:2px; background:#f59e0b; box-shadow:0 0 8px #f59e0b}
/* API tile */
.api{width:88%; border-radius:12px; padding:12px 14px; background:rgba(3,5,12,.9); border:1px solid var(--line2); font:500 11.5px/1.7 var(--mono); color:var(--text2)}
.api .g{color:#86efac} .api .v{color:#c4b5fd} .api .s{color:var(--faint)}
/* devices tile */
.dev{width:86%; display:grid; gap:7px}
.dev div{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:8px 11px; border-radius:10px; background:rgba(5,8,20,.75); border:1px solid var(--line); font-size:12px}
.dev em{font-style:normal; font:600 11px var(--mono); color:var(--faint)}
.dot{width:8px; height:8px; border-radius:50%} .dot.on{background:var(--green); box-shadow:0 0 8px var(--green)} .dot.off{background:#64748b}

/* ---------- privacy ---------- */
.pv-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.cap{padding:28px}
.cap h3{font-size:20px; display:flex; align-items:center; gap:12px; margin-bottom:18px}
.cap h3 .ic{width:38px; height:38px; border-radius:11px; display:grid; place-items:center}
.cap h3 .ic svg{width:19px; height:19px}
.cap.yes h3 .ic{background:rgba(34,211,238,.12); border:1px solid rgba(34,211,238,.4); color:var(--cyan)}
.cap.no h3 .ic{background:rgba(251,113,133,.12); border:1px solid rgba(251,113,133,.4); color:var(--rose)}
.caps{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.caps li{display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:11px; font-size:13.5px; color:var(--text2); background:rgba(148,163,184,.04); border:1px solid var(--line)}
.caps li svg{width:15px; height:15px; flex:none}
.cap.yes li svg{color:var(--cyan)} .cap.no li svg{color:var(--rose)}
.cap.no li{text-decoration:line-through; text-decoration-color:rgba(251,113,133,.5)}
.cap .foot{margin-top:16px; font-size:13px; color:var(--muted)}
.consent{margin-top:20px; padding:28px; display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative}
.cstep{position:relative; padding:0 18px; text-align:center}
.cstep .num{position:relative; z-index:1; width:54px; height:54px; margin:0 auto 14px; border-radius:16px; display:grid; place-items:center; background:#0b1022; border:1px solid var(--line2); color:var(--cyan)}
.cstep .num svg{width:22px; height:22px}
.cstep.in .num{background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 0 26px rgba(99,102,241,.6); transition:all .5s; transition-delay:var(--dl)}
.cstep h4{font-size:15.5px; margin-bottom:6px} .cstep p{font-size:13px; color:var(--muted)}
.cline{position:absolute; left:12.5%; right:12.5%; top:55px; height:2px; background:rgba(148,163,184,.14)}
.cline b{position:absolute; inset:0; width:0; background:var(--grad); box-shadow:0 0 12px rgba(34,211,238,.8); transition:width 1.8s var(--ease)}
.consent.in .cline b{width:100%}
.pv-more{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:20px}
.pv-more>div{padding:22px}
.pv-more .ic{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; margin-bottom:14px; background:rgba(168,85,247,.12); border:1px solid rgba(168,85,247,.35); color:#d8b4fe}
.pv-more .ic svg{width:19px; height:19px}
.pv-more h4{font-size:16px; margin-bottom:6px} .pv-more p{font-size:13.5px; color:var(--muted)}

/* ---------- setup steps ---------- */
.steps{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.srail{position:absolute; left:0; right:0; top:-34px; height:2px; background:rgba(148,163,184,.12); border-radius:2px}
.srail b{position:absolute; left:0; top:0; bottom:0; width:0; background:var(--grad); box-shadow:0 0 14px rgba(34,211,238,.9)}
.step{padding:24px}
.step .sn{font:700 13px var(--mono); color:var(--cyan); letter-spacing:.08em}
.step h3{font-size:19px; margin:10px 0 8px} .step p{font-size:14px; color:var(--muted)}
.step .sv{margin-top:18px; height:128px; border-radius:12px; border:1px solid var(--line); background:rgba(4,6,14,.6); padding:12px; overflow:hidden; position:relative}
.inp{height:30px; border-radius:8px; border:1px solid var(--line2); background:rgba(148,163,184,.05); display:flex; align-items:center; padding:0 9px; font-size:12px; margin-bottom:7px; gap:6px; color:var(--text2)}
.inp em{font-style:normal; color:var(--faint); font-size:10.5px; margin-left:auto}
.tgl{display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--text2); padding:3px 0}
.sw{width:32px; height:18px; border-radius:999px; background:linear-gradient(135deg,#22d3ee,#6366f1); position:relative; box-shadow:0 0 10px rgba(34,211,238,.4)}
.sw::after{content:""; position:absolute; right:2px; top:2px; width:14px; height:14px; border-radius:50%; background:#fff}
.sw.off{background:rgba(148,163,184,.25); box-shadow:none} .sw.off::after{right:auto; left:2px; background:#cbd5e1}
.ichips{display:flex; flex-wrap:wrap; gap:6px}
.ichips span{display:inline-flex; align-items:center; gap:6px; padding:4px 9px 4px 4px; border-radius:999px; font-size:11px; background:rgba(99,102,241,.14); border:1px solid rgba(99,102,241,.35)}
.ichips span i{width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font:700 8.5px var(--display); font-style:normal; background:var(--grad)}
.dl{display:flex; align-items:center; gap:10px; padding:10px; border-radius:10px; background:rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.4)}
.dl svg{width:22px; height:22px; color:#c7d2fe} .dl b{display:block; font-size:12.5px} .dl small{font-size:10.5px; color:var(--faint)}
.dbar{height:5px; border-radius:5px; background:rgba(148,163,184,.12); margin-top:12px; overflow:hidden}
.dbar i{display:block; height:100%; width:30%; background:var(--grad); animation:dlb 2.6s var(--ease) infinite}
@keyframes dlb{from{width:0}to{width:100%}}

/* ---------- enterprise ---------- */
.ent{display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; align-items:center; padding:44px}
.ent .chk{margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:2px 18px}
.orbit{position:relative; height:400px; display:grid; place-items:center}
.orbit .ring{position:absolute; border-radius:50%; border:1px dashed rgba(148,163,184,.2)}
.orbit .r1{width:220px; height:220px} .orbit .r2{width:360px; height:360px; animation:spin 60s linear infinite}
.orbit .hub{position:relative; width:110px; height:110px; border-radius:30px; display:grid; place-items:center; background:linear-gradient(135deg,#6366f1,#7c3aed); box-shadow:0 0 60px rgba(99,102,241,.8)}
.orbit .hub::before{content:""; position:absolute; inset:-14px; border-radius:38px; border:1px solid rgba(165,180,252,.5); animation:ripple 2.6s ease-out infinite}
.orbit .hub svg{width:48px; height:48px}
.orb{position:absolute; left:50%; top:50%; width:0; height:0; animation:spin 60s linear infinite}
.orb span{position:absolute; transform:translate(-50%,-50%) translateY(-180px) rotate(calc(var(--a) * -1)); white-space:nowrap}
.orb span b{display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:12px; font-size:12.5px; font-weight:600; background:rgba(10,14,32,.95); border:1px solid var(--line2); box-shadow:0 10px 30px rgba(0,0,0,.6); animation:spin 60s linear infinite reverse}
.orb span b i{width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan)}

/* ---------- pricing ---------- */
.toggle{display:inline-flex; align-items:center; gap:6px; padding:5px; border-radius:12px; background:rgba(148,163,184,.08); border:1px solid var(--line); margin-top:28px}
.toggle button{padding:9px 18px; border-radius:9px; border:0; background:none; cursor:pointer; color:var(--muted); font:600 14px "Inter",sans-serif; transition:.2s}
.toggle button[aria-pressed="true"]{background:linear-gradient(135deg,#6366f1,#4f46e5); color:#fff; box-shadow:0 6px 16px rgba(79,70,229,.4)}
.toggle .save{font-size:12px; color:#86efac; padding:0 10px 0 4px; font-weight:600}
.plans{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch}
.plan{padding:30px 24px; display:flex; flex-direction:column; overflow:hidden}
.plan>*{position:relative; z-index:1}
.plan.feat{border-color:transparent; box-shadow:0 0 60px -10px rgba(99,102,241,.55)}
.plan.feat::before{content:""; position:absolute; inset:-60%; z-index:0; background:conic-gradient(from 0deg,transparent 0 60%,#22d3ee 75%,#6366f1 85%,#a855f7 95%,transparent); animation:spin 6s linear infinite}
.plan.feat>.pbg{position:absolute; inset:1.5px; z-index:0; border-radius:calc(var(--r) - 1.5px); background:linear-gradient(165deg,#1a2347,#0a0f22)}
.ph{display:flex; align-items:center; justify-content:space-between; gap:8px}
.plan h3{font-size:19px}
.pop{font-size:11px; font-weight:700; color:#fff; background:var(--grad); padding:5px 10px; border-radius:999px}
.price{margin-top:18px; display:flex; align-items:baseline; gap:6px}
.price b{font:700 44px/1 var(--display); letter-spacing:-.04em} .price span{font-size:13.5px; color:var(--faint)}
.pnote{margin-top:10px; font-size:13px; color:var(--faint)}
.launch{margin-top:12px; font-size:12.5px; color:#fcd34d; background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.3); border-radius:9px; padding:8px 11px}
.plan ul{margin:22px 0 26px; display:grid; gap:10px}
.plan li{font-size:14px; color:var(--text2); padding-left:22px; position:relative}
.plan li::before{content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--grad); box-shadow:0 0 8px rgba(99,102,241,.6)}
.plan li.hl{color:var(--faint); padding-left:0; font-size:13px} .plan li.hl::before{display:none}
.plan .btn{margin-top:auto; width:100%}
.pay{margin-top:22px; text-align:center; font-size:13px; color:var(--faint)}

/* ---------- faq ---------- */
.faqg{display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:start}
.faq{display:grid; gap:12px}
.faq details{padding:0 24px; border-radius:16px}
.faq details[open]{border-color:rgba(99,102,241,.45)}
.faq summary{cursor:pointer; list-style:none; padding:21px 40px 21px 0; position:relative; font-size:16.5px; font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:0; top:50%; width:26px; height:26px; margin-top:-13px; border-radius:8px; transition:transform .3s var(--ease);
  background:rgba(99,102,241,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23c7d2fe' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 3v10M3 8h10'/%3E%3C/svg%3E") center/12px no-repeat}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 40px 22px 0; color:var(--muted); font-size:15px}

/* ---------- cta + footer ---------- */
.final{position:relative; overflow:hidden; text-align:center; padding:110px 32px; border-radius:30px; isolation:isolate}
.portal{position:absolute; left:50%; top:50%; width:620px; height:620px; margin:-310px 0 0 -310px; perspective:900px; z-index:-1; opacity:.8; pointer-events:none}
.portal .p3{position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(64deg)}
.portal i{position:absolute; inset:0; border-radius:50%; border:1px solid rgba(99,102,241,.5); box-shadow:0 0 30px rgba(99,102,241,.3); animation:portal 6s linear infinite}
.portal i:nth-child(2){border-color:rgba(34,211,238,.55); animation-delay:-1.5s} .portal i:nth-child(3){border-color:rgba(168,85,247,.55); animation-delay:-3s} .portal i:nth-child(4){animation-delay:-4.5s}
@keyframes portal{0%{transform:translateZ(-240px) scale(.4); opacity:0}30%{opacity:1}100%{transform:translateZ(160px) scale(1.2); opacity:0}}
.final h2{font-size:clamp(30px,4.6vw,56px); max-width:18ch; margin:0 auto}
.final p{margin:20px auto 0; max-width:56ch; color:var(--muted); font-size:17.5px}
.final .hcta{justify-content:center; animation:none}
.foot{border-top:1px solid var(--line); padding:70px 0 34px; margin-top:40px; background:linear-gradient(180deg,rgba(5,7,15,.4),rgba(5,7,15,.96))}
.fgrid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px}
.fabout p{margin-top:16px; font-size:14.5px; color:var(--muted); max-width:34ch}
.foot h4{font:600 13px "Inter",sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--text2); margin-bottom:16px}
.foot ul{display:grid; gap:11px} .foot li a{font-size:14.5px; color:var(--muted)} .foot li a:hover{color:#fff}
.fbase{margin-top:50px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:13px; color:var(--faint)}
.top{position:fixed; right:22px; bottom:22px; z-index:900; width:54px; height:54px; border-radius:50%; border:1px solid var(--line2); background:rgba(8,12,26,.85); display:grid; place-items:center; cursor:pointer; color:#fff; opacity:0; transform:translateY(16px); transition:opacity .3s, transform .3s var(--ease); pointer-events:none}
.top.show{opacity:1; transform:none; pointer-events:auto}
.top svg.d{position:absolute; inset:-1px; width:56px; height:56px; transform:rotate(-90deg)}
.top .d circle{fill:none; stroke-width:2.5} .top .d .t{stroke:rgba(148,163,184,.15)} .top .d .v{stroke:url(#gD); stroke-linecap:round; stroke-dasharray:157; stroke-dashoffset:157}

/* ---------- popup ---------- */
.modal{position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:20px}
.modal[hidden]{display:none}
.ov{position:absolute; inset:0; background:rgba(3,5,12,.78); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.card{position:relative; width:min(470px,100%); text-align:center; padding:38px 32px 28px; border-radius:24px; background:linear-gradient(165deg,#18213f,#0d1328 55%,#080c1a); border:1px solid var(--line2); box-shadow:0 40px 90px rgba(0,0,0,.7), 0 0 80px -20px rgba(99,102,241,.5); animation:pop .55s var(--ease) both}
@keyframes pop{from{opacity:0; transform:perspective(900px) rotateX(18deg) translateY(30px) scale(.95)}}
.card .x{position:absolute; top:14px; right:14px; width:36px; height:36px; border:0; border-radius:10px; cursor:pointer; background:rgba(148,163,184,.1); color:var(--muted); display:grid; place-items:center}
.card .x svg{width:16px; height:16px}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.35); color:#fcd34d; font-size:13px; font-weight:600}
.card .big{margin:20px 0 6px; font:700 64px/1 var(--display)}
.card h2{font-size:24px; line-height:1.25; margin-bottom:10px}
.card p{color:var(--muted); font-size:15px; max-width:34ch; margin:0 auto}
.card .btn{width:100%; margin-top:22px}
.card .no{display:block; margin:14px auto 0; background:none; border:0; cursor:pointer; color:var(--faint); font:13px "Inter",sans-serif; text-decoration:underline; text-underline-offset:3px}
.card .fine{margin-top:10px; font-size:12px; color:#69748a}


/* =====================================================
   V3 POLISH — 2D + 3D CSS MOTION LAYER
   ===================================================== */
/* living gradient text */
.gt{background:linear-gradient(110deg,#22d3ee 0%,#6366f1 25%,#a855f7 50%,#6366f1 75%,#22d3ee 100%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:gshift 7s linear infinite}
@keyframes gshift{to{background-position:-200% 0}}
.h2{letter-spacing:-.035em}
.lede{line-height:1.65}
.eyebrow::before{background-size:200% 100%; animation:gshift 3s linear infinite}

/* custom cursor ring */
.cring{position:fixed; left:0; top:0; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; border:1.5px solid rgba(165,180,252,.55); pointer-events:none; z-index:2500; transition:width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), background .25s, border-color .25s; mix-blend-mode:screen}
.cring.big{width:64px; height:64px; margin:-32px 0 0 -32px; background:rgba(99,102,241,.12); border-color:rgba(34,211,238,.7)}
.cdot{position:fixed; left:0; top:0; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:#a5f3fc; box-shadow:0 0 10px #22d3ee; pointer-events:none; z-index:2501}

/* button ripple + magnetic */
.btn{will-change:transform}
.btn .rp{position:absolute; border-radius:50%; background:rgba(255,255,255,.35); transform:scale(0); animation:rp .7s ease-out forwards; pointer-events:none}
@keyframes rp{to{transform:scale(4); opacity:0}}

/* hero 3D cubes */
.cubes{position:absolute; inset:0; perspective:900px; pointer-events:none; z-index:-1}
.cube{--s:54px; position:absolute; width:var(--s); height:var(--s); transform-style:preserve-3d; animation:cubeSpin 16s linear infinite}
.cube i{position:absolute; inset:0; border:1px solid rgba(129,140,248,.55); background:linear-gradient(135deg,rgba(99,102,241,.22),rgba(34,211,238,.05)); box-shadow:inset 0 0 18px rgba(99,102,241,.35)}
.cube i:nth-child(1){transform:translateZ(calc(var(--s)/2))}
.cube i:nth-child(2){transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.cube i:nth-child(3){transform:rotateY(90deg) translateZ(calc(var(--s)/2))}
.cube i:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--s)/2))}
.cube i:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--s)/2))}
.cube i:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--s)/2))}
.cube.k1{left:4%; top:18%}
.cube.k2{--s:34px; left:44%; top:12%; animation-duration:11s; animation-direction:reverse}
.cube.k2 i{border-color:rgba(34,211,238,.6)}
.cube.k3{--s:40px; left:47%; bottom:8%; animation-duration:19s}
.cube.k3 i{border-color:rgba(192,132,252,.6); background:linear-gradient(135deg,rgba(168,85,247,.22),transparent)}
@keyframes cubeSpin{from{transform:translateY(var(--py,0)) rotateX(0) rotateY(0)}to{transform:translateY(var(--py,0)) rotateX(360deg) rotateY(720deg)}}

/* hero gyroscope behind dashboard */
.gyro{position:absolute; left:50%; top:47%; width:440px; height:440px; margin:-220px 0 0 -220px; transform-style:preserve-3d; transform:translateZ(-180px); pointer-events:none}
.gyro i{position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(99,102,241,.45); box-shadow:0 0 24px rgba(99,102,241,.25), inset 0 0 24px rgba(99,102,241,.15)}
.gyro i::before{content:""; position:absolute; top:-5px; left:50%; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:#fff; box-shadow:0 0 14px 4px rgba(34,211,238,.9)}
.gyro i:nth-child(1){animation:g1 12s linear infinite}
.gyro i:nth-child(2){inset:30px; border-color:rgba(34,211,238,.45); animation:g2 9s linear infinite}
.gyro i:nth-child(3){inset:60px; border-color:rgba(168,85,247,.5); animation:g3 15s linear infinite}
.gyro b{position:absolute; left:50%; top:50%; width:90px; height:90px; margin:-45px; border-radius:50%; background:radial-gradient(circle,rgba(165,243,252,.55),rgba(99,102,241,.25) 40%,transparent 70%); filter:blur(4px); animation:pulse 3s ease-in-out infinite}
@keyframes g1{from{transform:rotateX(72deg) rotateZ(0)}to{transform:rotateX(72deg) rotateZ(360deg)}}
@keyframes g2{from{transform:rotateY(70deg) rotateZ(0)}to{transform:rotateY(70deg) rotateZ(-360deg)}}
@keyframes g3{from{transform:rotateX(40deg) rotateY(50deg) rotateZ(0)}to{transform:rotateX(40deg) rotateY(50deg) rotateZ(360deg)}}
.app-glow{position:absolute; left:10%; right:10%; bottom:4%; height:60px; border-radius:50%; background:radial-gradient(ellipse,rgba(99,102,241,.55),transparent 70%); filter:blur(20px); transform:translateZ(-60px) rotateX(80deg)}

/* animated section separator */
.sep{position:relative; max-width:var(--maxw); height:1px; margin:0 auto; background:linear-gradient(90deg,transparent,rgba(99,102,241,.45),rgba(34,211,238,.45),transparent)}
.sep i{position:absolute; top:-2px; left:0; width:140px; height:5px; border-radius:5px; background:radial-gradient(ellipse,#fff,rgba(34,211,238,.8) 30%,transparent 70%); filter:blur(.5px); animation:sepRun 6s linear infinite}
@keyframes sepRun{from{left:-10%}to{left:100%}}

/* facts flip in 3D */
.js .fact[data-rv]{rotate:y 75deg; translate:0 30px; transform-origin:50% 50%}
.js .fact[data-rv].in{rotate:y 0deg}
.fact{transition:border-color .3s, box-shadow .3s}
.fact:hover{border-color:rgba(34,211,238,.45); box-shadow:0 0 40px -10px rgba(34,211,238,.5)}

/* pipeline nodes */
.node{transition:transform .3s var(--ease), border-color .3s, box-shadow .3s}
.node:hover{transform:translateX(5px); border-color:rgba(34,211,238,.5); box-shadow:0 0 24px -6px rgba(34,211,238,.5)}
.node.o:hover{transform:translateX(-5px)}

/* ---------- 3D feature cube ---------- */
.cgrid{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center}
.cpick{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:28px}
.cpick button{display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:13px; border:1px solid var(--line); background:rgba(148,163,184,.04); color:var(--text2); font:600 14px "Inter",sans-serif; cursor:pointer; text-align:left; transition:all .3s var(--ease)}
.cpick button svg{width:18px; height:18px; color:var(--muted); transition:color .3s}
.cpick button:hover{border-color:var(--line2); background:rgba(148,163,184,.08)}
.cpick button[aria-pressed="true"]{border-color:rgba(99,102,241,.55); background:linear-gradient(160deg,rgba(30,41,80,.85),rgba(10,15,34,.7)); color:#fff; box-shadow:0 0 30px -10px rgba(99,102,241,.7)}
.cpick button[aria-pressed="true"] svg{color:var(--cyan)}
.cstage{position:relative; height:440px; perspective:1300px; display:grid; place-items:center}
.cstage::after{content:""; position:absolute; left:50%; bottom:20px; width:300px; height:60px; margin-left:-150px; border-radius:50%; background:radial-gradient(ellipse,rgba(99,102,241,.5),transparent 70%); filter:blur(16px); animation:pulse 4s ease-in-out infinite}
.c3{--z:140px; position:relative; width:280px; height:280px; transform-style:preserve-3d; transition:transform 1.2s cubic-bezier(.6,.05,.25,1)}
.face{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:26px; border-radius:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:linear-gradient(155deg,rgba(30,40,82,.96),rgba(8,12,30,.97)); border:1px solid rgba(99,102,241,.55); box-shadow:inset 0 0 40px rgba(99,102,241,.18), 0 0 50px -10px rgba(99,102,241,.5); overflow:hidden}
.face::before{content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 35%,rgba(34,211,238,.16) 48%,rgba(255,255,255,.2) 50%,rgba(168,85,247,.12) 52%,transparent 65%); background-size:250% 100%; animation:scan 5s ease-in-out infinite}
.face::after{content:""; position:absolute; inset:0; opacity:.5; background-image:linear-gradient(rgba(148,163,184,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.07) 1px,transparent 1px); background-size:28px 28px}
.face>*{position:relative; z-index:1}
.face .fi{width:58px; height:58px; border-radius:17px; display:grid; place-items:center; background:var(--grad); box-shadow:0 0 30px rgba(99,102,241,.7)}
.face .fi svg{width:28px; height:28px; color:#fff}
.face .fk{font:600 11px var(--mono); letter-spacing:.12em; color:var(--cyan); text-transform:uppercase}
.face h3{font-size:28px; margin:6px 0 6px}
.face p{font-size:14px; color:var(--text2)}
.face:nth-child(1){transform:translateZ(var(--z))}
.face:nth-child(2){transform:rotateY(90deg) translateZ(var(--z))}
.face:nth-child(3){transform:rotateY(180deg) translateZ(var(--z))}
.face:nth-child(4){transform:rotateY(-90deg) translateZ(var(--z))}
.face:nth-child(5){transform:rotateX(90deg) translateZ(var(--z))}
.face:nth-child(6){transform:rotateX(-90deg) translateZ(var(--z))}
.corbit{position:absolute; left:50%; top:50%; width:420px; height:420px; margin:-210px 0 0 -210px; border-radius:50%; border:1px dashed rgba(148,163,184,.18); transform:rotateX(72deg); animation:spinFlat 30s linear infinite; pointer-events:none}
.corbit::before{content:""; position:absolute; top:-6px; left:50%; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:#22d3ee; box-shadow:0 0 16px 4px rgba(34,211,238,.8)}
@keyframes spinFlat{from{transform:rotateX(72deg) rotateZ(0)}to{transform:rotateX(72deg) rotateZ(360deg)}}

/* bento depth polish */
.tile .viz>*{transition:transform .5s var(--ease)}
.tile:hover .viz>*:not(.ctx){transform:translateY(-6px) scale(1.04)}
.tile .tag{display:inline-flex; align-items:center; gap:8px}
.tile .tag::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); animation:pulse 2s infinite}

/* privacy */
.cap{transition:transform .4s var(--ease), box-shadow .4s}
.cap:hover{transform:translateY(-4px)}
.caps li{transition:transform .3s var(--ease), border-color .3s}
.caps li:hover{transform:translateX(4px); border-color:var(--line2)}
.cstep.in .num{animation:flipNum .9s var(--ease) both; animation-delay:var(--dl)}
@keyframes flipNum{from{transform:perspective(400px) rotateY(180deg) scale(.6)}to{transform:none}}
.pv-more .ic{animation:icoFloat 4s ease-in-out infinite}
.pv-more>div:nth-child(2) .ic{animation-delay:-1s}.pv-more>div:nth-child(3) .ic{animation-delay:-2s}.pv-more>div:nth-child(4) .ic{animation-delay:-3s}
@keyframes icoFloat{50%{transform:translateY(-5px) rotate(-4deg)}}

/* setup — 3D staircase */
.steps{perspective:1200px}
.js .step[data-rv]{rotate:x 50deg; translate:0 80px}
.js .step[data-rv].in{rotate:x 0deg; translate:0 0}
.step{transition:transform .4s var(--ease), border-color .3s, box-shadow .3s}
.step:hover{transform:translateY(-8px); border-color:rgba(99,102,241,.45); box-shadow:0 30px 60px -25px rgba(79,70,229,.6)}
.step .sn{display:inline-flex; align-items:center; gap:8px}
.step .sn::after{content:""; width:28px; height:1px; background:var(--grad)}

/* enterprise: tilted 3D ring */
.orbit{perspective:900px}
.orbit .r3{width:300px; height:300px; border:1.5px solid rgba(34,211,238,.35); border-style:solid; animation:spinFlat 10s linear infinite; box-shadow:0 0 30px rgba(34,211,238,.2)}
.orbit .hub{animation:hubFloat 5s ease-in-out infinite; transform-style:preserve-3d}
@keyframes hubFloat{50%{transform:translateY(-10px) rotateY(20deg)}}

/* pricing */
.price b{display:inline-block}
.price b.flip{animation:pflip .55s var(--ease)}
@keyframes pflip{from{transform:perspective(300px) rotateX(90deg); opacity:0}to{transform:none; opacity:1}}
.plan.feat{animation:featFloat 6s ease-in-out infinite}
@keyframes featFloat{50%{translate:0 -8px}}

/* faq */
.faq details{transition:border-color .3s, background .3s, transform .3s var(--ease)}
.faq details:hover{transform:translateX(4px)}
.faq details[open] p{animation:fadeUp .45s var(--ease)}

/* final CTA particles */
.final .spark{position:absolute; width:4px; height:4px; border-radius:50%; background:#a5f3fc; box-shadow:0 0 10px 2px rgba(34,211,238,.8); animation:sparkUp 6s linear infinite; opacity:0; z-index:-1}
@keyframes sparkUp{0%{transform:translateY(40px); opacity:0}20%{opacity:1}100%{transform:translateY(-260px); opacity:0}}

@media (max-width:980px){
  .cgrid{grid-template-columns:1fr; gap:30px}
  .cstage{height:380px}
  .cube.k2,.cube.k3{display:none}
  .gyro{width:340px; height:340px; margin:-170px 0 0 -170px}
}
@media (max-width:640px){
  .c3{--z:110px; width:220px; height:220px} .face{padding:20px} .face h3{font-size:23px} .face .fi{width:48px; height:48px}
  .corbit{width:320px; height:320px; margin:-160px 0 0 -160px}
  .cstage{height:330px}
  .cpick{grid-template-columns:1fr 1fr}
  .cube.k1{display:none}
}
@media (hover:none){.cring,.cdot{display:none}}
main{overflow-x:clip}
html{overflow-x:clip}


/* =====================================================
   V4 — THEME SWITCH + EXTRA MOTION
   ===================================================== */
/* ---------- light theme tokens ---------- */
[data-theme="light"]{--void:#f5f7fd; --line:rgba(30,41,99,.10); --line2:rgba(30,41,99,.18); --text:#0b1230; --text2:#2a3557; --muted:#56617e; --faint:#7d87a2; color-scheme:light}
[data-theme="dark"]{color-scheme:dark}
[data-theme="light"] body{color:var(--text)}
/* product screens stay dark in light mode (like real screenshots) */
[data-theme="light"] :is(.app,.fbar,.chip,.mock,.face,.tile .viz,.step .sv,.orb span b,.cls,.card,.core,.ctx){--text:#f4f6fd; --text2:#cdd4e4; --muted:#97a3bc; --faint:#6b778f; --line:rgba(148,163,184,.13); --line2:rgba(148,163,184,.24); color:var(--text)}
[data-theme="light"] .tile .viz{background:radial-gradient(120% 90% at 50% 0%,rgba(99,102,241,.4),transparent 60%),#0b1022}
[data-theme="light"] .step .sv{background:#0b1022}
[data-theme="light"] .aurora{background:radial-gradient(120% 80% at 50% -10%,#e0e7ff 0%,#f5f7fd 62%)}
[data-theme="light"] .aurora i{opacity:.32}
[data-theme="light"] .noise{opacity:.018}
[data-theme="light"] #bg{filter:brightness(.45) saturate(2.2); opacity:.55}
[data-theme="light"] .spot{background:radial-gradient(circle,rgba(99,102,241,.09),transparent 60%)}
[data-theme="light"] .gt{background-image:linear-gradient(110deg,#0891b2 0%,#4f46e5 25%,#9333ea 50%,#4f46e5 75%,#0891b2 100%)}
[data-theme="light"] .glass{background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(238,242,255,.78)); border-color:rgba(79,70,229,.13); box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 24px 50px -28px rgba(30,41,99,.35)}
[data-theme="light"] .tilt:hover{box-shadow:0 34px 70px -30px rgba(79,70,229,.45)}
[data-theme="light"] .head.solid{background:rgba(245,247,253,.82)}
[data-theme="light"] .links.open{background:#fff}
[data-theme="light"] :is(.links a:hover,.acts .login:hover,.btn--g:hover,.foot li a:hover,.tab[aria-selected="true"] b){color:var(--text)}
[data-theme="light"] .btn--g{color:#312e81; border-color:rgba(99,102,241,.3); background:rgba(99,102,241,.06)}
[data-theme="light"] .burger{color:var(--text)}
[data-theme="light"] :is(.eyebrow,.tag){color:#4f46e5}
[data-theme="light"] .pill{color:#4338ca; background:rgba(99,102,241,.08)}
[data-theme="light"] .launch{color:#92400e; background:rgba(245,158,11,.12)}
[data-theme="light"] .toggle .save{color:#15803d}
[data-theme="light"] :is(.pane .k,.step .sn,.hproof svg,.node .ic,.cap.yes li svg){color:#0891b2}
[data-theme="light"] :is(.node.o .ic,.pv-more .ic){color:#7c3aed}
[data-theme="light"] .mq{background:rgba(255,255,255,.55)}
[data-theme="light"] .mqt span{background:rgba(99,102,241,.05)}
[data-theme="light"] .tabs{background:rgba(99,102,241,.04)}
[data-theme="light"] :is(.tab[aria-selected="true"],.cpick button[aria-pressed="true"]){background:linear-gradient(160deg,#fff,#eef2ff); color:var(--text); box-shadow:0 10px 30px -14px rgba(79,70,229,.5)}
[data-theme="light"] .plan.feat>.pbg{background:linear-gradient(165deg,#ffffff,#eef2ff)}
[data-theme="light"] .cstep .num{background:#fff}
[data-theme="light"] .top{background:rgba(255,255,255,.92); color:var(--text)}
[data-theme="light"] .foot{background:linear-gradient(180deg,rgba(245,247,253,.4),#eaeefc)}
[data-theme="light"] .cring{mix-blend-mode:normal; border-color:rgba(79,70,229,.45)}
[data-theme="light"] .cdot{background:#4f46e5; box-shadow:0 0 10px rgba(79,70,229,.6)}
[data-theme="light"] .bt1{-webkit-text-stroke-color:rgba(79,70,229,.35)}
[data-theme="light"] .navind{box-shadow:0 0 10px rgba(79,70,229,.5)}

/* ---------- theme toggle button ---------- */
.theme{position:relative; margin-left:auto; width:44px; height:44px; border-radius:12px; border:1px solid var(--line2); background:rgba(148,163,184,.08); color:var(--text); cursor:pointer; display:grid; place-items:center; overflow:hidden; transition:background .3s, border-color .3s, transform .3s var(--ease)}
.theme:hover{border-color:rgba(99,102,241,.55); transform:translateY(-1px)}
.theme::before{content:""; position:absolute; inset:-2px; border-radius:inherit; background:conic-gradient(from var(--ang,0deg),transparent 0 70%,#22d3ee 82%,#a855f7 92%,transparent); animation:edge 4s linear infinite; opacity:0; transition:opacity .3s; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; padding:1px}
.theme:hover::before{opacity:1}
.theme svg{width:22px; height:22px; transform:rotate(40deg); transition:transform .8s cubic-bezier(.6,-.2,.3,1.4)}
.theme .sun{r:9px; fill:currentColor; transition:r .6s var(--ease)}
.theme .mc{cx:17px; cy:6px; r:8px; transition:cx .6s var(--ease), cy .6s var(--ease)}
.theme .rays{stroke:currentColor; stroke-width:2; stroke-linecap:round; transform-origin:12px 12px; transform:scale(.3) rotate(-60deg); opacity:0; transition:transform .7s var(--ease), opacity .4s}
[data-theme="light"] .theme svg{transform:rotate(180deg)}
[data-theme="light"] .theme .sun{r:5px}
[data-theme="light"] .theme .mc{cx:31px; cy:-4px}
[data-theme="light"] .theme .rays{transform:none; opacity:1}
[data-theme="light"] .theme{color:#d97706}
.theme .stars i{position:absolute; width:3px; height:3px; border-radius:50%; background:currentColor; transition:opacity .4s, transform .6s var(--ease)}
.theme .stars i:nth-child(1){left:9px; top:10px}.theme .stars i:nth-child(2){right:9px; bottom:11px; width:2px; height:2px}.theme .stars i:nth-child(3){left:12px; bottom:9px; width:2px; height:2px}
.theme .stars i{animation:twinkle 2.4s ease-in-out infinite}
.theme .stars i:nth-child(2){animation-delay:-.8s}.theme .stars i:nth-child(3){animation-delay:-1.6s}
[data-theme="light"] .theme .stars i{opacity:0; transform:translateY(8px) scale(0)}
@keyframes twinkle{50%{opacity:.25}}
.tburst{position:fixed; z-index:5001; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%; pointer-events:none; border:2px solid #a5b4fc; animation:tburst .9s var(--ease) forwards}
@keyframes tburst{from{transform:scale(.4); opacity:1}to{transform:scale(9); opacity:0}}
.tsweep{position:fixed; inset:0; z-index:4999; pointer-events:none}
::view-transition-old(root),::view-transition-new(root){animation:none; mix-blend-mode:normal}
::view-transition-new(root){z-index:2}

/* ---------- loader ---------- */
#loader{position:fixed; inset:0; z-index:6000; display:grid; place-items:center; background:var(--void); transition:clip-path 1s cubic-bezier(.77,0,.18,1); clip-path:inset(0 0 0 0); animation:ldFail .01s 3.5s forwards}
#loader.done{clip-path:inset(0 0 100% 0)}
html:not(.loading) #loader:not(.done){display:none}
@keyframes ldFail{to{clip-path:inset(0 0 100% 0); visibility:hidden}}
.ld{display:grid; justify-items:center; gap:16px}
.ld svg{width:74px; height:74px}
.ld .ring{fill:none; stroke:url(#gD); stroke-width:3; stroke-dasharray:76; stroke-dashoffset:76; animation:draw 1s var(--ease) forwards}
.ld .hand{stroke:var(--text); stroke-width:2.6; stroke-linecap:round; fill:none; transform-origin:15px 15px; animation:spin 1.2s cubic-bezier(.5,0,.5,1) infinite}
.ld b{font:700 22px var(--display); letter-spacing:-.02em; color:var(--text); opacity:0; animation:fadeUp .7s .2s var(--ease) forwards}
.ld i{display:block; width:160px; height:2px; border-radius:2px; background:var(--line2); overflow:hidden; position:relative}
.ld i::after{content:""; position:absolute; inset:0; background:var(--grad); transform-origin:left; animation:ldBar 1s var(--ease) forwards}
@keyframes ldBar{from{transform:scaleX(0)}}
html.loading .hero *{animation-play-state:paused !important}

/* ---------- brand clock hand ---------- */
.brand svg path{transform-origin:15px 15px; animation:spin 12s linear infinite}

/* ---------- nav indicator ---------- */
.links{position:relative}
.navind{position:absolute; left:0; bottom:0; height:2px; width:0; border-radius:2px; background:var(--grad); box-shadow:0 0 10px rgba(34,211,238,.8); opacity:0; transition:left .45s var(--ease), width .45s var(--ease), opacity .3s; pointer-events:none}
.links a.cur{color:var(--text)}
.links.open .navind{display:none}

/* ---------- split-word headings ---------- */
.w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.12em; margin-bottom:-.12em}
.wi{display:inline-block; transform:translateY(105%) rotate(7deg); opacity:0; filter:blur(6px); transition:transform 1s var(--ease), opacity .8s, filter .8s; transition-delay:calc(var(--i) * 60ms)}
.split.in .wi{transform:none; opacity:1; filter:none}

/* ---------- hero swoosh ---------- */
.hero h1 .ln3{display:inline-block; position:relative; padding-bottom:.28em}
.swoosh{position:absolute; left:0; bottom:.02em; width:100%; height:.24em; overflow:visible}
.swoosh path{fill:none; stroke:url(#gH); stroke-width:6; stroke-linecap:round; stroke-dasharray:330; stroke-dashoffset:330; animation:draw 1.3s 1.05s var(--ease) forwards; filter:drop-shadow(0 0 6px rgba(99,102,241,.7))}

/* ---------- second marquee row ---------- */
.mqt2{margin-top:12px; animation-direction:reverse; animation-duration:58s}
.mqt2 span{font-weight:600}
.mqt2 span i{border-radius:3px; transform:rotate(45deg)}

/* ---------- big scrolling type ---------- */
.bigtype{position:relative; padding:40px 0 60px; overflow:hidden; pointer-events:none}
.bt{white-space:nowrap; font:700 clamp(56px,10vw,150px)/1.02 var(--display); letter-spacing:-.04em; will-change:transform}
.bt1{color:transparent; -webkit-text-stroke:1.5px rgba(129,140,248,.45)}
.bt2{margin-top:6px}
.bt2 span{background:var(--grad); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:gshift 7s linear infinite}
[data-theme="light"] .bt2 span{background-image:linear-gradient(110deg,#0891b2,#4f46e5,#9333ea,#4f46e5,#0891b2)}

/* ---------- click burst ---------- */
.burst{position:fixed; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; pointer-events:none; z-index:2600; background:var(--c); box-shadow:0 0 8px var(--c); transform:rotate(var(--a)) translateX(0); animation:burst .7s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes burst{to{transform:rotate(var(--a)) translateX(var(--d,44px)) scale(0); opacity:0}}

/* ---------- velocity skew ---------- */
.bento,.plans,.facts{transform:skewY(var(--skew,0deg)); transition:transform .25s ease-out}

/* ---------- extra hover / idle motion ---------- */
.plan{isolation:isolate}
.plan .shine{position:absolute; inset:0; z-index:2 !important; pointer-events:none; border-radius:inherit; overflow:hidden}
.plan .shine::before{content:""; position:absolute; top:-50%; bottom:-50%; width:40%; left:-70%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent); transform:skewX(-18deg); transition:left .9s var(--ease)}
.plan:hover .shine::before{left:140%}
.cap h3 .ic,.node .ic,.tab .ic{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.cap:hover h3 .ic,.node:hover .ic,.tab:hover .ic{transform:rotate(-10deg) scale(1.12)}
.hproof li{animation:fadeUp .8s var(--ease) both}
.hproof li:nth-child(2){animation-delay:.85s}.hproof li:nth-child(3){animation-delay:.95s}
.facts .fact .n{display:inline-block; transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.fact:hover .n{transform:scale(1.12) translateZ(20px)}
.faq summary{transition:color .3s, padding-left .35s var(--ease)}
.faq details:hover summary{padding-left:6px}
.sec .shead .eyebrow{animation:eyeIn 1s var(--ease) both}
@keyframes eyeIn{from{letter-spacing:.5em; opacity:0}}

@media (max-width:980px){
  .theme{margin-left:auto}
  .burger{margin-left:10px}
  .navind{display:none}
}
@media (prefers-reduced-motion:reduce){
  .wi{transform:none; opacity:1; filter:none}
  .swoosh path{stroke-dashoffset:0}
  #loader{display:none}
  .bento,.plans,.facts{transform:none}
}


/* =====================================================
   V5 — CSS COMPONENT LIBRARY
   ===================================================== */
@property --f{syntax:"<percentage>"; inherits:true; initial-value:0%}
@property --tp{syntax:"<percentage>"; inherits:true; initial-value:100%}
[data-theme="light"] :is(.wbox,.lid,.cmp .after,.fl-b){--text:#f4f6fd; --text2:#cdd4e4; --muted:#97a3bc; --faint:#6b778f; --line:rgba(148,163,184,.13); --line2:rgba(148,163,184,.24); color:var(--text)}

/* ---------- widget gallery ---------- */
.wgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.wc{padding:18px; display:flex; flex-direction:column}
.wbox{position:relative; height:200px; border-radius:16px; overflow:hidden; display:grid; place-items:center; background:radial-gradient(120% 100% at 50% 0%,rgba(99,102,241,.22),transparent 60%),#080d1f; border:1px solid rgba(148,163,184,.14)}
.wbox::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image:linear-gradient(rgba(148,163,184,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.06) 1px,transparent 1px); background-size:22px 22px}
.wbox>*{position:relative}
.wc h3{font-size:17px; margin:16px 0 4px; display:flex; align-items:center; gap:8px}
.wc h3::before{content:""; width:8px; height:8px; border-radius:2px; background:var(--grad); transform:rotate(45deg); box-shadow:0 0 8px rgba(99,102,241,.7)}
.wc p{font-size:13.5px; color:var(--muted)}
.wcap{position:absolute; left:12px; bottom:10px; font:600 10.5px var(--mono); color:var(--faint); letter-spacing:.04em}
.wcap.r{left:auto; right:12px}

/* flip clock */
.fclock{display:flex; align-items:center; gap:6px; perspective:500px}
.fd{position:relative; width:38px; height:56px; border-radius:9px; display:grid; place-items:center; font:700 32px var(--mono); color:#fff; background:linear-gradient(180deg,#232c5c 0 50%,#171d42 50% 100%); box-shadow:0 10px 20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12); transform-style:preserve-3d}
.fd::after{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(0,0,0,.65)}
.fd.flip{animation:fdflip .55s cubic-bezier(.4,0,.2,1)}
@keyframes fdflip{0%{transform:rotateX(0)}45%{transform:rotateX(-90deg); filter:brightness(1.8)}100%{transform:rotateX(0)}}
.fcol{font:700 28px var(--mono); color:#818cf8; animation:pulse 1s steps(1) infinite}
.fgrp{display:flex; gap:4px}

/* liquid gauge */
.liq{position:relative; width:136px; height:136px; border-radius:50%; overflow:hidden; background:#0a1027; border:2px solid rgba(99,102,241,.6); box-shadow:0 0 34px rgba(99,102,241,.45), inset 0 0 20px rgba(0,0,0,.6); transition:--f 2.4s cubic-bezier(.2,.8,.2,1)}
.wc.in .liq{--f:84%}
.liq::before,.liq::after{content:""; position:absolute; left:50%; width:280px; height:280px; margin-left:-140px; top:calc(100% - var(--f) - 6px); border-radius:41%; animation:spin 7s linear infinite}
.liq::before{background:linear-gradient(180deg,rgba(34,211,238,.95),rgba(99,102,241,.95))}
.liq::after{border-radius:38%; top:calc(100% - var(--f) - 12px); background:rgba(165,243,252,.25); animation-duration:10s; animation-direction:reverse}
.liq b{position:absolute; inset:0; z-index:2; display:grid; place-items:center; align-content:center; font:700 30px var(--display); color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.5)}
.liq b small{font:600 10px "Inter",sans-serif; letter-spacing:.12em; text-transform:uppercase; opacity:.85}
.bubble{position:absolute; z-index:1; bottom:-10px; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.55); animation:bub 3.4s ease-in infinite}
@keyframes bub{to{transform:translateY(-110px); opacity:0}}

/* isometric bars */
.iso{display:flex; align-items:flex-end; gap:24px; height:150px; padding:0 14px 26px 0; transform:translateY(8px)}
.ib{position:relative; width:26px; height:0; background:linear-gradient(180deg,#6366f1,#3730a3); transition:height 1.2s cubic-bezier(.2,.8,.2,1); transition-delay:var(--dl)}
.wc.in .ib{height:var(--h)}
.ib::before{content:""; position:absolute; top:0; right:-12px; width:12px; height:100%; background:linear-gradient(180deg,#312e81,#1e1b4b); transform-origin:left top; transform:skewY(-45deg)}
.ib::after{content:""; position:absolute; top:-12px; left:0; width:100%; height:12px; background:linear-gradient(90deg,#a5f3fc,#a5b4fc); transform-origin:left bottom; transform:skewX(-45deg)}
.ib.hi{background:linear-gradient(180deg,#22d3ee,#0e7490)} .ib.hi::before{background:linear-gradient(180deg,#155e75,#083344)}
.ib em{position:absolute; left:50%; bottom:-22px; transform:translateX(-50%); font:600 10.5px var(--mono); font-style:normal; color:var(--faint)}
.ib span{position:absolute; left:50%; top:-30px; transform:translateX(-35%); white-space:nowrap; font:600 9.5px var(--mono); color:#e0e7ff; opacity:0; transition:opacity .4s; transition-delay:calc(var(--dl) + 1s)}
.wc.in .ib span{opacity:1}

/* sonar */
.sonar{position:relative; width:156px; height:156px; border-radius:50%; overflow:hidden; border:1px solid rgba(34,211,238,.45);
  background:radial-gradient(circle,transparent 0 31%,rgba(34,211,238,.22) 32% 32.8%,transparent 33.5% 63%,rgba(34,211,238,.22) 64% 64.8%,transparent 65.5%),
  linear-gradient(rgba(34,211,238,.15),rgba(34,211,238,.15)) 50% 0/1px 100% no-repeat, linear-gradient(rgba(34,211,238,.15),rgba(34,211,238,.15)) 0 50%/100% 1px no-repeat, #04121c; box-shadow:0 0 30px rgba(34,211,238,.25)}
.sonar::before{content:""; position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg,rgba(34,211,238,.55),rgba(34,211,238,.08) 18%,transparent 26%); animation:spin 3s linear infinite}
.sonar i{position:absolute; width:8px; height:8px; margin:-4px; border-radius:50%; background:#4ade80; box-shadow:0 0 10px #4ade80; animation:blip 3s linear infinite; animation-delay:var(--dl)}
.sonar i.off{background:#94a3b8; box-shadow:none}
@keyframes blip{0%,100%{transform:scale(.7); opacity:.45}4%{transform:scale(1.7); opacity:1}25%{transform:scale(1); opacity:.9}}

/* toast stack */
.toasts{position:relative; width:86%; height:150px}
.toast{position:absolute; left:0; right:0; top:14px; display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:13px; background:linear-gradient(160deg,#1c2552,#0d1330); border:1px solid rgba(148,163,184,.22); box-shadow:0 14px 30px rgba(0,0,0,.5); transition:transform .7s cubic-bezier(.2,.8,.2,1), opacity .6s; transform:translateY(-40px) scale(.9); opacity:0}
.toast .ti{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none; background:var(--c); box-shadow:0 0 14px var(--c)}
.toast .ti svg{width:15px; height:15px; color:#fff}
.toast b{display:block; font-size:12.5px; color:#fff} .toast small{display:block; font-size:11px; color:#97a3bc}
.toast time{margin-left:auto; font:500 10px var(--mono); color:#6b778f}
.toast.p0{transform:none; opacity:1; z-index:3}
.toast.p1{transform:translateY(22px) scale(.94); opacity:.65; z-index:2}
.toast.p2{transform:translateY(42px) scale(.88); opacity:.3; z-index:1}

/* shift clock */
.sclock{position:relative; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#1c2554,#070b1c 70%); box-shadow:0 0 34px rgba(99,102,241,.4), inset 0 0 20px rgba(34,211,238,.12)}
.sclock .arc{position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 270deg,#22d3ee,#6366f1 120deg,#a855f7 240deg,rgba(148,163,184,.12) 240deg); -webkit-mask:radial-gradient(circle,transparent 63%,#000 64% 71%,transparent 72%); mask:radial-gradient(circle,transparent 63%,#000 64% 71%,transparent 72%)}
.sclock .tk{position:absolute; inset:14px; border-radius:50%; background:repeating-conic-gradient(rgba(203,213,225,.7) 0 1.2deg,transparent 1.2deg 30deg); -webkit-mask:radial-gradient(circle,transparent 86%,#000 87%); mask:radial-gradient(circle,transparent 86%,#000 87%)}
.sclock i{position:absolute; left:50%; bottom:50%; transform-origin:50% 100%; border-radius:3px}
.sclock .h{width:4px; height:32px; margin-left:-2px; background:#fff}
.sclock .m{width:3px; height:46px; margin-left:-1.5px; background:#a5b4fc}
.sclock .s{width:1.5px; height:52px; margin-left:-.75px; background:#22d3ee; box-shadow:0 0 6px #22d3ee}
.sclock::after{content:""; position:absolute; left:50%; top:50%; width:10px; height:10px; margin:-5px; border-radius:50%; background:#fff; box-shadow:0 0 10px #22d3ee}
.sclock em{position:absolute; font:600 9.5px var(--mono); font-style:normal; color:#cffafe}

/* equalizer */
.eqw{display:grid; gap:14px; justify-items:center}
.eq{display:flex; align-items:flex-end; gap:4px; height:80px}
.eq i{width:7px; height:100%; border-radius:4px; background:linear-gradient(180deg,#a855f7,#6366f1 50%,#22d3ee); transform-origin:bottom; animation:eqb 1.1s ease-in-out infinite alternate; animation-delay:var(--dl)}
@keyframes eqb{from{transform:scaleY(.15)}to{transform:scaleY(var(--m,1))}}
.eqc{display:flex; gap:6px}
.eqc span{font:600 10.5px var(--mono); padding:5px 8px; border-radius:8px; background:rgba(148,163,184,.08); border:1px solid rgba(148,163,184,.18); color:#cdd4e4}
.eqc span b{color:#a5f3fc; font-weight:600}

/* offline sync */
.sync{position:relative; width:88%; height:130px}
.sync .dv{position:absolute; top:34px; width:62px; height:50px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(160deg,#1c2552,#0d1330); border:1px solid rgba(148,163,184,.25)}
.sync .dv svg{width:26px; height:26px; color:#a5b4fc}
.sync .dv.l{left:0} .sync .dv.r{right:0}
.sync .ln{position:absolute; left:68px; right:68px; top:58px; height:2px; background:repeating-linear-gradient(90deg,#fb7185 0 6px,transparent 6px 12px); animation:lnState 7s steps(1) infinite}
@keyframes lnState{0%{background:repeating-linear-gradient(90deg,#fb7185 0 6px,transparent 6px 12px)}48%{background:linear-gradient(90deg,#22d3ee,#a855f7); box-shadow:0 0 10px rgba(34,211,238,.8)}}
.sync .pk{position:absolute; top:52px; left:70px; width:12px; height:12px; border-radius:3px; background:var(--grad); box-shadow:0 0 8px rgba(99,102,241,.8); opacity:0; animation:pk 7s cubic-bezier(.5,0,.3,1) infinite; animation-delay:calc(var(--i) * .12s)}
@keyframes pk{0%{opacity:0; transform:translate(0,calc(var(--i) * -14px + 30px))}8%{opacity:1}44%{opacity:1; transform:translate(0,calc(var(--i) * -14px + 30px))}
  62%{transform:translate(calc(var(--w,200px)),-4px); opacity:1}66%,100%{transform:translate(calc(var(--w,200px)),-4px); opacity:0}}
.sync .st{position:absolute; left:50%; bottom:0; transform:translateX(-50%); height:24px; overflow:hidden; font:600 11px var(--mono); border-radius:999px; border:1px solid rgba(148,163,184,.22); background:rgba(5,8,20,.85); padding:0 12px; min-width:178px; text-align:center}
.sync .st span{display:block; line-height:24px; animation:stSw 7s steps(1) infinite}
.sync .st span b{display:block; font-weight:600} .sync .st b.o{color:#fda4af} .sync .st b.n{color:#86efac}
@keyframes stSw{0%{transform:translateY(0)}48%{transform:translateY(-24px)}}

/* TOTP */
.totp{display:grid; justify-items:center; gap:16px}
.tring{position:relative; width:70px; height:70px; border-radius:50%; background:conic-gradient(#22d3ee var(--tp),rgba(148,163,184,.15) 0); -webkit-mask:radial-gradient(circle,transparent 58%,#000 59%); mask:radial-gradient(circle,transparent 58%,#000 59%); animation:tring 30s linear infinite}
@keyframes tring{from{--tp:100%}to{--tp:0%}}
.trw{position:relative; display:grid; place-items:center}
.trw b{position:absolute; font:700 18px var(--mono); color:#fff}
.tcode{display:flex; gap:6px; perspective:400px}
.tcode span{width:30px; height:40px; border-radius:8px; display:grid; place-items:center; font:700 19px var(--mono); color:#e0e7ff; background:rgba(5,8,20,.85); border:1px solid rgba(99,102,241,.4)}
.tcode span:nth-child(3){margin-right:8px}
.tcode span.flip{animation:fdflip .5s var(--ease)}

/* ---------- 3D laptop + flip cards ---------- */
.agent{display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center}
.lap{position:relative; perspective:1800px; padding-top:20px}
.lid{position:relative; width:100%; aspect-ratio:16/10; border-radius:18px 18px 4px 4px; padding:12px; background:#151b36; border:1px solid rgba(148,163,184,.3); transform-origin:50% 100%; transform:rotateX(-86deg); transition:transform 1.8s cubic-bezier(.2,.8,.2,1); box-shadow:0 -10px 60px -10px rgba(99,102,241,.5)}
.lap.open .lid{transform:rotateX(-4deg)}
.scr{position:relative; height:100%; border-radius:8px; overflow:hidden; background:linear-gradient(160deg,#0f1736,#060918); opacity:0; transition:opacity .8s 1.2s}
.lap.open .scr{opacity:1}
.scr::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,255,255,.08) 0 30%,transparent 31%); pointer-events:none}
.scr .bar{display:flex; gap:6px; padding:8px 10px; border-bottom:1px solid var(--line)} .scr .bar i{width:8px; height:8px; border-radius:50%; background:#334155}
.scr .wnd{position:absolute; left:6%; top:16%; width:58%; padding:10px; border-radius:8px; background:rgba(148,163,184,.06); border:1px solid var(--line)}
.scr .wnd>b{display:block; font:600 10px "Inter",sans-serif; color:#a5b4fc; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px}
.scr .wnd .tl div{height:7px}
.scr .tmenu{position:absolute; right:4%; bottom:12%; width:44%; transform:translateY(20px); opacity:0; transition:all .7s 2s var(--ease)}
.lap.open .tmenu{transform:none; opacity:1}
.scr .tmenu.tray{width:44%; max-width:none; font-size:10px}
.scr .tmenu.tray div{padding:5px 9px}
.scr .mfb{position:absolute; left:5%; bottom:6%; transform:scale(.72); transform-origin:left bottom; opacity:0; transition:opacity .7s 1.7s}
.lap.open .mfb{opacity:1}
.scr .mfb .fbar{animation:none}
.base{position:relative; height:16px; margin:0 -7%; border-radius:2px 2px 18px 18px; background:linear-gradient(180deg,#39426b,#141a33); box-shadow:0 30px 50px -10px rgba(0,0,0,.7)}
.base::before{content:""; position:absolute; left:50%; top:0; width:18%; height:6px; margin-left:-9%; border-radius:0 0 8px 8px; background:#0d1228}
.lap::after{content:""; position:absolute; left:5%; right:5%; bottom:-30px; height:40px; border-radius:50%; background:radial-gradient(ellipse,rgba(99,102,241,.45),transparent 70%); filter:blur(14px)}
.osrow{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.osrow span{font-size:12.5px; padding:6px 12px; border-radius:999px; border:1px solid var(--line2); color:var(--text2); background:rgba(148,163,184,.05)}
.flips{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.fl{perspective:1000px; height:178px; cursor:pointer; outline:none}
.fl-in{position:relative; height:100%; transform-style:preserve-3d; transition:transform .9s cubic-bezier(.4,.2,.2,1)}
.fl:hover .fl-in,.fl:focus-visible .fl-in,.fl.on .fl-in{transform:rotateY(180deg)}
.fl:focus-visible .fl-f{outline:2px solid var(--cyan)}
.fl-f,.fl-b{position:absolute; inset:0; border-radius:18px; padding:18px; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; flex-direction:column}
.fl-f{justify-content:space-between}
.fl-f .ic{width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.38); color:#a5b4fc}
.fl-f .ic svg{width:21px; height:21px}
.fl-f h4{font-size:17px} .fl-f small{font-size:12px; color:var(--faint); display:flex; align-items:center; gap:6px}
.fl-f small::after{content:"↻"; font-size:13px}
.fl-b{transform:rotateY(180deg); justify-content:center; gap:8px; background:linear-gradient(150deg,#4f46e5,#7c3aed 60%,#0e7490); box-shadow:0 20px 40px -14px rgba(79,70,229,.7); overflow:hidden}
.fl-b::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 0,rgba(255,255,255,.25),transparent 50%)}
.fl-b h4{position:relative; font-size:15px; color:#fff} .fl-b p{position:relative; font-size:13px; color:#e0e7ff; line-height:1.5}

/* ---------- compare slider ---------- */
.cmp{position:relative; height:360px; border-radius:24px; overflow:hidden; --pos:50%; user-select:none; border:1px solid var(--line2); box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.cmp .cside{position:absolute; inset:0; padding:30px 6%}
.cmp .before{background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(30,41,99,.08) 31px 32px),#eef1f8; color:#1e293b}
.cmp .after{clip-path:inset(0 0 0 var(--pos)); background:radial-gradient(100% 80% at 80% 0,rgba(99,102,241,.3),transparent 60%),#070b1c}
.cmp .lbl{display:inline-flex; align-items:center; gap:8px; font:700 12px "Inter",sans-serif; letter-spacing:.12em; text-transform:uppercase; padding:6px 12px; border-radius:999px}
.cmp .before .lbl{background:rgba(251,113,133,.14); color:#be123c}
.cmp .after .lbl{position:absolute; right:6%; background:rgba(34,211,238,.14); color:#67e8f9}
.cmp h4{font-size:22px; margin:14px 0 18px}
.cmp .after h4{color:#fff}
.cmp .cwk{display:grid; grid-template-columns:64px repeat(5,1fr); gap:10px; max-width:none; font:600 12px var(--mono)}
.cmp .after .wk{margin-left:auto}
.cmp .cwk span{display:flex; align-items:center}
.cmp .before .cwk i{height:34px; border-radius:6px; border:1.5px dashed #94a3b8; display:grid; place-items:center; font-style:normal; color:#94a3b8}
.cmp .before .cwk i.f{border-style:solid; background:#dbe2ef; color:#334155}
.cmp .after .cwk span{color:#6b778f}
.cmp .after .cwk i{height:34px; border-radius:6px; display:grid; place-items:center; font-style:normal; color:#fff; background:linear-gradient(135deg,rgba(34,211,238,.55),rgba(99,102,241,.6))}
.cmp .notes{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.cmp .before .notes span{font-size:12.5px; padding:8px 12px; border-radius:10px; background:#fff1f2; border:1px solid #fecdd3; color:#9f1239; transform:rotate(var(--r,0deg)); box-shadow:0 6px 14px rgba(15,23,42,.08)}

.cmp .after .notes span{font-size:12.5px; padding:8px 12px; border-radius:10px; background:rgba(74,222,128,.1); border:1px solid rgba(74,222,128,.35); color:#bbf7d0}
.cmp .hd{position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px; background:linear-gradient(#22d3ee,#a855f7); box-shadow:0 0 16px rgba(34,211,238,.9); pointer-events:none; z-index:3}
.cmp .hd b{position:absolute; top:50%; left:50%; width:52px; height:52px; margin:-26px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#6366f1,#7c3aed); box-shadow:0 0 0 6px rgba(99,102,241,.25), 0 10px 30px rgba(0,0,0,.5); color:#fff}
.cmp .hd b svg{width:22px; height:22px}
.cmp .hd b::before{content:""; position:absolute; inset:-10px; border-radius:50%; border:1px solid rgba(165,180,252,.6); animation:ripple 2s ease-out infinite}
.cmp input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:4}
.cmp input:focus-visible ~ .hd b{outline:3px solid #22d3ee; outline-offset:4px}
.cmpnote{margin-top:12px; text-align:center; font-size:12.5px; color:var(--faint)}

@media (max-width:1100px){ .wgrid{grid-template-columns:repeat(2,1fr)} .agent{grid-template-columns:1fr} }
@media (max-width:640px){
  .wgrid{grid-template-columns:1fr}
  .flips{grid-template-columns:1fr 1fr; gap:10px} .fl{height:190px} .fl-f,.fl-b{padding:14px} .fl-b p{font-size:12px}
  .cmp{height:430px} .cmp .cside{padding:22px 18px} .cmp .after .lbl{right:18px} .cmp h4{font-size:18px} .cmp .cwk{grid-template-columns:36px repeat(5,1fr); gap:4px; font-size:9.5px}
  .scr .tmenu{display:none}
}
@media (prefers-reduced-motion:reduce){ .lid{transform:rotateX(-4deg)} .scr,.scr .tmenu,.scr .mfb{opacity:1; transform:none} .ib{height:var(--h)} .liq{--f:84%} }


/* =====================================================
   V6 — FAQ + GET STARTED
   ===================================================== */
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* FAQ toolbar */
.fq-bar{display:grid; gap:16px; justify-items:center; margin:-18px 0 34px}
.fq-search{position:relative; display:flex; align-items:center; gap:12px; width:min(620px,100%); padding:0 16px; height:56px; border-radius:16px; background:linear-gradient(160deg,rgba(24,33,64,.8),rgba(7,10,24,.9)); border:1px solid var(--line2); transition:border-color .3s, box-shadow .3s}
.fq-search:focus-within{border-color:rgba(99,102,241,.6); box-shadow:0 0 0 4px rgba(99,102,241,.15), 0 20px 40px -20px rgba(79,70,229,.6)}
.fq-search svg{width:20px; height:20px; color:var(--muted); flex:none}
.fq-search input{flex:1; min-width:0; height:100%; border:0; outline:0; background:none; color:var(--text); font:500 15.5px "Inter",sans-serif}
.fq-search input::placeholder{color:var(--faint)}
.fq-search kbd{font:600 12px var(--mono); padding:3px 8px; border-radius:6px; border:1px solid var(--line2); color:var(--faint)}
.fq-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:8px}
.fq-chip{display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; border:1px solid var(--line2); background:rgba(148,163,184,.05); color:var(--text2); font:600 13.5px "Inter",sans-serif; cursor:pointer; transition:all .3s var(--ease)}
.fq-chip svg{width:15px; height:15px; color:var(--muted)}
.fq-chip em{font:600 11px var(--mono); font-style:normal; padding:1px 7px; border-radius:999px; background:rgba(148,163,184,.12); color:var(--muted)}
.fq-chip:hover{transform:translateY(-2px); border-color:rgba(99,102,241,.45)}
.fq-chip[aria-pressed="true"]{background:linear-gradient(135deg,#6366f1,#4f46e5 55%,#7c3aed); border-color:transparent; color:#fff; box-shadow:0 10px 24px -8px rgba(79,70,229,.7)}
.fq-chip[aria-pressed="true"] svg,.fq-chip[aria-pressed="true"] em{color:#fff} .fq-chip[aria-pressed="true"] em{background:rgba(255,255,255,.2)}
/* FAQ layout */
.fq-grid{display:grid; grid-template-columns:1fr 340px; gap:28px; align-items:start}
.fq-list{display:grid; gap:12px}
.fq-item{position:relative; border-radius:18px; background:linear-gradient(160deg,rgba(24,33,64,.7),rgba(7,10,24,.85)); border:1px solid var(--line); transition:border-color .35s, box-shadow .35s, transform .35s var(--ease); animation:fqIn .5s var(--ease) both}
@keyframes fqIn{from{opacity:0; transform:translateY(12px)}}
.fq-item::before{content:""; position:absolute; left:0; top:18px; bottom:18px; width:3px; border-radius:3px; background:var(--grad); transform:scaleY(0); transition:transform .45s var(--ease)}
.fq-item:hover{transform:translateX(4px); border-color:var(--line2)}
.fq-item[open]{border-color:rgba(99,102,241,.5); box-shadow:0 24px 50px -28px rgba(79,70,229,.7)}
.fq-item[open]::before{transform:scaleY(1)}
.fq-item summary{list-style:none; cursor:pointer; display:grid; grid-template-columns:44px 1fr auto 30px; gap:14px; align-items:center; padding:18px 20px 18px 18px; font:600 16.5px "Inter",sans-serif; color:var(--text)}
.fq-item summary::-webkit-details-marker{display:none}
.fq-item summary:focus-visible{outline:2px solid var(--cyan); outline-offset:-2px; border-radius:18px}
.fq-n{width:44px; height:44px; border-radius:13px; display:grid; place-items:center; font:700 13px var(--mono); color:var(--muted); background:rgba(148,163,184,.07); border:1px solid var(--line2); transition:all .4s var(--ease)}
.fq-item[open] .fq-n{background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 0 22px rgba(99,102,241,.6); transform:rotate(-8deg)}
.fq-tag{font:600 10.5px "Inter",sans-serif; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:999px; color:#a5b4fc; background:rgba(99,102,241,.1); border:1px solid rgba(99,102,241,.25)}
.fq-pm{position:relative; width:30px; height:30px; border-radius:9px; background:rgba(99,102,241,.14); transition:background .3s, transform .5s var(--ease)}
.fq-pm i{position:absolute; left:50%; top:50%; width:12px; height:2px; margin:-1px 0 0 -6px; border-radius:2px; background:#c7d2fe; transition:transform .45s var(--ease)}
.fq-pm i+i{transform:rotate(90deg)}
.fq-item[open] .fq-pm{background:var(--grad); transform:rotate(180deg)}
.fq-item[open] .fq-pm i{background:#fff} .fq-item[open] .fq-pm i+i{transform:rotate(0)}
.fq-a{overflow:hidden}
.fq-ai{padding:0 26px 22px 76px}
.fq-ai p{color:var(--muted); font-size:15.5px; line-height:1.7}
.fq-item mark{background:rgba(34,211,238,.22); color:inherit; border-radius:3px; padding:0 2px}
.fq-empty{display:grid; justify-items:center; gap:6px; padding:44px 20px; border-radius:18px; border:1px dashed var(--line2); text-align:center; color:var(--muted)}
.fq-empty svg{width:36px; height:36px; color:var(--faint); margin-bottom:6px}
.fq-empty b{color:var(--text)} .fq-empty a{color:#a5b4fc; text-decoration:underline}
.fq-count{font-size:12.5px; color:var(--faint); text-align:right}
/* FAQ side */
.fq-side{position:sticky; top:96px; display:grid; gap:16px}
.fq-help{padding:24px}
.fq-help h3{font-size:21px; margin:18px 0 8px} .fq-help p{font-size:14.5px; color:var(--muted)}
.fq-help .btn{width:100%; margin-top:18px}
.fq-link{display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:14px; font-weight:600; color:#a5b4fc}
.fq-link svg{width:14px; height:14px; transition:transform .3s var(--ease)} .fq-link:hover svg{transform:translate(2px,-2px)}
.fq-chat{display:grid; gap:8px; padding:14px; border-radius:14px; background:#080d1f; border:1px solid rgba(148,163,184,.14)}
.bub{max-width:86%; padding:9px 12px; border-radius:14px; font-size:12.5px; line-height:1.45; opacity:0; animation:bubIn 9s var(--ease) infinite}
.bub.l{justify-self:start; background:rgba(148,163,184,.12); color:#e2e8f0; border-bottom-left-radius:4px}
.bub.r{justify-self:end; background:linear-gradient(135deg,#6366f1,#7c3aed); color:#fff; border-bottom-right-radius:4px; animation-delay:1.2s}
.bub.typing{display:flex; gap:4px; padding:11px 13px; animation-delay:2.4s}
.bub.typing i{width:6px; height:6px; border-radius:50%; background:#94a3b8; animation:dots 1s ease-in-out infinite}
.bub.typing i:nth-child(2){animation-delay:.15s}.bub.typing i:nth-child(3){animation-delay:.3s}
@keyframes bubIn{0%{opacity:0; transform:translateY(8px) scale(.96)}6%,88%{opacity:1; transform:none}96%,100%{opacity:0}}
@keyframes dots{50%{transform:translateY(-4px); opacity:.5}}
.fq-facts{display:grid; grid-template-columns:1fr 1fr; gap:1px; padding:0; overflow:hidden; background:var(--line)}
.fq-facts div{padding:16px; background:linear-gradient(160deg,rgba(24,33,64,.95),rgba(7,10,24,.98))}
.fq-facts b{display:block; font:700 22px var(--display)} .fq-facts span{font-size:12.5px; color:var(--muted)}

/* GET STARTED */
.gs{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding:64px 56px; border-radius:32px; overflow:hidden; isolation:isolate}
.gs-bg{position:absolute; inset:0; z-index:-1; pointer-events:none}
.gs-grid{position:absolute; left:-20%; right:-20%; bottom:-30%; height:80%; transform:perspective(600px) rotateX(65deg); transform-origin:50% 100%;
  background-image:linear-gradient(rgba(99,102,241,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.25) 1px,transparent 1px); background-size:48px 48px; animation:floor 2.6s linear infinite;
  -webkit-mask:linear-gradient(to top,#000 10%,transparent 80%); mask:linear-gradient(to top,#000 10%,transparent 80%)}
.gs-orb{position:absolute; border-radius:50%; filter:blur(70px); opacity:.6; animation:drift 14s ease-in-out infinite alternate}
.gs-orb.o1{width:380px; height:380px; right:-80px; top:-120px; background:radial-gradient(circle,rgba(99,102,241,.8),transparent 65%)}
.gs-orb.o2{width:320px; height:320px; left:-100px; bottom:-140px; background:radial-gradient(circle,rgba(34,211,238,.55),transparent 65%); animation-duration:18s}
.gs .spark{position:absolute; width:4px; height:4px; border-radius:50%; background:#a5f3fc; box-shadow:0 0 10px 2px rgba(34,211,238,.8); animation:sparkUp 6s linear infinite; opacity:0}
.gs .h2{font-size:clamp(32px,4.4vw,56px)}
.gs-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.btn--lg{padding:17px 28px; font-size:16px; border-radius:14px}
.gs-trust{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px}
.gs-trust li{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text2)}
.gs-trust svg{width:16px; height:16px; padding:2px; border-radius:50%; color:#04260f; background:#4ade80}
.gs-stage{position:relative; display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; perspective:1200px}
.gs-ring{position:relative; width:120px; height:120px; display:grid; place-items:center; align-content:center}
.gs-ring svg{position:absolute; inset:0; transform:rotate(-90deg)}
.gs-ring circle{fill:none; stroke-width:7} .gs-ring .t{stroke:rgba(148,163,184,.15)}
.gs-ring .f{stroke:url(#gD); stroke-linecap:round; stroke-dasharray:326.7; stroke-dashoffset:217.8; transition:stroke-dashoffset .9s var(--ease); filter:drop-shadow(0 0 6px rgba(99,102,241,.8))}
.gs-ring b{font:700 34px/1 var(--display)} .gs-ring small{font:600 11px var(--mono); color:var(--faint)}
.gs-ring::after{content:""; position:absolute; inset:-12px; border-radius:50%; border:1px dashed rgba(148,163,184,.25); animation:spin 20s linear infinite}
.gs-stack{display:grid; gap:12px; transform-style:preserve-3d; transform:rotateY(-14deg) rotateX(6deg)}
.gs-card{display:grid; grid-template-columns:46px 1fr auto; gap:14px; align-items:center; padding:16px 18px; border-radius:18px; background:linear-gradient(160deg,#18214a,#0a0f26); border:1px solid rgba(148,163,184,.18); color:#f4f6fd;
  transform:translateZ(0); opacity:.55; transition:transform .7s var(--ease), opacity .5s, border-color .5s, box-shadow .5s}
.gs-card.on{opacity:1; transform:translateZ(40px); border-color:rgba(99,102,241,.6); box-shadow:0 30px 60px -20px rgba(0,0,0,.8), 0 0 40px -10px rgba(99,102,241,.7)}
.gs-card.done{opacity:.85}
.gs-ic{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:rgba(99,102,241,.14); border:1px solid rgba(99,102,241,.35); color:#a5b4fc; transition:all .5s}
.gs-ic svg{width:21px; height:21px}
.gs-card.on .gs-ic{background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 0 20px rgba(99,102,241,.7)}
.gs-card small{display:block; font:600 10.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#22d3ee}
.gs-card b{display:block; font:700 16px var(--display)} .gs-card div>span{display:block; font-size:12.5px; color:#97a3bc}
.gs-st{font:600 11px var(--mono); font-style:normal; padding:4px 9px; border-radius:999px; color:#97a3bc; background:rgba(148,163,184,.1); transition:all .4s}
.gs-card.on .gs-st{color:#a5f3fc; background:rgba(34,211,238,.14)}
.gs-card.on .gs-st::before{content:""; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:#22d3ee; box-shadow:0 0 6px #22d3ee; animation:pulse 1s infinite}
.gs-card.done .gs-st{color:#86efac; background:rgba(74,222,128,.12)}

/* light theme */
[data-theme="light"] .fq-search{background:#fff}
[data-theme="light"] .fq-item{background:linear-gradient(160deg,#fff,rgba(238,242,255,.8)); box-shadow:0 10px 30px -22px rgba(30,41,99,.4)}
[data-theme="light"] .fq-item[open]{box-shadow:0 24px 50px -28px rgba(79,70,229,.55)}
[data-theme="light"] .fq-tag{color:#4f46e5}
[data-theme="light"] .fq-pm i{background:#4f46e5}
[data-theme="light"] .fq-item[open] .fq-pm i{background:#fff}
[data-theme="light"] :is(.fq-link,.fq-empty a){color:#4f46e5}
[data-theme="light"] .fq-facts div{background:linear-gradient(160deg,#fff,#eef2ff)}
[data-theme="light"] .fq-chat{--x:0}
[data-theme="light"] .gs-grid{background-image:linear-gradient(rgba(99,102,241,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.18) 1px,transparent 1px)}
[data-theme="light"] .gs-orb{opacity:.35}

@media (max-width:1100px){ .fq-grid{grid-template-columns:1fr} .fq-side{position:static; grid-template-columns:1fr 1fr} .gs{grid-template-columns:1fr; padding:48px 36px} }
@media (max-width:640px){
  .fq-item summary{grid-template-columns:36px 1fr 28px; gap:10px; padding:14px; font-size:15px}
  .fq-n{width:36px; height:36px; border-radius:10px; font-size:11.5px} .fq-tag{display:none}
  .fq-ai{padding:0 18px 18px 18px} .fq-side{grid-template-columns:1fr}
  .fq-search kbd{display:none}
  .gs{padding:36px 20px; border-radius:24px} .gs-stage{grid-template-columns:1fr; justify-items:center} .gs-stack{transform:none; width:100%} .gs-card.on{transform:translateY(-3px)}
  .gs-cta .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){ .bub{opacity:1} .fq-item{animation:none} }


/* =====================================================
   V7 — INTRO ANIMATION VARIANTS
   ===================================================== */
html.js [data-rv].rv-l,html.js [data-rv].rv-r{opacity:0; translate:-160px 0; rotate:y 22deg; scale:.95; filter:blur(8px); transform-origin:0 50%;
  transition:opacity .9s var(--ease), translate 1.2s var(--ease), rotate 1.2s var(--ease), scale 1.2s var(--ease), filter .9s; transition-delay:var(--d,0s)}
html.js [data-rv].rv-r{translate:160px 0; rotate:y -22deg; transform-origin:100% 50%}
html.js [data-rv].rv-l.in,html.js [data-rv].rv-r.in{opacity:1; translate:0 0; rotate:y 0deg; scale:1; filter:blur(0)}
html.js [data-rv].rv-up{opacity:0; translate:0 110px; rotate:x 0deg; scale:.96; filter:blur(6px);
  transition:opacity .9s var(--ease), translate 1.1s cubic-bezier(.16,1,.3,1), scale 1.1s var(--ease), filter .8s; transition-delay:var(--d,0s)}
html.js [data-rv].rv-up.in{opacity:1; translate:0 0; scale:1; filter:blur(0)}
/* dot / clock -> card */
@media (prefers-reduced-motion:reduce){
  html.js [data-rv]:is(.rv-l,.rv-r,.rv-up,.rv-pop){opacity:1 !important; translate:none !important; rotate:none !important; scale:none !important; filter:none !important; clip-path:none !important}
  .popdot{display:none}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .facts{grid-template-columns:repeat(3,1fr)}
  .pipe{grid-template-columns:200px 1fr 220px; padding:22px}
  .xp{grid-template-columns:240px 1fr} .pane{grid-template-columns:1fr; gap:20px; padding:24px} .panes{min-height:820px}
  .plans,.pv-more{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)} .srail{display:none}
  .ent{grid-template-columns:1fr; padding:30px}
}
@media (max-width:980px){
  .links,.acts{display:none} .burger{display:grid}
  .links.open{display:grid; position:absolute; left:0; right:0; top:72px; margin:0; gap:0; padding:8px 24px 20px; background:#05070f; border-bottom:1px solid var(--line); box-shadow:0 30px 60px rgba(0,0,0,.6)}
  .links.open a{padding:14px 4px; border-bottom:1px solid var(--line); border-radius:0}
  .links.open .mcta{display:flex; gap:10px; padding-top:16px} .links.open .mcta a{border:0; padding:10px 16px; border-radius:10px}
  .hero{min-height:auto; padding:116px 0 60px}
  .hgrid{grid-template-columns:1fr; gap:10px}
  .stage{height:520px}
  .pipe{grid-template-columns:1fr} .col{height:auto; flex-direction:row; flex-wrap:wrap; justify-content:center} .col .node{flex:1 1 220px} .flow{height:260px} .flow svg{display:none}
  .xp{grid-template-columns:1fr} .tabs{grid-template-columns:repeat(2,1fr); border-right:0; border-bottom:1px solid var(--line)} .panes{min-height:0}
  .pane{position:relative; inset:auto; display:none} .pane.on{display:grid}
  .bento{grid-template-columns:1fr 1fr} .s2,.s3{grid-column:span 1} .s4{grid-column:span 2}
  .pv-grid,.faqg{grid-template-columns:1fr; gap:24px}
  .consent{grid-template-columns:repeat(2,1fr); gap:24px} .cline{display:none}
  .fgrid{grid-template-columns:1fr 1fr; gap:30px}
  .sec{padding:90px 0}
}
@media (max-width:640px){
  .wrap{padding:0 18px}
  .stage{height:430px} .app{left:0; width:100%; grid-template-columns:40px 1fr} .side i{width:20px; height:20px}
  .kp4{grid-template-columns:repeat(2,1fr)} .mbody{grid-template-columns:1fr} .mbody .panel:last-child{display:none}
  .fpanel{right:0; bottom:0} .fbar .wk{display:none} .f1{left:0; top:4%} .f2{display:none} .stage{margin-top:30px}
  .facts{grid-template-columns:repeat(2,1fr)} .fact .n{font-size:38px}
  .tabs{grid-template-columns:1fr} .sun{grid-template-columns:1fr; justify-items:center} .ai{grid-template-columns:1fr 1fr 1fr; gap:6px}
  .mplat{grid-template-columns:repeat(2,1fr)} .pr div{grid-template-columns:30px 1fr 64px} .pr div>em:last-child{display:none}
  .bento,.plans,.pv-more,.steps,.consent{grid-template-columns:1fr} .s4{grid-column:span 1}
  .caps,.ent .chk{grid-template-columns:1fr}
  .orbit{height:320px; transform:scale(.8)}
  .fgrid{grid-template-columns:1fr} .final{padding:70px 20px} .portal{transform:scale(.6)}
  .hcta .btn{flex:1 1 auto}
  .sec{padding:76px 0} .shead{margin-bottom:40px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
  .js [data-rv]{opacity:1; translate:none; rotate:none; scale:none}
  .chart path.ln{stroke-dashoffset:0} .chart path.ar{opacity:1}
}

/* =====================================================
   V8 — THEME SWITCH, GET STARTED ALIGNMENT, MOBILE
   ===================================================== */
/* ---------- day / night switch ---------- */
.theme{width:auto; height:auto; padding:0; border:0; background:none; border-radius:999px; overflow:visible; margin-left:auto}
.theme::before{display:none}
.theme:hover{transform:none}
.theme:focus-visible{outline:2px solid var(--cyan); outline-offset:4px}
.tt{position:relative; display:block; width:66px; height:34px; border-radius:999px; overflow:hidden;
  background:linear-gradient(180deg,#0b1030,#1c2160); border:1px solid rgba(165,180,252,.35);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55), 0 0 18px -4px rgba(99,102,241,.6); transition:background .6s var(--ease), border-color .6s, box-shadow .6s}
.theme:hover .tt{box-shadow:inset 0 2px 6px rgba(0,0,0,.55), 0 0 24px -2px rgba(99,102,241,.85)}
.tt-knob{position:absolute; top:3px; left:35px; width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffffff,#dfe5f3 55%,#b9c2d8); box-shadow:0 0 12px rgba(226,232,240,.75), inset -2px -3px 5px rgba(100,116,139,.45);
  transition:left .65s cubic-bezier(.68,-.35,.27,1.35), background .6s, box-shadow .6s, transform .65s var(--ease)}
.tt-c{position:absolute; border-radius:50%; background:rgba(148,163,184,.55); box-shadow:inset 1px 1px 2px rgba(71,85,105,.5); transition:opacity .35s}
.tt-c.c1{width:7px; height:7px; left:6px; top:7px}
.tt-c.c2{width:4px; height:4px; left:15px; top:15px}
.tt-c.c3{width:5px; height:5px; left:8px; top:17px}
.tt-stars i{position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; box-shadow:0 0 4px #fff; animation:twinkle 2.2s ease-in-out infinite; transition:transform .6s var(--ease), opacity .4s}
.tt-stars i:nth-child(1){left:9px; top:8px}
.tt-stars i:nth-child(2){left:18px; top:19px; width:1.5px; height:1.5px; animation-delay:-.6s}
.tt-stars i:nth-child(3){left:26px; top:9px; width:1.5px; height:1.5px; animation-delay:-1.2s}
.tt-stars i:nth-child(4){left:13px; top:25px; animation-delay:-1.7s}
.tt-clouds i{position:absolute; height:8px; border-radius:8px; background:#fff; opacity:0; transform:translateY(14px); transition:transform .6s var(--ease), opacity .45s}
.tt-clouds i::before{content:""; position:absolute; left:4px; top:-4px; width:9px; height:9px; border-radius:50%; background:#fff}
.tt-clouds i:nth-child(1){width:20px; right:8px; top:18px}
.tt-clouds i:nth-child(2){width:14px; right:20px; top:8px; opacity:0; transition-delay:.05s}
/* light state = sun on the left, sky track */
[data-theme="light"] .tt{background:linear-gradient(180deg,#7dd3fc,#bae6fd); border-color:rgba(14,165,233,.45); box-shadow:inset 0 2px 6px rgba(2,132,199,.35), 0 0 18px -4px rgba(245,158,11,.6)}
[data-theme="light"] .tt-knob{left:3px; transform:rotate(180deg); background:radial-gradient(circle at 40% 35%,#fff7cc,#fbbf24 50%,#f59e0b);
  box-shadow:0 0 0 3px rgba(251,191,36,.25), 0 0 16px rgba(245,158,11,.9), inset -2px -3px 5px rgba(180,83,9,.35)}
[data-theme="light"] .tt-c{opacity:0}
[data-theme="light"] .tt-stars i{opacity:0; transform:translateY(-12px)}
[data-theme="light"] .tt-clouds i{opacity:.95; transform:none}
[data-theme="light"] .tt-clouds i:nth-child(2){opacity:.75}

/* ---------- Get started cards: flat, aligned ---------- */
.gs-stage{perspective:none}
.gs-stack{transform:none; transform-style:flat; gap:14px}
.gs-card{grid-template-columns:48px 1fr auto; column-gap:16px; align-items:center; padding:16px 18px; transform:none; opacity:.6}
.gs-card>div{min-width:0}
.gs-card.on{transform:scale(1.03); opacity:1}
.gs-card.done{opacity:.82}
.gs-ic{width:48px; height:48px; align-self:center; justify-self:start; box-sizing:border-box}
.gs-ic svg{width:22px; height:22px; display:block}
.gs-card .gs-st{white-space:nowrap}

/* ---------- mobile optimisation ---------- */
@media (max-width:980px){
  .bento,.plans,.facts{transform:none !important}
  .cubes{display:none}
}
@media (max-width:640px){
  .nav{height:64px; gap:12px} .brand{font-size:17px} .brand svg{width:26px; height:26px}
  .links.open{top:64px}
  .tt{width:58px; height:30px} .tt-knob{width:22px; height:22px; left:31px} [data-theme="light"] .tt-knob{left:3px}
  .tt-c.c1{width:6px; height:6px; left:5px; top:5px} .tt-c.c2{left:13px; top:13px} .tt-c.c3{left:6px; top:14px}
  .burger{width:42px; height:42px}
  .sec{padding:64px 0}
  .h2{font-size:clamp(28px,8.4vw,36px)}
  .lede{font-size:16px}
  .hero{padding:100px 0 40px}
  .hero h1{font-size:clamp(38px,11.5vw,48px)}
  .hsub{font-size:16px}
  .stage{height:380px; margin-top:24px}
  .gyro{display:none}
  .bigtype{padding:20px 0 30px} .bt{font-size:44px}
  html.js [data-rv].rv-l,html.js [data-rv].rv-r{translate:-40px 0; rotate:y 0deg; filter:none}
  html.js [data-rv].rv-r{translate:40px 0}
  html.js [data-rv].rv-up{translate:0 50px; filter:none}
  .js .split .wi{filter:none}
  .glass{backdrop-filter:none}
  .fact{padding:18px 14px} .fact p{font-size:12.5px}
  .pipe{padding:16px} .col .node{flex:1 1 100%} .flow{height:220px} .core{width:130px; height:130px; margin:-65px 0 0 -65px}
  .pane{padding:18px} .mock{padding:14px}
  .tile .tx{padding:18px} .tile .viz{height:190px}
  .wc{padding:14px} .wbox{height:180px}
  .cap{padding:20px}
  .consent{padding:22px}
  .ent{padding:22px} .orbit{height:300px; margin:-30px -10px; transform:scale(.7)}
  .agent{gap:28px}
  .flips{grid-template-columns:1fr 1fr}
  .fq-item summary{grid-template-columns:34px 1fr 28px; padding:14px 12px; font-size:15px}
  .fq-ai{padding:0 16px 16px} .fq-ai p{font-size:14.5px}
  .fq-help{padding:18px}
  .gs .h2{font-size:clamp(30px,9vw,38px)}
  .gs-stage{gap:18px}
  .gs-ring{width:100px; height:100px} .gs-ring b{font-size:28px}
  .gs-card{grid-template-columns:42px 1fr; padding:14px; column-gap:12px}
  .gs-card .gs-st{grid-column:2; justify-self:start; margin-top:6px}
  .gs-ic{width:42px; height:42px; grid-row:span 2}
  .gs-card.on{transform:none}
  .gs-orb{display:none}
  .final,.foot{padding-left:0; padding-right:0}
  .fgrid{gap:24px}
  .top{width:48px; height:48px; right:12px; bottom:12px} .top svg.d{width:50px; height:50px}
  .mq{padding:18px 0} .mqt span{font-size:13px; padding:8px 13px}
  .cmp{height:400px}
  .lap{padding-top:0}
}
@media (max-width:380px){
  .wrap{padding:0 14px}
  .acts{display:none}
  .hero h1{font-size:36px}
  .flips{grid-template-columns:1fr} .fl{height:150px}
  .facts{grid-template-columns:1fr 1fr; gap:10px}
  .fact .n{font-size:32px}
  .tabs{padding:10px}
}

/* =====================================================
   V9 — CLOCK-TO-CARD INTRO, ICON FIX, SCROLL GATE
   ===================================================== */
.gs-card .gs-ic{display:grid; place-items:center; padding:0}
.gs-card .gs-ic svg{margin:0}

/* fast "rise + shine" reveal */
html.js [data-rv].rv-pop{opacity:0; translate:0 36px; scale:.94; rotate:none; filter:none; transition:opacity .5s ease-out, translate .6s cubic-bezier(.2,.9,.25,1), scale .6s cubic-bezier(.2,.9,.25,1); transition-delay:var(--d,0s)}
html.js [data-rv].rv-pop.in{opacity:1; translate:0 0; scale:1}
.rv-pop{isolation:isolate}
.pshine{position:absolute; inset:0; z-index:20; pointer-events:none; border-radius:inherit; overflow:hidden}
.pshine::before{content:""; position:absolute; top:-30%; bottom:-30%; left:-60%; width:45%; transform:skewX(-20deg); opacity:0;
  background:linear-gradient(100deg,transparent,rgba(165,243,252,.28) 40%,rgba(255,255,255,.45) 50%,rgba(196,181,253,.28) 60%,transparent)}
.rv-pop.in>.pshine::before{animation:pshine .9s cubic-bezier(.4,0,.2,1) both; animation-delay:calc(var(--d,0s) + .15s)}
@keyframes pshine{0%{left:-60%; opacity:1}100%{left:130%; opacity:1}}
.rv-pop.in{animation:pglow 1.1s ease-out both; animation-delay:var(--d,0s)}
@keyframes pglow{0%{box-shadow:0 0 0 0 rgba(99,102,241,0)}35%{box-shadow:0 0 0 1px rgba(99,102,241,.55), 0 0 40px -6px rgba(34,211,238,.45)}100%{}}
@media (max-width:640px){ html.js [data-rv].rv-pop{translate:0 24px} }
@media (prefers-reduced-motion:reduce){ html.js [data-rv].rv-pop{opacity:1 !important; translate:none !important; scale:none !important} .pshine{display:none} }

/* ===== V10: descender fix + light logo ===== */
.w{padding-bottom:.24em; margin-bottom:-.24em}
.wi{padding-bottom:.06em}
.wi.gt,.h2 .gt,.final h2 .gt,.gs .gt{padding-bottom:.1em}
.hero h1 .ln{padding-bottom:.2em; margin-bottom:-.12em}
.hero h1 .ln3{padding-bottom:.34em}
.hero h1 .gt{display:inline-block; padding-bottom:.12em}
[data-theme="light"] .brand svg path{stroke:#0b1230}

/* ===== Time Progress integration + performance (2026-10-28) ===== */
.brand .bmark{width:34px; height:34px; display:block; flex:none}
.ld img{width:74px; height:74px; display:block}
/* Sections out of view: pause their CSS animations (home.js toggles .tp-off). */
.tp-off, .tp-off *, .tp-off::before, .tp-off::after, .tp-off *::before, .tp-off *::after{animation-play-state:paused !important}
/* Phones / touch: keep the look, drop the most expensive continuous effects. */
@media (hover:none), (max-width:640px){
  .aurora i{animation:none}
  .spot{display:none}
}
/* Back-to-top sits above the support chat bubble (both live bottom-right). */
.top{right:25px; bottom:96px}
@media (max-width:640px){ .top{right:28px; bottom:92px} }