/* ============================================================
   GROWTH STACK — Design System
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --bg:#05060A;
  --bg-2:#080A11;
  --surface:rgba(255,255,255,.038);
  --surface-2:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.09);
  --stroke-2:rgba(255,255,255,.16);

  --text:#F5F7FB;
  --text-2:#A8B0C2;
  /* #6C7488 measured 4.33:1 on the page background — just under WCAG AA's 4.5.
     #767E93 lifts it to ~4.9 while staying visually muted. */
  --text-3:#767E93;

  /* Palette anchored on the logo's exact cyan, #5CE0E6 (sampled from logo.png).
     Legacy token names kept so every existing rule keeps working. */
  --blue:#1BA8BC;      /* deep cyan   */
  --blue-l:#5CE0E6;    /* LOGO cyan — the primary accent */
  --indigo:#21C1D4;    /* teal-cyan   */
  --indigo-l:#7FEAF0;  /* light cyan  */
  --cyan:#34D9E4;
  --sky:#A5F0F5;

  /* Light -> mid -> deep so the gradient still reads with depth instead of a flat wash. */
  --grad:linear-gradient(120deg,#7FEAF0 0%,#34D9E4 46%,#1B9FC4 100%);
  --grad-soft:linear-gradient(135deg,rgba(92,224,230,.16),rgba(33,193,212,.10));

  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-full:999px;

  --shadow-sm:0 2px 10px rgba(0,0,0,.3);
  --shadow-md:0 18px 46px -12px rgba(0,0,0,.62);
  --shadow-lg:0 40px 90px -22px rgba(0,0,0,.75);
  --glow:0 0 0 1px rgba(92,224,230,.22), 0 18px 60px -14px rgba(27,168,188,.42);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --t-fast:.22s; --t:.28s; --t-slow:.85s;

  --container:1200px;
  --gut:clamp(20px,5vw,40px);
  --font-display:"Sora","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --nav-h:74px;
  /* Unitless twins of the nav heights: CSS cannot divide one length by another,
     and the stuck bar is drawn by scaling rather than resizing. */
  --nav-h-n:74;
  --nav-stuck:64px;
  --nav-stuck-n:64;

  --f-display:clamp(2.9rem,6.6vw,5rem);
  --f-h2:clamp(2.1rem,4.6vw,3.5rem);
  --f-h3:clamp(1.28rem,1.95vw,1.55rem);
  --f-body:clamp(1rem,1.12vw,1.075rem);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html:focus-within{scroll-padding-top:calc(var(--nav-h) + 24px)}

/* Display face carries the headings and figures; Inter stays on body copy,
   where legibility matters more than character. */
h1,h2,h3,h4,h5,h6,
.hero__title,.section__title,.cta__title,
.stat__num,.tier__price,.roi__figure,.founder__monogram,.logo__text{
  font-family:var(--font-display);
}

body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:var(--f-body);
  line-height:1.65;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
h1,h2,h3,h4{line-height:1.1;letter-spacing:-.035em;font-weight:700}
::selection{background:rgba(92,224,230,.32);color:#fff}

:focus-visible{outline:2px solid var(--blue-l);outline-offset:3px;border-radius:6px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* White on --blue (#1BA8BC) measured only 3.68:1; #1D4ED8 takes it to ~6.7.
   A keyboard-accessibility affordance has to be legible itself. */
/* Logo cyan with near-black text — matches the primary button and measures ~12.6:1. */
.skip-link{position:fixed;top:-100px;left:16px;z-index:1000;background:var(--blue-l);color:#04070F;padding:12px 20px;border-radius:var(--r-sm);font-weight:700;transition:top var(--t-fast)}
.skip-link:focus{top:16px}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gut)}
.container--narrow{max-width:880px}
.section{position:relative;padding:clamp(84px,11vw,148px) 0}
.section--tight{padding-block:clamp(56px,7vw,92px)}

.section__head{max-width:760px;margin-bottom:clamp(48px,6vw,72px)}
/* Every head left-aligned over a grid is what made the page read as one block
   repeated. Centring alternate sections gives the scroll a rhythm. */
.section__head--center{margin-inline:auto;text-align:center}
.section__head--center .section__sub{margin-inline:auto}

/* A tinted full-bleed band breaks the identical-background run. */
.section--band{
  background:
    radial-gradient(120% 70% at 50% 0%,rgba(92,224,230,.055),transparent 62%),
    rgba(255,255,255,.018);
  border-block:1px solid var(--stroke-2);
}
.section__title{font-size:var(--f-h2);font-weight:700;margin:14px 0 18px;color:var(--text)}
.section__sub{color:var(--text-2);font-size:1.075rem;max-width:58ch}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.735rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue-l);
}
.eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,transparent,var(--blue-l))}

/* ---------- Ambient background ---------- */
.bg{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}

.bg__mesh{
  position:absolute;inset:0;
  background:
    radial-gradient(58% 44% at 18% 8%,rgba(27,168,188,.20),transparent 62%),
    radial-gradient(48% 40% at 84% 14%,rgba(33,193,212,.17),transparent 60%),
    radial-gradient(60% 50% at 50% 108%,rgba(52,217,228,.11),transparent 66%);
  animation:meshShift 22s var(--ease-io) infinite alternate;
  will-change:transform,opacity;
}
@keyframes meshShift{
  from{transform:scale(1) translate3d(0,0,0);opacity:.9}
  to{transform:scale(1.14) translate3d(-2%,2%,0);opacity:1}
}

.bg__orb{position:absolute;border-radius:50%;filter:blur(96px);opacity:.5;will-change:transform}
.bg__orb--1{width:min(48vw,620px);aspect-ratio:1;background:radial-gradient(circle,rgba(27,168,188,.55),transparent 68%);top:-14%;left:-8%;animation:orbA 26s var(--ease-io) infinite alternate}
.bg__orb--2{width:min(42vw,540px);aspect-ratio:1;background:radial-gradient(circle,rgba(33,193,212,.48),transparent 68%);top:24%;right:-12%;animation:orbB 31s var(--ease-io) infinite alternate}
.bg__orb--3{width:min(52vw,660px);aspect-ratio:1;background:radial-gradient(circle,rgba(52,217,228,.30),transparent 70%);bottom:-22%;left:32%;animation:orbC 36s var(--ease-io) infinite alternate}
@keyframes orbA{to{transform:translate3d(14%,18%,0) scale(1.18)}}
@keyframes orbB{to{transform:translate3d(-16%,22%,0) scale(1.12)}}
@keyframes orbC{to{transform:translate3d(10%,-16%,0) scale(1.2)}}

.bg__particles{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.bg__noise{
  position:absolute;inset:0;opacity:.028;mix-blend-mode:overlay;
  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='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Glass ---------- */
.glass{
  position:relative;
  background:linear-gradient(160deg,rgba(255,255,255,.062),rgba(255,255,255,.022));
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.07);
}
.glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,rgba(255,255,255,.22),transparent 42%,transparent 62%,rgba(92,224,230,.16));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;opacity:.7;transition:opacity var(--t) var(--ease);
}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:transparent;
  /* Transparent border on every variant: outline buttons carry a real 1px
     one, and without this the filled variants box 2px shorter than them. */
  border:1px solid transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:var(--r-full);
  font-size:.925rem;font-weight:600;letter-spacing:-.012em;white-space:nowrap;
  overflow:hidden;isolation:isolate;
  transform:translateZ(0);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),
             background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.btn svg{width:15px;height:15px;flex:none;transition:transform var(--t) var(--ease)}
.btn:hover{transform:translateY(-2px) scale(1.028)}
.btn:active{transform:translateY(0) scale(.985)}
.btn:hover svg{transform:translateX(3px)}
.btn--sm{padding:10px 18px;font-size:.865rem}
.btn--lg{padding:16px 30px;font-size:1rem}
.btn--block{width:100%}

.btn--primary{
  background:var(--grad);background-size:180% 180%;
  color:#04070F;font-weight:700;
  box-shadow:0 10px 34px -10px rgba(27,168,188,.7),inset 0 1px 0 rgba(255,255,255,.32);
  animation:gradPan 7s var(--ease-io) infinite alternate;
}
@keyframes gradPan{to{background-position:100% 50%}}
.btn--primary:hover{box-shadow:0 18px 52px -12px rgba(27,168,188,.9),inset 0 1px 0 rgba(255,255,255,.42)}

