/* ==========================================================================
   LJorix AI Automations — Design System
   --------------------------------------------------------------------------
   00  Tokens (color, type, space, motion, elevation)
   01  Reset & base
   02  Typography
   03  Layout primitives
   04  Atmosphere (grain, aurora, mesh)
   05  Components (buttons, cards, pills, forms, accordion)
   06  Header & navigation
   07  Sections
   08  Motion (reveal, marquee, pipeline, counters)
   09  Utilities, a11y, print
   ========================================================================== */

/* ==========================================================================
   00 · TOKENS
   ========================================================================== */

:root {
  /* --- Fluid type scale (320px → 1440px, 1.25 ratio) --- */
  --step--2: clamp(0.69rem, 0.67rem + 0.11vw, 0.75rem);
  --step--1: clamp(0.83rem, 0.79rem + 0.20vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.24vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.50rem);
  --step-2:  clamp(1.44rem, 1.31rem + 0.65vw, 2.00rem);
  --step-3:  clamp(1.73rem, 1.53rem + 1.00vw, 2.66rem);
  --step-4:  clamp(2.07rem, 1.77rem + 1.50vw, 3.55rem);
  --step-5:  clamp(2.49rem, 2.04rem + 2.24vw, 4.20rem);

  /* --- Fluid space scale --- */
  --space-3xs: clamp(0.25rem, 0.24rem + 0.06vw, 0.31rem);
  --space-2xs: clamp(0.50rem, 0.47rem + 0.12vw, 0.63rem);
  --space-xs:  clamp(0.75rem, 0.71rem + 0.18vw, 0.94rem);
  --space-s:   clamp(1.00rem, 0.95rem + 0.24vw, 1.25rem);
  --space-m:   clamp(1.50rem, 1.43rem + 0.37vw, 1.88rem);
  --space-l:   clamp(2.00rem, 1.90rem + 0.49vw, 2.50rem);
  --space-xl:  clamp(3.00rem, 2.85rem + 0.73vw, 3.75rem);
  --space-2xl: clamp(4.00rem, 3.80rem + 0.98vw, 5.00rem);
  --space-3xl: clamp(6.00rem, 5.51rem + 2.44vw, 8.50rem);

  /* --- Measure & rhythm --- */
  --measure: 68ch;
  --shell: 78rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* --- Radii --- */
  --r-xs: 6px;
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- Motion --- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.50, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-xs: 140ms;
  --dur-s: 240ms;
  --dur-m: 420ms;
  --dur-l: 720ms;
  --dur-xl: 1100ms;

  /* --- Type families --- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, monospace;

  /* --- Z layers --- */
  --z-grain: 9000;
  --z-header: 800;
  --z-drawer: 900;
  --z-toast: 950;
}

/* --- Dark theme (default) --- */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #07090f;
  --bg-deep:       #05070c;
  --bg-elev:       #0b0f18;
  --surface:       rgba(255, 255, 255, 0.030);
  --surface-hover: rgba(255, 255, 255, 0.055);
  --surface-solid: #0e131e;
  --line:          rgba(255, 255, 255, 0.085);
  --line-strong:   rgba(255, 255, 255, 0.16);

  --text:   #eef2f8;
  --text-2: #a6b1c4;
  --text-3: #6b7688;

  --accent:      #4fd8e8;
  --accent-soft: rgba(79, 216, 232, 0.14);
  --accent-line: rgba(79, 216, 232, 0.34);
  --accent-2:    #9a7cf8;
  --accent-2-soft: rgba(154, 124, 248, 0.14);
  --accent-ink:  #05070c;

  --positive: #4ade9b;
  --warning:  #f0c26b;
  --negative: #f4788c;

  --grain-opacity: 0.05;
  --grain-blend: overlay;
  --aurora-a: rgba(79, 216, 232, 0.16);
  --aurora-b: rgba(154, 124, 248, 0.16);
  --aurora-c: rgba(79, 216, 232, 0.07);

  --shadow-s: 0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.24);
  --shadow-m: 0 2px 4px rgba(0,0,0,.32), 0 8px 24px rgba(0,0,0,.34);
  --shadow-l: 0 4px 8px rgba(0,0,0,.30), 0 18px 48px rgba(0,0,0,.44);
  --shadow-accent: 0 10px 40px rgba(79, 216, 232, 0.16), 0 2px 10px rgba(154, 124, 248, 0.10);
}

