/* components.css — reusable section recipes for page CONTENT.
   The header + footer come from site-chrome.css (extracted Framer styles).
   This file styles everything between header and footer using design-system tokens.

   Add new component classes here as pages are built; never reach for raw values. */

/* ---- Page-content shell ---- */

main.page {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  min-height: 60vh;
}

main.page > section {
  padding: var(--space-12) var(--space-7);
}

main.page > section .wrap {
  max-width: 1200px; /* = nav pill + hero, so every section shares one content column */
  margin: 0 auto;
}

/* ---- Typography ---- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-50);
  margin-bottom: var(--space-5);
  display: inline-block;
}

h1.display,
h2.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
}

h1.display { font-size: var(--text-6xl); line-height: 1.05; }
h2.display { font-size: var(--text-5xl); line-height: 1.1; }

.section-header {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.5vw, 44px);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 var(--space-3);
}

.section-sub {
  color: var(--muted-75);
  font-size: var(--text-lg);
  line-height: 1.55;
  margin: 0 0 var(--space-9);
  max-width: 60ch;
}

.lede {
  color: var(--muted-75);
  font-size: var(--text-xl);
  line-height: 1.55;
  margin: 0 0 var(--space-9);
  max-width: 60ch;
}

.body-text {
  color: var(--muted-75);
  font-size: var(--text-md);
  line-height: 1.7;
}

.body-text p { margin: 0 0 var(--space-4); }
.body-text p:last-child { margin-bottom: 0; }
.body-text strong { color: var(--fg); font-weight: 500; }
.body-text em { color: var(--accent); font-style: normal; }

/* ---- Card ---- */

.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: var(--space-7);
  transition: border-color var(--dur-base) var(--ease-out-expo);
}
.card:hover { border-color: var(--hairline); }

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
}

.card__desc {
  color: var(--muted-75);
  font-size: var(--text-md);
  line-height: 1.55;
  margin: 0 0 var(--space-6);
}

/* ---- Badge / pill ---- */

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
}

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

.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 500;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  text-decoration: none;
  border: 1px solid var(--accent);
  transition: opacity var(--dur-fast) var(--ease-out-expo);
}
.btn-primary:hover { opacity: 0.88; }

/* Dark-pill CTA used on the hero — matches Framer's "Let's Talk" aesthetic:
   translucent dark background, soft border, subtle warm glow. The sky-blue
   .btn-primary above stays as the default for plain backgrounds; this variant
   is for atmospheric placements (over imagery, over glow halos, etc). */
.btn-primary--dark {
  background: rgba(15, 15, 18, 0.6);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: var(--space-3) var(--space-6);
  box-shadow:
    0 0 0 0 rgba(255, 138, 60, 0),
    0 8px 24px rgba(0, 0, 0, 0.4);
  transition:
    background var(--dur-base) var(--ease-out-expo),
    border-color var(--dur-base) var(--ease-out-expo),
    box-shadow var(--dur-base) var(--ease-out-expo);
}
.btn-primary--dark:hover {
  opacity: 1;
  background: rgba(25, 25, 30, 0.75);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 0 28px 2px rgba(255, 138, 60, 0.28),
    0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ---- .btn-glow — multi-layer Framer-style CTA ----
   Used for the header "Let's Talk" pill and the hero "Book a strategy call"
   button. Replicates Framer's button stack 1:1 — including the SIGNATURE
   detail: the colored gradient's anchor TRAVELS around the button perimeter
   on a slow loop (~3s), so the bright hot-spot rotates and the eye reads it
   as a continuous warm outline rather than a static corner glow. Without
   this rotation the button looks "broken" — that was the missing piece.

   Stack (DOM order = paint order): Glow → Stroke → Fill (inset 1px) →
   Label + Icon-flip. On hover both gradients balloon (75% / 50%) and the
   arrow track slides up 14px to reveal a second arrow. */

/* @property registration makes percentage custom-properties animatable —
   you can't natively keyframe a radial-gradient's `at X% Y%`, but you CAN
   keyframe (and transition) registered custom properties used inside it.
   Anchor properties drive the traveling-light keyframes; size properties
   are transitioned on hover so the gradient blooms outward from the
   anchor's last position rather than snapping. */
@property --btn-gx {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}
@property --btn-gy {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --btn-sx {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 17.5%;       /* stroke gradient width at idle */
}
@property --btn-sy {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 44.7%;       /* stroke gradient height at idle */
}
@property --btn-glx {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 25%;         /* glow gradient width at idle */
}
@property --btn-gly {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 38%;         /* glow gradient height at idle */
}

.btn-glow {
  --btn-accent: rgb(158, 100, 46);          /* default orange (Let's Talk) */
  --btn-fill: rgb(23, 23, 23);
  --btn-pad-x: 21px;
  --btn-pad-y: 8px;
  --btn-min-h: 38px;                        /* matches Framer Let's Talk */
  --btn-min-w: 135px;                       /* matches Framer Let's Talk */
  --btn-radius: 7px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-min-h);
  min-width: var(--btn-min-w);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px;                          /* was 12 — too narrow in Figtree */
  font-weight: 500;                         /* was 400 — Figtree at 12 read thin */
  line-height: 1.6;                         /* was 1 — label was vertically squashed */
  text-decoration: none;
  border-radius: var(--btn-radius);
  isolation: isolate;
  overflow: visible;
  box-sizing: border-box;
  transition: transform 280ms var(--ease-out-expo);
}
.btn-glow--yellow {
  --btn-accent: rgb(243, 178, 12);          /* Book a call yellow */
}
.btn-glow--lg {
  --btn-pad-y: 10px;
  --btn-min-h: 47px;                        /* matches Framer Book a call */
  --btn-min-w: 170px;                       /* a bit wider for longer label */
  font-size: 15px;
}
.btn-glow__stroke,
.btn-glow__glow,
.btn-glow__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.btn-glow__glow {
  z-index: 0;
  background: radial-gradient(
    var(--btn-glx) var(--btn-gly) at var(--btn-gx) var(--btn-gy),
    var(--btn-accent) 0%,
    transparent 100%);
  filter: blur(15px);
  animation: btnGlowTravel 3s linear infinite;
  transition: --btn-glx 600ms cubic-bezier(0.33, 0, 0.4, 1),
              --btn-gly 600ms cubic-bezier(0.33, 0, 0.4, 1);
}
.btn-glow__stroke {
  z-index: 1;
  background: radial-gradient(
    var(--btn-sx) var(--btn-sy) at var(--btn-gx) var(--btn-gy),
    var(--btn-accent) 0%,
    transparent 100%);
  animation: btnGlowTravel 3s linear infinite;
  transition: --btn-sx 600ms cubic-bezier(0.33, 0, 0.4, 1),
              --btn-sy 600ms cubic-bezier(0.33, 0, 0.4, 1);
}
.btn-glow__fill {
  z-index: 2;
  inset: 1px;
  background: var(--btn-fill);
}
.btn-glow__label,
.btn-glow__icon {
  position: relative;
  z-index: 3;
}
.btn-glow__icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  overflow: hidden;
  flex-shrink: 0;
}
.btn-glow__icon-track {
  position: relative;
  width: 14px;
  height: 28px;                              /* two icons stacked */
  display: block;
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-glow__icon svg {
  display: block;
  width: 14px;
  height: 14px;
}

/* Anchor traces the perimeter clockwise: top → right → bottom → left → top.
   Linear timing keeps the visual speed consistent around the rectangle. */
@keyframes btnGlowTravel {
  0%   { --btn-gx: 50%;   --btn-gy: 0%;   }   /* top-center */
  25%  { --btn-gx: 100%;  --btn-gy: 50%;  }   /* right-middle */
  50%  { --btn-gx: 50%;   --btn-gy: 100%; }   /* bottom-center */
  75%  { --btn-gx: 0%;    --btn-gy: 50%;  }   /* left-middle */
  100% { --btn-gx: 50%;   --btn-gy: 0%;   }   /* back to top */
}

/* On hover Framer freezes the traveling light at the button center and
   smoothly expands the gradient size — the bright spot stops orbiting and
   blooms outward from middle, lighting up the whole button. Match that:
   cancel the travel keyframe (releasing --btn-gx/--btn-gy back to base
   declarations) so the anchor transitions to 50%/50%, AND transition the
   size custom-properties to their expanded values. The 380ms ease-out
   timing covers both — light grows from middle toward the edges. */
.btn-glow:hover .btn-glow__stroke,
.btn-glow:hover .btn-glow__glow {
  animation: none;
  --btn-gx: 50%;
  --btn-gy: 50%;
  transition: --btn-gx 600ms cubic-bezier(0.33, 0, 0.4, 1),
              --btn-gy 600ms cubic-bezier(0.33, 0, 0.4, 1),
              --btn-sx 600ms cubic-bezier(0.33, 0, 0.4, 1),
              --btn-sy 600ms cubic-bezier(0.33, 0, 0.4, 1),
              --btn-glx 600ms cubic-bezier(0.33, 0, 0.4, 1),
              --btn-gly 600ms cubic-bezier(0.33, 0, 0.4, 1);
}
.btn-glow:hover .btn-glow__stroke {
  --btn-sx: 75%;
  --btn-sy: 181%;
}
.btn-glow:hover .btn-glow__glow {
  --btn-glx: 50%;
  --btn-gly: 100%;
}
.btn-glow:hover .btn-glow__icon-track {
  transform: translateY(-14px);
}
.btn-glow:focus-visible {
  outline: 2px solid var(--btn-accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .btn-glow,
  .btn-glow__stroke,
  .btn-glow__glow,
  .btn-glow__icon-track {
    animation: none;
    transition: none;
  }
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--accent);
  text-decoration: none;
  font-size: var(--text-md);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out-expo);
}
.btn-ghost:hover { border-color: var(--accent); }
.btn-ghost::after {
  content: "→";
  transition: transform var(--dur-fast) var(--ease-out-expo);
}
.btn-ghost:hover::after { transform: translateX(3px); }

