/* ============================================
   Situational AI — Monochrome Institutional Stylesheet
   White canvas, hairline rules instead of shadows,
   outlined pill actions, one green accent.
   ============================================ */

:root {
  /* --- Canvas & surfaces --- */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F7F8F9;
  --color-canvas: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-solid: #FFFFFF;
  --color-surface-hover: #FFFFFF;
  --color-border: #DCE1E6;
  --color-border-strong: #C1C6CB;

  /* --- Ink: sampled from the reference --- */
  --color-text: #1C1F22;
  --color-text-soft: #41464C;
  --color-text-muted: #787F87;
  --color-text-faint: #A6ACB2;

  /* --- Action --- */
  --color-primary: #1C1F22;
  --color-primary-light: #41464C;
  --color-primary-deep: #000000;

  /* --- A single green accent, as the reference mark uses --- */
  --color-accent: #10804A;
  --color-accent-light: #17A15C;
  --color-accent-deep: #0B5C35;
  --color-violet: #787F87;
  --color-cyan: #A6ACB2;
  --color-green: #10804A;
  --color-gradient-start: #1C1F22;
  --color-gradient-end: #787F87;
  --spectrum: linear-gradient(110deg, #C1C6CB 0%, #A6ACB2 40%, #787F87 75%, #41464C 100%);

  /* --- Type --- */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: var(--font-family);
  --font-mono: ui-monospace, SFMono-Regular, 'Cascadia Code', Menlo, Consolas, monospace;
  --font-label: var(--font-family);
  --font-hero: var(--font-family);
  --font-hero-accent: 'Britney', var(--font-family);

  /* --- Geometry: pill actions, near-square panels --- */
  --radius: 10px;
  --radius-sm: 999px;
  --radius-lg: 12px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --max-width: 1200px;

  /* --- Elevation: the reference separates with hairlines, not shadows --- */
  --shadow-sm: none;
  --shadow-md: 0 1px 2px rgba(28, 31, 34, 0.04);
  --shadow-lg: 0 10px 30px -16px rgba(28, 31, 34, 0.16);
  --shadow-glow: none;
}

/* ============================================
   Britney (Zetafonts) — commercial, not on Google Fonts, so it is
   self-hosted rather than linked from a CDN. Converted from the licensed
   Britney-Bold.otf desktop file to woff2 (43.6KB -> 27.1KB).

   Declared at 700 specifically because this is the static Bold cut, not a
   variable font — claiming a 400-800 range would invite the browser to
   synthesise weights that do not exist. The hero renders at 700, so this
   is the only cut needed; Light / Regular / Ultra can be added the same
   way if Britney is ever used elsewhere.
   ============================================ */
@font-face {
  font-family: 'Britney';
  src: url('../fonts/britney.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   Reset & base
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  position: relative;
  font-family: var(--font-family);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.65;
  overflow-x: hidden;
}

/* No grid or aurora layer: the reference is plain white, and both read as
   decoration against it. */

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

/* height:auto is the required companion to the intrinsic width/height
   attributes on content images — without it the attribute height wins and
   scaled images distort. Rules that set an explicit height still override. */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   Progressive images (blur-up)
   A ~1KB placeholder is inlined on each content image as a background, so
   there is something to look at immediately; the real file decodes on top
   and the blur resolves. Intrinsic dimensions reserve the space, so nothing
   on the page moves while they arrive.
   ============================================ */
.sai-progressive {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(14px);
  transform: scale(1.03);
  transition: filter .7s ease, transform .7s ease;
}

.sai-progressive.is-loaded {
  filter: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .sai-progressive {
    filter: none;
    transform: none;
    transition: none;
  }
}

::selection {
  background: rgba(28, 31, 34, 0.18);
  color: var(--color-text);
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-text);
  letter-spacing: -0.02em;
}

/* Container */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Keep anchor targets clear of the fixed navbar. */
section[id],
header[id],
[id] {
  scroll-margin-top: 96px;
}

/* ============================================
   Navigation
   ============================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 16px 0;
  transition: var(--transition);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--color-border);
  padding: 10px 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 8px 32px -12px rgba(28, 31, 34, 0.16);
}

/* Monochrome theme: the nav keeps one plain hairline in both states. */

/* logo | centred links | actions — the outer 1fr columns are what keep the
   link list optically centred regardless of logo or CTA width. */
.nav-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.nav-logo { justify-self: start; }
.nav-links { justify-self: center; }

/* Sized here rather than inline so the mobile bar can shrink it — the three
   items otherwise overflow 390px and the CTA wraps onto two lines. */
.nav-logo img {
  height: 28px;
  border-radius: 4px;
}

.nav-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-icon {
  color: var(--color-primary);
  font-size: 1.4rem;
}

/* The wordmark asset is white artwork drawn for the old dark theme.
   Flip it to ink so it reads on the light canvas. Partner logos are
   already full-colour and are left untouched. */
img[alt="Situational AI"] {
  filter: brightness(0);
  opacity: 0.9;
  transition: var(--transition);
}

.sai-preloader img[alt="Situational AI"] {
  filter: brightness(0) invert(1);
}
a:hover > img[alt="Situational AI"],
.nav-logo:hover img[alt="Situational AI"] {
  opacity: 1;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
}

.nav-links a {
  position: relative;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: var(--transition);
}

/* Small mono caps with a leading marker, per the reference nav. */
.nav-links a:not(.btn) {
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-links a:not(.btn)::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: .32;
  vertical-align: middle;
  transition: opacity var(--transition);
}

.nav-links a:not(.btn):hover::before { opacity: 1; }

/* Underline that draws in from the left. */
.nav-links a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: var(--spectrum);
  transition: width var(--transition);
}

