/* ---------- 0. Self-hosted faces ----------
   No third-party font request: the condensed face the hero diagram's tile
   labels are set in has to be present, or the labels fall back to a wide
   face. Inter ships as one variable file covering 400-900. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   BUILT-N-AI — main.css
   Written from scratch. Mobile-first, fluid, no fixed heights.
   ------------------------------------------------------------
   Layout rules that keep this responsive at every width:
   1. Every grid/flex child gets min-width:0 so long words and
      wide children can never force horizontal overflow.
   2. Type sizes use clamp() and letter-spacing uses em units,
      so tracking scales with the font instead of crushing
      headlines at small sizes.
   3. Multi-column grids use repeat(auto-fit, minmax(min(100%,X),1fr))
      so they reflow on their own instead of relying on
      breakpoint-by-breakpoint overrides.
   4. Artwork is inline SVG or an <img> with height:auto — it
      scales inside its box and is never cropped.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  --navy-900: #050c15;
  --navy-800: #06101c;
  --navy-700: #07111f;
  --navy-600: #0a1728;
  --navy-500: #0c1b2e;
  --navy-400: #10243a;

  --ink: #f4f7fb;
  --ink-soft: #c8d4e2;
  --muted: #9aa9bd;
  --muted-dim: #74839a;

  --blue: #24b5ff;
  --lime: #a7f04a;
  --orange: #ff7b45;

  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(36, 181, 255, 0.28);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;

  --shadow: 0 18px 60px rgba(0, 0, 0, 0.38);
  --shadow-lift: 0 24px 70px rgba(0, 0, 0, 0.45);

  --header-h: clamp(64px, 5.4vw, 104px);
  --gutter: clamp(18px, 6.6vw, 250px);
  --section-y: clamp(64px, 8vw, 116px);
  --max: 1560px;

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  /* overflow-x guard: nothing can ever produce a sideways scrollbar */
  overflow-x: hidden;
  background: var(--navy-700);
  color: var(--ink);
  font-family: var(--font);
  /* Body copy keeps growing on wide monitors instead of stalling at 17px,
     so card text does not read as tiny next to a 100px headline. The
     header and buttons are pinned to the old scale below, which is what
     keeps the hero and nav geometry exactly where it is. */
  font-size: clamp(15px, 0.32vw + 13.9px, 20px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

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

h1, h2, h3, h4 {
  line-height: 1.08;
  text-wrap: balance;
  font-weight: 800;
}

p { text-wrap: pretty; }

ul { padding-left: 1.15em; }

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

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--lime);
  color: var(--navy-800);
  font-weight: 800;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 12px; }

/* ---------- 3. Layout primitives ---------- */
.wrap {
  /* Proportional gutters, no centred max-width column. A fixed max-width makes
     the logo drift toward the middle as the window grows -- the mockup keeps it
     at a constant ~6.6% of the width. Text blocks inside still cap their own
     measure (.section-head, .prose), so lines never get too long. */
  width: 100%;
  padding-inline: var(--gutter);
}

.wrap-narrow { max-width: 860px; }

.section { padding-block: var(--section-y); }

/* Every direct child of a grid or flex container can shrink. */
.grid > *, .flex > * { min-width: 0; }

.stack > * + * { margin-top: var(--stack-gap, 18px); }

/* Auto-reflowing card grid: the min() keeps single-column safe on
   very narrow screens without a media query. */
.auto-grid {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col, 260px)), 1fr));
}
.auto-grid > * { min-width: 0; }

/* ---------- 4. Text utilities ---------- */
.kicker {
  display: block;
  font-size: clamp(13px, 0.85vw, 18px);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
}
.kicker.is-lime { color: var(--lime); }
.kicker.is-orange { color: var(--orange); }

.kicker-rule::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  margin-right: 10px;
  vertical-align: 0.32em;
  background: var(--lime);
}

.h1 {
  font-size: clamp(2.35rem, 5.2vw, 4.4rem);
  letter-spacing: -0.035em;
}
.h2 {
  font-size: clamp(1.85rem, 3.4vw, 3.1rem);
  letter-spacing: -0.028em;
}
.h3 {
  font-size: clamp(1.15rem, 1.1vw + 0.7rem, 1.5rem);
  letter-spacing: -0.015em;
}

