/* =========================================================
   PRAVA — monochrome AI cybersecurity
   1. Tokens & themes
   2. Reset & base
   3. Typography & primitives
   4. Chrome: nav, theme switch, menu, progress
   5. Hero + security orbit
   6. Strip
   7. Core capabilities (scroll-driven storytelling)
   8. Approach
   9. Signal
  10. Why
  11. CTA
  12. Footer
  13. Motion / reveal
  14. Responsive
   ========================================================= */

/* ---------- 1. Tokens & themes ---------- */
:root {
  color-scheme: dark;

  --bg:          #060607;
  --bg-elev:     #0b0b0d;
  --surface:     #101012;
  --line:        rgba(255,255,255,.10);
  --line-soft:   rgba(255,255,255,.06);
  --line-strong: rgba(255,255,255,.24);
  --ink:         #0c0c10;
  --ink-on:      #ffffff;
  --ink-edge:    rgba(255,255,255,.26);
  --aura-node:   rgba(255,255,255,.55);
  --aura-op:     .34;
  --text:        #f3f3f4;
  --text-mid:    #a9a9b0;
  --text-dim:    #78787f;
  --text-faint:  #4d4d54;
  --on-solid:    #08080a;
  --solid:       #f3f3f4;
  --glass:       rgba(10,10,12,.66);
  --shadow-1:    0 1px 2px rgba(0,0,0,.5), 0 10px 34px rgba(0,0,0,.5);
  --shadow-2:    0 34px 90px -22px rgba(0,0,0,.9);
  --grain-op:    .035;
  --core-a:      #1b1b1f;
  --core-b:      #030304;
  --globe-line:  rgba(255,255,255,.17);
  --globe-node:  rgba(255,255,255,.9);
  --globe-fa:    rgba(255,255,255,.055);
  --globe-fb:    rgba(255,255,255,.012);
  --glass-a:     rgba(255,255,255,.055);
  --glass-b:     rgba(255,255,255,.012);
  --mesh-line:   rgba(255,255,255,.34);
  --mesh-node:   rgba(255,255,255,.7);

  --pad:      clamp(20px, 4.6vw, 88px);
  --gap:      clamp(20px, 2.4vw, 40px);
  --sect-y:   clamp(88px, 12vh, 176px);
  --nav-h:    74px;
  --radius:   14px;
  --radius-lg: 22px;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg:          #f2f2f0;
  --bg-elev:     #ebebe8;
  --surface:     #ffffff;
  --line:        rgba(10,10,12,.13);
  --line-soft:   rgba(10,10,12,.07);
  --line-strong: rgba(10,10,12,.30);
  --ink:         #0c0c10;
  --ink-on:      #ffffff;
  --ink-edge:    rgba(12,12,16,.24);
  --aura-node:   rgba(12,12,16,.52);
  --aura-op:     .62;
  --text:        #0c0c0e;
  --text-mid:    #56565d;
  --text-dim:    #77777e;
  --text-faint:  #a5a5ac;
  --on-solid:    #f7f7f5;
  --solid:       #101013;
  --glass:       rgba(255,255,255,.76);
  --shadow-1:    0 1px 2px rgba(0,0,0,.05), 0 12px 34px rgba(0,0,0,.08);
  --shadow-2:    0 34px 80px -26px rgba(0,0,0,.24);
  --grain-op:    .02;
  --core-a:      #232327;
  --core-b:      #050506;
  --glass-a:     rgba(12,12,16,.05);
  --glass-b:     rgba(12,12,16,.012);
  --mesh-line:   rgba(12,12,16,.36);
  --mesh-node:   rgba(12,12,16,.66);
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: clamp(15px, .42vw + 14px, 17px);
  line-height: 1.62;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
body.is-locked { overflow: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4, p, dl, dd, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--text); color: var(--bg); }

:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.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;
}
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 999;
  transform: translateY(-160%);
  background: var(--solid); color: var(--on-solid);
  padding: 10px 16px; border-radius: 999px; font-size: .8rem; font-weight: 600;
  transition: transform .3s var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

.grain {
  position: fixed; inset: -50%; z-index: 900; pointer-events: none;
  opacity: var(--grain-op);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---------- 3. Typography & primitives ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: .74rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--text-mid);
}
/* the hero eyebrow is the first thing read, so it carries more weight */
.hero .eyebrow {
  font-size: clamp(.78rem, .3vw + .72rem, .88rem);
  letter-spacing: .15em;
  color: var(--text);
}
.eyebrow__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--text); flex: none;
  animation: breathe 3.6s var(--ease-in-out) infinite;
}
@keyframes breathe { 0%,100% { opacity:.25; transform: scale(.8);} 50% { opacity:1; transform: scale(1);} }

h1, h2, h3 { font-weight: 500; letter-spacing: -.035em; line-height: 1.02; }
h1 em, h2 em { font-style: normal; color: var(--text-dim); }

/* Section headings resolve word by word behind a construction line that
   sweeps from whichever edge the section aura is anchored to. */
.draw { position: relative; }
.draw::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -.34em;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .85s var(--ease-out), opacity .45s var(--ease);
}
.draw.is-in::before {
  transform: scaleX(1);
  opacity: 0;
  transition: transform .85s var(--ease-out), opacity .5s .55s var(--ease);
}
.draw.is-in::before { animation: drawRule 1.25s var(--ease-out) forwards; }
@keyframes drawRule {
  0%   { opacity: 0;   transform: scaleX(0); }
  18%  { opacity: .3; }
  70%  { opacity: .22; transform: scaleX(1); }
  100% { opacity: 0;   transform: scaleX(1); }
}

[data-split] .w {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateX(-18px);
  transition: opacity .55s var(--ease-out), filter .65s var(--ease-out),
              transform .75s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 52ms + 120ms);
}
[data-split].is-in .w { opacity: 1; filter: blur(0); transform: none; }

/* the words arrive from the side the section is anchored to */
[data-aura="right"] .draw::before { transform-origin: 100% 50%; }
[data-aura="right"] [data-split] .w { transform: translateX(18px); }
[data-aura="center"] .draw::before { transform-origin: 50% 50%; }
[data-aura="center"] [data-split] .w { transform: translateY(16px); }

/* Adaptive section aura — a soft directional bloom seeded with a fine
   node field, echoing the mesh in the hero orbit and the hand. One
   decorative layer per section; `data-aura` picks the anchored side. */