.nav-links a:not(.btn):hover {
  color: var(--color-text);
}

.nav-links a:not(.btn):hover::after {
  width: 100%;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-text);
  transition: var(--transition);
}

/* ---- Nav over the dark hero ----
   Applies only while unscrolled on the media-hero page; once .scrolled
   paints the white bar, the normal dark-on-light treatment resumes. The
   wordmark asset is natively white, so it simply drops the ink filter. */
body[data-hero="media"] .navbar:not(.scrolled) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: rgba(255, 255, 255, .14);
}

body[data-hero="media"] .navbar:not(.scrolled) .nav-links a:not(.btn) {
  color: rgba(255, 255, 255, .78);
}

body[data-hero="media"] .navbar:not(.scrolled) .nav-links a:not(.btn):hover {
  color: #fff;
}

body[data-hero="media"] .navbar:not(.scrolled) img[alt="Situational AI"] {
  filter: none;
  opacity: 1;
}

body[data-hero="media"] .navbar:not(.scrolled) .nav-toggle span {
  background: #fff;
}

body[data-hero="media"] .navbar:not(.scrolled) .btn-nav {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .38);
}

body[data-hero="media"] .navbar:not(.scrolled) .btn-nav:hover {
  background: #fff;
  color: var(--color-text) !important;
  border-color: #fff;
}

/* ---- Nav while scrolled over the dark zone ----
   The rules above only cover the unscrolled hero. Once .scrolled paints the
   white bar it would sit as a pale strip over the dark sections, so JS adds
   .is-on-dark for as long as the bar overlaps them (see main.js). The
   unscrolled case stays CSS-only, so it still works with JS disabled. */
.navbar.is-on-dark.scrolled {
  background: rgba(13, 16, 18, 0.80);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.navbar.is-on-dark .nav-links a:not(.btn) { color: rgba(255, 255, 255, 0.78); }
.navbar.is-on-dark .nav-links a:not(.btn):hover { color: #fff; }
.navbar.is-on-dark img[alt="Situational AI"] { filter: none; opacity: 1; }
.navbar.is-on-dark .nav-toggle span { background: #fff; }

.navbar.is-on-dark .btn-nav {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.38);
}

.navbar.is-on-dark .btn-nav:hover {
  background: #fff;
  color: var(--color-text) !important;
  border-color: #fff;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font-family);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;   /* a button label should never break across lines */
}

.btn-primary {
  background: transparent;
  color: var(--color-text);
  font-weight: 500;
  border: 1px solid var(--color-border-strong);
  box-shadow: none;
}

/* Light sweep on hover. */
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.32) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
  transform: none;
}

.btn-primary:hover::after {
  transform: translateX(120%);
}

