/* ========================================================
   Refractal landing page — site styles
   Mostly monochrome. Brand gradient used as *light* only.
   ======================================================== */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #0B0D12;
  color: #FAFAF7;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: #6B72EE; color: #fff; }

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

img { display: block; max-width: 100%; }

/* ==========================================================
   BOOT SPLASH
   Cinematic pre-site intro. The canvas carries the pyramid + light
   choreography; the title block is pure CSS, synced to the canvas
   timeline by matching animation-delays. Overlay sits above every-
   thing, fades on .is-done, then is removed from the DOM by JS.
   body.is-booting locks scroll while the intro plays.
   ========================================================== */
body.is-booting,
html.is-booting { overflow: hidden; }

.boot {
  position: fixed;
  inset: 0;
  z-index: 9999;
  /* Solid base beneath the gradient pseudo-element. Keeping a separate
     layer lets us fade the gradient to transparent during the hand-off
     so the real site behind the overlay becomes visible while the
     splash pyramid is still being rendered on the canvas above. */
  background-color: #0B0D12;
  pointer-events: all;
  opacity: 1;
  transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1);
  contain: strict;
  overflow: hidden;
}
.boot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 50%,
              #121521 0%,
              #0B0D12 55%,
              #06070B 100%);
  opacity: 1;
  transition: opacity 1100ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
/* Hand-off: fade the solid base and the gradient together so the site
   behind the overlay bleeds through while the canvas/title finish their
   exit. The pyramid canvas and title sit on a higher z-index so they
   keep rendering above the dissolving background. */
.boot.is-handoff { background-color: transparent; transition: background-color 1400ms cubic-bezier(0.4, 0, 0.2, 1) 200ms; }
.boot.is-handoff::before { opacity: 0; transition: opacity 1600ms cubic-bezier(0.4, 0, 0.2, 1); }
.boot.is-handoff .boot__title { opacity: 0; transition: opacity 1100ms cubic-bezier(0.4, 0, 0.2, 1); }
/* Fade the boot grid in parallel so it doesn't stack alpha with the
   identical .hero__grid underneath. Timed to reach 0 by roughly the
   point in the hand-off where the pyramid cross-fade begins. */
.boot.is-handoff .boot__grid { opacity: 0; transition: opacity 1700ms cubic-bezier(0.4, 0, 0.2, 1) 200ms; }

/* Grid "loader": infection bloom. A single seed cell behind the
   pyramid lights up and, on every ~75 ms tick, each lit cell rolls
   a probability to infect its four direct neighbours (mean frontier
   speed ≈ 2 cells/s). The frontier is ragged and organic — the grid
   feels grown, not drawn. Runs from ~400 ms and keeps ticking until
   the hand-off opacity fade begins at T_HANDOFF_START (~5700 ms);
   the corner vignette below masks any cells still unreached at the
   edges. The actual per-cell alpha ramp + infection simulation
   lives in a JS IIFE in index.html; this CSS just positions the
   canvas and applies the corner vignette so the reveal never reads
   as a hard rectangular edge. */
.boot__grid {
  position: absolute;
  inset: 0;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.boot__grid-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Same corner fade as the old CSS pseudo-element. Keeps the last
     infected ring from forming a hard rectangular silhouette when
     the bloom reaches the viewport edges. */
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 60%, transparent 98%);
          mask-image: radial-gradient(ellipse at 50% 50%, #000 60%, transparent 98%);
}
.boot.is-done {
  opacity: 0;
  pointer-events: none;
}
.boot__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}
.boot__title { z-index: 2; }

/* Title: bottom-centre, below the pyramid's beam path so the letters
   appear to "settle" once the light has finished its journey. */
.boot__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(14vh, 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  pointer-events: none;
}
.boot__word {
  display: inline-flex;
  gap: 1px;
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #FAFAF7;
}
.boot__word span {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  animation: bootLetter 1100ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* Letters start AT the impact moment (2800ms) and stagger 110ms each.
   Each letter takes 1100ms to resolve so the word arrives with weight
   rather than snapping in. 'refractal' fully assembled around 4.0s. */
.boot__word span:nth-child(1) { animation-delay: 2820ms; }
.boot__word span:nth-child(2) { animation-delay: 2930ms; }
.boot__word span:nth-child(3) { animation-delay: 3040ms; }
.boot__word span:nth-child(4) { animation-delay: 3150ms; }
.boot__word span:nth-child(5) { animation-delay: 3260ms; }
.boot__word span:nth-child(6) { animation-delay: 3370ms; }
.boot__word span:nth-child(7) { animation-delay: 3480ms; }
.boot__word span:nth-child(8) { animation-delay: 3590ms; }
.boot__word span:nth-child(9) { animation-delay: 3700ms; }
@keyframes bootLetter {
  0%   { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0);   }
}

/* Splash tagline — gradient text with a gentle pulsing halo so the
   phrase "The Security Layer Your AI Agents Need" feels like it's emitting light
   rather than just sitting there. Uses drop-shadow (not text-shadow)
   since the text itself is gradient-filled via background-clip. */
.boot__sub {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  max-width: min(94vw, 42rem);
  padding: 0 12px;
  line-height: 1.45;
  box-sizing: border-box;
  background: linear-gradient(100deg, #C8B4FF, #8A79F0 45%, #5AC0B8);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: 0;
  transform: translateY(8px);
  animation: bootSub 1200ms cubic-bezier(0.22, 1, 0.36, 1) 4200ms forwards,
             bootSubGlow 2600ms ease-in-out 5400ms infinite alternate;
  filter: drop-shadow(0 0 10px rgba(180, 156, 255, 0.35));
}
@keyframes bootSub {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0);   }
}
@keyframes bootSubGlow {
  from { filter: drop-shadow(0 0 8px  rgba(180, 156, 255, 0.35))
                 drop-shadow(0 0 0    rgba(79,  198, 191, 0.00)); }
  to   { filter: drop-shadow(0 0 18px rgba(180, 156, 255, 0.65))
                 drop-shadow(0 0 26px rgba(79,  198, 191, 0.28)); }
}

@media (prefers-reduced-motion: reduce) {
  .boot__word span,
  .boot__sub { animation: none; opacity: 1; transform: none; filter: none; }
}

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
  /* Lift content above the global .page-grid overlay (z:1) so the grid
     lines appear on top of section backgrounds but never occlude text
     or controls. */
  position: relative;
  z-index: 2;
}

