/* ===================================================================
   GreyStorme - 3D / motion layer
   Loaded after style.css. Everything degrades to the base design when
   JS or WebGL is unavailable, and respects prefers-reduced-motion.
   =================================================================== */
:root{--ease:cubic-bezier(.2,.8,.2,1)}

/* ---------- scroll progress ---------- */
.scroll-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--purple-deep),var(--purple-lift),#e3a6ff);
  box-shadow:0 0 12px rgba(176,46,224,.7)}

/* ---------- glass nav ---------- */
.nav{transition:background .3s,border-color .3s}
.nav.scrolled{background:rgba(10,10,10,.72);border-bottom-color:rgba(152,10,204,.28);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}

/* ---------- WebGL storm hero ---------- */
.storm3d{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.hero.has-3d .hero-bg{opacity:0}
.hero.has-3d::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,5,5,.8) 0%,rgba(5,5,5,.45) 38%,transparent 64%),
    linear-gradient(0deg,rgba(10,10,10,.95),transparent 24%)}
.hero-in{transform:translate3d(0,calc(var(--scroll,0) * 90px),0);opacity:calc(1 - var(--scroll,0) * 1.1)}
.hero h1{text-shadow:0 0 calc(var(--flash,0) * 40px) rgba(210,160,255,calc(var(--flash,0) * .8))}

/* headline: words rise in 3D */
.hero h1 .w{display:inline-block;perspective:700px}
.hero h1 .wi{display:inline-block;transform-origin:50% 100%;
  animation:gsRise 1s var(--ease) both;animation-delay:calc(var(--i) * 65ms + 120ms)}
.hero h1 .accent .wi{
  background:linear-gradient(100deg,#980acc 0%,#d27bff 30%,#fff 45%,#d27bff 60%,#980acc 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gsRise 1s var(--ease) both,gsShimmer 5s linear infinite;
  animation-delay:calc(var(--i) * 65ms + 120ms),1.6s}
@keyframes gsRise{from{opacity:0;transform:translateY(55%) rotateX(-85deg)}to{opacity:1;transform:none}}
@keyframes gsShimmer{from{background-position:120% 0}to{background-position:-130% 0}}

.hero-in > *:not(h1){animation:gsFadeUp 1s var(--ease) both}
.hero-in .hero-tag{animation-delay:.05s}
.hero-in .lead{animation-delay:.55s}
.hero-in .sub{animation-delay:.7s}
.hero-in .hero-actions{animation-delay:.85s}
@keyframes gsFadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn-primary:hover::after{transform:translateX(120%)}
.btn.magnet{transition:transform .25s var(--ease),box-shadow .16s,background .16s,color .16s}

/* ---------- stats: receding neon grid floor ---------- */
.stats{position:relative;overflow:hidden;perspective:520px}
.stats::before{content:"";position:absolute;left:-60%;right:-60%;bottom:-20%;height:220%;pointer-events:none;
  background-image:
    linear-gradient(rgba(152,10,204,.45) 1px,transparent 1px),
    linear-gradient(90deg,rgba(152,10,204,.45) 1px,transparent 1px);
  background-size:64px 64px;transform-origin:50% 100%;transform:rotateX(76deg);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 45%,#000 80%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 45%,#000 80%,transparent 100%);
  opacity:.5;animation:gsGrid 2.4s linear infinite}
@keyframes gsGrid{to{background-position:0 64px}}
.stats .wrap{position:relative;z-index:1}
.stat .num{background:linear-gradient(180deg,#fff 35%,#bda6cc);-webkit-background-clip:text;background-clip:text;
  color:transparent;filter:drop-shadow(0 0 18px rgba(152,10,204,.4));font-variant-numeric:tabular-nums}

/* ---------- light sections: content sits above seams, ghosts and glow ---------- */
.light{position:relative}
.light > .wrap{position:relative;z-index:1}

/* ---------- 3D tilt + glare ---------- */
.tilt{position:relative;transform-style:preserve-3d}
.tilt .glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.6),rgba(255,255,255,0) 48%);
  mix-blend-mode:soft-light;z-index:2}
.tilt.tilting .glare{opacity:1}
.tilt.tilting{transition:transform .1s linear,box-shadow .25s,border-color .25s!important;
  box-shadow:0 34px 60px rgba(10,10,10,.18),0 0 0 1px rgba(152,10,204,.35)}