.btn-outline {
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.btn-outline:hover {
  border-color: rgba(28, 31, 34, 0.45);
  color: var(--color-primary);
  background: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-nav {
  padding: 9px 20px;
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.btn-nav:hover {
  background: var(--color-text);
  color: #fff !important;
  border-color: var(--color-text);
}

.btn-sm {
  padding: 10px 20px;
  font-size: 0.85rem;
}

/* ============================================
   Hero
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 130px 0 90px;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 55% at 50% 34%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.45) 45%, transparent 72%),
    radial-gradient(ellipse 55% 45% at 18% 22%, rgba(28, 31, 34, 0.26) 0%, transparent 62%),
    radial-gradient(ellipse 50% 45% at 84% 30%, rgba(120, 127, 135, 0.22) 0%, transparent 62%),
    radial-gradient(ellipse 60% 40% at 50% 96%, rgba(16, 128, 74, 0.20) 0%, transparent 66%);
  animation: auroraDrift 22s ease-in-out infinite alternate;
}

/* Horizon arc — a lens of light behind the headline. */
.hero-bg::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -46%;
  width: min(1180px, 132%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(28, 31, 34, 0.16);
  background: radial-gradient(circle at 50% 0%, rgba(28, 31, 34, 0.07), transparent 55%);
}

@keyframes auroraDrift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  to   { transform: translate3d(1.5%, 1.5%, 0) scale(1.06); }
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-badge {
  position: relative;
  display: inline-block;
  padding: 7px 18px;
  border-radius: 100px;
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(28, 31, 34, 0.22);
  box-shadow: var(--shadow-sm), 0 0 0 6px rgba(28, 31, 34, 0.05);
  margin-bottom: 28px;
}

/* Live status dot. */
.hero-badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--color-cyan);
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(0, 182, 207, 0.55);
  animation: pulseDot 2.4s ease-out infinite;
}

@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(0, 182, 207, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(0, 182, 207, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 182, 207, 0); }
}

.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  line-height: 1.06;
  margin-bottom: 26px;
  color: var(--color-text);
}

/* ---- Hero titles: Inter, with Britney on the emphasis span ---- */
.hero h1,
.vision-hero h1,
.blog-hero h1 {
  font-family: var(--font-hero);
  font-weight: 700;
  /* Slightly eased off the -0.035em the old display face wanted;
     Inter sets tighter than it looks at this size. */
  letter-spacing: -0.015em;
}

.hero h1 .gradient-text,
.vision-hero h1 .gradient-text,
.blog-hero h1 .gradient-text {
  font-family: var(--font-hero-accent);
}