/* ---------- TOP NAV ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 20px 0;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(11, 13, 18, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
}
.nav__brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.nav__brand-cube {
  width: 28px; height: 28px;
}
.nav__links {
  display: flex; gap: 36px;
  font-size: 14px;
  color: rgba(250, 250, 247, 0.7);
  font-weight: 500;
}
.nav__links a {
  transition: color var(--dur-fast) var(--ease-standard);
}
.nav__links a:hover { color: #fff; }
.nav__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  transition: all var(--dur-fast) var(--ease-standard);
}
.nav__cta:hover {
  background: #fff; color: #0B0D12; border-color: #fff;
}

.nav__link {
  display: inline-flex; align-items: center;
  padding: 10px 2px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(250, 250, 247, 0.7);
  letter-spacing: 0.01em;
  position: relative;
  transition: color var(--dur-fast) var(--ease-standard);
}
.nav__link:hover { color: #FAFAF7; }
.nav__link.is-current {
  color: #FAFAF7;
}
.nav__link.is-current::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 1px; background: var(--brand-indigo);
}
.nav__right {
  display: inline-flex;
  align-items: center;
  gap: 24px;
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 140px 0 60px;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* faint radial brand wash top-left */
.hero__bg::before {
  content: ''; position: absolute; inset: -20% -20% auto auto;
  width: 60%; height: 70%;
  background: radial-gradient(ellipse at 70% 30%,
              rgba(107, 114, 238, 0.18) 0%,
              rgba(79, 198, 191, 0.08) 40%,
              transparent 70%);
  filter: blur(40px);
}
/* subtle grid */
.hero__grid {
  position: absolute; inset: 0;
  /* Slightly brighter than the global .page-grid (0.11) so the hero
     section reads as the "main stage" — the grid is part of the
     storytelling here, not just a background texture. */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 80px 80px;
  /* Centre the grid so a line runs through the viewport midpoint,
     matching .boot__grid so the splash → hero hand-off doesn't
     shift any cells by half a tile. */
  background-position: 50% 50%;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 85%);
}

.hero__inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 250, 247, 0.75);
  margin-bottom: 32px;
}
.hero__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-teal);
  box-shadow: 0 0 10px var(--brand-teal);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(44px, 6.2vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0;
  color: #fff;
}
.hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, #B49CFF 0%, #7A9BF0 40%, #4FC6BF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__sub {
  margin-top: 28px;
  font-size: 18px;
  line-height: 1.55;
  max-width: 520px;
  color: rgba(250, 250, 247, 0.7);
  /* Reserve a fixed 3-line block so mode switches don't reflow siblings */
  min-height: calc(18px * 1.55 * 3);
}

.hero__actions {
  display: flex; gap: 14px; align-items: center;
  margin-top: 44px;
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-standard);
  border: 1px solid transparent;
}
.btn--primary {
  background: #fff;
  color: #0B0D12;
}
.btn--primary:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}
.btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn__arrow {
  transition: transform var(--dur-fast) var(--ease-standard);
}
.btn:hover .btn__arrow { transform: translateX(3px); }

.hero__meta {
  display: flex; gap: 48px;
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 560px;
}
.hero__meta-item { }
.hero__meta-k {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 250, 247, 0.5);
  margin-bottom: 6px;
}
.hero__meta-v {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: #fff;
}

/* ---------- PYRAMID (canvas scroll-driven) ---------- */
.pyramid-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
}
.pyramid-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Floating bottom dock, fixed through scroll. Low-key by default. */
.mode-dock {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px 6px 16px;
  background: rgba(20, 23, 31, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  font-family: var(--font-sans);
  max-width: calc(100vw - 32px);
  opacity: 0;
  animation: modeDockIn 360ms var(--ease-entrance) 280ms forwards;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}
.mode-dock.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px);
}
/* Pinned state: dock comes out of the viewport bottom and anchors to a
   point in the document so it stops hovering over the non-toggle
   sections below. JS sets the `top` value. */
.mode-dock.is-pinned {
  position: absolute;
  bottom: auto;
  animation: none;
  transition: opacity 220ms var(--ease-standard);
}
.mode-dock-anchor {
  display: block;
  width: 100%;
  height: 1px;
  pointer-events: none;
  margin: 0;
  padding: 0;
  background: transparent;
}
@keyframes modeDockIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.mode-dock__lead {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 250, 247, 0.38);
  padding-right: 6px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}
.mode-dock__track {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.mode-dock__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: rgba(250, 250, 247, 0.6);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.mode-dock__btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}
.mode-dock__num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(250, 250, 247, 0.35);
  transition: color var(--dur-fast) var(--ease-standard);
}
.mode-dock__btn:hover .mode-dock__num {
  color: rgba(250, 250, 247, 0.7);
}
.mode-dock__btn.is-active {
  color: #FAFAF7;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(180, 156, 255, 0.35);
}
.mode-dock__btn.is-active .mode-dock__num {
  color: var(--brand-violet);
}
/* Attention pulse — invites the first-time visitor to try the focus
   switcher. A soft violet halo breathes around the dock and the
   "Toggle me" lead fades in/out in sync. Stops the moment the user
   clicks any mode button (see JS). The animation stacks on top of
   the entrance modeDockIn by delaying its start until after entry. */
.mode-dock.is-pulsing {
  animation: modeDockIn 360ms var(--ease-entrance) 280ms forwards,
             modeDockPulse 2400ms ease-in-out 900ms infinite;
}
.mode-dock.is-pulsing .mode-dock__lead {
  animation: modeDockLeadPulse 2400ms ease-in-out 900ms infinite;
}
@keyframes modeDockPulse {
  0%, 100% {
    box-shadow:
      0 12px 40px -12px rgba(0, 0, 0, 0.65),
      inset 0 1px 0 rgba(255, 255, 255, 0.03),
      0 0 0 0 rgba(180, 156, 255, 0.0);
    border-color: rgba(255, 255, 255, 0.08);
  }
  50% {
    box-shadow:
      0 12px 40px -12px rgba(0, 0, 0, 0.65),
      inset 0 1px 0 rgba(255, 255, 255, 0.03),
      0 0 0 10px rgba(180, 156, 255, 0.0),
      0 0 24px 2px rgba(180, 156, 255, 0.35);
    border-color: rgba(180, 156, 255, 0.35);
  }
}
@keyframes modeDockLeadPulse {
  0%, 100% { color: rgba(250, 250, 247, 0.38); }
  50%      { color: rgba(210, 194, 255, 0.9); }
}

/* Responsive: hide the "Viewing" lead, shrink padding and label on medium screens. */
@media (max-width: 860px) {
  .mode-dock {
    padding: 5px 5px 5px 10px;
  }
  .mode-dock__lead { display: none; }
  .mode-dock__btn { padding: 8px 10px; font-size: 12px; }
  .mode-dock__num { display: none; }
}
@media (max-width: 540px) {
  .mode-dock { bottom: 12px; gap: 2px; }
  .mode-dock__btn { padding: 8px 8px; font-size: 11.5px; }
}