/* ---- Bullet list ---- */

.bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.bullet-list li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
  color: var(--muted-75);
  font-size: var(--text-md);
  line-height: 1.55;
}
.bullet-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* ---- Accent surface (pull quote / callout) ---- */

.accent-surface {
  padding: var(--space-6);
  background: var(--accent-tint);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-md);
  color: var(--muted-75);
  font-size: var(--text-md);
  line-height: 1.6;
}
.accent-surface strong { color: var(--fg); font-weight: 500; }

/* ---- Logo strip (heritage clients on About page) ----
   Image-based. Each logo SVG sits in its own padded item. Logos render in white
   via filter (so any-color source SVG becomes consistent white on the dark bg). */

.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-7) var(--space-9);
  padding: var(--space-7) 0 var(--space-3);
}
.logo-strip__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out-expo), transform var(--dur-base) var(--ease-out-expo);
}
.logo-strip__item img {
  height: 100%;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.78);
  transition: filter var(--dur-base) var(--ease-out-expo);
}
.logo-strip__item:hover img { filter: brightness(0) invert(1) opacity(1); }

.in-view .logo-strip__item { opacity: 1; transform: translateY(0); }
.in-view .logo-strip__item:nth-child(1) { transition-delay: 0.00s; }
.in-view .logo-strip__item:nth-child(2) { transition-delay: 0.06s; }
.in-view .logo-strip__item:nth-child(3) { transition-delay: 0.12s; }
.in-view .logo-strip__item:nth-child(4) { transition-delay: 0.18s; }
.in-view .logo-strip__item:nth-child(5) { transition-delay: 0.24s; }
.in-view .logo-strip__item:nth-child(6) { transition-delay: 0.30s; }
.in-view .logo-strip__item:nth-child(7) { transition-delay: 0.36s; }
.in-view .logo-strip__item:nth-child(8) { transition-delay: 0.42s; }

/* ---- Hero variant (top section, sits under fixed header) ---- */

main.page > section.hero {
  padding-top: calc(var(--space-12) + 64px);
  padding-bottom: var(--space-12);
}
main.page > section.hero .wrap {
  text-align: center;
}
main.page > section.hero h1.display {
  margin: 0 auto var(--space-5);
  max-width: 22ch;
  font-size: var(--text-6xl);
  line-height: 1.05;
}
main.page > section.hero .lede {
  margin: 0 auto;
  max-width: 56ch;
  text-align: center;
}

/* Mobile hero scale: 48px is too big at narrow viewports, wraps every word.
   Drop to 32px (--text-4xl) at <810px. Section headers also scaled. */
@media (max-width: 809.98px) {
  main.page > section.hero {
    padding-top: calc(var(--space-9) + 64px);
    padding-bottom: var(--space-9);
  }
  main.page > section.hero h1.display {
    font-size: var(--text-4xl);
    max-width: none;
  }
  main.page > section.hero .lede {
    font-size: var(--text-lg);
  }
  .section-header {
    font-size: var(--text-3xl);
  }
}

/* ---- Stage tracks (Pre-AI / Post-AI dual columns on industry pages) ---- */

.stage-tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-7);
}
@media (max-width: 810px) {
  .stage-tracks { grid-template-columns: 1fr; }
}

.stage-track {
  padding: var(--space-7);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color var(--dur-base) var(--ease-out-expo), background var(--dur-base) var(--ease-out-expo);
}
.stage-track.pre-ai {
  border-left: 2px solid var(--accent-violet);
  background: var(--accent-violet-tint);
}
.stage-track.post-ai {
  border-left: 2px solid var(--accent-cyan);
  background: var(--accent-cyan-tint);
}
.stage-track:hover { background: rgba(255, 255, 255, 0.04); }
.stage-track.pre-ai:hover { background: rgba(91, 113, 235, 0.14); }
.stage-track.post-ai:hover { background: rgba(51, 194, 255, 0.14); }

.stage-track__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.stage-track.pre-ai .stage-track__label { color: var(--accent-violet); }
.stage-track.post-ai .stage-track__label { color: var(--accent-cyan); }

.stage-track__heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 var(--space-4);
  max-width: 24ch;
}

.stage-track__body {
  color: var(--muted-75);
  font-size: var(--text-md);
  line-height: 1.6;
  margin: 0 0 var(--space-5);
}

.stage-track__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-md);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out-expo);
}
.stage-track.pre-ai .stage-track__link { color: var(--accent-violet); }
.stage-track.post-ai .stage-track__link { color: var(--accent-cyan); }
.stage-track.pre-ai:hover .stage-track__link { border-color: var(--accent-violet); }
.stage-track.post-ai:hover .stage-track__link { border-color: var(--accent-cyan); }
.stage-track__link::after {
  content: "→";
  transition: transform var(--dur-fast) var(--ease-out-expo);
}
.stage-track:hover .stage-track__link::after { transform: translateX(3px); }

/* ---- Form fields (Contact page) ---- */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  max-width: 640px;
}
.form-field.full { grid-column: 1 / -1; }
.form-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-2);
}
.form-input,
.form-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.5;
  transition: border-color var(--dur-fast) var(--ease-out-expo), background var(--dur-fast) var(--ease-out-expo);
}
.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.04);
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--muted-70); }
.form-textarea { min-height: 140px; resize: vertical; font-family: inherit; }

.form-actions { margin-top: var(--space-6); }

/* ---- Calendly embed wrapper ---- */

.calendly-wrap {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-2xl);
  padding: var(--space-3);
  background: rgba(255, 255, 255, 0.02);
}
.calendly-inline-widget {
  min-width: 320px;
  height: 700px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ---- Contact methods row ---- */

.contact-methods {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7);
  margin-top: var(--space-7);
}
.contact-methods__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.contact-methods__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-methods__value {
  color: var(--accent);
  text-decoration: none;
  font-size: var(--text-md);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out-expo);
}
.contact-methods__value:hover { border-color: var(--accent); }

/* Note: site-wide final CTA is the extracted homepage CTA (site/_partials/cta.html)
   spliced into base.html. Pages do NOT need a custom CTA section. */

/* ---- Scroll-reveal fade-in for section headers / body blocks ---- */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-base) var(--ease-out-expo), transform var(--dur-base) var(--ease-out-expo);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* =============================================================
 * HOMEPAGE-SPECIFIC SECTIONS
 * ============================================================= */

/* ---- Hero (home) ---- */

main.page > section.hero-home {
  position: relative;
  padding: 140px 40px 80px;    /* horizontal padding matches the header (.site-header: 20px 40px) so hero copy aligns with the nav pill */
  overflow: hidden;
  min-height: 100vh;           /* 1:1 with Framer (was 92vh — hero was 72px short) */
  display: flex;
  align-items: center;
  isolation: isolate;
}
/* Override the default .wrap max-width inside the hero so the headline
   spans the full content area like Framer's 1224px-wide H1.
   `width: 100%` is required because the hero section is display:flex —
   flex children otherwise shrink to their content width, ignoring the
   max-width budget. */
main.page > section.hero-home .wrap.hero-home__inner {
  max-width: 1200px;          /* = .site-header__pill max-width, so the hero grid aligns with the nav at every viewport */
  width: 100%;
}
/* Atmospheric backdrop PNG — full-bleed, pinned to top of section. Bakes in
   the warm orange halo + cyan flares that the Framer hero is built around.
   Sphere sits in front; content sits in front of both. */
.hero-home__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-home__backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* Sun-glow stack — three circular conic-gradients, heavily blurred, behind
   the sphere. Extracted 1:1 from Framer hero effects 3/2/1. The wrapper
   centers the stack around (vw/2, ~513) on a 1440 viewport, matching the
   measured Framer glow center. Sits above the column-grid backdrop, below
   the sphere. Circle sizes are the actual rendered diameters — the blur
   filter expands the visible halo well beyond these boxes. */
.hero-home__glow {
  position: absolute;
  top: 213px;            /* + 300 (half wrapper) = 513, matches Framer center */
  left: 50%;
  transform: translateX(-50%);
  width: 600px;          /* roomy wrapper so blur halo isn't clipped */
  height: 600px;
  z-index: 0;
  pointer-events: none;
  isolation: isolate;
  overflow: visible;
}
.hero-home__glow > div {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  /* GPU-promote so the rotation animation runs smoothly without repainting. */
  will-change: transform;
}
/* All three layers rotate CLOCKWISE at different speeds so the conic banding
   smears into a flowing wash and the orb reads as living rather than static.
   The wrapper independently pulsates (slow scale breathe) so the whole stack
   feels organic. Opacities are toned down so the headline remains readable
   over the orb — the bright sun-core was overwhelming the copy. */