.lead {
  font-size: clamp(1.02rem, 1.25vw, 1.85rem);
  color: var(--ink-soft);
}

.muted { color: var(--muted); }

em.hl { font-style: normal; color: var(--lime); }

.section-head { max-width: 780px; }
.section-head.is-centered { margin-inline: auto; text-align: center; }
.section-head .h2 { margin-top: 12px; }
.section-head p { margin-top: 14px; color: var(--muted); }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: clamp(13px, 0.95vw, 20px) clamp(20px, 1.5vw, 34px);
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: clamp(14px, 1vw, 21px);
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  transition: transform 0.16s ease, background-color 0.16s ease,
    border-color 0.16s ease, box-shadow 0.16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--lime {
  background: var(--lime);
  color: var(--navy-800);
  box-shadow: 0 12px 34px rgba(167, 240, 74, 0.18);
}
.btn--lime:hover { background: #b6f866; }

.btn--ghost {
  border-color: #2f4a66;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--blue); background: rgba(36, 181, 255, 0.08); }

.btn--dark {
  background: #12253c;
  border-color: #2f4d6c;
  color: var(--ink);
}
.btn--dark:hover { border-color: var(--blue); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(18px, 3vh, 34px);
}
/* Full-width buttons only when they genuinely cannot sit side by side. */
@media (max-width: 420px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
  font-weight: 800;
}
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 6. Header + navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7, 17, 31, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.header-bar {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
}
/* The header brand is the wordmark alone, as in the supplied design. */
.brand img { display: none; }
.footer-brand img { display: block; width: 28px; height: 28px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.brand-text strong {
  font-size: clamp(16px, 1.6vw, 38px);
  letter-spacing: 0.04em;
}
.brand-text strong em { font-style: normal; color: var(--lime); }
.brand-text small {
  margin-top: 4px;
  font-size: clamp(8px, 0.6vw, 14px);
  letter-spacing: 0.2em;
  color: var(--muted-dim);
  white-space: nowrap;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #2b4560;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
}
.nav-toggle-bars {
  position: relative;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: background-color 0.15s ease;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, top 0.2s ease;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }

body.nav-open .nav-toggle-bars { background: transparent; }
body.nav-open .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }

/* Mobile: nav is a panel under the header. */
.site-nav {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  display: grid;
  gap: 4px;
  padding: 14px var(--gutter) 22px;
  background: rgba(6, 16, 28, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
body.nav-open .site-nav {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.site-nav a {
  padding: 13px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  /* pinned to the old body scale: header height must not move */
  font-size: clamp(15px, 0.35vw + 14px, 17px);
  font-weight: 600;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { background: rgba(36, 181, 255, 0.09); color: #fff; }
.site-nav .nav-cta {
  margin-top: 8px;
  border: 1px solid #31506f;
  color: var(--ink);
  text-align: center;
  font-weight: 800;
}

/* Desktop nav */
@media (min-width: 1000px) {
  .nav-toggle { display: none; }
  .site-nav {
    position: static;
    inset: auto;
    display: flex;
    align-items: center;
    gap: clamp(6px, 1.2vw, 20px);
    flex-wrap: nowrap;
    padding: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    max-height: none;
    overflow: visible;
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .site-nav a {
    padding: 8px 10px;
    font-size: clamp(13px, 0.98vw, 20px);
    font-weight: 500;
    white-space: nowrap;
  }
  .site-nav .nav-cta {
    margin-top: 0;
    padding: 10px 15px;
    font-weight: 700;
  }
}

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  /* Flat and matched to the artwork's own edge colour (sampled: #01050e), so
     the illustration blends into the page instead of reading as a pasted
     rectangle. The mockup's page background is this same value. */
  background: #01050e;
  padding-block: clamp(22px, 3.4vh, 56px) clamp(14px, 2.2vh, 34px);
}

/* The hero fills the window: one flexible row for the content and one
   auto row for the scroll cue at the bottom. */
.hero {
  /* No forced viewport height: the artwork defines the hero's height at its
     own aspect ratio, so there is no leftover area to fill. */
  display: grid;
  grid-template-rows: auto auto;
}

/* Mobile-first: one column, artwork under the copy. */
.hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(30px, 4vw, 48px);
  grid-template-columns: 1fr;
  align-items: center;
}
.hero-layout > * { min-width: 0; }

.hero-copy { padding-inline: var(--gutter); }
.hero-scroll-wrap { padding-inline: var(--gutter); }
/* The hero headline runs slightly tighter than a generic .h1 so it holds
   three or four lines in the copy column instead of eight. */
.hero-copy .h1 {
  /* Measured off the mockup: 78px at a 1536px viewport (cap height 57px),
     line pitch 82px = 1.05, tight tracking. Not text-wrap:balance -- that
     evens line lengths and produces more, shorter lines than the mockup. */
  /* Scales on the SHORTER axis. The mockup is 1536x1024, where 5.08vw and
     7.6vh both equal its measured 78px -- so at that aspect ratio this is an
     exact match, and on a wide-but-short window the height term takes over so
     the hero still fits instead of running past the fold. */
  font-size: clamp(2.1rem, min(5.08vw, 7.6vh), 8.2rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-wrap: normal;
}
.hero-copy .lead { margin-top: clamp(16px, 2.1vh, 30px); font-size: clamp(1rem, min(1.25vw, 1.9vh), 1.85rem); max-width: 52ch; }
/* No width cap here: the copy fills its column. */

.hero-kicker { margin-bottom: clamp(12px, 1.8vh, 26px); }

.hero-rule {
  display: block;
  width: 72px;
  height: 3px;
  margin: 26px 0 0;
  border-radius: 2px;
  background: var(--lime);
}

/* Desktop: the first grid track absorbs the centering margin so the copy
   lines up with every other section, while the artwork track runs all the
   way to the right edge of the viewport. Percentages in
   grid-template-columns resolve against the grid container, so no vw
   units are involved and a scrollbar can never cause overflow. */
@media (min-width: 1080px) {
  .hero-layout {
    /* Track 1 absorbs the centering margin so the copy lines up with every
       other section — but it is capped, because past ~1900px that margin
       grows faster than the content and strands the copy mid-screen. */
    grid-template-columns:
      var(--gutter)
      minmax(0, 43fr)
      minmax(0, 57fr);
    gap: 0;
    align-items: center;
  }
  /* Row 1 holds the copy, row 2 the scroll cue — and the artwork spans both
     so it reaches the bottom edge of the window. */
  .hero-layout { grid-template-rows: auto auto; }
  .hero-copy { grid-column: 2; grid-row: 1; padding-inline: 0 clamp(16px, 3.4vw, 56px); align-self: center; }
  .hero-art { grid-column: 3; grid-row: 1 / -1; align-self: center; }
  .hero-scroll { grid-column: 2; grid-row: 2; margin-top: 0; padding-inline: 0; }
}

/* Vertical padding lives on the copy on desktop, so the artwork can run
   flush from under the header to the bottom of the window. */
@media (min-width: 1080px) {
  .hero-copy { padding-block: 0; }
  .hero-scroll { padding-block: 0 clamp(10px, 1.4vh, 22px); }
}

.hero-art {
  position: relative;
  overflow: hidden;
  background-color: transparent;
  border: 0;
  margin-inline: var(--gutter);
}
@media (min-width: 1080px) {
  /* margin-inline:auto on a grid item makes it shrink to its content, which
     pins the artwork at its intrinsic 926px and stops it scaling up. So the
     track stays stretched and the cap goes on the inner element instead. */
  .hero-art { margin-inline: 0; }
}


@media (min-width: 860px) {
    .hero-art--vector }

/* The supplied illustration, shown at every screen size. Natural aspect
   ratio: never cropped, never letterboxed, so no empty area is created.

   The edges are feathered with a mask instead of colour-matched to the page.
   Matching hex values is not reliable: the image is an untagged bitmap, so on
   a wide-gamut display the browser can render its black slightly differently
   from the identical CSS black, and the join shows as a vertical line. A fade
   makes a hard edge impossible regardless of how either side is rendered.
   The outer 8% of the artwork is empty backdrop, so nothing is lost. */
.hero-art__raster {
  display: block;
  margin-inline: auto;
  /* Never taller than one screen. 926/860 is the artwork's aspect ratio, so
     capping the width by the available height keeps the hero on one screen
     without distorting or cropping it. Any spare column width is the same
     seamless black, so the cap is invisible. */
  max-width: calc((100svh - var(--header-h) - clamp(78px, 10vh, 168px)) * 926 / 860);
}
.hero-art__raster img {
  /* width:100% so it scales UP to fill the column -- width:auto caps a replaced
     element at its intrinsic 926px and it never grows. The height limit lives
     on the container instead (below), which keeps the aspect ratio intact. */
  width: 100%;
  height: auto;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 9%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0, #000 9%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-composite: intersect;
}

.hero-scroll {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(16px, 2.4vh, 32px);
  padding-inline: var(--gutter);
  font-size: clamp(13px, 0.98vw, 19px);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
}
.hero-scroll:hover { color: var(--blue); }
.hero-scroll span {
  display: inline-block;
  animation: nudge 1.9s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ---------- 7b. Interior page header ---------- */
.page-head {
  background: #01050e;
  padding-block: clamp(48px, 7vw, 104px) clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
}
.page-h1 {
  margin: 14px 0 18px;
  max-width: 22ch;
  font-size: clamp(2rem, 4.4vw, 4.1rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: normal;
}
.page-head .lead { max-width: 62ch; }

/* ---------- 8. Cards + panels ---------- */
.panel {
  border: 1px solid #1f3853;
  border-radius: var(--radius);
  background: #0d1d30;
  padding: clamp(20px, 2.2vw, 30px);
}
.panel h3 { margin-bottom: 8px; }
.panel p { color: var(--muted); }

.panel-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border: 1px solid rgba(36, 181, 255, 0.28);
  border-radius: 13px;
  background: rgba(36, 181, 255, 0.08);
  color: var(--blue);
}
.panel-icon svg { width: 22px; height: 22px; }
.panel-icon.is-lime {
  border-color: rgba(167, 240, 74, 0.3);
  background: rgba(167, 240, 74, 0.08);
  color: var(--lime);
}

.tag-label {
  display: block;
  margin-bottom: 10px;
  font-size: clamp(13px, 0.98vw, 19px);
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--lime);
}
/* .panel p sets a muted color at equal-or-higher specificity, which was
   silently overriding .tag-label whenever it's a <p> (case studies, "Pillar"
   tags, etc.) instead of a <span> — this restores the lime accent everywhere
   tag-label is used, so the category tag reads the same on every page. */
.panel .tag-label { color: var(--lime); }

/* ---------- 9. Data / ask section ---------- */
.band-800 { background: var(--navy-800); }
.band-700 { background: var(--navy-700); }
.band-600 { background: var(--navy-600); }
.band-alt { background: #0b1727; }

.data-card {
  display: grid;
  gap: clamp(18px, 2.2vw, 26px);
  grid-template-columns: 1fr;
  align-items: stretch;
  padding: clamp(24px, 3.2vw, 46px);
  border: 1px solid #1f3650;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #0c1b2e, #0b1728);
  box-shadow: var(--shadow);
}
.data-card > * { min-width: 0; }
@media (min-width: 700px) {
  .data-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-card__copy { grid-column: 1 / -1; }
}
@media (min-width: 1060px) {
  .data-card { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr) minmax(0, 0.85fr); align-items: center; }
  .data-card__copy { grid-column: auto; }
}
.data-card__copy .h2 { margin: 12px 0 10px; font-size: clamp(1.55rem, 2.1vw, 2.15rem); }
.data-card__copy p { color: var(--muted); margin-bottom: 16px; }

.mini-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid #29435e;
  border-radius: var(--radius);
  background: #0a1626;
}
.mini-card img { width: 38px; height: 38px; }
.ask-query { font-size: clamp(15px, 0.5vw + 13px, 17px); color: #eaf3ff; }
.ask-arrow { margin-top: auto; color: var(--lime); font-size: 26px; line-height: 1; }

.analysis-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: space-between;
  align-items: flex-start;
}
.analysis-head span { font-size: 0.86em; color: var(--ink-soft); }
.analysis-head strong {
  display: block;
  font-size: clamp(20px, 1.6vw, 26px);
  color: var(--lime);
  text-align: right;
}
.analysis-head small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}
.bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: clamp(70px, 8vw, 96px);
}
.bars i {
  flex: 1 1 0;
  min-width: 0;
  background: linear-gradient(var(--blue), var(--lime));
  border-radius: 6px 6px 2px 2px;
}
.mini-card > p.fine { font-size: 0.86em; color: var(--muted); }

/* ---------- 10. Principle callout ---------- */
.callout {
  margin-top: clamp(24px, 3vw, 38px);
  padding: clamp(20px, 2.4vw, 28px);
  border-left: 4px solid var(--lime);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: #0d1e31;
}
.callout .h3 { margin: 6px 0 8px; font-size: clamp(1.25rem, 1.6vw, 1.75rem); }
.callout p { color: var(--muted); }

/* ---------- 11. Method flow ---------- */
.flow {
  display: grid;
  gap: clamp(16px, 2vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.flow > * { min-width: 0; }
.flow-arrow { display: none; }

@media (min-width: 1080px) {
  .flow {
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr);
    align-items: stretch;
  }
  .flow-arrow {
    display: grid;
    place-items: center;
    color: #43607d;
  }
  .flow-arrow svg { width: 22px; height: 22px; }
}

.flow-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid #203851;
  border-radius: 20px;
  background: #0b1829;
}
.flow-card.is-featured {
  border-color: #44622b;
  box-shadow: 0 0 40px rgba(167, 240, 74, 0.09);
}
.flow-card__step {
  font-size: clamp(14px, 0.85vw, 19px);
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--lime);
}
.flow-card p { color: var(--muted); }
.flow-card ul {
  margin-top: auto;
  padding-left: 1.1em;
  color: var(--ink-soft);
  font-size: 1em;
}
.flow-card li + li { margin-top: 4px; }
.flow-card li::marker { color: var(--lime); }

/* ---------- 12. Insight / console ---------- */
.split {
  display: grid;
  gap: clamp(32px, 4.5vw, 64px);
  grid-template-columns: 1fr;
  align-items: center;
}
.split > * { min-width: 0; }
@media (min-width: 980px) {
  .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .split.is-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.split .h2 { margin: 12px 0 14px; font-size: clamp(1.7rem, 2.55vw, 2.55rem); }
.split p { color: var(--muted); }

.note {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid #234660;
  border-radius: 12px;
  background: #0e2137;
  color: var(--ink-soft);
}
.note strong { color: #fff; }

.console {
  padding: clamp(16px, 1.8vw, 24px);
  border: 1px solid #26445f;
  border-radius: 20px;
  background: #07111d;
  box-shadow: var(--shadow);
}
.console-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 6px;
  font-size: 12px;
  color: var(--muted-dim);
}
.console-bar i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #39506a;
  flex: none;
}
.console-bar b { margin-left: 8px; font-weight: 700; }
.bubble {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid #244d6f;
  border-radius: 13px;
  background: #10253c;
  color: #dbe9f8;
  font-size: clamp(14px, 0.35vw + 13px, 16px);
  /* long questions wrap instead of stretching the card */
  overflow-wrap: anywhere;
}
.console-answer {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid rgba(167, 240, 74, 0.28);
  border-radius: 14px;
  background: rgba(167, 240, 74, 0.06);
}
.console-answer strong { color: var(--lime); }
.console-answer p { margin-top: 6px; color: var(--ink-soft); }

/* ---------- 13. Proof metrics ---------- */
.metric-grid {
  display: grid;
  gap: clamp(12px, 1.4vw, 16px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
/* Four metrics read better as a 2x2 block than as a 3+1 orphan row. */
.metric-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.metric {
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid #284057;
  border-radius: var(--radius);
  background: #0a1524;
}
.metric strong {
  display: block;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--lime);
}
.metric span { display: block; margin-top: 7px; color: var(--ink-soft); font-size: 1em; }
.metric small { display: block; margin-top: 7px; color: var(--muted); font-size: 0.98em; }

/* ---------- 14. Checkup ---------- */
.checkup { background: linear-gradient(135deg, #07111f, #0b1a2b); }
.checkup-solo { max-width: 780px; margin-inline: auto; }

.checkup-card {
  padding: clamp(20px, 2.6vw, 32px);
  border: 1px solid #2a445e;
  border-radius: var(--radius-lg);
  background: #0c1a2c;
  box-shadow: var(--shadow);
}
.progress {
  height: 5px;
  border-radius: 99px;
  background: #182c42;
  overflow: hidden;
}
.progress i {
  display: block;
  height: 100%;
  width: 10%;
  background: linear-gradient(90deg, var(--blue), var(--lime));
  transition: width 0.25s ease;
}
.q-meta { margin-top: 20px; }
.q-title {
  margin: 10px 0 18px;
  font-size: clamp(1.15rem, 1.5vw, 1.55rem);
  letter-spacing: -0.015em;
}
.choices { display: grid; gap: 10px; }
.choice {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #28435f;
  border-radius: 12px;
  background: #0a1626;
  color: var(--ink-soft);
  text-align: left;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.choice:hover { border-color: #3d6c96; }
.choice[aria-checked="true"] {
  border-color: var(--lime);
  background: rgba(167, 240, 74, 0.09);
  color: #fff;
}
.checkup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-top: 22px;
}
.btn-mini {
  padding: 11px 18px;
  border-radius: 10px;
  border: 1px solid #29445f;
  background: #0b1929;
  color: var(--ink-soft);
  font-weight: 800;
  cursor: pointer;
}
.btn-mini--lime { background: var(--lime); border-color: var(--lime); color: var(--navy-800); }
.btn-mini[hidden] { display: none; }
.hint { margin-top: 12px; font-size: 13px; color: var(--orange); }
.score {
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--lime);
  letter-spacing: -0.03em;
  margin: 8px 0 12px;
}

/* ---------- 15. About ---------- */
.about-grid {
  display: grid;
  gap: clamp(28px, 4vw, 58px);
  grid-template-columns: 1fr;
  align-items: center;
}
.about-grid > * { min-width: 0; }
@media (min-width: 900px) {
  .about-grid { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); }
}
.portrait {
  max-width: 420px;
  border-radius: var(--radius-lg);
  border: 1px solid #2b455e;
  box-shadow: var(--shadow);
  width: 100%;
}
@media (max-width: 899px) { .portrait { margin-inline: auto; } }
.about-grid .h2 { margin: 12px 0 16px; }
.about-grid p { color: var(--muted); }
.about-grid p.lead { color: var(--ink-soft); }

.cred-row {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr));
  margin-top: 28px;
}
.cred-row div {
  padding: 16px;
  border: 1px solid #24415b;
  border-radius: 13px;
  background: #0d1d31;
}
.cred-row strong {
  display: block;
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  color: var(--lime);
  letter-spacing: -0.02em;
}
.cred-row span { font-size: 0.86em; color: var(--ink-soft); }

/* ---------- 16. CTA + footer ---------- */
.cta {
  padding-block: clamp(56px, 7vw, 88px);
  background: var(--navy-800);
  border-top: 1px solid #1d3349;
}
.cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 44px);
}
.cta-inner > div { flex: 1 1 min(100%, 460px); min-width: 0; }
.cta-inner .h2 { margin: 10px 0 10px; font-size: clamp(1.7rem, 2.8vw, 2.6rem); }
.cta-inner p { color: var(--muted); }

.site-footer {
  padding-block: 30px;
  background: var(--navy-900);
  border-top: 1px solid #17283b;
  color: var(--muted-dim);
  font-size: 13px;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  justify-content: space-between;
  align-items: center;
}
.footer-inner > * { min-width: 0; }
.footer-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-soft);
  font-weight: 800;
  letter-spacing: 0.04em;
}
.footer-brand img { width: 28px; height: 28px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer-links a:hover { color: var(--blue); }

/* ---------- 17. Case study page ---------- */
.case-hero {
  padding-block: clamp(52px, 7vw, 96px);
  background:
    radial-gradient(80% 60% at 78% 15%, rgba(36, 181, 255, 0.12), transparent 60%),
    linear-gradient(180deg, #06101d, #081525);
}
.case-hero .h1 { margin: 16px 0 22px; font-size: clamp(2.1rem, 4.6vw, 3.7rem); }
.case-hero .h1 span { color: var(--lime); }
.case-disclosure {
  margin-top: 24px;
  font-size: 13px;
  color: var(--muted-dim);
  max-width: 62ch;
}

.prose { max-width: 74ch; }
.prose > * + * { margin-top: 18px; }
.prose p { color: var(--ink-soft); }
.prose .h2 { margin-top: 14px; }

.quote {
  margin-top: 26px;
  padding: 22px 24px;
  border-left: 4px solid var(--blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(36, 181, 255, 0.07);
  font-size: clamp(1.05rem, 1.2vw, 1.28rem);
  color: #eaf3ff;
  font-style: italic;
}
.quote.is-lime { border-left-color: var(--lime); background: rgba(167, 240, 74, 0.07); }

.list-card { }
.list-card ul { margin-top: 14px; color: var(--ink-soft); }
.list-card li + li { margin-top: 7px; }
.list-card li::marker { color: var(--lime); }

.proof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: baseline;
  margin-top: clamp(24px, 3vw, 34px);
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid rgba(167, 240, 74, 0.28);
  border-radius: var(--radius);
  background: rgba(167, 240, 74, 0.06);
}
.proof-strip strong { color: var(--lime); font-size: clamp(1.05rem, 1.3vw, 1.3rem); }
.proof-strip span { color: var(--ink-soft); flex: 1 1 min(100%, 380px); min-width: 0; }

/* Before / after — stacks as labelled pairs instead of a broken table */
.ba-list { display: grid; gap: 14px; }
.ba-row {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  padding: 0;
}
@media (min-width: 820px) {
  .ba-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  /* Side by side the columns are self-evident, so label only the top row. */
  .ba-row + .ba-row .ba-cell b { display: none; }
}
.ba-cell {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid #24405a;
  border-radius: 14px;
  background: #0b1828;
}
.ba-cell b {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.ba-cell.is-before { border-color: rgba(255, 123, 69, 0.3); }
.ba-cell.is-before b { color: var(--orange); }
.ba-cell.is-after { border-color: rgba(167, 240, 74, 0.3); background: rgba(167, 240, 74, 0.05); }
.ba-cell.is-after b { color: var(--lime); }
.ba-cell p { color: var(--ink-soft); }

.impact-grid .h3 { margin: 8px 0 6px; }
.impact-grid strong {
  display: block;
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  color: var(--lime);
  letter-spacing: -0.02em;
}

.section-dark { background: var(--navy-800); }

/* ---------- 17a. Inline text link ----------
   Global rule sets a { color: inherit; text-decoration: none } for nav and
   card links, so a genuine in-sentence link needs to opt back in. */
.link {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.link:hover { color: var(--lime); }

/* ---------- 17b. Fixed-count card grid ----------
   Used where the card count is a fixed 5 or 6. Plain auto-fit lands on an
   awkward count at very wide widths and orphans the last card, so this
   locks it to 1 / 2 / 3 columns. Self-contained: only .step-grid uses it. */
.step-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
@media (min-width: 720px) {
  .step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1120px) {
  .step-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 18. Motion ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 19b. References tabs ---------- */
.ref-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(26px, 3vw, 38px);
}
.ref-tab {
  padding: 12px 22px;
  border: 1px solid #28435f;
  border-radius: 999px;
  background: #0a1626;
  color: var(--ink-soft);
  font-size: clamp(14px, 0.9vw, 18px);
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.ref-tab:hover { border-color: var(--blue); }
.ref-tab[aria-selected="true"] {
  border-color: var(--lime);
  background: rgba(167, 240, 74, 0.09);
  color: #fff;
}
.ref-panel[hidden] { display: none; }

.ref-list {
  display: grid;
  gap: clamp(20px, 2.6vw, 30px);
  max-width: 820px;
}

.ref-card { display: flex; flex-direction: column; gap: 20px; }
.ref-card .quote { margin-top: 0; }
.ref-card .quote p + p { margin-top: 14px; }
.ref-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 16px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.ref-meta strong { color: #fff; font-size: 1.02em; }
.ref-meta span { color: var(--muted); font-size: 0.86em; }
.ref-meta-name { display: flex; align-items: center; gap: 12px; }
.ref-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }

/* ---------- 19. Print ---------- */
@media print {
  .site-header, .nav-toggle, .hero-scroll, .checkup-card, .cta { display: none !important; }
  body { background: #fff; color: #000; }
  .panel, .metric, .flow-card { border-color: #ccc; background: none; }
}