.mode {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: rgba(250, 250, 247, 0.6);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-standard);
}
.mode:hover { color: #fff; }
.mode.is-active {
  background: #fff;
  color: #0B0D12;
}
.mode__num {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.5;
  letter-spacing: 0.08em;
}
.mode.is-active .mode__num { opacity: 0.5; color: var(--brand-indigo); }
.mode__label {
  font-weight: 500;
  letter-spacing: -0.005em;
}

.hero__actions {
  margin-top: 32px;
}

/* smooth content swaps */
[data-slot] { transition: opacity 200ms var(--ease-standard); }
.is-swapping [data-slot] { opacity: 0; }
.pillar { transition: opacity 200ms var(--ease-standard), background var(--dur-med), border-color var(--dur-med), transform var(--dur-med); }
.is-swapping .pillar { opacity: 0; }

section { position: relative; }

.section {
  padding: 140px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.section--paper {
  background: #FAFAF7;
  color: #0B0D12;
  border: none;
}
.section--paper .section__title { color: #0B0D12; }

/* ==========================================================
   EYEBROW — section marker / dash label
   The dash-prefixed labels ("The thesis", "How the plugin
   works", etc.) act as wayfinders. They start dim and brighten
   to near-white as the user scrolls past them, matching the
   scroll-fill prose effect. A JS driver sets --eyebrow-lit in
   [0,1] per element; we interpolate the text alpha from that.
   ========================================================== */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 250, 247, calc(0.3 + 0.65 * var(--eyebrow-lit, 1)));
  margin-bottom: 24px;
  transition: color 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Paper-background sections invert the base colour so the dash
   still reads as dim-to-ink rather than dim-to-white. */
.section--paper .eyebrow,
.scan-section .eyebrow {
  color: rgba(11, 13, 18, calc(0.3 + 0.6 * var(--eyebrow-lit, 1)));
}
.eyebrow::before {
  content: '';
  width: 20px; height: 1px;
  background: currentColor;
  /* Extra pop on the dash itself: it's the actual "marker" so it
     scales up slightly and sharpens as the section comes into focus. */
  opacity: calc(0.55 + 0.45 * var(--eyebrow-lit, 1));
  transform: scaleX(calc(0.78 + 0.22 * var(--eyebrow-lit, 1)));
  transform-origin: left center;
  transition: opacity 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .eyebrow,
  .eyebrow::before { transition: none; }
}

.section__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  max-width: 900px;
  margin: 0;
  color: #FAFAF7;
}
.section__title em {
  font-style: normal;
  color: rgba(250, 250, 247, 0.45);
}
.section--paper .section__title em { color: rgba(11, 13, 18, 0.35); }

.section__sub {
  margin-top: 28px;
  font-size: 17px;
  line-height: 1.6;
  max-width: 580px;
  color: rgba(250, 250, 247, 0.65);
}
.section--paper .section__sub { color: var(--ink-500); }

/* ---------- THESIS ---------- */
.thesis {
  padding: 80px 0 40px;
}
.thesis__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}
.thesis__body {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: rgba(250, 250, 247, 0.92);
  text-wrap: balance;
}
.thesis__body span.dim {
  color: rgba(250, 250, 247, 0.4);
}
/* Continuous gradient across the entire .glow span. The background
   is painted once on the parent and clipped to every text glyph
   inside (including text inside descendant .fill-word wrappers),
   so the gradient reads as one smooth ramp from the first word of
   the emphasis to the last — instead of each word getting its own
   full violet→teal ramp. Per-word scroll gating is handled below
   by toggling each .fill-word's color between a flat dim and
   transparent (which lets the parent's clipped gradient show
   through). */
.thesis__body span.glow,
.story__quote em.glow {
  background: linear-gradient(100deg, #B49CFF, #6B72EE 40%, #4FC6BF);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ---------- PILLARS (column count is mode-driven) ---------- */
.pillars {
  display: grid;
  /* --pillar-count is set inline by applyMode() based on how many
     pillar cards the active mode ships. Falls back to 4 so the
     security default paints correctly before any JS runs. */
  grid-template-columns: repeat(var(--pillar-count, 4), 1fr);
  gap: 24px;
  margin-top: 80px;
}
.pillar {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 28px 24px;
  min-height: 280px;
  display: flex; flex-direction: column;
  transition: all var(--dur-med) var(--ease-standard);
}
/* Pillar cards get the same "solid ink + gentle edge" read-surface
   treatment as the standards cards, but deliberately quieter — no
   violet glow, no halo. The goal is: card gets crisper, background
   grid fades out underneath, so the copy is easier to read. */
.pillar > * { position: relative; z-index: 1; }
.pillar__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  color: var(--brand-indigo);
}
.pillar__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pillar:hover .pillar__icon {
  color: var(--brand-teal);
}
.pillar:hover {
  /* Solid-ish background quiets the page grid beneath the card
     so the text reads cleanly. Kept below the standards-card
     opacity (0.78 vs 0.94) so the pillar cards still feel like
     a lighter, quieter component. */
  background: rgba(13, 15, 22, 0.78);
  border-color: rgba(198, 180, 255, 0.32);
  box-shadow:
    0 0 0 1px rgba(180, 156, 255, 0.16),
    0 14px 32px -20px rgba(11, 13, 18, 0.85);
  transform: translateY(-3px);
}
.pillar__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(250, 250, 247, 0.4);
  margin-bottom: 12px;
}
.pillar__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: 12px;
  margin-top: 8px;
  color: #fff;
}
.pillar__desc {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(250, 250, 247, 0.55);
}

/* ---------- DOTTED FIGURE / SCAN ----------- */
.scan-section {
  padding: 80px 0;
  background: #FAFAF7;
  color: #0B0D12;
  overflow: hidden;
  position: relative;
}
/* (eyebrow colour handled above via --eyebrow-lit scroll driver.) */
.scan__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.scan__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: #0B0D12;
  max-width: 500px;
}
.scan__body {
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-500);
  max-width: 500px;
}
.scan__list {
  list-style: none; padding: 0; margin: 40px 0 0;
  display: grid; gap: 14px;
}
.scan__list li {
  display: flex; align-items: flex-start; gap: 14px;
  font-size: 15px;
  color: var(--ink-700);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-100);
}
.scan__list li::before {
  display: none;
}
.scan__list-icon {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  margin-top: 1px;
  color: var(--brand-indigo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.scan__list-icon svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scan__list-text {
  flex: 1 1 auto;
}
.scan__list li strong {
  font-weight: 600;
  color: #0B0D12;
  margin-right: 8px;
}

.scan__viz {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0B0D12;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(11, 13, 18, 0.3);
}
/* Embedded React composition (refractal-video.html) fills the panel.
   Border-radius inherited from the wrapper via overflow: hidden. */
.scan__viz-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #0B0D12;
  opacity: 0;
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.scan__viz-frame.is-loaded { opacity: 1; }

/* ---------- HOW IT WORKS / EVENT STREAM ---------- */
.how {
  padding: 80px 0;
}
.how__inner { }
.how__grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 40px;
  margin-top: 80px;
  align-items: stretch;
}
.steps {
  display: flex; flex-direction: column; gap: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding-left: 24px;
}
.step {
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-standard);
}
.step:last-child { border-bottom: none; }
.step::before {
  content: '';
  position: absolute;
  left: -28px; top: 26px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: all var(--dur-fast) var(--ease-standard);
}
.step.is-active::before {
  background: var(--brand-teal);
  box-shadow: 0 0 12px var(--brand-teal);
}
.step__label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(250, 250, 247, 0.4);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.step__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: rgba(250, 250, 247, 0.6);
  transition: color var(--dur-fast) var(--ease-standard);
}
.step.is-active .step__title { color: #fff; }
.step__desc {
  font-size: 14px;
  line-height: 1.5;
  margin-top: 8px;
  color: rgba(250, 250, 247, 0.55);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-med) var(--ease-standard), margin-top var(--dur-fast);
}
.step.is-active .step__desc {
  max-height: 120px;
  margin-top: 10px;
}

