/* ════════════════════════════════════════════════════════════════════
   XPERION - HOME (./) page styles
   Extracted from inline <style> blocks · v3.8 structure pass · 2026-06-10

   Load order matters: this file is linked AFTER xperion.css so that
   page-local rules win on cascade, exactly as the inline blocks did.

   CONTENTS
   01 · Design tokens + base reset (page-local :root, body, selection)
   02 · Page sections (hero v3, marquee, problem, flywheel, practices,
        industries, tech stack, how-we-work, numbers, beliefs, offer,
        FAQ, CTA finale) - original main block, order preserved
   03 · Hero v4 - WebGL field, aurora, type scale (overrides 01/02)
   04 · Clients / KXT ecosystem logo marquee
   05 · Landing-page Insights cards (sand-on-sand, asymmetric grid)
   06 · Utility + section-scoped helpers added in v3.8 (offer card,
        sand-section accents) - replaces former inline style attributes
   ════════════════════════════════════════════════════════════════════ */

/* ── 01-02 · DESIGN TOKENS, BASE + PAGE SECTIONS ─────────────────── */
/* ════════════════════════════════════════════════════════════════════
   XPERION  ·  v3  Premium Maximalist Edition
   Amber → Teal dominant gradient · Editorial restraint at scale
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* CORE PALETTE */
  --obsidian:        #080B18;
  --obsidian-2:      #0D1120;
  --obsidian-3:      #111827;
  --ink:             #0E1225;
  --ink-2:           #2A2D45;
  --body-dark:       #3C3F5A;
  --mid:             #9A96AA;
  --mid-soft:        rgba(255,255,255,0.62);
  --line-dark:       rgba(255,255,255,0.08);
  --line-light:      rgba(8,11,24,0.10);

  --white:           #FFFFFF;
  --sand:            #FFF4E6;
  --sand-2:          #F5E8D0;

  /* BRAND */
  --teal:            #00C9A7;
  --teal-2:          #3DDC97;
  --teal-soft:       rgba(0,201,167,0.18);
  --violet:          #7C3AED;
  --violet-2:        #A78BFA;
  --amber:           #F59E0B;
  --amber-2:         #FCD34D;
  --amber-deep:      #c47d00;
  --green:           #3DDC97;
  --green-deep:      #1a9e66;

  /* DOMINANT GRADIENT, Amber → Teal (the new visual signature) */
  /* Landing page gradients, v3.5: Teal-led, OKLCH-interpolated.
     Aligned to brand-book Palette A: Teal is the anchor; Amber is the warm tail.
     The OKLCH path passes through perceptually clean limelight tones rather than
     the muddy olive RGB interpolation produces between green and amber.
     RGB fallback for browsers without OKLCH support is in xperion.css. */
  --grad-hero:       linear-gradient(135deg in oklch, #00C9A7 0%, #34D399 42%, #F59E0B 100%);
  --grad-hero-rev:   linear-gradient(135deg in oklch, #F59E0B 0%, #34D399 58%, #00C9A7 100%);
  --grad-warm:       linear-gradient(135deg in oklch, #00C9A7 0%, #34D399 42%, #F59E0B 100%);
  --grad-warm-soft:  linear-gradient(135deg in oklch, rgba(0,201,167,0.22) 0%, rgba(52,211,153,0.18) 42%, rgba(245,158,11,0.16) 100%);
  --grad-deep:       linear-gradient(135deg in oklch, #00C9A7 0%, #7C3AED 55%, #F59E0B 100%);
  --grad-mark:       linear-gradient(135deg in oklch, #00C9A7 0%, #34D399 50%, #F59E0B 100%);
  --grad-band:       linear-gradient(90deg in oklch, #00C9A7 0%, #34D399 30%, #FBBF24 60%, #F59E0B 80%, #7C3AED 100%);
  --grad-ink:        linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0.62) 100%);

  /* GLOW */
  --glow-amber:      0 0 80px rgba(245,158,11,0.28);
  --glow-teal:       0 0 80px rgba(0,201,167,0.25);
  --glow-mix:        0 0 120px rgba(245,158,11,0.18), 0 0 80px rgba(0,201,167,0.16);

  /* RADII */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 42px;

  /* MOTION */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.20, 0.70, 0.20, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* TYPE */
  --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Instrument Serif', 'Times New Roman', serif;
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--obsidian);
  color: var(--white);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow-x cleared from body; moved to .hero where it belongs */
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; color: inherit; cursor: pointer; }

::selection { background: var(--amber); color: var(--obsidian); }

/* GRAIN OVERLAY, ambient texture for film-like depth */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.85'/></svg>");
}

/* Custom cursor removed in audit v2 (restored native cursor for parity with all 20 connected pages).
   Magnetic-button pull on CTAs is preserved via JS (data-magnetic). */

/* ─── SCROLL PROGRESS ───────────────────────────────────────────── */
.xp-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 200; pointer-events: none;
}
.xp-progress-fill {
  height: 100%; background: var(--grad-hero);
  transform-origin: left center; transform: scaleX(0);
  transition: transform 0.06s linear;
}

/* Top compliance ticker CSS removed in audit v2 (component deleted; dedupe with marquee row). */

/* ─── NAV ───────────────────────────────────────────────────────── */
.xp-nav {
  position: sticky; top: 0; z-index: 110;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  background: rgba(8,11,24,0.55);
  border-bottom: 1px solid var(--line-dark);
  transition: background 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.xp-nav.scrolled {
  background: rgba(8,11,24,0.82);
  border-bottom-color: rgba(245,158,11,0.18);
}
.xp-nav-inner {
  max-width: 1320px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; gap: 24px;
}
.xp-logo {
  display: flex; align-items: center; gap: 12px;
  font-weight: 900; font-size: 18px; letter-spacing: -0.02em;
}
.xp-logo-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--grad-mark);
  box-shadow: 0 0 24px rgba(245,158,11,0.45), inset 0 1px 0 rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--obsidian); font-weight: 900; font-size: 18px;
  position: relative; overflow: hidden;
}
.xp-logo-mark::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.45), transparent 50%);
}
.xp-logo-word { background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.xp-nav-menu { display: flex; align-items: center; gap: 4px; }
.xp-nav-item {
  position: relative;
  padding: 10px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: 0.005em;
  color: rgba(255,255,255,0.75);
  transition: color 0.25s var(--ease-out), background 0.25s var(--ease-out);
  display: inline-flex; align-items: center; gap: 6px;
}
.xp-nav-item:hover { color: white; background: rgba(255,255,255,0.05); }
.xp-nav-item .chev { font-size: 9px; opacity: 0.6; margin-top: 1px; }
.xp-nav-dd {
  position: absolute; top: 100%; left: 0;
  margin-top: 8px;
  width: 460px; padding: 16px;
  background: rgba(13,17,32,0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  box-shadow: 0 24px 60px -16px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
  opacity: 0; pointer-events: none;
  transform: translateY(-6px) scale(0.98);
  transition: opacity 0.2s var(--ease-out), transform 0.25s var(--ease-out);
}
.xp-nav-wrap { position: relative; }
.xp-nav-wrap:hover .xp-nav-dd, .xp-nav-wrap:focus-within .xp-nav-dd {
  opacity: 1; pointer-events: auto; transform: translateY(0) scale(1);
}
.xp-dd-row {
  display: flex; gap: 14px; padding: 12px;
  border-radius: 12px;
  transition: background 0.2s var(--ease-out);
}
.xp-dd-row:hover { background: rgba(255,255,255,0.04); }
.xp-dd-num {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.xp-dd-row.teal   .xp-dd-num { color: var(--teal);   border-color: rgba(0,201,167,0.35); background: rgba(0,201,167,0.06); }
.xp-dd-row.violet .xp-dd-num { color: var(--violet-2); border-color: rgba(124,58,237,0.35); background: rgba(124,58,237,0.06); }
.xp-dd-row.amber  .xp-dd-num { color: var(--amber-2); border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.07); }
.xp-dd-row.green  .xp-dd-num { color: var(--teal-2); border-color: rgba(61,220,151,0.4); background: rgba(61,220,151,0.07); }
.xp-dd-row.warm   .xp-dd-num { background: var(--grad-warm); color: var(--obsidian); border: none; }
.xp-dd-content { flex: 1; }
.xp-dd-content strong { display: block; font-size: 14px; font-weight: 700; color: white; }
.xp-dd-content span { display: block; font-size: 12.5px; color: var(--mid); margin-top: 2px; line-height: 1.5; }

.xp-cta {
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.01em;
  color: var(--obsidian);
  background: var(--grad-hero);
  box-shadow: 0 4px 22px -6px rgba(245,158,11,0.55), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: transform 0.25s var(--ease-out), box-shadow 0.3s var(--ease-out);
  display: inline-flex; align-items: center; gap: 8px;
  position: relative; overflow: hidden;
}
.xp-cta::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-out);
}
.xp-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -6px rgba(245,158,11,0.65), inset 0 1px 0 rgba(255,255,255,0.4); }
.xp-cta:hover::after { transform: translateX(120%); }

.xp-burger { display: none; }
@media (max-width: 900px) {
  .xp-nav-menu, .xp-cta { display: none; }
  .xp-burger { display: flex; flex-direction: column; gap: 5px; padding: 10px; }
  .xp-burger span { width: 22px; height: 2px; background: white; border-radius: 2px; }
}

/* ═══ CONTAINER ════════════════════════════════════════════════════ */
/* 1320px matches the nav grid (.xp-nav-inner) so the hero copy and every
   section align to the same left edge as the nav logo. (Was 1240, which
   indented all landing content ~40px from the nav on wide screens.) */
.container { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 700px) { .container { padding: 0 22px; } }