.gradient-text {
  background: linear-gradient(115deg, var(--color-cyan) 0%, var(--color-primary) 38%, var(--color-violet) 78%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 620px;
  margin: 0 auto 40px;
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

/* Hero stats read as an instrument strip. */
.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 12px;
  max-width: 660px;
  margin: 0 auto;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.stat {
  flex: 1;
  text-align: center;
  padding: 0 12px;
}

.stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.stat-label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
  margin-top: 6px;
}

.stat-divider {
  width: 1px;
  height: 38px;
  flex: 0 0 1px;
  background: linear-gradient(to bottom, transparent, var(--color-border-strong), transparent);
}

/* ============================================
   Media hero — full-bleed video, headline anchored bottom-left,
   actions bottom-right. Scoped to .hero--media so the other pages'
   heroes are untouched. Must stay AFTER the .hero rules above:
   equal specificity, so source order decides.
   ============================================ */
.hero--media {
  min-height: 100vh;
  /* svh keeps the hero from jumping as mobile browser chrome hides. */
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Symmetric: unequal padding offsets the optical centre. */
  padding: clamp(80px, 10vh, 120px) 0;
  overflow: hidden;
  /* Sits behind the video so there is never a flash before it paints. */
  background: #0D1012;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Evens out the wash so centred light text holds contrast anywhere in the
   frame, and darkens the top a little for the nav. Deliberately no fade to
   the page colour: a dark hero meeting a white page reads better as a crisp
   edge than as a smeared gradient. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(10, 13, 15, .58) 0%,
      rgba(10, 13, 15, .34) 30%,
      rgba(10, 13, 15, .30) 58%,
      rgba(10, 13, 15, .74) 86%,
      /* Lands on the dark zone's exact colour so the hero and the band
         below it read as one surface, with no seam where the video's
         lighter patches would otherwise show through. */
      #0D1012 100%);
}

/* Deliberately NOT .container: the hero breaks the 1200px centred grid so
   the headline can sit hard left and the actions hard right, against the
   viewport edges rather than 124px inside them. Clamped so the text never
   touches the edge on phones or drifts inward on ultrawide. */
/* SideRays canvas. Sits above the video and scrim but below .hero-inner
   (z-index 2), so the headline always wins. pointer-events:none keeps it
   from swallowing clicks on anything beneath it. */
.side-rays {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.side-rays canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 clamp(20px, 3vw, 56px);
}

/* Single centred column: the lead and the actions stack rather than
   sitting at opposite ends of the row. */
.hero-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* px + % on purpose: ch resolves against this element's own 16px
   font-size, not the headline's, so it lands far narrower than intended. */
/* Centred column. */
.hero-lead {
  max-width: min(940px, 82%);
  margin: 0 auto;
}

.hero--media h1 {
  /* Line one: Inter. */
  font-family: var(--font-family);
  font-size: clamp(1.9rem, 3.9vw, 3.1rem);
  line-height: 1.12;
  /* Sentence case, as the reference shows it — the previous uppercase
     treatment came from the earlier reference and is gone. */
  text-transform: none;
  letter-spacing: -0.022em;
  /* 500, not 700. A real Inter cut (300-800 are all loaded, so nothing is
     synthesised), and it sits better beside the 400-weight Corsiva line
     than a heavy bold did. */
  font-weight: 500;
  margin-bottom: 20px;
  color: #fff;
}

/* Line two is painted a solid white here rather than inheriting the shared
   .gradient-text ramp. That ramp runs light-to-grey across the line, which
   on this one read as the text fading out toward the right. All four of the
   gradient's properties have to be undone, not just the background: the
   base rule also clips the background to the glyphs and sets the fill
   colour transparent, so leaving either in place would blank the text.
   Other pages keep the ramp.

   Line two is Monotype Corsiva. Google Fonts publishes it as "Corsiva" —
   verified identical to the locally installed MTCORSVA.TTF, same glyphs and
   same metrics — so it can be served to every visitor instead of only
   rendering for people who happen to have it installed. The local family
   name is kept next in the stack as a no-network fallback.

   It ships in one weight, so font-weight returns to 400: inheriting the
   headline's 700 would have the browser synthesise bold and thicken the
   chancery strokes. It also sets a little smaller than Inter at the same
   size, hence the slight bump. */
.hero--media h1 .gradient-text {
  font-family: 'Corsiva', 'Monotype Corsiva', 'Britney', cursive, var(--font-family);
  font-weight: 400;
  font-style: normal;
  font-size: 1.14em;
  line-height: 1.22;
  letter-spacing: 0;
  display: inline-block;
  padding-bottom: .06em;   /* descender room */
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #fff;
  color: #fff;
}

.hero--media .hero-subtitle {
  margin: 0 auto;
  max-width: 54ch;
  font-size: 1.02rem;
  color: rgba(255, 255, 255, .72);
}

.hero--media .hero-actions {
  margin: 32px 0 0;
  gap: 12px;
  justify-content: center;
}

/* Second outlined pill; lighter border than the primary. */
.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-ghost:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
  background: var(--color-bg-alt);
}

/* Over the dark hero both pills invert: light outline, filling to solid
   white on hover. */
.hero--media .btn-primary,
.hero--media .btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .38);
}

.hero--media .btn-ghost { border-color: rgba(255, 255, 255, .22); }

.hero--media .btn-primary:hover,
.hero--media .btn-ghost:hover {
  background: #fff;
  color: var(--color-text);
  border-color: #fff;
  transform: none;
}

/* Stats, lifted out of the hero into their own band beneath it. */
.hero-stats-band {
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(247, 248, 249, .55));
}