.section-aura {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.section-aura::before,
.section-aura::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, var(--aura-node) .9px, transparent 0),
    radial-gradient(circle at 1px 1px, var(--aura-node) .7px, transparent 0),
    radial-gradient(58% 66% at 14% 46%, color-mix(in srgb, var(--text) 9%, transparent), transparent 72%);
  background-size: 64px 64px, 41px 41px, auto;
  background-position: 0 0, 22px 13px, 0 0;
  /* the field only exists inside the bloom, so it never reads as texture */
  -webkit-mask-image: radial-gradient(52% 60% at 14% 46%, #000 10%, rgba(0,0,0,.4) 50%, transparent 78%);
          mask-image: radial-gradient(52% 60% at 14% 46%, #000 10%, rgba(0,0,0,.4) 50%, transparent 78%);
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 1.1s var(--ease-out), transform 1.4s var(--ease-out);
}
.section-aura::before { transform: translate3d(-34px, 0, 0); }
.section-aura::after  { transform: translate3d(34px, 0, 0) scaleX(-1); }

.section-aura.is-active::before { opacity: var(--aura-op); transform: none; }
.section-aura.is-active::after  { opacity: var(--aura-op); transform: scaleX(-1); }

[data-aura="left"]  .section-aura::after  { display: none; }
[data-aura="right"] .section-aura::before { display: none; }
[data-aura="center"] .section-aura.is-active::before,
[data-aura="center"] .section-aura.is-active::after { opacity: calc(var(--aura-op) * .8); }

/* content always sits above the aura */
.hero__grid, .hero__foot, .strip__claim, .marquee, .cap__sticky,
.approach__head, .steps, .signal__copy, .signal__figure,
.why__head, .why__grid, .cta__inner,
.strip__eyebrow, .strip__sub,
.inds__head, .inds__list, .price__head, .price__grid, .price__note,
.company__head, .company__grid, .blog__head, .blog__grid { position: relative; z-index: 1; }

/* Buttons — solid is primary, quiet is clearly secondary */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: .875rem; font-weight: 500; letter-spacing: -.01em;
  border: 1px solid transparent;
  color: var(--text);
  transition: color .35s var(--ease), background-color .35s var(--ease),
              border-color .35s var(--ease), transform .5s var(--ease-out);
  will-change: transform;
}
.btn svg { flex: none; transition: transform .45s var(--ease-out); }

.btn--solid {
  background: var(--solid); color: var(--on-solid);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, var(--shadow-1);
}
.btn--solid:hover, .btn--solid:focus-visible { transform: translateY(-2px); }
.btn--solid:hover svg { transform: translateX(4px); }

.btn--quiet {
  color: var(--text-mid);
  border-color: var(--line);
  background: transparent;
  padding-inline: 22px;
}
.btn--quiet .btn__label { position: relative; }
.btn--quiet .btn__label::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .45s var(--ease-out);
}
.btn--quiet:hover, .btn--quiet:focus-visible {
  color: var(--text); border-color: var(--line-strong);
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
.btn--quiet:hover .btn__label::after { transform: scaleX(1); transform-origin: 0 50%; }
.btn--quiet:hover svg { transform: translate(2px, -2px); }

/* pricing: ink by default, inverting to paper on hover */
.btn--ink {
  background: var(--ink);
  color: var(--ink-on);
  border-color: var(--ink-edge);
}
.btn--ink:hover, .btn--ink:focus-visible {
  background: var(--ink-on);
  color: var(--ink);
  border-color: var(--ink-on);
}

.btn--sm { padding: 9px 16px; font-size: .78rem; }
.btn--lg { padding: 16px 30px; font-size: .95rem; }

/* ---------- 4. Chrome ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%; width: 100%;
  background: var(--text);
  transform: scaleX(0); transform-origin: 0 50%;
  opacity: .8;
}

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: transform .5s var(--ease-out), background-color .4s var(--ease),
              border-color .4s var(--ease), backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  border-bottom-color: var(--line-soft);
}
.nav.is-hidden { transform: translateY(-102%); }
.nav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--nav-h);
  padding-inline: var(--pad);
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark { color: var(--text); transition: transform .8s var(--ease-out); }
.brand:hover .brand__mark { transform: rotate(90deg); }
.brand__word { font-size: 1.02rem; font-weight: 600; letter-spacing: -.02em; }
.brand--lg .brand__word { font-size: 1.5rem; }

.nav__links { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 34px); }
.nav__links a {
  position: relative; font-size: .85rem; color: var(--text-mid);
  padding: 6px 2px; transition: color .3s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--text); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .45s var(--ease-out);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

.nav__actions { display: flex; align-items: center; gap: 14px; }

/* account actions: log in stays quiet, sign up carries the weight */
.nav__login {
  position: relative;
  font-size: .85rem; color: var(--text-mid);
  padding: 6px 2px;
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.nav__login::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--text); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .45s var(--ease-out);
}
.nav__login:hover { color: var(--text); }
.nav__login:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav__signup { white-space: nowrap; }

/* Theme switch: the thumb sits on the active mode, the other glyph shows what you get */
.theme-toggle { padding: 4px; border-radius: 999px; line-height: 0; }
.theme-toggle__track {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  width: 58px; height: 30px; padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: background-color .45s var(--ease), border-color .3s var(--ease);
}
.theme-toggle:hover .theme-toggle__track { border-color: var(--line-strong); }
.theme-toggle__glyph {
  position: relative; z-index: 2;
  color: var(--text-dim);
  transition: color .4s var(--ease);
}
.theme-toggle__thumb {
  position: absolute; top: 3px; left: 3px; z-index: 1;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--solid);
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  transition: transform .55s var(--ease-out), background-color .45s var(--ease);
}
:root[data-theme="dark"] .theme-toggle__glyph--moon { color: var(--on-solid); }
:root[data-theme="light"] .theme-toggle__glyph--sun { color: var(--on-solid); }
:root[data-theme="light"] .theme-toggle__thumb { transform: translateX(30px); }

.menu-btn { display: none; position: relative; width: 40px; height: 40px; }
.menu-btn span {
  position: absolute; top: calc(50% - .75px); left: calc(50% - 10px);
  width: 20px; height: 1.5px; background: var(--text); border-radius: 2px;
  transition: transform .45s var(--ease-out);
}
.menu-btn span:first-child { transform: translateY(-3.5px); }
.menu-btn span:last-child { transform: translateY(3.5px); }
.menu-btn[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--bg);
  display: flex; flex-direction: column; justify-content: center;
  padding: 100px var(--pad) 48px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease-out);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { clip-path: inset(0 0 0 0); }