/* --- Light theme --- */
[data-theme="light"] {
  color-scheme: light;

  --bg:            #f7f8fa;
  --bg-deep:       #eef0f4;
  --bg-elev:       #ffffff;
  --surface:       rgba(9, 18, 36, 0.028);
  --surface-hover: rgba(9, 18, 36, 0.050);
  --surface-solid: #ffffff;
  --line:          rgba(9, 18, 36, 0.10);
  --line-strong:   rgba(9, 18, 36, 0.20);

  --text:   #0a1120;
  --text-2: #48566d;
  --text-3: #76839a;

  --accent:      #0b8ea3;
  --accent-soft: rgba(11, 142, 163, 0.10);
  --accent-line: rgba(11, 142, 163, 0.30);
  --accent-2:    #6543cf;
  --accent-2-soft: rgba(101, 67, 207, 0.10);
  --accent-ink:  #ffffff;

  --positive: #12855c;
  --warning:  #9a6a12;
  --negative: #c02b45;

  --grain-opacity: 0.035;
  --grain-blend: multiply;
  --aurora-a: rgba(11, 142, 163, 0.13);
  --aurora-b: rgba(101, 67, 207, 0.11);
  --aurora-c: rgba(11, 142, 163, 0.06);

  --shadow-s: 0 1px 2px rgba(12, 22, 44, .06), 0 2px 6px rgba(12, 22, 44, .05);
  --shadow-m: 0 2px 4px rgba(12, 22, 44, .06), 0 10px 26px rgba(12, 22, 44, .08);
  --shadow-l: 0 4px 8px rgba(12, 22, 44, .06), 0 22px 52px rgba(12, 22, 44, .12);
  --shadow-accent: 0 12px 40px rgba(11, 142, 163, 0.16), 0 2px 10px rgba(101, 67, 207, 0.08);
}

/* ==========================================================================
   01 · RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  hanging-punctuation: first last;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  overflow-x: hidden;
  transition: background-color var(--dur-m) var(--ease-out-quart),
              color var(--dur-m) var(--ease-out-quart);
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

::selection { background: var(--accent-soft); color: var(--text); }

/* Custom scrollbar — subtle, matches theme */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-pill);
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* Focus — visible, branded, never removed */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ==========================================================================
   02 · TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.028em;
  text-wrap: balance;
  color: var(--text);
}

h1 { font-size: var(--step-5); letter-spacing: -0.038em; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-1); line-height: 1.25; letter-spacing: -0.018em; }
h4 { font-size: var(--step-0); line-height: 1.35; letter-spacing: -0.012em; }

p { text-wrap: pretty; }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 40ch;
  text-wrap: pretty;
}

.eyebrow {
  display: inline-block;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-xs);
}

.muted { color: var(--text-2); }
.tnum { font-variant-numeric: tabular-nums; }

/* Restrained gradient — used on one phrase per section, never on body copy */
.grad {
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   03 · LAYOUT PRIMITIVES
   ========================================================================== */

.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}
.shell--narrow { --shell: 52rem; }
.shell--mid { --shell: 64rem; }

.section {
  position: relative;
  padding-block: var(--space-3xl);
  border-top: 1px solid var(--line);
}
.section--flush { border-top: 0; }

.section-head {
  max-width: 44ch;
  margin-bottom: var(--space-2xl);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head p { color: var(--text-2); margin-top: var(--space-s); }

.grid { display: grid; gap: var(--space-m); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.stack > * + * { margin-top: var(--space-s); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }

/* ==========================================================================
   04 · ATMOSPHERE
   ========================================================================== */

/* Film grain — a fixed, blended noise plate. The single cheapest way to stop
   a flat dark UI reading as "template". Kept under 5% opacity. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: transform;
  animation: grain-drift 8s steps(6) infinite;
}
@keyframes grain-drift {
  0%   { transform: translate(0, 0); }
  16%  { transform: translate(-2%, -3%); }
  33%  { transform: translate(-4%, 2%); }
  50%  { transform: translate(2%, -4%); }
  66%  { transform: translate(-1%, 3%); }
  83%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* Page-wide ambient backdrop.
   Sits at z-index -1 behind all content but above the body background, so the
   whole page has depth rather than the hero being the only lit area. Fixed
   rather than scrolling, which keeps it calm — the content moves, the light
   stays put. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(58rem 40rem at 10% 4%,  var(--aurora-a), transparent 62%),
    radial-gradient(52rem 38rem at 92% 26%, var(--aurora-b), transparent 64%),
    radial-gradient(48rem 36rem at 46% 98%, var(--aurora-c), transparent 66%);
}

/* Faint dot lattice — reads as engineered paper, masked so it never reaches
   an edge and turns into wallpaper. */
.backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, var(--line-strong) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: 0.45;
  -webkit-mask-image: radial-gradient(ellipse 110% 80% at 50% 38%, #000 15%, transparent 78%);
  mask-image: radial-gradient(ellipse 110% 80% at 50% 38%, #000 15%, transparent 78%);
}

/* One very slow drifting field, so the page is never quite static */
.backdrop::after {
  content: "";
  position: absolute;
  top: 26%;
  left: 48%;
  width: 56rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--aurora-a), transparent 66%);
  filter: blur(100px);
  will-change: transform;
  animation: backdrop-drift 46s var(--ease-in-out-soft) infinite alternate;
}
@keyframes backdrop-drift {
  from { transform: translate3d(-8rem, -4rem, 0) scale(0.94); }
  to   { transform: translate3d(6rem, 6rem, 0) scale(1.12); }
}

/* Section banding — a barely-there lift on selected sections so the page
   reads as composed blocks. Uses --text rather than a fixed colour so it
   lightens in dark mode and darkens in light mode automatically. */
.section--tint::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--text) 3.5%, transparent) 14%,
    color-mix(in srgb, var(--text) 3.5%, transparent) 86%,
    transparent 100%
  );
}