.btn--shimmer::before{
  content:"";position:absolute;top:0;left:-140%;width:55%;height:100%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-22deg);animation:shimmer 4.4s var(--ease-io) infinite;
}
@keyframes shimmer{0%,62%{left:-140%}100%{left:170%}}

.btn--ghost{background:var(--surface);border:1px solid var(--stroke-2);color:var(--text);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.btn--ghost:hover{background:var(--surface-2);border-color:rgba(92,224,230,.5);box-shadow:0 12px 34px -14px rgba(92,224,230,.55)}

.btn--outline{background:transparent;border:1px solid var(--stroke-2);color:var(--text)}
.btn--outline:hover{background:rgba(92,224,230,.1);border-color:rgba(92,224,230,.55);color:#fff}

.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.42);pointer-events:none;z-index:2;animation:ripple .62s var(--ease) forwards}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}

/* ---------- Pill ---------- */
.pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 8px 7px 14px;border-radius:var(--r-full);
  background:var(--surface);border:1px solid var(--stroke-2);
  font-size:.815rem;font-weight:500;color:var(--text-2);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.pill:hover{border-color:rgba(92,224,230,.5);color:var(--text);transform:translateY(-1px)}
.pill__dot{width:6px;height:6px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 0 rgba(165,240,245,.6);animation:ping 2.4s var(--ease-io) infinite}
@keyframes ping{70%,100%{box-shadow:0 0 0 9px rgba(165,240,245,0)}}
.pill__arrow{width:14px;height:14px;opacity:.6;transition:transform var(--t) var(--ease)}
.pill:hover .pill__arrow{transform:translateX(3px);opacity:1}

/* ---------- Pointer spotlight ----------
   Painted as a background layer so it sits behind card content, never over text.
   Parked off-card via --sy until the pointer enters. */
.js .stat,.js .service,.js .feature,.js .testimonial,.js .faq__item,.js .compare,.js .roi{
  background-image:
    radial-gradient(320px circle at var(--sx,50%) var(--sy,-200%),rgba(92,224,230,.20),transparent 64%),
    linear-gradient(160deg,rgba(255,255,255,.062),rgba(255,255,255,.022));
}

/* ---------- Scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;z-index:120;background:var(--grad);box-shadow:0 0 14px rgba(92,224,230,.7)}

/* ---------- Preloader ---------- */
.preloader{position:fixed;inset:0;z-index:900;display:grid;place-items:center;background:var(--bg);transition:opacity .6s var(--ease),visibility .6s}
.preloader.is-done{opacity:0;visibility:hidden}
.preloader__inner{display:grid;justify-items:center;gap:18px}
/* The mark is now raster art, so it reveals by scale + glow rather than a
   stroke draw, then breathes gently while the bar fills. */
.preloader__mark{
  width:76px;height:66px;position:relative;
  opacity:0;transform:scale(.86);
  animation:markIn .72s var(--ease) forwards, markPulse 2.4s var(--ease) .72s infinite;
}
.preloader__mark img{width:100%;height:100%;object-fit:contain;display:block}
/* Soft cyan halo picked from the logo itself. */
.preloader__mark::before{
  content:"";position:absolute;inset:-42%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(92,224,230,.28),transparent 66%);
  opacity:0;animation:haloIn 1.1s var(--ease) .2s forwards;
}
@keyframes markIn{to{opacity:1;transform:scale(1)}}
@keyframes haloIn{to{opacity:1}}
@keyframes markPulse{0%,100%{filter:drop-shadow(0 0 0 rgba(92,224,230,0))}50%{filter:drop-shadow(0 0 14px rgba(92,224,230,.55))}}
.preloader__word{font-size:1.02rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--text-2);opacity:0;animation:fadeUp .7s var(--ease) .45s forwards}
.preloader__bar{width:170px;height:2px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden}
.preloader__bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#5CE0E6,#5CE0E6);animation:load 1.5s var(--ease) forwards}
@keyframes load{to{width:100%}}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

/* ---------- Nav ---------- */
/* The bar keeps a constant height and its surface is a separate layer that
   scales, so shrinking on scroll costs no layout. Animating height here would
   relayout the logo, links and button on every frame of every scroll. */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--nav-h);display:flex;align-items:center}
.nav::before{
  content:"";position:absolute;inset:0;transform-origin:top center;pointer-events:none;
  border-bottom:1px solid transparent;
  transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease);
}
.nav.is-stuck::before{
  transform:scaleY(calc(var(--nav-stuck-n) / var(--nav-h-n)));
  background:rgba(6,8,14,.72);
  border-bottom-color:var(--stroke);
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
}
/* Content rides up by half the height it lost, staying centred in the bar. */
.nav__inner{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  transition:transform var(--t) var(--ease);
}
.nav.is-stuck .nav__inner{transform:translateY(calc((var(--nav-stuck) - var(--nav-h)) / 2))}
@media (prefers-reduced-motion:reduce){
  .nav::before,.nav__inner{transition-duration:.001s}
}

.logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.03em;font-size:1.09rem}
/* The real logo already carries its own dark outline and orbit ring, so it sits
   free on the page rather than inside the old gradient chip. */