.hero-home__glow {
  animation: glowPulse 6s ease-in-out infinite;
  transform-origin: center;
}
.hero-home__glow-3 {
  /* Back layer — multicolor conic. Largest, most blurred — soft outer halo. */
  width: 402px; height: 402px;
  margin: -201px 0 0 -201px;
  background: conic-gradient(
    rgb(0, 51, 255) 0deg,
    rgb(0, 51, 255) 54.89deg,
    rgb(0, 166, 255) 106.7deg,
    rgb(71, 151, 255) 162deg,
    rgb(0, 68, 255) 252deg,
    rgb(255, 128, 0) 306deg,
    rgb(208, 69, 255) 360deg);
  filter: blur(70px);
  opacity: 0.55;             /* was 0.8 — toned down so headline reads */
  animation: glowSpin 40s linear infinite;
}
.hero-home__glow-2 {
  width: 409px; height: 409px;
  margin: -204.5px 0 0 -204.5px;
  background: conic-gradient(
    rgb(255, 255, 255) 0deg,
    rgb(255, 242, 0) 180deg,
    rgb(255, 0, 0) 360deg);
  filter: blur(32px);
  opacity: 0.45;             /* was 1 — biggest reduction; the white/yellow
                                core was the brightest layer blocking text */
  animation: glowSpin 60s linear infinite;    /* clockwise now (was reverse) */
}
.hero-home__glow-1 {
  width: 379px; height: 379px;
  margin: -189.5px 0 0 -189.5px;
  background: conic-gradient(
    rgb(255, 107, 74) 0deg,
    rgb(255, 61, 18) 180deg,
    rgb(255, 107, 74) 360deg);
  filter: blur(32px);
  opacity: 0.60;             /* was 1 — warm coral toned down */
  animation: glowSpin 50s linear infinite;
}
@keyframes glowSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes glowPulse {
  0%, 100% { transform: translateX(-50%) scale(1);    }
  50%      { transform: translateX(-50%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-home__glow,
  .hero-home__glow-3,
  .hero-home__glow-2,
  .hero-home__glow-1 { animation: none; }
}
@media (max-width: 809.98px) {
  .hero-home__glow { width: 60vw; height: 60vw; top: 200px; }
  .hero-home__glow-3,
  .hero-home__glow-2,
  .hero-home__glow-1 { width: 100%; height: 100%; margin: -50% 0 0 -50%; }
}
.hero-home__sphere {
  position: absolute;
  top: 185px;          /* 1:1 with Framer (sphere top at y=185 on 1440 viewport) */
  left: 50%;
  transform: translateX(-50%);
  width: 557px;        /* 1:1 with Framer (sphere is 557×575 at this width) */
  height: auto;
  pointer-events: none;
  z-index: 1;
  animation: heroSphereDrift 16s ease-in-out infinite alternate;
  will-change: transform;
}
@media (max-width: 809.98px) {
  .hero-home__sphere { width: 72vw; top: 100px; }
}
.hero-home__sphere img {
  width: 100%;
  height: auto;
  display: block;
}
@keyframes heroSphereDrift {
  0%   { transform: translateX(-50%) rotate(0deg) scale(1); }
  100% { transform: translateX(-50%) rotate(2deg) scale(1.02); }
}

.hero-home__inner {
  position: relative;
  z-index: 2;
  text-align: center;
}

.hero-home__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-7);
}
.hero-home__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.3); }
}

main.page > section.hero-home h1.display.hero-home__h1 {
  margin: 0 auto var(--space-5);
  max-width: none;             /* let H1 span full container */
  /* Larger than Framer's 56px because mine has shorter copy — bigger font
     keeps the same visual presence on screen. Scales up generously on
     larger viewports. */
  font-size: clamp(48px, 5.5vw, 80px);
  line-height: 0.95;
}
main.page > section.hero-home .hero-home__sub {
  margin: 0 auto var(--space-7);
  max-width: 820px;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  text-align: center;
}
.hero-home__cta { display: inline-block; }

/* ---- Split hero variant: copy left · living orb right ---- */
main.page > section.hero-home.hero-home--split .wrap.hero-home__inner {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: 56px;
  align-items: center;
  text-align: left;
}
.hero-home--split .hero-home__copy { position: relative; }
main.page > section.hero-home.hero-home--split h1.display.hero-home__h1 {
  margin: 0 0 var(--space-5);
  max-width: 15ch;
  font-size: clamp(40px, 4.2vw, 62px);
  line-height: 1.0;
  text-align: left;
}
main.page > section.hero-home.hero-home--split .hero-home__sub {
  margin: 0 0 var(--space-7);
  max-width: 46ch;
  font-size: clamp(17px, 1.4vw, 20px);
  text-align: left;
}
.hero-home--split .hero-home__orb-col {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.hero-home--split .hero-home__orb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; z-index: 1; pointer-events: none;
}
.hero-home--split .hero-home__orb-glow {
  position: absolute; left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  width: 104%; height: 104%;
  border-radius: 50%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 50% 62%, rgba(229,137,75,.30), rgba(229,137,75,.06) 36%, transparent 60%),
    radial-gradient(circle at 50% 26%, rgba(106,168,255,.16), transparent 46%);
  filter: blur(28px);
}
@media (max-width: 860px) {
  main.page > section.hero-home.hero-home--split .wrap.hero-home__inner {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }
  .hero-home--split .hero-home__copy { order: 2; }
  .hero-home--split .hero-home__orb-col { order: 1; width: min(440px, 82vw); margin: 0 auto; }
  main.page > section.hero-home.hero-home--split h1.display.hero-home__h1 {
    max-width: none; text-align: center;
  }
  main.page > section.hero-home.hero-home--split .hero-home__sub {
    max-width: 52ch; margin-left: auto; margin-right: auto; text-align: center;
  }
}


/* ---- Ticker marquee (Section 02) ---- */

main.page > section.ticker-section {
  padding: var(--space-9) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.01);
}
/* Container caps the marquee at content width — matches Framer's contained
   marquee instead of full-bleed. */
.ticker {
  position: relative;
  overflow: hidden;
  max-width: 1264px; /* 1200 content + 2×32 padding, so it aligns with .wrap sections */
  margin: 0 auto;
  padding: 0 var(--space-7);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.ticker__track {
  display: flex;
  gap: var(--space-12);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
  animation: tickerScroll 32s linear infinite;
  will-change: transform;
}
.ticker__track li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 40px;
}
.ticker__track li img {
  height: 100%;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.78);
  transition: filter var(--dur-base) var(--ease-out-expo);
}
.ticker__track li:hover img { filter: brightness(0) invert(1) opacity(1); }
@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}


/* ---- Shared large section header (used by Our Approach, Solutions, Impact) ---- */

.section-header--lg {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.12;
  max-width: 24ch;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-7);
}
.accent-text { color: var(--accent); font-style: italic; font-weight: 400; }


/* ---- Solutions grid (Section 04, 4 cards per spec) ---- */

main.page > section.solutions {
  padding: var(--space-12) var(--space-7);
  border-top: 1px solid var(--hairline);
}

.industries-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-7) 0 var(--space-9);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-75);
}
.industries-strip__label {
  font-style: italic;
  color: var(--muted-70);
  margin-right: var(--space-2);
}
.industries-strip__sep { color: var(--hairline); }
.industries-strip__industry { color: var(--fg); text-decoration: none; transition: color var(--dur-fast) var(--ease-out-expo); }
.industries-strip__industry:hover { color: var(--accent); }
.industries-strip__industry--muted { color: var(--muted-70); pointer-events: none; }

.solutions__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 809.98px) {
  .solutions__grid { grid-template-columns: 1fr; }
}

.solution-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-7);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-2xl);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out-expo), background var(--dur-base) var(--ease-out-expo);
  min-height: 280px;
  overflow: hidden;
}
.solution-card:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
}

/* Decorative glyph in the top-right corner — distinct geometric form per
   solution (hierarchy / stack / workflow / network). Subdued at rest, the
   accent color brightens on hover and individual elements lift slightly to
   suggest the Raycast-style "exploded depth" feel without four custom
   illustrations. */
.solution-card__glyph {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  width: 90px;
  height: auto;
  pointer-events: none;
  color: var(--muted-50);
  transition: color var(--dur-base) var(--ease-out-expo);
}
.solution-card:hover .solution-card__glyph { color: var(--accent); }

.solution-card__glyph .glyph-node {
  fill: currentColor;
  transition:
    transform var(--dur-slow) var(--ease-out-expo),
    fill var(--dur-base) var(--ease-out-expo);
  transform-box: fill-box;
  transform-origin: center;
}
.solution-card__glyph .glyph-node--root {
  fill: var(--accent);
}
.solution-card__glyph .glyph-line,
.solution-card__glyph .glyph-slab,
.solution-card__glyph .glyph-diamond {
  transition: stroke var(--dur-base) var(--ease-out-expo);
}

/* On hover: nodes radiate slightly outward */
.solution-card:hover .solution-card__glyph .glyph-node { transform: scale(1.18); }
.solution-card:hover .solution-card__glyph .glyph-node--root { transform: scale(1.4); }
.solution-card:hover .solution-card__glyph .glyph-line { stroke-opacity: 1; }

/* Reduced-motion: snap to final pose without transitions */
@media (prefers-reduced-motion: reduce) {
  .solution-card__glyph,
  .solution-card__glyph * {
    transition: none !important;
  }
}

/* =============================================================
 * Solution card — full-width illustration strip (option C)
 * ============================================================
 * Applied per-card via .solution-card--strip as each illustration
 * is finalized. The strip breaks out of the card padding via
 * negative margins and renders edge-to-edge across the card top.
 */
.solution-card--strip { min-height: 620px; }

/* ---- Card 1 · Operational AI Systems — OpsAgent Console (v2) ----
   Stylized product UI scene with 4 simultaneous motion layers:
   case feed scroll, metrics ticker, status pulses, breathing glow. */