/* Aurora mesh — slow, blurred colour fields behind the hero */
.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  width: 46rem;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  /* Softened because .backdrop now lights the page globally — at full
     strength the two stack and blow out the top of the hero. */
  opacity: 0.62;
  will-change: transform;
}
.aurora::before {
  top: -18rem; left: -14rem;
  background: radial-gradient(circle at 50% 50%, var(--aurora-a), transparent 68%);
  animation: drift-a 26s var(--ease-in-out-soft) infinite alternate;
}
.aurora::after {
  top: 4rem; right: -18rem;
  background: radial-gradient(circle at 50% 50%, var(--aurora-b), transparent 68%);
  animation: drift-b 32s var(--ease-in-out-soft) infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(7rem, 4rem, 0) scale(1.12); } }
@keyframes drift-b { to { transform: translate3d(-6rem, 5rem, 0) scale(1.08); } }

/* ==========================================================================
   05 · COMPONENTS
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------ */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.85em 1.5em;
  border-radius: var(--r-pill);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  isolation: isolate;
  transition:
    transform var(--dur-s) var(--ease-out-expo),
    box-shadow var(--dur-m) var(--ease-out-quart),
    border-color var(--dur-s) ease,
    background-color var(--dur-s) ease,
    color var(--dur-s) ease;
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn--primary {
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  box-shadow: var(--shadow-accent);
}
.btn--primary:hover { box-shadow: 0 14px 46px rgba(79,216,232,.28), 0 4px 14px rgba(154,124,248,.18); }

.btn--ghost {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.btn--ghost:hover { border-color: var(--accent-line); background: var(--surface-hover); }

.btn--block { width: 100%; }
.btn--lg { padding: 1.05em 1.9em; font-size: var(--step-0); }

/* Arrow nudge — the micro-interaction that reads as "considered" */
.btn .arrow { transition: transform var(--dur-s) var(--ease-out-expo); }
.btn:hover .arrow { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(0.995); }

/* --- Surfaces ----------------------------------------------------------- */

.glass {
  background: var(--surface);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}

/* Card with a cursor-tracked spotlight and a hairline gradient edge on hover */
.card {
  position: relative;
  padding: var(--space-m);
  border-radius: var(--r-l);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--dur-m) var(--ease-out-expo),
    border-color var(--dur-m) ease,
    box-shadow var(--dur-m) var(--ease-out-quart);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(
    28rem circle at var(--mx, 50%) var(--my, 0%),
    var(--accent-soft), transparent 62%
  );
  transition: opacity var(--dur-m) var(--ease-out-quart);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-l);
}
.card:hover::before { opacity: 1; }

.card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-m);
  margin-bottom: var(--space-s);
  color: var(--accent);
  background: linear-gradient(160deg, var(--accent-soft), transparent);
  border: 1px solid var(--accent-line);
  transition: transform var(--dur-m) var(--ease-out-expo);
}
.card:hover .card__icon { transform: translateY(-2px) scale(1.04); }
.card__icon--alt { color: var(--accent-2); background: linear-gradient(160deg, var(--accent-2-soft), transparent); border-color: color-mix(in srgb, var(--accent-2) 34%, transparent); }
.card__icon svg { width: 1.4rem; height: 1.4rem; }

.card h3 { margin-bottom: var(--space-2xs); }
.card p { font-size: var(--step--1); color: var(--text-2); }

/* --- Pills / tags ------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1em;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-2);
  transition: transform var(--dur-s) var(--ease-out-expo), border-color var(--dur-s) ease, color var(--dur-s) ease;
}
.pill svg { width: 1em; height: 1em; color: var(--accent); }
a.pill:hover, .pill--interactive:hover { transform: translateY(-2px); border-color: var(--accent-line); color: var(--text); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.9em;
  border-radius: var(--r-pill);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}
.badge--warn {
  border-color: color-mix(in srgb, var(--warning) 34%, transparent);
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  color: var(--warning);
}
.badge svg { width: 0.95em; height: 0.95em; }

/* Live status dot */
.dot {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--positive);
  flex: none;
}
.dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: ping 2.4s var(--ease-out-quart) infinite;
}
@keyframes ping {
  0%   { transform: scale(1); opacity: 0.6; }
  70%  { transform: scale(3); opacity: 0; }
  100% { transform: scale(3); opacity: 0; }
}