.mobile-menu__nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu__nav a {
  display: flex; align-items: baseline; gap: 16px;
  font-size: clamp(2rem, 9vw, 3.2rem); letter-spacing: -.045em; line-height: 1.18;
  padding: 8px 0; border-bottom: 1px solid var(--line-soft);
  opacity: 0; transform: translateY(24px);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), color .3s;
  transition-delay: calc(var(--i) * 60ms + 120ms);
}
.mobile-menu.is-open .mobile-menu__nav a { opacity: 1; transform: none; }
.mobile-menu__nav a:hover { color: var(--text-dim); }
.mobile-menu__idx { font-family: var(--mono); font-size: .7rem; color: var(--text-faint); letter-spacing: .1em; }
.mobile-menu__auth {
  display: flex; gap: 10px; margin-top: 36px;
}
.mobile-menu__auth .btn { flex: 1 1 0; justify-content: center; }
.mobile-menu__foot { margin-top: 24px; font-family: var(--mono); font-size: .78rem; color: var(--text-dim); }

/* ---------- 5. Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + clamp(10px, 2.4vh, 34px)) 0 0;
  overflow: hidden;
}
.hero__aura {
  position: absolute; top: 50%; right: -8%;
  width: min(78vw, 1080px); aspect-ratio: 1;
  transform: translateY(-52%);
  background: radial-gradient(closest-side,
              color-mix(in srgb, var(--text) 8%, transparent),
              color-mix(in srgb, var(--text) 2%, transparent) 45%,
              transparent 72%);
  pointer-events: none;
}

.hero__grid {
  position: relative; z-index: 2;
  flex: 1 1 auto;
  display: grid; align-items: center;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: clamp(28px, 3.6vw, 68px);
  padding: 0 var(--pad) clamp(16px, 2.6vh, 38px);
}
.hero__copy { max-width: 700px; }
.hero__title {
  margin: 20px 0 24px;
  font-size: clamp(2.05rem, 4.3vw, 4.05rem);
  letter-spacing: -.046em;
  line-height: 1;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line span { display: block; }
.hero__lede {
  max-width: 44ch; color: var(--text-mid);
  font-size: clamp(1rem, .5vw + .92rem, 1.15rem);
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 34px; }

/* full-bleed hero footer bar */
.hero__foot {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: center; gap: 28px;
  border-top: 1px solid var(--line-soft);
  padding: clamp(13px, 1.8vh, 22px) var(--pad);
}
.hero__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { padding-left: clamp(14px, 2vw, 32px); border-left: 1px solid var(--line-soft); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat dt {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .17em;
  text-transform: uppercase; color: var(--text-mid);
}
.stat dd {
  margin-top: 8px; color: var(--text);
  font-size: clamp(1rem, .6vw + .84rem, 1.18rem); letter-spacing: -.025em;
}
/* — Security Orbit — */
.hero__stage {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
  margin-right: calc(var(--pad) * -.45);
}
.orbit {
  position: relative;
  width: min(100%, 720px, calc(100svh - 196px));
  aspect-ratio: 1;
  color: var(--text);
  touch-action: manipulation;
}
.orbit__paths { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit__paths ellipse { vector-effect: non-scaling-stroke; }
@keyframes spin { to { transform: rotate(360deg); } }

.orbit__link {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 0.5 7;
  animation: charge 2.4s linear infinite;
  transition: stroke-width .4s var(--ease);
}
.orbit__link.is-live { stroke-width: 2.1; }
@keyframes charge { to { stroke-dashoffset: -15; } }

.core {
  position: absolute; top: 50%; left: 50%;
  width: 28%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  z-index: 30;
  will-change: transform;
}
.core__shell.is-grabbing { cursor: grabbing; }
.core__halo, .core__pulse { pointer-events: none; }

.core__halo {
  position: absolute; inset: -34%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
              color-mix(in srgb, var(--text) 13%, transparent), transparent 76%);
  pointer-events: none;
}
.core__shell {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(120% 110% at 30% 20%, rgba(255,255,255,.24), rgba(255,255,255,.04) 36%, transparent 60%),
    radial-gradient(90% 90% at 72% 84%, rgba(255,255,255,.07), transparent 58%),
    linear-gradient(158deg, var(--core-a), var(--core-b) 74%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.26),
    inset 0 -26px 52px rgba(0,0,0,.62),
    0 34px 80px -20px rgba(0,0,0,.8);
  display: grid; place-items: center;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  animation: coreFloat 13s var(--ease-in-out) infinite;
}
:root[data-theme="light"] .core__shell {
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.3),
    inset 0 -26px 54px rgba(0,0,0,.55),
    0 40px 78px -24px rgba(12,12,16,.45);
}
:root[data-theme="light"] .core__halo {
  background: radial-gradient(closest-side, rgba(12,12,16,.1), transparent 76%);
}
@keyframes coreFloat { 0%,100% { transform: translateY(-1.4%);} 50% { transform: translateY(1.4%);} }
.core__sheen {
  position: absolute; inset: -40%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.16) 40deg, transparent 94deg, transparent 360deg);
  animation: spin 16s linear infinite;
}
.core__spec {
  position: absolute; top: 9%; left: 16%; width: 42%; height: 26%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.34), transparent 72%);
  filter: blur(6px);
}
.core__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.core__facets--a { fill: var(--globe-fa); }
.core__facets--b { fill: var(--globe-fb); }
.core__edges { fill: none; stroke: var(--globe-line); stroke-linecap: round; }
.core__edges--front { stroke-width: .34; }
.core__edges--back { stroke-width: .26; opacity: .3; }
.core__nodes circle { fill: var(--globe-node); opacity: .55; }
.core__nodes .core__node--live {
  opacity: .95;
  animation: nodePulse 5.2s var(--ease-in-out) infinite;
}
@keyframes nodePulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.core__pulse {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--line-strong);
  animation: corePulse 5.6s var(--ease-out) infinite;
}
.core__pulse--b { animation-delay: 2.8s; }
@keyframes corePulse {
  0%   { transform: scale(1); opacity: .55; }
  70%  { opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

.orbit__items { position: absolute; inset: 0; }
.orbiter {
  position: absolute; top: 0; left: 0;
  width: 96px; height: 96px;
  margin: -48px 0 0 -48px;
  display: grid; place-items: center;
  border-radius: 50%;
  will-change: transform;
}
.orbiter__shape {
  position: relative;
  width: 68px; height: 68px;
  display: grid; place-items: center;
  border-radius: 19px;
  border: 1px solid var(--line);
  background:
    linear-gradient(152deg, color-mix(in srgb, var(--text) 9%, transparent), transparent 68%),
    var(--surface);
  box-shadow: var(--shadow-1);
  color: var(--text);
  transition: border-color .4s var(--ease), box-shadow .5s var(--ease);
}
.orbiter__shape::before {
  content: ""; position: absolute; inset: -16px; border-radius: 30px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--text) 15%, transparent), transparent 74%);
  opacity: calc(var(--depth, 0) * .85);
  pointer-events: none;
}
.orbiter__shape svg { position: relative; width: 32px; height: 32px; }
.orbiter:hover .orbiter__shape,
.orbiter.is-active .orbiter__shape {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-2), 0 0 0 7px color-mix(in srgb, var(--text) 6%, transparent);
}
.orbiter:focus-visible { outline: none; }
.orbiter:focus-visible .orbiter__shape {
  outline: 2px solid var(--text); outline-offset: 5px;
  border-color: var(--line-strong);
}