.ops-console {
  --console-pad: 14px;
  --row-h: 30px;
  --visible-rows: 4;
  --stream-cycle: 30s;          /* 10 rows × 3s */
  --label-color: rgba(255, 255, 255, 0.45);
  --ok-color: var(--accent);
  --alert-color: #ff7a7a;
  --live-color: #4ade80;
  position: relative;
  display: block;
  width: calc(100% + var(--space-7) * 2);
  margin: calc(var(--space-7) * -1) calc(var(--space-7) * -1) var(--space-6);
  padding: 28px;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
  isolation: isolate;
  pointer-events: none;
  font-family: var(--font-sans);
}

/* Layer 0: ambient background — radial accent glow + dot grid */
.ops-console__glow {
  position: absolute;
  inset: -10%;
  background: radial-gradient(45% 55% at 50% 55%, var(--accent-tint) 0%, transparent 70%);
  opacity: 0.85;
  animation: ops-glow-breathe 4.5s ease-in-out infinite;
  z-index: -1;
}
.ops-console__grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 14px 14px;
  mask-image: radial-gradient(70% 65% at 50% 50%, black, transparent 95%);
  z-index: -1;
}
@keyframes ops-glow-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.05); }
}

/* Console panel */
.ops-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  border: 1px solid rgba(106, 168, 255, 0.22);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted-75);
}

/* Header bar */
.ops-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ops-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ops-brand__name {
  font-weight: 600;
  color: var(--fg);
  font-size: 12px;
  letter-spacing: -0.005em;
}
.ops-brand__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live-color);
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
  animation: ops-pulse-live 2s ease-in-out infinite;
}
.ops-brand__label {
  font-size: 10px;
  color: var(--muted-70);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
@keyframes ops-pulse-live {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.1); }
}

.ops-filters {
  display: inline-flex;
  gap: 4px;
}
.ops-filter {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
  color: var(--muted-70);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.ops-filter.is-active {
  color: var(--accent);
  background: var(--accent-tint);
  border-color: rgba(106, 168, 255, 0.28);
}

/* Body: two columns — stream + metrics */
.ops-panel__body {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 0;
  flex: 1;
  min-height: 0;
}

.ops-section-label,
.ops-section-label--inline {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label-color);
  margin-bottom: 8px;
}
.ops-section-label--inline {
  display: inline-block;
  margin: 0 10px 0 0;
}

/* Stream column */
.ops-stream {
  padding: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ops-stream__window {
  position: relative;
  height: calc(var(--row-h) * var(--visible-rows));
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
}
.ops-stream__track {
  display: flex;
  flex-direction: column;
  animation: ops-stream-scroll var(--stream-cycle) cubic-bezier(0.7, 0, 0.3, 1) infinite;
  will-change: transform;
}

.ops-case {
  display: grid;
  grid-template-columns: 14px minmax(0, auto) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  height: var(--row-h);
  padding: 0 4px;
  font-size: 11px;
  color: var(--muted-75);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.ops-case__icon {
  width: 12px;
  height: 12px;
  fill: var(--muted-70);
  color: var(--muted-70);
  opacity: 0.7;
}
.ops-case__id {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.ops-case__desc {
  font-size: 10.5px;
  color: var(--muted-70);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ops-case__time {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--muted-70);
  opacity: 0.7;
  letter-spacing: 0.02em;
}

/* Status pills */
.ops-pill {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.ops-pill--ok      { color: var(--ok-color);    background: var(--accent-tint);              border-color: rgba(106,168,255,0.28); }
.ops-pill--routing { color: var(--muted-75);    background: rgba(255,255,255,0.04);          border-color: rgba(255,255,255,0.10); }
.ops-pill--alert   { color: var(--alert-color); background: rgba(255, 122, 122, 0.10);       border-color: rgba(255, 122, 122, 0.28); }

/* Scroll animation: dwell 2.7s, slide 0.3s — repeated 10 times across 30s.
   Each 10% of the keyframe = 3s (1 row cycle); the slide happens in the
   final 1% of each segment. */
@keyframes ops-stream-scroll {
  0%,  9% { transform: translateY(0); }
  10%, 19% { transform: translateY(calc(var(--row-h) * -1)); }
  20%, 29% { transform: translateY(calc(var(--row-h) * -2)); }
  30%, 39% { transform: translateY(calc(var(--row-h) * -3)); }
  40%, 49% { transform: translateY(calc(var(--row-h) * -4)); }
  50%, 59% { transform: translateY(calc(var(--row-h) * -5)); }
  60%, 69% { transform: translateY(calc(var(--row-h) * -6)); }
  70%, 79% { transform: translateY(calc(var(--row-h) * -7)); }
  80%, 89% { transform: translateY(calc(var(--row-h) * -8)); }
  90%, 99% { transform: translateY(calc(var(--row-h) * -9)); }
  100%     { transform: translateY(calc(var(--row-h) * -10)); }
}

/* Metrics column */
.ops-metrics {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.ops-metrics__hero {
  margin-bottom: 4px;
}
.ops-metrics__hero-label {
  font-size: 10px;
  color: var(--muted-70);
  margin-top: 2px;
}

/* Ticker — stacked values, one visible at a time */
.ops-ticker {
  position: relative;
  height: 30px;
  overflow: hidden;
  display: inline-flex;
  align-items: flex-end;
}
.ops-ticker--small { height: 14px; }

.ops-ticker__track {
  display: flex;
  flex-direction: column;
  animation: ops-ticker-cycle 25s steps(10, jump-none) infinite;
}
.ops-ticker__track span {
  display: block;
  height: 30px;
  line-height: 30px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.02em;
}
.ops-ticker--small .ops-ticker__track span {
  height: 14px;
  line-height: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.ops-ticker__track--pct span { color: var(--accent); }
.ops-ticker__track--sec span { color: var(--fg); }

@keyframes ops-ticker-cycle {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-300px); }   /* 10 steps × 30px */
}

/* The small tickers cycle their own track height */
.ops-ticker--small .ops-ticker__track {
  animation: ops-ticker-small-cycle 20s steps(10, jump-none) infinite;
}
@keyframes ops-ticker-small-cycle {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-140px); }   /* 10 steps × 14px */
}

/* Stat row */
.ops-stat { display: flex; flex-direction: column; gap: 4px; }
.ops-stat__row {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.ops-stat__val {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--fg);
}
.ops-stat__lbl {
  font-size: 10px;
  color: var(--muted-70);
}

/* Progress bar */
.ops-bar {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
}
.ops-bar__fill {
  width: 94%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), rgba(106, 168, 255, 0.5));
  animation: ops-bar-shift 20s ease-in-out infinite;
}
@keyframes ops-bar-shift {
  0%, 100% { width: 94%; }
  35%      { width: 93%; }
  65%      { width: 95%; }
}

/* Footer integration strip */
.ops-panel__foot {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.015);
}
.ops-integrations {
  display: inline-flex;
  gap: 14px;
  align-items: center;
}
.ops-int {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--muted-70);
}
.ops-int svg {
  width: 13px;
  height: 13px;
  color: var(--muted-70);
}
.ops-int__label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
}
.ops-int__pulse {
  position: absolute;
  top: -2px;
  right: -6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  animation: ops-int-pulse 3.5s ease-in-out infinite;
  animation-delay: var(--int-delay, 0s);
  box-shadow: 0 0 4px rgba(106, 168, 255, 0.6);
}
@keyframes ops-int-pulse {
  0%, 70%, 100% { opacity: 0; transform: scale(0.6); }
  8%, 16%       { opacity: 0.9; transform: scale(1); }
}

/* Reduced motion: freeze everything to a static "snapshot" of the scene */
@media (prefers-reduced-motion: reduce) {
  .ops-console *,
  .ops-console *::before,
  .ops-console *::after {
    animation: none !important;
    transition: none !important;
  }
  .ops-stream__track { transform: translateY(0); }
}

/* ---- Card 2 · Autonomous Systems — Multi-Agent Workspace ----
   Mirrors Card 1's console shell (background grid, glow, panel chrome,
   section labels, status pills, tickers) with card-scoped .agent-*
   prefix. Card 1 stays untouched. */

.agent-console {
  --agent-cycle: 5s;
  --label-color: rgba(255, 255, 255, 0.45);
  --ok-color: var(--accent);
  --alert-color: #ff7a7a;
  --live-color: #4ade80;
  position: relative;
  display: block;
  width: calc(100% + var(--space-7) * 2);
  margin: calc(var(--space-7) * -1) calc(var(--space-7) * -1) var(--space-6);
  padding: 28px;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
  isolation: isolate;
  pointer-events: none;
  font-family: var(--font-sans);
}

.agent-console__glow {
  position: absolute;
  inset: -10%;
  background: radial-gradient(45% 55% at 50% 55%, var(--accent-tint) 0%, transparent 70%);
  opacity: 0.85;
  animation: agent-glow-breathe 4.5s ease-in-out infinite;
  z-index: -1;
}
.agent-console__grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 14px 14px;
  mask-image: radial-gradient(70% 65% at 50% 50%, black, transparent 95%);
  z-index: -1;
}
@keyframes agent-glow-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.05); }
}

.agent-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  border: 1px solid rgba(106, 168, 255, 0.22);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted-75);
}