/* --- Forms -------------------------------------------------------------- */

.field { display: block; }
.field__label {
  display: block;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: var(--space-2xs);
}
.field__label .req { color: var(--accent); }

.input, .select, .textarea {
  width: 100%;
  padding: 0.8em 1em;
  border-radius: var(--r-s);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: var(--step--1);
  transition: border-color var(--dur-s) ease, box-shadow var(--dur-s) ease, background-color var(--dur-s) ease;
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.textarea { resize: vertical; min-height: 7rem; }

.select {
  appearance: none;
  padding-right: 2.6em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7688' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
}

.field__error {
  display: block;
  font-size: var(--step--2);
  color: var(--negative);
  margin-top: var(--space-3xs);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity var(--dur-s) ease, max-height var(--dur-s) ease, margin var(--dur-s) ease;
}
.field.is-invalid .field__error { opacity: 1; max-height: 3rem; margin-top: var(--space-3xs); }
.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea { border-color: var(--negative); }

/* Range slider — restyled in both engines so it stops looking stock */
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: var(--r-pill);
  background:
    linear-gradient(90deg, var(--accent) var(--fill, 30%), var(--line) var(--fill, 30%));
  cursor: pointer;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 2px solid var(--accent);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  transition: transform var(--dur-s) var(--ease-out-expo), box-shadow var(--dur-s) ease;
}
.range::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 2px solid var(--accent);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.range:hover::-webkit-slider-thumb { transform: scale(1.14); box-shadow: 0 0 0 6px var(--accent-soft); }
.range:active::-webkit-slider-thumb { transform: scale(1.05); }

/* --- Accordion ---------------------------------------------------------- */

.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }

.acc__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  width: 100%;
  padding: var(--space-s) 0;
  text-align: left;
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--text);
  transition: color var(--dur-s) ease;
}
.acc__trigger:hover { color: var(--accent); }

.acc__sign {
  position: relative;
  flex: none;
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition: border-color var(--dur-s) ease, transform var(--dur-m) var(--ease-out-expo);
}
.acc__sign::before, .acc__sign::after {
  content: "";
  position: absolute;
  inset: 50% 25%;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform var(--dur-m) var(--ease-out-expo), opacity var(--dur-s) ease;
}
.acc__sign::after { transform: translateY(-50%) rotate(90deg); }
.acc__trigger[aria-expanded="true"] .acc__sign { border-color: var(--accent); transform: rotate(180deg); }
.acc__trigger[aria-expanded="true"] .acc__sign::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

/* grid-template-rows 0fr→1fr: height-agnostic, no JS measurement, no jank */
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-m) var(--ease-out-quart);
}
.acc__panel > div { overflow: hidden; }
.acc__panel p {
  font-size: var(--step--1);
  color: var(--text-2);
  max-width: 62ch;
  padding-bottom: var(--space-m);
}
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }

/* ==========================================================================
   06 · HEADER & NAVIGATION
   ========================================================================== */

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -120%;
  z-index: var(--z-toast);
  padding: 0.7em 1.2em;
  border-radius: 0 0 var(--r-s) var(--r-s);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  transition: translate var(--dur-s) var(--ease-out-expo);
}
.skip-link:focus-visible { translate: -50% 0; }

.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  z-index: calc(var(--z-header) + 1);
  pointer-events: none;
}
/* Native scroll-driven animation where supported — zero JS on the main thread */
@supports (animation-timeline: scroll()) {
  .progress {
    transform: scaleX(0);
    animation: progress-grow linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes progress-grow { to { transform: scaleX(1); } }
}

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  transition: background-color var(--dur-m) var(--ease-out-quart),
              border-color var(--dur-m) ease,
              box-shadow var(--dur-m) ease;
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-s);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  height: 5rem;
  transition: height var(--dur-m) var(--ease-out-quart);
}
.header.is-stuck .header__inner { height: 4.15rem; }

.logo { display: inline-flex; align-items: center; gap: 0.65rem; }
.logo__mark {
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 9px;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  box-shadow: var(--shadow-accent);
  transition: transform var(--dur-m) var(--ease-out-expo), box-shadow var(--dur-m) ease;
}
.logo__mark svg { width: 1.15rem; height: 1.15rem; color: var(--accent-ink); }
.logo:hover .logo__mark { transform: rotate(-8deg) scale(1.05); }
.logo__word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: -0.025em;
}

.nav { display: none; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
@media (min-width: 62rem) { .nav { display: flex; } }

.nav__link {
  position: relative;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-2);
  padding-block: 0.35rem;
  transition: color var(--dur-s) ease;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform var(--dur-m) var(--ease-out-expo);
}
.nav__link:hover, .nav__link.is-active { color: var(--text); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: 0 50%; }