/* ═══ HERO ════════════════════════════════════════════════════════
   v3.8: compacted to fit single viewport on both mobile and desktop.
   Bottom padding reserves clear room for the scroll cue (≈64px tall
   including its line) so the cue never overlaps the stats ribbon. */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(56px, 7.5vw, 92px) 0 clamp(80px, 9vw, 110px);
  min-height: min(88dvh, 880px);
  display: flex; align-items: center;
  isolation: isolate;
}
@media (max-height: 720px) {
  /* Short viewports: hero collapses, scroll cue is hidden anyway, so the
     bottom padding can shrink. */
  .hero { min-height: auto; padding-bottom: clamp(36px, 5vw, 56px); }
}
.hero-bg {
  position: absolute; inset: -10%;
  z-index: -1;
  /* Teal-led mesh: teal anchor top-left, amber warm tail bottom-right, violet accent off-axis */
  background:
    radial-gradient(ellipse 68% 58% at 18% 22%, rgba(0,201,167,0.32), transparent 60%),
    radial-gradient(ellipse 60% 64% at 82% 76%, rgba(245,158,11,0.28), transparent 60%),
    radial-gradient(ellipse 48% 42% at 60% 28%, rgba(52,211,153,0.18), transparent 65%),
    radial-gradient(ellipse 44% 38% at 30% 80%, rgba(124,58,237,0.16), transparent 65%),
    var(--obsidian);
  filter: blur(0px);
  animation: heroMesh 28s ease-in-out infinite alternate;
}
@keyframes heroMesh {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2%, 1%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -1%, 0) scale(1.02); }
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, transparent 70%, var(--obsidian) 100%);
}
/* Hero brand-mark watermark: large, off-axis, low opacity.
   The mark is a knot/loop, which echoes the flywheel thesis. Decorative only. */
.hero-mark-watermark {
  position: absolute;
  right: -120px; top: 50%;
  width: 640px; height: 640px;
  transform: translateY(-50%);
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  filter: blur(0.5px) drop-shadow(0 0 60px rgba(0,201,167,0.18));
  animation: hero-mark-drift 22s ease-in-out infinite alternate;
}
@keyframes hero-mark-drift {
  0%   { transform: translate3d(0, -50%, 0) rotate(-2deg) scale(1); }
  100% { transform: translate3d(-3%, -47%, 0) rotate(4deg) scale(1.04); }
}
@media (max-width: 880px) {
  .hero-mark-watermark { right: -200px; width: 480px; height: 480px; opacity: 0.06; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mark-watermark { animation: none; }
}
.hero-grid-overlay {
  /* Static fallback. The live .hero-field canvas sits on top when JS + non-
     reduced motion + canvas support are available. */
  position: absolute; inset: 0; z-index: -1; opacity: 0.14;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black, transparent 80%);
}

/* Mobile only: the WebGL particle hero (.hero-gl) can be skipped or limited on
   phones, leaving just this static grid. So on mobile we animate the grid
   itself - a slow drift plus two traveling photons - so the landing hero is
   alive like the connected pages' field. Desktop is untouched (keeps WebGL). */
@media (max-width: 768px) {
  /* Lift the grid above the hero background (it was behind it at z-index -1)
     and run it at full opacity so the brighter lines + photons actually show.
     The previous version dimmed the whole layer to 0.2, which also dimmed the
     photons. The WebGL canvas (z-index 0, transparent when not live) sits over
     this; if WebGL runs, particles show; if not, this animated grid shows. */
  .hero-grid-overlay {
    z-index: 0;
    opacity: 1;
    overflow: hidden;
    background-image:
      linear-gradient(rgba(255,255,255,0.13) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.13) 1px, transparent 1px);
    background-size: 80px 80px;
    animation: hero-grid-drift 16s linear infinite;
  }
  .hero-grid-overlay::before,
  .hero-grid-overlay::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 12px; height: 12px; border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, rgba(0,201,167,0.95) 38%, rgba(0,201,167,0) 72%);
    box-shadow: 0 0 16px 3px rgba(0,201,167,0.55);
    opacity: 0;
    will-change: transform, opacity;
  }
  .hero-grid-overlay::before { animation: hero-photon-a 7s linear infinite; }
  .hero-grid-overlay::after  { animation: hero-photon-b 9s linear infinite 1.4s; }
}
@keyframes hero-grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 80px 80px, 80px 80px; }
}
@keyframes hero-photon-a {
  0%   { transform: translate(10vw, 74vh); opacity: 0; }
  12%  { opacity: 0.9; }
  88%  { opacity: 0.9; }
  100% { transform: translate(82vw, 14vh); opacity: 0; }
}
@keyframes hero-photon-b {
  0%   { transform: translate(86vw, 80vh); opacity: 0; }
  14%  { opacity: 0.85; }
  86%  { opacity: 0.85; }
  100% { transform: translate(22vw, 20vh); opacity: 0; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .hero-grid-overlay { animation: none; }
  .hero-grid-overlay::before, .hero-grid-overlay::after { display: none; }
}

/* HERO WebGL field (.hero-gl) is styled in the hero-v4 override block
   near </head>; the legacy 2D .hero-field renderer has been retired. */

.hero-inner { position: relative; z-index: 1; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--amber-2);
  padding: 8px 16px;
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.32);
  border-radius: 999px;
  margin-bottom: clamp(18px, 2.4vw, 28px);
  position: relative; overflow: hidden;
  opacity: 0; transform: translateY(20px);
  animation: rise 1s var(--ease-out) 0.1s forwards;
}
.hero-eyebrow::before {
  /* Decoupled. We now use an inline .hero-eyebrow-dot for layout control. */
  display: none;
}
.hero-eyebrow-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(0,201,167,0.18), 0 0 14px rgba(0,201,167,0.45);
  animation: heroDotPulse 2.6s ease-in-out infinite;
  margin-right: 4px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
@keyframes heroDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow-dot { animation: none; }
}
@keyframes pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
}

.hero h1 {
  font-size: clamp(29px, 4.2vw, 56px);
  font-weight: 900;
  /* line-height 1.0 was clipping the 'g' descender in "leverage." once the
     reveal-word's overflow:hidden boxed each word. 1.12 gives descenders
     room without ballooning the vertical rhythm. */
  line-height: 1.12;
  letter-spacing: -0.04em;
  margin-bottom: clamp(18px, 2.4vw, 28px);
  max-width: 14ch;
  text-wrap: balance;
}
.hero h1 .reveal-word {
  display: inline-block; overflow: hidden; vertical-align: top;
  /* Bottom padding holds the descender of glyphs like 'g' inside the box
     when overflow:hidden is in play. 0.22em covers 900-weight Inter +
     upright Instrument Serif descenders comfortably. */
  padding: 0.05em 0.04em 0.22em;
  line-height: inherit;
}
.hero h1 .reveal-inner {
  display: inline-block;
  transform: translateY(112%);
  filter: blur(8px);
  opacity: 0;
  animation: word-rise 1.15s var(--ease-out) forwards;
  will-change: transform, filter, opacity;
}
/* Rise + de-blur + fade-in. The cascade reads as a curtain reveal rather
   than a generic translate; the blur tail is short (180ms equivalent of
   the keyframe) so it feels intentional, not janky. */
@keyframes word-rise {
  0%   { transform: translateY(112%); filter: blur(8px); opacity: 0; }
  35%  { opacity: 1; }
  60%  { filter: blur(0); }
  100% { transform: translateY(0);    filter: blur(0);   opacity: 1; }
}
.hero h1 .grad {
  color: var(--teal); /* solid fallback for forced-colors / unsupported clip */
  background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  /* DO NOT set `animation` here. It would override word-rise on .reveal-inner.grad
     elements (Talent. / Era.) and leave them stuck at translateY(105%).
     The combined animation is declared on .reveal-inner.grad below. */
}
/* Combined animation: both word-rise (slide-in) and gradShift (gradient drift)
   on the same element. CSS animation lists are comma-separated. */
.hero h1 .reveal-inner.grad {
  animation:
    word-rise 1.15s var(--ease-out) forwards,
    gradShift 8s linear infinite;
}
@media (forced-colors: active) {
  .hero h1 .grad { -webkit-text-fill-color: currentColor; color: currentColor; }
}
.hero h1 .serif {
  font-weight: 900;
  letter-spacing: -0.045em;
}
/* Hero H1 accent. Upright Instrument Serif provides typographic contrast
   against the 900-weight sans without leaning on italic. */
.hero h1 .serif-italic {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.025em;
  color: rgba(255,255,255,0.96);
  padding-right: 0.04em;
}
@keyframes gradShift { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }

.hero-sub {
  font-size: clamp(15px, 1.2vw, 18px);
  color: rgba(255,255,255,0.74);
  max-width: 56ch;
  line-height: 1.6;
  margin-bottom: clamp(22px, 2.8vw, 36px);
  opacity: 0; transform: translateY(16px);
  animation: rise 1s var(--ease-out) 0.85s forwards;
}
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

.hero-actions {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  margin-bottom: clamp(28px, 3.5vw, 48px);
  opacity: 0; transform: translateY(16px);
  animation: rise 1s var(--ease-out) 1.05s forwards;
}
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px;
  background: var(--grad-hero);
  color: var(--obsidian);
  font-weight: 700; font-size: 14.5px; letter-spacing: 0.005em;
  border-radius: 999px;
  box-shadow: 0 16px 40px -10px rgba(245,158,11,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  position: relative; overflow: hidden;
}
.btn-primary svg { transition: transform 0.3s var(--ease-out); }
.btn-primary:hover svg { transform: translateX(4px); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 24px 50px -10px rgba(245,158,11,0.65), inset 0 1px 0 rgba(255,255,255,0.5); }
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.8s var(--ease-out);
}
.btn-primary:hover::after { transform: translateX(120%); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  background: rgba(255,255,255,0.04);
  color: white;
  font-weight: 600; font-size: 14.5px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.28); }