.card.tilt h3,.plan.tilt h3,.plan.tilt .tier{transform:translateZ(34px)}
.card.tilt ul,.plan.tilt p{transform:translateZ(16px)}

/* featured plan: rotating conic border */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.plan.feat{border:2px solid transparent;
  background:linear-gradient(165deg,#fbfbfc,#e8e8ea) padding-box,
    conic-gradient(from var(--ang),var(--purple),#e3a6ff,var(--purple-deep),#e3a6ff,var(--purple)) border-box;
  animation:gsAng 6s linear infinite}
.plan.feat:hover{border-color:transparent}
@keyframes gsAng{to{--ang:360deg}}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:perspective(1100px) translate3d(0,48px,0) rotateX(-14deg);
  transition:opacity .9s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
.reveal.done{transition:transform .6s var(--ease),box-shadow .2s,border-color .2s,opacity .3s}

/* ---------- process timeline draws itself ---------- */
.steps.fx::before{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s var(--ease) .2s}
.steps.fx.in::before{transform:none}
.steps.fx .step .no::after{transform:scale(0);transition:transform .6s cubic-bezier(.3,1.6,.5,1);
  transition-delay:calc(var(--d,0ms) + 450ms)}
.steps.fx .step.in .no::after{transform:none;animation:gsPulse 2.6s ease-out 1.6s infinite}
@keyframes gsPulse{
  0%{box-shadow:0 0 0 5px var(--panel),0 0 0 5px rgba(152,10,204,.5)}
  100%{box-shadow:0 0 0 5px var(--panel),0 0 0 20px rgba(152,10,204,0)}}

/* ---------- about: extruded 3D monogram ---------- */
.about-logo{position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 42%,#2a0a3a 0%,#0a0a0a 62%)}
.about-logo::before{content:"";position:absolute;width:150%;aspect-ratio:1;left:-25%;top:-25%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0%,rgba(152,10,204,.28) 12%,transparent 30%);
  animation:gsRot 9s linear infinite}
@keyframes gsRot{to{transform:rotate(360deg)}}
.about-logo .mono{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;perspective:800px}
/* the real GS mark, extruded: grey front face over purple depth layers */
.logo3d{display:grid;transform-style:preserve-3d;animation:gsSwing 7s ease-in-out infinite alternate}
.logo3d img{grid-area:1/1;display:block;width:min(220px,52vw);height:auto}
.logo3d img.front{filter:brightness(.8) drop-shadow(0 0 18px rgba(175,71,244,.3))}
.logo3d img.depth{filter:brightness(var(--b,.5)) sepia(1) hue-rotate(228deg) saturate(4)}
@keyframes gsSwing{from{transform:rotateY(-26deg) rotateX(10deg)}to{transform:rotateY(26deg) rotateX(-6deg)}}

/* brand lockup colours taken from the logo: grey mark + wordmark, purple tagline */
:root{--logo-grey:#b8b8bc;--logo-purple:#af47f4}
.about-logo .mono .nm{font-family:'Poppins',sans-serif;font-weight:300;font-size:clamp(18px,2.2vw,26px);
  letter-spacing:.32em;padding-left:.32em;color:var(--logo-grey);margin-top:22px}
.about-logo .mono .tl{font-family:'Poppins',sans-serif;font-weight:400;font-size:clamp(11px,1.25vw,14px);
  letter-spacing:.2em;padding-left:.2em;color:var(--logo-purple);margin-top:6px}

.brand .brand-mark{height:34px;width:auto;filter:brightness(.85);transition:transform .8s var(--ease)}
.brand:hover .brand-mark{transform:perspective(300px) rotateY(360deg)}
.brand .brand-word{font-family:'Poppins',sans-serif;font-weight:300;font-size:15px;letter-spacing:.3em;
  text-transform:uppercase;color:#d6d6d9}

.foot-brand{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:12px}
.foot-brand img{height:58px;width:auto;filter:brightness(.8);margin-bottom:12px}
.foot-brand .nm{font:300 18px 'Poppins',sans-serif;letter-spacing:.3em;color:var(--logo-grey)}
.foot-brand .tl{font:400 11px 'Poppins',sans-serif;letter-spacing:.2em;color:var(--logo-purple);margin-top:4px}

.wipe .wipe-logo{display:flex;flex-direction:column;align-items:center;gap:14px}
.wipe .wipe-logo img{height:96px;width:auto;filter:brightness(.85) drop-shadow(0 0 24px rgba(175,71,244,.35))}
.wipe .wipe-logo span{font:400 12px 'Poppins',sans-serif;letter-spacing:.22em;color:var(--logo-purple)}

/* ---------- discovery: floating 3D code screen ---------- */
.disco-img{perspective:1000px;background:radial-gradient(circle at 50% 60%,#efe4f6,#d6d6dc)}
.disco-img .screen.live{display:block;overflow:hidden;padding:6% 7%;
  box-shadow:0 34px 60px rgba(40,0,60,.35),0 0 70px rgba(152,10,204,.28);
  animation:gsFloat 6s ease-in-out infinite}
.disco-img .screen.live::before{content:none}
.disco-img .screen.live::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.13),transparent 42%)}
@keyframes gsFloat{
  0%,100%{transform:rotateX(12deg) rotateY(-18deg) translateY(0)}
  50%{transform:rotateX(6deg) rotateY(-8deg) translateY(-12px)}}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:clamp(9px,1.1vw,13px);
  line-height:1.75;color:#d6d6dc}
.code .ln{display:block;white-space:pre;overflow:hidden;width:0}
.code.run .ln{animation:gsType var(--dur) steps(var(--n)) forwards;animation-delay:var(--d)}
@keyframes gsType{to{width:calc(var(--n) * 1ch)}}
.code .k{color:#d27bff}.code .f{color:#7fd6ff}.code .s{color:#b8f08a}.code .c{color:#6e6e78}
.code .caret{display:inline-block;width:.6ch;height:1.1em;background:var(--purple-lift);vertical-align:middle;
  animation:gsBlink 1s steps(1) infinite}
@keyframes gsBlink{50%{opacity:0}}

/* ---------- closing CTA: wireframe orb ---------- */
.closer{position:relative;overflow:hidden}
.closer .wrap{position:relative;z-index:1}
.orb3d{position:absolute;left:50%;top:60%;width:min(600px,92vw);aspect-ratio:1;pointer-events:none;
  transform:translate(-50%,-50%);perspective:1400px;opacity:.6}
.orb3d .rig{position:absolute;inset:0;transform-style:preserve-3d;animation:gsOrb 26s linear infinite}
.orb3d i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(176,46,224,.5)}
.orb3d i.eq{border-color:rgba(227,166,255,.6);box-shadow:0 0 30px rgba(152,10,204,.35)}
.orb3d::after{content:"";position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(176,46,224,.55),transparent 70%);filter:blur(10px)}
@keyframes gsOrb{from{transform:rotateX(16deg) rotateY(0)}to{transform:rotateX(16deg) rotateY(360deg)}}

/* ===================================================================
   FLOW LAYER - things that carry the eye from one section to the next
   =================================================================== */

/* faint dot-grid texture fading down from the top of each light section */
.light{overflow-x:clip}
.light::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background-image:radial-gradient(rgba(10,10,10,.09) 1px,transparent 1.3px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000,transparent 75%)}

/* giant outlined ghost words drifting sideways with scroll */
.ghost{position:absolute;top:22px;left:0;z-index:0;white-space:nowrap;pointer-events:none;user-select:none;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(90px,17vw,260px);line-height:1;
  letter-spacing:-.04em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.2px rgba(10,10,10,.075);
  transform:translate3d(var(--drift,0px),0,0);will-change:transform}

/* eyebrow labels draw a leading line as they reveal */
.reveal .eyebrow{display:inline-flex;align-items:center}
.reveal .eyebrow::before{content:"";display:inline-block;width:0;height:2px;margin-right:0;background:currentColor;
  transition:width .8s var(--ease) .35s,margin-right .8s var(--ease) .35s}
.reveal.in .eyebrow::before{width:30px;margin-right:12px}

/* crossing marquee tapes over the first dark -> light seam */
.tapes{position:absolute;left:0;right:0;top:0;height:0;z-index:3;pointer-events:none}
.tape{position:absolute;left:-5%;width:110%;overflow:hidden;padding:14px 0;white-space:nowrap;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(14px,1.6vw,20px);
  letter-spacing:.08em;text-transform:uppercase}
.tape .track{display:inline-flex;will-change:transform}
.tape .it{display:inline-flex;align-items:center}
.tape .it::after{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;margin:0 36px;opacity:.7}
.tape.a{top:-30px;transform:rotate(-2.2deg);color:#fff;
  background:linear-gradient(90deg,var(--purple-deep),var(--purple),var(--purple-lift),var(--purple),var(--purple-deep));
  box-shadow:0 18px 40px rgba(152,10,204,.35)}
.tape.b{top:-26px;transform:rotate(1.7deg);background:#141417;color:rgba(255,255,255,.5);
  box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* section rail: where you are in the story (wide screens) */
.rail{position:fixed;left:26px;top:50%;z-index:90;display:none;flex-direction:column;gap:22px;
  transform:translateY(-50%);opacity:0;transition:opacity .5s}
.rail.show{opacity:1}
@media (min-width:1360px){.rail{display:flex}}
.rail::before,.rail .fill{content:"";position:absolute;left:5px;top:0;width:2px;height:100%;border-radius:2px}
.rail::before{background:rgba(140,140,140,.28)}
.rail .fill{transform-origin:50% 0;transform:scaleY(var(--p,0));
  background:linear-gradient(180deg,var(--purple-lift),var(--purple));box-shadow:0 0 10px rgba(176,46,224,.6)}
.rail a{position:relative;display:block;width:12px;height:12px;border-radius:50%;background:#0a0a0a;
  border:2px solid rgba(140,140,140,.7);transition:transform .3s var(--ease),border-color .3s,background .3s,box-shadow .3s}
.rail a.on{border-color:var(--purple-lift);background:var(--purple);transform:scale(1.3);box-shadow:0 0 0 4px rgba(152,10,204,.2)}
.rail a span{position:absolute;left:24px;top:50%;white-space:nowrap;pointer-events:none;opacity:0;
  transform:translate(-6px,-50%);transition:opacity .25s,transform .25s var(--ease);
  font:600 11px 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:rgba(10,10,10,.88);padding:5px 9px;border-radius:6px}
.rail a:hover span,.rail a:focus-visible span{opacity:1;transform:translate(0,-50%)}

/* custom cursor (mouse devices only) */
.cursor,.cursor-dot{position:fixed;left:0;top:0;border-radius:50%;pointer-events:none;z-index:300;opacity:0;transition:opacity .3s}
.cursor{width:36px;height:36px;margin:-18px 0 0 -18px;border:1.5px solid rgba(176,46,224,.75);
  transition:opacity .3s,width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,border-color .3s}
.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--purple-lift)}
.cursor.on,.cursor-dot.on{opacity:1}
.cursor.hot{width:66px;height:66px;margin:-33px 0 0 -33px;background:rgba(152,10,204,.12);border-color:rgba(176,46,224,.35)}