.header__actions { display: flex; align-items: center; gap: var(--space-2xs); }
.header__cta { display: none; }
@media (min-width: 62rem) { .header__cta { display: inline-flex; } }

.icon-btn {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--r-s);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  transition: color var(--dur-s) ease, border-color var(--dur-s) ease, background-color var(--dur-s) ease, transform var(--dur-s) var(--ease-out-expo);
}
.icon-btn:hover { color: var(--text); border-color: var(--line-strong); background: var(--surface-hover); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg { width: 1.15rem; height: 1.15rem; }

/* Theme toggle — sun/moon crossfade */
.theme-toggle .moon, .theme-toggle .sun { grid-area: 1 / 1; transition: opacity var(--dur-s) ease, transform var(--dur-m) var(--ease-out-expo); }
[data-theme="dark"] .theme-toggle .sun { opacity: 1; transform: none; }
[data-theme="dark"] .theme-toggle .moon { opacity: 0; transform: rotate(-45deg) scale(0.6); }
[data-theme="light"] .theme-toggle .sun { opacity: 0; transform: rotate(45deg) scale(0.6); }
[data-theme="light"] .theme-toggle .moon { opacity: 1; transform: none; }

.burger { display: grid; }
@media (min-width: 62rem) { .burger { display: none; } }
.burger span {
  display: block;
  width: 17px; height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-m) var(--ease-out-expo), opacity var(--dur-s) ease;
}
.burger span + span { margin-top: 4.5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  padding: 6.5rem var(--gutter) var(--space-xl);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-m) var(--ease-out-quart), transform var(--dur-m) var(--ease-out-expo), visibility var(--dur-m);
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer a {
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  padding-block: var(--space-2xs);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-m) var(--ease-out-quart), transform var(--dur-m) var(--ease-out-expo), color var(--dur-s) ease;
  transition-delay: calc(var(--i, 0) * 45ms);
}
.drawer a:hover { color: var(--accent); }
.drawer.is-open a { opacity: 1; transform: none; }
.drawer .btn { margin-top: var(--space-s); border-bottom: 0; font-size: var(--step--1); }
body.is-locked { overflow: hidden; }

/* ==========================================================================
   07 · SECTIONS
   ========================================================================== */

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: calc(5rem + var(--space-3xl));
  padding-bottom: var(--space-3xl);
  overflow: hidden;
}
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}
@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-xl); }
}
.hero h1 { margin-block: var(--space-s) var(--space-m); }
.hero .cluster { margin-top: var(--space-l); }

.hero__assurances {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin-top: var(--space-l);
  font-size: var(--step--2);
  color: var(--text-3);
}
.hero__assurances li { display: flex; align-items: center; gap: 0.45em; }
.hero__assurances svg { width: 1em; height: 1em; color: var(--accent); }

/* Line-by-line mask reveal for the headline */
.reveal-line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.reveal-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform var(--dur-xl) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.is-ready .reveal-line > span { transform: none; }

/* --- Pipeline panel ----------------------------------------------------- */

.panel {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--surface), transparent 70%), var(--bg-elev);
  padding: var(--space-m);
  box-shadow: var(--shadow-l);
  overflow: hidden;
}
.panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-m);
}
.panel__title {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.panel__live { display: inline-flex; align-items: center; gap: 0.5em; font-size: var(--step--2); color: var(--text-3); }

.pipeline { width: 100%; height: auto; }
.pipeline .track { stroke: var(--line-strong); stroke-width: 1.5; fill: none; }
.pipeline .pulse {
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 26 214;
  filter: drop-shadow(0 0 6px var(--accent));
  animation: pulse-run 3.2s linear infinite;
}
.pipeline .pulse--2 { stroke: var(--accent-2); animation-delay: 1.6s; filter: drop-shadow(0 0 6px var(--accent-2)); }
@keyframes pulse-run { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } }

.pipeline .node { fill: var(--bg-elev); stroke: var(--line-strong); stroke-width: 1.5; }
.pipeline .node--live { stroke: var(--accent); animation: node-breathe 2.8s var(--ease-in-out-soft) infinite; }
@keyframes node-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.pipeline text { font-family: var(--font-body); font-size: 9px; fill: var(--text-3); text-anchor: middle; }
.pipeline text.lbl { font-weight: 600; fill: var(--text); font-size: 10px; }

