/*
  Sections after the hero (01-10). Separate from style.css so the hero stays
  untouched. Same black environment, Onest type, --violet / --lav accents and
  the blue-violet already used by the hero's atmosphere.
  Scroll behaviour lives in sections.js (one rAF loop, sleeps when idle).
*/
.sx, .sx-foot {
  --sx-pad: clamp(20px, 6vw, 96px);
  --sx-blue: #3a3fb8;
  --sx-card: #0a0a0d;
  --sx-line: rgba(255,255,255,.075);
  --sx-dim: rgba(255,255,255,.58);
  --sx-ease: cubic-bezier(.2,.8,.2,1);
  position: relative;
  background: #000;
  color: #fff;
}
.sx-wrap { position: relative; z-index: 2; width: min(1200px, calc(100% - var(--sx-pad) * 2)); margin: 0 auto; }
.sx-sec { position: relative; overflow: clip; padding: clamp(96px, 15vh, 190px) 0; }

/* type */
.sx-label {
  margin: 0;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.sx-label b { margin-right: .55em; font-weight: 500; color: var(--lav); }
.sx-h2 {
  margin: 18px 0 0;
  font-size: clamp(36px, 3.9vw, 64px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.035em;
}
.sx-h2--sm { font-size: clamp(30px, 2.9vw, 46px); }
.sx-h2--xl { font-size: clamp(42px, 5.4vw, 88px); }
.sx-lede { margin: 22px 0 0; max-width: 40ch; font-size: 15px; line-height: 1.6; color: var(--sx-dim); }

/* surfaces */
.sx-glass {
  position: relative;
  border: 1px solid var(--sx-line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(24,23,31,.78), rgba(9,9,12,.86));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 24px 48px rgba(0,0,0,.45);
}
.sx-dots {
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px);
  background-size: 14px 14px;
}

/* buttons: dark plate + notched white arrow chip (as in the reference) */
.sx-btn {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  height: 44px;
  padding: 0 6px 0 18px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  background: #141418;
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background .3s ease, border-color .3s ease, transform .3s var(--sx-ease);
}
.sx-btn i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 30px;
  border-radius: 7px;
  background: #fff;
  color: #0a0a0d;
  font-style: normal;
  font-size: 15px;
  clip-path: polygon(0 0, 100% 0, 100% 68%, 80% 100%, 0 100%);
  transition: transform .35s var(--sx-ease);
}
.sx-btn:hover { background: #1c1b22; border-color: rgba(201,173,255,.28); }
.sx-btn:hover i { transform: translateX(3px); }
.sx-btn:focus-visible { outline: 2px solid var(--lav); outline-offset: 3px; }
.sx-btn--light { background: #fff; color: #0a0a0d; border-color: #fff; }
.sx-btn--light i { background: #0a0a0d; color: #fff; }
.sx-btn--light:hover { background: #ece6ff; border-color: #ece6ff; }
.sx-btn.is-pressed { transform: scale(.98); }   /* immediate feedback while the purchase dialog opens */
.sx-btn--ghost { background: transparent; padding: 0 20px; }
.sx-btn--wide { width: 100%; justify-content: space-between; }
.sx-btn--sm { height: 40px; }

/* light streaks: the SVG artwork pre-rendered once to assets/streaks.webp, so
   moving it costs nothing (live SVG blur filters re-rendered every frame) */
.sx-streak { position: absolute; display: block; max-width: none; object-fit: cover; pointer-events: none; user-select: none; will-change: transform; }

/* ---------- reveals (enabled by sections.js adding .sx-ready) ---------- */
.sx-ready [data-reveal="up"] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s ease, transform 1.1s var(--sx-ease); }
.sx-ready [data-reveal="tilt"] {
  opacity: 0;
  transform: perspective(1400px) rotateX(18deg) translate3d(0, 70px, 0) scale(.95);
  transform-origin: 50% 100%;
  transition: opacity 1s ease, transform 1.4s var(--sx-ease);
}
.sx-ready [data-reveal="rise"] { opacity: 0; transform: translate3d(0, 90px, 0) scale(.97); transition: opacity 1s ease, transform 1.3s var(--sx-ease); }
.sx-ready [data-reveal="rise"]:nth-child(2) { transition-delay: .12s; }
.sx-ready [data-reveal].is-in { opacity: 1; transform: none; }
.sx-h2 .ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.sx-h2 .ln > span { display: block; }
.sx-ready [data-reveal="mask"] .ln > span { transform: translate3d(0, 108%, 0); transition: transform 1.15s var(--sx-ease); }
.sx-ready [data-reveal="mask"] .ln:nth-child(2) > span { transition-delay: .09s; }
.sx-ready [data-reveal="mask"] .ln:nth-child(3) > span { transition-delay: .18s; }
.sx-ready [data-reveal="mask"].is-in .ln > span { transform: none; }

/* ======================= AMBIENT LIGHT (assets/ambient.webp) =======================
   The supplied blue/violet flowing-light background, shown as itself (full
   strength, whole frame across the section's width) and anchored to the bottom of
   a few sections (services, measurable delta, pricing). Only its top and bottom
   are feathered into black so sections meet without a seam. It drifts and breathes
   very slowly (~50-60s). */
.amb { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.amb b {
  position: absolute;
  left: -4%; right: -4%;
  bottom: 0;
  aspect-ratio: 1912 / 823;
  min-height: var(--amb-minh, 0px);
  display: block;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 86%, transparent 100%);
}
.amb i {
  position: absolute;
  inset: 0;
  background: url("./assets/ambient.webp") no-repeat center / cover;
  transform-origin: 60% 70%;
  animation: amb-drift var(--amb-d, 56s) ease-in-out var(--amb-dl, 0s) infinite alternate;
  will-change: transform;
}
@keyframes amb-drift {
  0%   { transform: translate3d(-1.2%, .8%, 0) scale(1.02); }
  50%  { transform: translate3d(.4%, -.3%, 0) scale(1.045); }
  100% { transform: translate3d(1.2%, -.8%, 0) scale(1.06); }
}
.amb--a { --amb-d: 58s; }
.amb--b { --amb-d: 64s; --amb-dl: -21s; }
.amb--c { --amb-d: 49s; --amb-dl: -9s; }
/* vary the one image per section: mirrored left-right here, upside down there */
/* the purple variant of the image in measurable delta and pricing, so the page alternates blue / purple */
.amb--b i, .amb--c i { background-image: url("./assets/ambient-violet.webp"); }
.amb--c b { transform: scaleY(-1); }

/* scroll: every ribbon drifts at its own depth and tilts a little as its section
   passes (--sy / --sr set from sections.js); composes with the looping motion */
.amb b { translate: 0 var(--sy, 0px); rotate: var(--sr, 0deg); }
.fc-bg i { translate: 0 var(--sy, 0px); rotate: var(--sr, 0deg); }

/* the earlier ribbons move too, each in its own way */
.amb--a i { inset: auto 0 0 0; width: 128%; aspect-ratio: 1912 / 823; background-size: 100% 100%; --pan-x: -21.875%; animation: amb-pan 42s ease-in-out infinite alternate, amb-glow 9s ease-in-out infinite alternate; }
.amb--b i { transform-origin: 20% 80%; animation: amb-sway 32s ease-in-out -8s infinite alternate, amb-glow 12s ease-in-out -3s infinite alternate; }
.amb--c i { animation: amb-rise 16s ease-in-out -5s infinite alternate, amb-glow 7s ease-in-out infinite alternate; }
@keyframes amb-glow { from { opacity: .72; } to { opacity: 1; } }
@keyframes amb-rise {
  0%   { transform: translate3d(3%, 4%, 0) scale(1.04); }
  100% { transform: translate3d(-4%, -3%, 0) scale(1.16); }
}
.pf-streak { animation: pf-float 26s ease-in-out infinite alternate; }
@keyframes pf-float { from { translate: -1.5% 1%; rotate: -1deg; } to { translate: 2% -1.5%; rotate: 1.5deg; } }
/* a soft sheen sweeps across each ribbon now and then; overlay blending means it
   only lights the ribbon itself and leaves the black untouched */
.amb--a b, .amb--b b, .amb--c b, .fc-bg { isolation: isolate; }
.amb--a b::after, .amb--b b::after, .amb--c b::after, .fc-bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  right: auto; width: 260%;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.6) 50%, transparent 62%);
  mix-blend-mode: overlay;
  transform: translate3d(-92.31%, 0, 0);
  animation: amb-sheen 11s ease-in-out infinite;
}
.amb--b b::after { animation-delay: -4s; animation-duration: 13s; }
.amb--c b::after { animation-delay: -8s; animation-duration: 10s; }
.fc-bg::after { animation-delay: -2s; animation-duration: 12s; }
@keyframes amb-sheen { 0% { transform: translate3d(-92.31%, 0, 0); } 45%, 100% { transform: translate3d(30.77%, 0, 0); } }