/* page-to-page wipe */
.wipe{position:fixed;inset:0;z-index:500;pointer-events:none;display:grid;place-items:center;background:#0a0a0a;
  transform:translateY(100%);transition:transform .62s cubic-bezier(.75,0,.2,1)}
.wipe::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--purple-deep),var(--purple-lift),#e3a6ff);box-shadow:0 0 24px rgba(176,46,224,.8)}
.wipe.cover{transform:none}
.wipe.gone{transform:translateY(-100%)}
.wipe.snap{transition:none}
html.wiped .hero h1 .wi{animation-delay:calc(var(--i) * 65ms + 480ms)}
html.wiped .hero h1 .accent .wi{animation-delay:calc(var(--i) * 65ms + 480ms),2s}
html.wiped .hero-in .hero-tag{animation-delay:.4s}
html.wiped .hero-in .lead{animation-delay:.85s}
html.wiped .hero-in .sub{animation-delay:1s}
html.wiped .hero-in .hero-actions{animation-delay:1.15s}

/* nav: underline glides between links (desktop only; mobile menu stays absolute) */
@media (min-width:861px){.nav-links{position:relative}}
.nav-glide{position:absolute;left:0;top:0;height:2px;width:0;border-radius:2px;pointer-events:none;
  background:var(--purple-lift);box-shadow:0 0 10px rgba(176,46,224,.8);
  transition:transform .45s var(--ease),width .45s var(--ease),opacity .3s}