/* event-stream console preview */
.console {
  background: #0E1019;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.5);
}
.console__bar {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(250, 250, 247, 0.5);
}
.console__dots {
  display: flex; gap: 6px;
}
.console__dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.console__title {
  letter-spacing: 0.04em;
}
.console__title strong { color: #fff; font-weight: 500; }
.console__live {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--brand-teal);
}
.console__live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-teal);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.console__body {
  padding: 8px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  max-height: 440px;
  overflow: hidden;
  position: relative;
}
.console__body::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, #0E1019);
  pointer-events: none;
}
.evrow {
  display: grid;
  grid-template-columns: 72px 90px 120px 1fr auto;
  gap: 16px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: rgba(250, 250, 247, 0.75);
  animation: evIn 0.4s var(--ease-standard) backwards;
}
.evrow .t { color: rgba(250, 250, 247, 0.4); }
.evrow .src { color: rgba(250, 250, 247, 0.6); }
.evrow .rule { color: var(--brand-periwinkle); }
.evrow .msg { color: rgba(250, 250, 247, 0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sev {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 4px;
  align-self: center;
}
.sev--crit { background: rgba(139, 26, 18, 0.2); color: #F37866; border: 1px solid rgba(217, 74, 59, 0.3); }
.sev--high { background: rgba(217, 74, 59, 0.12); color: #F39A8D; }
.sev--med  { background: rgba(229, 163, 43, 0.12); color: #E5C77D; }
.sev--low  { background: rgba(79, 198, 191, 0.12); color: var(--brand-teal); }
.sev--ok   { background: rgba(47, 163, 103, 0.12); color: #65D69C; }

@keyframes evIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- REGULATORY RAIL (ticker) ---------- */
.rail {
  padding: 48px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.01);
  overflow: hidden;
}
.rail__lead {
  display: flex; align-items: center; gap: 28px;
  margin-bottom: 0;
}
.rail__lead-text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 250, 247, 0.45);
  white-space: nowrap;
}
.rail__track-wrap {
  flex: 1;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.rail__track {
  display: flex;
  gap: 64px;
  white-space: nowrap;
  animation: railScroll 40s linear infinite;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: rgba(250, 250, 247, 0.9);
}
.rail__track span { display: inline-flex; align-items: center; gap: 12px; }
.rail__track i {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-teal);
  font-style: normal;
}
@keyframes railScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- QUOTE / STORY ---------- */
.story {
  padding: 80px 0;
}
.story__quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 1100px;
  text-wrap: balance;
}
.story__quote em {
  font-style: italic;
  color: rgba(250, 250, 247, 0.55);
}
.story__attr {
  margin-top: 40px;
  display: flex; align-items: center; gap: 16px;
  font-size: 13px;
  color: rgba(250, 250, 247, 0.55);
}
.story__attr-line {
  width: 40px; height: 1px;
  background: rgba(255, 255, 255, 0.2);
}

/* ---------- TEAM / FOUNDERS ---------- */
.founders {
  padding: 80px 0;
  background: #FAFAF7;
  color: #0B0D12;
}
.founders__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 80px;
}
.founder {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: 16px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: all var(--dur-med) var(--ease-standard);
}
.founder:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 48px -12px rgba(11, 13, 18, 0.1);
}
.founder__portrait {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--ink-100);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  color: var(--ink-500);
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;
}
.founder__portrait::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--brand-gradient);
  opacity: 0.15;
}
.founder__role {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 8px;
}
.founder__name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #0B0D12;
  margin: 0 0 16px;
}
.founder__bio {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-500);
}