.hero-stats-band .hero-stats {
  max-width: var(--max-width);
  padding: 20px 24px;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* ============================================
   Dark zone
   The hero, the stats band and "See the Vision" run as one dark block;
   .theme-fade then bridges into the light page beneath.

   Done by re-declaring the colour tokens on the element rather than
   restyling each component: everything inside already reads them through
   var(), so the whole subtree flips at once and stays in step with any
   later change to the light palette.
   ============================================ */
.is-dark {
  --color-bg: #0D1012;
  --color-bg-alt: #14181B;
  --color-canvas: #14181B;
  --color-surface: rgba(255, 255, 255, 0.05);
  --color-surface-solid: #14181B;
  --color-surface-hover: rgba(255, 255, 255, 0.08);
  --color-border: rgba(255, 255, 255, 0.13);
  --color-border-strong: rgba(255, 255, 255, 0.24);

  --color-text: #FFFFFF;
  --color-text-soft: rgba(255, 255, 255, 0.84);
  --color-text-muted: rgba(255, 255, 255, 0.62);
  --color-text-faint: rgba(255, 255, 255, 0.44);

  --color-primary: #FFFFFF;
  --color-primary-light: rgba(255, 255, 255, 0.82);
  --color-primary-deep: #FFFFFF;

  background: var(--color-bg);
  color: var(--color-text);
}

/* These carry hard-coded light values that the tokens cannot reach. */
.section-dark.is-dark,
.hero-stats-band.is-dark {
  background: var(--color-bg);
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.section-dark.is-dark::before { opacity: 0.16; }

.is-dark .section-tag {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.is-dark .video-container {
  background: #0A0C0E;
  box-shadow:
    0 40px 80px -32px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

/* The long ramp out of the dark block. Extra mid stops on purpose: a plain
   two-stop black-to-white gradient goes muddy through the middle greys. */
.theme-fade {
  height: clamp(180px, 26vh, 340px);
  background: linear-gradient(
    to bottom,
    #0D1012 0%,
    #171B1E 18%,
    #2F3539 38%,
    #5C646A 58%,
    #98A0A6 76%,
    #D6DBDF 90%,
    #FFFFFF 100%);
}

/* ============================================
   Sections
   ============================================ */
.section {
  position: relative;
  padding: 110px 0;
}

/* Tinted glass panel (class name kept for markup compatibility). */
.section-dark {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(247, 248, 249, 0.86));
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.section-dark::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--spectrum);
  opacity: 0.35;
}

.section-header {
  text-align: center;
  margin-bottom: 64px;
}

.section-tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 100px;
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(28, 31, 34, 0.2);
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
}

.section-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: -0.03em;
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  max-width: 660px;
  margin: 0 auto;
  line-height: 1.75;
}

.section-subtitle a {
  color: var(--color-primary);
  font-weight: 500;
  border-bottom: 1px solid rgba(28, 31, 34, 0.3);
  transition: var(--transition);
}

.section-subtitle a:hover {
  border-bottom-color: var(--color-primary);
}

.section-cta {
  text-align: center;
  margin-top: 52px;
}

/* ============================================
   Card system — shared glass treatment
   ============================================ */
.about-card,
.feature-card,
.blog-card,
.blog-list-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: none;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  overflow: hidden;
}

/* Spectral edge that lights up on hover. */
.about-card::before,
.feature-card::before,
.blog-card::before,
.blog-list-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--spectrum);
  opacity: 0;
  transition: opacity var(--transition);
}

.about-card:hover,
.feature-card:hover,
.blog-card:hover,
.blog-list-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg);
}

.about-card:hover::before,
.feature-card:hover::before,
.blog-card:hover::before,
.blog-list-card:hover::before {
  opacity: 0;   /* monochrome theme: no spectral edge */
}

/* ============================================
   About Grid
   ============================================ */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.about-card {
  padding: 36px 32px;
}

.about-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  font-size: 1.5rem;
  margin-bottom: 20px;
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(28, 31, 34, 0.14), rgba(120, 127, 135, 0.12));
  border: 1px solid rgba(28, 31, 34, 0.16);
  box-shadow: 0 8px 20px -10px rgba(28, 31, 34, 0.5);
}

.about-card h3 {
  font-size: 1.18rem;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.about-card p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.68;
}

/* ============================================
   About section — scroll-driven dark → light bridge
   main.js re-declares the same colour tokens .is-dark uses (see above),
   but interpolated by scroll position instead of hard-toggled: 0 matches
   the dark video zone exactly, 1 matches the light page exactly, so the
   section reads as one continuous fade with no seam at either edge.
   Everything below just reads those tokens through var() the same way
   the rest of the site already does — only the two hardcoded,
   non-token pieces (the tag pill and the icon tile) need help.
   ============================================ */