/* Event ticker */
.ticker {
  margin-top: var(--space-m);
  border-top: 1px solid var(--line);
  padding-top: var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--text-3);
  min-height: 3.6em;
}
.ticker li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding-block: 0.25em;
  opacity: 0;
  transform: translateY(6px);
  animation: ticker-in var(--dur-l) var(--ease-out-expo) forwards;
}
.ticker li .ok { color: var(--positive); }
.ticker li time { margin-left: auto; opacity: 0.6; }
@keyframes ticker-in { to { opacity: 1; transform: none; } }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-s);
  margin-top: var(--space-m);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
  text-align: center;
}
.stats dt { font-size: var(--step--2); color: var(--text-3); order: 2; }
.stats dd {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.stats > div { display: flex; flex-direction: column; }

/* --- Marquee ------------------------------------------------------------ */

.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  gap: var(--space-xl);
  width: max-content;
  animation: marquee var(--speed, 46s) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-3);
  white-space: nowrap;
  transition: color var(--dur-s) ease;
}
.marquee__item:hover { color: var(--text); }
.marquee__item svg { width: 1.1em; height: 1.1em; color: var(--accent); }

/* --- Compare (problem / solution) --------------------------------------- */

.compare { display: grid; gap: var(--space-m); }
@media (min-width: 54rem) { .compare { grid-template-columns: 1fr 1fr; } }

.compare__col {
  padding: var(--space-m);
  border-radius: var(--r-l);
  border: 1px solid var(--line);
  background: var(--surface);
}
.compare__col--bad { border-color: color-mix(in srgb, var(--negative) 22%, transparent); background: color-mix(in srgb, var(--negative) 5%, transparent); }
.compare__col--good { border-color: var(--accent-line); background: var(--accent-soft); }

.compare__head {
  display: flex; align-items: center; gap: 0.6em;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-0);
  margin-bottom: var(--space-m);
}
.compare__col--bad .compare__head { color: var(--negative); }
.compare__col--good .compare__head { color: var(--accent); }
.compare__head span.mark { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.compare__list li {
  display: flex; align-items: flex-start; gap: 0.75em;
  padding-block: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--text-2);
}
.compare__list svg { width: 1.15em; height: 1.15em; flex: none; margin-top: 0.2em; }
.compare__col--bad svg { color: var(--negative); }
.compare__col--good svg { color: var(--accent); }

/* --- Process ------------------------------------------------------------ */

.process { position: relative; display: grid; gap: var(--space-xl); counter-reset: step; }
@media (min-width: 60rem) { .process { grid-template-columns: repeat(4, 1fr); gap: var(--space-m); } }

.process__rail {
  display: none;
  position: absolute;
  top: 1.75rem;
  left: 12%;
  right: 12%;
  height: 1px;
  background: var(--line);
  overflow: hidden;
}
@media (min-width: 60rem) { .process__rail { display: block; } }
.process__rail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  transition: transform var(--dur-l) var(--ease-out-quart);
}
@supports (animation-timeline: view()) {
  .process__rail::after {
    transform: scaleX(0);
    animation: rail-fill linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 55%;
  }
  @keyframes rail-fill { to { transform: scaleX(1); } }
}

.step { position: relative; }
.step__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  background: var(--bg-elev);
  color: var(--accent);
  margin-bottom: var(--space-s);
  box-shadow: 0 0 0 8px var(--bg);
  transition: transform var(--dur-m) var(--ease-out-expo), box-shadow var(--dur-m) ease;
}
.step:hover .step__dot { transform: translateY(-3px); box-shadow: 0 0 0 8px var(--bg), var(--shadow-accent); }
.step__dot svg { width: 1.25rem; height: 1.25rem; }
.step__n {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
}
.step h3 { margin-block: var(--space-3xs) var(--space-2xs); }
.step p { font-size: var(--step--1); color: var(--text-2); max-width: 26ch; }

/* --- Scenario cards ----------------------------------------------------- */

.scenario__metric {
  display: block;
  margin-top: var(--space-s);
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.scenario .badge { position: absolute; top: var(--space-s); right: var(--space-s); }

/* --- Advisor ------------------------------------------------------------ */

.advisor {
  display: grid;
  gap: var(--space-xl);
  padding: var(--space-l);
}
@media (min-width: 58rem) {
  .advisor { grid-template-columns: 1fr 1fr; gap: var(--space-l); align-items: start; }
}

.advisor__form { display: grid; gap: var(--space-m); align-content: start; }

.advisor__meta {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-3xs);
}
.advisor__count {
  font-size: var(--step--2);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.advisor__examples-label {
  display: block;
  font-size: var(--step--2);
  color: var(--text-3);
  margin-bottom: var(--space-s);
}

/* Collapsible groups, built on native <details> so keyboard and screen-reader
   behaviour comes for free — no JS, no aria bookkeeping. */
.advisor__groups { display: grid; }

.advisor__group { border-bottom: 1px solid var(--line); }
.advisor__group:last-child { border-bottom: 0; }

.advisor__group-label {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding-block: var(--space-xs);
  cursor: pointer;
  list-style: none;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: color var(--dur-s) ease;
}
.advisor__group-label::-webkit-details-marker { display: none; }
.advisor__group-label:hover { color: var(--accent); }
.advisor__group[open] > .advisor__group-label { color: var(--accent); }

/* Chevron, drawn in CSS rather than another sprite lookup */
.advisor__group-label::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-m) var(--ease-out-expo);
}
.advisor__group[open] > .advisor__group-label::after {
  transform: translateY(1px) rotate(-135deg);
}