.logo__mark{width:38px;height:33px;display:grid;place-items:center;flex:none;transition:transform var(--t) var(--ease),filter var(--t) var(--ease)}
.logo__mark img{width:100%;height:100%;object-fit:contain;display:block}
.logo:hover .logo__mark{transform:scale(1.07);filter:drop-shadow(0 0 12px rgba(110,225,232,.45))}
/* Leads with the logo mark's own cyan so wordmark and icon read as one lockup. */
.logo__text span{color:#5CE0E6}

.nav__links{display:flex;align-items:center;gap:4px}
.nav__link{position:relative;padding:9px 14px;font-size:.9rem;font-weight:500;color:var(--text-2);border-radius:var(--r-sm);transition:color var(--t-fast) var(--ease)}
.nav__link::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1.5px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t) var(--ease)}
.nav__link:hover{color:var(--text)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__link.is-active{color:var(--text)}

.nav__actions{display:flex;align-items:center;gap:12px}
.nav__toggle{display:none;width:42px;height:42px;border-radius:var(--r-sm);border:1px solid var(--stroke);background:var(--surface);flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav__toggle span{display:block;width:17px;height:1.7px;border-radius:2px;background:var(--text);transition:transform var(--t) var(--ease),opacity var(--t-fast)}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.7px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-top:calc(var(--nav-h) + 56px);padding-bottom:80px;overflow:hidden}
.hero__glow{position:absolute;top:-18%;left:50%;translate:-50% 0;width:min(1100px,120vw);aspect-ratio:2/1;background:radial-gradient(ellipse at center,rgba(27,168,188,.26),transparent 66%);filter:blur(46px);pointer-events:none}
.hero__inner{display:grid;grid-template-columns:1.14fr .86fr;gap:clamp(36px,4vw,60px);align-items:center;position:relative;z-index:2}

.hero__title{
  font-size:var(--f-display);font-weight:800;letter-spacing:-.045em;line-height:1.02;
  margin:22px 0 20px;max-width:16ch;color:var(--text);
  /* Balance stops "Your" stranding alone on its own line. */
  text-wrap:balance;
}
.hero__title .word{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.hero__title .word>span{
  display:inline-block;transform:translateY(105%);
  animation:wordUp .72s var(--ease) forwards;animation-delay:var(--d,0s);
  color:var(--text);
}
@keyframes wordUp{to{transform:translateY(0)}}

.hero__sub{font-size:clamp(1.03rem,1.35vw,1.19rem);color:var(--text-2);max-width:52ch;margin-bottom:34px}
.hero__cta{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:32px}
.hero__proof{display:flex;flex-wrap:wrap;gap:20px;font-size:.865rem;color:var(--text-3)}
.hero__proof li{display:flex;align-items:center;gap:7px}
.hero__proof svg{width:15px;height:15px;color:var(--sky);flex:none}

.hero__scroll{position:absolute;bottom:26px;left:50%;translate:-50% 0;width:22px;height:36px;border:1px solid var(--stroke-2);border-radius:var(--r-full);display:grid;justify-items:center;padding-top:7px;opacity:.5}
.hero__scroll span{width:3px;height:7px;border-radius:2px;background:var(--sky);animation:scrollDot 1.9s var(--ease-io) infinite}
@keyframes scrollDot{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(13px)}}

/* ---------- Hero art ---------- */
.hero__art{position:relative;perspective:1400px}
/* Taller than the console so floating cards clear it vertically instead of covering copy. */
.art__stage{position:relative;aspect-ratio:1/1.16;display:grid;place-items:center;transform-style:preserve-3d}
.art__stage>*{will-change:transform}

.art__nodes{position:absolute;inset:0;width:100%;height:100%;opacity:.6}
.ring--1{animation:spin 34s linear infinite;transform-origin:210px 210px}
.ring--2{animation:spin 52s linear reverse infinite;transform-origin:210px 210px}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit{transform-origin:210px 210px}
.orbit--a{animation:spin 18s linear infinite}
.orbit--b{animation:spin 27s linear reverse infinite}

.console{position:relative;z-index:3;width:min(84%,392px);border-radius:var(--r-xl);overflow:hidden;animation:floatY 7s var(--ease-io) infinite alternate}
@keyframes floatY{to{transform:translateY(-14px)}}
.console__bar{display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid var(--stroke);background:rgba(255,255,255,.026)}
.console__dots{display:flex;gap:5.5px}
.console__dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.console__dots i:first-child{background:rgba(248,113,113,.55)}
.console__dots i:nth-child(2){background:rgba(251,191,36,.55)}
.console__dots i:last-child{background:rgba(74,222,128,.55)}
.console__title{font-size:.755rem;color:var(--text-3);font-weight:500}
.badge{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-full);font-size:.685rem;font-weight:600;letter-spacing:.02em}
.badge--live{background:rgba(74,222,128,.11);color:#86EFAC;border:1px solid rgba(74,222,128,.24)}
.badge__pulse{width:5px;height:5px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 0 rgba(74,222,128,.65);animation:ping 2s var(--ease-io) infinite}

.console__body{padding:18px 16px 16px;display:grid;gap:13px}
.console__row{display:flex;align-items:flex-end;gap:9px}
.console__row--end{justify-content:flex-end}
.avatar--ai{width:28px;height:28px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--grad-soft);border:1px solid var(--stroke-2);color:var(--sky)}
.avatar--ai svg{width:17px;height:17px}
.bubble{padding:10px 14px;border-radius:15px;font-size:.83rem;line-height:1.5;max-width:83%;opacity:0;animation:bubbleIn .7s var(--ease) forwards}
@keyframes bubbleIn{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:none}}
.bubble--ai{background:rgba(255,255,255,.06);border:1px solid var(--stroke);border-bottom-left-radius:5px;animation-delay:.9s}
.bubble--user{background:linear-gradient(135deg,rgba(92,224,230,.24),rgba(33,193,212,.18));border:1px solid rgba(92,224,230,.3);border-bottom-right-radius:5px;color:#DBEAFE;animation-delay:1.9s}

.console__wave{display:flex;align-items:center;justify-content:center;gap:3.5px;height:44px;margin:2px 0}
.console__wave span{width:3px;border-radius:3px;background:linear-gradient(180deg,var(--sky),var(--indigo));animation:wave 1.15s var(--ease-io) infinite alternate;opacity:.85}
.console__wave span:nth-child(3n){animation-duration:.85s}
.console__wave span:nth-child(3n+1){animation-duration:1.4s}
.console__wave span:nth-child(4n){animation-duration:1s}
.console__wave span:nth-child(1){animation-delay:0s}.console__wave span:nth-child(2){animation-delay:.07s}
.console__wave span:nth-child(3){animation-delay:.14s}.console__wave span:nth-child(4){animation-delay:.21s}
.console__wave span:nth-child(5){animation-delay:.28s}.console__wave span:nth-child(6){animation-delay:.35s}
.console__wave span:nth-child(7){animation-delay:.42s}.console__wave span:nth-child(8){animation-delay:.49s}
.console__wave span:nth-child(9){animation-delay:.56s}.console__wave span:nth-child(10){animation-delay:.63s}
.console__wave span:nth-child(11){animation-delay:.7s}.console__wave span:nth-child(12){animation-delay:.77s}
.console__wave span:nth-child(13){animation-delay:.84s}.console__wave span:nth-child(14){animation-delay:.91s}
.console__wave span:nth-child(15){animation-delay:.98s}.console__wave span:nth-child(16){animation-delay:1.05s}
.console__wave span:nth-child(17){animation-delay:1.12s}.console__wave span:nth-child(18){animation-delay:1.19s}
.console__wave span:nth-child(19){animation-delay:1.26s}.console__wave span:nth-child(20){animation-delay:1.33s}
.console__wave span:nth-child(21){animation-delay:1.4s}
@keyframes wave{from{height:5px;opacity:.45}to{height:32px;opacity:1}}

.console__actions{display:flex;flex-wrap:wrap;gap:7px;padding-top:3px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:var(--r-full);font-size:.715rem;font-weight:500;background:rgba(255,255,255,.05);border:1px solid var(--stroke);color:var(--text-2)}
.chip svg{width:12px;height:12px}
.chip--done{color:#86EFAC;background:rgba(74,222,128,.09);border-color:rgba(74,222,128,.22)}
.chip__spin{width:10px;height:10px;border-radius:50%;border:1.6px solid rgba(165,240,245,.3);border-top-color:var(--sky);animation:spin .85s linear infinite}

.float-card{position:absolute;z-index:4;padding:13px 15px;border-radius:var(--r-md);display:flex;align-items:center;gap:11px;box-shadow:var(--shadow-lg)}
.float-card strong{display:block;font-size:.795rem;font-weight:600;letter-spacing:-.015em}
.float-card span{font-size:.7rem;color:var(--text-3)}
.float-card__icon{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center}
.float-card__icon svg{width:18px;height:18px}
.float-card__icon--blue{background:rgba(92,224,230,.15);color:var(--blue-l);border:1px solid rgba(92,224,230,.26)}
.float-card__icon--cyan{background:rgba(52,217,228,.13);color:var(--cyan);border:1px solid rgba(52,217,228,.24)}

.float-card--book{top:2%;right:-7%;animation:floatA 6.2s var(--ease-io) infinite alternate}
.float-card--calls{bottom:2%;left:-9%;animation:floatB 7.4s var(--ease-io) infinite alternate}
.float-card--rev{bottom:-2%;right:-4%;display:block;width:168px;animation:floatC 8.1s var(--ease-io) infinite alternate}
@keyframes floatA{to{transform:translate3d(-8px,16px,0)}}
@keyframes floatB{to{transform:translate3d(10px,-14px,0)}}
@keyframes floatC{to{transform:translate3d(-6px,-12px,0)}}

.float-card__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.trend{font-size:.72rem;font-weight:700;color:#86EFAC}
.spark{width:100%;height:38px}
.spark__line{stroke-dasharray:260;stroke-dashoffset:260;animation:draw 2.2s var(--ease) 1.1s forwards}
.spark__area{opacity:0;animation:fadeIn .9s var(--ease) 2.4s forwards}
@keyframes fadeIn{to{opacity:1}}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:56px}
.stat{padding:30px 26px;border-radius:var(--r-lg);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.stat:hover{border-color:rgba(92,224,230,.35);box-shadow:var(--glow)}
.stat__num{font-size:clamp(2.3rem,3.5vw,3rem);font-weight:800;letter-spacing:-.05em;line-height:1;
  /* Solid: a gradient across large numerals fades the lower strokes and
     costs legibility on exactly the figures meant to be read fastest. */
  color:var(--blue-l);margin-bottom:11px}
/* ∞ renders much smaller than digits at the same size; nudge it to match. */
.stat__num--symbol{font-size:clamp(2.9rem,4.4vw,3.8rem);line-height:.78}
.stat__label{font-size:.95rem;font-weight:600;margin-bottom:7px;letter-spacing:-.02em}
.stat__note{font-size:.83rem;color:var(--text-3);line-height:1.55}

/* ---------- Marquee ---------- */
.marquee{position:relative;overflow:hidden;padding:18px 0;border-block:1px solid var(--stroke);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;align-items:center;gap:26px;width:max-content;animation:marquee 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{font-size:.86rem;font-weight:500;color:var(--text-3);white-space:nowrap;letter-spacing:.01em}
.marquee__track i{width:4px;height:4px;border-radius:50%;background:rgba(92,224,230,.45);flex:none}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}

/* ---------- Divider ---------- */
.divider{display:grid;place-items:center;height:1px}
.divider span{display:block;width:min(var(--container),92vw);height:1px;background:linear-gradient(90deg,transparent,rgba(92,224,230,.34),rgba(33,193,212,.24),transparent);transform-origin:50% 50%;transition:transform 1.3s var(--ease)}
.js .divider span{transform:scaleX(0)}
.divider.is-in span{transform:scaleX(1)}

/* ---------- Services ---------- */
/* Two-up so each pair reads as a set rather than a ragged auto-fit row. */
/* A lone card takes the full row and splits internally, so the row reads as
   deliberate rather than leaving dead space either side of a narrow card. */
@media (min-width:900px){
  /* Heading tops the second column, list runs beneath it. */
}

/* ---------- Features ---------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature{padding:30px 28px;border-radius:var(--r-lg);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.feature:hover{border-color:rgba(92,224,230,.35);box-shadow:var(--glow)}
.feature__icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;
  background:var(--grad-soft);border:1px solid var(--stroke-2);color:var(--blue-l);
  transition:transform var(--t) var(--ease),color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.feature__icon svg{width:24px;height:24px}
.feature:hover .feature__icon{transform:translateY(-3px) scale(1.08) rotate(4deg);color:var(--sky);box-shadow:0 0 26px -6px rgba(92,224,230,.6)}
.feature h3{font-size:var(--f-h3);margin-bottom:9px}
.feature p{font-size:.895rem;color:var(--text-2);line-height:1.6}

/* ---------- Pricing tiers ---------- */
/* Sits beside the figure: bespoke work is available, without a second card. */
.price-chip{
  display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;
  font-size:.68rem !important;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--blue-l) !important;background:rgba(92,224,230,.12);
  border:1px solid rgba(92,224,230,.3);white-space:nowrap;
}
.tier__price .price-chip{margin-left:10px;align-self:center}
/* Muted uppercase label, matching .tier__per — the figure carries the emphasis. */

.pricing__group{
  /* Shorthand first: a margin-top above it would be overridden here. */
  margin:0 0 18px;font-size:.775rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);
}
.tiers + .pricing__group{margin-top:clamp(38px,4.5vw,56px)}
.section__head + .pricing__group{margin-top:0}

.tiers + .pricing__group{margin-top:54px}
/* stretch (not start) so cards in a row are always equal height regardless of
   content length; .tier__list's auto bottom margin keeps the CTAs aligned. */
/* auto-fit rather than a fixed count: empty tracks collapse, so two cards fill
   the row edge to edge and a third would drop in without touching this rule. */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:22px;align-items:stretch}