#about {
  background: var(--color-bg);
  color: var(--color-text);
}

#about .about-card {
  background: var(--color-surface-solid);
}

#about .about-icon {
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--color-text) 14%, transparent),
    color-mix(in srgb, var(--color-text) 12%, transparent));
  border-color: color-mix(in srgb, var(--color-text) 16%, transparent);
}

#about .section-tag {
  background: var(--about-tag-bg, rgba(255, 255, 255, 0.8));
  border-color: var(--about-tag-border, rgba(28, 31, 34, 0.2));
}

#about .section-subtitle a {
  border-bottom-color: color-mix(in srgb, var(--color-text) 30%, transparent);
}

/* The colour tokens themselves change every scroll frame (see main.js),
   so no transition is added here — animating on top of that would only
   lag behind the scroll position instead of tracking it. */

/* ============================================
   Video Section
   ============================================ */
.video-wrapper {
  max-width: 920px;
  margin: 0 auto;
}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: var(--color-surface-solid);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 40px 80px -32px rgba(28, 31, 34, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.7) inset;
}

.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(28, 31, 34, 0.08), rgba(120, 127, 135, 0.06) 55%, rgba(16, 128, 74, 0.08));
}

.play-button {
  transition: var(--transition);
  opacity: 0.9;
  filter: drop-shadow(0 12px 24px rgba(28, 31, 34, 0.35));
}

.video-placeholder:hover .play-button {
  opacity: 1;
  transform: scale(1.1);
}

.video-placeholder-text {
  margin-top: 16px;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.video-note {
  margin-top: 8px;
  font-family: var(--font-label);
  font-size: 0.75rem;
  color: var(--color-text-faint);
}

.video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.video-frame.hidden {
  display: none;
}

.video-url-input {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.video-url-input input {
  flex: 1;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-solid);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: 0.9rem;
  outline: none;
  transition: var(--transition);
}

.video-url-input input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(28, 31, 34, 0.14);
}

.video-url-input input::placeholder {
  color: var(--color-text-faint);
}

/* ============================================
   Features Grid
   ============================================ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.feature-card {
  padding: 36px 32px;
}

.feature-card:hover {
  border-color: rgba(16, 128, 74, 0.45);
}

/* Warm bloom in the corner on hover. */
.feature-card::after {
  content: '';
  position: absolute;
  right: -30px;
  top: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 128, 74, 0.14), transparent 70%);
  opacity: 0;
  transition: opacity var(--transition);
}

.feature-card:hover::after {
  opacity: 1;
}

.feature-number {
  position: relative;
  display: inline-block;
  font-family: var(--font-label);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--color-primary), var(--color-violet) 60%, var(--color-accent-deep));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 18px;
  line-height: 1;
}

/* Tick rule beside the numeral — instrument detail. */
.feature-number::after {
  content: '';
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  width: 44px;
  height: 1px;
  background: linear-gradient(to right, var(--color-border-strong), transparent);
}

.feature-card h3 {
  font-size: 1.18rem;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.feature-card p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.68;
}

/* ============================================
   Blog Grid
   ============================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.blog-card {
  display: block;
  padding: 32px 28px;
}

.blog-card-tag {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 100px;
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  background: rgba(16, 128, 74, 0.14);
  border: 1px solid rgba(16, 128, 74, 0.28);
  margin-bottom: 18px;
}

.blog-card h3 {
  font-size: 1.22rem;
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.32;
  letter-spacing: -0.02em;
}

.blog-card p {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.68;
  margin-bottom: 18px;
}

.blog-card-date {
  font-size: 0.85rem;
  color: var(--color-primary);
  font-weight: 600;
  transition: var(--transition);
}

.blog-card:hover .blog-card-date {
  letter-spacing: 0.02em;
}

/* ============================================
   Contact
   ============================================ */
.contact-wrapper {
  text-align: center;
}

.contact-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  background: var(--color-surface);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text-soft);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.contact-link:hover {
  border-color: rgba(28, 31, 34, 0.35);
  color: var(--color-primary);
  background: #fff;
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ============================================
   Footer
   ============================================ */
.footer {
  padding: 44px 0;
  border-top: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-logo img {
  transition: var(--transition);
  opacity: 0.85;
}

.footer-logo a:hover img {
  opacity: 1;
}

.footer-text {
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--color-text-faint);
}

/* ============================================
   Blog listing page
   ============================================ */
.blog-hero {
  position: relative;
  padding: 160px 0 60px;
  text-align: center;
}

.blog-list {
  display: grid;
  gap: 20px;
  max-width: 820px;
  margin: 0 auto;
}

.blog-list-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px;
}