/* Editorial ribbon. Replaces the hero-metric template (big number / micro label, 4-up)
   with a single horizontal line of inline facts. Numbers in Instrument Serif italic
   for typographic contrast; labels in low-weight sans for breath. No cards, no boxes.
   Mobile collapses to a 2x2 grid that still reads as inline facts, not stat cards. */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(16px, 2.8vw, 44px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid rgba(255,255,255,0.10);
  opacity: 0; transform: translateY(16px);
  animation: rise 1s var(--ease-out) 1.25s forwards;
}
.hero-stat {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  white-space: nowrap;
}
.hero-stat + .hero-stat::before {
  content: '';
  display: inline-block;
  width: 1px; height: 18px;
  background: rgba(255,255,255,0.18);
  margin-right: clamp(8px, 1.4vw, 24px);
  vertical-align: baseline;
  align-self: center;
}
.hero-stat-num {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(26px, 2.8vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--amber-2);
}
.hero-stat-num small {
  font-size: 0.5em;
  letter-spacing: 0;
  color: rgba(255,255,255,0.6);
  margin-left: 2px;
  font-weight: 500;
}
.hero-stat-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: rgba(255,255,255,0.68);
  text-transform: none;
}
@media (max-width: 760px) {
  .hero-stats { gap: 18px 28px; }
  .hero-stat { flex-basis: calc(50% - 14px); white-space: normal; }
  .hero-stat + .hero-stat::before { display: none; }
}

.hero-scroll {
  /* z-index 5 paints above the .hero-inner container (z-index 1) so the
     cue is never hidden behind the stats ribbon. Brightened from 0.4 to
     0.62 alpha so it reads clearly against the mesh. */
  position: absolute; bottom: 22px; left: 50%;
  transform: translateX(-50%);
  font-size: 11.5px; letter-spacing: 0.32em; text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.62);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  z-index: 5;
  pointer-events: none;
  text-shadow: 0 0 12px rgba(8,11,24,0.6);
}
.hero-scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(180deg, transparent, var(--amber), var(--teal));
  animation: scroll-pulse 2.2s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; }
  50%      { transform: scaleY(1); transform-origin: top; }
}
/* Hide on narrow viewports (mobile collapses to 2-col ribbon, no room) and
   on any viewport short enough that the vertically-centred content would
   drop into the cue's band (~780-880px tall). Above 880px the extra hero
   bottom padding gives the stats ribbon clearance over the cue. */
@media (max-width: 760px), (max-height: 880px) {
  .hero-scroll { display: none; }
}

/* ═══ MARQUEE TRUST ROW ═══════════════════════════════════════════
   Composite-only animation (transform). Pauses on hover so users can read
   a label without chasing it; mask edges are 12% for a softer fade. */
.marquee {
  position: relative;
  padding: 30px 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: rgba(255,255,255,0.018);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}
.marquee-track {
  display: flex; gap: 64px;
  width: max-content;
  animation: marquee 48s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.65);
  letter-spacing: 0.01em; white-space: nowrap;
}
.marquee-item-mark {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--grad-warm-soft);
  border: 1px solid rgba(245,158,11,0.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--amber-2); font-weight: 800;
}
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; transform: translateX(0); }
}

/* Reveal-stagger cascade. Children animate in sequence after the parent intersects.
   Each child gets a CSS-cascaded delay; the JS only flips a class on the parent. */
.reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); }
.reveal-stagger.in-view > *:nth-child(1)  { opacity: 1; transform: translateY(0); transition-delay: 60ms; }
.reveal-stagger.in-view > *:nth-child(2)  { opacity: 1; transform: translateY(0); transition-delay: 120ms; }
.reveal-stagger.in-view > *:nth-child(3)  { opacity: 1; transform: translateY(0); transition-delay: 180ms; }
.reveal-stagger.in-view > *:nth-child(4)  { opacity: 1; transform: translateY(0); transition-delay: 240ms; }
.reveal-stagger.in-view > *:nth-child(5)  { opacity: 1; transform: translateY(0); transition-delay: 300ms; }
.reveal-stagger.in-view > *:nth-child(6)  { opacity: 1; transform: translateY(0); transition-delay: 360ms; }
.reveal-stagger.in-view > *:nth-child(n+7) { opacity: 1; transform: translateY(0); transition-delay: 420ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ═══ SECTION SHELL ═══════════════════════════════════════════════
   Rhythm rule: vary padding per section so the page breathes asymmetrically.
   Default is generous; .tight is for transitional sections; .open is for
   moments that need air. Avoids the uniform-120px monotony pattern.
   overflow: clip lets section-mesh + section-field children render
   absolute-positioned without escaping the section bounds. */
.section {
  position: relative;
  padding: clamp(80px, 11vw, 132px) 0;
  overflow: clip;
  isolation: isolate;
}
.section > .container { position: relative; z-index: 2; }
.section.tight { padding: clamp(60px, 8vw, 90px) 0; }
.section.open  { padding: clamp(110px, 14vw, 168px) 0; }
.problem      { padding-block: clamp(90px, 12vw, 144px) clamp(110px, 13vw, 156px); }
.flywheel     { padding-block: clamp(100px, 13vw, 156px); }
.practices    { padding-block: clamp(110px, 13vw, 152px) clamp(90px, 11vw, 132px); }
.industries   { padding-block: clamp(96px, 12vw, 140px); }
.numbers      { padding-block: clamp(80px, 10vw, 120px); }
.beliefs      { padding-block: clamp(110px, 14vw, 160px); }
.howwe        { padding-block: clamp(96px, 12vw, 138px); }
.faq          { padding-block: clamp(90px, 11vw, 130px); }
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 18px;
  font-size: 15px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--amber-2);
  margin-bottom: 32px;
}
.section-eyebrow::before {
  content: ''; width: 56px; height: 3px; border-radius: 2px;
  background: var(--grad-hero);
}
.section h2 {
  /* Secondary to the hero h1 (max 56px) - consistent across every section,
     never larger than the hero. */
  font-size: clamp(30px, 3.8vw, 50px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.032em;
  margin-bottom: 22px;
  max-width: 20ch;
}
.section h2 .grad {
  color: var(--teal);
  background: var(--grad-hero);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@media (forced-colors: active) {
  .section h2 .grad { -webkit-text-fill-color: currentColor; color: currentColor; }
}
.section h2 .serif { font-weight: 900; letter-spacing: -0.045em; }
.section-lead {
  font-size: 19px; color: rgba(255,255,255,0.7);
  /* 64ch keeps the line inside the 65-75ch reading-comfort band */
  max-width: 64ch; line-height: 1.65;
  margin-bottom: 56px;
}

/* ─── ALTERNATE H2 PATTERN ─────────────────────────────────────────
   The section-index numbering was removed. The .section-h2-lead class
   is kept as a no-op for markup compatibility and the center alignment. */
.section-h2-lead { display: block; }
.section-h2-lead[style*="justify-content:center"] { text-align: center; }
/* H2 phrase accent. Upright Instrument Serif provides typographic
   contrast against the 900-weight sans without italic. */
.serif-italic-h {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--amber-2);
}
/* Section label. Sized large enough to read as a true label, not as
   tiny-uppercase AI scaffolding. Sans, semibold, with a leading hairline
   that anchors it visually. */
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(20px, 1.9vw, 26px);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--amber-2);
  margin-bottom: clamp(20px, 2.4vw, 28px);
  padding: 0;
  border: none;
}
.section-kicker::before {
  content: '';
  display: inline-block;
  width: 44px;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
  border-radius: 2px;
}

/* ─── LIGHT-BG OVERRIDES ──────────────────────────────────────────
   On sand backgrounds (Industries, Tech Stack, Insights), the default
   amber-2 yellow has near-zero contrast against cream. Swap to the
   deeper variants that pass on a light surface. */
.industries .section-kicker,
.industries .serif-italic-h,
.bg-sand .section-kicker,
.bg-sand .serif-italic-h {
  color: var(--amber-deep);
}
.industries .serif-italic-h,
.bg-sand .serif-italic-h {
  color: #1a9e66; /* teal-deep, readable on sand */
}

/* ═══ PROBLEM SECTION ═════════════════════════════════════════════ */
.problem { background: var(--obsidian); position: relative; }
/* v3.7: replaced the 3px gradient side-stripe (brand-banned: no side-stripe
   borders >1px) with a hanging open-quote glyph in Instrument Serif. Reads
   as editorial typography, not as a card accent. */
.problem-quote {
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.28;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  max-width: 24ch;
  margin: 40px 0 64px;
  position: relative;
  padding-left: clamp(40px, 6vw, 72px);
}
.problem-quote::before {
  content: '\201C'; /* left double quotation mark */
  position: absolute;
  left: 0;
  top: -0.18em;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.8em;
  line-height: 1;
  color: var(--amber-2);
  opacity: 0.85;
}
/* v3.8: photon-assembly art beside the problem heading. Copy sits left;
   photons stream in on the right and assemble a wireframe structure tier by
   tier, then keep orbiting it. Stacks under the copy on mobile. */
.problem-head {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.problem-head-copy .problem-quote { margin-bottom: 0; }
.problem-art { position: relative; min-width: 0; }
.problem-art svg { display: block; width: 100%; height: auto; }
@media (max-width: 940px) {
  .problem-head { grid-template-columns: 1fr; gap: 40px; }
  .problem-art { max-width: 440px; margin-inline: auto; }
}
/* Asymmetric bento: 1 feature column + 3 stacked rows on the right.
   Replaces the generic "4 equal cards" pattern. */
.problem-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 18px;
}
.problem-grid .problem-card.feature {
  grid-row: span 3;
  padding: 44px 36px 40px;
}
@media (max-width: 880px) {
  .problem-grid { grid-template-columns: 1fr; }
  .problem-grid .problem-card.feature { grid-row: auto; }
}
.problem-card {
  position: relative;
  padding: 28px 28px 30px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.4s var(--ease-out), border-color 0.4s var(--ease-out), background 0.4s var(--ease-out);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 4px;
}
.problem-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--grad-hero);
  opacity: 0; transition: opacity 0.4s var(--ease-out);
}
.problem-card:hover { transform: translateY(-4px); border-color: rgba(245,158,11,0.25); }
.problem-card:hover::before { opacity: 1; }
.problem-card.feature::after {
  /* Decorative editorial halo; only on the feature card. Slow breathing
     pulse so the section feels alive without screaming. */
  content: ''; position: absolute; right: -80px; bottom: -80px;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,201,167,0.10), transparent 60%);
  pointer-events: none;
  animation: problem-halo-pulse 6s ease-in-out infinite;
}
@keyframes problem-halo-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.65; }
  50%      { transform: scale(1.15); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .problem-card.feature::after { animation: none; }
}
/* Scan-line sweep on the feature card. Runs once on viewport entry via
   the .scan-once class added by the IntersectionObserver. */
