/* Weblify demo engine: shared motion language for industry demos.
   Rules: only transform/opacity animate; no vibration; reduced-motion respected. */
:root{--bg:#060D1C;--bg2:#0B1730;--acc:#38BDF8;--acc2:#FBBF24;--acc3:#F59E0B;--onacc:#07111F;--tx:#E8EEF8;--mu:#9FB0C8;--line:rgba(125,211,252,.16);--card:rgba(12,24,50,.72);--glow:56,189,248}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:400 17px/1.65 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:Sora,Inter,sans-serif;margin:0;letter-spacing:-.035em;line-height:1.05;color:#fff}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px;position:relative}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* sample bar */
.wb{background:#030710;color:#C9D6EA;font:500 13.5px/1.4 Inter,sans-serif;position:relative;z-index:30}
.wb .wrap{display:flex;gap:6px 18px;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-top:9px;padding-bottom:9px}
.wb a{color:#fff;font-weight:600;text-decoration:none;box-shadow:inset 0 -2px 0 #22D3EE}
.wb a:hover{color:#22D3EE}

/* header */
.hd{position:sticky;top:0;z-index:25;background:rgba(6,13,28,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font:800 21px/1 Sora,sans-serif;letter-spacing:-.03em;color:#fff}
.brand small{display:block;font:500 11.5px/1.1 Inter,sans-serif;letter-spacing:.01em;color:var(--mu);margin-top:3px}
.brand svg{flex:none}
.nv{display:none;gap:30px;font-weight:500;font-size:15.5px}
.nv a{text-decoration:none;color:#D3DCEB;position:relative;padding:6px 0}
.nv a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nv a:hover::after{transform:scaleX(1)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;border:0;cursor:pointer;font:700 16px/1 Sora,sans-serif;text-decoration:none;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s;will-change:transform}
.btn-p{background:linear-gradient(90deg,var(--acc2),var(--acc3));color:var(--onacc);box-shadow:0 10px 36px -10px rgba(var(--glow),.55)}
.btn-p:hover{transform:translateY(-3px);box-shadow:0 18px 50px -12px rgba(var(--glow),.85)}
.btn-g{background:transparent;color:#E8EEF8;box-shadow:inset 0 0 0 1.5px rgba(125,211,252,.35)}
.btn-g:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1.5px var(--acc),0 10px 40px -14px rgba(var(--glow),.6)}
.btn svg{width:19px;height:19px;flex:none}
.hd .btn{padding:12px 18px;font-size:15px}
.tapr{position:absolute;border-radius:50%;width:12px;height:12px;margin:-6px;background:rgba(255,255,255,.45);pointer-events:none;animation:tapr .65s ease-out forwards}
@keyframes tapr{to{transform:scale(18);opacity:0}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:64px 0 90px;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-3;background:radial-gradient(ellipse at 78% 30%,var(--bg2),var(--bg) 62%)}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;z-index:-2;pointer-events:none}
.o1{width:520px;height:520px;left:-140px;top:-120px;background:rgba(var(--glow),.38);animation:drift1 16s ease-in-out infinite alternate}
.o2{width:460px;height:460px;right:-120px;bottom:-80px;background:rgba(var(--glow),.24);animation:drift2 19s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(120px,80px,0)}}
@keyframes drift2{to{transform:translate3d(-110px,-60px,0)}}
.floor{position:absolute;left:-30%;right:-30%;bottom:-8%;height:56%;z-index:-2;pointer-events:none;background-image:linear-gradient(rgba(var(--glow),.22) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--glow),.22) 1px,transparent 1px);background-size:56px 56px;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(transparent,#000 70%);mask-image:linear-gradient(transparent,#000 70%);animation:floor 6s linear infinite}
@keyframes floor{to{background-position:0 56px}}
.beams{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.beam{position:absolute;top:-20%;width:2px;height:140%;background:linear-gradient(transparent,rgba(var(--glow),.55),transparent);opacity:0;transform:rotate(24deg) translate3d(0,0,0);animation:beam 9s ease-in-out infinite}
.beam:nth-child(1){left:18%;animation-delay:0s}.beam:nth-child(2){left:46%;animation-delay:3s;height:120%}.beam:nth-child(3){left:72%;animation-delay:6s}
@keyframes beam{0%,100%{opacity:0;transform:rotate(24deg) translate3d(-60px,0,0)}40%,60%{opacity:.8}50%{transform:rotate(24deg) translate3d(80px,0,0)}}
.grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.spot{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(520px circle at var(--mx,70%) var(--my,35%),rgba(var(--glow),.16),transparent 70%)}
.hgrid{display:grid;gap:56px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border-radius:999px;background:rgba(12,24,50,.7);box-shadow:inset 0 0 0 1px var(--line);font:600 13px/1 Sora,sans-serif;letter-spacing:.12em;color:var(--acc);margin:0 0 26px}
.pdot{width:18px;height:18px;border-radius:50%;background:rgba(var(--glow),.22);display:grid;place-items:center}
.pdot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc);animation:pip 2s infinite}
@keyframes pip{0%{box-shadow:0 0 0 0 rgba(var(--glow),.7)}70%,100%{box-shadow:0 0 0 10px rgba(var(--glow),0)}}
.hero h1{font-size:clamp(44px,6.4vw,86px);font-weight:800;letter-spacing:-.045em;line-height:1.02}
.hero h1 .l1{display:block;animation:up 1s cubic-bezier(.22,1,.36,1) both}
.rotw{display:grid;position:relative}
.rotw>span{grid-area:1/1;opacity:0;transform:translateY(55%);filter:blur(10px);animation:rot 9s cubic-bezier(.22,1,.36,1) infinite;animation-delay:calc(var(--i)*3s);background:linear-gradient(90deg,var(--acc),#fff 55%,var(--acc));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.12em;position:relative}
.rotw>span i{position:absolute;left:0;bottom:0;height:5px;width:100%;border-radius:4px;background:linear-gradient(90deg,var(--acc),var(--acc2));transform:scaleX(0);transform-origin:left;animation:uline 9s cubic-bezier(.22,1,.36,1) infinite;animation-delay:calc(var(--i)*3s)}
@keyframes rot{0%{opacity:0;transform:translateY(55%);filter:blur(10px);background-position:0 0}6%,30%{opacity:1;transform:none;filter:blur(0)}36%,100%{opacity:0;transform:translateY(-55%);filter:blur(10px);background-position:100% 0}}
@keyframes uline{0%,3%{transform:scaleX(0)}14%,30%{transform:scaleX(1)}34%,100%{transform:scaleX(1);opacity:0}}
.lead{max-width:34em;font-size:19px;color:var(--mu);margin:26px 0 0;animation:up 1s .15s cubic-bezier(.22,1,.36,1) both}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 0;animation:up 1s .3s cubic-bezier(.22,1,.36,1) both}
.checks{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;padding:0;margin:28px 0 0;color:#C9D6EA;font-size:15px;animation:up 1s .45s cubic-bezier(.22,1,.36,1) both}
.checks li{display:flex;gap:8px;align-items:center}
.checks svg{width:17px;height:17px;color:var(--acc)}
@keyframes up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

/* hero window */
.stage{position:relative;perspective:1400px;padding:20px 0 30px}
.win{border-radius:24px;background:linear-gradient(180deg,rgba(14,28,58,.96),rgba(8,18,40,.96));box-shadow:inset 0 0 0 1px var(--line),0 50px 100px -40px rgba(0,0,0,.9),0 0 90px -30px rgba(var(--glow),.55);transform:rotateY(-9deg) rotateX(4deg);animation:bwIn 1.4s cubic-bezier(.22,1,.36,1) both,bob 7s 1.4s ease-in-out infinite;overflow:hidden}
@keyframes bwIn{from{opacity:0;transform:rotateY(-24deg) rotateX(12deg) translateY(60px)}}
@keyframes bob{0%,100%{transform:rotateY(-9deg) rotateX(4deg) translateY(0)}50%{transform:rotateY(-9deg) rotateX(4deg) translateY(-12px)}}
.wtop{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line)}
.wtop i{width:10px;height:10px;border-radius:50%;background:#F87171}.wtop i:nth-child(2){background:#FBBF24}.wtop i:nth-child(3){background:#34D399}
.wtop span{margin-left:10px;font:500 12.5px/1 "JetBrains Mono",ui-monospace,monospace;color:var(--mu);background:rgba(255,255,255,.05);padding:7px 12px;border-radius:8px}
.wbody{padding:6px 6px 4px}
.wbody svg{display:block;width:100%;height:auto}
.chip{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(10,20,44,.9);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(var(--glow),.35),0 20px 50px -20px rgba(0,0,0,.8);font:600 14px/1 Sora,sans-serif;color:#fff;white-space:nowrap;animation:chipin 8s ease-in-out infinite}
.chip b{width:9px;height:9px;border-radius:50%;background:#34D399;animation:pip 2s infinite;--c:52,211,153}
.chip.c1{left:-26px;top:64px}.chip.c2{right:-14px;top:6px;animation-delay:2.2s}.chip.c3{right:26px;bottom:-4px;animation-delay:4.4s}
@keyframes chipin{0%,4%{opacity:0;transform:translateY(16px) scale(.92)}12%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateY(-8px) scale(.98)}}

/* scene primitives (hero svg) */
.fl{stroke-dasharray:14 18;animation:flow 1.1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-32}}
.dr{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);animation:draw 8s cubic-bezier(.65,0,.35,1) infinite;animation-delay:var(--d,0s)}
@keyframes draw{0%{stroke-dashoffset:var(--len,600)}30%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:calc(var(--len,600)*-1)}}
.pop{transform-box:fill-box;transform-origin:center;opacity:0;animation:popin 8s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes popin{0%{opacity:0;transform:scale(.4)}8%,84%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.9)}}
.grow{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);animation:grow 10s cubic-bezier(.22,1,.36,1) infinite;animation-delay:var(--d,0s)}
@keyframes grow{0%{transform:scaleY(0);opacity:1}14%,86%{transform:scaleY(1);opacity:1}96%,100%{transform:scaleY(1);opacity:0}}
.fillx{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);animation:fillx 8s cubic-bezier(.22,1,.36,1) infinite;animation-delay:var(--d,0s)}
@keyframes fillx{0%{transform:scaleX(0);opacity:1}30%,86%{transform:scaleX(1);opacity:1}96%,100%{transform:scaleX(1);opacity:0}}
.swayb{transform-box:fill-box;transform-origin:50% 0;animation:sway 5s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.twk{transform-box:fill-box;transform-origin:center;animation:twk 3s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes twk{0%,100%{opacity:.1;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}
.drop{transform-box:fill-box;animation:drop 4s cubic-bezier(.55,0,1,.45) infinite}
@keyframes drop{0%{transform:translateY(-20px);opacity:0}12%{opacity:1}55%{transform:translateY(56px);opacity:1}60%,100%{transform:translateY(60px);opacity:0}}
.rip{transform-box:fill-box;transform-origin:center;animation:rip 4s ease-out infinite}
@keyframes rip{0%,52%{transform:scale(.2);opacity:0}56%{opacity:.9}100%{transform:scale(2.4);opacity:0}}
.crane{transform-box:fill-box;transform-origin:0 50%;animation:jib 7s ease-in-out infinite alternate}
@keyframes jib{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.van{animation:van 8s cubic-bezier(.45,0,.2,1) infinite}
@keyframes van{0%{transform:translateX(0)}85%,100%{transform:translateX(380px)}}


/* ---------- sections ---------- */
.mq{border-block:1px solid var(--line);overflow:hidden;padding:26px 0;background:rgba(255,255,255,.015)}
.mq div{display:flex;width:max-content;gap:44px;font:800 clamp(26px,3.6vw,44px)/1 Sora,sans-serif;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(160,190,230,.35);animation:mq 38s linear infinite;white-space:nowrap}
.mq span:nth-child(even){color:var(--acc);-webkit-text-stroke:0}
@keyframes mq{to{transform:translateX(-50%)}}
section.s{padding:110px 0}
.eyebrow{margin:0 0 18px;font:600 13px/1 Sora,sans-serif;letter-spacing:.18em;color:var(--acc)}
.sh{max-width:760px;margin-bottom:52px}
.sh h2{font-size:clamp(34px,4.6vw,58px);font-weight:800}
.sh p{margin:18px 0 0;color:var(--mu);font-size:18px}
.rv{opacity:0;transform:translateY(46px) scale(.98);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);transition-delay:var(--rd,0s)}
.rv.in{opacity:1;transform:none}

/* bento of living tiles */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tile{position:relative;display:flex;flex-direction:column;gap:14px;padding:18px 18px 24px;border-radius:26px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;transform-style:preserve-3d;transition:box-shadow .3s,transform .25s}
.tile::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--tx,50%) var(--ty,0%),rgba(var(--glow),.16),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.tile:hover{box-shadow:inset 0 0 0 1px rgba(var(--glow),.6),0 30px 70px -34px rgba(var(--glow),.5)}
.tile:hover::before{opacity:1}
.scene{position:relative;height:196px;border-radius:18px;background:linear-gradient(180deg,rgba(8,18,40,.9),rgba(6,13,28,.9));box-shadow:inset 0 0 0 1px rgba(125,211,252,.1);overflow:hidden;padding:16px}
.tile h3{font-size:25px;margin:8px 8px 0;font-weight:700}
.tile p{margin:0 8px;color:var(--mu);font-size:16px;line-height:1.6}
.tile .more{margin:auto 8px 0;color:var(--acc);font:600 15px/1 Sora,sans-serif;text-decoration:none}
.tile .more::after{content:" →";display:inline-block;transition:transform .25s}
.tile:hover .more::after{transform:translateX(5px)}

/* scenes */
.sl{display:grid;gap:9px}
.sl .row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:11px;background:rgba(255,255,255,.04);font-size:13.5px;color:#D3DCEB;opacity:0;transform:translateX(-18px);animation:rowin 8s cubic-bezier(.22,1,.36,1) infinite;animation-delay:calc(var(--k)*.9s)}
.sl .row b{margin-left:auto;font:600 11.5px/1 Sora,sans-serif;color:var(--acc)}
.sl .row.hi{background:rgba(var(--glow),.14);box-shadow:inset 0 0 0 1px rgba(var(--glow),.45)}
.sl .row i{width:8px;height:8px;border-radius:50%;background:var(--acc);flex:none}
@keyframes rowin{0%{opacity:0;transform:translateX(-18px)}8%,82%{opacity:1;transform:none}92%,100%{opacity:0}}
.sb{display:flex;align-items:flex-end;gap:12px;height:100%;padding-bottom:4px}
.sb i{flex:1;border-radius:7px 7px 3px 3px;background:linear-gradient(var(--acc),rgba(var(--glow),.25));transform-origin:50% 100%;transform:scaleY(.1);animation:barup 6s cubic-bezier(.22,1,.36,1) infinite;animation-delay:calc(var(--k)*.25s);height:100%}
@keyframes barup{0%{transform:scaleY(.08)}30%,80%{transform:scaleY(var(--h))}100%{transform:scaleY(.08)}}
.sbl{position:absolute;left:16px;top:12px;font:600 12px/1 Sora,sans-serif;color:var(--mu)}
.sr2{display:grid;place-items:center;height:100%;text-align:center}
.sr2 svg{width:122px;height:122px;overflow:visible}
.sr2 .rg{stroke-dasharray:289;stroke-dashoffset:289;animation:ring 6s cubic-bezier(.22,1,.36,1) infinite;transform:rotate(-90deg);transform-origin:50% 50%}
@keyframes ring{0%{stroke-dashoffset:289}40%,85%{stroke-dashoffset:var(--o)}100%{stroke-dashoffset:289}}
.sr2 b{position:absolute;font:800 28px/1 Sora,sans-serif;color:#fff}
.sr2 small{position:absolute;margin-top:48px;color:var(--mu);font-size:12px}
.gg{display:grid;place-items:center;height:100%}
.gg svg{width:80%}
.nd{transform-box:fill-box;transform-origin:50% 90%;animation:needle 6s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes needle{0%{transform:rotate(-70deg)}35%,80%{transform:rotate(var(--r))}100%{transform:rotate(-70deg)}}
.cal{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;height:100%;align-content:center}
.cal i{height:32px;border-radius:9px;background:rgba(255,255,255,.06);animation:slot 8s ease-in-out infinite;animation-delay:calc(var(--k)*.55s)}
@keyframes slot{0%,12%{background:rgba(255,255,255,.06);transform:scale(1)}22%,78%{background:rgba(var(--glow),.55);transform:scale(1.04)}90%,100%{background:rgba(255,255,255,.06);transform:scale(1)}}
.cal .bk{animation:slot2 8s ease-in-out infinite;background:linear-gradient(90deg,var(--acc2),var(--acc3))}
@keyframes slot2{0%,40%{transform:scale(1);opacity:.3}50%,80%{transform:scale(1.06);opacity:1}100%{opacity:.3}}
.dc{display:grid;gap:10px;align-content:center;height:100%}
.dc i{height:9px;border-radius:5px;background:rgba(var(--glow),.5);transform-origin:0 50%;transform:scaleX(0);animation:fx 7s cubic-bezier(.22,1,.36,1) infinite;animation-delay:calc(var(--k)*.45s);width:var(--w)}
.dc i:first-child{height:13px;background:#fff}
@keyframes fx{0%{transform:scaleX(0)}22%,82%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.dc em{position:absolute;right:18px;bottom:16px;padding:6px 12px;border:2px solid var(--acc2);color:var(--acc2);border-radius:8px;font:800 12px/1 Sora,sans-serif;font-style:normal;transform:rotate(-8deg);opacity:0;animation:stp 7s ease-in-out infinite}
@keyframes stp{0%,55%{opacity:0;transform:rotate(-8deg) scale(2)}65%,85%{opacity:1;transform:rotate(-8deg) scale(1)}100%{opacity:0}}
.ct{display:grid;gap:9px;align-content:center;height:100%}
.ct span{max-width:82%;padding:9px 13px;border-radius:14px;font-size:13px;line-height:1.35;opacity:0;transform:translateY(14px) scale(.96);animation:msg 8s cubic-bezier(.22,1,.36,1) infinite;animation-delay:calc(var(--k)*1.1s)}
.ct .a{background:rgba(255,255,255,.07);border-bottom-left-radius:4px}
.ct .b{background:rgba(var(--glow),.22);justify-self:end;border-bottom-right-radius:4px;box-shadow:inset 0 0 0 1px rgba(var(--glow),.4)}
@keyframes msg{0%{opacity:0;transform:translateY(14px) scale(.96)}8%,84%{opacity:1;transform:none}94%,100%{opacity:0}}
.sx{display:grid;gap:8px;align-content:center;height:100%}
.sx .q{padding:9px 14px;border-radius:99px;background:rgba(255,255,255,.07);font-size:13px;color:#D3DCEB}
.sx .r{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);font-size:13px;animation:rank 8s cubic-bezier(.65,0,.35,1) infinite}
.sx .r.me{background:rgba(var(--glow),.16);box-shadow:inset 0 0 0 1px rgba(var(--glow),.5);animation-name:rankme}
.sx b{margin-left:auto;font:700 11.5px/1 Sora,sans-serif;color:var(--acc)}
@keyframes rankme{0%,15%{transform:translateY(98px)}45%,85%{transform:translateY(0)}100%{transform:translateY(98px)}}
@keyframes rank{0%,15%{transform:translateY(0)}45%,85%{transform:translateY(49px)}100%{transform:translateY(0)}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-block:1px solid var(--line)}
.stat{padding:44px 26px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font:800 clamp(40px,5vw,66px)/1 Sora,sans-serif;letter-spacing:-.05em;color:#fff}
.stat b em{font-style:normal;color:var(--acc)}
.stat span{display:block;margin-top:10px;color:var(--mu);font-size:15.5px}

/* process */
.steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:22px;list-style:none;padding:0;margin:0}
.steps::before{content:"";position:absolute;left:22px;right:22px;top:21px;height:2px;background:var(--line)}
.steps::after{content:"";position:absolute;left:22px;right:22px;top:21px;height:2px;background:linear-gradient(90deg,var(--acc),var(--acc2));transform:scaleX(0);transform-origin:0 50%;transition:transform 2.6s cubic-bezier(.65,0,.35,1)}
.steps.in::after{transform:scaleX(1)}
.step{position:relative;display:grid;gap:10px;align-content:start}
.step .nd2{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--bg);box-shadow:inset 0 0 0 2px var(--line);font:800 18px/1 Sora,sans-serif;color:var(--mu);position:relative;z-index:1;transition:box-shadow .5s,color .5s,background .5s;transition-delay:calc(var(--k)*.5s)}
.steps.in .nd2{box-shadow:inset 0 0 0 2px var(--acc),0 0 30px -4px rgba(var(--glow),.8);color:#fff;background:rgba(var(--glow),.18)}
.step h3{font-size:21px;font-weight:700;margin-top:10px}
.step p{margin:0;color:var(--mu);font-size:15.5px}

/* reviews */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rev{margin:0;padding:28px;border-radius:24px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:transform .25s,box-shadow .3s}
.rev:hover{box-shadow:inset 0 0 0 1px rgba(var(--glow),.5)}
.rev .st{display:flex;gap:3px;color:var(--acc2);margin-bottom:16px}
.rev .st svg{width:18px;height:18px}
.rev blockquote{margin:0 0 20px;font-size:18px;line-height:1.55;color:#E8EEF8}
.rev cite{font-style:normal;font-weight:600;font-size:15px}
.rev cite small{display:block;color:var(--mu);font-weight:400;font-size:14px}
.note{color:var(--mu);font-size:14px;margin-top:22px}

/* cta */
.cta{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 20%,var(--bg2),var(--bg) 66%)}
.cta .wrap{display:grid;gap:56px;align-items:center}
.cta h2{font-size:clamp(38px,5.4vw,72px);font-weight:800;letter-spacing:-.045em}
.cta .l p{color:var(--mu);font-size:18px;max-width:30em;margin:20px 0 0}
.ringsw{position:absolute;right:-160px;top:-160px;width:560px;height:560px;pointer-events:none}
.ringsw i{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(var(--glow),.45);animation:rr 6s ease-out infinite;opacity:0}
.ringsw i:nth-child(2){animation-delay:2s}.ringsw i:nth-child(3){animation-delay:4s}
@keyframes rr{0%{transform:scale(.2);opacity:.9}100%{transform:scale(1);opacity:0}}
.big{display:inline-flex;align-items:center;gap:14px;margin-top:28px;font:800 clamp(32px,6vw,50px)/1 Sora,sans-serif;letter-spacing:-.04em;color:var(--acc2);text-decoration:none}
.big .pd{width:14px;height:14px;border-radius:50%;background:#34D399;animation:pip 2s infinite;--glow:52,211,153}
.areas{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none}
.areas li{padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line);font-size:14.5px;font-weight:500}
.form{position:relative;padding:30px;border-radius:26px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line),0 40px 90px -50px rgba(var(--glow),.5);backdrop-filter:blur(10px)}
.form h3{font-size:28px;margin-bottom:20px}
.f{display:grid;gap:7px;margin-bottom:15px}
.f label{font-weight:600;font-size:14.5px;color:#D3DCEB}
.f input,.f select{font:inherit;color:#fff;background:rgba(6,13,28,.8);border:0;border-radius:12px;padding:14px 15px;width:100%;box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .2s}
.f input:focus,.f select:focus{outline:none;box-shadow:inset 0 0 0 2px var(--acc)}
.f select option{color:#000}
.form .btn{width:100%;justify-content:center}
.ok{display:none;margin:14px 0 0;padding:14px 16px;border-radius:12px;background:rgba(52,211,153,.14);box-shadow:inset 0 0 0 1px rgba(52,211,153,.5);color:#B7F4D5;font-weight:500;font-size:15px}
.ok.on{display:block}
.ok.err{background:rgba(248,113,113,.12);box-shadow:inset 0 0 0 1px rgba(248,113,113,.5);color:#FECACA}
.fine{font-size:13.5px;color:var(--mu);margin:12px 0 0}

footer{padding:40px 0 100px;border-top:1px solid var(--line);color:var(--mu);font-size:15px}
footer .wrap{display:grid;gap:14px}
footer b,footer a{color:#fff}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(6,13,28,.9);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.mbar .btn{width:100%;justify-content:center}

/* scroll progress */
.prog{position:fixed;left:10px;top:84px;bottom:20px;width:2px;background:rgba(125,211,252,.1);z-index:15;display:none}
.prog i{position:absolute;left:0;top:0;width:2px;height:100%;background:linear-gradient(var(--acc),var(--acc2));transform-origin:0 0;transform:scaleY(0)}
.prog b{position:absolute;left:-5px;top:0;width:12px;height:12px;border-radius:50%;background:var(--acc);box-shadow:0 0 18px rgba(var(--glow),.9);will-change:transform}

@media (min-width:900px){.nv{display:flex}.hgrid{grid-template-columns:1.02fr .98fr}.cta .wrap{grid-template-columns:1fr 1fr}.mbar{display:none}footer{padding-bottom:40px}footer .wrap{grid-template-columns:1.4fr 1fr;align-items:end}.prog{display:block}}
@media (max-width:899px){
  .wrap{padding:0 20px}.hero{padding:40px 0 64px}.hgrid{gap:40px}
  .win{transform:none;animation:bwIn2 1.2s cubic-bezier(.22,1,.36,1) both}
  @keyframes bwIn2{from{opacity:0;transform:translateY(40px)}}
  .chip.c1{left:6px;top:-12px}.chip.c2{display:none}.chip.c3{right:8px;bottom:-14px}
  .bento,.revs{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}.stat{padding:30px 18px;border-bottom:1px solid var(--line)}.stat:nth-child(2n){border-right:0}
  section.s{padding:72px 0}
  .steps{grid-template-columns:1fr;gap:0;padding-left:0}
  .steps::before,.steps::after{left:21px;right:auto;top:22px;bottom:22px;width:2px;height:auto}
  .steps::after{transform:scaleY(0);transform-origin:50% 0}.steps.in::after{transform:scaleY(1)}
  .step{grid-template-columns:44px 1fr;column-gap:18px;padding-bottom:30px}.step .nd2{grid-row:1/3}.step h3{margin-top:4px}
  .ringsw{right:-240px;top:-240px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}.rotw>span:first-child{opacity:1;transform:none;filter:none}.rotw>span:first-child i{transform:scaleX(1)}
  .dr,.fillx,.grow,.sl .row,.ct span,.dc i,.pop{opacity:1;stroke-dashoffset:0;transform:none}.sb i{transform:scaleY(var(--h))}.sr2 .rg{stroke-dashoffset:var(--o)}.steps::after{transform:scaleX(1)}.dc em{opacity:1}
}
@media(max-width:640px){.hd .btn-p{display:none}}

/* v22: smooth page-to-page transitions (Chrome, Edge, Safari 18.2+; others just navigate normally) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:wlvtOut .32s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:wlvtIn .6s cubic-bezier(.22,1,.36,1) both}
@keyframes wlvtOut{to{opacity:0;transform:scale(.975)}}
@keyframes wlvtIn{from{opacity:0;transform:translateY(28px)}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}