/* ============================================
   SPIRE LIGHT — LAYOUT
   Header, footer, sections, containers
   ============================================ */

/* ── Container ── */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.container-wide {
  max-width: var(--container-wide);
}

/* ── Sections ── */

.section {
  padding: var(--space-9) 0;
  position: relative;
  background: transparent;
}



.section-sm {
  padding: var(--space-9) 0;
}

.section-alt {
  background: transparent;
}

.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-7);
}

.section-header .label {
  margin-bottom: var(--space-3);
  display: block;
}

.section-header h2 {
  margin-bottom: var(--space-4);
}

.section-header p {
  margin: 0 auto;
  color: var(--text-body);
}

.section-header-left {
  text-align: left;
  margin-left: 0;
}

.section-header-left p {
  margin: 0;
}

/* ── Header / Navigation ── */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-height);
  display: flex;
  align-items: center;
  transition: background var(--dur-normal) var(--ease-out),
              border-color var(--dur-normal) var(--ease-out),
              backdrop-filter var(--dur-normal) var(--ease-out);
  border-bottom: 1px solid transparent;
}

.site-header.scrolled {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--glass-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

/* ── Pill header (marketing pages) ──
   At top of page: full-width edge-to-edge band (default look).
   On scroll: outer band goes transparent and the inner element
   becomes a centered floating pill. */

/* Smooth transition on .header-inner for both states. */
.site-header.pill-header .header-inner {
  transition: max-width var(--dur-normal) var(--ease-out),
              height var(--dur-normal) var(--ease-out),
              padding var(--dur-normal) var(--ease-out),
              background var(--dur-normal) var(--ease-out),
              border-color var(--dur-normal) var(--ease-out),
              border-radius var(--dur-normal) var(--ease-out),
              box-shadow var(--dur-normal) var(--ease-out);
}

/* Scrolled state: band goes transparent, header-inner becomes the pill. */
.site-header.pill-header.scrolled {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  height: auto;
  padding: var(--space-4) 0;
  pointer-events: none;
}

.site-header.pill-header.scrolled .header-inner {
  pointer-events: auto;
  max-width: min(calc(100% - 2rem), 880px);
  height: 52px;
  padding: 0 0.5rem 0 1.25rem;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  gap: var(--space-5);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08),
              0 2px 4px rgba(15, 23, 42, 0.05);
}

.site-header.pill-header.scrolled .header-logo span {
  font-size: 1rem;
}

.site-header.pill-header.scrolled .header-logo img {
  height: 28px;
  width: 28px;
}

.site-header.pill-header.scrolled .nav-links {
  gap: var(--space-5);
}

.site-header.pill-header.scrolled .nav-links a {
  font-size: 0.8125rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--fw-medium);
}

.site-header.pill-header.scrolled .nav-links a::after {
  bottom: -2px;
  height: 1px;
}

.site-header.pill-header.scrolled .header-cta .btn {
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--text-heading);
  font-weight: var(--fw-bold);
  font-size: 1.125rem;
  letter-spacing: var(--ls-tight);
}

.header-logo img {
  height: 36px;
  width: 36px;
  border-radius: var(--radius-sm);
}



.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}

.nav-links a {
  color: var(--text-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-out);
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width var(--dur-normal) var(--ease-out);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text-heading);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.header-cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  cursor: pointer;
  z-index: 1001;
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-heading);
  transition: transform var(--dur-normal) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ── Scroll-stages (landing page) ──
   One sticky section that hosts three stages played as a
   horizontal slide-show driven by scroll progress (--p, 0 → 1).
   Each stage is absolutely positioned over the same area; the
   active stage sits at translateX(0), the previous one slides off
   to the left, the next one waits offscreen to the right. The
   background cross-fades from white to a warm cream as --p grows.

   --p timeline:
     0.00 – 0.30  stage 0 (problem → solution) in place — held longer
                  so "Spirelight closes that gap" actually lands.
     0.30 – 0.46  stage 0 slides out left, stage 1 slides in right
     0.46 – 0.64  stage 1 (phone) in place
     0.64 – 0.80  stage 1 slides out left, stage 2 slides in right
     0.80 – 1.00  stage 2 (dashboard) in place
*/