/* ---------- CTA / CLOSE ---------- */
.close {
  padding: 110px 0 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.close__bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 100%,
              rgba(107, 114, 238, 0.25) 0%,
              rgba(79, 198, 191, 0.08) 35%,
              transparent 70%);
  pointer-events: none;
}
.close__inner { position: relative; z-index: 1; }
.close__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 6vw, 88px);
  letter-spacing: -0.035em;
  line-height: 1;
  color: #fff;
  margin: 0;
}
.close__title em {
  font-style: normal;
  background: linear-gradient(100deg, #B49CFF, #6B72EE 40%, #4FC6BF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.close__sub {
  margin-top: 28px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(250, 250, 247, 0.6);
  max-width: 560px;
  margin-left: auto; margin-right: auto;
}
.close__actions {
  display: flex; gap: 14px;
  justify-content: center;
  margin-top: 44px;
}

/* ---------- STANDARDS ---------- */
.standards {
  padding: 80px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.standards__inner {
  display: flex; flex-direction: column; gap: 56px;
}
.standards__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: start;
  margin-top: 20px;
}
.standards__lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.standards__cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  color: #FAFAF7;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.standards__cta:hover {
  border-color: rgba(180, 156, 255, 0.55);
  background: rgba(180, 156, 255, 0.06);
}
.standards__cta-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #B49CFF;
  padding: 4px 8px;
  border: 1px solid rgba(180, 156, 255, 0.35);
  border-radius: 4px;
  background: rgba(180, 156, 255, 0.08);
}
.standards__cta-v {
  font-size: 15px;
  letter-spacing: -0.005em;
  color: rgba(250, 250, 247, 0.92);
}
.standards__cta-arrow {
  color: rgba(250, 250, 247, 0.55);
  font-size: 15px;
  transition: transform var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.standards__cta:hover .standards__cta-arrow {
  transform: translateX(4px);
  color: #B49CFF;
}
.standards__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 52px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  color: #FAFAF7;
}
.standards__title em {
  font-style: normal;
  color: rgba(250, 250, 247, 0.5);
}
.standards__body {
  display: flex; flex-direction: column; gap: 16px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(250, 250, 247, 0.75);
  padding-top: 16px;
}
.standards__body p { margin: 0; }
.standards__body a {
  color: #FAFAF7;
  border-bottom: 1px solid rgba(180, 156, 255, 0.4);
  transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.standards__body a:hover {
  color: #B49CFF;
  border-bottom-color: #B49CFF;
}
.standards__also {
  color: rgba(250, 250, 247, 0.5);
  font-size: 15px;
}

/* ---------- PILLARS ---------- */
.pillars-section {
  padding: 40px 0 40px;
}

/* ---------- SECTION BRIDGES ----------
   Pure colour gradient ramps that give the site a soft, perceptual
   crossfade between ink-dark and paper-light sections. The grid lines
   themselves are handled by the global .page-grid overlay, which sweeps
   continuously across these bridges so the transition looks seamless
   rather than striped. The multi-stop gradients approximate an ease
   curve for a softer visual ramp than a hard 0 → 100% linear. */
.bridge {
  position: relative;
  width: 100%;
  height: 260px;
  pointer-events: none;
}
.bridge--down {
  background: linear-gradient(
    to bottom,
    #0B0D12 0%,
    #0B0D12 12%,
    #16171F 30%,
    #3d3c4a 55%,
    #a3a2a0 80%,
    #FAFAF7 96%,
    #FAFAF7 100%
  );
}
.bridge--up {
  background: linear-gradient(
    to bottom,
    #FAFAF7 0%,
    #FAFAF7 10%,
    #d9d8d4 24%,
    #6d6c74 50%,
    #1e1f27 78%,
    #0B0D12 95%,
    #0B0D12 100%
  );
}
@media (max-width: 720px) {
  .bridge { height: 180px; }
}

/* ---------- GLOBAL GRID ----------
   One fixed grid overlay behind everything. Two layers:
     - ::before : light violet lines, visible on dark sections
     - ::after  : dark charcoal lines, visible on the white scan-section
   JS drives two custom properties on the body:
     --grid-reveal : 0 at the hero top, 1 after the user has scrolled
                     ~1.5 viewport heights. Fades the whole grid in
                     slowly as the user descends the page.
     --grid-invert : 0 on dark sections, smoothly ramps to 1 when the
                     viewport centre is inside the white scan-section.
                     Crossfades between the two line colours. */
.page-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--grid-reveal, 0);
  transition: opacity 200ms linear;
}
.page-grid::before,
.page-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 72px 72px;
  background-position: 50% 50%;
  transition: opacity 260ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Ease the grid out near the edges so it feels like a subtle texture,
     not a screen-filling plaid. Heavier in the middle, whisper at the
     viewport edges and corners. */
  -webkit-mask-image:
    radial-gradient(ellipse at 50% 50%, #000 70%, rgba(0,0,0,0.55) 92%, transparent 100%);
          mask-image:
    radial-gradient(ellipse at 50% 50%, #000 70%, rgba(0,0,0,0.55) 92%, transparent 100%);
}
/* Light grid — for dark sections. Kept intentionally a touch fainter
   than the cursor aura below so hovering reads as a clear lift in
   contrast rather than just a local brighten. */
.page-grid::before {
  background-image:
    linear-gradient(rgba(180, 156, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 156, 255, 0.14) 1px, transparent 1px);
  opacity: calc(1 - var(--grid-invert, 0));
}
/* Dark grid — for the white scan-section */
.page-grid::after {
  background-image:
    linear-gradient(rgba(11, 13, 18, 0.17) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 13, 18, 0.17) 1px, transparent 1px);
  opacity: var(--grid-invert, 0);
}
@media (max-width: 720px) {
  .page-grid::before,
  .page-grid::after { background-size: 56px 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-grid { transition: none; }
  .page-grid::before,
  .page-grid::after { transition: none; }
}

/* ---------- CURSOR-REACTIVE GRID AURA ----------
   A second, brighter grid layer masked to a circle around the cursor
   via CSS custom properties --mx / --my (driven by a throttled mouse-
   move listener). Visually this reads as the faint page-grid lines
   "bulging" / glowing under the cursor. Opacity still scales with
   --grid-reveal so the effect only appears after the hero has left
   the viewport, and the invert crossfade mirrors the base grid so the
   halo is light violet on dark sections and charcoal on the white
   scan-section. Hidden on touch devices (no hover) and on reduced-
   motion preferences. */
.grid-aura {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--grid-reveal, 0);
  transition: opacity 200ms linear;
}
.grid-aura::before,
.grid-aura::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 72px 72px;
  background-position: 50% 50%;
  -webkit-mask-image: radial-gradient(circle 260px at var(--mx, 50vw) var(--my, 50vh),
                       rgba(0, 0, 0, 0.95) 0%,
                       rgba(0, 0, 0, 0.45) 45%,
                       transparent 100%);
          mask-image: radial-gradient(circle 260px at var(--mx, 50vw) var(--my, 50vh),
                       rgba(0, 0, 0, 0.95) 0%,
                       rgba(0, 0, 0, 0.45) 45%,
                       transparent 100%);
  transition: opacity 260ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Bright violet aura on dark sections */