.problem-card.feature {
  --scan-pos: -100%;
}
.problem-card.feature.scan-once::before {
  /* Borrow the existing top hairline; layer an actual sweeping line
     using a sibling pseudo via background-image on the card itself. */
  opacity: 1;
}
.problem-card.feature.scan-once {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005)),
    linear-gradient(180deg,
      transparent calc(var(--scan-pos) - 6px),
      rgba(245,158,11,0.0) calc(var(--scan-pos) - 4px),
      rgba(245,158,11,0.18) var(--scan-pos),
      rgba(245,158,11,0.0) calc(var(--scan-pos) + 4px),
      transparent calc(var(--scan-pos) + 6px)
    );
  animation: problem-scan 2.2s var(--ease-out) forwards;
}
@keyframes problem-scan {
  0%   { --scan-pos: -8%; }
  100% { --scan-pos: 108%; }
}
@property --scan-pos {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -8%;
}
@media (prefers-reduced-motion: reduce) {
  .problem-card.feature.scan-once { animation: none; }
}
.problem-card-num {
  font-weight: 900; letter-spacing: -0.02em;
  font-size: 22px; color: var(--amber-2);
  margin-bottom: 18px;
  display: block;
  font-family: var(--font-sans);
}
.problem-card.feature .problem-card-num { font-size: 32px; color: var(--amber); margin-bottom: 28px; }
.problem-card h4 {
  font-size: 18px; font-weight: 700; letter-spacing: -0.015em;
  margin-bottom: 10px; color: white;
}
.problem-card.feature h4 { font-size: 28px; line-height: 1.18; letter-spacing: -0.025em; margin-bottom: 16px; }
.problem-card p {
  font-size: 14.5px; color: rgba(255,255,255,0.62); line-height: 1.65;
  max-width: 50ch;
}
.problem-card.feature p { font-size: 16px; line-height: 1.62; color: rgba(255,255,255,0.74); max-width: 56ch; }

/* ═══ FLYWHEEL SECTION ════════════════════════════════════════════ */
.flywheel {
  background: linear-gradient(180deg, var(--obsidian) 0%, #0A0D1E 50%, var(--obsidian) 100%);
  position: relative;
  overflow: hidden;
}
.flywheel::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 50%, rgba(245,158,11,0.10), transparent 50%),
    radial-gradient(circle at 70% 50%, rgba(0,201,167,0.10), transparent 50%);
  pointer-events: none;
}
.flywheel-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(20px);
}
/* ─── FLYWHEEL SIGNAL TRACE ────────────────────────────────────────
   SVG curve runs along the lower band of the grid, dipping up to meet
   the mark at center. Sits at z-index 0 so the panels' backdrop-filter
   blurs it into ambient depth; text content at z-index 2 stays crisp.
   The mark at z-index 3 stays on top. */
.flywheel-trace {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.flywheel-trace .flywheel-trace-line {
  /* Drawn on entry via stroke-dasharray. Path length ≈ 1480; using 2000
     for a safe upper bound. CSS transitions handle the draw-in. */
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 2.4s var(--ease-out) 0.4s;
}
.flywheel-grid.in-view .flywheel-trace .flywheel-trace-line {
  stroke-dashoffset: 0;
}
.flywheel-trace .flywheel-photon {
  opacity: 0;
  transition: opacity 1.2s var(--ease-out) 1.8s;
}
.flywheel-grid.in-view .flywheel-trace .flywheel-photon { opacity: 1; }
@media (max-width: 880px) {
  /* Mobile collapses the grid to a vertical stack; the horizontal trace
     becomes nonsensical. Hide entirely on small screens. */
  .flywheel-trace { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .flywheel-trace .flywheel-trace-line { stroke-dashoffset: 0; transition: none; }
  .flywheel-trace .flywheel-photon { display: none; }
}
@media (max-width: 880px) { .flywheel-grid { grid-template-columns: 1fr; } }
.flywheel-panel {
  padding: 56px 48px;
  position: relative;
  /* iOS liquid glass: takes its colour from the mesh behind it */
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  overflow: hidden;
  isolation: isolate;
  transition: background var(--d-std) var(--ease-emphasis-out), border-color var(--d-std) var(--ease-emphasis-out);
}
.flywheel-panel > * { position: relative; z-index: 2; }
.flywheel-panel.left {
  /* Teal-tinted glass over a heavier obsidian base. The base layer blocks
     the trace photons from bleeding through into the text zone; the teal
     tint preserves the brand glass character. */
  background:
    linear-gradient(135deg, rgba(0, 201, 167, 0.08), rgba(0, 201, 167, 0.03)),
    rgba(8, 11, 24, 0.55);
  border-right: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(0, 201, 167, 0.10);
}
.flywheel-panel.right {
  /* Amber-tinted glass over the same obsidian base. Symmetric pair. */
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.03)),
    rgba(8, 11, 24, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(245, 158, 11, 0.10);
}
/* Specular sweep on each panel. Opposing directions encode the loop.
   GPU-only: animates `transform: translateX` instead of `left`/`right`
   so each keyframe step is composite-only, not a layout invalidation. */
.flywheel-panel::after {
  content: '';
  position: absolute; top: 0; left: 0; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
  pointer-events: none; z-index: 1;
  will-change: transform;
}
.flywheel-panel.left::after  {
  transform: translate3d(-220%, 0, 0) skewX(-14deg);
  animation: xp-flywheel-sweep-l 14s var(--ease-out) infinite;
}
.flywheel-panel.right::after {
  transform: translate3d(220%, 0, 0) skewX(14deg);
  animation: xp-flywheel-sweep-r 14s var(--ease-out) infinite;
}
@keyframes xp-flywheel-sweep-l {
  0%   { transform: translate3d(-220%, 0, 0) skewX(-14deg); }
  55%  { transform: translate3d(420%, 0, 0)  skewX(-14deg); }
  100% { transform: translate3d(420%, 0, 0)  skewX(-14deg); }
}
@keyframes xp-flywheel-sweep-r {
  0%   { transform: translate3d(220%, 0, 0)  skewX(14deg); }
  55%  { transform: translate3d(-420%, 0, 0) skewX(14deg); }
  100% { transform: translate3d(-420%, 0, 0) skewX(14deg); }
}
@media (prefers-reduced-motion: reduce) {
  .flywheel-panel::after { animation: none; display: none; }
}
@media (max-width: 880px) {
  .flywheel-panel.left { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
}
.flywheel-pip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 16px;
}
.flywheel-panel.left .flywheel-pip { color: var(--amber); }
.flywheel-panel.right .flywheel-pip { color: var(--teal); }
.flywheel-arrow {
  font-size: 18px;
  display: inline-flex; align-items: center;
}
.flywheel-panel h3 {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.15;
  margin-bottom: 16px;
}
.flywheel-panel p {
  font-size: 15.5px; color: rgba(255,255,255,0.72); line-height: 1.7;
}
.flywheel-divider {
  position: absolute; top: 0; left: 50%; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(245,158,11,0.5), rgba(0,201,167,0.5), transparent);
  z-index: 2;
  display: none;
}
@media (min-width: 881px) { .flywheel-divider { display: block; } }
/* The brand mark sits at the divider centre. It IS the flywheel visually.
   v3.7 motion: replaced the constant 360deg spin (generic AI flourish) with
   a pendulum oscillation paired with a quiet breathing scale and a glow
   pulse on the drop-shadow. Feels considered, not generic. */