.scroll-stages {
  --p: 0;
  --c: clamp(0, var(--p) * 2.85, 1); /* colour mix factor: 0 white, 1 cream by --p ≈ 0.35 */
  position: relative;
  height: 530vh;
  background: color-mix(in oklab, #ffffff calc((1 - var(--c)) * 100%), #f6f1ea);
}

.scroll-stages__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-7);
  will-change: transform, opacity;
  pointer-events: none;
}

/* Stage horizontal positioning */
.stage[data-stage="0"] {
  --slide: clamp(0, (var(--p) - 0.30) * 6.25, 1);
  transform: translateX(calc(var(--slide) * -100vw));
  opacity: calc(1 - var(--slide));
}

.stage[data-stage="1"] {
  --in:  clamp(0, (var(--p) - 0.30) * 6.25, 1);
  --out: clamp(0, (var(--p) - 0.64) * 6.25, 1);
  transform: translateX(calc((1 - var(--in) - var(--out)) * 100vw));
  opacity: calc(var(--in) - var(--out));
}

.stage[data-stage="2"] {
  --in: clamp(0, (var(--p) - 0.64) * 6.25, 1);
  transform: translateX(calc((1 - var(--in)) * 100vw));
  opacity: var(--in);
}

/* Stage 0: text-only (problem → solution) */
.stage--text .stage-text-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: flex-start;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.stage-text-problem,
.stage-text-solution {
  margin: 0;
  font-size: clamp(2.25rem, 4.6vw, 4.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  max-width: 18ch;
}

.stage-text-problem {
  /* Fades from dark to muted gray during stage 0's in-place phase */
  color: color-mix(in oklab, #0f172a calc((1 - clamp(0, var(--p) * 5.5, 1)) * 100%), #94a3b8);
}

.stage-text-solution {
  --in: clamp(0, (var(--p) - 0.07) * 7.5, 1);
  color: #0f172a;
  opacity: var(--in);
  transform: translateY(calc((1 - var(--in)) * 24px));
}

/* Stage 1 / 2: visual + text grid */
.stage--feature {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-9);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-7);
}

.stage-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.stage-text-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 460px;
}

.stage-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-bright, #38b6ff);
}

.stage-text-col h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  color: #0f172a;
}

.stage-text-col p {
  margin: 0;
  color: #475569;
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* Phone mock */
.phone-mock {
  width: 280px;
  height: 560px;
  background: #1a1a1a;
  border-radius: 36px;
  padding: 10px;
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.15),
              0 8px 16px rgba(15, 23, 42, 0.08);
  position: relative;
}

.phone-mock::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 22px;
  background: #1a1a1a;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}

.phone-mock__screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #cfdfee 0%, #ecf3ec 100%);
  border-radius: 28px;
  padding: 44px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.phone-mock__statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #1a1a1a;
}

.phone-mock__statusbar .phone-mock__signal::before {
  content: "•••";
  letter-spacing: 1px;
}

.phone-mock__notif {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  will-change: opacity, transform;
}

/* Notifications cascade in once stage 1 has settled in place. */
.phone-mock__notif--1 {
  --in: clamp(0, (var(--p) - 0.49) * 7, 1);
  opacity: var(--in);
  transform: translateY(calc((1 - var(--in)) * 14px));
}

.phone-mock__notif--2 {
  --in: clamp(0, (var(--p) - 0.57) * 7, 1);
  opacity: var(--in);
  transform: translateY(calc((1 - var(--in)) * 14px));
}

.phone-mock__notif-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
}

.phone-mock__notif-app {
  display: inline-flex;
}

.phone-mock__notif-app img {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: block;
}

.phone-mock__notif-title {
  font-weight: 600;
  flex: 1;
  color: #1a1a1a;
}

.phone-mock__notif-time {
  color: #888;
}

.phone-mock__notif-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.phone-mock__notif-body strong {
  font-size: 0.85rem;
  color: #1a1a1a;
  font-weight: 600;
}

.phone-mock__notif-body span {
  font-size: 0.78rem;
  color: #555;
}

/* Dashboard mock */
.dashboard-mock {
  width: 100%;
  max-width: 520px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.08),
              0 8px 16px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dashboard-mock__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.dashboard-mock__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-bright, #38b6ff);
}