/* Header bar */
.agent-panel__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.agent-brand__name {
  font-weight: 600;
  color: var(--fg);
  font-size: 12px;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.agent-task {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 6px;
  align-items: center;
  min-width: 0;
}
.agent-task__label {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label-color);
}
.agent-task__id {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted-75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-task__bar {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 4px;
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
}
.agent-task__bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), rgba(106, 168, 255, 0.5));
  animation: agent-task-fill var(--agent-cycle) ease-out infinite;
}
@keyframes agent-task-fill {
  0%   { width: 0%; }
  90%  { width: 100%; }
  100% { width: 100%; }
}

.agent-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(106, 168, 255, 0.28);
  background: var(--accent-tint);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--accent);
  white-space: nowrap;
}
.agent-status__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 5px rgba(106, 168, 255, 0.6);
  animation: agent-status-pulse 1.5s ease-in-out infinite;
}
@keyframes agent-status-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* Section labels (shared with Card 1 pattern) */
.agent-section-label,
.agent-section-label--inline {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label-color);
  margin-bottom: 8px;
}
.agent-section-label--inline { display: inline-block; margin: 0 12px 0 0; }

/* Body: agent grid + reasoning trace */
.agent-panel__body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

/* === Agent grid === */
.agent-grid {
  position: relative;
  padding: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 0;
}
.agent-grid__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Connection lines behind the cards */
.agent-connections {
  position: absolute;
  inset: 18px 4px 4px 4px;
  width: calc(100% - 8px);
  height: calc(100% - 22px);
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
.agent-conn {
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke;
  animation: agent-conn-flash var(--agent-cycle) linear infinite;
}
.agent-conn--n1 { animation-delay: 0s; }              /* TL→TR handoff */
.agent-conn--n2 { animation-delay: calc(var(--agent-cycle) * -0.25); } /* TR→BR */
.agent-conn--n3 { animation-delay: calc(var(--agent-cycle) * -0.5); }  /* BR→BL */
.agent-conn--n4 { animation-delay: calc(var(--agent-cycle) * -0.75); } /* BL→TL */
@keyframes agent-conn-flash {
  0%, 100% { stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; stroke-dasharray: 2 3; }
  4%       { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 1 0; }
  10%      { stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; stroke-dasharray: 2 3; }
}

.agent-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  min-width: 0;
}
.agent-card__name {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.agent-card__desc {
  font-size: 9.5px;
  color: var(--muted-70);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-card__pills {
  position: relative;
  height: 18px;
  margin-top: 2px;
}

/* Each agent has all 4 pills layered; opacity keyframes show one at a time
   in a 5s cycle (1.25s per state). --agent-delay staggers per-agent so the
   2x2 grid is always in mixed states. */
.agent-pill {
  position: absolute;
  inset: 0 auto 0 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  opacity: 0;
  animation-duration: var(--agent-cycle);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: var(--agent-delay, 0s);
}
.agent-pill--idle     { color: var(--muted-70);    background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); animation-name: agent-show-idle; }
.agent-pill--thinking { color: var(--muted-75);    background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); animation-name: agent-show-thinking; }
.agent-pill--acting   { color: var(--fg);          background: var(--accent);          border-color: var(--accent);          animation-name: agent-show-acting; }
.agent-pill--done     { color: var(--ok-color);    background: var(--accent-tint);     border-color: rgba(106,168,255,0.28); animation-name: agent-show-done; }

/* Each pill visible for 25% of cycle: Idle 0-25%, Thinking 25-50%, Acting 50-75%, Done 75-100% */
@keyframes agent-show-idle     { 0%, 24%  { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes agent-show-thinking { 0%, 24%  { opacity: 0; } 25%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes agent-show-acting   { 0%, 49%  { opacity: 0; } 50%, 74% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes agent-show-done     { 0%, 74%  { opacity: 0; } 75%, 100% { opacity: 1; } }

/* Acting pulses brighter */
.agent-pill--acting {
  animation-name: agent-show-acting, agent-acting-pulse;
  animation-duration: var(--agent-cycle), 0.7s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-delay: var(--agent-delay, 0s), var(--agent-delay, 0s);
}
@keyframes agent-acting-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(106, 168, 255, 0); }
  50%      { box-shadow: 0 0 8px 1px rgba(106, 168, 255, 0.45); }
}

/* Thinking dots */
.agent-pill--thinking i {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  animation: agent-thinking-dot 1s ease-in-out infinite;
}
.agent-pill--thinking i:nth-child(2) { animation-delay: 0.15s; }
.agent-pill--thinking i:nth-child(3) { animation-delay: 0.30s; }
@keyframes agent-thinking-dot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
  40%           { opacity: 1;   transform: scale(1.1); }
}

/* === Reasoning trace === */
.agent-trace {
  padding: 12px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.agent-trace__window {
  position: relative;
  height: 168px;          /* 7 rows × 24px — fixed to clip the 504px-tall track */
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}
.agent-trace__track {
  display: grid;
  grid-auto-rows: 24px;
  animation: agent-trace-scroll 10s linear infinite;
  will-change: transform;
}
.agent-trace__line {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 0 2px;
  height: 24px;
  font-size: 10px;
  line-height: 1.2;
  color: var(--muted-70);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
}
.agent-trace__ts {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.agent-trace__src {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted-75);
  letter-spacing: 0.01em;
}
.agent-trace__arrow {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted-70);
  opacity: 0.7;
}
.agent-trace__msg {
  font-size: 10px;
  color: var(--muted-75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Track scroll: 14 lines × ~24px = ~336px translated over 10s. Line height
   is calc(line-height + padding + border) — let CSS compute via translateY
   of one row-height per step. Row height target: 24px. */
@keyframes agent-trace-scroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(calc(-24px * 14)); }
}

/* === Footer throughput strip === */
.agent-panel__foot {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.015);
  gap: 12px;
  flex-wrap: wrap;
}
.agent-throughput {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.agent-stat {
  font-size: 10px;
  color: var(--muted-70);
  white-space: nowrap;
}
.agent-stat b {
  font-weight: 600;
  color: var(--fg);
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .agent-console *,
  .agent-console *::before,
  .agent-console *::after {
    animation: none !important;
    transition: none !important;
  }
  .agent-trace__track { transform: translateY(0); }
  /* Show all pills at rest = pick one canonical state per agent */
  .agent-pill--idle     { opacity: 1; }
  .agent-pill--thinking { opacity: 0; }
  .agent-pill--acting   { opacity: 0; }
  .agent-pill--done     { opacity: 0; }
}

/* ---- Card 3 · AI Strategy & Enablement — Opportunity Map ----
   Same console shell pattern (background grid, glow, panel chrome).
   Primary motion: ROI projection line draws across the roadmap, milestone
   markers light up in sequence as the line passes each one. */

.opp-console {
  --opp-cycle: 6s;
  --label-color: rgba(255, 255, 255, 0.45);
  --ok-color: var(--accent);
  --live-color: #4ade80;
  position: relative;
  display: block;
  width: calc(100% + var(--space-7) * 2);
  margin: calc(var(--space-7) * -1) calc(var(--space-7) * -1) var(--space-6);
  padding: 28px;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
  isolation: isolate;
  pointer-events: none;
  font-family: var(--font-sans);
}

.opp-console__glow {
  position: absolute;
  inset: -10%;
  background: radial-gradient(45% 55% at 50% 55%, var(--accent-tint) 0%, transparent 70%);
  opacity: 0.85;
  animation: opp-glow-breathe 4.5s ease-in-out infinite;
  z-index: -1;
}
.opp-console__grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 14px 14px;
  mask-image: radial-gradient(70% 65% at 50% 50%, black, transparent 95%);
  z-index: -1;
}
@keyframes opp-glow-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.05); }
}

.opp-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  border: 1px solid rgba(106, 168, 255, 0.22);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted-75);
}

/* Header */
.opp-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}
.opp-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.opp-brand__name {
  font-weight: 600;
  color: var(--fg);
  font-size: 12px;
  letter-spacing: -0.005em;
}
.opp-brand__sep   { color: var(--muted-70); opacity: 0.5; }
.opp-brand__client {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted-75);
  letter-spacing: 0.02em;
}
.opp-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted-70);
}
.opp-summary__sep { opacity: 0.5; }
.opp-summary__count b { color: var(--fg); font-weight: 600; }
.opp-summary__count--accent b { color: var(--accent); }

/* Section labels */
.opp-section-label,
.opp-section-label--inline {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label-color);
  margin-bottom: 8px;
}
.opp-section-label--inline { display: inline-block; margin: 0 12px 0 0; }

/* Body */
.opp-panel__body {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: stretch;
  flex: 1;
}

/* === Use case list === */
.opp-list {
  padding: 12px 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 0;
}
.opp-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto auto auto;
  align-items: center;
  column-gap: 5px;
  padding: 6px 4px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
  height: 28px;
  font-size: 10.5px;
  color: var(--muted-75);
  animation: opp-row-spotlight var(--opp-cycle) ease-in-out infinite;
  animation-delay: calc(var(--row-i, 0) * 1.05s - 0.25s); /* sync with milestone hits */
  border-radius: 4px;
}
.opp-rank {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.opp-name {
  font-size: 10.5px;
  color: var(--fg);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opp-roi {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted-70);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.opp-roi small {
  font-size: 8.5px;
  opacity: 0.6;
  margin-left: 1px;
}
.opp-roi--high { color: var(--accent); }
.opp-q {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--muted-70);
  letter-spacing: 0.04em;
  opacity: 0.8;
}
.opp-pill {
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 8.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.opp-pill--ready   { color: var(--accent);   background: var(--accent-tint);             border-color: rgba(106,168,255,0.28); }
.opp-pill--scoping { color: var(--muted-75); background: rgba(255,255,255,0.06);         border-color: rgba(255,255,255,0.14); }
.opp-pill--id      { color: var(--muted-70); background: rgba(255,255,255,0.03);         border-color: rgba(255,255,255,0.08); }

/* Row spotlight: brief background highlight when "its" milestone fires */
@keyframes opp-row-spotlight {
  0%, 5%, 18%, 100% { background: transparent; }
  10%               { background: rgba(106, 168, 255, 0.08); }
}

.opp-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 4px 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--muted-70);
  letter-spacing: 0.02em;
}
.opp-more__chev { color: var(--accent); }