.flywheel-mark {
  position: absolute; top: 50%; left: 50%;
  width: 96px; height: 96px;
  transform-origin: center;
  z-index: 3;
  filter: drop-shadow(0 0 24px rgba(0,201,167,0.35)) drop-shadow(0 0 14px rgba(245,158,11,0.22));
  /* Two animations on different properties (transform + filter) compose cleanly.
     A single composed transform keyframe handles the pendulum + breathe motion
     so the two transforms don't fight for the same property. */
  animation:
    flywheel-mark-composed 11s var(--ease-soft) infinite,
    flywheel-mark-aura 5.2s ease-in-out infinite;
  will-change: transform, filter;
}
@keyframes flywheel-mark-composed {
  0%   { transform: translate(-50%, -50%) rotate(-9deg) scale(1); }
  25%  { transform: translate(-50%, -50%) rotate(0deg)  scale(1.04); }
  50%  { transform: translate(-50%, -50%) rotate(9deg)  scale(1); }
  75%  { transform: translate(-50%, -50%) rotate(0deg)  scale(1.04); }
  100% { transform: translate(-50%, -50%) rotate(-9deg) scale(1); }
}
@keyframes flywheel-mark-aura {
  0%, 100% { filter: drop-shadow(0 0 22px rgba(0,201,167,0.30)) drop-shadow(0 0 12px rgba(245,158,11,0.18)); }
  50%      { filter: drop-shadow(0 0 36px rgba(0,201,167,0.55)) drop-shadow(0 0 22px rgba(245,158,11,0.34)); }
}
@media (prefers-reduced-motion: reduce) {
  .flywheel-mark {
    animation: none;
    filter: drop-shadow(0 0 26px rgba(0,201,167,0.4)) drop-shadow(0 0 14px rgba(245,158,11,0.25));
  }
}
.flywheel-divider::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 56px; height: 56px;
  transform: translate(-50%, -50%);
  background: var(--grad-warm);
  border-radius: 50%;
  display: none; /* legacy gradient circle replaced by the real mark above */
  box-shadow: var(--glow-mix);
  animation: spin 12s linear infinite;
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.flywheel-callout {
  margin-top: 56px;
  font-weight: 500; letter-spacing: -0.02em;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.35;
  color: rgba(255,255,255,0.86);
  text-align: center;
  max-width: 800px;
  margin-left: auto; margin-right: auto;
}
.flywheel-callout .grad { background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ═══ PRACTICES ═══════════════════════════════════════════════════ */
.practices { background: var(--obsidian); }
.practices-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px;
}
.practices-grid .practice:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.practices-grid .practice:nth-child(2) { grid-column: 2 / span 2; grid-row: 1; }
.practices-grid .practice:nth-child(3) { grid-column: 2; grid-row: 2; }
.practices-grid .practice:nth-child(4) { grid-column: 3; grid-row: 2; }
.practices-grid .practice:nth-child(5) { grid-column: 1 / -1; grid-row: 3; min-height: 240px; }
@media (max-width: 980px) {
  .practices-grid { grid-template-columns: 1fr 1fr; }
  .practices-grid .practice { grid-column: auto !important; grid-row: auto !important; }
  .practices-grid .practice:nth-child(5) { grid-column: 1 / -1 !important; }
}
@media (max-width: 600px) {
  .practices-grid { grid-template-columns: 1fr; }
}
.practice {
  position: relative;
  border-radius: var(--r-lg);
  padding: 36px 32px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008));
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  transition: transform 0.45s var(--ease-out), border-color 0.45s var(--ease-out);
  isolation: isolate;
  display: flex; flex-direction: column;
}
.practice::before {
  /* v3.7: dim the always-on top accent to 0 in rest state. The hover state
     brings it in at full opacity. Quieter at rest, livelier on interaction. */
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--accent, var(--grad-hero));
  opacity: 0; transition: opacity 0.4s var(--ease-out), height 0.4s var(--ease-out);
}
.practice::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.06), transparent 40%);
  opacity: 0; transition: opacity 0.5s var(--ease-out);
  pointer-events: none; z-index: 1;
}
.practice:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.18); }
.practice:hover::before { opacity: 1; height: 3px; }
.practice:hover::after { opacity: 1; }
.practice > * { position: relative; z-index: 2; }
.practice-num {
  font-weight: 800; letter-spacing: 0.12em;
  font-size: 13px; color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.practice-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--icon-bg, rgba(245,158,11,0.12));
  border: 1px solid var(--icon-bd, rgba(245,158,11,0.28));
  color: var(--icon-c, var(--amber));
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 24px;
  transition: transform 0.4s var(--ease-spring);
}
.practice:hover .practice-icon { transform: rotate(-8deg) scale(1.08); }
.practice h3 {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.12;
  margin-bottom: 14px;
}
.practice-desc {
  font-size: 14.5px; color: rgba(255,255,255,0.65); line-height: 1.65;
  margin-bottom: 24px;
  flex: 1;
}
.practice-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.practice-tag {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  padding: 5px 11px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px; color: rgba(255,255,255,0.7);
}
.practice-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600;
  color: var(--accent-text, white);
  transition: gap 0.3s var(--ease-out);
}
.practice-link:hover { gap: 14px; }
.practice-link svg { transition: transform 0.3s var(--ease-out); }