.dashboard-mock__title {
  display: block;
  font-size: 1.05rem;
  color: #0f172a;
  margin-top: 4px;
  font-weight: 600;
}

.dashboard-mock__status {
  font-size: 0.68rem;
  background: #d1fae5;
  color: #065f46;
  padding: 4px 10px;
  border-radius: 100px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.dashboard-mock__metric {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dashboard-mock__metric-label {
  font-size: 0.72rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dashboard-mock__metric-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.dashboard-mock__metric-current {
  font-size: 2.5rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.dashboard-mock__metric-sep,
.dashboard-mock__metric-target {
  font-size: 1.5rem;
  color: #94a3b8;
}

.dashboard-mock__metric-unit {
  font-size: 0.85rem;
  color: #94a3b8;
  margin-left: 4px;
}

.dashboard-mock__bar {
  height: 8px;
  background: #f1f5f9;
  border-radius: 100px;
  overflow: hidden;
}

.dashboard-mock__bar-fill {
  --fill: clamp(0, (var(--p) - 0.82) * 6.25, 1);
  height: 100%;
  width: calc(var(--fill) * 41.5%);
  background: linear-gradient(90deg, #38b6ff, #6ec8ff);
  border-radius: 100px;
}

.dashboard-mock__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-mock__chip {
  font-size: 0.75rem;
  padding: 5px 12px;
  background: #f1f5f9;
  color: #334155;
  border-radius: 100px;
  font-weight: 500;
}

.dashboard-mock__batch {
  --in: clamp(0, (var(--p) - 0.88) * 7, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #fff7ec 0%, #fff1de 100%);
  border: 1px solid rgba(250, 188, 92, 0.35);
  border-radius: 12px;
  opacity: var(--in);
  transform: translateY(calc((1 - var(--in)) * 12px));
}

.dashboard-mock__batch-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dashboard-mock__batch-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #7a4a08;
}

.dashboard-mock__batch-meta {
  font-size: 0.7rem;
  color: #997349;
}

.dashboard-mock__batch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  background: #1f2937;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
}

.dashboard-mock__batch-btn:hover {
  background: #0f172a;
}

@media (max-width: 960px) {
  .stage--feature {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: var(--space-7) var(--space-5);
    align-content: center;
    justify-items: center;
    text-align: center;
  }
  .stage-text-col {
    text-align: center;
  }
  .phone-mock {
    width: 240px;
    height: 480px;
  }
  .stage-text-col h2 {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }
  .stage-text-problem,
  .stage-text-solution {
    font-size: clamp(1.75rem, 7vw, 2.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-stages {
    height: auto;
    background: #f6f1ea;
  }
  .scroll-stages__sticky {
    position: static;
    height: auto;
    padding: var(--space-11) var(--space-5);
    flex-direction: column;
    gap: var(--space-11);
    overflow: visible;
  }
  .stage {
    position: static;
    opacity: 1;
    transform: none;
  }
  .stage-text-problem { color: #64748b; }
  .stage-text-solution {
    opacity: 1;
    transform: none;
  }
  .phone-mock__notif--1,
  .phone-mock__notif--2 {
    opacity: 1;
    transform: none;
  }
  .dashboard-mock__bar-fill {
    width: 41.5%;
  }
}

/* ────────────────────────────────────────────────────────────
   CAPABILITY STACK — "What we do" stacked scroll cards.
   Continues the cream theme from .scroll-stages and shifts to
   a slightly warmer tone as you scroll. Three cards stack
   vertically: as scroll-progress (--p) advances, the next card
   slides up from below to overlap the previous, leaving a
   sliver of the older card peeking above. Right-side copy
   crossfades between stages.

   --p timeline:
     0.00 – 0.20  card 0 centered
     0.20 – 0.42  card 1 slides up over card 0
     0.42 – 0.62  card 1 centered
     0.62 – 0.84  card 2 slides up over card 1
     0.84 – 1.00  card 2 centered
   ──────────────────────────────────────────────────────── */

.capability-stack {
  --p: 0;

  /* Per-stage background tint. Each card gets its own vibe; the colours
     crossfade in lock-step with the card transitions. C0 is a clear
     step away from the cream of the previous section so the section
     change is immediately readable.
       C0  cool slate-blue — Speech collection (clean tech vibe)
       C1  warm sand cream — Transcription (paper / text feel)
       C2  honey amber     — Dataset delivery (structured, data) */
  --c0: #dde6ee;
  --c1: #ede4d0;
  --c2: #edd8ad;

  /* Same transition windows as the cards (0.20–0.42 and 0.62–0.84)
     so colour and card shift together. The third stop fades the
     morph back toward white in the last sliver of scroll, so the
     next white section meets cleanly. */
  --bg-t1:  clamp(0, (var(--p) - 0.20) * 4.55, 1);
  --bg-t2:  clamp(0, (var(--p) - 0.62) * 4.55, 1);
  --bg-end: clamp(0, (var(--p) - 0.93) * 14, 1);

  position: relative;
  height: 480vh;
  background: color-mix(
    in oklab,
    color-mix(
      in oklab,
      color-mix(in oklab, var(--c0), var(--c1) calc(var(--bg-t1) * 100%)),
      var(--c2) calc(var(--bg-t2) * 100%)
    ),
    #ffffff calc(var(--bg-end) * 100%)
  );
}

.capability-stack__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--space-5);
  padding: clamp(var(--space-7), 8vh, var(--space-9)) var(--space-7) var(--space-7);
  overflow: hidden;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.capability-stack__header {
  --in: clamp(0, var(--p) * 8, 1);
  /* fades out slightly as we move into stages */
  --out: clamp(0, (var(--p) - 0.85) * 8, 1);
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  opacity: calc(var(--in) - var(--out) * 0.4);
}

.capability-stack__header .label {
  color: var(--accent-bright, #1da4f5);
}

.capability-stack__header h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  letter-spacing: var(--ls-tight);
  line-height: 1.15;
  color: #0f172a;
}

.capability-stack__header p {
  margin: 0;
  color: #475569;
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 60ch;
}

.capability-stack__layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-9);
  align-items: center;
  min-height: 0;
}

/* ── Stacked cards (left column) ─────────────────────────── */

.capability-stack__cards {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 540px;
  /* Cap container so the peek gap above the active card stays small.
     Without this, on tall viewports the centering gap becomes huge
     and the previous card peeks far too much. */
  max-height: 640px;
  align-self: center;
}

.cap-card {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(100%, 560px);
  height: min(100%, 600px);
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 18px;
  box-shadow:
    0 30px 60px rgba(15, 23, 42, 0.10),
    0 8px 16px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  will-change: transform;
}

/* Older cards stay put; new cards slide up from below and land on
   top. Higher z-index for newer cards keeps the stacking order
   correct as each one settles. A small tilt during the slide-in
   gives the "pulled up" feel before the card seats flat. */

.cap-card[data-cap-card="0"] {
  z-index: 1;
}

.cap-card[data-cap-card="1"] {
  --in: clamp(0, (var(--p) - 0.20) * 4.55, 1);
  --tilt: calc((1 - var(--in)) * 1deg);
  transform:
    translateY(calc((1 - var(--in)) * 110%))
    rotate(calc(-1 * var(--tilt)));
  z-index: 2;
}

.cap-card[data-cap-card="2"] {
  --in: clamp(0, (var(--p) - 0.62) * 4.55, 1);
  --tilt: calc((1 - var(--in)) * 1deg);
  transform:
    translateY(calc((1 - var(--in)) * 110%))
    rotate(var(--tilt));
  z-index: 3;
}

/* Browser chrome on top of each card, sells the "real screen" feel */
.cap-card__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #f4f1eb;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #6b7280;
}

.cap-card__chrome-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cap-card__chrome-title {
  margin-left: 8px;
  letter-spacing: 0.02em;
}

.cap-card__body {
  flex: 1;
  padding: clamp(var(--space-5), 3vh, var(--space-7));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Right-side copy (crossfade) ─────────────────────────── */

.capability-stack__copy {
  position: relative;
  height: 100%;
  min-height: 360px;
}

.cap-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-self: center;
  margin: auto 0;
  height: max-content;
  pointer-events: none;
  will-change: opacity, transform;
}

.cap-copy[data-cap-copy="0"] {
  --in:  clamp(0, 1 - (var(--p) - 0.16) * 6, 1);
  opacity: var(--in);
  transform: translateY(calc((1 - var(--in)) * -16px));
}

.cap-copy[data-cap-copy="1"] {
  --in:  clamp(0, (var(--p) - 0.22) * 6, 1);
  --out: clamp(0, (var(--p) - 0.58) * 6, 1);
  opacity: calc(var(--in) - var(--out));
  transform: translateY(calc((1 - var(--in) + var(--out)) * 16px));
}

.cap-copy[data-cap-copy="2"] {
  --in:  clamp(0, (var(--p) - 0.64) * 6, 1);
  opacity: var(--in);
  transform: translateY(calc((1 - var(--in)) * 16px));
}

.cap-copy__num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent-bright, #1da4f5);
  letter-spacing: var(--ls-wide);
}

.cap-copy h3 {
  margin: 0;
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  letter-spacing: var(--ls-tight);
  line-height: 1.15;
  color: #0f172a;
}

.cap-copy p {
  margin: 0;
  color: #475569;
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 46ch;
}

.cap-copy__list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #334155;
  font-size: 0.95rem;
}

.cap-copy__list li {
  position: relative;
  padding-left: 18px;
}

.cap-copy__list li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--accent-bright, #1da4f5);
  font-weight: 600;
}