/* === Roadmap chart === */
.opp-roadmap {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.opp-chart {
  position: relative;
  flex: 1;
  min-height: 160px;
}
.opp-chart__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Chart elements */
.opp-axis-label {
  font-family: var(--font-mono);
  font-size: 7px;
  fill: var(--muted-70);
  letter-spacing: 0.05em;
  opacity: 0.7;
}
.opp-gridlines line {
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 1;
  stroke-dasharray: 1 3;
  vector-effect: non-scaling-stroke;
}
.opp-baseline {
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.opp-q-labels text {
  font-family: var(--font-mono);
  font-size: 7px;
  fill: var(--muted-70);
  letter-spacing: 0.06em;
}

/* ROI projection line — animated draw-in.
   Path total length ≈ 193 user units.
   stroke-dasharray sets a single dash covering the path; dashoffset starts
   equal to the dasharray and animates to 0 (line "draws" left → right). */
.opp-roi-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  filter: drop-shadow(0 0 3px rgba(106, 168, 255, 0.45));
  animation: opp-roi-draw var(--opp-cycle) ease-in-out infinite;
}
@keyframes opp-roi-draw {
  0%   { stroke-dashoffset: 200; opacity: 0.9; }
  67%  { stroke-dashoffset: 0;   opacity: 1; }
  83%  { stroke-dashoffset: 0;   opacity: 1; }
  95%  { stroke-dashoffset: 0;   opacity: 0; }
  100% { stroke-dashoffset: 200; opacity: 0; }
}

/* Filled area below line — fades in after line completes its trace */
.opp-roi-fill {
  fill: url(#opp-fill-gradient);
  fill: var(--accent);  /* solid fallback */
  fill-opacity: 0;
  animation: opp-roi-fill-fade var(--opp-cycle) ease-in-out infinite;
}
@keyframes opp-roi-fill-fade {
  0%, 60% { fill-opacity: 0; }
  72%, 85% { fill-opacity: 0.06; }
  95%      { fill-opacity: 0; }
}

/* Milestones — each lights up as the line passes its position.
   Line trace runs 0% → 67% of the 6s cycle (4s draw); milestones at
   approx 13% / 36% / 60% / 67% of path = ~9% / 24% / 40% / 67% of cycle. */
.opp-ms {
  fill: var(--muted-70);
  stroke: var(--muted-70);
  stroke-width: 1;
  opacity: 0.4;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  animation: opp-ms-flash var(--opp-cycle) ease-in-out infinite;
}
.opp-ms--1 { animation-delay: 0s; }
.opp-ms--2 { animation-delay: -4.65s; } /* fires ~24% into cycle (1.45s in) */
.opp-ms--3 { animation-delay: -3.6s;  } /* fires ~40% into cycle (2.4s in) */
.opp-ms--4 { animation-delay: -2s;    } /* fires ~67% into cycle (4s in) */
@keyframes opp-ms-flash {
  0%, 8%, 22%, 100% { fill: var(--muted-70); opacity: 0.35; transform: scale(1); }
  12%               { fill: var(--accent);   opacity: 1;    transform: scale(1.45); filter: drop-shadow(0 0 4px rgba(106,168,255,0.7)); }
}

/* Today marker */
.opp-today line {
  stroke: var(--live-color);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.opp-today circle {
  fill: var(--live-color);
  filter: drop-shadow(0 0 3px rgba(74, 222, 128, 0.55));
  animation: opp-today-pulse 2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.opp-today text {
  font-family: var(--font-mono);
  font-size: 7px;
  fill: var(--live-color);
  letter-spacing: 0.05em;
  opacity: 0.9;
}
@keyframes opp-today-pulse {
  0%, 100% { opacity: 0.7; transform: scale(0.9); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* === Tickers (reuse pattern from Card 1) === */
.opp-ticker {
  display: inline-block;
  height: 14px;
  overflow: hidden;
  line-height: 14px;
  vertical-align: middle;
}
.opp-ticker--small { width: 22px; }
.opp-ticker__track {
  display: flex;
  flex-direction: column;
  animation: opp-ticker-cycle 15s steps(5, jump-none) infinite;
}
.opp-ticker__track span {
  display: block;
  height: 14px;
  line-height: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg);
}
.opp-ticker__track--conf { width: 28px; }
.opp-ticker__track--conf span { color: var(--fg); }
@keyframes opp-ticker-cycle {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-70px); } /* 5 steps × 14px */
}

/* === Footer engagement strip === */
.opp-panel__foot {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.015);
  gap: 12px;
  flex-wrap: wrap;
}
.opp-engagement {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.opp-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--muted-70);
  white-space: nowrap;
}
.opp-stat b { color: var(--fg); font-weight: 600; font-family: var(--font-mono); }
.opp-check {
  color: var(--accent);
  font-size: 11px;
  animation: opp-check-pulse 4s ease-in-out infinite;
}
.opp-check--dot { color: var(--live-color); font-size: 8px; }
@keyframes opp-check-pulse {
  0%, 90%, 100% { opacity: 1; }
  10%, 25%      { opacity: 0.4; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .opp-console *,
  .opp-console *::before,
  .opp-console *::after {
    animation: none !important;
    transition: none !important;
  }
  .opp-roi-line { stroke-dashoffset: 0; }
  .opp-roi-fill { fill-opacity: 0.06; }
  .opp-ms       { fill: var(--accent); opacity: 1; }
}

/* ---- Card 4 · Data & Infrastructure — Production Observability ----
   Pipeline flow (top) + 3 metric cards (middle) + optimization events log
   (bottom). Primary motion: pulses traveling through the pipeline, sparkline
   draws, slow-scroll events log. */

.infra-console {
  --infra-cycle: 3s;
  --label-color: rgba(255, 255, 255, 0.45);
  --ok-color: var(--accent);
  --live-color: #4ade80;
  --hot-color: #ffb86a;
  position: relative;
  display: block;
  width: calc(100% + var(--space-7) * 2);
  margin: calc(var(--space-7) * -1) calc(var(--space-7) * -1) var(--space-6);
  padding: 28px;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
  isolation: isolate;
  pointer-events: none;
  font-family: var(--font-sans);
}

.infra-console__glow {
  position: absolute;
  inset: -10%;
  background: radial-gradient(50% 55% at 50% 50%, var(--accent-tint) 0%, transparent 70%);
  opacity: 0.85;
  animation: infra-glow-breathe 4.5s ease-in-out infinite;
  z-index: -1;
}
.infra-console__grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 14px 14px;
  mask-image: radial-gradient(70% 65% at 50% 50%, black, transparent 95%);
  z-index: -1;
}
@keyframes infra-glow-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.05); }
}

.infra-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  border: 1px solid rgba(106, 168, 255, 0.22);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted-75);
}

.infra-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.infra-brand__name {
  font-weight: 600;
  color: var(--fg);
  font-size: 12px;
  letter-spacing: -0.005em;
}
.infra-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--live-color);
}
.infra-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live-color);
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
  animation: infra-status-pulse 2s ease-in-out infinite;
}
@keyframes infra-status-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.1); }
}

/* Section labels */
.infra-section-label,
.infra-section-label--inline {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label-color);
  margin-bottom: 8px;
}
.infra-section-label--inline { display: inline-block; margin: 0 12px 0 0; }

.infra-panel__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* === Pipeline === */
.infra-pipeline {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.infra-pipe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 56;
  overflow: visible;
}