/* more purple ribbons in the empty areas, each a different crop, angle and motion */
.amb--d i, .amb--e i, .amb--f i { background-image: url("./assets/ambient-violet.webp"); }
/* quantified impact: a large ribbon angled in from the upper right, slowly swaying */
.amb--d b {
  left: auto; right: -22%; top: -6%; bottom: auto; width: 88%;
  aspect-ratio: 1912 / 823;
  transform: rotate(-14deg);
  -webkit-mask-image: radial-gradient(62% 60% at 58% 62%, #000 30%, transparent 72%);
          mask-image: radial-gradient(62% 60% at 58% 62%, #000 30%, transparent 72%);
}
.amb--d i { animation: amb-sway 38s ease-in-out infinite alternate; transform-origin: 30% 70%; }
@keyframes amb-sway {
  0%   { transform: rotate(-2deg) translate3d(-2%, 1%, 0) scale(1.03); }
  100% { transform: rotate(2.5deg) translate3d(2%, -2%, 0) scale(1.1); }
}
/* paradigmatic shift: a wide band under the statement; the ribbons slide sideways
   and the light breathes, while the pinned words reveal above it */
.amb--e { z-index: 0; }
.amb--e b {
  left: -10%; right: -10%; bottom: -6%; height: 62%; aspect-ratio: auto;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 45%, #000 80%, transparent 100%), radial-gradient(80% 100% at 50% 100%, #000 40%, transparent 80%);
          mask-image: linear-gradient(180deg, transparent 0, #000 45%, #000 80%, transparent 100%);
  animation: amb-breathe 11s ease-in-out infinite alternate;
}
.amb--e i { inset: auto 0 0 0; width: 170%; aspect-ratio: 1912 / 823; background-size: 100% 100%; --pan-x: -41.18%; animation: amb-pan 46s ease-in-out infinite alternate; }
/* the oversized image slides from its left edge to its right edge (transform only, so the GPU moves it) */
@keyframes amb-pan { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--pan-x), 1.5%, 0); } }
@keyframes amb-breathe { from { opacity: .55; } to { opacity: .95; } }
/* services: a smaller upside-down fragment in the top right corner */
.amb--f b {
  left: auto; right: -12%; top: 0; bottom: auto; width: 62%;
  aspect-ratio: 1912 / 823;
  transform: scale(-1, -1);
  opacity: .75;
  -webkit-mask-image: radial-gradient(70% 70% at 30% 20%, #000 25%, transparent 70%);
          mask-image: radial-gradient(70% 70% at 30% 20%, #000 25%, transparent 70%);
}
.amb--f i { animation: amb-drift 52s ease-in-out -13s infinite alternate; }

/* ======================= FLUID LIGHT (fluidlight.js) =======================
   The morphing white/lavender light band from Recording 2026-09-29 170038.mp4,
   reused in a few places. Every instance is the same animation; only its window
   (data-zfl), size and position differ. Screen-blended, with soft masks so it
   dissolves into black on every side. */
.zfl {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
          mask-image: radial-gradient(closest-side, #000 55%, transparent);
}
.zfl canvas { display: block; width: 100%; height: 100%; }
/* metrics: rising from the lower left, under the copy */
.zfl--a { left: -6%; bottom: 0; width: 60%; height: 42%; }
/* testimonials: sweeping across the lower right into pricing */
.zfl--b { right: -8%; bottom: -10%; width: 62%; height: 50%; }

/* ======================= 01 THE PLATFORM (pinned hand + phone) =======================
   Cloned from the reference recording at its own 1900x930 geometry. Everything is laid
   out in reference pixels and scaled by --s (set in sections.js): the header with
   calc(), the pinned stage as one transformed 1300x762 box. The hand and phone frame
   are the reference's own (assets/platform/hand-phone.webp, transparent screen); the
   three screens behind it are HTML and cross-fade as the scroll moves through the pin. */
.pf { --s: 1; position: relative; padding: 0; overflow: clip; font-family: "Inter Tight", "Onest", sans-serif; }
.pf-streak {
  position: absolute;
  z-index: 0;
  top: 0;
  left: min(0px, calc(50% - 950px * var(--s)));
  width: max(100%, calc(1900px * var(--s)));
  height: auto;
  pointer-events: none;
  transform: translate3d(0, var(--sy, 0px), 0) rotate(var(--sr, 0deg)) scale(1.6);
  transform-origin: 18% 30%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 11%, rgba(0,0,0,.35) 17%, #000 30%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0, transparent 11%, rgba(0,0,0,.35) 17%, #000 30%, #000 100%);
}
.pf-dots {
  position: absolute;
  background: radial-gradient(circle, rgba(255,255,255,.2) .8px, transparent 1.25px) 0 0 / 8px 8px;
  pointer-events: none;
}
.pf-dots--head {
  z-index: 0;
  top: 0;
  left: calc(50% + 450px * var(--s));
  width: calc(520px * var(--s));
  height: calc(210px * var(--s));
  opacity: .55;
  -webkit-mask-image: radial-gradient(60% 70% at 70% 30%, #000, transparent 75%);
          mask-image: radial-gradient(60% 70% at 70% 30%, #000, transparent 75%);
}
.pf-head {
  position: relative;
  z-index: 1;
  width: calc(1300px * var(--s));
  margin: 0 auto;
  padding-top: calc(190px * var(--s));
}
.pf-label {
  margin: 0;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: calc(13.5px * var(--s));
  letter-spacing: .02em;
  color: #c9c9cf;
}
.pf-label span { color: #7b72f0; margin-right: .35em; }
.pf-h2 {
  margin: calc(18px * var(--s)) 0 0;
  font-size: calc(48px * var(--s));
  font-weight: 400;
  line-height: 1.085;
  letter-spacing: -.035em;
}
.pf-h2 .ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.pf-h2 .ln > span { display: block; }
.pf-btn {
  position: absolute;
  right: calc(3px * var(--s));
  top: calc(188px * var(--s));
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(227px * var(--s));
  height: calc(46px * var(--s));
  padding: 0 calc(4px * var(--s)) 0 calc(24px * var(--s));
  border-radius: calc(9px * var(--s));
  background: linear-gradient(90deg, #2b2d34, #1b1c20);
  color: #fff;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: calc(13.5px * var(--s));
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .3s ease;
}
.pf-btn:hover { background: linear-gradient(90deg, #34363e, #222328); }
.pf-btn i {
  display: grid;
  place-items: center;
  width: calc(45px * var(--s));
  height: calc(38px * var(--s));
  border-radius: calc(8px * var(--s));
  background: #fff;
  color: #000;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 84% 100%, 0 100%);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.pf-btn:hover i { transform: translateX(2px); }
.pf-btn svg { width: calc(17px * var(--s)); height: calc(17px * var(--s)); }

/* the pin: phone top rests where the reference holds it (313 of 930) */
.pf-pin { position: relative; height: calc(762px * var(--s) + 210vh); margin-top: calc(192px * var(--s)); }
.pf-stage {
  position: sticky;
  top: calc(100svh - 747px * var(--s));
  height: calc(762px * var(--s));
  overflow: hidden;
}
.pf-box {
  position: absolute;
  left: calc(50% - 650px * var(--s));
  top: 0;
  width: 1300px;
  height: 762px;
  transform: scale(var(--s));
  transform-origin: 0 0;
}
.pf-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(360px 300px at 650px 770px, rgba(247,178,255,.95), rgba(196,120,255,.75) 32%, rgba(120,80,240,.35) 62%, rgba(90,60,220,0) 100%),
    radial-gradient(560px 330px at 640px 790px, rgba(130,70,230,.55), rgba(90,60,220,0) 100%),
    radial-gradient(340px 230px at 1010px 700px, rgba(58,63,184,.8), rgba(58,63,184,0) 100%),
    radial-gradient(290px 330px at 330px 470px, rgba(22,44,120,.55), rgba(22,44,120,0) 100%),
    radial-gradient(470px 280px at 610px 300px, rgba(18,32,92,.42), rgba(18,32,92,0) 100%);
}
.pf-box > .pf-dots {
  left: 290px; top: 95px; width: 640px; height: 335px;
  -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,.9), rgba(0,0,0,.35) 70%, transparent);
          mask-image: radial-gradient(closest-side, rgba(0,0,0,.9), rgba(0,0,0,.35) 70%, transparent);
}
.pf-word { position: absolute; left: 0; top: 517px; width: 1297px; height: 245px; overflow: visible; }
.pf-device { position: absolute; left: 220px; top: 10px; width: 600px; height: 752px; }
.pf-hand { position: absolute; inset: 0; width: 600px; height: 752px; pointer-events: none; }
.pf-fade { position: absolute; left: -400px; right: -400px; bottom: 0; height: 90px; background: linear-gradient(180deg, rgba(0,0,0,0), #000 92%); pointer-events: none; }

/* ---- the phone screen (234x491, sits under the frame's transparent hole) ---- */
.pf-screen {
  position: absolute;
  left: 262px; top: 123px;
  width: 234px; height: 491px;
  overflow: hidden;
  border-radius: 35px;
  background: #000;
  color: #fff;
  font-family: "Inter Tight", "Onest", sans-serif;
}
.pfs-island { position: absolute; z-index: 5; left: 88px; top: 15px; width: 58px; height: 16px; border-radius: 10px; background: #050506; }
.pfs-island::after { content: ""; position: absolute; right: 7px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: #15133a; }
.pfs {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .55s ease;
}
.pfs.is-on { opacity: 1; }
.pfs::before { /* the aurora: a tight bright band just above the tiles, with a soft blue haze */
  content: "";
  position: absolute;
  left: -40px; right: -40px; top: 150px; height: 170px;
  background:
    radial-gradient(70px 22px at 157px 97px, rgba(196,150,255,.95), rgba(140,100,255,.55) 45%, rgba(100,80,240,0) 100%),
    radial-gradient(130px 48px at 157px 92px, rgba(110,90,255,.5), rgba(110,90,255,0) 100%),
    radial-gradient(190px 80px at 157px 70px, rgba(40,52,150,.45), rgba(40,52,150,0) 100%);
  pointer-events: none;
}
.pfs-app {
  position: absolute; left: 101px; top: 61px;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  background: #0a0a0b;
}
.pfs-app svg { width: 15px; height: 15px; }
.pfs-label { position: absolute; left: 0; right: 0; top: 106px; font-size: 7.4px; letter-spacing: .04em; text-transform: uppercase; text-align: center; color: #8f8f96; }
.pfs-title { position: absolute; left: 0; right: 0; top: 126px; margin: 0; font-size: 24.5px; font-weight: 300; line-height: 26.5px; letter-spacing: -.025em; text-align: center; }
.pfs-grid { position: absolute; left: 8px; top: 247px; display: grid; grid-template-columns: 106px 106px; grid-auto-rows: 110px; gap: 5px; }
.pfs-grid--wide { top: 232px; grid-template-columns: 218px; grid-auto-rows: 110px; gap: 13px; }
.pfs-tile {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
}
.pfs-grid:not(.pfs-grid--wide) > .pfs-tile:nth-child(-n+2) { background: linear-gradient(180deg, rgba(130,90,240,.3), rgba(255,255,255,.04) 42%, rgba(255,255,255,.03)); }
.pfs-grid--wide > .t3 { background: radial-gradient(95px 55px at 50% 25%, rgba(150,100,255,.45), rgba(150,100,255,0)), rgba(255,255,255,.035); }
.pfs-ico { position: absolute; left: 8px; top: 10px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 3.5px; background: rgba(255,255,255,.1); color: #e2e2e8; }
.pfs-ico svg { width: 9.5px; height: 9.5px; }
.pfs-more { position: absolute; right: 8px; top: 9px; width: 10px; height: 10px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; }
.pfs-more::after { content: ""; position: absolute; left: 2.4px; top: 3.6px; width: 1.2px; height: 1.2px; border-radius: 50%; background: #fff; box-shadow: 2.3px 0 #fff; }
.pfs-num { position: absolute; left: 7px; top: 33px; font-size: 20px; font-weight: 500; letter-spacing: -.01em; line-height: 1.1; }
.pfs-note { position: absolute; left: 8px; top: 73px; display: grid; gap: 1.5px; padding-left: 6px; border-left: 1px solid rgba(255,255,255,.45); }
.pfs-note b { font-size: 7px; font-weight: 600; }
.pfs-note span { font-size: 5px; color: #8b8b92; }
.pfs-t { position: absolute; left: 8px; top: 32px; font-size: 9px; font-weight: 500; }
.pfs-sub { position: absolute; left: 8px; top: 44px; font-size: 6px; color: #8b8b92; }
.pfs-k { position: absolute; left: 8px; top: 62px; font-size: 8px; color: #9a9aa1; }
.t4 .pfs-num { top: 73px; font-size: 19px; }
.pfs-ring { position: absolute; left: 62px; top: 55px; width: 40px; height: 40px; }
.pfs-ring svg { position: absolute; inset: 0; }
.pfs-ring i { position: absolute; left: 8px; top: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #17171b; color: #fff; }
.pfs-ring i svg { position: static; width: 12px; height: 12px; }
.pfs-scale { position: absolute; left: 8px; right: 12px; top: 62px; display: flex; justify-content: space-between; font-size: 4.2px; color: #8b8b92; }
.pfs-bars { position: absolute; left: 6px; right: 12px; top: 72px; display: flex; justify-content: space-between; height: 22px; }
.pfs-bars i { width: 4.6px; height: 100%; border-radius: 2.4px; background: #fff; }
.pfs-bars i.off { background: #3b3b3f; }
.pfs-grid--wide .pfs-bars { left: 8px; right: 8px; top: 70px; height: 21px; }
.pfs-grid--wide .pfs-bars i { width: 4.2px; }
.pfs-grid--wide .pfs-scale { left: 8px; right: 8px; top: 60px; }
.pfs-grid--wide .t4 .pfs-k { left: auto; right: 9px; top: 46px; font-size: 8px; }
.pfs-grid--wide .t4 .pfs-num { left: auto; right: 8px; top: 55px; font-size: 45px; font-weight: 400; letter-spacing: -.03em; line-height: 1; }
.pfs-wire { background: linear-gradient(180deg, rgba(130,90,240,.22), rgba(255,255,255,.03)) !important; }
.pfs-hyper { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- the step copy on the right ---- */
.pf-steps { position: absolute; left: 908px; top: 62px; width: 330px; height: 335px; }
.pf-rail { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: rgba(255,255,255,.16); }
.pf-rail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #5f63ff, #a35fe0);
  transform: scaleY(var(--rail, .3333));
  transform-origin: 50% 0;
}
.pf-step {
  position: absolute;
  left: 33px; top: 0;
  width: 260px;
  opacity: 0;
  transition: opacity .5s ease;
}
.pf-step.is-on { opacity: 1; }
.pf-n { display: block; font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; line-height: 16px; color: #7b72f0; }
.pf-step h3 { margin: 20px 0 0; font-size: 25px; font-weight: 400; line-height: 32px; letter-spacing: -.025em; }
.pf-step p { margin: 17px 0 0; width: 228px; font-size: 14px; line-height: 18px; letter-spacing: -.005em; color: #9d9da4; }
.pf-msteps { display: none; }

/* ======================= SERVICES: what we build ======================= */
.s3b { padding-top: clamp(80px, 12vh, 140px); }
.bs-head { text-align: center; }
.bs-head .sx-h2 { margin: 0; font-weight: 500; letter-spacing: -.02em; }
.bs-sub { margin: 16px 0 0; font-size: 15px; color: rgba(255,255,255,.88); }
.bs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  width: min(820px, 100%);
  margin: 56px auto 0;
}
.bs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 480px;
  padding: 28px 16px 22px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: #000;
  transition: border-color .4s ease, background .4s ease;
}
.bs-card:hover { border-color: rgba(255,255,255,.22); }
.bs-badge {
  position: absolute;
  top: 12px; right: 12px;
  padding: 7px 13px;
  border-radius: 99px;
  background: #1c1c1f;
  font-size: 12px;
  font-weight: 600;
}
/* icons: the reference's own looping 3D renders (assets/icons/*.mp4, 156-frame seamless loop);
   screen blend drops the clip's black so it sits cleanly on the card */
.bs-icon { height: 216px; margin-top: -8px; display: grid; place-items: center; }
.bs-vid { width: 266px; height: 216px; object-fit: contain; mix-blend-mode: screen; pointer-events: none; }
.bs-card h3 { margin: 6px 0 0; font-size: clamp(30px, 2.8vw, 40px); font-weight: 500; line-height: 1.1; letter-spacing: .005em; }
.bs-card p { margin: 18px 0 0; max-width: 42ch; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.62); }
.bs-link {
  margin-top: auto;
  padding-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  color: rgba(255,255,255,.72);
  font-size: 14px;
  text-decoration: none;
  transition: color .25s ease;
}
.bs-link span { font-size: 20px; line-height: 1; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.bs-link:hover { color: #fff; }
.bs-link:hover span { transform: translateX(4px); }

/* ======================= MEASURABLE DELTA (editorial outcomes) =======================
   Black, huge type, hairlines. The statement in focus (the one crossing the middle
   of the viewport, or the one under the cursor) turns Zyric purple, lifts a few px,
   and the hairline under it warms toward purple. Headlines in Onest, labels in the
   Geist Mono the platform section already loads. */
.md {
  --md-on: color-mix(in srgb, var(--violet) 72%, var(--lav));
  padding: clamp(110px, 17vh, 190px) 0 clamp(70px, 10vh, 120px);
  background:
    radial-gradient(40% 30% at 12% 28%, rgba(106,75,208,.07), transparent 70%),
    radial-gradient(38% 30% at 88% 72%, rgba(58,63,184,.06), transparent 70%),
    #000;
}
.md-wrap { position: relative; z-index: 2; width: min(1320px, calc(100% - var(--sx-pad) * 2)); margin: 0 auto; }
.md-meta { display: flex; align-items: center; gap: 16px; margin: 0; font-size: 1em; font-weight: inherit; }  /* an h2 that looks like the label it was */
.md-k { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--violet); }
.md-meta i { width: 44px; height: 1px; background: rgba(255,255,255,.16); }
.md-v { font-size: 11.5px; letter-spacing: .02em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.md-list { margin: 0; padding: 0; list-style: none; }
.md-row {
  --fs: clamp(48px, 10vw, 150px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 48px;
  padding: calc(var(--fs) * .86) 0 calc(var(--fs) * .43);
  cursor: default;
}
.md-row:first-child { padding-top: calc(var(--fs) * .52); }
.md-row::after { /* the hairline */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(255,255,255,.075);
  transition: background .7s ease;
}
.md-h {
  margin: 0;
  font-size: var(--fs);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -.015em;
  color: #f4f4f6;
  opacity: .94;
  transition: color .7s ease, opacity .7s ease, transform .8s var(--sx-ease);
}
.md-h span { display: block; }
.md-d {
  justify-self: end;
  max-width: 34ch;
  margin: 0;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .12em;
  text-align: right;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  transition: color .7s ease;
}
.md-row.is-on .md-h { color: var(--md-on); opacity: 1; transform: translate3d(0, -6px, 0); }
.md-row.is-on .md-d { color: rgba(255,255,255,.72); }
.md-row.is-on::after { background: color-mix(in srgb, var(--violet) 60%, transparent); }
.md-next { margin-top: clamp(160px, 26vh, 300px); }

/* ======================= 03 QUANTIFIED IMPACT ======================= */
/* Four live metric cards. Each card has a cursor spotlight and a border that lights
   up where the cursor is, a small 3D tilt, a number that counts to its value when the
   card enters the view, and its own animated micro-visual. */
.qi { padding: clamp(110px, 17vh, 190px) 0 clamp(130px, 22vh, 240px); font-family: "Inter Tight", "Onest", sans-serif; }
.qi-grid-bg { /* faint engineering grid, fading out from the centre */
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(60% 55% at 50% 45%, #000, transparent 75%);
          mask-image: radial-gradient(60% 55% at 50% 45%, #000, transparent 75%);
}
.qi-wrap { position: relative; z-index: 2; width: min(1180px, calc(100% - var(--sx-pad) * 2)); margin: 0 auto; }
.qi-kicker { display: flex; align-items: center; gap: 10px; margin: 0; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--lav); }
.qi-kicker i { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--lav); }
.qi-kicker i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(201,173,255,.55); animation: qi-ping 2.4s ease-out infinite; }
@keyframes qi-ping { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(4); opacity: 0; } }
.qi-h2 { margin: 18px 0 0; font-size: clamp(38px, 4.2vw, 66px); font-weight: 400; line-height: 1.08; letter-spacing: -.035em; }
.qi-h2 .ln { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.qi-h2 .ln > span { display: block; }
.qi-h2 em {
  font-style: italic;
  padding-right: .08em;
  background: linear-gradient(100deg, #a35fe0 0%, #c9adff 30%, #fff 45%, #c9adff 60%, #a35fe0 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: qi-shine 6s ease-in-out infinite;
}
@keyframes qi-shine { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

.qi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 64px; perspective: 1400px; }
.sx-ready .qi-card[data-reveal="rise"] { transition-delay: calc(var(--i) * .11s); }
.qi-in {
  --px: 50%; --py: 50%; --hov: 0;
  position: relative;
  min-height: 320px;
  padding: 34px 34px 32px;
  border-radius: 18px;
  background: linear-gradient(180deg, #0e0c16, #09080f);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  overflow: hidden;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
}
.qi-in::before { /* cursor spotlight */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--px) var(--py), rgba(163,95,224,.22), transparent 45%);
  opacity: var(--hov); transition: opacity .4s ease;
}
.qi-in::after { /* border that lights up near the cursor, plus a slow sweep along the top */
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(260px circle at var(--px) var(--py), rgba(214,190,255, calc(var(--hov) * 1)), transparent 55%);
  -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);
}
/* the slow sweep along the top edge: a 1px line the GPU slides across (it used to be
   a background position animated through a custom property, which repainted all four
   cards every frame). Same path and timing: -60% -> 160% of a 40%-wide light. */
.qi-line {
  position: absolute; top: 0; left: 0; width: 40%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(201,173,255,.55) 50%, transparent 100%);
  transform: translate3d(-90%, 0, 0);
  animation: qi-sweep 7s ease-in-out calc(var(--i, 0) * -1.7s) infinite;
}
@keyframes qi-sweep { 0% { transform: translate3d(-90%, 0, 0); } 55%, 100% { transform: translate3d(240%, 0, 0); } }
.qi-card:hover .qi-in { box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 30px 60px -30px rgba(106,75,208,.45); }

.qi-top { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.qi-tag { font-family: "Geist Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: #9c8fd0; }
.qi-badge { padding: 5px 11px; border: 1px solid rgba(201,173,255,.22); border-radius: 99px; background: rgba(106,75,208,.12); font-family: "Geist Mono", ui-monospace, monospace; font-size: 10.5px; color: #d9ccff; white-space: nowrap; }
.qi-in h3 { position: relative; margin: 22px 0 0; font-size: clamp(19px, 1.5vw, 23px); font-weight: 400; letter-spacing: .01em; text-transform: uppercase; }
.qi-num { position: relative; margin: 44px 0 0; display: flex; align-items: baseline; font-size: clamp(60px, 5.6vw, 88px); font-weight: 300; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.qi-num i { font-style: normal; }
.qi-num span { color: var(--lav); transition: text-shadow .6s ease; }
.qi-card.is-done .qi-num span { animation: qi-flash 1.2s ease-out; }
@keyframes qi-flash { 0% { text-shadow: 0 0 0 rgba(201,173,255,0); } 30% { text-shadow: 0 0 24px rgba(201,173,255,.9); } 100% { text-shadow: 0 0 0 rgba(201,173,255,0); } }
.qi-d { position: relative; max-width: 36ch; margin: 18px 0 0; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.62); }

/* micro-visuals: sit in the empty right side of each card and rise toward the cursor */
.qi-vis { position: absolute; right: 30px; bottom: 34px; width: 150px; height: auto; transform: translateZ(40px); opacity: .95; }
/* 01 clock: the arc fills to show reclaimed time, the hand keeps turning */
.qi-arc { stroke-dasharray: 0 100; transition: stroke-dasharray 2s cubic-bezier(.2,.8,.2,1) .3s; }
.qi-card.is-counted .qi-arc { stroke-dasharray: 72 100; }
.qi-hand { transform-origin: 70px 70px; animation: qi-turn 9s linear infinite; }
@keyframes qi-turn { to { transform: rotate(360deg); } }
.qi-ticks line { stroke: rgba(255,255,255,.18); stroke-width: 1; }
/* 02 pulse: a bright signal runs along the waveform, the peak pings */
.qi-pl { stroke-dasharray: 18 82; animation: qi-run 2.2s cubic-bezier(.5,0,.3,1) infinite; filter: drop-shadow(0 0 4px rgba(201,173,255,.8)); }
@keyframes qi-run { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.qi-ping { transform-origin: 88px 18px; animation: qi-peak 2.2s ease-out infinite; }
@keyframes qi-peak { 0%, 38% { opacity: 0; transform: scale(.3); } 48% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0; transform: scale(2.2); } }
/* 03 funnel: every lead that falls in comes out the bottom */
.qi-drops circle { offset-rotate: 0deg; animation: qi-fall var(--t, 2.6s) cubic-bezier(.45,0,.55,1) var(--dl, 0s) infinite; opacity: 0; }
@keyframes qi-fall { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.qi-catch { animation: qi-glow 1.3s ease-in-out infinite alternate; }
@keyframes qi-glow { from { opacity: .45; } to { opacity: 1; filter: drop-shadow(0 0 5px #c9adff); } }
/* 04 bars: grow to their multiple, then breathe */
.qi-bars rect { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(.04); transition: transform 1.4s cubic-bezier(.2,.8,.2,1) calc(.25s + var(--k) * .12s); }
.qi-card.is-counted .qi-bars rect { transform: scaleY(var(--h)); animation: qi-breathe 3.2s ease-in-out calc(1.8s + var(--k) * .2s) infinite alternate; }
@keyframes qi-breathe { from { transform: scaleY(var(--h)); } to { transform: scaleY(calc(var(--h) * .9)); } }
.qi-trend { stroke-dashoffset: 100; opacity: 0; transition: opacity .6s ease 1.4s; animation: qi-march 3s linear infinite; }
.qi-card.is-counted .qi-trend { opacity: .8; }
@keyframes qi-march { to { stroke-dashoffset: 0; } }

/* ======================= 04 PARADIGMATIC SHIFT ======================= */
/* A pinned statement. As the pin scrolls (--p, 0..1), the big line lights up word by
   word (each word rises, sharpens and brightens in turn), the glow behind it swells,
   and once the last word lands "work better." picks up a moving lavender sheen. */
.ps { padding: 0; font-family: "Inter Tight", "Onest", sans-serif; }
.ps-pin { position: relative; height: 230vh; }
.ps-stage { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
.ps-glow { position: absolute; inset: 0; pointer-events: none; }
.ps-glow i { position: absolute; left: 50%; top: 52%; border-radius: 50%; translate: -50% -50%; }
.ps-glow i:nth-child(1) {
  width: 70vw; height: 58vh;
  background: radial-gradient(closest-side, rgba(106,75,208,.28), rgba(58,40,120,.12) 55%, transparent);
  scale: calc(.8 + var(--p, 0) * .45);
  animation: ps-breathe 9s ease-in-out infinite alternate;
}
.ps-glow i:nth-child(2) {
  width: 34vw; height: 26vh;
  background: radial-gradient(closest-side, rgba(201,173,255,.2), transparent);
  opacity: calc(var(--p, 0) * 1.1);
  translate: calc(-50% + var(--gx, 0px)) calc(-50% + var(--gy, 0px));
  transition: translate 1.2s cubic-bezier(.2,.8,.2,1);
}
@keyframes ps-breathe { from { opacity: .75; } to { opacity: 1; } }
.ps-inner { position: relative; z-index: 2; display: grid; justify-items: center; padding: 0 var(--sx-pad); text-align: center; }
.ps-pill { position: relative; margin: 0; padding: 7px 15px; border-radius: 99px; overflow: hidden; isolation: isolate; }
/* border with a light that travels round it: a large conic square rotates (GPU only)
   behind an inner fill that leaves a 1px ring showing. It used to animate a custom
   property, which repainted the pill every frame. */
.ps-pill::after {
  content: ""; position: absolute; z-index: -2; left: 50%; top: 50%; width: 140%; aspect-ratio: 1;
  margin: -70% 0 0 -70%;
  background: conic-gradient(rgba(201,173,255,.2) 0 70%, #c9adff 82%, rgba(201,173,255,.2) 94%);
  animation: ps-orbit 5s linear infinite;
}
.ps-pill::before {   /* the pill's own fill: rgba(106,75,208,.1) over the black page */
  content: ""; position: absolute; z-index: -1; inset: 1px; border-radius: inherit; background: #0b0815;
}
@keyframes ps-orbit { to { transform: rotate(360deg); } }
.ps-pill span { position: relative; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: #c9adff; }
.ps-pre { margin: 40px 0 0; font-size: clamp(22px, 2.3vw, 36px); font-weight: 300; letter-spacing: -.02em; color: rgba(201,173,255,.62); }
.ps-big { margin: 26px 0 0; font-size: clamp(44px, 5.6vw, 92px); font-weight: 400; line-height: 1.04; letter-spacing: -.04em; }
.ps-l { display: block; }
.ps-big .w {
  --o: 0;
  display: inline-block;
  opacity: calc(.12 + var(--o) * .88);
  filter: blur(calc((1 - var(--o)) * 6px));
  transform: translate3d(0, calc((1 - var(--o)) * .22em), 0);
  will-change: opacity, filter, transform;
}
.ps-big em { font-style: italic; padding-right: .06em; }
.ps-big em .w {
  background: linear-gradient(100deg, #ece4ff 0%, #c9adff 35%, #b88cf0 55%, #c9adff 75%, #ece4ff 100%) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .04em;
}
.ps.is-done .ps-big em .w { animation: ps-sheen 5s ease-in-out infinite; }
@keyframes ps-sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

/* ======================= 08 PRICING ======================= */
.s8-head { margin-bottom: 7vh; text-align: center; }
#plans { scroll-margin-top: 48px; }
.s8-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 820px; margin: 0 auto; }
.s8-card { padding: 26px; border-radius: 18px; background: linear-gradient(180deg, #111115, #09090c); }
.s8-card h3 { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.s8-for { margin: 8px 0 0; font-size: 13px; color: rgba(255,255,255,.55); }
.s8-price { margin: 28px 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.s8-price b { font-size: clamp(54px, 5vw, 74px); font-weight: 400; letter-spacing: -.05em; line-height: 1; }
.s8-price span { font-family: "Geist Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.s8-mo { margin: 12px 0 0; font-size: 17px; color: rgba(255,255,255,.6); }
.s8-mo b { font-weight: 500; color: var(--lav); }
.s8-box { margin-top: 26px; padding: 18px; border: 1px solid var(--sx-line); border-radius: 12px; background: rgba(255,255,255,.025); }
.s8-tag { display: inline-block; padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.07); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.s8-box ul { margin: 18px 0 22px; padding: 16px 0 0; border-top: 1px solid var(--sx-line); list-style: none; display: grid; gap: 9px; font-size: 13px; color: rgba(255,255,255,.82); }
.s8-box li::before { content: "\2713"; margin-right: 10px; color: rgba(255,255,255,.6); }
.s8-card--adv {
  border-color: rgba(201,173,255,.22);
  background:
    radial-gradient(70% 55% at 85% 0%, rgba(163,95,224,.45), transparent 70%),
    radial-gradient(60% 50% at 20% 100%, rgba(58,63,184,.35), transparent 70%),
    linear-gradient(180deg, #17142a, #0c0b16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 60px rgba(106,75,208,.22);
}
.s8-card--adv .s8-box { background: rgba(10,9,20,.5); }
.s8-card--adv .s8-box li::before { color: var(--lav); }
/* package lists: capability name with the plan's description under it */
.s8-card { display: flex; flex-direction: column; }
.s8-box { flex: 1; display: flex; flex-direction: column; }
.s8-box .sx-btn { margin-top: auto; }
.s8-tag { align-self: flex-start; }
.s8-box ul { gap: 14px; }
.s8-box li { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: start; }
.s8-box li::before { grid-row: 1 / span 2; margin-right: 0 !important; line-height: 1.4; }
.s8-box li b { font-weight: 500; color: #fff; }
.s8-box li span { grid-column: 2; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.55); }
.s8-card--adv .s8-box li span { color: rgba(255,255,255,.72); }

/* ======================= FINAL CTA + FOOTER (clone of the reference ending) =======================
   The flowing-light background runs full width behind the CTA and carries on under
   the footer, a slightly translucent dark panel, so the ribbons ghost through its
   upper right as in the reference. */
.fc { position: relative; z-index: 1; overflow: visible; padding: 0; min-height: clamp(470px, 26.8vw, 640px); text-align: center; font-family: "Inter Tight", "Onest", sans-serif; }
.fc-bg {
  position: absolute; left: 0; right: 0; top: -15vw;
  height: 45vw;
  overflow: hidden; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 32.8%, #000 33.8%, #000 80%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, transparent 32.8%, #000 33.8%, #000 80%, transparent 100%);
}
.fc-bg i { position: absolute; inset: 0; background: url("./assets/ambient.webp") no-repeat 50% 0 / 100% 100%; transform-origin: 60% 40%; animation: amb-rise 18s ease-in-out infinite alternate, amb-glow 8s ease-in-out -4s infinite alternate; }
.fc-inner { position: relative; z-index: 2; display: grid; justify-items: center; padding: 44px var(--sx-pad) 150px; }
.fc-label { margin: 0; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .02em; color: #c9c9cf; }
.fc-label span { color: #7b72f0; }
.fc-h2 { margin: 22px 0 0; font-size: clamp(40px, 3.1vw, 62px); font-weight: 500; line-height: 1.04; letter-spacing: -.055em; }
.fc-h2 .ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.fc-h2 .ln > span { display: block; }
.fc-sub { margin: 26px 0 0; max-width: 540px; font-size: 13px; line-height: 1.2; letter-spacing: -.02em; color: rgba(255,255,255,.72); }
.fc-btn {
  display: flex; align-items: center; gap: 18px;
  margin-top: 40px; height: 34px; padding: 0 3px 0 18px;
  border-radius: 6px;
  background: linear-gradient(90deg, #26272d, #1b1c20);
  color: #fff; text-decoration: none;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 11.5px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase;
  transition: background .3s ease;
}
.fc-btn:hover { background: linear-gradient(90deg, #303138, #222328); }
.fc-btn i, .fx-field button {
  display: grid; place-items: center; width: 34px; height: 28px; flex: none;
  border: 0; border-radius: 6px; background: #fff; color: #000;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 82% 100%, 0 100%);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.fc-btn:hover i { transform: translateX(2px); }
.fc-btn svg, .fx-field svg { width: 15px; height: 15px; }

.sx-foot.fx {
  z-index: 3;
  margin-top: 0;
  padding: 84px 0 26px;
  border: 0;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, rgba(24,24,26,.9), rgba(22,22,24,.97) 45%, #151517);
  font-family: "Inter Tight", "Onest", sans-serif;
}
.fx-wrap { width: min(972px, calc(100% - var(--sx-pad) * 2)); margin: 0 auto; }
.fx-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.fx-word { display: block; width: 312px; margin-top: 17px; }
.fx-word svg { display: block; width: 100%; height: auto; }
.fx-k { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .02em; color: rgba(255,255,255,.55); }
.fx-k--w { color: #fff; font-weight: 500; }
.fx-news { position: relative; overflow: hidden; width: 353px; padding: 22px 18px 22px; border-radius: 9px; background: linear-gradient(180deg, #232327, #1c1c20); }
.fx-news::after { content: ""; position: absolute; left: 30px; bottom: -22px; width: 170px; height: 44px; border-radius: 50%; background: radial-gradient(closest-side, rgba(214,180,255,.8), rgba(106,75,208,.45) 55%, transparent); filter: blur(7px); pointer-events: none; }
.fx-news label { display: block; }
.fx-field { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.fx-field input { flex: 1; min-width: 0; padding: 8px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.14); background: transparent; color: #fff; font: inherit; font-size: 12px; outline: none; }
.fx-field input::placeholder { color: rgba(255,255,255,.55); }
.fx-field button { cursor: pointer; }
.fx-thanks { display: none; position: relative; z-index: 1; margin: 8px 0 0; font-size: 12px; color: var(--lav); }
.fx-news.is-done .fx-thanks { display: block; }
.fx-cols { display: grid; grid-template-columns: 324px 217px 280px 1fr; margin-top: 56px; }
.fx-info { display: grid; gap: 34px; align-content: start; }
.fx-blk { padding-left: 12px; border-left: 1px solid rgba(255,255,255,.7); }
.fx-blk p { margin: 12px 0 0; font-size: 12.5px; line-height: 1.22; letter-spacing: -.02em; color: #fff; }
.fx-blk a { color: inherit; text-decoration: none; }
.fx-col { display: flex; gap: 24px; }
.fx-col .fx-k { width: 56px; flex: 0 0 56px; text-align: right; padding-top: 1px; }
.fx-col div { display: grid; gap: 12px; align-content: start; }
.fx-col a { color: #fff; text-decoration: none; font-size: 14.5px; font-weight: 500; line-height: 18px; letter-spacing: -.02em; transition: color .25s ease; }
.fx-col a:hover { color: var(--lav); }

/* ======================= responsive ======================= */
@media (max-width: 900px) {
  .sx-sec { padding: 96px 0; }
  /* 01: the pin becomes a normal flow; the stage is cropped around the hand and
     the phone cycles its screens on its own, with the steps listed below */
  .pf { padding: 0; }
  .pf-head { width: auto; margin: 0 var(--sx-pad); padding-top: 110px; }
  .pf-btn { position: relative; right: auto; top: auto; margin-top: 30px; }
  .pf-pin { height: auto; margin-top: 36px; }
  .pf-stage { position: relative; top: 0; height: calc(762px * var(--sb, .6)); }
  .pf-box { left: calc(50% - 600px * var(--sb, .6)); transform: scale(var(--sb, .6)); }
  .pf-steps { display: none; }
  .pf-msteps { display: grid; gap: 26px; margin: 34px var(--sx-pad) 0; padding: 0 0 0 20px; list-style: none; border-left: 1px solid rgba(255,255,255,.16); }
  .pf-msteps li { opacity: .38; transition: opacity .5s ease; }
  .pf-msteps li.is-on { opacity: 1; }
  .pf-msteps h3 { margin: 10px 0 0; font-size: 22px; font-weight: 400; line-height: 1.25; letter-spacing: -.025em; }
  .pf-msteps p { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: #9d9da4; }
  /* services */
  .bs-grid { grid-template-columns: 1fr; width: min(460px, 100%); }
  .bs-card { min-height: 0; }
  /* measurable delta: description drops under the statement */
  .md-row { grid-template-columns: 1fr; --fs: clamp(40px, 10.4vw, 96px); padding: calc(var(--fs) * .9) 0 calc(var(--fs) * .6); }
  .md-d { justify-self: start; text-align: left; margin-top: 18px; font-size: 11px; }
  .md-meta { flex-wrap: wrap; gap: 10px 14px; }
  /* ambient light: keep a readable height on narrow screens */
  .amb--d b { width: 160%; right: -60%; top: 0; }
  .amb--f b { width: 130%; right: -40%; }
  .amb--e b { height: 45%; }
  .amb b { --amb-minh: 380px; }
  /* fluid light: smaller windows on phones */
  .zfl--a, .zfl--b { width: 110%; height: 42%; }
  .zfl--a { height: 30%; opacity: .5; }
  /* final CTA + footer */
  .fc-bg { top: 0; height: 110%; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); }
  .fc-bg i { background-size: cover; background-position: 40% 70%; }
  .fc-br { display: none; }
  .fx-top { flex-direction: column; }
  .fx-word { width: min(312px, 80%); margin-top: 0; }
  .fx-news { width: 100%; }
  .fx-cols { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .fx-info { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .fx-col { flex-direction: column; gap: 14px; }
  .fx-col .fx-k { width: auto; flex: none; text-align: left; }
  /* 03 quantified impact: one column, visuals smaller */
  .qi-grid { grid-template-columns: 1fr; margin-top: 44px; }
  .qi-in { min-height: 0; padding: 26px 24px 28px; }
  .qi-vis { position: relative; right: auto; bottom: auto; display: block; width: 120px; margin: 22px 0 0 auto; transform: none; }
  .qi-num { margin-top: 34px; }
  /* 04 paradigmatic shift: no pin, the words light up in turn as it scrolls in */
  .ps-pin { height: auto; }
  .ps-stage { position: relative; height: auto; padding: 120px 0; }
  .ps-big .w { transition: opacity .8s ease, filter .8s ease, transform 1s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--k) * .09s); }
  .ps.is-in .ps-big .w { --o: 1; }
  /* 08 */
  .s8-grid { grid-template-columns: 1fr; }
  /* footer */
}
@media (max-width: 520px) {
}

/* ======================= quality, focus & form states ======================= */
/* Keyboard focus is visible on every interactive element (mouse clicks stay clean). */
a:focus-visible, button:focus-visible, input:focus-visible, .qi-card:focus-visible {
  outline: 2px solid var(--lav);
  outline-offset: 3px;
  border-radius: 6px;
}
.fx-field input:focus-visible { outline: none; border-bottom-color: var(--lav); }
.fx-thanks.is-bad { color: var(--lav); }
.fx-field button:disabled { opacity: .55; cursor: default; }

/* a section's keyframe loops pause while it is off screen (class set in sections.js) */
.is-off, .is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }

/* 'lite' (set in the page head from data-saver / low memory / a measured low frame
   rate): every effect stays, the most expensive details are simplified. */
.lite .amb b::after, .lite .fc-bg::after { display: none; }            /* overlay sheens */
.lite .qi-line { display: none; }                               /* card border sweep */
.lite .ps-big .w { filter: none; }                                     /* per-word blur */
.lite .ps-pill::after { animation-duration: 10s; }
.lite .amb--e b, .lite .amb--a i, .lite .amb--b i, .lite .amb--c i, .lite .fc-bg i { animation-duration: 60s, 30s; }

/* 'q-low' (a device measured below ~22fps, or data-saver): the big decorative layers
   hold still where they are (paused, so every ribbon and light field keeps its
   composition); scroll parallax, reveals, counters, hovers and all content stay. */
.q-low .amb *, .q-low .fc-bg *, .q-low .fc-bg::after, .q-low .af, .q-low .af > b, .q-low .pf-streak,
.q-low .qi-line, .q-low .ps-pill::after { animation-play-state: paused !important; }

/* ======================= PLAN ENQUIRY DIALOG (enquiry.js) =======================
   Opened by START NOW on the pricing cards. A dark glass panel in the site's own
   type and colours; a full-height sheet on phones. Native <dialog>: focus stays
   inside, Escape closes, the page behind is inert. */
/* the scrollbar's space stays reserved, so locking the page doesn't change its width
   (which would re-lay out the whole page on the first click) */
html { scrollbar-gutter: stable; }
.enq.enq--warm:not([open]) { display: block; position: fixed; inset: 0; z-index: 2000; opacity: .001; animation: none; pointer-events: none; }
html.enq-open { overflow: hidden; }
.enq {
  --sx-ease: cubic-bezier(.2,.8,.2,1);
  width: min(680px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  color-scheme: dark;            /* native select lists and autofill stay dark */
  overflow: visible;
}
.enq::backdrop { background: rgba(3,2,8,.8); }   /* a plain dim: a full-screen blur cost ~200 ms on the first open on weaker GPUs */
.enq[open] { animation: enq-in .45s var(--sx-ease) both; }
.enq[open]::backdrop { animation: enq-fade .35s ease both; }
@keyframes enq-in { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); } }
@keyframes enq-fade { from { opacity: 0; } }
.enq-panel {
  position: relative;
  max-height: calc(100dvh - 48px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 34px 34px 28px;
  border-radius: 20px;
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(106,75,208,.22), transparent 60%),
    linear-gradient(180deg, #0f0d18, #08070d);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 70px -30px rgba(106,75,208,.5);
}
.enq-x {
  position: absolute; top: 14px; right: 14px;
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 12px; background: transparent; color: rgba(255,255,255,.6); cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.enq-x svg { width: 16px; height: 16px; }
.enq-x:hover { background: rgba(255,255,255,.06); color: #fff; }
.enq-kicker { display: flex; align-items: center; gap: 10px; margin: 0; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--lav); }
.enq-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--lav); box-shadow: 0 0 12px rgba(201,173,255,.8); }
.enq-h { margin: 14px 0 0; padding-right: 40px; font-size: clamp(26px, 3.4vw, 34px); font-weight: 500; line-height: 1.12; letter-spacing: -.025em; }
.enq-lede { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.62); }
.enq-lede b { font-weight: 500; color: #fff; }

.enq-form { margin-top: 26px; }
.enq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.enq-f { display: grid; gap: 7px; align-content: start; min-width: 0; }
.enq-f--full { grid-column: 1 / -1; }
.enq-f label { font-family: "Geist Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.66); }
.enq-f input, .enq-f select, .enq-f textarea {
  width: 100%; min-height: 46px; box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 11px;
  background: rgba(255,255,255,.035);
  color: #fff; font: inherit; font-size: 15px; line-height: 1.4;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.enq-f textarea { resize: vertical; min-height: 0; }
.enq-f select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background: rgba(255,255,255,.035) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23c9adff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px;
}
.enq-f select option { background: #0f0d18; color: #fff; }
.enq-f ::placeholder { color: rgba(255,255,255,.3); }
.enq-f input:hover, .enq-f select:hover, .enq-f textarea:hover { border-color: rgba(201,173,255,.25); }
.enq-f input:focus-visible, .enq-f select:focus-visible, .enq-f textarea:focus-visible {
  outline: none; border-color: var(--lav); background-color: rgba(163,95,224,.07); box-shadow: 0 0 0 3px rgba(201,173,255,.16);
}
.enq-f [aria-invalid="true"] { border-color: rgba(201,173,255,.85); box-shadow: 0 0 0 3px rgba(163,95,224,.22); }
.enq-err { margin: 0; min-height: 0; font-size: 12.5px; line-height: 1.4; color: var(--lav); }
.enq-err:empty { display: none; }

.enq-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.enq-status { margin: 0; font-size: 13px; color: var(--lav); }
.enq-submit { flex-shrink: 0; height: 48px; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 500; letter-spacing: .14em; }
.enq-submit:disabled { opacity: .6; cursor: default; }
.enq-note { margin: 16px 0 0; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.42); }

.enq-done-foot { display: flex; gap: 22px; margin-top: 18px; }
.enq-link { min-height: 44px; padding: 0; border: 0; background: none; color: rgba(255,255,255,.62); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.enq-link:hover { color: #fff; }
.enq-x:focus-visible, .enq-link:focus-visible { outline: 2px solid var(--lav); outline-offset: 2px; }

@media (max-width: 600px) {
  .enq { width: 100%; max-height: 100dvh; margin: auto 0 0; }
  .enq-panel { max-height: 100dvh; padding: 26px 18px 22px; border-radius: 20px 20px 0 0; }
  .enq-grid { grid-template-columns: minmax(0, 1fr); }
  .enq-foot { flex-direction: column-reverse; align-items: stretch; }
  .enq-submit { width: 100%; justify-content: space-between; }
  .enq-f input, .enq-f select, .enq-f textarea { font-size: 16px; }   /* no iOS zoom on focus */
  @keyframes enq-in { from { opacity: 0; transform: translate3d(0, 40px, 0); } }
}

/* Formspree form: two groups, service chips, a hidden spam trap, sending / result states */
.enq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enq-set { margin: 0; padding: 0; border: 0; min-width: 0; }
.enq-set + .enq-set { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.07); }
.enq-set > legend { float: left; width: 100%; padding: 0; margin-bottom: 14px; font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: #fff; }
.enq-set > legend + * { clear: both; }   /* float: keeps the heading off the divider line */
.enq-chips { margin: 0; padding: 0; border: 0; min-width: 0; }
.enq-chips > legend { padding: 0; margin-bottom: 9px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.66); }
.enq-chips > legend span { letter-spacing: .08em; text-transform: none; color: rgba(255,255,255,.4); }
.enq-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.enq-f .enq-chip-row label { position: relative; cursor: pointer; font-family: inherit; font-size: inherit; letter-spacing: normal; text-transform: none; color: inherit; }
.enq-chip-row input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.enq-chip-row span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 99px; background: rgba(255,255,255,.03);
  font-size: 13.5px; color: rgba(255,255,255,.78);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.enq-chip-row span::before {
  content: ""; width: 12px; height: 12px; border-radius: 4px; border: 1px solid rgba(201,173,255,.55);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.enq-chip-row label:hover span { border-color: rgba(201,173,255,.35); color: #fff; }
.enq-chip-row input:checked + span { border-color: rgba(201,173,255,.7); background: rgba(163,95,224,.16); color: #fff; }
.enq-chip-row input:checked + span::before { background: var(--lav); border-color: var(--lav); box-shadow: inset 0 0 0 2px #1a1426; }
.enq-chip-row input:focus-visible + span { outline: 2px solid var(--lav); outline-offset: 2px; }
.enq-chips[data-invalid] .enq-chip-row span { border-color: rgba(201,173,255,.55); }
.enq-chips .enq-err { margin-top: 8px; }

.enq-submit span { transition: opacity .2s ease; }
.enq-form.is-sending .enq-submit i { animation: enq-spin .9s linear infinite; clip-path: none; border-radius: 50%; width: 30px; }
.enq-form.is-sending .enq-submit i { font-size: 0; background: conic-gradient(#fff 0 25%, rgba(255,255,255,.25) 25%); -webkit-mask: radial-gradient(circle, transparent 8px, #000 8.5px); mask: radial-gradient(circle, transparent 8px, #000 8.5px); }
@keyframes enq-spin { to { transform: rotate(360deg); } }
.enq-fail { margin: 14px 0 0; padding: 12px 14px; border-radius: 11px; background: rgba(163,95,224,.1); box-shadow: inset 0 0 0 1px rgba(201,173,255,.35); font-size: 13.5px; line-height: 1.5; color: #ece6ff; }
.enq-fail a { color: var(--lav); }
.enq-ok { margin-top: 26px; }
.enq-ok-h { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -.02em; outline: none; }
.enq-ok-h::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 12px 3px 0; border-radius: 50%; background: var(--lav); box-shadow: 0 0 14px rgba(201,173,255,.9); }
.enq-ok-p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.7); }
@media (max-width: 600px) { .enq-chip-row span { font-size: 14px; min-height: 44px; } }

/* Touch screens: comfortable (~44px) tap targets for the small controls, without
   changing how anything looks: invisible hit areas (a pseudo-element, or padding
   cancelled by an equal negative margin). */
@media (max-width: 760px), (pointer: coarse) {
  .fc-btn, .pf-btn { position: relative; }
  .fc-btn::after, .pf-btn::after { content: ""; position: absolute; inset: -6px -2px; }
  /* the subscribe button's notched shape is a clip-path, which also clips taps: the
     visible shape moves to a pseudo-element inside a transparent 44px button */
  .fx-field button { position: relative; isolation: isolate; width: 44px; height: 44px; margin: -8px -5px; background: transparent; clip-path: none; }
  .fx-field button::before { content: ""; position: absolute; inset: 8px 5px; z-index: -1; border-radius: 6px; background: #fff; clip-path: polygon(0 0, 100% 0, 100% 70%, 82% 100%, 0 100%); }
  /* footer links: 44px apart, each with a 44px tap area */
  .fx-col div { gap: 26px; }
  .fx-col a { display: inline-block; padding: 13px 0; margin: -13px 0; }
  .fx-blk a { display: inline-block; padding: 13px 0; }
  .fx-field input { padding: 14px 0; margin: -6px 0; }
}