/* ── Card 1: Speech Collection — session mock ───────────── */

.session-mock {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.session-mock__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.session-mock__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent-bright, #1da4f5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.session-mock__title {
  margin: 4px 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #0f172a;
}

.session-mock__rec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #b91c1c;
  background: #fee2e2;
  padding: 5px 10px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.session-mock__rec-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  animation: sessionRecPulse 1.4s ease-in-out infinite;
}

@keyframes sessionRecPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.session-mock__waveform {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 64px;
  padding: 8px 0;
}

.session-mock__waveform span {
  flex: 1;
  height: calc(var(--h) * 100%);
  background: linear-gradient(180deg, #38b6ff, #1da4f5);
  border-radius: 2px;
  min-height: 4px;
  animation: sessionWave 1.6s ease-in-out infinite;
  animation-delay: calc(var(--h) * -1s);
}

@keyframes sessionWave {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.55); }
}

.session-mock__contribs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.session-mock__contribs li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 10px;
  font-size: 0.82rem;
  color: #334155;
}

.session-mock__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
}

.session-mock__pill {
  font-size: 0.66rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 100px;
  background: #e2e8f0;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.session-mock__pill--ok {
  background: #d1fae5;
  color: #065f46;
}

.session-mock__pill--live {
  background: #dbeafe;
  color: #1e40af;
}