.orbiter__tip {
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  width: max-content; max-width: 248px;
  transform: translate(-50%, 10px) scale(.96);
  padding: 13px 15px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-2);
  text-align: left;
  opacity: 0; visibility: hidden;
  filter: blur(3px);
  transition: opacity .42s var(--ease), transform .62s var(--ease-out),
              filter .42s var(--ease), visibility .42s;
  pointer-events: none;
  z-index: 5;
}
.orbiter.is-active .orbiter__tip,
.orbiter:hover .orbiter__tip,
.orbiter:focus-visible .orbiter__tip {
  opacity: 1; visibility: visible; filter: none;
  transform: translate(-50%, 0) scale(1);
}
.orbiter--left .orbiter__tip { left: 0; transform: translate(0, 10px) scale(.96); transform-origin: 20% 100%; }
.orbiter--left.is-active .orbiter__tip,
.orbiter--left:hover .orbiter__tip,
.orbiter--left:focus-visible .orbiter__tip { transform: translate(0, 0) scale(1); }
.orbiter--right .orbiter__tip { left: auto; right: 0; transform: translate(0, 10px) scale(.96); transform-origin: 80% 100%; }
.orbiter--right.is-active .orbiter__tip,
.orbiter--right:hover .orbiter__tip,
.orbiter--right:focus-visible .orbiter__tip { transform: translate(0, 0) scale(1); }
.orbiter--below .orbiter__tip { bottom: auto; top: calc(100% + 6px); }
.orbiter--below .orbiter__tip { transform-origin: 50% 0; }
.orbiter--below.orbiter--left .orbiter__tip { transform-origin: 20% 0; }
.orbiter--below.orbiter--right .orbiter__tip { transform-origin: 80% 0; }

.orbiter__name { display: block; font-size: .84rem; font-weight: 600; letter-spacing: -.02em; }
.orbiter__desc { display: block; margin-top: 5px; font-size: .75rem; line-height: 1.46; color: var(--text-mid); }

/* ---------- 6. Strip ---------- */
.strip { position: relative; padding: clamp(60px, 9vh, 120px) 0 0; border-block: 1px solid var(--line-soft); }
.strip__claim {
  padding: 0 var(--pad) clamp(44px, 7vh, 84px);
  font-size: clamp(1.9rem, 5.2vw, 4rem);
  letter-spacing: -.045em;
  max-width: 22ch;
}
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  padding: 18px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; align-items: center; gap: 34px; width: max-content;
  animation: marquee 44s linear infinite;
}
.marquee__track span {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-dim); white-space: nowrap;
}
.marquee__track i { color: var(--text-faint); font-style: normal; font-size: .6rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 7. Core capabilities (scroll-driven) ---------- */
.cap {
  position: relative;
  height: 460vh;                    /* five scroll stages */
  background: var(--bg-elev);
}
.cap__sticky {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + clamp(14px, 3vh, 40px)) var(--pad) clamp(20px, 4vh, 48px);
  overflow: hidden;
}
.cap__head { flex: none; }
.cap__title { margin-top: 14px; font-size: clamp(1.6rem, 3.2vw, 2.8rem); max-width: none; }

.cap__grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  min-height: 0;
}

/* ── left: the stage copy ── */
.cap__copy { display: flex; flex-direction: column; justify-content: center; align-self: stretch; min-height: 0; }
.cap__stages { position: relative; }
.cap__stage {
  position: absolute; inset: 0 0 auto 0;
  max-width: 46ch;
  opacity: 0; visibility: hidden;
  transform: translateY(26px);
  filter: blur(5px);
  transition: opacity .55s var(--ease-out), transform .75s var(--ease-out),
              filter .6s var(--ease-out), visibility .55s;
}
.cap__stage.is-active {
  position: relative;
  opacity: 1; visibility: visible;
  transform: none; filter: blur(0);
}
.cap__num {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; color: var(--text-faint);
}
.cap__name {
  margin: 14px 0 10px;
  font-size: clamp(1.6rem, 2.8vw, 2.5rem); letter-spacing: -.035em;
}
.cap__claim { font-size: clamp(.95rem, 1.1vw, 1.08rem); color: var(--text); }
.cap__body { margin-top: 12px; font-size: .92rem; color: var(--text-mid); max-width: 42ch; }

.cap__scope {
  margin-top: clamp(16px, 2.2vh, 24px);
  padding-top: clamp(14px, 1.8vh, 20px);
  border-top: 1px solid var(--line-soft);
}
.cap__scope-title {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-faint);
  margin-bottom: 12px;
}
.cap__scope ul {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px clamp(16px, 2vw, 32px);
}
.cap__scope li {
  position: relative; padding-left: 18px;
  font-size: .84rem; color: var(--text-mid);
}
.cap__scope li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 1px; background: var(--line-strong);
}
@keyframes liIn { to { opacity: 1; transform: none; } }