.advisor__group > .cluster { padding-bottom: var(--space-s); }

/* Seed chips — one tap fills the textarea with a realistic problem */
.chip {
  padding: 0.45em 0.9em;
  border-radius: var(--r-pill);
  border: 1px dashed var(--line-strong);
  background: transparent;
  color: var(--text-2);
  font-size: var(--step--2);
  font-weight: 500;
  transition: color var(--dur-s) ease, border-color var(--dur-s) ease,
              background-color var(--dur-s) ease, transform var(--dur-s) var(--ease-out-expo);
}
.chip:hover {
  color: var(--text);
  border-color: var(--accent-line);
  border-style: solid;
  background: var(--accent-soft);
  transform: translateY(-1px);
}

/* --- Advisor output ----------------------------------------------------- */

.advisor__output {
  display: grid;
  align-content: start;
  min-height: 18rem;
  border-radius: var(--r-l);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  padding: var(--space-m);
}

.advisor__empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-s);
  text-align: center;
  min-height: 16rem;
  color: var(--text-3);
  font-size: var(--step--1);
}
.advisor__empty-mark {
  display: grid;
  place-items: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: var(--r-m);
  border: 1px dashed var(--line-strong);
  color: var(--text-3);
}
.advisor__empty-mark svg { width: 1.5rem; height: 1.5rem; }

.advisor__card { display: grid; gap: var(--space-s); }

.advisor__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--line);
}
.advisor__source {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.advisor__source .dot { background: var(--accent); }
.advisor__source .dot::after { animation: none; }
.advisor__source--ai .dot { background: var(--accent-2); }
.advisor__source--ai .dot::after { animation: ping 2.4s var(--ease-out-quart) infinite; }

.advisor__summary { font-size: var(--step--1); color: var(--text-2); }
.advisor__title { font-size: var(--step-1); }
.advisor__desc { font-size: var(--step--1); color: var(--text-2); }

.advisor__label {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--space-2xs);
}