.session-mock__meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #64748b;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}

/* ── Card 2: Transcription — transcript mock ────────────── */

.transcript-mock {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}

.transcript-mock__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef2f7;
}

.transcript-mock__file {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: #334155;
}

.transcript-mock__badge {
  font-size: 0.68rem;
  font-weight: 600;
  color: #065f46;
  background: #d1fae5;
  padding: 4px 10px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.transcript-mock__lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.transcript-mock__lines li {
  display: grid;
  grid-template-columns: 60px 28px 1fr auto;
  align-items: start;
  gap: 10px;
  padding: 8px 10px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #1f2937;
}

.transcript-mock__time {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #64748b;
  padding-top: 2px;
}

.transcript-mock__speaker {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  padding: 3px 0;
  border-radius: 6px;
  color: #fff;
  letter-spacing: 0.02em;
}

.transcript-mock__speaker--a { background: #38b6ff; }
.transcript-mock__speaker--b { background: #14b8a6; }

.transcript-mock__text em {
  background: rgba(56, 182, 255, 0.18);
  font-style: normal;
  padding: 1px 3px;
  border-radius: 3px;
}

.transcript-mock__flag {
  font-size: 0.62rem;
  font-weight: 700;
  color: #92400e;
  background: #fef3c7;
  padding: 3px 8px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  align-self: center;
}

.transcript-mock__foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #64748b;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
}

/* ── Card 3: Dataset Delivery — JSON manifest mock ──────── */

.manifest-mock {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.7;
  color: #1f2937;
  background: #fbfaf6;
  border-radius: 10px;
  padding: 14px 16px;
  height: 100%;
  overflow-y: auto;
}

.manifest-mock__line {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.manifest-mock__line--indent-1 { padding-left: 18px; }
.manifest-mock__line--indent-2 { padding-left: 36px; }

.manifest-mock__node > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
  transition: background 150ms;
  display: flex;
  align-items: center;
  gap: 4px;
}
.manifest-mock__node > summary::-webkit-details-marker { display: none; }
.manifest-mock__node > summary:hover { background: rgba(56, 182, 255, 0.08); }

.manifest-mock__caret {
  display: inline-block;
  width: 12px;
  color: var(--accent-bright, #1da4f5);
  font-size: 0.7rem;
  transition: transform 180ms var(--ease-out, cubic-bezier(0.16,1,0.3,1));
  transform: rotate(-90deg);
}

.manifest-mock__node[open] > summary .manifest-mock__caret {
  transform: rotate(0deg);
}

/* Toggle visibility of folded vs unfolded summary fragments */
.manifest-mock__node[open] > summary .manifest-mock__folded { display: none; }
.manifest-mock__node:not([open]) > summary .manifest-mock__unfolded { display: none; }

/* Hide child rows when collapsed */
.manifest-mock__node:not([open]) > .manifest-mock__row {
  display: none;
}

.manifest-mock__key { color: #1da4f5; }
.manifest-mock__str { color: #15803d; }
.manifest-mock__num { color: #b45309; }
.manifest-mock__bool { color: #b91c1c; }

.manifest-mock__hint {
  color: #94a3b8;
  font-style: italic;
  font-size: 0.74rem;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1024px) {
  .capability-stack__layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .capability-stack__cards { min-height: 460px; }
  .cap-card { width: min(100%, 520px); height: 460px; }
}

@media (max-width: 720px) {
  .capability-stack { height: 520vh; }
  .capability-stack__sticky { padding: var(--space-6) var(--space-4); }
  .capability-stack__header h2 { font-size: clamp(1.5rem, 5vw, 2rem); }
  .cap-card { height: 420px; border-radius: 14px; }
  .cap-card__body { padding: var(--space-4); }
  .session-mock__contribs li { grid-template-columns: auto 1fr auto; font-size: 0.78rem; }
  .transcript-mock__lines li { grid-template-columns: 50px 24px 1fr; }
  .transcript-mock__flag { display: none; }
  .manifest-mock { font-size: 0.74rem; }
}

@media (prefers-reduced-motion: reduce) {
  .capability-stack {
    height: auto;
    background: #f6f1ea;
  }
  .capability-stack__sticky {
    position: static;
    height: auto;
    overflow: visible;
    grid-template-rows: auto;
  }
  .capability-stack__layout {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  .capability-stack__cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    height: auto;
    min-height: 0;
  }
  .cap-card {
    position: static;
    width: 100%;
    height: auto;
    transform: none;
  }
  .capability-stack__copy { height: auto; min-height: 0; }
  .cap-copy {
    position: static;
    opacity: 1;
    transform: none;
    margin-top: var(--space-6);
  }
  .session-mock__rec-dot,
  .session-mock__waveform span { animation: none; }
}

/* ── Hero ── */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--header-height);
  overflow: hidden;
  /* Explicit white so we never see anything stacked behind the
     hero (e.g. the global ambient-canvas) bleeding through. */
  background: #ffffff;
}

.hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* Fade the waveform out toward the bottom so the dots don't end
     in a hard horizontal line where the hero meets the next
     section. */
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}

.section-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.hero-headline {
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-heading);
  margin-bottom: var(--space-5);
}

.hero-subheadline {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--text-body);
  line-height: var(--lh-body);
  margin-bottom: var(--space-7);
  max-width: 600px;
}

.hero-ctas {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ── Footer ── */

.site-footer {
  background: var(--bg-deepest);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-9) 0 var(--space-6);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-brand p {
  color: var(--text-muted);
  font-size: var(--fs-small);
  max-width: 300px;
}

.footer-links {
  display: flex;
  gap: var(--space-9);
}

.footer-col h4 {
  color: var(--text-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.footer-col a {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-small);
  padding: var(--space-1) 0;
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-col a:hover {
  color: var(--text-heading);
}

.footer-bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

.footer-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-7);
  margin-bottom: var(--space-8);
  background: var(--accent-subtle);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}

.footer-cta-text h3 {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--fs-h4);
  color: var(--text-heading);
}

.footer-cta-text p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.footer-cta-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.footer-contact a,
.footer-contact span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-small);
  padding: var(--space-1) 0;
  line-height: 1.5;
}