/* ── progress ── */
.cap__nav {
  flex: none;
  display: flex; align-items: center; gap: 20px;
  margin-top: clamp(16px, 3vh, 32px);
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.cap__count { font-family: var(--mono); font-size: .78rem; color: var(--text-faint); display: flex; gap: 4px; }
.cap__count span { color: var(--text); }
.cap__count i { font-style: normal; }
.cap__dots { display: flex; gap: 6px; }
.cap__dots button {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
}
.cap__dots span {
  display: block; width: 100%; height: 1px;
  background: var(--line-strong);
  transition: background-color .4s var(--ease), transform .5s var(--ease-out);
}
.cap__dots button:hover span { background: var(--text); }
.cap__dots button[aria-current="true"] span { background: var(--text); transform: scaleY(2); }

/* ── right: the presenting hand ── */
.cap__visual {
  position: relative;
  align-self: stretch;
  min-height: 0;
  max-height: min(74vh, 640px);
  color: var(--text);
  /* The scene's shared vanishing point. It lives here rather than on each
     layer so the hand and the object it presents are seen from one camera —
     two separate perspectives on things this close together read as a collage.
     The hand's drag tilt in script.js used to carry its own perspective() and
     no longer does, for the same reason. */
  perspective: 1500px;
  perspective-origin: 50% 42%;
}
.hand {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: hidden;
}
/* the hand turns about its own vertical axis, so it is its own layer */
.hand--art {
  transform-origin: 52% 58%;
  will-change: transform;
  /* the arm dissolves at the foot of the panel rather than ending on a hard
     crop edge */
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, rgba(0,0,0,0) 99%);
          mask-image: linear-gradient(to bottom, #000 84%, rgba(0,0,0,0) 99%);
  /* held below the frame until the section is first reached */
  opacity: 0;
  transform: translateY(86px);
  transition: opacity .85s var(--ease-out), transform 1.25s var(--ease-out);
}
.cap.is-entered .hand--art { opacity: 1; transform: translateY(0); }
/**
 * The hand does not turn on its own.
 *
 * Rotation is entirely in the visitor's hands: script.js writes a rotateY into
 * this element's `transform` while the pointer is held down, and eases it back
 * to rest a few seconds after release. Nothing animates it otherwise — an idle
 * sway on a still object is what read as a mannequin on a turntable.
 */

.hand-img {
  opacity: .92;
  transition: opacity .5s var(--ease);
}
/* One asset per theme. Only the matching one is painted — both are in the
   markup so switching the theme does not wait on a fetch. */
.hand-img--light { display: none; }
:root[data-theme="light"] .hand-img--dark { display: none; }
:root[data-theme="light"] .hand-img--light { display: block; opacity: .82; }

/* ---------- the presented object: one image per capability, turning ---------- */

/**
 * The layer the five images share.
 *
 * `perspective` is set as its own property rather than inside a transform
 * function because the stage script writes `transform: translate3d(...)` onto
 * this element for the parallax drift — a perspective() inside that transform
 * would be overwritten on the first mouse move. As a property it survives.
 *
 * The depth is deliberately shallow. A short perspective on an object this size
 * throws the near edge out far enough to read as a fisheye rather than a turn.
 */
.capobj {
  position: absolute; inset: 0;
  pointer-events: none;
  perspective: 1400px;
  /* kept near the object rather than the panel centre: an off-centre vanishing
     point shears a rotating plane instead of turning it */
  perspective-origin: 50% 32%;
  will-change: transform;
  /* How high the object floats and how large it is. Named because the two are
     read together — lifting it without shrinking it runs the top out of the
     panel, and the short mobile panel needs a different pair entirely. */
  --obj-x: 58%;
  --obj-y: 24%;
  --obj-h: min(54%, 224px);
}
.obj {
  position: absolute;
  /* Nudged right of centre: the hand enters from the lower left, so its palm
     sits right of the panel's midline. Centring the object on the panel left it
     hanging over the fingers rather than over the hand that is presenting it. */
  left: var(--obj-x); top: var(--obj-y);
  /* Sized off the panel's height, not its width. The artwork is near-square and
     the panel is short and wide on mobile, so width-based sizing overflowed the
     top and bottom there while looking fine on a desktop. */
  height: var(--obj-h);
  margin: 0;
  translate: -50% -50%;
  transform-style: preserve-3d;
  opacity: 0;
  /* comes down into the hand, against the hand's rise from below */
  transform: translateY(-38px) scale(.94);
  filter: blur(7px);
  /* paced to land with the hand's rise, so the two meet in the middle rather
     than the object arriving first and waiting */
  transition: opacity .8s var(--ease-out), transform 1.2s var(--ease-out), filter .85s var(--ease-out);
}
.obj__art {
  display: block;
  height: 100%; width: auto;
  max-width: 100%;
  object-fit: contain;
  /* the artwork is lit for a dark ground; on light it is inked down to match
     the rest of the page rather than glowing out of it */
  transition: filter .5s var(--ease);
}
:root[data-theme="light"] .obj__art { filter: brightness(.72) contrast(1.18); }

/**
 * The turn itself.
 *
 * Two transforms, deliberately not combined: the entrance is a transition on
 * `transform`, and the endless rotation is an animation on `rotate`. Putting
 * both on `transform` would mean the animation overwrote the entrance and the
 * image would snap in flat. `rotate` is an independent property, so the two
 * compose — the object rises and sharpens while it is already turning.
 *
 * It swings between two angles rather than turning the whole way round, and
 * that is a constraint of the artwork rather than a preference. These are flat
 * images with no back and no depth, so a full 360° pass sends them edge-on
 * twice a revolution — the object thins to a sliver, disappears, and comes back
 * mirrored. Held inside ±26° it never crosses that, so every frame is a
 * readable, foreshortened face and the depth still reads.
 *
 * A true turntable needs frames of the object actually rotating — a sprite
 * sequence or a real 3D asset. With one PNG per capability, this is the honest
 * version of the effect.
 *
 * 18s and eased at the extremes: it sits behind body copy somebody is reading,
 * and a linear sweep at speed pulls the eye off the words.
 */
.obj.is-in {
  animation: obj-spin 18s cubic-bezier(.45, 0, .55, 1) infinite;
}
/* Gated on the arrival: setStage(0) marks the first object `is-in` at init,
   long before the section is on screen. Without this it would land silently
   below the fold and simply be there when you arrived. */
.cap.is-entered .obj.is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.obj.is-out {
  opacity: 0;
  transform: translateY(18px) scale(1.04);   /* the outgoing one falls away */
  filter: blur(9px);
}
@keyframes obj-spin {
  0%   { rotate: y -26deg; }
  50%  { rotate: y 26deg; }
  100% { rotate: y -26deg; }
}
/* Pause while the pointer is over the panel, so somebody reading the scope list
   beside it is not competing with movement they cannot stop. */
.cap__visual:hover .obj.is-in { animation-play-state: paused; }

/* ---------- 6b. The punchline ---------- */
.strip__eyebrow { display: inline-flex; margin: 0 var(--pad) 18px; }
.strip__sub {
  padding: 0 var(--pad);
  margin-top: -18px;
  max-width: 56ch;
  color: var(--text-mid);
  font-size: clamp(.95rem, .5vw + .86rem, 1.08rem);
}

/* ---------- 7b. Industries ---------- */
.inds { position: relative; padding: var(--sect-y) var(--pad); border-top: 1px solid var(--line-soft); }
.inds__head { max-width: 62ch; }
.inds__title { margin: 18px 0 clamp(22px, 2.6vh, 32px); font-size: clamp(2rem, 4.4vw, 3.4rem); }
.inds__lede { color: var(--text-mid); max-width: 54ch; }
.inds__list {
  margin-top: clamp(40px, 6vh, 68px);
  border-top: 1px solid var(--line-soft);
}
.ind { border-bottom: 1px solid var(--line-soft); }
.ind__h { margin: 0; font-weight: inherit; }
.ind__row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: clamp(14px, 2.4vw, 40px);
  width: 100%;
  padding: clamp(20px, 2.6vh, 32px) 0;
  text-align: left;
  color: var(--text-mid);
  transition: color .4s var(--ease);
}
/* an accent creeps in from the edge on the open row */
.ind__row::before {
  content: ""; position: absolute; left: calc(var(--pad) * -.5); top: 50%;
  width: clamp(10px, 2vw, 26px); height: 1px;
  background: var(--text);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .55s var(--ease-out);
}
.ind.is-open .ind__row::before { transform: scaleX(1); }
.ind__row:hover, .ind__row:focus-visible { color: var(--text); }
.ind__num {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .18em;
  color: var(--text-faint);
  transition: color .4s var(--ease);
}
.ind.is-open .ind__num { color: var(--text-dim); }
.ind__name {
  font-size: clamp(1.3rem, 2.4vw, 2.1rem);
  letter-spacing: -.035em; line-height: 1.05;
  color: var(--text-mid);
  transition: color .4s var(--ease);
}
.ind.is-open .ind__name, .ind__row:hover .ind__name { color: var(--text); }
.ind__hook {
  font-size: .88rem; color: var(--text-faint);
  transition: color .4s var(--ease);
}
.ind.is-open .ind__hook { color: var(--text-dim); }
.ind__mark {
  display: grid; place-items: center;
  color: var(--text-faint);
  transition: transform .5s var(--ease-out), color .4s var(--ease);
}
.ind.is-open .ind__mark { transform: rotate(135deg); color: var(--text-dim); }