/* Carried over from the old services cards when the two sections merged. */
.tier__desc{font-size:.89rem;line-height:1.62;color:var(--text-3)}
/* Answers "how do I actually pay you?" at the point the split is stated. */
.payments{
  margin-top:clamp(20px,2.6vw,28px);padding:clamp(20px,2.4vw,26px);
  border-radius:var(--r-lg);border:1px solid var(--stroke-2);
  background:rgba(255,255,255,.025);text-align:center;
}
.payments__label{
  font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 14px;
}
.payments__list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}
.payments__list li{
  /* Official marks come in their own brand colours, so each sits on a light
     tile — unmodified and legible — rather than being recoloured to fit. */
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px;border-radius:12px;
  background:#F4F6FA;border:1px solid rgba(255,255,255,.10);
  font-size:.84rem;font-weight:700;color:#1F2530;white-space:nowrap;
}
.payments__list svg,.payments__list img{flex:none;width:21px;height:21px;object-fit:contain;display:block}
/* The UPI logo is a wordmark: it carries its own name, so it needs no label. */
.pay--wide{padding:9px 14px}
.pay--wide img{width:60px;height:21px}
.payments__note{margin:14px 0 0;font-size:.83rem;line-height:1.6;color:var(--text-3)}
.pricing__note{max-width:720px;margin:22px auto 0;text-align:center;font-size:.87rem;line-height:1.65;color:var(--text-3)}
.tier{position:relative;display:flex;flex-direction:column;gap:16px;padding:clamp(26px,2.8vw,34px);border-radius:var(--r-xl)}
.tier__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tier__money{display:flex;flex-direction:column;gap:9px}
.tier--featured{
  border-color:rgba(92,224,230,.36);
  box-shadow:0 0 0 1px rgba(92,224,230,.16),0 28px 70px -28px rgba(16,134,155,.5);
}
.tier__badge{
  position:absolute;top:-11px;left:50%;translate:-50% 0;
  padding:5px 13px;border-radius:var(--r-full);white-space:nowrap;
  font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#fff;
  background:var(--grad);box-shadow:0 8px 22px -8px rgba(16,134,155,.8);
}
.tier__name{font-size:1.38rem;font-weight:700;letter-spacing:-.025em;line-height:1.25}
.tier__price{
  display:flex;align-items:baseline;gap:3px;flex-wrap:wrap;
  font-size:clamp(2.1rem,3.4vw,2.7rem);font-weight:800;letter-spacing:-.045em;line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--blue-l);
}
/* Modifier follows the base rule; same specificity means source order decides. */
.tier__price--word{font-size:clamp(1.7rem,2.6vw,2.1rem);letter-spacing:-.035em}
.tier__cur{font-size:.5em;font-weight:700;translate:0 -.15em}
/* "+" signals an opening price without shouting — smaller than the figure, same gradient. */
.tier__plus{font-size:.55em;font-weight:700}
.tier__per{
  -webkit-text-fill-color:var(--text-3);font-size:.34em;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;margin-left:5px;
}
.tier__retainer{
  padding:11px 14px;border-radius:var(--r-sm);
  border:1px solid var(--stroke);background:rgba(255,255,255,.03);
  font-size:.88rem;color:var(--text-2);
}
.tier__retainer strong{color:var(--text);font-weight:700}
/* Sits between price and feature list; quiet enough not to compete with either. */
.tier__note{margin:0;font-size:.79rem;line-height:1.55;color:var(--text-3)}
/* Lead clause gets its own line so a two-part note does not read as a wall. */
.tier__note strong{display:block;margin-bottom:3px;font-weight:700;color:var(--blue-l)}
.tier__list{display:grid;gap:10px;margin:2px 0 auto;padding:0;list-style:none}
.tier__list li{position:relative;padding-left:26px;font-size:.9rem;line-height:1.5;color:var(--text-2)}
.tier__list li::before{
  content:"";position:absolute;left:4px;top:.42em;width:9px;height:5px;
  border-left:1.9px solid var(--sky);border-bottom:1.9px solid var(--sky);
  transform:rotate(-45deg);
}
.tier .btn{margin-top:6px}

/* Six fixed slots per card. Subgrid makes every card share the row track sizes,
   so the price, the feature list and the button sit on the same line across the
   whole row instead of drifting with the length of the copy above them. */
@supports (grid-template-rows:subgrid){
  .tiers{grid-template-rows:repeat(6,auto)}
  .tier{display:grid;grid-row:span 6;grid-template-rows:subgrid;gap:0}
  .tier > *{margin:0}
  .tier__head{padding-bottom:14px}
  .tier__money{padding-bottom:16px}
  .tier__desc{padding-bottom:18px}
  .tier__list{padding-bottom:16px}
  .tier__note{padding-bottom:20px;align-self:start}
  .tier .btn{align-self:end}
}

/* ---------- Add-on price list ---------- */

/* ---------- ROI calculator ---------- */
.roi{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,52px);padding:clamp(28px,3.4vw,44px);border-radius:var(--r-xl)}
.roi__controls{display:grid;gap:30px;align-content:start}
.roi__field{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:8px}
.roi__field label{font-size:.92rem;font-weight:500;color:var(--text-2)}
.roi__field output{
  font-size:1.12rem;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  color:var(--blue-l);
}
/* 34px keeps the draggable area above the WCAG 2.5.8 minimum on touch. */
.roi__field input[type=range]{grid-column:1/-1;-webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;cursor:pointer}
.roi__field input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:5px;
  background:linear-gradient(90deg,var(--blue-l) 0 var(--fill,50%),rgba(255,255,255,.1) var(--fill,50%) 100%)}