/* Per-practice accents */
.practice.amber  { --accent: var(--grad-warm); --icon-bg: rgba(245,158,11,0.12); --icon-bd: rgba(245,158,11,0.32); --icon-c: var(--amber-2); --accent-text: var(--amber-2); }
.practice.teal   { --accent: linear-gradient(135deg, #00C9A7, #3DDC97); --icon-bg: rgba(0,201,167,0.12); --icon-bd: rgba(0,201,167,0.32); --icon-c: var(--teal); --accent-text: var(--teal); }
.practice.violet { --accent: linear-gradient(135deg, #7C3AED, #F59E0B); --icon-bg: rgba(124,58,237,0.12); --icon-bd: rgba(124,58,237,0.32); --icon-c: var(--violet-2); --accent-text: var(--violet-2); }
.practice.green  { --accent: linear-gradient(135deg, #3DDC97, #F59E0B); --icon-bg: rgba(61,220,151,0.12); --icon-bd: rgba(61,220,151,0.32); --icon-c: var(--teal-2); --accent-text: var(--teal-2); }
.practice.rose   { --accent: linear-gradient(135deg, #F59E0B, #7C3AED); --icon-bg: rgba(245,158,11,0.10); --icon-bd: rgba(245,158,11,0.30); --icon-c: var(--amber-2); --accent-text: var(--amber-2); }
.practice.featured {
  background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(0,201,167,0.10), rgba(245,158,11,0.12));
  background-size: 220% 220%;
  border-color: rgba(245,158,11,0.32);
  animation: featured-sheen 16s ease-in-out infinite;
}
/* Quiet, perpetual prominence on the lead practice card. GPU-cheap (one
   element, background-position only), motion-gated for accessibility. */
@keyframes featured-sheen {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .practice.featured { animation: none; }
}
.practice.wide {
  flex-direction: row; align-items: center; gap: 40px;
}
.practice.wide .practice-icon { flex-shrink: 0; }
.practice.wide-content { flex: 1; }
@media (max-width: 700px) {
  .practice.wide { flex-direction: column; align-items: flex-start; gap: 0; }
}

/* ═══ INDUSTRIES, horizontal scroll-snap ═════════════════════════ */
.industries {
  background: var(--sand);
  color: var(--ink);
  position: relative;
}
.industries .section-eyebrow { color: var(--amber-deep); }
.industries .section-eyebrow::before { background: var(--grad-warm); }
.industries h2 { color: var(--ink); }
.industries h2 .grad { background: linear-gradient(135deg, #c47d00 0%, #1a9e66 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.industries .section-lead { color: var(--ink-2); }
.industries-row {
  display: flex; gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px 0 24px;
  margin: 0 -32px; padding-left: 32px; padding-right: 32px;
  scrollbar-width: thin; scrollbar-color: var(--amber) transparent;
}
.industries-row::-webkit-scrollbar { height: 6px; }
.industries-row::-webkit-scrollbar-track { background: rgba(8,11,24,0.08); border-radius: 4px; }
.industries-row::-webkit-scrollbar-thumb { background: var(--grad-warm); border-radius: 4px; }
.industry-card {
  scroll-snap-align: start;
  flex: 0 0 360px;
  background: var(--white);
  border-radius: var(--r-lg);
  border: 1px solid rgba(8,11,24,0.08);
  padding: 32px 28px 36px;
  position: relative; overflow: hidden;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.industry-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-warm);
  transform-origin: left;
  transform: scaleX(0); transition: transform 0.6s var(--ease-out);
}
.industry-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -25px rgba(8,11,24,0.25); }
.industry-card:hover::before { transform: scaleX(1); }
.industry-card-num { font-weight: 800; letter-spacing: 0.12em; font-size: 13px; text-transform: uppercase; color: var(--amber-deep); margin-bottom: 18px; }
.industry-card h4 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; color: var(--ink); }
.industry-card p { font-size: 14.5px; color: var(--body-dark); line-height: 1.65; margin-bottom: 22px; }
.industry-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.industry-tag {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  padding: 4px 10px;
  background: rgba(245,158,11,0.08);
  color: var(--amber-deep);
  border-radius: 999px;
}
.industry-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700;
  color: var(--amber-deep);
}

/* ═══ HOW WE WORK, phase pinned ══════════════════════════════════ */
.howwe { background: var(--obsidian); position: relative; }
.howwe-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  position: relative;
}
/* The old static gradient line was replaced by the animated SVG trace
   that sits as a sibling above the grid. */
/* ─── PHASE SIGNAL TRACE ──────────────────────────────────────────
   Lives inside the grid as the first child, absolutely positioned to
   align with the orb centerline. Opts out of the reveal-stagger
   transform via specificity. Phase orb centerline ≈ 66px from grid top
   (padding 28px + 76/2). SVG line is at y=8 inside a 16px box, so the
   SVG sits at top: 58px. */
.howwe-grid { isolation: isolate; }
.howwe-trace {
  position: absolute !important;
  top: 58px;
  left: 6%; right: 6%;
  height: 16px;
  width: auto;
  pointer-events: none;
  z-index: 0;
  /* Important to defeat .reveal-stagger > *:nth-child(1) transform override */
  transform: none !important;
  /* Always visible regardless of reveal-stagger opacity cascade */
  opacity: 1 !important;
}
.howwe-trace .howwe-trace-line {
  stroke-dasharray: 1300;
  stroke-dashoffset: 1300;
  transition: stroke-dashoffset 2.2s var(--ease-out) 0.2s;
}
.howwe-grid.in-view ~ .howwe-trace .howwe-trace-line,
.howwe-trace.is-live .howwe-trace-line { stroke-dashoffset: 0; }
.howwe-trace .howwe-photon { opacity: 0; transition: opacity 0.9s var(--ease-out) 1.6s; }
.howwe-trace.is-live .howwe-photon { opacity: 1; }
@media (max-width: 880px) {
  .howwe-trace { display: none; }
  .howwe-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .howwe-trace .howwe-trace-line { stroke-dashoffset: 0; transition: none; }
  .howwe-trace .howwe-photon { display: none; }
}
@media (max-width: 540px) { .howwe-grid { grid-template-columns: 1fr; } }
.phase {
  position: relative; z-index: 1;
  padding: 28px 24px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  transition: transform 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.phase:hover { transform: translateY(-4px); border-color: rgba(245,158,11,0.3); }
.phase-orb {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--obsidian);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; letter-spacing: -0.04em;
  font-size: 26px;
  margin-bottom: 24px;
  position: relative;
  color: white;
}
.phase-orb::before {
  content: ''; position: absolute; inset: -2px;
  border-radius: 50%; padding: 2px;
  background: var(--phase-grad, var(--grad-hero));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.phase:nth-child(1) { --phase-grad: linear-gradient(135deg, #F59E0B, #FBBF24); }
.phase:nth-child(2) { --phase-grad: linear-gradient(135deg, #FBBF24, #34D399); }
.phase:nth-child(3) { --phase-grad: linear-gradient(135deg, #34D399, #00C9A7); }
.phase:nth-child(4) { --phase-grad: linear-gradient(135deg, #00C9A7, #7C3AED); }
.phase-meta { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber-2); margin-bottom: 10px; font-weight: 700; }
.phase h4 { font-size: 19px; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 12px; }
.phase p { font-size: 14px; color: rgba(255,255,255,0.62); line-height: 1.6; }

/* ═══ NUMBERS ═════════════════════════════════════════════════════ */
.numbers {
  position: relative;
  background:
    radial-gradient(ellipse 60% 40% at 75% 30%, rgba(245,158,11,0.10), transparent 60%),
    radial-gradient(ellipse 60% 40% at 25% 70%, rgba(0,201,167,0.10), transparent 60%),
    var(--obsidian);
  overflow: hidden;
}
.numbers::after {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 100% 64px;
  mask-image: linear-gradient(180deg, transparent, black 30%, black 70%, transparent);
}
.numbers-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  position: relative; z-index: 1;
}
@media (max-width: 880px) { .numbers-grid { grid-template-columns: repeat(2, 1fr); } }
.number-card {
  padding: 36px 28px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  position: relative; overflow: hidden;
  transition: border-color 0.4s var(--ease-out);
}
.number-card:hover { border-color: rgba(245,158,11,0.3); }
.number-card-num {
  /* Demoted from gradient text. Solid amber with a serif italic unit reads as
     editorial rather than as the SaaS hero-metric template. */
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin-bottom: 14px;
  color: var(--amber-2);
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.number-card-num small {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.42em;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0;
  margin-left: 4px;
}
.number-card-label { font-size: 14px; font-weight: 600; color: white; margin-bottom: 6px; }
.number-card-desc { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.55; }

/* ═══ BELIEFS ═════════════════════════════════════════════════════ */
.beliefs {
  background: linear-gradient(180deg, var(--obsidian) 0%, #0C0F1F 50%, var(--obsidian) 100%);
}
.beliefs-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px 64px;
  align-items: start;
}
@media (max-width: 880px) { .beliefs-grid { grid-template-columns: 1fr; } }
.belief {
  padding-top: 28px;
  /* Top hairline drawn left-to-right on viewport entry via background-size.
     Avoids animating border-width (a layout property). */
  position: relative;
  background-image: linear-gradient(90deg, var(--amber-2) 0%, var(--teal) 100%);
  background-size: 0% 1px;
  background-position: 0 0;
  background-repeat: no-repeat;
  border-top: 1px solid rgba(255,255,255,0.08);
  transition: background-size 1.2s var(--ease-out), border-color 0.4s var(--ease-out);
}
.belief.is-live { background-size: 100% 1px; border-top-color: transparent; }
.belief-num {
  position: absolute; top: 28px; right: 0;
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 28px;
  color: var(--amber-2);
  opacity: 0.9;
}
.belief:hover { background-size: 100% 1.5px; }
@media (prefers-reduced-motion: reduce) {
  .belief { background-size: 100% 1px; border-top-color: transparent; transition: none; }
}
.belief h4 {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25;
  margin-bottom: 12px; padding-top: 22px;
  max-width: 24ch;
}
.belief p {
  font-size: 15px; color: rgba(255,255,255,0.65); line-height: 1.65;
  max-width: 44ch;
}

/* ═══ PROOF / TESTIMONIAL ═════════════════════════════════════════ */
.proof {
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(245,158,11,0.12), transparent 65%),
    var(--obsidian);
  text-align: center;
}
.proof-mark {
  font-weight: 900; letter-spacing: -0.05em;
  font-size: 84px;
  background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1; margin-bottom: 8px;
}
.proof-quote {
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.22;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: rgba(255,255,255,0.94);
  max-width: 24ch;
  margin: 0 auto 36px;
}
.proof-attrib {
  display: inline-flex; align-items: center; gap: 14px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.proof-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--grad-warm);
  color: var(--obsidian);
  font-weight: 800; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.proof-attrib-text { text-align: left; }
.proof-attrib-text strong { display: block; font-size: 14px; color: white; }
.proof-attrib-text span { display: block; font-size: 12.5px; color: var(--mid); }

/* ═══ FAQ ═════════════════════════════════════════════════════════ */
.faq { background: var(--obsidian); }
.faq-list { max-width: 880px; margin: 0 auto; }
.faq-item {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.faq-item:last-of-type { border-bottom: 1px solid rgba(255,255,255,0.08); }
.faq-summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 600;
  letter-spacing: -0.015em;
  list-style: none;
  transition: color 0.3s var(--ease-out);
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary:hover { color: var(--amber-2); }
.faq-summary::after {
  /* 44x44 meets WCAG 2.5.5 / 2.5.8 minimum touch target */
  content: ''; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 14px 1.5px, 1.5px 14px;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.4s var(--ease-out), background-size 0.4s var(--ease-out);
  color: rgba(255,255,255,0.7);
}
.faq-item[open] .faq-summary::after { transform: rotate(135deg); color: var(--amber-2); }
.faq-body {
  padding-top: 18px;
  font-size: 15.5px; color: rgba(255,255,255,0.7); line-height: 1.7;
  max-width: 68ch;
}

/* ═══ SECTION MESH + FIELD (reusable CTA-finale aesthetic) ════════
   Two layers per section:
     .section-mesh:  animated radial-gradient mesh (CSS only, GPU paint)
     .section-field: optional canvas constellation (drifting particles)
   Both sit at z-index 0/1 under the .container content (z-index 2).
   Palette is set per section via data-palette on .section-mesh. */
.section-mesh {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 58% at 26% 36%, var(--mesh-a, rgba(0,201,167,0.22)), transparent 60%),
    radial-gradient(ellipse 56% 60% at 78% 70%, var(--mesh-b, rgba(245,158,11,0.22)), transparent 62%);
  animation: heroMesh 26s ease-in-out infinite alternate;
  /* Vignette so the mesh fades into the section edges */
  mask-image: radial-gradient(ellipse 92% 92% at 50% 50%, black 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 92% 92% at 50% 50%, black 60%, transparent 100%);
}
.section-mesh[data-palette="violet-teal"] { --mesh-a: rgba(124,58,237,0.20); --mesh-b: rgba(0,201,167,0.18); }
.section-mesh[data-palette="amber-warm"]  { --mesh-a: rgba(245,158,11,0.28); --mesh-b: rgba(252,191,36,0.16); }
.section-mesh[data-palette="teal-amber"]  { --mesh-a: rgba(0,201,167,0.24);  --mesh-b: rgba(245,158,11,0.24); }
.section-mesh[data-palette="teal-violet"] { --mesh-a: rgba(0,201,167,0.20);  --mesh-b: rgba(124,58,237,0.18); }
.section-mesh[data-palette="amber-violet"]{ --mesh-a: rgba(245,158,11,0.22); --mesh-b: rgba(124,58,237,0.18); }
.section-field {
  position: absolute; inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s var(--ease-out);
  mix-blend-mode: screen;
}
.section-field.is-live { opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  .section-mesh { animation: none; }
  .section-field { display: none; }
}

/* ═══ CTA FINALE ══════════════════════════════════════════════════ */
.cta-finale {
  position: relative; overflow: hidden;
  padding: clamp(120px, 14vw, 168px) 0;
  isolation: isolate;
  text-align: center;
}
.cta-finale-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 60% at 30% 50%, rgba(245,158,11,0.4), transparent 60%),
    radial-gradient(ellipse 60% 60% at 70% 50%, rgba(0,201,167,0.35), transparent 60%),
    var(--obsidian);
  animation: heroMesh 18s ease-in-out infinite alternate;
}
.cta-field {
  /* Constellation overlay. Same renderer as hero, lower density,
     constellation variant draws floating particles with proximity lines. */
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s var(--ease-out) 0.2s;
  mix-blend-mode: screen;
}
.cta-field.is-live { opacity: 0.85; }
@media (prefers-reduced-motion: reduce) {
  .cta-field { display: none; }
}
.cta-finale h2 {
  /* Matches the hero h1 scale as a bookend - never exceeds it. */
  font-size: clamp(28px, 4.2vw, 56px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.06;
  margin: 0 auto 28px;
  max-width: 20ch;
}
.cta-finale h2 .grad { background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cta-finale-sub {
  font-size: 18px; color: rgba(255,255,255,0.7);
  max-width: 56ch; margin: 0 auto 44px;
  line-height: 1.6;
}
.cta-finale-actions {
  display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}
.colour-band {
  height: 3px;
  background: var(--grad-band);
  background-size: 200% 100%;
  animation: gradShift 12s linear infinite;
}

/* ═══ FOOTER ══════════════════════════════════════════════════════ */
.xp-footer {
  background: var(--obsidian);
  padding: 80px 0 36px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.xp-footer-top {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px;
  margin-bottom: 56px;
}
@media (max-width: 980px) { .xp-footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .xp-footer-top { grid-template-columns: 1fr; } }
.xp-footer-brand-name {
  /* Solid white. Gradient stays on the nav lockup (identity moment) but the
     footer mark is repeated context, doesn't need the gradient repeated. */
  display: flex; align-items: center; gap: 12px;
  font-size: 24px; font-weight: 900; letter-spacing: -0.025em;
  color: var(--white);
  margin-bottom: 14px;
}
.xp-footer-tagline { font-size: 14px; color: rgba(255,255,255,0.62); line-height: 1.6; max-width: 36ch; margin-bottom: 24px; }
.xp-footer-social { display: flex; gap: 10px; }
.xp-footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.7);
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.xp-footer-social a:hover { background: rgba(245,158,11,0.12); color: var(--amber-2); border-color: rgba(245,158,11,0.32); }
.xp-footer-col h4 { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 18px; }
.xp-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.xp-footer-col a { font-size: 14px; color: rgba(255,255,255,0.78); transition: color 0.25s var(--ease-out); }
.xp-footer-col a:hover { color: var(--amber-2); }
.xp-footer-bottom {
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
  font-size: 12.5px; color: rgba(255,255,255,0.5);
}
.xp-footer-meta { display: flex; gap: 22px; }
.xp-footer-meta a:hover { color: var(--amber-2); }
/* Touch: enlarge footer tap targets so adjacent links can't be mis-tapped.
   The 14px links at 10px gaps were ~20px tall, under the 44px touch guideline,
   so on phones/tablets a tap could land on the neighbouring link (reading as
   "went to the wrong page"). Block-level links make the whole row tappable. */
@media (max-width: 900px) {
  .xp-footer-col a { display: block; padding: 9px 0; }
  .xp-footer-col ul { gap: 2px; }
  .xp-footer-meta { flex-wrap: wrap; gap: 4px 20px; }
  .xp-footer-meta a { display: inline-block; padding: 9px 2px; }
}

/* ═══ REVEAL / ANIMATION ══════════════════════════════════════════
   .reveal-stagger is defined once earlier in this file (line ~545).
   Removed the duplicate that lived here and was overriding the timing. */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); will-change: transform, opacity; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
  .hero h1 .reveal-inner { transform: none !important; }
  .hero-eyebrow, .hero-sub, .hero-actions, .hero-stats { opacity: 1 !important; transform: none !important; }
}

/* ═══ TECH-STACK SCANNER ══════════════════════════════════════════
   Single sweep on viewport entry: an amber band travels top-to-bottom
   across the grid via background-position (paint-only, no layout). The
   tech-stack-grid is in xperion.css; we scope the position context. */
#stack .tech-stack-grid { position: relative; }
.stack-scanner {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 5;
  background-image: linear-gradient(180deg,
    transparent calc(50% - 38px),
    rgba(245,158,11,0.08) calc(50% - 16px),
    rgba(245,158,11,0.38) 50%,
    rgba(245,158,11,0.08) calc(50% + 16px),
    transparent calc(50% + 38px));
  background-size: 100% 76px;
  background-position: 50% -76px;
  background-repeat: no-repeat;
  opacity: 0;
  mix-blend-mode: multiply;
  border-radius: inherit;
}
.tech-stack-grid.is-scanning .stack-scanner {
  animation: stack-scan 2.8s var(--ease-out) forwards;
}
@keyframes stack-scan {
  0%   { opacity: 0; background-position: 50% -8%; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; background-position: 50% 108%; }
}
@media (prefers-reduced-motion: reduce) {
  .stack-scanner { display: none; }
}

/* ═══ NUMBERS UNDERLINE + GLOW ═════════════════════════════════════
   Underline draws across each number-card on viewport entry. Stagger
   handled by the existing reveal-stagger transition-delay cascade. */
.number-card {
  background-image:
    linear-gradient(rgba(255,255,255,0.02), rgba(255,255,255,0.02)),
    linear-gradient(90deg, var(--amber-2) 0%, var(--teal) 100%);
  background-size: 100% 100%, 0% 2px;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  transition:
    background-size 1.4s var(--ease-out),
    border-color 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out);
}
.number-card.is-live {
  background-size: 100% 100%, 100% 2px;
  box-shadow:
    0 0 0 1px rgba(245,158,11,0.18),
    0 20px 50px -30px rgba(245,158,11,0.5);
}
@media (prefers-reduced-motion: reduce) {
  .number-card { background-size: 100% 100%, 100% 2px; transition: none; }
}

/* ═══ INDUSTRIES SCROLL-PROGRESS DOTS ══════════════════════════════
   Five dots above the horizontal scroll row; the dot for the
   nearest-centered card lights up. Tapping a dot scrolls to that card. */
.industries-progress {
  display: flex; justify-content: center; gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.industries-dot {
  width: 32px; height: 4px;
  border: none; padding: 0;
  border-radius: 999px;
  background: rgba(8,11,24,0.14);
  cursor: pointer;
  transition: background 0.4s var(--ease-out), width 0.4s var(--ease-out);
}
.industries-dot[aria-current="true"] {
  background: var(--amber-deep);
  width: 48px;
}
@media (max-width: 700px) {
  .industries-progress { gap: 8px; }
  .industries-dot { width: 24px; }
  .industries-dot[aria-current="true"] { width: 36px; }
}

/* ═══ FAQ SMOOTHER OPEN ════════════════════════════════════════════
   Native <details> snaps. We wrap content in a grid container that
   transitions grid-template-rows from 0fr to 1fr (composite-friendly). */
.faq-item .faq-body-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease-out);
}
.faq-item[open] .faq-body-wrap { grid-template-rows: 1fr; }
.faq-item .faq-body-wrap > .faq-body {
  overflow: hidden;
  min-height: 0;
}
@media (prefers-reduced-motion: reduce) {
  .faq-item .faq-body-wrap { transition: none; }
}

/* ═══ 3D SCROLL TILT ══════════════════════════════════════════════
   Extracted from the Aceternity ContainerScroll behaviour: as the
   element scrolls into view, its content starts tilted forward
   (rotateX 18deg, scaled down, faded) and "stands up" to flat by the
   time it reaches the upper third of the viewport. JS writes four CSS
   variables per element inside an rAF loop, gated by IntersectionObserver
   so offscreen elements do no work. Applied to each section's .container
   below the hero. */
.scroll-3d {
  --s3d-rotate: 0deg;
  --s3d-scale: 1;
  --s3d-translate: 0px;
  --s3d-opacity: 1;
  transform-origin: 50% 0%;
  transform:
    perspective(1400px)
    translate3d(0, var(--s3d-translate), 0)
    rotateX(var(--s3d-rotate))
    scale(var(--s3d-scale));
  opacity: var(--s3d-opacity);
  will-change: transform, opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-3d {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ═══ SKIP LINK ════════════════════════════════════════════════════ */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: 12px 20px; background: var(--amber); color: var(--obsidian);
  font-weight: 700; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ── 03-04 · HERO v4 (WebGL) + CLIENTS MARQUEE ───────────────────── */
/* ════════ HERO v4 - WebGL intelligence-field + asymmetric stage ════════
   Loaded after the main inline block so these rules win on source order. */
.hero { min-height: 100dvh; padding-top: clamp(86px, 11vh, 120px); padding-bottom: clamp(64px, 8vh, 104px); }
@media (max-height: 780px) { .hero { min-height: 100dvh; padding-top: 84px; padding-bottom: 46px; } }
@media (max-height: 640px) { .hero { min-height: auto; } }

/* Zoomed-out hero type scale + tighter rhythm so the whole section fits one
   screen on desktop and mobile without scrolling. */
.hero-eyebrow { margin-bottom: clamp(12px, 1.5vw, 18px); }
.hero h1 { font-size: clamp(29px, 4.2vw, 56px); line-height: 1.08; margin-bottom: clamp(12px, 1.5vw, 20px); }
.hero-sub { font-size: clamp(14px, 1vw, 16.5px); line-height: 1.55; margin-bottom: clamp(16px, 2vw, 26px); max-width: 50ch; }
.hero-actions { margin-bottom: clamp(16px, 2vw, 26px); }
.hero-stats { padding-top: clamp(14px, 1.6vw, 20px); gap: clamp(12px, 2vw, 30px); }
.hero-stat-num { font-size: clamp(20px, 2vw, 30px); }

/* Living mesh-gradient aurora behind the particle field */
.hero-aurora {
  position: absolute; inset: -15%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 46% at 70% 38%, rgba(0,201,167,0.34), transparent 62%),
    radial-gradient(34% 40% at 84% 64%, rgba(245,158,11,0.26), transparent 64%),
    radial-gradient(30% 36% at 58% 30%, rgba(124,58,237,0.18), transparent 66%);
  filter: blur(20px) saturate(1.06);
  mix-blend-mode: screen; opacity: 0.92;
  animation: heroAurora 26s ease-in-out infinite alternate;
}
@keyframes heroAurora {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-3%,2%,0) scale(1.08); }
  100% { transform: translate3d(2%,-2%,0) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .hero-aurora { animation: none; } }

/* WebGL canvas - full-bleed, fades in once the renderer reports live */
.hero-gl {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; pointer-events: none;
  opacity: 0; transition: opacity 1.4s var(--ease-out) 0.2s;
  /* Mobile/base: concentrate the field centre, fade the edges */
  -webkit-mask-image: radial-gradient(ellipse 78% 78% at 50% 42%, #000 38%, transparent 86%);
  mask-image: radial-gradient(ellipse 78% 78% at 50% 42%, #000 38%, transparent 86%);
}
.hero-gl.is-live { opacity: 1; }
/* Desktop: fade the field away from the left copy column so the headline
   stays legible and the luminous loop reads as a right-anchored asset. */
@media (min-width: 981px) {
  .hero-gl {
    -webkit-mask-image: linear-gradient(90deg, transparent 2%, rgba(0,0,0,0.18) 30%, #000 58%);
    mask-image: linear-gradient(90deg, transparent 2%, rgba(0,0,0,0.18) 30%, #000 58%);
  }
}
@media (prefers-reduced-motion: reduce) { .hero-gl { display: none; } }

/* Once the loop is live the static watermark recedes to a faint base */
.hero.gl-live .hero-mark-watermark { opacity: 0.045; }

/* Copy stays LEFT-aligned on the normal content grid; the luminous loop owns
   the right via the canvas mask. Do NOT constrain .hero-inner to a narrow
   column - .container already has margin:0 auto, so a max-width there re-
   centres it (that was the "not left aligned" bug). */
/* The hero is a flex container; without an explicit width the inner column
   shrinks to its content and margin:auto then CENTERS it - which is why the
   hero text floated toward the middle while sections sat at the left gutter.
   width:100% makes it fill the 1320 container like every section, so the hero
   copy shares the exact same left edge as the section headings. */
.hero-inner { width: 100%; text-align: left; }
@media (min-width: 981px) {
  .hero h1 { max-width: 14ch; }
  .hero-sub { max-width: 44ch; }
}
@media (min-width: 1320px) { .hero-mark-watermark { right: -40px; } }

/* ─── CLIENTS / THE KXT ECOSYSTEM - edge-faded logo marquee ─────────
   White logo cards on the dark band (uniform surface handles mixed-format
   logos), in an edge-faded infinite marquee that pauses on hover; logos
   sit muted and colourise on hover. Reduced-motion → static centred grid.
   Fixed card height reserves space (no layout shift). */
.clients { padding: clamp(56px, 7vw, 84px) 0 clamp(58px, 7.5vw, 88px); position: relative; overflow: hidden; }
/* Animated "liquid" gradient that the frosted-glass cards refract. */
.clients::before {
  content: ''; position: absolute; inset: -12%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 56% at 22% 42%, rgba(0,201,167,0.24), transparent 60%),
    radial-gradient(34% 52% at 76% 60%, rgba(245,158,11,0.18), transparent 60%),
    radial-gradient(30% 46% at 52% 26%, rgba(124,58,237,0.16), transparent 62%);
  filter: blur(8px);
  animation: clients-liquid 26s ease-in-out infinite alternate;
}
@keyframes clients-liquid {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-5%,3%,0) scale(1.12); }
  100% { transform: translate3d(4%,-2%,0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .clients::before { animation: none; } }
.clients-head { margin-bottom: clamp(26px, 3.4vw, 42px); }
.clients-title { font-size: clamp(24px, 3vw, 38px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; margin: 14px 0 12px; max-width: 22ch; }
.clients-sub { font-size: 16px; line-height: 1.6; color: var(--mid-soft); max-width: 62ch; }

.client-marquee {
  position: relative; overflow: hidden; padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.client-track {
  display: flex; align-items: stretch; gap: 18px; width: max-content;
  animation: client-scroll 50s linear infinite;
  will-change: transform;
}
.client-marquee:hover .client-track { animation-play-state: paused; }
@keyframes client-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.client-card {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  height: 92px; min-width: 188px; padding: 0 32px;
  border-radius: var(--r-md);
  /* Liquid glass: a translucent frosted panel - the section's animated liquid
     gradient blurs through it. Kept light-leaning so the dark and
     white-background client logos stay legible (a dark glass would hide them). */
  background: linear-gradient(135deg, rgba(255,255,255,0.84), rgba(255,255,255,0.58));
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -10px 22px rgba(255,255,255,0.16),
    0 18px 40px -24px rgba(0,0,0,0.55);
  transition: transform var(--d-std) var(--ease-spring-soft), box-shadow var(--d-std) var(--ease-out), border-color var(--d-std) var(--ease-out);
}
.client-card:hover {
  transform: translateY(-7px);
  border-color: rgba(0,201,167,0.5);
  box-shadow: 0 26px 50px -22px rgba(0,201,167,0.45), 0 0 0 1px rgba(0,201,167,0.3), inset 0 1px 0 rgba(255,255,255,0.92);
}
.client-logo {
  max-height: 46px; max-width: 152px; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1) opacity(0.68);
  transition: filter var(--d-std) var(--ease-out);
}
.client-marquee:hover .client-logo { filter: grayscale(0.12); }
.client-card:hover .client-logo { filter: none; }
@media (hover: none) { .client-logo { filter: grayscale(0.2) opacity(0.96); } }
.client-name { display: none; font-weight: 800; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.client-card.no-img .client-logo { display: none; }
.client-card.no-img .client-name { display: inline; }

@media (max-width: 700px) {
  .client-card { height: 76px; min-width: 148px; padding: 0 22px; }
  .client-logo { max-height: 38px; max-width: 118px; }
}
@media (prefers-reduced-motion: reduce) {
  .client-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; gap: 16px; }
  .client-marquee { -webkit-mask-image: none; mask-image: none; }
  .client-card--dup { display: none; }
}

/* ── 05 · LANDING-PAGE INSIGHTS CARDS ────────────────────────────── */
/* Landing-page Insights cards, Sand-on-Sand treatment */
/* Asymmetric: feature case-study card spans 2 rows; article + thought-leadership stack to the right.
   Replaces the generic 3-equal layout. */
.lp-insight-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}
.lp-insight-grid > .lp-insight-card.feature {
  grid-row: span 2;
  display: grid;
  grid-template-rows: minmax(280px, 1fr) auto;
}
.lp-insight-grid > .lp-insight-card.feature .lp-insight-art {
  aspect-ratio: auto;
  min-height: 280px;
}
.lp-insight-grid > .lp-insight-card.feature .lp-insight-title {
  font-size: 28px;
  line-height: 1.18;
}
.lp-insight-grid > .lp-insight-card.feature .lp-insight-body {
  padding: 28px 28px 30px;
}
@media (max-width: 980px) {
  .lp-insight-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .lp-insight-grid > .lp-insight-card.feature { grid-row: auto; }
  .lp-insight-grid > .lp-insight-card.feature .lp-insight-title { font-size: 22px; }
}

.lp-insight-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid rgba(8,11,24,0.08);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--ink);
  box-shadow: 0 4px 24px rgba(8,11,24,0.05);
  transition:
    transform var(--d-std) var(--ease-spring-soft),
    box-shadow var(--d-std) var(--ease-emphasis-out),
    border-color var(--d-std) var(--ease-emphasis-out);
}
.lp-insight-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -20px rgba(8,11,24,0.22);
  border-color: rgba(0,201,167,0.32);
}

.lp-insight-art {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(ellipse 72% 82% at var(--ax, 70%) var(--ay, 30%), var(--art-a, rgba(0,201,167,0.55)), transparent 60%),
    radial-gradient(ellipse 56% 66% at calc(100% - var(--ax, 70%)) calc(100% - var(--ay, 30%)), var(--art-b, rgba(245,158,11,0.45)), transparent 60%),
    #1a1228;
  background-size:
    140% 140%,
    140% 140%,
    100% 100%;
  background-position:
    var(--ax, 70%) var(--ay, 30%),
    calc(100% - var(--ax, 70%)) calc(100% - var(--ay, 30%)),
    0 0;
  position: relative; overflow: hidden;
  animation: insight-art-breathe 11s ease-in-out infinite;
}
@keyframes insight-art-breathe {
  /* Gradient origins drift around their anchor for a slow living-color feel.
     Composite-friendly (background-position is paint, not layout). */
  0%, 100% {
    background-position:
      var(--ax, 70%) var(--ay, 30%),
      calc(100% - var(--ax, 70%)) calc(100% - var(--ay, 30%)),
      0 0;
  }
  50% {
    background-position:
      calc(var(--ax, 70%) + 6%) calc(var(--ay, 30%) - 4%),
      calc(100% - var(--ax, 70%) - 6%) calc(100% - var(--ay, 30%) + 4%),
      0 0;
  }
}
.lp-insight-art::after {
  /* Grid drifts on a slow diagonal so the surface always feels alive. */
  content: ''; position: absolute; inset: -32px;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 75%);
  animation: insight-grid-drift 22s linear infinite;
}
@keyframes insight-grid-drift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 32px 32px, 32px 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-insight-art, .lp-insight-art::after { animation: none; }
}
.lp-insight-mark {
  position: absolute; top: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 800; color: var(--obsidian);
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,244,230,0.94);
  backdrop-filter: blur(8px);
}
.lp-insight-mark.case-study { color: #0a4a3a; background: #e6fff7; }
.lp-insight-mark.article    { color: #5a2a00; background: #fff4e6; }
.lp-insight-mark.tl         { color: #3a1d6e; background: #f2ecff; }
.lp-insight-mark.case-study::before { content: '\25C8'; }
.lp-insight-mark.article::before    { content: '\25CE'; }
.lp-insight-mark.tl::before         { content: '\25B2'; }

.lp-insight-body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.lp-insight-meta { display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--body-dark); }
.lp-insight-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.lp-insight-tag.teal   { background: rgba(0,201,167,0.10); color: #008a72; border: 1px solid rgba(0,201,167,0.35); }
.lp-insight-tag.violet { background: rgba(124,58,237,0.08); color: #5b25b3; border: 1px solid rgba(124,58,237,0.30); }
.lp-insight-tag.amber  { background: rgba(245,158,11,0.10); color: var(--amber-deep); border: 1px solid rgba(245,158,11,0.40); }
.lp-insight-title { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); }
.lp-insight-excerpt { font-size: 14.5px; color: var(--body-dark); line-height: 1.6; }
.lp-insight-cta {
  margin-top: auto; padding-top: 16px;
  font-size: 13.5px; font-weight: 700; color: #008a72;
  border-top: 1px solid rgba(8,11,24,0.06);
  transition: color var(--d-std) var(--ease-emphasis-out);
  display: inline-flex; align-items: center; gap: 6px;
}
.lp-insight-card:hover .lp-insight-cta { color: var(--amber-deep); gap: 10px; }
.lp-insight-browse:hover { background: var(--ink) !important; color: var(--white) !important; border-color: var(--ink) !important; }

/* ── 06 · v3.8 HELPERS (replace former inline style attributes) ───── */

/* Sand sections: accents formerly set inline on kicker/serif spans */
.section.bg-sand .section-kicker { color: var(--amber-deep); }
.section.bg-sand .serif-italic-h { color: var(--green-deep); }

/* Section-head rhythm helpers */
.u-mb-0  { margin-bottom: 0; }
.u-mb-56 { margin-bottom: 56px; }
.u-mt-56-center { margin-top: 56px; text-align: center; }

/* Insights browse button (sand surface) */
.lp-insight-browse { background: var(--white); color: var(--ink); border-color: rgba(8,11,24,0.12); padding: 16px 28px; font-weight: 700; }

/* Standing-offer card */
.offer-card {
  max-width: 760px; margin: 0 auto; text-align: center;
  padding: clamp(34px, 5vw, 60px) clamp(24px, 4vw, 52px);
  border-radius: 22px; border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(150deg, rgba(0,201,167,0.07), rgba(245,158,11,0.06));
  box-shadow: 0 24px 60px -28px rgba(0,0,0,0.5);
}
.offer-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--amber-2); margin-bottom: 16px;
}
.offer-title {
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.16;
  letter-spacing: -0.02em; margin-bottom: 16px; color: var(--white);
}
.offer-sub {
  font-size: 16.5px; line-height: 1.62; color: rgba(255,255,255,0.74);
  max-width: 56ch; margin: 0 auto 28px;
}