.advisor__steps { display: grid; gap: var(--space-2xs); counter-reset: astep; }
.advisor__steps li {
  display: flex;
  gap: 0.7em;
  font-size: var(--step--1);
  color: var(--text-2);
  counter-increment: astep;
}
.advisor__steps li::before {
  content: counter(astep);
  flex: none;
  display: grid;
  place-items: center;
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: var(--step--2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.advisor__facts {
  display: grid;
  gap: var(--space-s);
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
}
@media (min-width: 26rem) { .advisor__facts { grid-template-columns: 1fr 1fr; } }
.advisor__facts dt { font-size: var(--step--2); color: var(--text-3); }
.advisor__facts dd {
  margin: 0;
  margin-top: var(--space-3xs);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.advisor__disclaimer {
  font-size: var(--step--2);
  color: var(--text-3);
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
}

/* Hand-off — the opt-in that actually sends anything anywhere */
.advisor__handoff {
  margin-top: var(--space-s);
  padding-top: var(--space-m);
  border-top: 1px solid var(--accent-line);
}
.advisor__handoff-row { display: grid; gap: var(--space-2xs); }
@media (min-width: 24rem) {
  .advisor__handoff-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}
.advisor__handoff-note {
  margin-top: var(--space-2xs);
  font-size: var(--step--2);
  color: var(--text-3);
}
.advisor__handoff .input[aria-invalid="true"] { border-color: var(--negative); }

/* Honeypot — off-screen, never announced, never tab-reachable */
.advisor__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.advisor__error {
  font-size: var(--step--1);
  color: var(--warning);
}

.advisor.is-busy .btn[type="submit"] { opacity: 0.7; pointer-events: none; }

/* --- ROI calculator ----------------------------------------------------- */

.roi { display: grid; gap: var(--space-xl); }
@media (min-width: 58rem) { .roi { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } }

.roi__row { margin-bottom: var(--space-m); }
.roi__split { display: grid; gap: var(--space-s); }
@media (min-width: 26rem) { .roi__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
/* Keep the two labels on one line each so the fields stay top-aligned */
.roi__split .field__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roi__row-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-s);
  margin-bottom: var(--space-2xs);
}
.roi__row-head label { font-size: var(--step--1); color: var(--text-2); }
.roi__val {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.roi__out { display: grid; gap: var(--space-s); align-content: start; }
@media (min-width: 30rem) { .roi__out { grid-template-columns: 1fr 1fr; } }
.roi__tile {
  padding: var(--space-s);
  border-radius: var(--r-m);
  border: 1px solid var(--line);
  background: var(--bg-elev);
}
.roi__tile dt { font-size: var(--step--2); color: var(--text-3); margin-bottom: var(--space-3xs); }
.roi__tile dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.roi__tile--hero {
  grid-column: 1 / -1;
  border-color: var(--accent-line);
  background: linear-gradient(150deg, var(--accent-soft), transparent 75%), var(--bg-elev);
  padding: var(--space-m);
}
.roi__tile--hero dt { color: var(--accent); }
.roi__tile--hero dd { font-size: var(--step-3); }

.note {
  display: flex; align-items: flex-start; gap: 0.6em;
  font-size: var(--step--2);
  color: var(--text-3);
  max-width: 46ch;
}
.note svg { width: 1.1em; height: 1.1em; flex: none; margin-top: 0.2em; }

/* --- Contact ------------------------------------------------------------ */

.form-grid { display: grid; gap: var(--space-s); }
@media (min-width: 34rem) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }

.form-status {
  display: grid;
  place-items: center;
  text-align: center;
  gap: var(--space-s);
  padding-block: var(--space-xl);
}
.form-status__ring {
  display: grid; place-items: center;
  width: 4rem; height: 4rem;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}
.form-status__ring svg { width: 1.8rem; height: 1.8rem; }
.form-status svg .tick {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: tick-draw var(--dur-l) var(--ease-out-expo) 120ms forwards;
}
@keyframes tick-draw { to { stroke-dashoffset: 0; } }
[hidden] { display: none !important; }

/* --- Footer ------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--line);
  padding-block: var(--space-2xl) var(--space-l);
  position: relative;
}
.footer__top { display: grid; gap: var(--space-xl); }
@media (min-width: 54rem) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer h4 {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--space-s);
}
.footer li + li { margin-top: var(--space-2xs); }
.footer a:not(.logo):not(.social) {
  font-size: var(--step--1);
  color: var(--text-2);
  transition: color var(--dur-s) ease;
}
.footer a:not(.logo):not(.social):hover { color: var(--accent); }
.footer__blurb { font-size: var(--step--1); color: var(--text-2); max-width: 32ch; margin-top: var(--space-s); }

.social {
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: var(--r-s);
  border: 1px solid var(--line);
  color: var(--text-2);
  transition: color var(--dur-s) ease, border-color var(--dur-s) ease, transform var(--dur-s) var(--ease-out-expo), background-color var(--dur-s) ease;
}
.social:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); transform: translateY(-2px); }
.social svg { width: 1.05rem; height: 1.05rem; }

.footer__base {
  display: flex; flex-wrap: wrap; gap: var(--space-s);
  align-items: center; justify-content: space-between;
  margin-top: var(--space-2xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
  font-size: var(--step--2);
  color: var(--text-3);
}

/* Oversized wordmark — the "we thought about the footer too" move */
.footer__wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 13vw, 11rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  margin-top: var(--space-xl);
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  user-select: none;
  text-align: center;
  pointer-events: none;
}

/* --- Back to top -------------------------------------------------------- */

.to-top {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: var(--z-header);
  display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-2);
  box-shadow: var(--shadow-m);
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  pointer-events: none;
  transition: opacity var(--dur-m) var(--ease-out-quart), transform var(--dur-m) var(--ease-out-expo), color var(--dur-s) ease, border-color var(--dur-s) ease;
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: var(--accent); border-color: var(--accent-line); }
.to-top svg { width: 1.1rem; height: 1.1rem; }

/* ==========================================================================
   08 · MOTION
   ========================================================================== */

/* Scroll reveal — opacity + a short lift only. Staggered by --i. */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-l) var(--ease-out-quart),
    transform var(--dur-l) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 80ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Very subtle depth parallax, native where supported */
@supports (animation-timeline: view()) {
  [data-float] {
    animation: float-y linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes float-y {
    from { transform: translateY(2.2rem); }
    to   { transform: translateY(-2.2rem); }
  }
}

/* ==========================================================================
   09 · UTILITIES, A11Y, PRINT
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.center { text-align: center; }
.mt-l { margin-top: var(--space-l); }
.mt-m { margin-top: var(--space-m); }
.mt-s { margin-top: var(--space-s); }

/* Honour reduced motion completely — nothing animates, everything is visible. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .reveal-line > span { transform: none !important; }
  .grain { animation: none; }
  .aurora::before, .aurora::after { animation: none; }
  .backdrop::after { animation: none; }
  .marquee__track { animation: none; transform: none; }
}

/* Higher-contrast preference — firm up hairlines */
@media (prefers-contrast: more) {
  :root { --line: rgba(255,255,255,0.22); --line-strong: rgba(255,255,255,0.4); --text-2: #cfd7e4; }
  [data-theme="light"] { --line: rgba(9,18,36,0.24); --line-strong: rgba(9,18,36,0.42); --text-2: #2f3b4f; }
}

@media print {
  .grain, .aurora, .backdrop, .to-top, .header, .drawer, .progress, .marquee { display: none !important; }
  .section--tint::before { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; page-break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}