.footer-contact a:hover {
  color: var(--text-heading);
}

.footer-contact svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.footer-contact .footer-address,
.footer-contact .footer-cvr {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  padding-left: calc(16px + var(--space-2));
}

@media (max-width: 768px) {
  .footer-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-5);
  }

  .footer-cta-actions {
    width: 100%;
  }

  .footer-cta-actions .btn {
    flex: 1;
    justify-content: center;
  }
}

/* ── Grid Utilities ── */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

/* ── Responsive ── */

@media (max-width: 1024px) {
  .nav-links {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-deepest);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-6);
    z-index: 999;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    font-size: var(--fs-h3);
  }

  .menu-toggle {
    display: flex;
  }

  .header-cta .btn {
    display: none;
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .section {
    padding: var(--space-7) 0;
  }

  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .grid-4 {
    grid-template-columns: 1fr;
  }

  .hero-headline {
    font-size: clamp(2rem, 7vw, 3rem);
  }

  .footer-inner {
    flex-direction: column;
  }

  .footer-links {
    flex-direction: column;
    gap: var(--space-6);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-4);
  }
  
  .hero-ctas {
    flex-direction: column;
  }

  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
  }

  /* Fix mobile overlap */
  .hero {
    padding-top: calc(var(--header-height) + var(--space-6));
    align-items: flex-start;
    min-height: auto;
  }

  .hero-headline {
    font-size: 2.25rem;
  }
}