.infra-pipe__backbone {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.infra-pipe__arrow {
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.infra-stage__box {
  fill: rgba(0, 0, 0, 0.45);
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  animation: infra-stage-flash var(--infra-cycle) linear infinite;
  animation-delay: calc(var(--stage-i, 0) * (var(--infra-cycle) / 5));
}
@keyframes infra-stage-flash {
  0%, 4%, 16%, 100% { stroke: rgba(255, 255, 255, 0.18); fill: rgba(0, 0, 0, 0.45); }
  8%                { stroke: var(--accent); fill: rgba(106, 168, 255, 0.18); }
}
.infra-stage__label {
  fill: var(--muted-75);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.04em;
}
.infra-stage__lat {
  fill: var(--muted-70);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
.infra-stage__lat--hot { fill: var(--hot-color); opacity: 0.9; }

/* Pulses — travel along the backbone path */
.infra-pulse {
  fill: var(--accent);
  filter: drop-shadow(0 0 4px rgba(106, 168, 255, 0.85));
  opacity: 0;
  offset-path: path('M 20 18 L 380 18');
  offset-rotate: 0deg;
  animation: infra-pulse-travel var(--infra-cycle) linear infinite;
  transform-box: view-box;
}
@keyframes infra-pulse-travel {
  0%   { offset-distance: 0%;   opacity: 0; }
  3%   { opacity: 1; }
  90%  { offset-distance: 100%; opacity: 1; }
  95%  { offset-distance: 100%; opacity: 1; transform: scale(1.6); filter: drop-shadow(0 0 8px rgba(106, 168, 255, 1)); }
  100% { offset-distance: 100%; opacity: 0; }
}

/* === Metric cards === */
.infra-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.infra-metric {
  position: relative;
  padding: 8px 10px 4px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  overflow: hidden;
  min-width: 0;
}
.infra-metric .infra-section-label { margin-bottom: 4px; }
.infra-metric__val {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.02em;
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.infra-metric__val small {
  font-size: 11px;
  color: var(--muted-70);
  font-weight: 400;
}
.infra-metric__delta {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--accent);
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--accent-tint);
  border: 1px solid rgba(106, 168, 255, 0.28);
  letter-spacing: 0.04em;
  animation: infra-delta-pulse 4s ease-in-out infinite;
}
@keyframes infra-delta-pulse {
  0%, 80%, 100% { box-shadow: 0 0 0 0 rgba(106, 168, 255, 0); }
  88%           { box-shadow: 0 0 8px 1px rgba(106, 168, 255, 0.4); }
}

/* Sparklines — animated stroke-dasharray draw-in loop */
.infra-spark {
  display: block;
  width: 100%;
  height: 24px;
  margin-top: 2px;
  overflow: visible;
}
.infra-spark__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  filter: drop-shadow(0 0 2px rgba(106, 168, 255, 0.4));
  animation: infra-spark-draw 8s ease-in-out infinite;
}
.infra-spark__fill {
  fill: var(--accent);
  fill-opacity: 0;
  animation: infra-spark-fill 8s ease-in-out infinite;
}
@keyframes infra-spark-draw {
  0%   { stroke-dashoffset: 140; }
  60%  { stroke-dashoffset: 0; }
  85%  { stroke-dashoffset: 0; opacity: 1; }
  95%  { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 140; opacity: 0; }
}
@keyframes infra-spark-fill {
  0%, 55% { fill-opacity: 0; }
  68%, 85% { fill-opacity: 0.08; }
  95%     { fill-opacity: 0; }
}

/* === Events log === */
.infra-events {
  padding: 12px 14px;
}
.infra-events__window {
  position: relative;
  height: 96px;          /* 4 rows × 24px */
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
}
.infra-events__track {
  display: grid;
  grid-auto-rows: 24px;
  animation: infra-events-scroll 36s linear infinite;  /* 6 unique rows × 6s per row */
  will-change: transform;
}
.infra-event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  height: 24px;
  padding: 0 4px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
  font-size: 10.5px;
}
.infra-event__ts {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.infra-event__msg {
  font-size: 10.5px;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.infra-event__impact {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--accent);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.infra-event__impact--up { color: var(--live-color); }

@keyframes infra-events-scroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(calc(-24px * 6)); }
}

/* === Footer readiness strip === */
.infra-panel__foot {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.015);
  gap: 12px;
  flex-wrap: wrap;
}
.infra-readiness {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.infra-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--muted-70);
  white-space: nowrap;
}
.infra-stat b {
  color: var(--fg);
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}
.infra-check {
  color: var(--accent);
  font-size: 11px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .infra-console *,
  .infra-console *::before,
  .infra-console *::after {
    animation: none !important;
    transition: none !important;
  }
  .infra-spark__line { stroke-dashoffset: 0; }
  .infra-spark__fill { fill-opacity: 0.08; }
  .infra-pulse       { opacity: 0; }
  .infra-events__track { transform: translateY(0); }
}

.solution-card__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: var(--space-4);
}
.solution-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
  color: var(--fg);
}
.solution-card__tagline {
  font-size: var(--text-md);
  color: var(--accent);
  margin: 0 0 var(--space-4);
}
.solution-card__tagline em { font-style: italic; }
.solution-card__desc {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--muted-75);
  margin: 0 0 var(--space-6);
  flex: 1;
}
.solution-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
}
.solution-card__tags span {
  display: inline-block;
  padding: 4px var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted-75);
}
.solution-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--accent);
  font-size: var(--text-md);
  font-weight: 500;
}
.solution-card:hover .solution-card__cta span { transform: translateX(3px); }
.solution-card__cta span { display: inline-block; transition: transform var(--dur-fast) var(--ease-out-expo); }


/* ---- Our Approach (Section 01 — merged posture + process) ----
   Replaces the old "Our Core" positioning block and the "How We Work" phase
   cards. Two bands: THE POSTURE (4 unordered principles — accent mark, no
   numbers) and THE PROCESS (4-phase sequence on a blue→warm flow rail, the
   only numbered run). Classes are namespaced `appr-` to stay self-contained. */

main.page > section.our-approach {
  padding: var(--space-12) var(--space-7);
}

/* band wrapper + labelled hairline rule (THE POSTURE / THE PROCESS) */
.appr-band { margin-top: var(--space-11); }
.appr-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  margin: 0 0 var(--space-6);
}
.appr-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-10), transparent);
}

/* THE POSTURE — how we show up (unordered principles, not a sequence) */
.appr-tenets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.appr-tenet {
  padding: var(--space-5) var(--space-6) var(--space-6) 0;
  border-top: 1px solid var(--border-10);
}
.appr-tenet + .appr-tenet {
  padding-left: var(--space-6);
  border-left: 1px solid var(--border-10);
}
/* a small accent mark stands in for a number — the posture is a set, not an order */
.appr-tenet__mark {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.appr-tenet:last-child .appr-tenet__mark { background: #e5894b; } /* warm = "operate / live" */
.appr-tenet h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
  margin: var(--space-4) 0 9px;
  color: var(--fg);
}
.appr-tenet p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted-75);
}

/* THE PROCESS — the order we work in, on a blue→warm flow rail */
.appr-phases {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  padding: 30px 0 0;
  margin: 0;
  list-style: none;
}
.appr-phases::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 7px;
  right: 7px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), rgba(106, 168, 255, 0.35) 55%, #e5894b);
  opacity: 0.5;
}
.appr-phase { position: relative; }
.appr-phase__node {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.appr-phase__node::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.appr-phase:last-child .appr-phase__node { border-color: #e5894b; }
.appr-phase:last-child .appr-phase__node::after { background: #e5894b; }
.appr-phase__n {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.42);
  margin-top: var(--space-4);
}
.appr-phase h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin: 6px 0 9px;
  color: var(--fg);
}
.appr-phase p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted-75);
  max-width: 24ch;
}

@media (max-width: 1023.98px) {
  .appr-tenets, .appr-phases { grid-template-columns: 1fr 1fr; }
  .appr-tenet { padding: var(--space-5) var(--space-5) var(--space-6); border-left: 1px solid var(--border-10); }
  .appr-tenet:nth-child(odd) { border-left: none; }
  .appr-phases::before { display: none; }
}
@media (max-width: 540px) {
  .appr-tenets, .appr-phases { grid-template-columns: 1fr; }
  .appr-tenet, .appr-tenet + .appr-tenet { border-left: none !important; padding-left: 0; }
}


/* ---- Case studies (Section 06) ---- */

main.page > section.case-studies {
  padding: var(--space-12) var(--space-7);
  border-top: 1px solid var(--hairline);
}
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-9);
}
@media (max-width: 809.98px) { .case-grid { grid-template-columns: 1fr; } }

.case-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-7);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color var(--dur-base) var(--ease-out-expo);
}
.case-card:hover { border-color: var(--accent); }

.case-card__metric { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-5); }
.case-card__num {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.03em;
  line-height: 1;
}
.case-card__delta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--muted-75);
  text-transform: uppercase;
}
.case-card__industry {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-4);
}
.case-card__quote {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--muted-75);
  margin: 0;
}


/* ---- Proven Impact (Section 05b) ---- */
/* Tab-driven layout matching Framer: 3 industry tabs across the top, ONE
   panel below visible at a time. Tab clicks swap which panel is shown,
   numbers animate from 0 → target on view + tab switch (impact.js). */

main.page > section.proven-impact {
  padding: var(--space-12) var(--space-7);
  border-top: 1px solid var(--hairline);
}
.industry-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
  margin: var(--space-10) 0 var(--space-9);
}
@media (max-width: 809.98px) {
  .industry-tabs { grid-template-columns: 1fr; }
}
.industry-tab {
  /* Tabs are <button>s — reset native chrome and set up the top-bar treatment.
     The grey 2px border-top is the "track"; the ::after pseudo-element is
     the accent-coloured progress bar that grows over --tab-duration when
     the tab is active. */
  --tab-duration: 7s;
  appearance: none;
  background: transparent;
  border: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
  padding: var(--space-3) 0 0;
  border-top: 2px solid var(--hairline);
  color: inherit;
  position: relative;
  transition: border-color var(--dur-base) var(--ease-out-expo);
}
.industry-tab:hover { border-top-color: var(--muted-50); }

/* Progress bar — sits exactly on top of the grey border-top track.
   Inactive tabs keep it invisible (scaleX 0). Active tab animates it
   from 0 → 1 over --tab-duration; impact.js fires an auto-advance
   timer for the same duration. */
.industry-tab::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
.industry-tab--active::after {
  animation: tabProgress var(--tab-duration) linear forwards;
}
@keyframes tabProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .industry-tab--active::after {
    animation: none;
    transform: scaleX(1);
  }
}
.industry-tab__name {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.industry-tab--active .industry-tab__name { color: var(--accent); }
.industry-tab__sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 36ch;
}

/* Panel — exactly one visible at a time. JS toggles `hidden` on inactive
   ones rather than display:none, so the panel still occupies a fresh
   stacking context when shown (no flicker). */