.grid-aura::before {
  background-image:
    linear-gradient(rgba(210, 190, 255, 0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(210, 190, 255, 0.55) 1px, transparent 1px);
  opacity: calc(1 - var(--grid-invert, 0));
}
/* Charcoal aura on the white scan-section */
.grid-aura::after {
  background-image:
    linear-gradient(rgba(11, 13, 18, 0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 13, 18, 0.55) 1px, transparent 1px);
  opacity: var(--grid-invert, 0);
}
@media (max-width: 720px) {
  .grid-aura::before,
  .grid-aura::after { background-size: 56px 56px; }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .grid-aura { display: none; }
}

/* ---------- INTEGRATIONS ---------- */
.integrations {
  padding: 40px 0 80px;
}
.integrations__inner {
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  gap: 72px;
  align-items: start;
}
.integrations__head {
  position: sticky;
  top: 100px;
}
.integrations__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.028em;
  line-height: 1.05;
  margin: 12px 0 20px;
  color: #FAFAF7;
}
.integrations__title em {
  font-style: normal;
  background: linear-gradient(135deg, #B49CFF 0%, #6B72EE 50%, #4FC6BF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.integrations__body {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(250, 250, 247, 0.72);
  max-width: 46ch;
}
.integrations__body strong {
  color: #FAFAF7;
  font-weight: 600;
}

.integrations__groups {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.integ-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* Integration-group labels share the eyebrow scroll-brighten
   effect: the JS driver writes --eyebrow-lit in [0,1] based on
   viewport position, and both tags fade from a dim resting state
   to their target colour as the section scrolls into view. */
.integ-group__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(250, 250, 247, calc(0.32 + 0.68 * var(--eyebrow-lit, 1)));
  transition: color 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.integ-group__kind {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  /* Starts dim (0.22), brightens close to full white (0.9) in view
     so the "FRONTIER MODELS & COPILOTS" / "TRACES, EVALS & TELEMETRY"
     subtitles reach the same visual weight as their sibling tag. */
  color: rgba(250, 250, 247, calc(0.22 + 0.68 * var(--eyebrow-lit, 1)));
  transition: color 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .integ-group__tag,
  .integ-group__kind { transition: none; }
}
.integ-group__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.integ-group__grid.integ-group__grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.integ {
  position: relative;
  padding: 24px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 148px;
  justify-content: flex-end;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Inset "frame" that lights up on hover — a clean 1 px off-white
   rectangle pulled ~8 px inside the cell edges, so it reads as a
   framing accent around the card's content rather than touching
   the matrix borders of the grid. Starts hidden and slightly
   overshoots (scale > 1) so it "closes in" as it appears. */
.integ::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(250, 250, 247, 0.88);
  border-radius: 2px;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.integ > * { position: relative; z-index: 1; }
.integ:hover {
  /* Solid ink background so the global page grid stops bleeding
     through the card — same read-surface idea as the other cards
     but quieter since these cells sit on an already-busy matrix. */
  background: rgba(13, 15, 22, 0.82);
}
.integ:hover::after {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .integ::after { transition: none; transform: none; }
}
.integ__logo {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  height: 36px;
  margin-bottom: 10px;
  opacity: 0.92;
}
.integ__logo img {
  height: 100%;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: block;
}
.integ__logo.is-wordmark {
  height: 28px;
}
.integ__logo.is-wordmark img {
  max-width: 160px;
}
.integ__logo.is-wordmark--tall {
  height: 34px;
}
.integ__name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #FAFAF7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.integ__kind {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(250, 250, 247, 0.46);
  line-height: 1.45;
}

@media (max-width: 960px) {
  .integrations__inner { grid-template-columns: 1fr; gap: 40px; }
  .integrations__head { position: static; }
  .integ-group__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- END INTEGRATIONS ---------- */

.standards__list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.standards__list li {
  padding: 24px 24px 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; flex-direction: column; gap: 10px;
  min-height: 160px;
}
.standards__list li:last-child { border-right: none; }
.standards__k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #B49CFF;
}
.standards__v {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(250, 250, 247, 0.7);
}

/* ---------- LONDON / BATTERSEA ---------- */
.london {
  position: relative;
  padding: 80px 0 0;
  overflow: hidden;
}
.london__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 640px);
  padding-bottom: 80px;
}
.london__copy {
  display: flex; flex-direction: column; gap: 20px;
}
.london__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 3.8vw, 60px);
  letter-spacing: -0.028em;
  line-height: 1.08;
  margin: 0 0 6px;
  color: #FAFAF7;
}
.london__title em {
  font-style: normal;
  color: rgba(250, 250, 247, 0.5);
}
.london__body {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(250, 250, 247, 0.7);
  max-width: 560px;
  margin: 0;
}
.london__meta {
  display: flex;
  gap: 56px;
  margin-top: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.london__meta > div {
  display: flex; flex-direction: column; gap: 6px;
}
.london__k {
  text-transform: uppercase;
  color: rgba(250, 250, 247, 0.4);
  font-size: 10px;
  letter-spacing: 0.18em;
}
.london__v {
  color: rgba(250, 250, 247, 0.85);
}

.london__skyline {
  position: relative;
  width: 100%;
  margin-top: -40px; /* pull the illustration up so copy nests into the sky */
  padding-top: 80px; /* headroom for steam wisps */
  pointer-events: none;
}
.london__skyline .battersea {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  overflow: visible;
}

/* ---------- BATTERSEA ANIMATIONS ---------- */
/* River dashes drift right */
@keyframes bat-river-drift {
  to { stroke-dashoffset: -140; }
}
.bat-river-dash--1 {
  stroke-dasharray: 4 10;
  animation: bat-river-drift 8s linear infinite;
}
.bat-river-dash--2 {
  stroke-dasharray: 2 14;
  animation: bat-river-drift 14s linear infinite reverse;
}

/* Distant city windows blink at different cadences */
@keyframes bat-blink {
  0%, 92%, 100% { opacity: 0; }
  93%, 99% { opacity: 0.9; }
}
.blink { opacity: 0; }
.blink--1 { animation: bat-blink 5.2s ease-in-out infinite; }
.blink--2 { animation: bat-blink 7.4s ease-in-out infinite 1.3s; }
.blink--3 { animation: bat-blink 6.1s ease-in-out infinite 3.0s; }
.blink--4 { animation: bat-blink 8.8s ease-in-out infinite 0.6s; }
.blink--5 { animation: bat-blink 4.7s ease-in-out infinite 2.2s; }

/* Main-hall lit windows — slow fade in/out, staggered, warm colour */
@keyframes bat-lit {
  0%, 100% { opacity: 0; }
  20%, 75% { opacity: 0.95; }
}
.lit { opacity: 0; }
.lit--a { animation: bat-lit  9.0s ease-in-out infinite 0.0s; }
.lit--b { animation: bat-lit 11.0s ease-in-out infinite 1.4s; }
.lit--c { animation: bat-lit  8.2s ease-in-out infinite 2.6s; }
.lit--d { animation: bat-lit 12.4s ease-in-out infinite 3.1s; }
.lit--e { animation: bat-lit  9.6s ease-in-out infinite 0.9s; }
.lit--f { animation: bat-lit 10.8s ease-in-out infinite 4.2s; }
.lit--g { animation: bat-lit  8.0s ease-in-out infinite 5.5s; }
.lit--h { animation: bat-lit 11.6s ease-in-out infinite 2.0s; }
.lit--i { animation: bat-lit  9.3s ease-in-out infinite 6.0s; }

/* Steam drifts upward, fades, and repeats */
@keyframes bat-steam {
  0%   { transform: translate(0, 0)    scale(1);   opacity: 0; }
  15%  { opacity: 0.9; }
  70%  { opacity: 0.7; }
  100% { transform: translate(-14px, -60px) scale(1.35); opacity: 0; }
}
@keyframes bat-steam-right {
  0%   { transform: translate(0, 0)    scale(1);   opacity: 0; }
  15%  { opacity: 0.9; }
  70%  { opacity: 0.7; }
  100% { transform: translate(14px, -60px) scale(1.35); opacity: 0; }
}
.puff { opacity: 0; transform-origin: center bottom; will-change: transform, opacity; }
.puff--a { animation: bat-steam       6.5s ease-out infinite 0.0s; }
.puff--b { animation: bat-steam-right 7.2s ease-out infinite 1.8s; }
.puff--c { animation: bat-steam       6.8s ease-out infinite 3.2s; }
.puff--d { animation: bat-steam-right 7.6s ease-out infinite 4.5s; }

/* Refraction rays — each ray has its own drift + pulse */
@keyframes ray-pulse {
  0%, 100% { opacity: 0.2; stroke-width: 1; }
  50%      { opacity: 0.95; stroke-width: 1.6; }
}
@keyframes ray-sweep-a { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-1.2deg); } }
@keyframes ray-sweep-b { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(0.8deg); } }
.bat-refraction .ray {
  transform-origin: 550px 30px;
  will-change: transform, opacity, stroke-width;
}
.ray--a { animation: ray-pulse 3.8s ease-in-out infinite 0.0s, ray-sweep-a 11s ease-in-out infinite; }
.ray--b { animation: ray-pulse 4.4s ease-in-out infinite 0.6s, ray-sweep-b 13s ease-in-out infinite; }
.ray--c { animation: ray-pulse 3.2s ease-in-out infinite 1.2s, ray-sweep-a 9s  ease-in-out infinite; }
.ray--d { animation: ray-pulse 5.0s ease-in-out infinite 1.8s, ray-sweep-b 15s ease-in-out infinite; }
.ray--e { animation: ray-pulse 4.0s ease-in-out infinite 2.4s, ray-sweep-a 12s ease-in-out infinite; }