.blog-list-card .blog-card-tag {
  align-self: flex-start;
  margin-bottom: 10px;
}

.blog-list-card h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.blog-list-card p {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.62;
  margin-bottom: 12px;
}

.blog-list-date {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
}

/* ============================================
   Blog post
   ============================================ */
.blog-post {
  max-width: 720px;
  margin: 0 auto;
  padding: 150px 24px 90px;
}

.blog-post-header {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}

.blog-post-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
  margin-bottom: 26px;
  transition: var(--transition);
}

.blog-post-back:hover {
  color: var(--color-primary);
}

.blog-post-header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.16;
  margin-bottom: 16px;
  letter-spacing: -0.035em;
}

.blog-post-meta {
  font-family: var(--font-label);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--color-text-faint);
}

.blog-post-content {
  font-size: 1.06rem;
  line-height: 1.82;
  color: var(--color-text-soft);
}

.blog-post-content h2 {
  font-size: 1.55rem;
  font-weight: 700;
  margin: 52px 0 18px;
  letter-spacing: -0.025em;
}

.blog-post-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 38px 0 12px;
  letter-spacing: -0.02em;
}

.blog-post-content p {
  margin-bottom: 22px;
  color: var(--color-text-muted);
}

/* Lede paragraph. */
.blog-post-content p:first-child {
  color: var(--color-text);
  font-size: 1.2rem;
  line-height: 1.7;
}

.blog-post-content a {
  color: var(--color-primary);
  border-bottom: 1px solid rgba(28, 31, 34, 0.3);
  transition: var(--transition);
}

.blog-post-content a:hover {
  border-bottom-color: var(--color-primary);
}

.blog-post-content strong {
  color: var(--color-text);
  font-weight: 600;
}

.blog-post-content code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(28, 31, 34, 0.08);
  border: 1px solid rgba(28, 31, 34, 0.14);
  color: var(--color-primary-deep);
}

.blog-post-content blockquote {
  position: relative;
  border-left: 2px solid transparent;
  border-image: var(--spectrum) 1;
  padding: 20px 26px;
  margin: 36px 0;
  background: linear-gradient(100deg, rgba(28, 31, 34, 0.05), rgba(120, 127, 135, 0.04));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.blog-post-content blockquote p {
  color: var(--color-text);
  font-style: italic;
  margin-bottom: 0;
}

.blog-post-content ul,
.blog-post-content ol {
  margin: 22px 0;
  padding-left: 24px;
  color: var(--color-text-muted);
}

.blog-post-content li {
  margin-bottom: 10px;
}

.blog-post-content li::marker {
  color: var(--color-primary);
}

.blog-post-content hr {
  border: none;
  height: 1px;
  margin: 48px 0;
  background: linear-gradient(to right, transparent, var(--color-border-strong), transparent);
}

/* Comparison tables. The markup carries inline borders/padding, so style
   the parts it leaves open. Four columns are tight inside the 720px text
   measure, so let the table pull into the margins and size the cells down. */
.blog-post-content table {
  width: calc(100% + 120px);
  margin-left: -60px;
  table-layout: fixed;
  font-size: 0.86rem;
  line-height: 1.45;
}

.blog-post-content table th,
.blog-post-content table td {
  white-space: normal;
  overflow-wrap: break-word;
}

.blog-post-content thead th {
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  vertical-align: bottom;
}

/* Our column is the point of the table — mark it. */
.blog-post-content thead th:last-child {
  color: var(--color-primary);
}

.blog-post-content tbody td {
  color: var(--color-text-muted);
}

.blog-post-content tbody td:first-child {
  color: var(--color-text);
  font-weight: 500;
}

.blog-post-content tbody td:last-child {
  color: var(--color-primary-deep);
  font-weight: 500;
  background: rgba(28, 31, 34, 0.04);
}

.blog-post-content tbody tr:hover td {
  background: rgba(28, 31, 34, 0.03);
}

/* ============================================
   Vision page — overrides for that page's
   inline <style> block (needs higher specificity).
   ============================================ */
body .vision-hero .hero-bg {
  background:
    radial-gradient(ellipse 70% 55% at 50% 20%, rgba(255, 255, 255, 0.85) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 20% 10%, rgba(28, 31, 34, 0.22) 0%, transparent 62%),
    radial-gradient(ellipse 55% 45% at 85% 45%, rgba(120, 127, 135, 0.18) 0%, transparent 60%);
}

body .vision-section:nth-child(even) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(247, 248, 249, 0.85));
}