.ind__panel {
  display: grid; grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .65s var(--ease-out), opacity .45s var(--ease);
}
.ind.is-open .ind__panel { grid-template-rows: 1fr; opacity: 1; }
.ind__inner { overflow: hidden; }
.ind__panel .ind__copy,
.ind__panel .ind__help { min-width: 0; }
.ind__inner > * { padding-bottom: clamp(22px, 3vh, 36px); }
.ind__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(20px, 4vw, 64px);
  padding-left: clamp(28px, 3.8vw, 58px);
}
.ind__copy { font-size: .94rem; color: var(--text-mid); max-width: 52ch; }

.ind__help-title {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-faint);
  margin-bottom: 16px;
}
.ind__help-list { display: grid; gap: 13px; }
.ind__help-list li {
  position: relative; padding-left: 20px;
  font-size: .88rem; line-height: 1.6; color: var(--text-mid);
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
}
.ind.is-open .ind__help-list li {
  opacity: 1; transform: none;
  transition-delay: calc(var(--i) * 80ms + 140ms);
}
.ind__help-list li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 10px; height: 1px; background: var(--line-strong);
}

/* ---------- 10b. Pricing ---------- */
.price {
  position: relative; padding: var(--sect-y) var(--pad);
  border-top: 1px solid var(--line-soft);
  background: var(--bg-elev);
}
.price__head { max-width: 62ch; }
.price__title { margin: 18px 0 clamp(22px, 2.6vh, 32px); font-size: clamp(2rem, 4.4vw, 3.4rem); }
.price__lede { color: var(--text-mid); max-width: 52ch; }
.price__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  margin-top: clamp(44px, 7vh, 76px);
  align-items: start;
}
.tier {
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.4vw, 36px);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: linear-gradient(170deg, var(--surface), var(--bg-elev) 92%);
  transition: border-color .5s var(--ease);
}
.tier:hover { border-color: var(--line-strong); }
.tier--featured { border-color: var(--line-strong); position: relative; }
.tier__name { font-size: clamp(1.2rem, 1.6vw, 1.5rem); letter-spacing: -.03em; }
.tier__line { margin-top: 10px; font-size: .9rem; color: var(--text-mid); min-height: 3em; }
/* the number carries the card, so it is set at display size and tracked tight */
.tier__price {
  margin-top: 14px;
  font-size: clamp(2rem, 3.1vw, 2.9rem);
  letter-spacing: -.04em;
  line-height: 1;
}
/* the cadence marker rides small and quiet beside it rather than competing */
.tier__per { font-size: .36em; letter-spacing: -.01em; color: var(--text-mid); }
/* sits astride the top border of the card it marks */
.tier__badge {
  position: absolute; top: 0; left: 50%;
  translate: -50% -50%;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--text); color: var(--bg);
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap;
}
.tier__list { display: grid; gap: 9px; margin: 22px 0 26px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.tier__list li {
  position: relative; padding-left: 18px;
  font-size: .86rem; color: var(--text-mid);
}
.tier__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 1px; background: var(--line-strong);
}
.tier__cta { margin-top: auto; justify-content: center; }
.price__note {
  margin-top: clamp(26px, 4vh, 42px);
  font-size: clamp(.9rem, .45vw + .8rem, 1.05rem);
  letter-spacing: -.015em;
  color: var(--text-mid);
  max-width: none;
}

/* ---------- 10c. Company ---------- */
.company { position: relative; padding: var(--sect-y) var(--pad); border-top: 1px solid var(--line-soft); }
.company__head { max-width: 66ch; }
.company__title { margin: 18px 0 clamp(22px, 2.6vh, 32px); font-size: clamp(2rem, 4.4vw, 3.4rem); }
.company__lede { color: var(--text-mid); max-width: 58ch; }
.company__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 56px);
  margin-top: clamp(44px, 7vh, 76px);
}

/* ---------- 10d. Insights ---------- */
.blog {
  position: relative; padding: var(--sect-y) var(--pad);
  border-top: 1px solid var(--line-soft);
  background: var(--bg-elev);
}
.blog__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.blog__title { margin-top: 18px; font-size: clamp(2rem, 4.4vw, 3.4rem); }
.blog__all { flex: none; }
.blog__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 32px);
  margin-top: clamp(44px, 7vh, 76px);
}
.post {
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.2vw, 32px);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: linear-gradient(170deg, var(--surface), var(--bg-elev) 92%);
  transition: border-color .5s var(--ease), transform .6s var(--ease-out);
}
.post:hover, .post:focus-within { border-color: var(--line-strong); transform: translateY(-3px); }
.post__cat {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-faint);
}
.post__title { margin: 16px 0 12px; font-size: clamp(1.1rem, 1.5vw, 1.35rem); letter-spacing: -.03em; }
.post__title a { transition: opacity .3s var(--ease); }
.post__title a:hover { opacity: .65; }
.post__excerpt { font-size: .87rem; color: var(--text-mid); }
.post__more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-dim);
}
.post__more { cursor: pointer; transition: color .3s var(--ease); }
.post__more:hover, .post__more:focus-visible { color: var(--text); }
.post__more svg { transition: transform .45s var(--ease-out); }
.post:hover .post__more svg { transform: translateX(4px); }
.post.is-open .post__more svg { transform: rotate(90deg); }