/* Apex glint pulses in sync with refraction */
@keyframes bat-apex {
  0%, 100% { r: 2.4; opacity: 0.7; }
  50%      { r: 5.2; opacity: 1; }
}
.bat-apex { animation: bat-apex 3.8s ease-in-out infinite; }

/* Boat glides along the river */
@keyframes bat-boat-move {
  0%   { transform: translateX(-40px); }
  100% { transform: translateX(1640px); }
}
.bat-boat {
  animation: bat-boat-move 42s linear infinite;
  will-change: transform;
}

/* Pin pulses */
@keyframes bat-pin {
  0%, 100% { opacity: 0.5; r: 1.8; }
  50%      { opacity: 1;   r: 3; }
}
.bat-pin { animation: bat-pin 2.4s ease-in-out infinite; }

/* Honour reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .bat-river-dash--1, .bat-river-dash--2,
  .blink, .lit, .puff, .ray, .bat-apex, .bat-boat, .bat-pin {
    animation: none !important;
  }
  .lit { opacity: 0.4; }
  .bat-apex { opacity: 0.9; }
  .ray { opacity: 0.5; }
}

/* subtle brand wash behind skyline */
.london::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 420px;
  background: radial-gradient(60% 100% at 50% 100%, rgba(180, 156, 255, 0.08), transparent 70%);
  z-index: 0;
  pointer-events: none;
}

/* ---------- FOOTER ----------
   The closing note of the page, tuned to match the rest of the
   landing page's ink palette at full presence: bright type, a
   gradient violet→teal hairline across the top edge, and a soft
   atmospheric glow just underneath so it reads as a composed
   final section rather than a muted afterthought. */
.footer {
  position: relative;
  padding: 72px 0 56px;
  font-size: 13px;
  color: rgba(250, 250, 247, 0.82);
  background:
    /* subtle radial glow, violet to teal, behind the content */
    radial-gradient(ellipse at 20% 0%, rgba(180, 156, 255, 0.08), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(79, 198, 191, 0.06), transparent 55%),
    #0B0D12;
  overflow: hidden;
  isolation: isolate;
}
/* Gradient hairline across the top — replaces the flat 0.08 border
   with a brand-coloured ramp that fades to transparent at both
   edges for a softer horizon. */
.footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(180, 156, 255, 0.32) 22%,
    rgba(250, 250, 247, 0.55) 50%,
    rgba(79, 198, 191, 0.32) 78%,
    transparent 100%
  );
  pointer-events: none;
}
.footer__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  position: relative;
  z-index: 1;
}
.footer__brand {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
}
.footer__left {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #FAFAF7;
}
.footer__left .nav__brand-cube {
  width: 26px; height: 26px;
}
.footer__status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 250, 247, 0.9);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(180, 156, 255, 0.22);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.footer__status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-teal);
  box-shadow: 0 0 0 3px rgba(79, 198, 191, 0.15);
  animation: footerStatusPulse 2400ms ease-in-out infinite;
}
@keyframes footerStatusPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(79, 198, 191, 0.15),
                        0 0 0 0 rgba(79, 198, 191, 0.4); }
  50%      { box-shadow: 0 0 0 3px rgba(79, 198, 191, 0.2),
                        0 0 12px 2px rgba(79, 198, 191, 0.35); }
}
.footer__links {
  display: flex; justify-content: center; gap: 32px;
  font-size: 14px;
}
.footer__links a {
  position: relative;
  color: #FAFAF7;
  text-decoration: none;
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-standard);
}
/* Animated underline that swipes in from the left on hover */
.footer__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    var(--brand-violet),
    var(--brand-teal));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms var(--ease-standard);
}
.footer__links a:hover { color: #fff; }
.footer__links a:hover::after { transform: scaleX(1); }
.footer__legal {
  display: inline-flex; gap: 10px;
  justify-content: flex-end;
  font-family: var(--font-mono);
  color: rgba(250, 250, 247, 0.72);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.footer__sep { color: rgba(180, 156, 255, 0.55); }
@media (max-width: 860px) {
  .footer { padding: 56px 0 40px; }
  .footer__inner {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 22px;
  }
  .footer__links { justify-content: flex-start; }
  .footer__legal { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .footer__status-dot { animation: none; }
  .footer__links a::after { transition: none; }
}

/* Nav deepens its background once scrolled — a small but noticeable polish. */
.nav.is-scrolled {
  background: rgba(11, 13, 18, 0.78);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.8);
}

/* Focus ring — keyboard users only, applies across interactive surfaces. */
:focus { outline: none; }
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav__cta:focus-visible,
.mode-dock__btn:focus-visible {
  outline: 2px solid var(--brand-violet);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Respect users who prefer reduced motion. */
@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;
  }
  .mode-dock { animation: none; opacity: 1; }
}

html { scroll-behavior: smooth; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 960px) {
  .container { padding: 0 24px; }
  .hero { padding: 140px 0 80px; }
  .hero__inner, .thesis__inner, .scan__inner, .how__grid, .founders__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .hero__meta { flex-wrap: wrap; gap: 24px; }
  .nav__links { display: none; }
  .pyramid-wrap { max-width: 400px; margin: 0 auto; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .standards__row { grid-template-columns: 1fr; gap: 24px; }
  .standards__list { grid-template-columns: 1fr 1fr; }
  /* With 5 cards in a 2-col layout the right-column items (every
     even child) sit against the outer edge, so they lose their
     vertical divider. */
  .standards__list li:nth-child(2n) { border-right: none; }
  .london__meta { gap: 32px; }
}

/* ----------------------------------------------------------
   MOBILE — phones, ≤ 720px
   The tablet rules above stack everything; this layer dials
   down padding, font sizes, and gaps so the long-form sections
   don't sit on a phone like a desktop layout that's been
   squeezed. Sized for iPhone 14/15 (390/393), Android (~412),
   and a buffer for landscape.
   ---------------------------------------------------------- */
@media (max-width: 720px) {
  /* Tighten outer padding so headlines don't crowd 24px walls. */
  .container { padding: 0 20px; }

  /* Section vertical rhythm: 140px on desktop -> 80px on phones.
     Keeps two consecutive sections from eating an entire screen
     of dead space on a 700px-tall viewport. */
  .section { padding: 80px 0; }

  /* Hero: nav is fixed-height ~64px, give the title 88px of
     breathing room from the top, and a tight bottom so the
     pyramid + CTA stay above the fold whenever possible. */
  .hero { padding: 88px 0 56px; }

  /* Hero title: floor allows a 3-line "The Security Layer / Your
     AI Agents / Need." stack to fit on a 320px viewport with a
     comfortable line-height. Keep the ceiling vw-driven. */
  .hero__title { font-size: clamp(36px, 9.4vw, 56px); }
  .hero__sub { font-size: 16px; max-width: 100%; }
  .hero__meta { gap: 18px; }
  .hero__meta-item { min-width: 0; }

  /* Section titles: drop the floor so longer headlines don't
     wrap to four lines on narrow screens. */
  .section__title { font-size: clamp(28px, 7.6vw, 44px); }
  .section__sub  { font-size: 16px; }

  /* Pillars (the 4 mode pillars below the hero) -> single column
     so each pillar gets full width to breathe. */
  .pillars { grid-template-columns: 1fr; gap: 12px; }

  /* Standards / regulation cards: 2-col still works at this
     width but feels cramped — go single. */
  .standards__list { grid-template-columns: 1fr; }
  .standards__list li:nth-child(2n) { border-right: 1px solid rgba(255, 255, 255, 0.08); }

  /* Integration cards inside each group: 2-col -> 1-col so logos
     and labels don't squeeze. */
  .integ-group__grid { grid-template-columns: 1fr; }

  /* Pyramid: cap at viewport-relative size so it never blows
     past the screen on small phones. */
  .pyramid-wrap { max-width: min(360px, 80vw); }

  /* Touch targets: pad the primary nav CTA to a 44px tap zone
     (Apple HIG / WCAG 2.5.5). */
  .nav__cta { padding: 12px 16px; min-height: 44px; }
  .nav { padding: 10px 0; }

  /* Mode-dock — already shrinks earlier; nudge bottom safe-area
     so the dock doesn't sit on top of the iOS home indicator. */
  .mode-dock { bottom: max(12px, env(safe-area-inset-bottom)); }

  /* Footer compaction. */
  .footer { padding: 56px 0 36px; }

  /* Body copy: lift to 16px floor wherever it's still 14-15. */
  body { font-size: 16px; }
}

/* ----------------------------------------------------------
   MOBILE — small phones, ≤ 420px
   Last-mile polish for iPhone SE / older Androids where 8px
   of extra padding makes the difference between a comfortable
   read and a wall of text. Only override what was set above.
   ---------------------------------------------------------- */
@media (max-width: 420px) {
  .container { padding: 0 16px; }
  .section { padding: 64px 0; }
  .hero { padding: 80px 0 48px; }
  .hero__title { font-size: clamp(32px, 9.4vw, 44px); }
  .section__title { font-size: clamp(26px, 7.4vw, 38px); }
  .pyramid-wrap { max-width: 88vw; }

  /* Hide the mono "Viewing" hint and the "01/02/03" numerals on
     the mode dock at very narrow widths — already partly done by
     the 540px rule above; this trims further so the dock fits
     three labels without horizontal scroll on a 360px viewport. */
  .mode-dock__btn { padding: 7px 9px; font-size: 11px; letter-spacing: 0.04em; }
}

/* ==========================================================
   SCROLL-FILL TEXT
   Words start dim and transition to full colour as the
   containing element scrolls past the centre of the viewport.
   A small JS driver wraps every word in `.fill-word` and
   adds `.is-lit` to the leading N words based on scroll
   progress (see site.js / inline scripts). Reduced-motion
   users get the lit state immediately.
   ========================================================== */
.fill-word {
  color: rgba(250, 250, 247, 0.28);
  transition: color 460ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fill-word.is-lit {
  color: rgba(250, 250, 247, 0.95);
}
/* Inside a .glow wrapper the parent paints a single continuous
   gradient (see `.thesis__body span.glow` above). Each child
   .fill-word covers that gradient with a flat dim colour by
   default; flipping to transparent on `.is-lit` reveals the
   parent's clipped gradient slice at that word's position, so the
   reveal reads as one gradient filling in from the left rather
   than each word lighting up with its own mini-ramp. */
.glow .fill-word {
  color: rgba(250, 250, 247, 0.28);
}
.glow .fill-word.is-lit {
  color: transparent;
}
/* Bold emphasis (e.g. `<strong>` in bios) keeps its weight but
   still honours the dim/lit colour ramp. */
.fill-word strong,
strong .fill-word { font-weight: inherit; }
@media (prefers-reduced-motion: reduce) {
  .fill-word           { color: rgba(250, 250, 247, 0.95); transition: none; }
  /* Reveal the continuous parent gradient on every word at once. */
  .glow .fill-word     { color: transparent; }
}

/* ==========================================================
   CARD HOVER GLOW
   Applied to the Standards/regulation cards on the landing
   page and the founder cards on the About page. A soft
   violet halo blooms from inside the card, a subtle lift
   cues interactivity, and the border picks up a violet
   tint — all on the same smooth 420ms easing.
   ========================================================== */
.standards__list li,
.person {
  position: relative;
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
              background 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
/* Inner radial glow — ::before on each card is positioned to fill
   the card. Fades from 0 → 1 on hover. Kept behind content via
   z-index and `pointer-events: none` so it never swallows clicks. */
.standards__list li::before,
.person::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 40%,
    rgba(180, 156, 255, 0.22),
    rgba(180, 156, 255, 0.05) 45%,
    transparent 75%
  );
  opacity: 0;
  transition: opacity 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
  z-index: 0;
}
.standards__list li > *,
.person > * { position: relative; z-index: 1; }

.standards__list li:hover {
  transform: translateY(-3px);
  /* Brightly lit violet edge so the card visibly detaches from the
     row. The double 0 0 0 rings form a crisp 2 px halo. */
  border-color: rgba(198, 180, 255, 0.9);
  /* Nearly-solid ink background hides the page grid that would
     otherwise bleed through the card, which keeps the card copy
     easy to read under the cursor. */
  background: rgba(13, 15, 22, 0.94);
  box-shadow:
    0 0 0 1px rgba(198, 180, 255, 0.55),
    0 0 0 3px rgba(180, 156, 255, 0.18),
    0 22px 44px -18px rgba(11, 13, 18, 0.92),
    0 0 42px -4px rgba(180, 156, 255, 0.55);
}
.standards__list li:hover::before { opacity: 1; }

.person:hover {
  transform: translateY(-3px);
  /* Same solid-ink + bright-violet-edge treatment — the long bio
     text needs a clean read surface when the user hovers. */
  background: rgba(13, 15, 22, 0.96);
  box-shadow:
    0 0 0 1px rgba(198, 180, 255, 0.6),
    0 0 0 3px rgba(180, 156, 255, 0.2),
    0 26px 54px -22px rgba(11, 13, 18, 0.95),
    0 0 56px -6px rgba(180, 156, 255, 0.6);
}
.person:hover::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .standards__list li,
  .person { transition: none; }
  .standards__list li:hover,
  .person:hover { transform: none; }
}