.roi__field input[type=range]::-moz-range-track{height:5px;border-radius:5px;background:rgba(255,255,255,.1)}
.roi__field input[type=range]::-moz-range-progress{height:5px;border-radius:5px;background:var(--blue-l)}
.roi__field input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-7.5px;border-radius:50%;
  background:#fff;border:2px solid var(--blue-l);box-shadow:0 0 0 5px rgba(92,224,230,.16),0 4px 12px rgba(0,0,0,.5);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.roi__field input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--blue-l);box-shadow:0 0 0 5px rgba(92,224,230,.16)}
.roi__field input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.14)}
.roi__field input[type=range]:active::-webkit-slider-thumb{transform:scale(1.04);box-shadow:0 0 0 8px rgba(92,224,230,.22)}
.roi__field input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 8px rgba(92,224,230,.3)}

.roi__result{
  display:grid;align-content:start;gap:12px;padding:clamp(22px,2.4vw,30px);
  border-radius:var(--r-lg);border:1px solid rgba(92,224,230,.24);
  background:linear-gradient(165deg,rgba(92,224,230,.13),rgba(33,193,212,.06));
}
.roi__label{font-size:.775rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.roi__figure{
  font-size:clamp(2.5rem,4.4vw,3.5rem);font-weight:800;letter-spacing:-.05em;line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--blue-l);
}
.roi__split{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 0;border-block:1px solid var(--stroke)}
.roi__split span{display:block;font-size:.75rem;color:var(--text-3);margin-bottom:2px}
.roi__split strong{font-size:1.06rem;font-weight:700;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.roi__verdict{margin:2px 0 4px;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--stroke-2)}
.roi__verdict[data-state="worth-it"]{border-color:rgba(92,224,230,.32);background:rgba(92,224,230,.07)}
.roi__verdict[data-state="marginal"]{border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.03)}
.roi__verdict-line{margin:0 0 5px;font-size:.94rem;font-weight:700;line-height:1.45;color:var(--text)}
.roi__verdict[data-state="worth-it"] .roi__verdict-line{color:var(--blue-l)}
.roi__verdict-sub{margin:0;font-size:.82rem;line-height:1.6;color:var(--text-3)}
.roi__result .btn{margin-top:4px}

/* ---------- Comparison table ---------- */
.compare{padding:8px;border-radius:var(--r-xl);overflow-x:auto}
.compare__table{width:100%;min-width:620px;border-collapse:collapse;text-align:left}
.compare__table th,.compare__table td{padding:15px 18px;border-bottom:1px solid var(--stroke)}
.compare__table tbody tr:last-child th,.compare__table tbody tr:last-child td{border-bottom:0}
.compare__table thead th{
  font-size:.755rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);
  border-bottom:1px solid var(--stroke-2);white-space:nowrap;
}
.compare__table tbody th{font-size:.9rem;font-weight:500;color:var(--text-2)}
.compare__table td{text-align:center;width:150px}
.compare__table .is-hero{position:relative;color:var(--text)}
.compare__table thead .is-hero{color:var(--sky);font-weight:700}
.compare__table .is-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(92,224,230,.12),rgba(92,224,230,.04));pointer-events:none}
.compare__table tbody tr:hover th,.compare__table tbody tr:hover td{background:rgba(255,255,255,.022)}