.post__panel {
  display: grid; grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .6s var(--ease-out), opacity .4s var(--ease);
}
.post.is-open .post__panel { grid-template-rows: 1fr; opacity: 1; }
.post__panel-in { overflow: hidden; }
.post__panel-in p {
  padding-top: 18px; margin-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: .86rem; color: var(--text-mid);
}

/* ---------- 8. Approach ---------- */
.approach { position: relative; padding: var(--sect-y) var(--pad); }
.approach__head { max-width: 60ch; }
.approach__title { margin: 18px 0 18px; font-size: clamp(2rem, 4.6vw, 3.6rem); }
.approach__lede { color: var(--text-mid); max-width: 52ch; }

/* Observe → Understand → Act is one sequence, so the three read as points on a
   single rail rather than as three boxes. The cells sit flush (gap: 0) on
   purpose: each step draws its own 1px segment, and because the segments touch,
   the staggered draw lands as one line sweeping left to right. Separation is
   done with padding — no dividers, no cell fills. */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: clamp(48px, 8vh, 88px);
}
.step {
  position: relative;
  padding: clamp(30px, 3.2vw, 52px) clamp(28px, 3.4vw, 64px) 0 0;
}
.step:last-child { padding-right: 0; }

/* the rail segment for this step */
.step::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: var(--line);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.15s var(--ease-out) var(--d, 0ms);
}
.step.is-in::before { transform: scaleX(1); }

/* the node, blooming once its own segment has finished drawing */
.step__tick {
  position: absolute; left: 0; top: 0;
  width: 5px; height: 5px; margin-top: -2px;
  border-radius: 50%; background: var(--text);
  transform: scale(0);
  transition: transform .8s var(--ease-out) calc(var(--d, 0ms) + 520ms),
              background-color .5s var(--ease),
              box-shadow .5s var(--ease);
}
.step.is-in .step__tick { transform: scale(1); }

/* Content assembles in its own small stagger. The blur is the same arrival the
   split headings use, so this section moves like the rest of the page.
   Reveal delay rides on --rd rather than transition-delay, which leaves colour
   free to respond to hover with no delay of its own — see the spotlight below. */
.step__num, .step__title, .step__body {
  opacity: 0; transform: translateY(15px); filter: blur(5px);
  transition:
    opacity   .85s var(--ease-out) var(--rd, 0ms),
    transform 1.05s var(--ease-out) var(--rd, 0ms),
    filter     .95s var(--ease-out) var(--rd, 0ms),
    color      .55s var(--ease);
}
.step__num   { --rd: calc(var(--d, 0ms) + 180ms); }
.step__title { --rd: calc(var(--d, 0ms) + 280ms); }
.step__body  { --rd: calc(var(--d, 0ms) + 380ms); }
.step.is-in :is(.step__num, .step__title, .step__body) {
  opacity: 1; transform: none; filter: blur(0);
}

.step__num { display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .18em; color: var(--text-faint); }
.step__title { margin: 22px 0 14px; font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -.02em; }
.step__body { font-size: .9rem; line-height: 1.68; color: var(--text-mid); max-width: 38ch; }

/* Spotlight — hovering one step lets the other two recede. This works on colour
   and not opacity so it cannot collide with the reveal above, which owns
   opacity on these same elements. */
@media (hover: hover) and (pointer: fine) {
  .steps:hover .step:not(:hover) .step__title { color: var(--text-dim); }
  .steps:hover .step:not(:hover) .step__body  { color: var(--text-faint); }
  .steps:hover .step:not(:hover) .step__tick  { background: var(--text-faint); }
  .step:hover .step__num { color: var(--text-dim); }
  .step:hover .step__tick { box-shadow: 0 0 0 4px rgba(255,255,255,.06), 0 0 18px 2px rgba(255,255,255,.26); }
}

/* ---------- 9. Signal ---------- */
.signal {
  position: relative;
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center; gap: clamp(30px, 5vw, 76px);
  padding: var(--sect-y) var(--pad);
  border-top: 1px solid var(--line-soft);
  background: var(--bg-elev);
}
.signal__title { margin: 18px 0 20px; font-size: clamp(1.9rem, 3.9vw, 3.2rem); max-width: 16ch; }
.signal__body { color: var(--text-mid); max-width: 46ch; font-size: .95rem; }
.signal__legend { display: grid; gap: 9px; margin-top: 30px; }
.signal__legend li {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim);
}
.legend__key { width: 22px; height: 2px; background: var(--text); opacity: var(--o); flex: none; }
.signal__figure { margin: 0; }
.signal__canvas {
  width: 100%; height: auto; aspect-ratio: 12 / 7;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: transparent;
}
.signal__caption {
  margin-top: 12px; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint);
}

/* ---------- 10. Why ---------- */
.why { position: relative; padding: var(--sect-y) var(--pad); border-top: 1px solid var(--line-soft); }
.why__head { max-width: 60ch; }
.why__title { margin-top: 18px; font-size: clamp(2rem, 4.6vw, 3.6rem); max-width: 15ch; }
.why__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 56px);
  margin-top: clamp(46px, 7vh, 80px);
}
.pillar { position: relative; padding-top: 26px; }
.pillar__rule { position: absolute; top: 0; left: 0; height: 1px; width: 100%; background: var(--line); overflow: hidden; }
.pillar__rule::after {
  content: ""; position: absolute; inset: 0; background: var(--text);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .9s var(--ease-out);
}
.pillar.is-in .pillar__rule::after { transform: scaleX(1); transition-delay: calc(var(--d) + 120ms); }
.pillar h3 { font-size: clamp(1.15rem, 1.6vw, 1.45rem); letter-spacing: -.03em; }
.pillar p { margin-top: 12px; font-size: .9rem; color: var(--text-mid); }

/* ---------- 11. CTA ---------- */
.cta {
  position: relative; overflow: hidden;
  padding: clamp(96px, 16vh, 200px) var(--pad);
  border-top: 1px solid var(--line-soft);
  background:
    radial-gradient(120% 130% at 50% 0%, color-mix(in srgb, var(--text) 6%, transparent), transparent 62%),
    var(--bg);
  text-align: center;
}
.cta__inner { max-width: 60ch; margin-inline: auto; }
.cta__title { margin: 20px 0 18px; font-size: clamp(2.1rem, 5.4vw, 4.2rem); letter-spacing: -.045em; }
.cta__body { color: var(--text-mid); max-width: 46ch; margin-inline: auto; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-top: 34px; }
.cta__note { margin-top: 22px; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }

/* ---------- 12. Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: clamp(56px, 8vh, 92px) var(--pad) 0; overflow: hidden; }
.footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(36px, 5vw, 80px); }
.footer__tag { margin-top: 18px; max-width: 34ch; color: var(--text-mid); font-size: .9rem; }
.footer__mail {
  display: inline-block; margin-top: 16px;
  font-family: var(--mono); font-size: .82rem; color: var(--text);
  border-bottom: 1px solid var(--line-strong); padding-bottom: 2px;
  transition: opacity .3s;
}
.footer__mail:hover { opacity: .6; }
.footer__nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.footer__nav h3 { font-family: var(--mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); font-weight: 400; }
.footer__nav ul { margin-top: 16px; display: grid; gap: 9px; }
.footer__nav a, .footer__nav span { font-size: .86rem; color: var(--text-mid); transition: color .3s var(--ease); }
.footer__nav a:hover { color: var(--text); }
.footer__social a { display: inline-flex; align-items: center; gap: 9px; }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: clamp(44px, 7vh, 76px); padding: 22px 0;
  border-top: 1px solid var(--line-soft);
  font-size: .78rem; color: var(--text-dim);
}
.footer__legal-links { display: flex; gap: 22px; }
.footer__legal-links a { transition: color .3s; }
.footer__legal-links a:hover { color: var(--text); }
.footer__wordmark {
  font-size: clamp(4rem, 21vw, 21rem);
  line-height: .78;
  font-weight: 600; letter-spacing: -.055em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  margin-bottom: -.14em;
  user-select: none;
  text-align: center;
}

/* ---------- 13. Motion / reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease-out) var(--d, 0ms), transform .9s var(--ease-out) var(--d, 0ms);
}
.reveal-line span { transform: translateY(105%); }
.reveal-line.is-in span { transform: none; transition: transform 1.05s var(--ease-out) var(--d, 0ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hand--art, .cap.is-entered .hand--art { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;   /* no staggered waiting either */
  }
  .reveal, .reveal-line span { opacity: 1; transform: none; }
  [data-split] .w { opacity: 1; filter: none; transform: none; }
  .step__num, .step__title, .step__body { opacity: 1; transform: none; filter: none; }
  .step::before { transform: scaleX(1); }
  .step__tick { transform: scale(1); }
  .cap { height: auto; }
  .cap__sticky { position: static; height: auto; }
  .cap__grid { grid-template-columns: minmax(0, 1fr); }
  .cap__stages { display: grid; gap: 48px; }
  .cap__stage { position: relative; opacity: 1; visibility: visible; transform: none; filter: none; }
  .cap__nav { display: none; }
  .cap__visual { order: -1; height: clamp(260px, 40vh, 420px); margin-bottom: 40px; }
  /* Reduced motion unpins the section and lists all five stages at once. The
     objects must NOT all become visible with it: as line art that was merely
     busy, but as five opaque images it is an unreadable stack. Only the one
     marked active shows, and it holds still. */
  .obj { opacity: 0; transform: none; filter: none; animation: none; rotate: none; }
  .obj.is-in { opacity: 1; transform: none; filter: none; animation: none; rotate: none; }
  .draw::before, .draw.is-in::before { animation: none; opacity: 0; }
  .marquee__track { animation: none; }
}

/* ---------- 14. Responsive ---------- */
@media (max-width: 1280px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero__stage { margin-right: 0; }
}
@media (max-width: 1080px) {
  .hero { min-height: 0; padding-bottom: 0; }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(34px, 6vh, 64px);
    padding-top: clamp(24px, 5vh, 56px);
  }
  .hero__copy { max-width: min(46ch, 100%); }
  .orbit { width: min(100%, 560px); }
  .hero__stage { margin-right: 0; }
  .signal { grid-template-columns: minmax(0, 1fr); }
  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .ind__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .nav__links, .nav__login, .nav__signup { display: none; }
  .menu-btn { display: block; }
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .steps, .why__grid, .company__grid { grid-template-columns: minmax(0, 1fr); }
  .price__grid, .blog__grid { grid-template-columns: minmax(0, 1fr); }
  .ind__row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ind__hook { display: none; }
  .tier__line { min-height: 0; }
  .blog__head { flex-direction: column; align-items: flex-start; }
  /* stacked, the rail segment on each step becomes its divider */
  .step { padding: 30px 0 36px; }
  .step:last-child { padding-bottom: 0; }
  .step__title { margin: 18px 0 12px; }
  .step__body { max-width: none; }
  .cap { height: 420vh; }
  .cap__sticky { padding-top: calc(var(--nav-h) + 8px); padding-bottom: 16px; }
  .cap__title { font-size: clamp(1.35rem, 5.4vw, 1.9rem); margin-top: 10px; }
  .cap__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; gap: 14px; }
  .cap__visual { order: -1; height: clamp(150px, 24svh, 230px); max-height: none; }
  /* The stacked panel is a third of the height it has on a desktop, so the same
     pair would push the object off the top of it. Smaller and higher: the gap
     over the fingers is what carries the composition, and it is worth more here
     than the extra size would be. */
  .capobj { --obj-y: 22%; --obj-h: min(40%, 82px); perspective: 700px; }
  .cap__stage { max-width: none; }
  .cap__name { margin: 10px 0 8px; font-size: clamp(1.35rem, 5.8vw, 1.9rem); }
  .cap__claim { font-size: .95rem; }
  .cap__body { max-width: none; margin-top: 9px; font-size: .86rem; }
  .cap__scope { margin-top: 14px; }
  .cap__nav { margin-top: 16px; padding-top: 14px; }
}
@media (max-width: 640px) {
  .section-aura { display: none; }
  .hero__grid { padding-bottom: 34px; }
  .hero__actions { gap: 10px; }
  .hero__actions .btn, .cta__actions .btn { width: 100%; justify-content: center; }
  .orbit { width: min(100%, 400px, 62svh); }
  .orbiter { width: 74px; height: 74px; margin: -37px 0 0 -37px; }
  .orbiter__shape { width: 54px; height: 54px; border-radius: 15px; }
  .orbiter__shape svg { width: 25px; height: 25px; }
  .orbiter__shape::before { inset: -12px; border-radius: 24px; }
  .orbiter__tip { max-width: 210px; }
  .footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 1800px) {
  .hero__copy { max-width: 760px; }
}