.nav-links.glide a.active{border-bottom-color:transparent}

@media (max-width:860px){
  .nav-glide{display:none}
  .nav-links.glide a.active{border-bottom-color:rgba(255,255,255,.05)}
  .tape{padding:10px 0}
  .tape .it::after{margin:0 22px}
}
@media (prefers-reduced-motion:reduce){
  .ghost{transform:none}
  .cursor,.cursor-dot,.wipe{display:none}
}

/* ---------- section seams ----------
   No hard edges. Where dark meets light, flow.js inserts a tall, text-free
   .seam band that starts on the exact colour the section above ends on
   (--from), passes through deep brand purple instead of muddy grey, and
   lands on the exact colour this section starts on (--to). Dark-to-dark
   joins share one tone so there is nothing to see. */
:root{--fade:230px}
.hero.has-3d::after{background:
    linear-gradient(90deg,rgba(5,5,5,.8) 0%,rgba(5,5,5,.45) 38%,transparent 64%),
    linear-gradient(0deg,#0a0a0a 0%,rgba(10,10,10,.85) 9%,transparent 34%)}
.stats{background:#0a0a0a;border-top:0}

.seam-host{position:relative}
.light.seam-host,.stats.seam-host,.closer.seam-host{padding-top:calc(var(--pad-sec) + var(--fade))}
.foot.seam-host{padding-top:calc(56px + var(--fade))}
.foot .wrap{position:relative;z-index:1}
.seam{position:absolute;left:0;right:0;top:0;height:var(--fade);z-index:0;pointer-events:none}
.seam.to-light{background:
  radial-gradient(ellipse 55% 70% at 50% 50%,rgba(152,10,204,.28),transparent 70%),
  linear-gradient(180deg,var(--from) 0%,#120a18 18%,#2e1a3c 36%,#6f5582 56%,#b9aac6 76%,var(--to) 100%)}
.seam.to-dark{background:
  radial-gradient(ellipse 55% 70% at 50% 50%,rgba(152,10,204,.22),transparent 70%),
  linear-gradient(180deg,var(--from) 0%,#c2b4ce 22%,#7a5f8e 42%,#3a2448 62%,#160d1c 82%,var(--to) 100%)}
.light.seam-host::before{top:var(--fade)}
.seam-host .ghost{top:calc(var(--fade) + 22px)}
.seam .tapes{top:50%}

/* one page-wide cursor glow - never clipped by section edges */
.glow-follow{position:fixed;left:0;top:0;width:680px;height:680px;margin:-340px 0 0 -340px;border-radius:50%;
  z-index:0;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(circle,rgba(152,10,204,.13) 0%,rgba(152,10,204,.06) 32%,transparent 66%)}
.glow-follow.on{opacity:1}
html.js-smooth{scroll-behavior:auto}
@media (max-width:860px){:root{--fade:150px}}

.closer{background:
  radial-gradient(ellipse 70% 60% at 50% 78%,rgba(152,10,204,.22),transparent 70%),
  linear-gradient(180deg,#0a0a0a 0%,#0c0c0e 100%)}
.closer .zero{color:var(--grey-2)}
.orb3d{-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 86%);
  mask-image:linear-gradient(180deg,#000 45%,transparent 86%)}

/* ---------- responsive ---------- */
@media (max-width:860px){
  :root{--sheet:28px}
  .hero.has-3d::after{background:linear-gradient(180deg,rgba(5,5,5,.15) 0%,rgba(5,5,5,.7) 42%,rgba(10,10,10,.92) 88%,#0a0a0a 100%)}
  .steps.fx::before{transform:scaleY(0);transform-origin:50% 0}
}

/* ---------- reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .hero-in{transform:none;opacity:1}
  .code .ln{width:auto!important}
  .steps.fx::before,.steps.fx .step .no::after{transform:none!important}
  .brand:hover .brand-mark{transform:none}
}

/* ---------- header: hides on scroll down, returns on scroll up ---------- */
.nav{transition:transform .45s var(--ease),background .3s,border-color .3s;will-change:transform}
.nav.nav-hidden{transform:translateY(-100%)}
@media (max-width:860px){
  /* a closed menu must take no space at all: its padding used to show as a black bar under the header */
  .nav-links{padding-top:0;padding-bottom:0;border-bottom-width:0;visibility:hidden;
    transition:max-height .3s ease,padding .3s ease,visibility 0s linear .3s}
  .nav-links.open{padding-top:8px;padding-bottom:20px;border-bottom-width:1px;visibility:visible;
    transition:max-height .3s ease,padding .3s ease,visibility 0s}
}
@media (prefers-reduced-motion:reduce){.nav{transition:none}}
/* ---------- cursor v2: one thick brand ring (inspired by cleardigital.com) ---------- */
@media (hover:hover) and (pointer:fine){
  html.has-cursor,html.has-cursor *{cursor:none!important}
}
.cursor,.cursor.hot{width:0;height:0;margin:0;border:0;background:none;z-index:9999}
.cursor i{position:absolute;left:-12px;top:-12px;width:24px;height:24px;border-radius:50%;box-sizing:border-box;
  border:5px solid var(--purple-lift);
  transition:transform .25s var(--ease),border-width .25s var(--ease),background-color .25s,border-color .25s}
.cursor.card i{transform:scale(1.45);border-width:4px}
.cursor.hot i{transform:scale(2.2);border-width:2px;background-color:rgba(176,46,224,.16)}
.cursor.down i{transform:scale(.7)}
.cursor.hot.down i{transform:scale(1.8)}
.cursor-dot{display:none}
@media (prefers-reduced-motion:reduce){html.has-cursor,html.has-cursor *{cursor:auto!important}}
/* ===================================================================
   CARD 3D LAYER (js/cards3d.js)
   =================================================================== */

/* 1) service cards: dealt out of a deck */
.cards.deal{perspective:1800px;transform-style:preserve-3d}
.cards.deal .card{will-change:transform,opacity;transform-origin:50% 60%}

/* 2) plans: coverflow stage */
@media (min-width:861px){
  .plans.stage{perspective:1700px;transform-style:preserve-3d}
  .plans.stage .plan{transition:transform .8s var(--ease),opacity .6s,box-shadow .5s,filter .5s,border-color .3s}
  .plans.stage .plan:nth-child(1){transform:rotateY(18deg) translateZ(-80px) translateX(18px);transform-origin:100% 50%}
  .plans.stage .plan:nth-child(2){transform:translateZ(30px)}
  .plans.stage .plan:nth-child(3){transform:rotateY(-18deg) translateZ(-80px) translateX(-18px);transform-origin:0 50%}
  .plans.stage:not(.stage-in) .plan:nth-child(n){opacity:0;transform:translateY(80px) translateZ(-320px) rotateX(24deg)}
  .plans.stage.stage-in:not(.settled) .plan:nth-child(2){transition-delay:.12s}
  .plans.stage.stage-in:not(.settled) .plan:nth-child(3){transition-delay:.24s}
  .plans.stage:hover .plan:nth-child(n){transform:translateZ(-60px);filter:saturate(.6);opacity:.82}
  .plans.stage .plan:nth-child(n):hover{transform:translateZ(70px) translateY(-10px);filter:none;opacity:1;
    box-shadow:0 40px 80px rgba(40,0,60,.22),0 0 0 1px rgba(152,10,204,.5)}
}

/* 3) feature cards: dominoes + light sweep */
.feats.domino{transform-style:preserve-3d}
.feats.domino .feat{transform-origin:50% 100%;will-change:transform,opacity;
  background-image:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.95) 50%,transparent 65%),linear-gradient(160deg,#fbfbfc,#ececed);
  background-size:260% 100%,100% 100%;background-repeat:no-repeat;background-position:160% 0,0 0}
.feats.domino .feat.lit{animation:gsFeatShine 1.2s var(--ease) both}
.feats.domino .feat.lit .ic{animation:gsIcPop .7s cubic-bezier(.3,1.8,.5,1) both}
@keyframes gsFeatShine{from{background-position:160% 0,0 0}to{background-position:-70% 0,0 0}}
@keyframes gsIcPop{from{transform:scale(.3) rotate(-30deg)}to{transform:none}}

/* 4) dark link cards: cursor spotlight border */
.svc-links.spot .svc-link{position:relative;isolation:isolate;transition:transform .5s var(--ease),border-color .3s}
.svc-links.spot .svc-link::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1px;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,-9999px) var(--my,-9999px),rgba(220,150,255,1),rgba(152,10,204,.45) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.svc-links.spot .svc-link::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,-9999px) var(--my,-9999px),rgba(152,10,204,.24),transparent 60%)}
.svc-links.spot .svc-link:hover{transform:perspective(800px) rotateX(7deg) translateY(-8px);border-color:transparent}

/* 5) FAQ: pinned 3D picker wheel + clock dial */
.faq-wheel .fw-track{position:relative}
.faq-wheel .fw-stage{position:sticky;top:0;height:100vh;height:100svh;padding-top:74px;
  display:grid;grid-template-columns:minmax(260px,.8fr) 1.2fr;gap:56px;align-items:center}
.faq-wheel .fw-left{display:flex;flex-direction:column;align-items:flex-start}
.faq-wheel .sec-head{text-align:left;margin:0 0 26px;max-width:none}
.faq-wheel .sec-head h2{font-size:clamp(28px,3.4vw,42px)}
.fw-readout{display:flex;align-items:center;gap:26px}
.fw-dial{width:min(230px,30vh);aspect-ratio:1;flex:none;filter:drop-shadow(0 24px 40px rgba(40,0,60,.16))}
.fw-dial svg{display:block;width:100%;height:100%;overflow:visible}
.fw-face{fill:#fff;stroke:rgba(10,10,10,.06);stroke-width:1}
.fw-min{stroke:rgba(10,10,10,.16);stroke-width:1}
.fw-min.major{stroke:rgba(10,10,10,.38);stroke-width:2}
.fw-ring{fill:none;stroke:rgba(152,10,204,.12);stroke-width:7}
.fw-arc{fill:none;stroke-width:7;stroke-linecap:round}
.fw-q{fill:#fff;stroke:rgba(152,10,204,.4);stroke-width:2;transition:fill .3s,stroke .3s}
.fw-q.on{fill:var(--purple);stroke:#fff}
.fw-hand{stroke:var(--ink);stroke-width:3.5;stroke-linecap:round}
.fw-pin{fill:var(--purple);stroke:#fff;stroke-width:2.5}
.fw-num{display:flex;align-items:baseline;gap:8px;font-family:'Space Grotesk',sans-serif}
.fw-num b{font-size:clamp(44px,5vw,72px);line-height:1;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.fw-num span{font-size:18px;font-weight:600;color:var(--grey-2)}
.fw-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.fw-jump button{width:40px;height:40px;border-radius:50%;cursor:pointer;font:600 12px 'DM Sans',sans-serif;color:var(--grey-3);
  background:#fff;border:1px solid rgba(10,10,10,.12);transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.fw-jump button:hover{border-color:var(--purple);color:var(--purple);transform:translateY(-2px)}
.fw-jump button.on{background:var(--purple);border-color:var(--purple);color:#fff}
.fw-hint{margin-top:18px;font:600 11px 'DM Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-2)}
.fw-wheel{position:relative;height:min(600px,72vh);perspective:1400px}
.faq-wheel .faq-grid{display:block;position:absolute;inset:0;max-width:none;margin:0;transform-style:preserve-3d}
.faq-wheel .faq{position:absolute;left:0;right:0;top:50%;margin:0;padding:26px 30px;border-radius:18px;
  background:linear-gradient(160deg,#fff,#f0f0f3);border:1px solid rgba(10,10,10,.08);box-shadow:0 18px 44px rgba(20,0,30,.08);
  backface-visibility:hidden;will-change:transform,opacity;transition:border-color .4s,box-shadow .4s}
.faq-wheel .faq h3{display:flex;align-items:baseline;gap:14px;margin:0;font-size:clamp(17px,1.7vw,22px)}
.faq-wheel .faq h3::before{content:attr(data-n);flex:none;font:700 13px 'Space Grotesk',sans-serif;letter-spacing:.08em;color:var(--purple)}
.faq-wheel .faq p{max-height:0;opacity:0;overflow:hidden;margin:0;padding-left:34px;font-size:15.5px;
  transition:max-height .55s var(--ease),opacity .45s,margin .55s var(--ease)}
.faq-wheel .faq.is-active{border-color:rgba(152,10,204,.5);box-shadow:0 34px 80px rgba(60,0,90,.2)}
.faq-wheel .faq.is-active p{max-height:320px;opacity:1;margin-top:12px}

@media (max-width:860px){
  .faq-wheel .fw-stage{grid-template-columns:1fr;gap:10px;align-content:center;padding-top:70px}
  .faq-wheel .sec-head{margin-bottom:12px}
  .faq-wheel .sec-head h2{font-size:26px}
  .fw-readout{gap:16px}
  .fw-dial{width:104px}
  .fw-num b{font-size:40px}
  .fw-jump,.fw-hint{display:none}
  .fw-wheel{height:56vh;height:56svh}
  .faq-wheel .faq{padding:20px 22px}
  .faq-wheel .faq p{padding-left:0}
}

/* ===================================================================
   CAROUSELS (js/carousels.js)
   =================================================================== */
.car{position:relative;outline:none}
.car:focus-visible{outline:3px solid var(--purple-lift);outline-offset:8px;border-radius:18px}
.car-track{position:relative}
.cards.car-track,.plans.car-track{display:block}
.car-orbit .car-track{perspective:1500px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.car-orbit .car-track > *{position:absolute;margin:0;backface-visibility:hidden;transition:box-shadow .35s,border-color .35s}
.car-orbit .car-track > .is-active{box-shadow:0 34px 80px rgba(40,0,60,.18)}
.car-orbit .plan.feat.is-active{box-shadow:0 34px 80px rgba(152,10,204,.25)}

.car-ui{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:28px}
.car-btn{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;cursor:pointer;
  background:#fff;border:1px solid rgba(10,10,10,.14);transition:background .25s,border-color .25s,transform .25s var(--ease)}
.car-btn::before{content:"";width:9px;height:9px;margin-left:4px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(135deg)}
.car-next::before{margin-left:-4px;transform:rotate(-45deg)}
.car-btn:hover{background:var(--purple);border-color:var(--purple);transform:scale(1.06)}
.car-btn:hover::before{border-color:#fff}
.car-dots{display:flex;align-items:center;gap:8px}
.car-dot{width:10px;height:10px;padding:0;border:0;border-radius:10px;cursor:pointer;background:rgba(10,10,10,.18);
  transition:width .4s var(--ease),background .3s}
.car-dot.on{width:32px;background:var(--purple)}
.car-count{min-width:70px;text-align:center;font:600 14px 'Space Grotesk',sans-serif;color:var(--grey-3)}
.car-count b{font-size:18px;color:var(--ink)}
.car-bar{position:relative;width:min(340px,46vw);height:3px;border-radius:3px;overflow:hidden;background:rgba(10,10,10,.12)}
.car-bar i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(.2);
  background:linear-gradient(90deg,var(--purple-deep),var(--purple-lift))}

/* slider */
.car-viewport{overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;perspective:1400px;
  padding:16px 6px 34px;margin:-16px -6px -34px}
.feats.car-track{display:flex;gap:22px;will-change:transform}
.feats.car-track .feat{flex:none;transition:border-color .18s}

/* deck */
.car-deck .car-track{display:block;max-width:620px;margin:0 auto;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.car-deck .car-track > .card{position:absolute;left:0;right:0;top:0;transform-origin:50% 100%;
  transition:transform .45s var(--ease),opacity .35s,box-shadow .3s}
.car-deck .card.is-top{box-shadow:0 30px 60px rgba(40,0,60,.14)}
.car-deck.dragging .card.is-top{transition:none}
.car-deck .card.fly{transition:transform .36s cubic-bezier(.5,0,.75,0),opacity .36s}

@media (max-width:860px){
  .car-ui{gap:12px}
  .car-btn{width:42px;height:42px}
  .car-count{min-width:56px}
}

/* ---------- cursor v3: dot + trailing ring that morphs with context ---------- */
.cursor i{left:-17px;top:-17px;width:34px;height:34px;border-width:2px;background-color:transparent}
.cursor.card i{transform:scale(1.25);border-width:2px}
.cursor.hot i{transform:scale(1.75);border-width:1.5px;background-color:rgba(176,46,224,.14)}
.cursor.label i{transform:scale(2.6);border-width:0;background-color:var(--purple)}
.cursor.down i{transform:scale(.72)}
.cursor.label.down i{transform:scale(2.25)}
.cursor b{position:absolute;left:0;top:0;white-space:nowrap;pointer-events:none;opacity:0;
  transform:translate(-50%,-50%) scale(.6);font:700 10.5px 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  transition:opacity .2s,transform .3s var(--ease)}
.cursor.label b{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cursor-dot{display:block;position:fixed;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:var(--purple-lift);pointer-events:none;z-index:10000;opacity:0;transition:opacity .2s}
.cursor-dot.on{opacity:1}
.cursor-dot.on.hide{opacity:0}

/* ---------- carousel dots: 24px tap targets, same small pill look ---------- */
.car-dots{gap:2px}
.car-dot{position:relative;width:24px;height:24px;background:transparent;transition:width .4s var(--ease)}
.car-dot::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:10px;
  transform:translate(-50%,-50%);background:rgba(10,10,10,.18);transition:width .4s var(--ease),background .3s}
.car-dot.on{width:40px;background:transparent}
.car-dot.on::before{width:32px;background:var(--purple)}