.mark{display:inline-block;width:20px;height:20px;border-radius:50%;position:relative;vertical-align:middle}
.mark--yes{background:rgba(74,222,128,.14);border:1px solid rgba(74,222,128,.34)}
.mark--yes::after{content:"";position:absolute;left:6px;top:5.5px;width:6px;height:3px;border-left:1.8px solid #86EFAC;border-bottom:1.8px solid #86EFAC;transform:rotate(-45deg)}
.mark--no{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.28)}
.mark--no::after{content:"";position:absolute;left:5.5px;top:8.6px;width:7px;height:1.8px;border-radius:2px;background:#FCA5A5}
.mark--partial{background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.3)}
.mark--partial::after{content:"";position:absolute;left:8.2px;top:5px;width:2px;height:8px;border-radius:2px;background:#FCD34D}

/* ---------- Mobile sticky CTA ---------- */
.mobile-cta{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:150;display:none;
  align-items:center;justify-content:space-between;gap:14px;
  padding:11px 12px 11px 16px;border-radius:var(--r-full);
  background:rgba(8,11,18,.86);border:1px solid var(--stroke-2);
  backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);
  box-shadow:0 18px 44px -14px rgba(0,0,0,.8);
  transform:translateY(140%);opacity:0;pointer-events:none;
  transition:transform .5s var(--ease),opacity .4s var(--ease);
}
.mobile-cta.is-on{transform:none;opacity:1;pointer-events:auto}
.mobile-cta__text{display:grid;line-height:1.3;min-width:0}
.mobile-cta__text strong{font-size:.85rem;font-weight:600;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile-cta__text span{font-size:.72rem;color:var(--text-3)}
.mobile-cta .btn{flex:none}
/* 44px keeps the tap target at the accessible minimum. */
.mobile-cta__call{
  flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  color:#7FEAF0;border:1px solid rgba(92,224,230,.34);background:rgba(92,224,230,.1);
  transition:background-color var(--t-fast),border-color var(--t-fast),transform var(--t-fast) var(--ease);
}
.mobile-cta__call svg{width:19px;height:19px}
.mobile-cta__call:active{transform:scale(.94);background:rgba(92,224,230,.2)}
@media (max-width:860px){.mobile-cta{display:flex}}

/* ---------- Timeline ---------- */
.timeline{position:relative;display:grid;gap:26px;padding-left:70px}
.timeline__rail{position:absolute;left:23px;top:14px;bottom:14px;width:2px;border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden}
/* Scaled, not resized: the fill is driven from a scroll handler, so animating
   height would force layout on every frame. */
.timeline__fill{position:absolute;top:0;left:0;width:100%;height:100%;transform:scaleY(0);transform-origin:top;will-change:transform;background:var(--grad);box-shadow:0 0 16px rgba(92,224,230,.75);transition:transform .18s linear}
.step{position:relative}
.step__node{position:absolute;left:-70px;top:16px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:rgba(8,10,17,.9);border:1px solid var(--stroke-2);backdrop-filter:blur(10px);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t) var(--ease)}
.step__num{font-size:.78rem;font-weight:700;letter-spacing:.02em;color:var(--text-3);transition:color var(--t) var(--ease)}
.step.is-in .step__node{border-color:rgba(92,224,230,.6);box-shadow:0 0 0 5px rgba(92,224,230,.09),0 0 26px -4px rgba(92,224,230,.6);transform:scale(1.04)}
.step.is-in .step__num{color:var(--blue-l)}
.step__card{padding:26px 28px;border-radius:var(--r-lg);transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.step__card:hover{transform:translateX(6px);border-color:rgba(92,224,230,.32);box-shadow:var(--glow)}
.step__card h3{font-size:var(--f-h3);margin-bottom:8px}
.step__card p{font-size:.9rem;color:var(--text-2)}

/* ---------- Testimonials ---------- */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.testimonial{padding:28px 26px;border-radius:var(--r-lg);display:flex;flex-direction:column;gap:16px;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.testimonial:hover{border-color:rgba(92,224,230,.32);box-shadow:var(--glow)}
.stars{display:flex;gap:3px}
.stars svg{width:15px;height:15px;fill:#FBBF24}
.testimonial blockquote p{font-size:.925rem;color:var(--text);line-height:1.68;font-weight:400}
.person{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:6px}
.person__avatar{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:.8rem;font-weight:700;letter-spacing:.02em;color:#0A0D16;
  background:linear-gradient(135deg,#8FE8EF,#7FEAF0)}
.person__avatar::before{content:attr(data-initials)}
.person__avatar--b{background:linear-gradient(135deg,#9DECF2,#34D9E4)}
.person__avatar--c{background:linear-gradient(135deg,#A5F0F5,#5CE0E6)}
.person__avatar--d{background:linear-gradient(135deg,#C4B5FD,#8FE8EF)}
.person__avatar--e{background:linear-gradient(135deg,#6FE6EE,#7FEAF0)}
.person__avatar--f{background:linear-gradient(135deg,#C7F5F8,#21C1D4)}
.person__meta{display:grid;line-height:1.4}
.person__meta strong{font-size:.885rem;font-weight:600}
.person__meta span{font-size:.775rem;color:var(--text-3)}
.testimonials__note{margin-top:26px;font-size:.775rem;color:var(--text-3);text-align:center}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px}
/* Splits the list by product; matches the pricing group headings. */
.faq__group{
  margin:22px 0 2px;font-size:.76rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--blue-l);
}
.faq__group:first-child{margin-top:0}
.faq__item{border-radius:var(--r-md);overflow:hidden;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.faq__item.is-open{border-color:rgba(92,224,230,.34);box-shadow:0 0 0 1px rgba(92,224,230,.1),0 18px 44px -18px rgba(27,168,188,.4)}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;text-align:left;
  padding:20px 24px;font-size:1rem;font-weight:600;letter-spacing:-.02em;color:var(--text);
  transition:color var(--t-fast) var(--ease)}
.faq__q:hover{color:#fff}
.faq__icon{position:relative;width:20px;height:20px;flex:none;border-radius:50%;border:1px solid var(--stroke-2);transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),background-color var(--t) var(--ease)}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;background:var(--text-2);border-radius:2px;transition:transform var(--t) var(--ease),background-color var(--t) var(--ease)}
.faq__icon::before{width:9px;height:1.6px}
.faq__icon::after{width:1.6px;height:9px}
.faq__item.is-open .faq__icon{transform:rotate(180deg);border-color:rgba(92,224,230,.6);background:rgba(92,224,230,.13)}
.faq__item.is-open .faq__icon::after{transform:scaleY(0)}
.faq__item.is-open .faq__icon::before{background:var(--sky)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .48s var(--ease)}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
/* visibility:hidden pulls collapsed answers out of the tab order — a 0fr grid row
   clips them visually but leaves any link inside focusable as an invisible tab stop.
   Delayed on close so the collapse animation still plays; instant on open. */
.faq__a-inner{overflow:hidden;visibility:hidden;transition:visibility 0s linear .48s}
.faq__item.is-open .faq__a-inner{visibility:visible;transition-delay:0s}
.faq__a-inner p{padding:0 24px 12px;font-size:.925rem;color:var(--text-2);max-width:70ch}
.faq__a-inner p:last-of-type{padding-bottom:16px}
.faq__list{list-style:none;margin:0;padding:0 24px 14px;display:grid;gap:9px;max-width:70ch}
.faq__list li{position:relative;padding-left:20px;font-size:.925rem;color:var(--text-2)}
.faq__list li::before{content:"";position:absolute;left:3px;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--blue-l)}
.faq__list strong{color:var(--text);font-weight:600}
.faq__link{display:inline-flex;align-items:center;gap:8px;margin:0 24px 22px;font-size:.9rem;font-weight:600;color:var(--blue-l)}
.faq__link svg{width:15px;height:15px;transition:transform var(--t-fast) var(--ease)}
.faq__link:hover{color:var(--sky)}
.faq__link:hover svg{transform:translateX(3px)}
/* Copy and the pricing link share the same open-reveal. */
.faq__a-inner p,.faq__a-inner .faq__list,.faq__a-inner .faq__link{opacity:0;transform:translateY(-6px);
  transition:opacity .38s var(--ease) .08s,transform .38s var(--ease) .08s,color var(--t-fast)}
.faq__item.is-open .faq__a-inner p,.faq__item.is-open .faq__a-inner .faq__list,.faq__item.is-open .faq__a-inner .faq__link{opacity:1;transform:none}

/* ---------- CTA ---------- */
.cta{position:relative;padding:clamp(84px,10vw,140px) 0;overflow:hidden}
.cta__aura{position:absolute;top:50%;left:50%;translate:-50% -50%;width:min(1000px,110vw);aspect-ratio:1.8/1;
  background:radial-gradient(ellipse at center,rgba(27,168,188,.24),transparent 66%);filter:blur(50px);
  animation:auraPulse 6.5s var(--ease-io) infinite alternate;pointer-events:none}
@keyframes auraPulse{from{opacity:.55;transform:translate(-50%,-50%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}
.cta__grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr .92fr;gap:clamp(36px,5vw,64px);align-items:center}
.cta__title{font-size:var(--f-h2);margin:14px 0 16px;color:var(--text)}
.cta__sub{font-size:1.09rem;color:var(--text-2);margin-bottom:26px;max-width:44ch}
.cta__list{display:grid;gap:11px;margin-top:26px}
.cta__list li{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--text-2)}
.cta__list svg{width:16px;height:16px;color:var(--sky);flex:none}

/* ---------- Direct contact channels ---------- */
.channels{display:grid;gap:12px}
.channel{
  display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:var(--r-md);
  border:1px solid var(--stroke-2);background:rgba(255,255,255,.035);
  transition:border-color var(--t-fast),background-color var(--t-fast),transform var(--t-fast) var(--ease);
}
/* A class selector outranks the UA's [hidden]{display:none}, so the display
   above would render the scheduler card even while it carries [hidden]. */
.channel[hidden]{display:none}
.channel:hover{transform:translateY(-2px);border-color:rgba(92,224,230,.5);background:rgba(92,224,230,.09)}
.channel__icon{
  width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:12px;
  background:var(--grad-soft);border:1px solid var(--stroke-2);color:var(--blue-l);
}
.channel__icon svg{width:21px;height:21px}
.channel__body{display:grid;gap:2px;min-width:0}
.channel__body strong{font-size:.98rem;font-weight:600;letter-spacing:-.02em;color:var(--text)}
.channel__body span{font-size:.8rem;color:var(--text-3)}
.channel__go{width:16px;height:16px;flex:none;margin-left:auto;color:var(--text-3);transition:transform var(--t-fast) var(--ease),color var(--t-fast)}
.channel:hover .channel__go{transform:translateX(3px);color:var(--blue-l)}
/* WhatsApp keeps its own green so it is instantly recognisable. */
.channel--wa .channel__icon{color:#5BE49B;background:rgba(91,228,155,.12);border-color:rgba(91,228,155,.28)}
.channel--wa:hover{border-color:rgba(91,228,155,.5);background:rgba(91,228,155,.08)}
.channel--wa:hover .channel__go{color:#5BE49B}
.channel--call .channel__icon{color:#7FEAF0;background:rgba(92,224,230,.12);border-color:rgba(92,224,230,.28)}
/* Scheduler card: a <button>, so reset the UA button styling to match the <a> cards. */
.channel--book{width:100%;text-align:left;font:inherit;cursor:pointer;
  border-color:rgba(92,224,230,.34);background:rgba(92,224,230,.07)}
.channel--book:hover{border-color:rgba(92,224,230,.6);background:rgba(92,224,230,.12)}
.channel--book .channel__icon{color:#5CE0E6;background:rgba(92,224,230,.14);border-color:rgba(92,224,230,.3)}
.channel--book:hover .channel__go{color:#5CE0E6}
.channel--book:disabled{opacity:.6;cursor:progress}
.channel--call:hover{border-color:rgba(92,224,230,.5);background:rgba(92,224,230,.08)}
.channel--call:hover .channel__go{color:#7FEAF0}

/* ---------- Chip (radio) question groups ---------- */
.form__intro{margin:-6px 0 4px;font-size:.85rem;color:var(--text-3)}
.field--chips{border:0;padding:0;margin:0;min-width:0}
.field--chips legend{padding:0;margin-bottom:10px;font-size:.875rem;font-weight:500;color:var(--text-2)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
/* The radio stays in the DOM for semantics/keyboard, visually replaced by the pill. */
.chip input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{
  display:block;padding:9px 15px;border-radius:var(--r-full);
  font-size:.87rem;font-weight:500;color:var(--text-2);
  border:1px solid var(--stroke-2);background:rgba(255,255,255,.03);
  transition:color var(--t-fast),border-color var(--t-fast),background-color var(--t-fast);
}
.chip:hover span{color:var(--text);border-color:rgba(92,224,230,.4)}
.chip input:checked+span{
  color:#fff;border-color:transparent;background:var(--grad);
  box-shadow:0 6px 18px -8px rgba(16,134,155,.9);
}
.chip input:focus-visible+span{outline:2px solid var(--blue-l);outline-offset:3px}
.field--chips.has-error .chip span{border-color:rgba(248,113,113,.5)}

/* ---------- Form ---------- */
.form{padding:clamp(26px,3vw,36px);border-radius:var(--r-xl);display:grid;gap:15px}
.form__title{font-size:1.2rem;margin-bottom:4px}
.field{position:relative}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
/* :not([type="radio"]) and the child combinator on labels keep the floating-label
   treatment off the chip groups — a .chip is a <label> containing a radio. */
.field input:not([type="radio"]),.field select,.field textarea{
  width:100%;padding:19px 16px 8px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);border:1px solid var(--stroke);
  font-size:.925rem;color:var(--text);resize:none;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease);
}
.field textarea{padding-top:24px;line-height:1.55}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer}
.field select option{background:#0A0D14;color:var(--text)}
.field > label{
  position:absolute;left:17px;top:14px;font-size:.925rem;color:var(--text-3);pointer-events:none;
  transform-origin:0 50%;
  transition:transform .22s var(--ease),color .22s var(--ease);
}
.field input:not([type="radio"]):focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:rgba(92,224,230,.6);background:rgba(92,224,230,.05);
  box-shadow:0 0 0 3px rgba(92,224,230,.13);
}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label,
.field select:focus+label,.field select:valid+label{
  transform:translateY(-8px) scale(.76);color:var(--blue-l);
}
.field--select .field__caret{position:absolute;right:14px;top:19px;width:16px;height:16px;color:var(--text-3);pointer-events:none;transition:transform var(--t-fast) var(--ease)}
.field--select select:focus~.field__caret{transform:rotate(180deg);color:var(--blue-l)}
.field__error{display:block;min-height:0;font-size:.735rem;color:#FCA5A5;padding:4px 2px 0;opacity:0;transition:opacity var(--t-fast)}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:rgba(248,113,113,.55);box-shadow:0 0 0 3px rgba(248,113,113,.1)}
.field.has-error .field__error{opacity:1}
.form__fine{font-size:.755rem;color:var(--text-3);text-align:center}
.form__success{font-size:.895rem;color:#86EFAC;text-align:center;padding:12px;border-radius:var(--r-sm);background:rgba(74,222,128,.09);border:1px solid rgba(74,222,128,.24)}
.form.is-sent .field,.form.is-sent .field-row,.form.is-sent .btn,.form.is-sent .form__fine,.form.is-sent .form__title{display:none}
.form__success:focus{outline:none}
.form__error{
  font-size:.87rem;line-height:1.55;color:#FCA5A5;text-align:center;padding:12px;
  border-radius:var(--r-sm);background:rgba(248,113,113,.09);border:1px solid rgba(248,113,113,.26);
}
.form__error a{color:#FECACA;text-decoration:underline;text-underline-offset:2px}
/* Honeypot — off-screen for bots, invisible and unfocusable for people. */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.form.is-sending{opacity:.75}
.form.is-sending .btn{cursor:progress}

/* ---------- Footer ---------- */
.footer{position:relative;padding:clamp(56px,6vw,80px) 0 34px;border-top:1px solid var(--stroke);background:linear-gradient(180deg,transparent,rgba(92,224,230,.035))}
.footer__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:clamp(28px,4vw,52px);padding-bottom:44px}
.footer__brand .logo{margin-bottom:16px}
.footer__tag{font-size:.9rem;font-weight:600;color:var(--blue-l);margin-bottom:10px}
.footer__blurb{font-size:.865rem;color:var(--text-3);max-width:34ch;line-height:1.62}
.footer__col{display:grid;align-content:start;gap:11px}
.footer__col h4{font-size:.755rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text);margin-bottom:4px}
.footer__col a{position:relative;font-size:.875rem;color:var(--text-3);width:fit-content;transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.footer__col a:hover{color:var(--text);transform:translateX(3px)}
.footer__cta{color:var(--blue-l)!important;font-weight:600}
.social{display:flex;gap:9px;margin-top:8px}
.social a{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--stroke);background:var(--surface);
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.social a svg{width:17px;height:17px}
.social a:hover{border-color:rgba(92,224,230,.55);color:var(--sky);transform:translateY(-3px);box-shadow:0 10px 26px -10px rgba(92,224,230,.7)}
.footer__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:26px;border-top:1px solid var(--stroke);font-size:.8rem;color:var(--text-3)}
.footer__legal{display:flex;align-items:center;gap:12px}
/* Pad to a 24px tap height without changing the visual rhythm. */
.footer__legal a{display:inline-flex;align-items:center;min-height:24px}
.footer__legal a:hover{color:var(--text)}

/* ---------- Reveal ----------
   Scoped to .js so content is never hidden when scripting is unavailable. */
.js [data-reveal]{opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .5s var(--ease),transform .56s var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* Reveal variants. One fade-up everywhere is what makes a long page read as a
   single repeated beat, so each section picks a motion that suits its content. */
.js [data-reveal="left"]{transform:translate3d(-34px,0,0)}
.js [data-reveal="right"]{transform:translate3d(34px,0,0)}
.js [data-reveal="scale"]{transform:scale(.94)}
.js [data-reveal="rise"]{transform:translate3d(0,46px,0)}
/* Wipes upward from its own bottom edge rather than sliding into place. */
.js [data-reveal="clip"]{
  transform:none;clip-path:inset(0 0 100% 0);
  transition:opacity .38s var(--ease),clip-path .72s var(--ease);
}
.js [data-reveal="clip"].is-in{clip-path:inset(0 0 0 0)}
.js [data-reveal="tilt"]{transform:perspective(900px) rotateX(7deg) translate3d(0,30px,0);transform-origin:top center}

/* Table rows fill in one after another instead of the block appearing at once. */
.js .compare tbody tr{opacity:0;transform:translate3d(0,14px,0);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .compare.is-in tbody tr{opacity:1;transform:none}

/* Row and step cascades: nth-child rather than JS so they cost nothing. */
.js .compare tbody tr:nth-child(1){transition-delay:.06s}
.js .compare tbody tr:nth-child(2){transition-delay:.12s}
.js .compare tbody tr:nth-child(3){transition-delay:.18s}
.js .compare tbody tr:nth-child(4){transition-delay:.24s}
.js .compare tbody tr:nth-child(5){transition-delay:.30s}
.js .compare tbody tr:nth-child(6){transition-delay:.36s}
.js .compare tbody tr:nth-child(7){transition-delay:.42s}
.js .compare tbody tr:nth-child(8){transition-delay:.48s}

/* ---------- Cinematic scroll travel ----------
   Sections approach from depth, hold flat while you read them, then recede.
   Driven by animation-timeline:view(), so it runs on the compositor rather than
   a scroll handler — no main-thread work and nothing to throttle. Browsers
   without it keep the IntersectionObserver reveals and lose nothing. */
@supports (animation-timeline:view()) and (animation-range:entry 0% exit 100%){
  .js .section{
    animation:sectionTravel linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
    transform-origin:center 45%;
  }
  /* The hero owns the first viewport; travelling it would fight its own entrance. */
  .js #hero{animation:none}
  /* If a view timeline cannot resolve, fill:both would pin a section at its
     end keyframe. Never let that make copy unreadable. */
  @supports not (animation-timeline:view()){.js .section{animation:none}}

  @keyframes sectionTravel{
    0%{opacity:.3;transform:perspective(1400px) translate3d(0,52px,-170px) scale(.945)}
    20%,86%{opacity:1;transform:perspective(1400px) translate3d(0,0,0) scale(1)}
    100%{opacity:.5;transform:perspective(1400px) translate3d(0,-26px,90px) scale(1.028)}
  }

  /* Cards lift out of their section a beat later, so the depth reads as layered
     rather than one flat plane moving. */
  .js .tier,.js .feature,.js .work__item,.js .stat,.js .step__card{
    animation:cardLift linear both;
    animation-timeline:view();
    animation-range:entry 10% cover 40%;
  }
  @keyframes cardLift{
    from{transform:perspective(1000px) translate3d(0,26px,-60px)}
    to{transform:perspective(1000px) translate3d(0,0,0)}
  }

  /* Depth-of-field only where there is GPU headroom: an animated blur across a
     full-width section is the one part of this that can cost frames on a phone. */
  @media (min-width:1024px) and (pointer:fine){
    .js .section{animation-name:sectionTravelBlur}
    @keyframes sectionTravelBlur{
      0%{opacity:.3;transform:perspective(1400px) translate3d(0,52px,-170px) scale(.945);filter:blur(7px)}
      20%,86%{opacity:1;transform:perspective(1400px) translate3d(0,0,0) scale(1);filter:blur(0)}
      100%{opacity:.5;transform:perspective(1400px) translate3d(0,-26px,90px) scale(1.028);filter:blur(3px)}
    }
  }
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hero__inner{grid-template-columns:1fr;gap:56px}
  .hero__copy{max-width:640px}
  .hero__title{max-width:16ch}
  .art__stage{max-width:520px;margin-inline:auto}
  .stats{grid-template-columns:repeat(2,1fr)}
  .features{grid-template-columns:repeat(2,1fr)}
  .testimonials{grid-template-columns:repeat(2,1fr)}
  .cta__grid{grid-template-columns:1fr;gap:44px}
  .roi{grid-template-columns:1fr;gap:32px}
  .tiers{grid-template-columns:1fr;gap:30px}
  /* Featured badge would collide with the card above once stacked. */
  .tier--featured{margin-top:8px}
  .footer__grid{grid-template-columns:1fr 1fr}
}

@media (max-width:860px){
  .nav__links{
    position:fixed;inset:var(--nav-h) 0 auto;
    flex-direction:column;align-items:stretch;gap:2px;
    padding:20px var(--gut) 28px;
    background:rgba(6,8,14,.94);
    backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%);
    border-bottom:1px solid var(--stroke);
    transform:translateY(-14px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t);
  }
  .nav__links.is-open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .nav__link{padding:14px 4px;font-size:1rem;border-bottom:1px solid rgba(255,255,255,.05)}
  .nav__link::after{left:4px;right:auto;width:22px;bottom:8px}
  .nav__toggle{display:flex}
  .nav__actions .btn--sm{display:none}
  .float-card--rev{width:150px}
  /* Clearance so the sticky CTA bar never covers the last footer line. */
  .footer{padding-bottom:110px}
}

@media (max-width:620px){
  /* Already compact here, so the bar has nothing to shrink into. */
  :root{--nav-h:64px;--nav-h-n:64;--nav-stuck:64px;--nav-stuck-n:64}
  .stats{grid-template-columns:1fr}
  .features{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:32px}
  .timeline{padding-left:0;gap:16px}
  .timeline__rail{display:none}
  .step__node{position:static;margin-bottom:12px;width:42px;height:42px}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .float-card--book{top:0;right:-2%;scale:.88}
  .float-card--calls{bottom:16%;left:-3%;scale:.88}
  .float-card--rev{bottom:2%;right:0;scale:.88}
  .footer__bottom{flex-direction:column;align-items:flex-start}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  .art__stage{transform:none!important;opacity:1!important}
  .section,.tier,.feature,.work__item,.stat,.step__card{
    animation:none!important;transform:none!important;filter:none!important;opacity:1!important}
  .compare tbody tr{opacity:1!important;transform:none!important}
  .hero__title .word>span{transform:none!important}
  .bg__particles{display:none}
  .faq__a{transition:none}
}

/* ---------- Legal pages (privacy, terms) ---------- */
.legal{max-width:760px;margin:0 auto;padding:calc(var(--nav-h) + 72px) var(--gut) 96px}
.legal__back{display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;font-size:.9rem;font-weight:600;color:var(--blue-l)}
.legal__back svg{width:15px;height:15px;transition:transform var(--t-fast) var(--ease)}
.legal__back:hover{color:var(--sky)}
.legal__back:hover svg{transform:translateX(-3px)}
.legal h1{font-size:clamp(2rem,4.4vw,2.8rem);font-weight:800;letter-spacing:-.04em;line-height:1.08;margin-bottom:10px}
.legal__meta{font-size:.82rem;color:var(--text-3);margin-bottom:38px}
.legal h2{font-size:1.12rem;font-weight:600;letter-spacing:-.02em;margin:34px 0 12px}
.legal p{font-size:.95rem;line-height:1.7;color:var(--text-2);margin-bottom:14px}
.legal ul{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:9px}
.legal li{position:relative;padding-left:20px;font-size:.95rem;line-height:1.65;color:var(--text-2)}
.legal li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--blue-l)}
.legal a{color:var(--blue-l);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--sky)}
.legal strong{color:var(--text);font-weight:600}

/* ---------- Work / portfolio ---------- */
/* min() lets the track shrink below 320px on narrow phones; a bare 320px floor
   is wider than the content box at 320px viewports and forces a sideways scroll. */
.work{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:22px}
.work__item{overflow:hidden;border-radius:var(--r-xl);display:flex;flex-direction:column;
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease)}
.work__item:hover{transform:translateY(-4px);border-color:rgba(92,224,230,.36)}
.work__shot{position:relative;aspect-ratio:4/3;background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--stroke);overflow:hidden}
/* Fake browser chrome so a bare screenshot still reads as a website. */
.work__chrome{position:absolute;top:0;left:0;right:0;height:30px;z-index:2;display:flex;align-items:center;gap:6px;
  padding:0 12px;background:rgba(10,14,20,.86);border-bottom:1px solid var(--stroke)}
.work__chrome i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18)}
.work__shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;padding-top:30px}
/* Placeholder panel — delete once a real screenshot is dropped in. */
.work__ph{position:absolute;inset:30px 0 0;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(92,224,230,.10),rgba(27,168,188,.05));
  font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.work__body{padding:20px 22px 24px;display:grid;gap:7px}
.work__tag{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-l)}
.work__title{font-size:1.12rem;font-weight:600;letter-spacing:-.02em}
.work__result{font-size:.88rem;line-height:1.6;color:var(--text-3)}

/* ---------- Founder ---------- */
.founder{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(28px,5vw,64px);align-items:start;
}
.founder__aside{position:sticky;top:calc(var(--nav-h) + 28px);display:grid;gap:18px;justify-items:center}
.founder__portrait{
  position:relative;width:100%;max-width:280px;aspect-ratio:1;border-radius:var(--r-lg);
  overflow:hidden;display:grid;place-items:center;
  border:1px solid var(--stroke-2);
  background:linear-gradient(150deg,rgba(92,224,230,.14),rgba(27,168,188,.05));
}
.founder__portrait img{width:100%;height:100%;object-fit:cover;display:block}
/* Stands in for a portrait rather than looking like a missing one. */
.founder__monogram{
  font-size:clamp(3rem,7vw,4.4rem);font-weight:800;letter-spacing:-.03em;
  color:var(--blue-l);
}
.founder__id{display:grid;gap:3px;text-align:center}
.founder__id strong{font-size:1.02rem;font-weight:700;color:var(--text)}
.founder__id span{font-size:.84rem;color:var(--text-3)}
.founder__body{display:grid;gap:16px}
.founder__body .section__title{margin:12px 0 4px}
.founder__body p{font-size:.98rem;line-height:1.75;color:var(--text-2);margin:0}
.founder__lede{font-size:1.1rem !important;line-height:1.65 !important;color:var(--text) !important}
.founder__points{list-style:none;display:grid;gap:11px;margin:6px 0 0;padding:0}
.founder__points li{
  display:flex;align-items:flex-start;gap:11px;
  font-size:.93rem;line-height:1.6;color:var(--text-2);
}
.founder__points svg{flex:none;width:16px;height:16px;margin-top:3px;color:var(--blue-l)}

@media (max-width:860px){
  .founder{grid-template-columns:1fr}
  .founder__aside{position:static;justify-items:start;grid-template-columns:auto 1fr;align-items:center;gap:16px}
  .founder__portrait{width:104px;max-width:104px}
  .founder__monogram{font-size:2.1rem}
  .founder__id{text-align:left}
}