/* ── Prevent horizontal scroll ── */
html, body {
  overflow-x: clip;
  position: relative;
  width: 100%;
}

/* ── Global Ambient Background ── */
.ambient-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  opacity: 0.8;
}



/* ── Segmented Scrolling (Native CSS) ── */
html {
  scroll-behavior: smooth;
}




.section {
  padding: var(--space-12) 0;
  position: relative;
}

@media (max-width: 768px) {
  .section {
    padding: var(--space-8) 0;
  }
}

/* ── Section Background Demarcations ── */
.bg-glass-white {
  background-color: rgba(255, 255, 255, 0.6);
  background-image: url('data:image/svg+xml;utf8,<svg width="240" height="120" viewBox="0 0 240 120" xmlns="http://www.w3.org/2000/svg"><path d="M0,60 Q60,120 120,60 T240,60" fill="none" stroke="%2338b6ff" stroke-opacity="0.15" stroke-width="1.5"/><path d="M0,40 Q60,80 120,40 T240,40" fill="none" stroke="%2338b6ff" stroke-opacity="0.1" stroke-width="1"/><path d="M0,80 Q60,100 120,80 T240,80" fill="none" stroke="%2338b6ff" stroke-opacity="0.05" stroke-width="1"/></svg>');
  background-size: 300px 150px;
  background-attachment: fixed;
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1;
}

.bg-glass-tint {
  background-color: rgba(240, 247, 255, 0.7);
  background-image: url('data:image/svg+xml;utf8,<svg width="240" height="120" viewBox="0 0 240 120" xmlns="http://www.w3.org/2000/svg"><path d="M0,60 Q60,120 120,60 T240,60" fill="none" stroke="%2314b8a6" stroke-opacity="0.15" stroke-width="1.5"/><path d="M0,40 Q60,80 120,40 T240,40" fill="none" stroke="%2314b8a6" stroke-opacity="0.1" stroke-width="1"/><path d="M0,80 Q60,100 120,80 T240,80" fill="none" stroke="%2314b8a6" stroke-opacity="0.05" stroke-width="1"/></svg>');
  background-size: 300px 150px;
  background-attachment: fixed;
  border-top: 1px solid rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1;
}

.hero {
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.cta-section {
  padding: var(--space-12) 0;
}

.site-footer {
  padding: var(--space-8) 0;
}