body .vision-media img,
body .vision-hero-image {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  background: #fff;
}

body .vision-text li::before {
  background: var(--spectrum);
}

body .timeline-card {
  background: var(--color-surface);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

body .timeline-card:hover {
  border-color: rgba(28, 31, 34, 0.32);
  box-shadow: var(--shadow-lg);
}

body .timeline-card.active {
  border-color: rgba(16, 128, 74, 0.5);
  background: linear-gradient(160deg, rgba(16, 128, 74, 0.12), rgba(255, 255, 255, 0.85));
  box-shadow: 0 20px 44px -18px rgba(16, 128, 74, 0.6);
}

body .timeline-card .era {
  font-family: var(--font-label);
  color: var(--color-primary);
  letter-spacing: 0.12em;
}

body .timeline-card .label {
  color: var(--color-text-soft);
}

body .timeline-card.active .label {
  color: var(--color-accent-deep);
}

body .timeline-arrow {
  color: var(--color-text-faint);
  opacity: 0.7;
}

body .vision-cta {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(247, 248, 249, 0.9));
  border-top: 1px solid var(--color-border);
}

body .cta-reason {
  background: var(--color-surface);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

body .cta-reason:hover {
  border-color: rgba(28, 31, 34, 0.28);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    flex-direction: column;
    align-items: flex-start;
    padding: 90px 32px 32px;
    gap: 24px;
    transition: var(--transition);
    border-left: 1px solid var(--color-border);
    box-shadow: -20px 0 60px -20px rgba(28, 31, 34, 0.22);
  }

  .nav-links.active {
    right: 0;
  }

  .nav-toggle {
    display: flex;
    z-index: 1001;
  }

  .section {
    padding: 80px 0;
  }

  .hero {
    padding: 120px 0 70px;
  }

  .hero h1 {
    font-size: 2.3rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-stats {
    flex-direction: column;
    gap: 18px;
    padding: 22px 16px;
  }

  /* Media hero: stack the headline over the actions, both left-aligned. */
  .hero--media {
    padding-bottom: 40px;
  }

  .hero-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  .hero--media .hero-actions {
    width: 100%;
  }

  .hero--media .hero-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .hero--media h1 {
    font-size: clamp(2rem, 8.4vw, 2.9rem);
  }

  .hero--media .hero-subtitle {
    font-size: .95rem;
  }

  /* The link list becomes a fixed drawer and leaves the flow, so the bar is
     just logo | CTA | toggle. The CTA was moved out of the <ul>, so it must
     stay visible here — hiding it would drop it from mobile entirely. */
  .nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .nav-actions {
    order: 2;
    margin-left: auto;
  }

  .nav-toggle { order: 3; }

  .nav-actions .btn-nav {
    padding: 7px 14px;
    font-size: .78rem;
  }

  .nav-logo img { height: 22px; }

  .stat-divider {
    width: 60%;
    height: 1px;
    flex: 0 0 1px;
    background: linear-gradient(to right, transparent, var(--color-border-strong), transparent);
  }

  .features-grid,
  .about-grid,
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .footer-content {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .video-url-input {
    flex-direction: column;
  }

  .contact-links {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-link {
    justify-content: center;
  }

  .blog-post {
    padding: 120px 20px 70px;
  }

  /* Too narrow to pull wide or to wrap four columns — scroll instead. */
  .blog-post-content table {
    display: block;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .blog-post-content table th,
  .blog-post-content table td {
    white-space: nowrap;
  }

  body .vision-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  body .vision-row.reverse .vision-text,
  body .vision-row.reverse .vision-media {
    order: unset;
  }
}

/* ============================================
   Animations
   ============================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .fade-in {
    opacity: 1;
    transform: none;
  }
}