.impact-panel {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-9);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015) 0%, rgba(0, 0, 0, 0) 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  position: relative;
}
.impact-panel[hidden] { display: none; }
@media (max-width: 999.98px) {
  .impact-panel { grid-template-columns: 1fr; padding: var(--space-8) var(--space-6); }
}
/* Vertical divider between left and right columns — Framer parity. */
.impact-panel::before {
  content: "";
  position: absolute;
  top: var(--space-10);
  bottom: var(--space-10);
  left: 50%;
  width: 1px;
  background: var(--hairline);
}
@media (max-width: 999.98px) { .impact-panel::before { display: none; } }

.impact-panel__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.impact-panel__hero {
  font-family: var(--font-display);
  font-size: clamp(48px, 5.5vw, 72px);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 var(--space-2);
}
.impact-panel__caption {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--muted-75);
  margin: 0;
  max-width: 50ch;
}
.impact-panel__rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--space-5) 0 var(--space-4);
  width: 100%;
}
.impact-panel__list-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--fg);
  margin: var(--space-4) 0 var(--space-3);
}
.impact-panel__list-title:first-of-type { margin-top: 0; }
.impact-panel__list-title > span:first-child {
  color: var(--accent);
  font-size: 1.1em;
}
.impact-panel__list {
  list-style: none;
  padding: 0 0 0 var(--space-6);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.impact-panel__list li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted-75);
}

/* Right column — vertical stack of stats, centered in each row. */
.impact-panel__right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-9);
  text-align: center;
  padding-left: var(--space-7);
}
@media (max-width: 999.98px) {
  .impact-panel__right { padding-left: 0; }
}
.impact-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}
.impact-stat__num {
  font-family: var(--font-display);
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
  /* Tabular figures keep digits the same width while the counter animates,
     so the layout doesn't jitter as numbers change. */
  font-variant-numeric: tabular-nums;
}
.impact-stat__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
  max-width: 24ch;
}


/* ---- Testimonials (Section 06b) ---- */
/* Photo-anchored cards: portrait JPG at top with dark gradient overlay so the
   quote remains legible. 4-up grid on desktop, 2-up tablet, 1-up mobile.
   Metric badge pinned bottom-right of body for emphasis. */

main.page > section.testimonials {
  padding: var(--space-12) var(--space-7);
  border-top: 1px solid var(--hairline);
}
.testimonial-grid { margin-top: var(--space-9); }
/* Marquee viewport (added by JS when the carousel is active) — fades the edges. */
.testimonial-grid.is-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
/* Static layout — the no-JS / reduced-motion fallback (matches the old grid). */
.testimonial-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1199.98px) { .testimonial-track:not(.is-scrolling) { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639.98px)  { .testimonial-track:not(.is-scrolling) { grid-template-columns: 1fr; } }
/* Auto-scrolling carousel — pauses on hover so quotes stay readable. */
.testimonial-track.is-scrolling {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-5);
  width: max-content;
  animation: testimonialScroll 52s linear infinite;
  will-change: transform;
}
.testimonial-track.is-scrolling:hover { animation-play-state: paused; }
.testimonial-track.is-scrolling .testimonial-card { flex: 0 0 290px; }
@keyframes testimonialScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .testimonial-track.is-scrolling { animation: none; }
}
.testimonial-card {
  position: relative;
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: #0a0a0c;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur-base) var(--ease-out-expo),
              transform var(--dur-base) var(--ease-out-expo);
}
.testimonial-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}
.testimonial-card__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.testimonial-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: saturate(0.85) contrast(1.05);
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.testimonial-card:hover .testimonial-card__photo img {
  transform: scale(1.03);
}
/* Gradient overlay: darkens the bottom of the photo into the body */
.testimonial-card__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 12, 0) 55%,
    rgba(10, 10, 12, 0.7) 85%,
    rgba(10, 10, 12, 1) 100%
  );
  pointer-events: none;
}
.testimonial-card__body {
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
}
.testimonial-card__quote {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg);
  font-style: normal;
}
.testimonial-card__quote::before { content: "\201C"; margin-right: 2px; color: var(--muted-50); }
.testimonial-card__quote::after  { content: "\201D"; margin-left: 2px; color: var(--muted-50); }
.testimonial-card__role {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}
.testimonial-card__metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding-top: var(--space-3);
}
.testimonial-card__metric-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-50);
}
.testimonial-card__metric-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}


/* ---- Trusted by (Section 07) ---- */

main.page > section.trusted-by {
  padding: var(--space-12) var(--space-7);
  border-top: 1px solid var(--hairline);
  text-align: center;
}
.trusted-by__heading {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-9);
  color: var(--fg);
}
.trusted-by__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-9);
  align-items: center;
  justify-items: center;
  max-width: 1000px;
  margin: 0 auto;
}
@media (max-width: 809.98px) {
  .trusted-by__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
}
.trusted-by__logo { height: 36px; }
.trusted-by__logo img {
  height: 100%;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.7);
  transition: filter var(--dur-base) var(--ease-out-expo);
}
.trusted-by__logo:hover img { filter: brightness(0) invert(1) opacity(1); }


/* ---- Honor reduced-motion site-wide ---- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* Reveal elements snap to final pose */
  .reveal, .logo-strip__item { opacity: 1 !important; transform: none !important; }
}

/* ===== Solutions — Neon-style narrative scroll (Section 04) ===== */
.sn-section{ --sn-mut:rgba(255,255,255,.5); --sn-mut2:rgba(255,255,255,.4); --sn-line:rgba(255,255,255,.1); --sn-eo:cubic-bezier(.22,.61,.36,1); --sn-acc:var(--accent,#6aa8ff);
  background:#06070a; padding:24px 0 32px; }
/* Section header — left-aligned, sharing .sn's max-width + side padding so the
   eyebrow/headline line up with the sticky rail below. */
.sn-head{ max-width:1264px; margin:0 auto; padding:40px 32px 8px; }
.sn-head .section-sub{ max-width:64ch; }
.sn{ position:relative; max-width:1264px; margin:0 auto; padding:0 32px; display:grid; grid-template-columns:300px 1fr; }
.sn__mobnav{ display:none; }
.sn__index{ grid-column:1; position:sticky; top:calc(50vh - 92px); align-self:start; width:264px; z-index:2; list-style:none; margin:0; padding:0; }
.sn__index .cap{ font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--sn-mut2); margin:0 0 18px; }
.sn__index li{ display:flex; align-items:baseline; gap:13px; padding:12px 0; cursor:pointer; }
.sn__num{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.08em; color:var(--sn-mut2); flex:none; transition:color .4s var(--sn-eo); }
.sn__name{ font-size:17px; line-height:1.3; color:var(--sn-mut2); transition:color .4s var(--sn-eo); }
.sn__index li:hover .sn__name{ color:rgba(255,255,255,.82); }
.sn__index li.on .sn__num{ color:var(--sn-acc); }
.sn__index li.on .sn__name{ color:#fff; }
.sn__feats{ grid-column:2; min-width:0; }
.sn__feat{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:16px; padding:104px 0 44px; }
.sn__head{ font-family:"Clash Grotesk","Figtree",sans-serif; font-weight:500; font-size:clamp(32px,3.6vw,48px); line-height:1.12; letter-spacing:-.02em; max-width:920px; text-align:left; margin:0; color:#fff; }
.sn__head .mut{ color:var(--sn-mut); }
.sn__annot{ display:flex; gap:40px; justify-content:flex-start; align-items:flex-end; min-height:34px; }
.sn__annot div{ position:relative; font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--sn-mut2); padding-bottom:14px; text-align:center; }
.sn__annot div::after{ content:""; position:absolute; left:50%; bottom:0; width:1px; height:11px; background:linear-gradient(var(--sn-line),transparent); }
.sn__visual{ width:100%; max-width:1120px; position:relative; }
.sn__visual .sn__diagram{ display:block; width:100%; min-height:360px; }
.sn__visual iframe{ width:100%; height:500px; border:0; display:block; background:transparent; }
.sn__foot{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; justify-content:flex-start; }
.sn__tags{ display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-start; }
.sn__tags span{ font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--sn-mut); padding:5px 11px; border:1px solid var(--sn-line); border-radius:100px; }
.sn__metric{ display:flex; align-items:baseline; gap:9px; }
.sn__metric b{ font-family:"Clash Grotesk","Figtree",sans-serif; font-weight:500; font-size:26px; letter-spacing:-.02em; color:var(--sn-acc); }
.sn__metric span{ font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--sn-mut2); }
@media(max-width:1040px){
  .sn-head{ padding:32px 24px 4px; }
  .sn{ grid-template-columns:1fr; padding:0 24px; } .sn__index{ display:none; } .sn__feat{ min-height:auto; padding:40px 0; }
  /* mobile capability rail — replaces the (hidden) sticky index */
  .sn__mobnav{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    position:sticky; top:92px; z-index:6; padding:11px 24px;
    background:rgba(6,7,10,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--sn-line); }
  .sn__mobnav::-webkit-scrollbar{ display:none; }
  .sn__mobnav button{ flex:0 0 auto; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.03em;
    color:var(--sn-mut); background:transparent; border:1px solid var(--sn-line); border-radius:100px;
    padding:7px 14px; white-space:nowrap; cursor:pointer; transition:color .3s var(--sn-eo),border-color .3s,background .3s; }
  .sn__mobnav button.on{ color:#fff; border-color:var(--sn-acc); background:rgba(106,168,255,.12); }
}