@view-transition{navigation:auto}
::view-transition-old(root){animation:.26s ease both vt-out}
::view-transition-new(root){animation:.45s cubic-bezier(.2,.7,.2,1) both vt-in}
@keyframes vt-out{to{opacity:0;transform:scale(.985)}}
@keyframes vt-in{from{opacity:0;transform:translateY(16px)}}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --hue{syntax:"<color>";inherits:true;initial-value:transparent}
@keyframes angr{to{--ang:360deg}}

.sbar{position:fixed;left:0;top:0;height:3px;width:100%;z-index:50;transform-origin:0 50%;transform:scaleX(var(--sy,0));background:linear-gradient(90deg,var(--accent),var(--ok));pointer-events:none}
.glow{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 15%,transparent),transparent 65%);transform:translate3d(var(--gx,-999px),var(--gy,-999px),0);opacity:0;transition:opacity .5s}
.gfx-high .glow.on{opacity:1}

/* hero */
.hero2{position:relative;padding:64px 0 40px;overflow:clip;min-height:calc(100svh - 68px);display:flex;flex-direction:column;justify-content:center}
.field{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.75;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.gfx-lite .field{display:none}
.hero2 .hero-in{grid-template-columns:1.08fr .92fr;gap:48px;width:100%}
.hero2 h1{font-size:clamp(38px,4.7vw,70px);line-height:1.02;font-stretch:121%;letter-spacing:-.025em}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.w>span{display:inline-block;animation:wordUp .95s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 55ms + 100ms)}
.hero2 .lede,.hero2 .ctas,.hero2 .proof{animation:rise2 .8s .75s both}
.orbit{animation:pop 1.1s .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes wordUp{from{transform:translateY(112%) rotate(4deg)}}
@keyframes rise2{from{opacity:0;transform:translateY(16px)}}
@keyframes pop{from{opacity:0;scale:.9}}
.gfx-lite .w>span,.gfx-lite .hero2 .lede,.gfx-lite .hero2 .ctas,.gfx-lite .hero2 .proof,.gfx-lite .orbit{animation:none}

.orbit{position:relative;width:100%;max-width:540px;aspect-ratio:1;margin:0 auto}
.orbit-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring{fill:none;stroke:var(--line);stroke-width:.3}
.ring.r2{stroke-dasharray:1 2;transform-origin:50px 50px;animation:spin 70s linear infinite}
.flow{fill:none;stroke:var(--accent);stroke-width:.5;stroke-dasharray:1.6 1.6;opacity:.75;animation:dash2 1.6s linear infinite}
.pk{fill:var(--accent)}
@keyframes dash2{to{stroke-dashoffset:-6.4}}
@keyframes spin{to{rotate:360deg}}
.glass{background:color-mix(in srgb,var(--panel) 64%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);border:1px solid color-mix(in srgb,#fff 26%,var(--line));box-shadow:0 24px 50px -28px rgba(0,0,0,.55),inset 0 1px 0 color-mix(in srgb,#fff 24%,transparent)}
.gfx-lite .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--panel)}
.core{position:absolute;left:50%;top:50%;width:27%;aspect-ratio:1;margin:-13.5% 0 0 -13.5%;border-radius:50%;display:grid;place-items:center;transform:translate3d(calc(var(--cx,0) * 10px),calc(var(--cy,0) * 10px),0);transition:transform .35s ease-out}
.core svg{width:52%;height:52%}
.core::before,.core::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1.5px solid var(--accent);opacity:0;animation:ping 3.2s ease-out infinite}
.core::after{animation-delay:1.6s}
@keyframes ping{from{opacity:.7;scale:1}to{opacity:0;scale:1.9}}
.fw,.stk{position:absolute;transform:translate3d(calc(var(--cx,0) * var(--d) * 1px),calc(var(--cy,0) * var(--d) * 1px),0);transition:transform .35s ease-out;animation:bob 7s ease-in-out infinite;animation-delay:var(--bd,0s)}
@keyframes bob{50%{translate:0 -10px}}
.fw{display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:18px;font-size:13.5px;line-height:1.3;white-space:nowrap}
.fw b{display:block;font-size:14.5px}.fw span{color:var(--muted)}.fw .okc{color:var(--ok)}
.fw svg{flex:none}
.fw-bot{left:-3%;top:9%}.fw-team{right:-5%;top:21%}.fw-diag{right:-1%;bottom:11%}.fw-cloud{left:0;bottom:17%}
.bot,.cl-i{width:40px;height:40px}
.bb{fill:var(--accent)}.bf{fill:var(--ok)}.bs{stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;fill:none}.bs.w{stroke:#fff}
.eye{fill:#fff;transform-box:fill-box;transform-origin:center;animation:blinkEye 4.2s infinite}
@keyframes blinkEye{0%,91%,100%{scale:1 1}95%{scale:1 .1}}
.avs{display:flex}.av{width:30px;height:30px;border-radius:50%;border:2px solid var(--panel);margin-left:-9px}.av:first-child{margin-left:0}
.spark{width:64px;height:32px}.spark polyline{fill:none;stroke:var(--ok);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;animation:draw 3.6s ease-in-out infinite alternate}
@keyframes draw{from{stroke-dashoffset:100}55%,to{stroke-dashoffset:0}}
.cl-i path{fill:color-mix(in srgb,var(--accent) 22%,transparent);stroke:var(--accent);stroke-width:1.8;stroke-linejoin:round}.cl-i .up{fill:none;stroke:var(--ok);stroke-width:2.4;stroke-linecap:round}
.stk{background:var(--accent);color:#fff;border:3px solid #fff;border-radius:16px;padding:10px 14px;box-shadow:0 14px 26px -12px rgba(0,0,0,.55);rotate:var(--r,-7deg);font-size:12.5px;line-height:1.25;max-width:150px;cursor:grab;transition:transform .35s ease-out,rotate .3s,scale .3s}
.stk b{display:block;font-size:28px;font-stretch:121%;font-weight:800;line-height:1;margin-bottom:3px}
.stk:hover{rotate:0deg;scale:1.08}
.stk-a{left:33%;top:-3%;--bd:-1s}.stk-b{right:20%;bottom:-4%;--r:6deg;--bd:-3s;background:var(--text);color:var(--bg)}
.gfx-lite .orbit *,.gfx-lite .fw,.gfx-lite .stk,.gfx-lite .core::before,.gfx-lite .core::after{animation:none}
.gfx-lite .pk{display:none}
.scroll-cue{display:flex;align-items:center;gap:8px;margin:44px auto 0;color:var(--muted);font-size:14.5px;text-decoration:none;width:max-content;padding:8px 14px;border-radius:999px}
.scroll-cue:hover{color:var(--text)}
.scroll-cue svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{50%{translate:0 5px}}
.gfx-lite .scroll-cue svg{animation:none}

/* story */
.story{position:relative;padding:80px 0;transition:--hue .8s;--hue:var(--accent)}
.story[data-ch="1"]{--hue:var(--ok)}.story[data-ch="2"]{--hue:var(--warn)}
.story::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(55% 45% at 72% 50%,color-mix(in srgb,var(--hue) 15%,transparent),transparent 70%)}
.story-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}
.story h2{margin-bottom:26px;font-size:clamp(22px,2vw,28px);font-weight:650;color:var(--muted)}
.chapters{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.chapter{padding:18px 20px;border-radius:var(--r);border:1px solid var(--line);cursor:pointer;transition:border-color .3s,background .3s}
.chapter.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.ch-n{font-size:14px;font-weight:650;color:var(--accent);font-variant-numeric:tabular-nums}
.chapter h3{font-size:clamp(30px,3.6vw,52px);font-weight:780;font-stretch:121%;line-height:1;margin:6px 0 10px}
.chapter p{margin:0;color:var(--muted);max-width:44ch}
.chapter .ch-s{color:var(--text);font-weight:600;margin-bottom:6px}
.chapter .chips{margin-top:16px}
.rail{display:none}
.story.pin{height:340vh;padding:0}
.story.pin .story-pin{position:sticky;top:68px;height:calc(100svh - 68px);display:flex;align-items:center;overflow:clip}
.story.pin .story-in{width:100%}
.story.pin .chapters{display:block;position:relative;min-height:300px}
.story.pin .chapter{position:absolute;inset:0 0 auto 0;border:0;background:none;padding:0;cursor:default;opacity:0;transform:translateY(40px);transition:opacity .5s,transform .7s cubic-bezier(.2,.7,.2,1),filter .5s;pointer-events:none}
.gfx-high .story.pin .chapter{filter:blur(8px)}
.story.pin .chapter.past{transform:translateY(-40px)}
.story.pin .chapter.on{opacity:1;transform:none;filter:none;pointer-events:auto}
.story.pin .rail{display:flex;gap:8px;margin-top:22px;max-width:360px}
.rail i{flex:1;height:4px;border-radius:2px;background:var(--line);overflow:hidden;position:relative}
.rail i::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--f,0))}
.motion .story .scene{transform:scale(.9) translateY(18px);transform-origin:320px 210px;transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1),filter .7s}
.gfx-high .story .scene{filter:blur(10px)}
.motion .story .scene.on{transform:none;filter:none}
.story .stage{border-color:transparent;background:linear-gradient(160deg,var(--panel),var(--panel2)) padding-box,conic-gradient(from var(--ang),var(--accent),transparent 28%,var(--ok) 52%,transparent 76%,var(--accent)) border-box;animation:angr 9s linear infinite}
.tabs button{transition:background .3s,color .3s}
.tabs button:hover{color:var(--text)}.tabs button[aria-selected=true]:hover{color:#fff}

/* micro-interactions */
.btn-a{transition:transform .25s cubic-bezier(.2,.7,.2,1),filter .15s,box-shadow .3s}
.btn-a:hover{box-shadow:0 14px 40px -10px var(--accent),0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.btn-wa{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.btn-wa:hover{box-shadow:0 14px 40px -12px #25D366,0 0 0 4px color-mix(in srgb,#25D366 24%,transparent)}
.plan,.ind>div{position:relative}
.tile::before,.plan::before,.ind>div::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%)}
.gfx-high .tile:hover::before,.gfx-high .plan:hover::before,.gfx-high .ind>div:hover::before{opacity:1}
.ind>div:hover,.plan:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 26px 50px -34px var(--accent)}
.plan.hot,.plan.hot:hover{border-color:transparent;background:linear-gradient(170deg,color-mix(in srgb,var(--accent) 16%,var(--panel)),var(--panel)) padding-box,conic-gradient(from var(--ang),var(--accent),var(--ok),var(--accent) 55%,var(--warn),var(--accent)) border-box;animation:angr 7s linear infinite}
.gfx-lite .story .stage,.gfx-lite .plan.hot{animation:none}
.gfx-high.motion .rv{filter:blur(8px);transition-property:opacity,transform,filter}
.gfx-high.motion .rv.in{filter:none}

@media (max-width:1000px){
  .hero2{min-height:0;padding:34px 0 30px}.hero2 .hero-in{grid-template-columns:1fr;gap:26px}
  .orbit{max-width:430px}.scroll-cue{margin-top:26px}
  .story-in{grid-template-columns:1fr;gap:18px}.story .stage{order:-1}.story .stage figcaption{display:none}
  .story h2{font-size:18px;margin-bottom:12px}.story.pin .chapters{min-height:262px}
  .chapter h3{font-size:30px;margin:4px 0 6px}.chapter .chips{margin-top:10px}.story.pin .rail{margin-top:12px}
}
@media (max-width:560px){
  .fw{padding:8px 12px 8px 8px;font-size:11.5px;gap:8px;border-radius:14px}.fw b{font-size:12.5px}
  .bot,.cl-i{width:30px;height:30px}.av{width:24px;height:24px}
  .fw-diag{display:none}.fw-bot{left:0;top:4%}.fw-team{right:0;top:24%}.fw-cloud{left:0;bottom:8%}
  .stk{font-size:11px;padding:8px 10px;max-width:120px}.stk b{font-size:22px}.stk-a{left:auto;right:2%;top:-2%}.stk-b{right:2%;bottom:6%}
}