/* ==========================================================================
   AEGIS / Sthitha Quantum Innovations — Homepage
   ========================================================================== */

:root {
  /* Dark theme (primary) */
  --bg-primary: #090D1A;
  --bg-card-dark: #0B1026;
  --bg-elevated: #0F172A;
  --border-dark: #2A3555;
  --accent-cyan: #00E5FF;
  --accent-cyan-subtle: #59EEFF;
  --text-white: #FFFFFF;
  --text-muted: #ACB7C6;
  --text-dim: #7F8DA2;
  --text-blue-muted: #A9B9E3;
  --blue-primary: #1A4FBB;
  --teal-glow: #00BCD4;

  /* Light theme (alternating sections) */
  --bg-white: #FFFFFF;
  --bg-gradient-end: #F3F8FF;
  --bg-light-card: #F8FAFC;
  --bg-tag-light: #F3F4F6;
  --border-light: #E5E7EB;
  --text-dark: #0F172A;
  --text-body: #475569;
  --blue-accent: #2563EB;

  /* Radius scale */
  --radius-btn: 8px;
  --radius-input: 6px;
  --radius-card: 12px;
  --radius-card-lg: 16px;
  --radius-emblem: 24px;
  --radius-pill: 100px;

  /* Layout */
  --container-width: 1280px;
  --section-pad-y: 60px;
  --section-pad-y-lg: 100px;
  --section-pad-x: 20px;

  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-hero: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; overscroll-behavior-x: none; }

/* ---------- Scrollbar ---------- */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-cyan) var(--bg-primary);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent-cyan-subtle), var(--blue-primary));
  border-radius: var(--radius-pill);
  border: 2px solid var(--bg-primary);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accent-cyan), var(--accent-cyan-subtle));
}
::-webkit-scrollbar-corner {
  background: var(--bg-primary);
}
@media (max-width: 767px) {
  html { scrollbar-color: rgba(0, 229, 255, 0.35) var(--bg-primary); }
  ::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, 0.35); }
  ::-webkit-scrollbar-thumb:hover { background: rgba(0, 229, 255, 0.5); }
}
@media (max-width: 900px) {
  /* Scrolling still works exactly the same — this only hides the
     scrollbar's own paint, it doesn't disable scroll. */
  html { scrollbar-width: none; }
  ::-webkit-scrollbar { display: none; width: 0; height: 0; }
}

/* ---------- Scroll reveal (lightweight, no library) ---------- */
[data-aos] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
[data-aos="fade"] { transform: none; }
[data-aos].aos-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}
[data-aos]:nth-child(1) { transition-delay: 0s; }
[data-aos]:nth-child(2) { transition-delay: 0.08s; }
[data-aos]:nth-child(3) { transition-delay: 0.16s; }
[data-aos]:nth-child(4) { transition-delay: 0.24s; }
[data-aos]:nth-child(5) { transition-delay: 0.32s; }
[data-aos]:nth-child(6) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  [data-aos] { opacity: 1; transform: none; transition: none; }
}
body {
  margin: 0;
  font-family: var(--font-primary);
  background: var(--bg-primary);
  color: var(--text-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* overflow: clip here (instead of on html) made body the containing
     block for every position:sticky descendant — since body itself
     never independently scrolls, that silently disabled sticky
     everywhere on the site. html already has overflow-x:hidden, which
     covers horizontal-bleed prevention without this side effect.
     Same reasoning kept overscroll-behavior-x off body too: iOS Safari
     is known to detach position:fixed elements (like .site-header) from
     the viewport when overscroll-behavior is set on body, so that guard
     stays on html only. */
  max-width: 100vw;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; cursor: pointer; }
svg { flex-shrink: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent-cyan);
  color: var(--text-dark);
  padding: 12px 20px;
  z-index: 200;
  border-radius: 0 0 var(--radius-btn) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--section-pad-x);
}

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

.icon { width: 20px; height: 20px; }
.icon-inline { width: 14px; height: 14px; display: inline; vertical-align: -2px; }
.icon-cyan { color: var(--accent-cyan); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--radius-btn);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--accent-cyan);
  color: var(--text-dark);
}
.btn-primary:hover { box-shadow: 0 8px 24px rgba(0, 229, 255, 0.35); }
.btn-secondary {
  background: transparent;
  border-color: var(--border-dark);
  color: var(--text-white);
}
.btn-secondary:hover { border-color: var(--accent-cyan); }
.btn-sm { padding: 11px 22px; border-radius: 6px; font-size: 14px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.btn-row--center { justify-content: center; }

/* ---------- Badges / Pills ---------- */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  margin-bottom: 24px;
}
.badge-dark {
  background: var(--bg-card-dark);
  border: 1px solid var(--border-dark);
  color: var(--accent-cyan-subtle);
}
.badge-light {
  background: var(--bg-tag-light);
  border: 1px solid var(--border-light);
  color: var(--text-dark);
}

.pill-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0; }
.pill {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-cyan-subtle);
  background: var(--bg-card-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
}

.num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--accent-cyan-subtle);
  color: var(--text-white);
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
  margin-right: 10px;
  flex-shrink: 0;
}
.num-badge--cyan { background: var(--accent-cyan); color: var(--text-dark); }

/* ---------- Typography ---------- */
.section-title,
.cta-title,
.funding-round-title,
.showcase-title,
.sectors-title,
.footer-trial-title {
  font-family: var(--font-primary);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.4px;
  font-weight: 500;
  margin-bottom: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #8d97a6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-title--dark,
.funding-round-title {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: var(--text-dark);
  -webkit-text-fill-color: var(--text-dark);
}
.text-accent { color: var(--accent-cyan-subtle); }
.section-light .text-accent { color: var(--accent-cyan-subtle); }

.section-sub {
  font-size: 18px;
  color: var(--text-muted);
  margin-top: 20px;
  max-width: 640px;
}
.section-light .section-sub { color: var(--text-body); }
@media (max-width: 767px) {
  .section-sub { font-size: 16px; line-height: 1.7; }
}

.body-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-top: 24px;
  max-width: 620px;
}

.section-head { text-align: center; max-width: 720px; margin-inline: auto; }
.section-head--mt { margin-top: 96px; }
.section-head .section-title { margin-top: 16px; }

/* ---------- Header (floating nav, expands on scroll) ---------- */
#main > section:first-child { padding-top: 116px; }
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 20px 20px 0;
  pointer-events: none;
  transition: padding 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  /* html has overflow-x:hidden (see the comment on body above) to stop
     horizontal bleed without breaking position:sticky elsewhere. On
     iOS Safari specifically, a `position: fixed` element with any
     overflow-hidden ancestor can lose its fixed-to-viewport pinning and
     scroll away with the page instead of staying put. Promoting this
     element to its own compositing layer sidesteps that WebKit quirk
     without touching the overflow/sticky setup used by the rest of the
     site. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}
.site-header.is-scrolled { padding-top: 12px; }
.header-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  padding: 10px 18px 10px 10px;
  border-radius: 100px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0) 100%),
    rgba(9, 13, 26, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  will-change: max-width, padding;
  transition: max-width 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    padding 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.5s ease,
    box-shadow 0.5s ease,
    border-color 0.5s ease;
}
.site-header.is-scrolled .header-inner {
  max-width: 1180px;
  padding: 9px 24px 9px 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.015) 50%, rgba(255, 255, 255, 0) 100%),
    rgba(9, 13, 26, 0.8);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 20px 50px rgba(0, 0, 0, 0.45);
}
.brand {
  display: inline-flex;
  align-items: center;
  background: var(--bg-white);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
}
.brand-logo { height: 30px; width: auto; }

.main-nav ul { display: flex; align-items: center; gap: 32px; }
.nav-cta { display: none; }
.main-nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.15s ease;
}
.main-nav a:hover, .main-nav a.active { color: var(--text-white); }
/* `.main-nav a` above (a class + a tag selector) outweighs `.btn-primary`
   (a single class) in specificity, so without this the CTA's link text
   inherited the muted nav-link gray instead of staying dark-on-cyan. */
.main-nav a.nav-cta, .main-nav a.nav-cta:hover { color: var(--text-dark); }

.header-actions { display: flex; align-items: center; gap: 16px; }
.header-actions .btn-sm { border-radius: var(--radius-pill); padding: 11px 22px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 20px;
  margin-inline: auto;
  background: var(--text-white);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero-section {
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding-top: 116px;
  padding-bottom: 48px;
  background: var(--bg-primary);
}
.hero-section > .container { width: 100%; }
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 20%, black 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 85% 75% at 50% 20%, black 0%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}
.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 700px 520px at 8% 0%, rgba(37, 99, 235, 0.24), transparent 65%),
    radial-gradient(ellipse 620px 480px at 55% -5%, rgba(0, 229, 255, 0.2), transparent 68%),
    radial-gradient(ellipse 900px 700px at 100% 100%, rgba(0, 229, 255, 0.28), rgba(37, 99, 235, 0.22) 45%, transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "badge" "visual" "rest";
  gap: 32px;
  align-items: center;
}
.hero-grid > .hero-badge { grid-area: badge; align-self: start; justify-self: start; }
.hero-grid > .hero-copy { grid-area: rest; }
.hero-grid > .hero-visual { grid-area: visual; }

/* Mobile: read the headline before the illustration — a full-bleed
   image ahead of any text buried the CTA below the fold. */
@media (max-width: 1023px) {
  .hero-grid { grid-template-areas: "badge" "rest" "visual"; gap: 0; }
  .hero-grid > .hero-visual { margin-top: 32px; }
}

.hero-badge {
  display: inline-block;
  width: fit-content;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-white);
  margin-bottom: clamp(12px, 2.5vh, 28px);
}

.hero-title {
  font-family: var(--font-primary);
  font-size: 28px;
  line-height: 1.12;
  letter-spacing: 0.4px;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #8d97a6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-subtitle {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-cyan-subtle);
  line-height: 1.4;
  margin-bottom: clamp(10px, 2vh, 20px);
}
.hero-body {
  font-size: 14px;
  line-height: 1.7;
  color: #9aa3b2;
  max-width: 520px;
  margin-bottom: clamp(16px, 3.5vh, 40px);
}
@media (max-width: 767px) {
  .hero-body { font-size: 16px; }
}

.hero-btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(16px, 3.5vh, 44px); }
.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.hero-btn:hover { transform: translateY(-2px); }
.hero-btn .icon { width: 14px; height: 14px; }
.hero-btn--outline {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-white);
  backdrop-filter: blur(8px);
}
.hero-btn--outline:hover { border-color: rgba(255, 255, 255, 0.45); }
.hero-btn--fill {
  background: linear-gradient(135deg, #2a4a7f 0%, #0d1424 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-white);
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25);
}
.hero-btn--fill:hover { box-shadow: 0 12px 36px rgba(37, 99, 235, 0.4); }

.hero-stat-card {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 460px;
  padding: clamp(14px, 2.5vh, 20px) 24px;
  border-radius: var(--radius-card-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
}
.hero-avatar-stack { display: flex; flex-shrink: 0; }
.hero-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--bg-primary);
  background: linear-gradient(135deg, var(--accent-cyan-subtle), var(--accent-cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dark);
  margin-left: -12px;
  flex-shrink: 0;
}
.hero-avatar:first-child { margin-left: 0; }
.hero-avatar svg { width: 16px; height: 16px; }
.hero-stat-num { font-size: 26px; font-weight: 800; color: var(--text-white); flex-shrink: 0; }
.hero-stat-desc { font-size: 12px; color: #9aa3b2; line-height: 1.45; }

.hero-visual { min-width: 0; position: relative; }
.hero-visual-frame {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.atom-img {
  width: 78%;
  max-width: 460px;
  height: auto;
  filter: drop-shadow(0 30px 70px rgba(37, 99, 235, 0.35));
}

.hero-map-img {
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: var(--radius-card-lg);
  border: 1px solid var(--border-dark);
  filter: drop-shadow(0 30px 70px rgba(37, 99, 235, 0.35));
}

.hero-connectors { position: absolute; inset: 0; pointer-events: none; }
.connector {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0;
}
.connector-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-cyan);
  border: 3px solid rgba(89, 238, 255, 0.35);
  flex-shrink: 0;
  z-index: 2;
}
.connector-line { width: 28px; height: 1px; background: rgba(255, 255, 255, 0.35); }
.connector-label {
  background: rgba(9, 13, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-white);
  white-space: nowrap;
  backdrop-filter: blur(6px);
}
.connector--1 { top: 12%; right: 2%; }
.connector--2 { top: 48%; right: -4%; }
.connector--3 { bottom: 10%; left: -2%; }

.hero-visual-caption {
  display: none;
  text-align: center;
  margin-top: 24px;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}

/* ---------- Vulnerability ---------- */
.vuln-section {
  position: relative;
  overflow: hidden;
  background: var(--bg-primary);
}
.vuln-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.vuln-bg-video {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  width: 82%;
  max-width: 440px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 20px;
  opacity: 0.85;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 46% 46% at 50% 50%, black 65%, transparent 100%);
  mask-image: radial-gradient(ellipse 46% 46% at 50% 50%, black 65%, transparent 100%);
}
.vuln-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 46% at 50% 22%, rgba(0, 229, 255, 0.3), rgba(37, 99, 235, 0.16) 45%, transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 100%);
  mix-blend-mode: screen;
}
.vuln-section > .container { position: relative; z-index: 1; }
.vuln-copy { padding-top: 300px; }

/* Mobile: the video was a small framed box pushed above the copy,
   reserving dead vertical space before any text appeared. Turn it into
   a full-bleed, dimmed background behind the copy instead — same
   element, no markup change, just laid out to cover the section. */
@media (max-width: 1023px) {
  .vuln-copy { padding-top: 0; }
  .vuln-bg-video {
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 0;
    opacity: 0.32;
    /* Faded straight in from the top edge (`black 0%`), so the video's
       full-strength glow started right at this section's boundary with
       .hero-section above — which ends on a flat, unglowing background —
       producing a visible seam/hard edge exactly at the section split.
       Easing in from transparent instead matches how .hero-section
       itself fades OUT at its own bottom (see its ::after mask). */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 55%, transparent 92%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 55%, transparent 92%);
  }
  .vuln-bg::after {
    background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(9, 13, 26, 0.55), rgba(9, 13, 26, 0.85) 60%, var(--bg-primary) 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 100%);
  }
}
.vuln-copy .section-title { margin-top: 16px; }
.stat-card--feature {
  margin-top: 40px;
  background: var(--bg-card-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card-lg);
  padding: 32px;
}
.eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.stat-huge {
  display: block;
  font-size: 44px;
  font-weight: 800;
  color: var(--text-white);
  margin-bottom: 16px;
}
.stat-desc { color: var(--text-muted); font-size: 14px; line-height: 1.7; }

/* ---------- Platform ---------- */
.platform-section {
  position: relative;
  background: var(--bg-primary);
  padding-top: 0;
}
.platform-section .section-sub { color: var(--text-muted); }

/* .section-head lives INSIDE .capability-layout (see index.astro) so it
   can be placed by the grid below: on desktop it spans both columns,
   above the visual/stack row.

   On mobile there is no heading/image/card CHAIN of separate sticky
   elements at all — that was tried twice (a grid-cell overlap trick,
   then `display: contents`) and both broke the same way: independent
   sticky elements release at different scroll positions purely because
   each one's own (top-offset + height) differs, even sharing one
   containing block, so the group visibly fell apart at the start/end
   of the scroll (the card viewport releasing early left the heading
   pinned above a growing dead gap). Native sticky simply can't
   guarantee simultaneous release across elements of different sizes.
   Instead, script.js moves .section-head and .capability-visual to
   become normal-flow children INSIDE .capability-stack-viewport on
   mobile (before the cards) — see the IIFE comment there. That makes
   this genuinely ONE sticky element again, the same proven mechanism
   the cards already use, so pin/release is atomic by construction. */
.capability-layout {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 56px;
  align-items: start;
}
@media (max-width: 900px) {
  /* Spacing before the image once script.js relocates this heading
     inside .capability-stack-viewport — plain margin works fine here
     since, unlike .capability-visual, this never has its own
     `position: sticky` to fight with. */
  .capability-layout .section-head { margin-bottom: 20px; }
}
@media (min-width: 900px) {
  .capability-layout {
    grid-template-columns: minmax(280px, 400px) 1fr;
    grid-template-areas: "head head" "visual stack";
    row-gap: 40px;
    column-gap: 64px;
  }
  .capability-layout .section-head { grid-area: head; }
  .capability-visual { grid-area: visual; }
  .capability-stack { grid-area: stack; }
}

/* On desktop this is a genuinely standalone sticky element: it pins
   while the card stack beside it scrolls past, and swaps image/caption
   via JS based on which card is currently in view (see script.js). On
   mobile, script.js relocates it inside .capability-stack-viewport
   (see that comment), so none of the sticky/top rules here apply there
   — its mobile appearance comes from the plain, non-sticky rules in
   the "mobile: relocated" block further down instead. */
.capability-visual { position: sticky; top: 120px; align-self: start; z-index: 2; }
@media (max-width: 900px) {
  /* Once relocated inside .capability-stack-viewport (script.js), this
     needs to behave as a plain block in that box's own normal flow —
     `position: sticky` here would nest one sticky element inside
     another with no real scroll container between them, which is
     undefined enough in practice to produce exactly the erratic
     spacing seen when this was left unset (gaps disappearing between
     pieces, then reappearing as dead space at the bottom instead). */
  .capability-visual { position: static; z-index: auto; margin-bottom: 20px; }
}
.capability-visual-inner { position: relative; }
.capability-img-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  max-height: 420px;
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
  background: var(--bg-card-dark);
}
@media (max-width: 900px) {
  /* Compact, fixed-height thumbnail — small enough to leave real room
     for the card underneath it once relocated inside the sticky card
     viewport (see script.js and the .capability-stack-viewport
     comment). */
  .capability-img-frame { aspect-ratio: auto; height: 168px; max-height: 168px; }
}
.capability-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.capability-img.is-active { opacity: 1; transform: scale(1); }
.capability-img-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(0deg, rgba(5, 7, 12, 0.92) 0%, rgba(5, 7, 12, 0.55) 32%, rgba(5, 7, 12, 0.05) 60%, transparent 75%),
    linear-gradient(180deg, rgba(5, 7, 12, 0.55) 0%, transparent 22%);
  pointer-events: none;
}
.capability-visual-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px;
}
.capability-visual-num {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 229, 255, 0.4);
  background: rgba(5, 7, 12, 0.5);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  flex-shrink: 0;
}
.capability-visual-label { font-size: 18px; font-weight: 700; color: var(--text-white); }
@media (prefers-reduced-motion: reduce) {
  .capability-img { transition: none; }
}

/* A single sticky "window" (.capability-stack-viewport) pinned for the
   whole height of .capability-stack, with all 6 cards absolutely
   stacked inside it. script.js computes scroll progress through the
   tall track and, for each card, how far it is from its own arrival
   point — driving a card to rise from below, settle ("stick"), and
   then recede a little as the next card rises over it. See the big
   comment above the IIFE in script.js for the full model. This
   replaces an earlier attempt at chaining individual position:sticky
   cards — that approach has an unavoidable gap by construction (a card
   can only release AFTER its own hold, and the next card only reaches
   the pin point AFTER that, so there's always a dead scroll stretch
   with nothing pinned). Driving it from one sticky element + JS
   removes that failure mode entirely. */
.capability-stack {
  position: relative;
  height: 2320px;
}
@media (max-width: 900px) {
  .capability-stack { height: 1900px; }
}

/* The pinned box fills almost the entire viewport height, down to
   nearly the bottom edge of the screen (not a small fixed box sitting
   near the top with dead space beneath it) — a rising card needs to
   travel from the actual bottom of the screen for the "rise and stick"
   motion to read correctly. calc(100vh - top offset - small margin)
   shrinks it to fit on short windows; min() only caps it on very tall
   screens so the card doesn't become absurdly oversized. The extra
   44px ("headroom") above the card's own box lets a settled card
   recede slightly upward into the stack without being clipped — the
   viewport still clips anything AT OR BELOW its own bottom edge (cards
   waiting their turn, translated fully below), which is what keeps
   them from visually spilling into the section underneath. */
.capability-stack-viewport {
  position: sticky;
  top: 100px;
  height: min(760px, calc(100vh - 124px));
  overflow: hidden;
  /* Explicit z-index (any value) makes this establish its own stacking
     context, so the cards inside it (z-index 1-6, set in script.js)
     only ever stack relative to EACH OTHER. Without this, a card's
     z-index would compare directly against unrelated siblings like the
     sticky heading/image above — before this viewport reaches its own
     sticky position, the whole stack is still travelling up the page
     in normal flow, and a card with a high z-index could momentarily
     paint over the pinned heading/image while passing behind them. */
  z-index: 1;
}
@media (max-width: 900px) {
  /* On mobile this single sticky box holds the heading, the image AND
     the card (script.js relocates the first two inside it — see the
     comment on .capability-layout) instead of just the card, so it
     pins starting right at the heading, immediately below the header.
     Height is set inline by script.js once it measures how tall that
     relocated content actually is (heading + image + card + gaps
     varies with copy length/viewport width) — the value below is only
     a pre-JS fallback so nothing collapses to zero height for an
     instant on first paint. */
  .capability-stack-viewport { top: 84px; height: 760px; }
}

.capability-card {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(100% - 44px);
  min-width: 0;
  padding: 28px;
  background: var(--bg-card-dark);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.45);
  /* Cards are always fully opaque — never animated via `opacity`. CSS
     opacity composites the *whole element* (including its solid
     background) against whatever is stacked behind it, so any card
     with opacity < 1 lets every lower card underneath bleed through at
     once (this was the source of the "ghosted"/"broken on hover" bug).
     Depth in the stack is conveyed purely by position + z-index below,
     which can't produce that failure mode: an opaque card either fully
     covers what's beneath it, or doesn't overlap it at all. */
  transform: translateY(100%);
  pointer-events: none;
  /* Fixed per-card stacking order, later card = higher, set once in
     script.js and never changed. Because it never varies, a rising
     card is automatically above every earlier card the instant it
     starts sliding up, and automatically below whichever card rises
     after it — no per-frame z-index bookkeeping needed. */
  z-index: 1;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.capability-card.is-active { pointer-events: auto; }
@media (max-width: 900px) {
  /* Fixed height instead of the percentage-of-viewport used above:
     the mobile viewport's height now covers the heading + image +
     card all together (see .capability-stack-viewport), so "100% of
     the viewport" would make a single card nearly as tall as that
     whole group. A fixed, content-sized height keeps it proportioned
     the same way it was before the heading/image moved in above it. */
  .capability-card { height: 336px; }
  /* Each card's own drop shadow is large (0 30px 50px) and, with up to
     three faded/receded cards stacked behind the active one at once,
     their shadows compound into a visible dark smear/halo behind the
     stack — much more noticeable on mobile's compact, close-together
     layout than on desktop's wider one. */
  .capability-card { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .capability-card { transition: none; }
}
.capability-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 18% 20%, black 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 60% at 18% 20%, black 0%, transparent 70%);
  pointer-events: none;
  transition: -webkit-mask-position 0.4s ease, mask-position 0.4s ease;
}
.capability-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 220px at 18% 14%, rgba(0, 229, 255, 0.14), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.capability-card:hover {
  border-color: rgba(0, 229, 255, 0.35);
  /* Layer the hover tint over the opaque card background rather than
     replacing it — replacing it with a ~3%-alpha color left the card
     almost fully transparent, so the faded "passed" card sitting behind
     it (lower z-index, opacity 0.4) showed through and looked broken. */
  background: linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03)), var(--bg-card-dark);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 229, 255, 0.08);
}
.capability-card:hover::before { -webkit-mask-position: -8px -8px; mask-position: -8px -8px; }
.capability-card:hover::after { opacity: 1; }
.capability-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  margin-bottom: 28px;
  background: linear-gradient(145deg, rgba(0, 229, 255, 0.28), rgba(37, 99, 235, 0.22));
  border: 1px solid rgba(0, 229, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 229, 255, 0.12);
  color: var(--text-white);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.capability-icon svg {
  width: 24px;
  height: 24px;
  transition: transform 0.35s ease;
}
.capability-card:hover .capability-icon {
  transform: translateY(-4px) scale(1.08) rotate(-6deg);
  background: linear-gradient(145deg, rgba(0, 229, 255, 0.45), rgba(37, 99, 235, 0.32));
  border-color: rgba(0, 229, 255, 0.6);
  box-shadow: 0 12px 32px rgba(0, 229, 255, 0.28);
}
.capability-card:hover .capability-icon svg {
  transform: scale(1.1);
  animation: capability-icon-pulse 1.6s ease-in-out infinite;
}
@keyframes capability-icon-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(0, 229, 255, 0)); }
  50% { filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.7)); }
}
@media (prefers-reduced-motion: reduce) {
  .capability-card, .capability-icon, .capability-icon svg { transition: none; }
  .capability-card:hover { transform: none; }
  .capability-card:hover .capability-icon svg { animation: none; }
}
.capability-title {
  position: relative;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 12px;
}
.capability-desc {
  position: relative;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 28px;
}
.capability-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-blue-muted);
  transition: color 0.15s ease, gap 0.15s ease;
}
.capability-link .icon-inline { width: 16px; height: 16px; }
.capability-link:hover { color: var(--accent-cyan-subtle); gap: 14px; }

/* ---------- Sectors (hub + spoke) ---------- */
.sectors-section {
  position: relative;
  overflow: hidden;
  background: var(--bg-primary);
  text-align: center;
  border-top: 1px solid var(--border-dark);
}
.sectors-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 20%, black 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 20%, black 0%, transparent 75%);
  pointer-events: none;
}
.sectors-section > .container { position: relative; z-index: 1; }

.sectors-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 20px;
}
.sectors-eyebrow::before, .sectors-eyebrow::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--border-dark);
}
.sectors-title {
  max-width: 720px;
  margin-inline: auto;
}
.sectors-sub {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 560px;
  margin: 16px auto 0;
}

.sectors-hub-wrap {
  position: relative;
  margin-top: 64px;
  padding-bottom: 8px;
}
.sectors-glow {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 140%);
  height: 380px;
  background: radial-gradient(ellipse 38% 65% at 50% 28%, rgba(0, 229, 255, 0.32), rgba(37, 99, 235, 0.14) 45%, transparent 75%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}
.sectors-hub {
  position: relative;
  z-index: 1;
  width: 92px;
  height: 92px;
  margin-inline: auto;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.92), rgba(5, 7, 10, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 60px rgba(0, 229, 255, 0.22);
}
.sectors-hub svg { width: 38px; height: 38px; color: var(--accent-cyan); }

.sectors-trunk {
  position: relative;
  z-index: 1;
  width: 0;
  height: 40px;
  margin-inline: auto;
  border-left: 1px dashed rgba(255, 255, 255, 0.2);
}
.sectors-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px 28px;
  max-width: 980px;
  margin-inline: auto;
  padding-top: 40px;
}
.sectors-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  border-top: 1px dashed rgba(255, 255, 255, 0.2);
}
.sectors-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 130px;
}
.sectors-item::before {
  content: '';
  position: absolute;
  top: -40px;
  left: 50%;
  width: 0;
  height: 40px;
  border-left: 1px dashed rgba(255, 255, 255, 0.2);
  transform: translateX(-50%);
}
.sectors-icon {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.sectors-icon svg { width: 24px; height: 24px; color: var(--text-muted); transition: color 0.3s ease; }
.sectors-item:hover .sectors-icon {
  transform: translateY(-6px) scale(1.08);
  border-color: rgba(0, 229, 255, 0.5);
  background: rgba(0, 229, 255, 0.08);
  box-shadow: 0 14px 30px rgba(0, 229, 255, 0.25);
}
.sectors-item:hover .sectors-icon svg { color: var(--accent-cyan); }
.sectors-label {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .sectors-row::before { display: none; }
  .sectors-item::before { display: none; }
}

/* ---------- Light section / cards ---------- */
.section-light {
  background: linear-gradient(180deg, var(--bg-white), var(--bg-gradient-end));
  color: var(--text-dark);
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 48px;
}
@media (min-width: 768px) {
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.feature-card {
  min-width: 0;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card-lg);
  overflow: hidden;
}
.feature-card-icon {
  background: var(--bg-light-card);
  border-bottom: 1px solid var(--border-light);
  padding: 48px 24px;
  display: flex;
  justify-content: center;
}
.feature-card-icon svg { width: 44px; height: 44px; color: var(--accent-cyan-subtle); }
.feature-card-title {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  padding: 24px 24px 12px;
}
.feature-card p {
  padding: 0 24px 28px;
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.7;
}

.step-card {
  min-width: 0;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card-lg);
  padding: 32px 28px;
}
.step-num { font-size: 32px; font-weight: 800; color: #94A3B8; }
.step-title { font-size: 24px; font-weight: 700; color: var(--accent-cyan-subtle); margin-top: 16px; }
.step-sub { font-size: 15px; font-weight: 600; color: var(--text-dark); margin-top: 8px; }
.step-card p:last-child { font-size: 14px; color: var(--text-body); line-height: 1.7; margin-top: 12px; }

/* ---------- Migration flow (dark, shiny gradient) ---------- */
@media (max-width: 900px) {
  .flow-section .badge-dark { display: none; }
}
.flow-section {
  background: var(--bg-primary);
  position: relative;
  overflow: hidden;
}
.flow-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 48% at 50% 46%, rgba(0, 229, 255, 0.22), rgba(37, 99, 235, 0.11) 40%, transparent 72%);
  pointer-events: none;
  z-index: 0;
  animation: flowGlowPulse 10s ease-in-out infinite;
}
.flow-wrap {
  position: relative;
  z-index: 1;
}
@keyframes flowGlowPulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .flow-section::before { animation: none; }
}
.flow-icons {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 760px;
  margin: 56px auto 0;
}
.flow-icon {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--bg-card-dark);
  border: 1px solid var(--border-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-icon svg { width: 26px; height: 26px; color: var(--text-muted); }
.flow-icon--active {
  background:
    linear-gradient(180deg, rgba(0, 229, 255, 0.14), rgba(11, 16, 38, 0.9)),
    var(--bg-card-dark);
  border-color: var(--accent-cyan);
  animation: flowIconPulse 3.2s ease-in-out infinite;
}
.flow-icon--active svg { color: var(--accent-cyan); }
.flow-line {
  position: relative;
  flex: 1;
  height: 1px;
  min-width: 60px;
  background: linear-gradient(90deg, transparent, var(--border-dark) 15%, rgba(0, 229, 255, 0.55) 50%, var(--border-dark) 85%, transparent);
  background-size: 200% 100%;
  animation: flowLineShimmer 5s linear infinite;
}

/* Track running through the icon row at box height: the dot passes UNDER each box (lower z-index) so it visibly ducks beneath them instead of teleporting */
.flow-track {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}
.flow-track-dot {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 14px 4px rgba(0, 229, 255, 0.65);
  animation: flowTrackDot 6s ease-in-out infinite;
}
@keyframes flowIconPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.2), 0 0 24px rgba(0, 229, 255, 0.28); }
  50% { box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.35), 0 0 40px rgba(0, 229, 255, 0.5); }
}
@keyframes flowLineShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes flowTrackDot {
  0% { left: 0%; }
  45%, 55% { left: 50%; }
  100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-icon--active, .flow-line, .flow-track-dot { animation: none; }
  .flow-line::after { display: none; }
}
.flow-section .card-grid { position: relative; z-index: 1; }
.flow-section .step-card {
  background: rgba(11, 16, 38, 0.72);
  border: 1px solid var(--border-dark);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.flow-section .step-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.flow-section .card-grid--3 .step-card:nth-child(1) { transition-delay: 0s; }
.flow-section .card-grid--3 .step-card:nth-child(2) { transition-delay: 0.15s; }
.flow-section .card-grid--3 .step-card:nth-child(3) { transition-delay: 0.3s; }
/* Mobile: the track's height is set in JS (script.js) to reserve enough
   extra scroll runway for the horizontal distance the cards need to
   travel. .flow-cards-viewport pins via `sticky` for that runway, and
   script.js translateX's the card row in lockstep with scroll progress.
   Once the runway is used up, the sticky viewport scrolls away normally
   and the page continues into the next section — no extra hook needed,
   that's just how `position: sticky` behaves once its container ends. */
@media (max-width: 767px) {
  /* position: sticky on .flow-cards-viewport below only takes effect if
     no ancestor clips overflow — .flow-section normally sets
     `overflow: hidden` to contain its pulsing glow (::before), which
     otherwise silently breaks the stickiness with no console warning.
     The glow ellipse sits well inside the section's bounds even at its
     max 1.06 scale, so this is safe to lift on mobile. */
  .flow-section { overflow: visible; }
  .flow-cards-track { position: relative; }
  .flow-cards-viewport {
    position: sticky;
    top: 84px;
    /* Fills the screen below the fixed header instead of just hugging its
       own content height — otherwise the pinned box is only as tall as
       the heading + one card, leaving a large dead gap of page background
       beneath it for the rest of the pin duration. Centering the content
       inside that full-height box spreads the leftover space evenly
       above and below instead of dumping it all at the bottom. */
    min-height: calc(100vh - 84px - 32px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    overflow: hidden;
  }
  .flow-section .card-grid--3 {
    display: flex;
    grid-template-columns: none;
    margin-inline: -20px;
    padding-inline: 20px;
    will-change: transform;
  }
  .flow-section .card-grid--3 .step-card {
    flex: 0 0 82%;
  }
}
.flow-section .step-num { color: var(--text-muted); }
.flow-section .step-title { color: var(--text-white); }
.flow-section .step-sub { color: var(--accent-cyan-subtle); }
.flow-section .step-card p:last-child { color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .flow-section .step-card { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 640px) {
  .flow-icons { max-width: 420px; }
  .flow-icon { width: 48px; height: 48px; border-radius: 12px; }
  .flow-icon svg { width: 20px; height: 20px; }
}

/* ---------- Showcase (proof) section ---------- */
.showcase-section { position: relative; overflow: hidden; background: var(--bg-primary); }
.showcase-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, black 0%, transparent 80%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, black 0%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}
.showcase-section > .container { position: relative; z-index: 1; }

.showcase-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
}
.showcase-row + .showcase-row { margin-top: 120px; }
.showcase-row--reverse .showcase-copy { order: 2; }
.showcase-row--reverse .showcase-visual { order: 1; }

.showcase-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 480px;
  margin-top: 24px;
}

.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  background: var(--bg-card-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-pill);
  padding: 8px 8px 8px 26px;
  margin-top: 36px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-white);
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.cta-pill:hover { border-color: var(--accent-cyan); transform: translateY(-2px); }
.cta-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-cyan);
  color: var(--text-dark);
  flex-shrink: 0;
}
.cta-pill-icon svg { width: 16px; height: 16px; }

.showcase-card {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 40%), var(--bg-card-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card-lg);
  padding: 32px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}
.showcase-card-title { font-size: 20px; font-weight: 700; color: var(--text-white); }
.showcase-card-sub { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-top: 10px; max-width: 420px; }

.chart-panel {
  position: relative;
  margin-top: 28px;
  padding: 24px 20px 16px;
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.14), rgba(11, 16, 38, 0.6));
  border: 1px solid var(--border-dark);
  aspect-ratio: 460 / 170;
  overflow: hidden;
}
.chart-stat { position: relative; z-index: 1; }
.chart-stat strong { display: block; font-size: 30px; font-weight: 800; color: var(--text-white); }
.chart-stat span { display: block; font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.line-chart { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart-point-label {
  position: absolute;
  transform: translate(10px, -4px);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-white);
  background: rgba(9, 13, 26, 0.7);
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.chart-point-label--end { color: var(--accent-cyan); }

/* ---------- Showcase chart reveal animation ---------- */
.line-chart-tail, .line-chart-main {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s ease;
}
.line-chart-tail--start { transition-delay: 0.1s; }
.line-chart-main { transition-delay: 0.35s; }
.line-chart-tail--end { transition-delay: 1.35s; }

.line-chart-dot {
  opacity: 0;
  transform: scale(0.4);
  transform-origin: center;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.line-chart-dot--start { transition-delay: 0.5s; }
.line-chart-dot--end { transition-delay: 1.5s; }

.chart-point-label {
  opacity: 0;
  transform: translate(10px, 4px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.chart-point-label:not(.chart-point-label--end) { transition-delay: 0.6s; }
.chart-point-label--end { transition-delay: 1.6s; }

.reveal-chart.is-visible .line-chart-tail,
.reveal-chart.is-visible .line-chart-main {
  stroke-dashoffset: 0;
}
.reveal-chart.is-visible .line-chart-dot {
  opacity: 1;
  transform: scale(1);
}
.reveal-chart.is-visible .chart-point-label {
  opacity: 1;
  transform: translate(10px, -4px);
}

@media (prefers-reduced-motion: reduce) {
  .line-chart-tail, .line-chart-main { stroke-dashoffset: 0; transition: none; }
  .line-chart-dot { opacity: 1; transform: none; transition: none; }
  .chart-point-label { opacity: 1; transform: translate(10px, -4px); transition: none; }
}

.bar-card-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.bar-card-head strong { font-size: 30px; font-weight: 800; color: var(--text-white); }
.bar-card-head span { font-size: 13px; color: var(--text-muted); line-height: 1.4; }

.bar-chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  height: 220px;
  margin-top: 68px;
}
.bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px; flex: 1; height: 100%; }
.bar {
  width: 100%;
  max-width: 46px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.3), rgba(148, 163, 184, 0.05));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.bar--active {
  background: linear-gradient(180deg, var(--accent-cyan), var(--blue-primary));
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.35);
}
.bar-col em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}
.bar-col:has(.bar--active) em { color: var(--text-white); }
.bar-chart-tooltip {
  position: absolute;
  top: -12px;
  transform: translate(-50%, -88%);
  background: var(--text-white);
  color: var(--text-dark);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: 0.9s;
}
.bar-chart-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: var(--text-white);
  border-radius: 2px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.reveal-chart.is-visible .bar { transform: scaleY(1); }
.reveal-chart.is-visible .bar-chart-tooltip { opacity: 1; transform: translate(-50%, -100%); }

.bar-col:nth-child(2) .bar { transition-delay: 0.05s; }
.bar-col:nth-child(3) .bar { transition-delay: 0.15s; }
.bar-col:nth-child(4) .bar { transition-delay: 0.25s; }
.bar-col:nth-child(5) .bar { transition-delay: 0.35s; }
.bar-col:nth-child(6) .bar { transition-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  .bar { transform: none; transition: none; }
  .bar-chart-tooltip { opacity: 1; transform: translate(-50%, -100%); transition: none; }
}

@media (max-width: 900px) {
  .showcase-row { grid-template-columns: 1fr; gap: 40px; }
  .showcase-row--reverse .showcase-copy { order: 1; }
  .showcase-row--reverse .showcase-visual { order: 2; }
  .showcase-row + .showcase-row { margin-top: 72px; }
  .showcase-body { max-width: none; }
}

/* The end-of-line data label sits at a fixed 84.8% inline offset tuned
   for the desktop-width chart; on a narrow card that pushes it past the
   chart-panel's overflow:hidden edge and clips the value. Pin it to the
   right edge instead, and give the start label more vertical clearance
   so it stops overlapping its dot. */
@media (max-width: 480px) {
  .chart-point-label { font-size: 11px; padding: 2px 6px; }
  /* The start-of-line label sits right on top of the "faster than manual
     audits" caption at this width with no clean spot to relocate it to —
     drop it rather than leave overlapping text. */
  .chart-point-label:not(.chart-point-label--end) { display: none; }
  .chart-point-label--end,
  .reveal-chart.is-visible .chart-point-label--end {
    left: auto !important;
    right: 8px;
    transform: translate(0, -4px);
  }
}

/* ---------- Scale section (light, two-column) ---------- */
.scale-section {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-pad-y-lg);
}
.scale-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(37, 99, 235, 0.1) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 78% 45%, black 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 70% at 78% 45%, black 0%, transparent 72%);
  pointer-events: none;
}
.scale-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
}
.scale-copy .badge { margin-bottom: 20px; }
.stat-list { display: flex; flex-direction: column; gap: 18px; margin-top: 36px; }
.stat-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  color: var(--text-body);
  line-height: 1.5;
}
.stat-list-icon {
  width: 16px;
  height: 16px;
  color: var(--accent-cyan-subtle);
  flex-shrink: 0;
  margin-top: 4px;
}
.stat-list strong {
  color: var(--text-dark);
  font-size: 20px;
  font-weight: 800;
  margin-right: 6px;
}

.scale-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 420px; }

/* soft brand-colored aura behind the globe */
.scale-globe-aura {
  position: absolute;
  width: min(520px, 86%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.16), rgba(37, 99, 235, 0.1) 55%, transparent 76%);
  filter: blur(26px);
  animation: scale-globe-pulse 6s ease-in-out infinite;
}

/* dashed orbit ring */
.scale-orbit {
  position: absolute;
  width: min(560px, 92%);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px dashed rgba(37, 99, 235, 0.28);
  animation: scale-orbit-spin 40s linear infinite;
}
.scale-orbit::before,
.scale-orbit::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 10px 2px rgba(0, 229, 255, 0.6);
}
.scale-orbit::before { top: -3.5px; left: 50%; margin-left: -3.5px; }
.scale-orbit::after { bottom: 8%; right: 4%; }

.scale-globe-frame {
  position: relative;
  width: min(440px, 72%);
  aspect-ratio: 1 / 1;
  animation: scale-globe-float 9s ease-in-out infinite;
}
.scale-globe-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 30px 50px rgba(37, 99, 235, 0.2));
  overflow: visible;
}

.globe-stop-a { stop-color: #ffffff; }
.globe-stop-b { stop-color: var(--bg-gradient-end); }
.globe-stop-c { stop-color: #cfe0f7; }
.globe-ring-a { stop-color: var(--accent-cyan); }
.globe-ring-b { stop-color: var(--accent-cyan-subtle); }

.globe-fill { fill: url(#globeFill); }
.globe-ring { fill: none; stroke: url(#globeRing); stroke-width: 2; }
.globe-wire {
  fill: none;
  stroke: var(--accent-cyan-subtle);
  stroke-width: 1;
  opacity: 0.45;
  animation: globe-wire-spin 26s linear infinite;
  transform-origin: 120px 120px;
}
.globe-links {
  fill: none;
  stroke: var(--accent-cyan);
  stroke-width: 1.1;
  stroke-dasharray: 2 4;
  opacity: 0.7;
}
.globe-nodes circle {
  fill: var(--accent-cyan);
  animation: globe-node-pulse 2.6s ease-in-out infinite;
  transform-origin: center;
}
.globe-nodes circle:nth-child(2) { animation-delay: 0.4s; }
.globe-nodes circle:nth-child(3) { animation-delay: 0.8s; }
.globe-nodes circle:nth-child(4) { animation-delay: 1.2s; }
.globe-nodes circle:nth-child(5) { animation-delay: 1.6s; }

/* floating info chips around the globe */
.scale-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  padding: 10px 18px 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
  white-space: nowrap;
  animation: scale-chip-float 7s ease-in-out infinite;
}
.scale-chip svg { width: 18px; height: 18px; color: var(--accent-cyan-subtle); flex-shrink: 0; }
.scale-chip--tl { top: 6%; left: -2%; animation-delay: 0.2s; }
.scale-chip--tr { top: 14%; right: -4%; animation-delay: 1.1s; }
.scale-chip--bl { bottom: 16%; left: -6%; animation-delay: 1.9s; }
.scale-chip--br { bottom: 4%; right: 0%; animation-delay: 0.7s; }

@keyframes scale-globe-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes scale-globe-pulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
@keyframes scale-orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes scale-chip-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes globe-wire-spin {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.94); }
}
@keyframes globe-node-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
}
@media (prefers-reduced-motion: reduce) {
  .scale-globe-frame, .globe-wire, .globe-nodes circle,
  .scale-globe-aura, .scale-orbit, .scale-chip { animation: none; }
}
@media (max-width: 640px) {
  .scale-chip { display: none; }
}
@media (max-width: 900px) {
  .scale-grid { grid-template-columns: 1fr; gap: 48px; text-align: center; }
  .stat-list li { text-align: left; }
  .scale-visual { order: -1; min-height: 320px; }
}

/* ---------- CNOM ---------- */
.cnom-section {
  background:
    linear-gradient(180deg, var(--bg-primary) 0%, rgba(9, 13, 26, 0.75) 10%, rgba(9, 13, 26, 0.75) 90%, var(--bg-primary) 100%),
    linear-gradient(100deg, rgba(9, 13, 26, 0.97) 40%, rgba(9, 13, 26, 0.75)),
    url("../images/bg-cnom-mandate-image.png") center / cover no-repeat;
}
.cnom-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
.cnom-copy .section-title { margin-top: 16px; }
.milestone-list { display: flex; flex-direction: column; gap: 16px; }
.milestone-card {
  background: var(--bg-card-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card);
  padding: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.milestone-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); border-color: var(--accent-cyan-subtle); }
.milestone-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.milestone-head h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-cyan-subtle);
  letter-spacing: 0.3px;
}
.milestone-card p { font-size: 14px; color: var(--text-muted); line-height: 1.6; }

/* ---------- CTA banner ---------- */
.cta-banner { padding-block: 100px 0; overflow: hidden; }
.cta-banner-wrap { position: relative; }
.cta-glow {
  position: absolute;
  top: 50%;
  width: 480px;
  height: 480px;
  background: radial-gradient(closest-side, rgba(210, 232, 255, 0.3), rgba(0, 200, 255, 0.12) 45%, transparent 72%);
  filter: blur(50px);
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
}
.cta-glow--left { left: -260px; }
.cta-glow--right { right: -260px; }

.cta-banner-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 64px 24px 56px;
  text-align: center;
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(120, 160, 255, 0.16), transparent 60%),
    linear-gradient(165deg, #1B2947 0%, #0E1530 55%, #0A0E22 100%);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45);
}
.cta-banner-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 16px 16px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 30%, rgba(0, 0, 0, 0.85), transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 30%, rgba(0, 0, 0, 0.85), transparent 90%);
  pointer-events: none;
}
.cta-inner { position: relative; z-index: 1; max-width: 560px; margin-inline: auto; }
.cta-emblem {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(160deg, #16224A, #0B1026);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.cta-emblem img { width: 30px; height: 30px; object-fit: contain; }
.cta-sub { font-size: 15px; color: var(--text-blue-muted); margin-top: 16px; line-height: 1.7; max-width: 460px; margin-inline: auto; }
.cta-banner .btn-row { margin-top: 32px; }
.cta-banner .btn {
  border-radius: var(--radius-pill);
  padding: 12px 28px;
  font-size: 14px;
}
.cta-banner .btn-primary {
  background: linear-gradient(180deg, #3A5AA0, #142049);
  color: var(--text-white);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 20px rgba(0, 0, 0, 0.4);
}
.cta-banner .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 26px rgba(0, 0, 0, 0.5); }
.cta-banner .btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}
.cta-banner .btn-secondary:hover { border-color: rgba(255, 255, 255, 0.4); }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--bg-primary);
  padding-top: 100px;
}
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 60% 45% at 50% 25%, black 0%, transparent 60%);
  mask-image: radial-gradient(ellipse 60% 45% at 50% 25%, black 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.site-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 42% at 50% 18%, rgba(37, 99, 235, 0.15), rgba(0, 229, 255, 0.07) 55%, transparent 78%),
    radial-gradient(ellipse 900px 600px at 50% 100%, rgba(37, 99, 235, 0.2), transparent 70%);
  /* The top radial glow is centered near the footer's own top edge, so
     its full tint is already showing at inset:0 — right where the flat
     .cta-banner background above ends. That reads as a hard seam
     between the two sections, especially on mobile where they sit close
     together. Fading this layer in over the first ~80px softens the
     boundary into a gradual blend instead of a visible line. */
  mask-image: linear-gradient(180deg, transparent, black 80px);
  -webkit-mask-image: linear-gradient(180deg, transparent, black 80px);
  pointer-events: none;
  z-index: 0;
}
.site-footer > .container { position: relative; z-index: 1; }

.footer-trial { display: flex; flex-direction: column; gap: 28px; padding-bottom: 64px; }
.footer-trial-copy .badge { margin-bottom: 16px; }
.footer-trial-sub { font-size: 15px; color: var(--text-dim); line-height: 1.7; margin-top: 12px; max-width: 420px; }

.footer-subscribe label { display: block; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
.footer-subscribe-row { display: flex; gap: 10px; }
.footer-subscribe-input {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-input);
  padding-inline: 14px;
}
.footer-subscribe-input .icon { width: 16px; height: 16px; color: var(--text-dim); flex-shrink: 0; }
.footer-subscribe-input input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  padding-block: 12px;
  font: inherit;
  font-size: 14px;
  color: var(--text-white);
}
.footer-subscribe-input input::placeholder { color: var(--text-dim); }
.footer-subscribe-input:focus-within { border-color: var(--accent-cyan); }
.footer-subscribe-status { min-height: 18px; margin-top: 10px; font-size: 13px; }
.footer-subscribe-status--success { color: var(--accent-cyan); }
.footer-subscribe-status--error { color: #ff6b6b; }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-top: 56px;
  border-top: 1px solid var(--border-dark);
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  background: var(--bg-white);
  border-radius: var(--radius-card);
  padding: 10px 16px;
  margin-bottom: 20px;
}
.footer-logo-img { height: 34px; width: auto; }
.footer-brand p { font-size: 14px; color: var(--text-dim); line-height: 1.7; max-width: 360px; }

.footer-col h3 { font-size: 15px; font-weight: 700; margin-bottom: 20px; }
.footer-col ul { display: flex; flex-direction: column; gap: 14px; }
.footer-col a { font-size: 14px; color: var(--text-dim); transition: color 0.15s ease; }
.footer-col a:hover { color: var(--accent-cyan-subtle); }

.footer-bottom {
  margin-top: 56px;
  padding-block: 28px;
  border-top: 1px solid var(--border-dark);
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 13px;
  color: var(--text-dim);
}
.footer-legal { display: flex; gap: 24px; }
.footer-legal a:hover { color: var(--accent-cyan-subtle); }

.footer-social { display: flex; gap: 16px; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-dark);
  color: var(--text-dim);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.footer-social a:hover { color: var(--accent-cyan-subtle); border-color: var(--accent-cyan); }
.footer-social .icon { width: 15px; height: 15px; }

.footer-hq { padding-bottom: 40px; font-size: 13px; color: var(--text-dim); }

/* ---------- Inner page hero ---------- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-top: 64px;
  text-align: center;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 20%, black 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 85% 75% at 50% 20%, black 0%, transparent 78%);
  pointer-events: none;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.16;
  background-size: cover;
  background-position: center;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 700px 420px at 50% -5%, rgba(0, 229, 255, 0.16), transparent 68%),
    linear-gradient(180deg, rgba(9,13,26,0.4), var(--bg-primary) 92%);
}
.page-hero-inner { position: relative; z-index: 1; max-width: 760px; margin-inline: auto; }
.page-hero .badge { }
.page-hero-title {
  font-size: 34px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.5px;
  margin-top: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #8d97a6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-hero-sub { font-size: 15px; font-weight: 600; color: var(--accent-cyan-subtle); line-height: 1.5; margin-top: 20px; }
.page-hero-body { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-top: 16px; max-width: 620px; margin-inline: auto; }
.page-hero .btn-row { justify-content: center; flex-wrap: nowrap; gap: 12px; }
.page-hero .btn-row .btn { padding: 12px 20px; font-size: 13px; white-space: nowrap; }
@media (max-width: 480px) {
  .page-hero .btn-row { flex-wrap: wrap; }
  .page-hero .btn-row .btn { padding: 11px 16px; font-size: 12px; }
}

/* ---------- Info banner ---------- */
.info-banner {
  background: var(--bg-card-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card-lg);
  padding: 28px 32px;
  margin-top: 56px;
}
.info-banner h3 { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.info-banner p { font-size: 15px; color: var(--text-muted); line-height: 1.7; max-width: none; }

/* ---------- Module cards (image top) ---------- */
.module-card {
  min-width: 0;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card-lg);
  overflow: hidden;
}
.module-card img { width: 100%; height: 190px; object-fit: cover; display: block; }
.module-card-body { padding: 24px; }
.module-card-title { display: flex; align-items: center; font-size: 19px; font-weight: 700; color: var(--text-dark); }
.module-card-title .num-badge { color: var(--text-dark); }
.module-card-body p { margin-top: 12px; font-size: 14px; color: var(--text-body); line-height: 1.7; }

/* ---------- Icon feature list (dark) ---------- */
.icon-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 48px;
}
.icon-feature {
  background: var(--bg-card-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card);
  padding: 24px;
  min-width: 0;
}
.icon-feature-icon {
  width: 44px; height: 44px;
  background: var(--accent-cyan);
  color: var(--text-dark);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.icon-feature-icon svg { width: 22px; height: 22px; }
.icon-feature h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.icon-feature p { font-size: 14px; color: var(--text-muted); line-height: 1.7; }

/* ---------- Flow diagram ---------- */
.flow-diagram {
  background: var(--bg-card-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card-lg);
  padding: 28px;
  min-width: 0;
}
.flow-label { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--accent-cyan-subtle); text-transform: uppercase; margin-bottom: 20px; display: block; }
.flow-box {
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 14px;
}
.flow-box-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: var(--text-dim); text-transform: uppercase; }
.flow-arrow { text-align: center; color: var(--accent-cyan); margin-block: 10px; }
.flow-box--active {
  background: var(--accent-cyan);
  color: var(--text-dark);
  border-color: var(--accent-cyan);
  position: relative;
  padding-top: 36px;
}
.flow-box--active .flow-badge {
  position: absolute; top: 12px; right: 16px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  background: rgba(9,13,26,0.15);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.flow-tunnels { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
.flow-tunnel { background: rgba(9,13,26,0.12); border-radius: 8px; padding: 10px 14px; }
.flow-tunnel strong { display: block; font-size: 13px; margin-top: 2px; }
.split-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
.split-grid .section-title { margin-top: 16px; }

.mission-visual { position: relative; }
.mission-visual::before {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: 0;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.14), rgba(37, 99, 235, 0.08) 55%, transparent 75%);
  filter: blur(30px);
  pointer-events: none;
}
.mission-visual-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  border-radius: var(--radius-card-lg);
  border: 1px solid var(--border-dark);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}
.check-list { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--text-muted); }
.check-list .icon { color: var(--accent-cyan); flex-shrink: 0; margin-top: 2px; width: 18px; height: 18px; }

/* ---------- Compliance / value cards (light) ---------- */
.value-card { min-width: 0; background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--radius-card-lg); padding: 28px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.value-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08); border-color: var(--accent-cyan-subtle); }
.value-card-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  margin-bottom: 20px;
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.12), rgba(0, 229, 255, 0.10));
  border: 1px solid rgba(37, 99, 235, 0.18);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, border-color 0.3s ease;
}
.value-card:hover .value-card-icon-wrap {
  transform: translateY(-4px) scale(1.06) rotate(-6deg);
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.2), rgba(0, 229, 255, 0.18));
  border-color: rgba(37, 99, 235, 0.35);
}
.value-card-icon { width: 24px; height: 24px; color: var(--blue-accent); }
@media (prefers-reduced-motion: reduce) {
  .value-card-icon-wrap { transition: none; }
  .value-card:hover .value-card-icon-wrap { transform: none; }
}
.value-card h3 { font-size: 19px; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; }
.value-card p { font-size: 14px; color: var(--text-body); line-height: 1.7; }
.value-card-link { display: inline-block; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-light); font-size: 13px; font-weight: 600; color: var(--blue-accent); }

/* ---------- Comparison table ---------- */
.table-wrap { overflow-x: auto; margin-top: 48px; border-radius: var(--radius-card-lg); border: 1px solid var(--border-dark); }
.compare-table { width: 100%; min-width: 640px; border-collapse: collapse; background: var(--bg-card-dark); }
.compare-table th, .compare-table td { text-align: left; padding: 18px 20px; font-size: 14px; border-bottom: 1px solid var(--border-dark); white-space: nowrap; }
.compare-table thead th { font-size: 13px; font-weight: 700; color: var(--text-white); background: rgba(255,255,255,0.02); }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr { transition: background 0.15s ease; }
.compare-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.compare-table td:first-child, .compare-table th:first-child { font-weight: 600; color: var(--text-white); white-space: normal; min-width: 180px; }
.compare-table td { color: var(--text-muted); }
.compare-table th.th-highlight,
.compare-table td.col-highlight {
  background: rgba(0, 229, 255, 0.06);
}
.compare-table .col-highlight { color: var(--accent-cyan-subtle); font-weight: 600; }
.compare-table .th-highlight { color: var(--accent-cyan-subtle); }
.pill-highlight {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-cyan); color: var(--text-dark);
  padding: 6px 14px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700;
}
.compare-table--light { background: var(--bg-white); }
.compare-table--light th, .compare-table--light td { border-bottom-color: var(--border-light); }
.compare-table--light thead th { background: var(--bg-light-card); color: var(--text-dark); }
.compare-table--light td { color: var(--text-body); }
.compare-table--light td:first-child, .compare-table--light th:first-child { color: var(--text-dark); }
.table-wrap--light { border-color: var(--border-light); }
.mark-yes { color: #16A34A; }
.mark-no { color: #DC2626; }
.dark .mark-yes, .compare-table .mark-yes { color: #4ADE80; }
.dark .mark-no, .compare-table .mark-no { color: #F87171; }

/* ---------- Threat / stat feature split ---------- */
.threat-visual-card {
  background: var(--bg-card-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card-lg);
  padding: 40px 32px;
  text-align: center;
  min-width: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.threat-visual-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); border-color: var(--accent-cyan-subtle); }
.threat-visual-card .stat-huge { color: var(--accent-cyan); font-size: 40px; }
.threat-visual-card hr { border: none; border-top: 1px solid var(--border-dark); width: 60px; margin: 16px auto; }
.threat-visual-card .stat-title { text-transform: uppercase; letter-spacing: 1px; font-size: 14px; margin-bottom: 12px; }

/* ---------- Pricing cards ---------- */
.pricing-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 48px; align-items: stretch; }
.pricing-card {
  position: relative;
  min-width: 0;
  background: var(--bg-card-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.pricing-card:hover { border-color: rgba(0, 229, 255, 0.3); }
.pricing-card--featured {
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.06), rgba(11, 16, 38, 0.4)), var(--bg-card-dark);
  border: 1px solid rgba(0, 229, 255, 0.4);
  box-shadow: 0 24px 60px rgba(0, 229, 255, 0.12);
}
@media (min-width: 1024px) {
  .pricing-card--featured { transform: translateY(-12px); }
  .pricing-card--featured:hover { transform: translateY(-14px); }
}
.pricing-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pricing-card-head h3 { font-size: 22px; font-weight: 700; color: var(--text-white); }
.pricing-tag { font-size: 11px; font-weight: 700; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-dark); color: var(--text-muted); padding: 5px 12px; border-radius: var(--radius-pill); white-space: nowrap; }
.pricing-tag--accent { background: rgba(0, 229, 255, 0.12); border-color: rgba(0, 229, 255, 0.35); color: var(--accent-cyan-subtle); }
.pricing-card-desc { font-size: 14px; color: var(--text-muted); margin-top: 14px; line-height: 1.6; }
.pricing-card-amount { font-size: 28px; font-weight: 800; color: var(--text-white); margin-top: 24px; line-height: 1.25; }
.pricing-card--featured .pricing-card-amount { color: var(--accent-cyan-subtle); }
.pricing-card-amount-sub { display: block; font-size: 13px; font-weight: 500; color: var(--text-dim); margin-top: 6px; }
.pricing-card-features { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-dark); display: flex; flex-direction: column; gap: 14px; flex-grow: 1; }
.pricing-card-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-muted); }
.pricing-card-features .icon { color: var(--accent-cyan); width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; }
.pricing-card .btn { margin-top: 28px; width: 100%; }
.pricing-card .btn-primary { background: linear-gradient(135deg, var(--accent-cyan), var(--blue-primary)); color: var(--text-dark); border-color: transparent; }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 16px; margin-top: 48px; max-width: 840px; margin-inline: auto; }
.faq-item { background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--radius-card); padding: 24px 28px; }
.faq-item h3 { font-size: 16px; font-weight: 700; color: var(--text-dark); }
.faq-item p { font-size: 14px; color: var(--text-body); line-height: 1.7; margin-top: 10px; }

/* ---------- Team cards ---------- */
.team-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 48px; }
.team-card { min-width: 0; background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--radius-card-lg); padding: 28px; }
.team-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--blue-primary); color: var(--text-white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; margin-bottom: 20px;
}
.team-card h3 { font-size: 17px; font-weight: 700; color: var(--text-dark); }
.team-card .role { font-size: 13px; font-weight: 600; color: var(--blue-accent); margin-top: 4px; }
.team-card p:last-child { font-size: 14px; color: var(--text-body); line-height: 1.7; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-light); }

.advisory-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
.advisory-card { min-width: 0; background: var(--bg-card-dark); border: 1px solid var(--border-dark); border-radius: var(--radius-card); padding: 24px; display: flex; gap: 14px; }
.advisory-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--border-dark); flex-shrink: 0; }
.advisory-card h3 { font-size: 15px; font-weight: 700; }
.advisory-card .role { font-size: 12px; font-weight: 600; color: var(--accent-cyan-subtle); margin-top: 2px; }
.advisory-card p:last-child { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-top: 12px; }

/* ---------- Timeline ---------- */
.timeline-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
.timeline-card { min-width: 0; background: var(--bg-card-dark); border: 1px solid var(--border-dark); border-radius: var(--radius-card); padding: 24px; }
.timeline-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.timeline-date { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.timeline-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.timeline-card p { font-size: 14px; color: var(--text-muted); line-height: 1.6; }

/* ---------- Funding cards ---------- */
.funding-hero { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; margin-top: 48px; }
.funding-amount { font-size: 40px; font-weight: 800; color: var(--blue-accent); }
.funding-round-title { margin-top: 8px; }
.funding-hero > div:first-child p { font-size: 15px; color: var(--text-body); line-height: 1.7; margin-top: 16px; max-width: 480px; }
.funding-note { margin-top: 28px; background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--radius-card); padding: 22px; }
.funding-note h4 { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-body); margin-bottom: 10px; }
.funding-note p { font-size: 14px; color: var(--text-body); line-height: 1.7; }
.funding-list { display: flex; flex-direction: column; gap: 16px; }
.funding-item { min-width: 0; background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--radius-card); padding: 22px 24px; }
.funding-item-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.funding-item-head h3 { font-size: 17px; font-weight: 700; color: var(--text-dark); }
.funding-item-head strong { font-size: 20px; font-weight: 800; color: var(--accent-cyan-subtle); white-space: nowrap; }
.funding-item p { font-size: 14px; color: var(--text-body); margin-top: 10px; line-height: 1.6; }

/* ---------- Contact form ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 48px; align-items: start; }
.contact-form-card { background: var(--bg-card-dark); border: 1px solid var(--border-dark); border-radius: var(--radius-card-lg); padding: 32px; min-width: 0; color: var(--text-white); }
.contact-form-card h3 { font-size: 22px; font-weight: 700; margin-bottom: 24px; color: var(--text-white); }
.form-row { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
.form-field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
.form-field input, .form-field textarea {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-input);
  padding: 13px 16px;
  color: var(--text-white);
  font: inherit;
  font-size: 14px;
}
.form-field textarea { resize: vertical; min-height: 110px; }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--text-dim); }
.form-field input:focus, .form-field textarea:focus { outline: 2px solid var(--accent-cyan); outline-offset: 1px; border-color: var(--accent-cyan); }
.contact-form-card .btn { width: 100%; margin-top: 4px; }
.contact-form-card .btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.form-status { font-size: 14px; line-height: 1.6; margin: 0 0 16px; min-height: 0; }
.form-status:empty { display: none; }
.form-status--ok { color: #4ADE80; }
.form-status--error { color: #F87171; }

.office-card { background: var(--bg-card-dark); border: 1px solid var(--border-dark); border-radius: var(--radius-card); padding: 24px; margin-bottom: 24px; }
.office-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 10px; color: var(--text-white); }
.office-card p { font-size: 14px; color: var(--text-muted); line-height: 1.7; }
.office-card a { color: var(--accent-cyan-subtle); font-weight: 600; }
.office-map-img { width: 100%; border-radius: var(--radius-card-lg); border: 1px solid var(--border-dark); display: block; }

/* ---------- Grid blowout guard ---------- */
/* Explicit 1fr/2-col grid tracks default to minmax(auto,1fr), so a long
   paragraph can force the row wider than the viewport. Force children of
   every multi-column grid to allow shrinking below their content's
   intrinsic min-width. */
.hero-grid > *,
.cnom-grid > *,
.split-grid > *,
.funding-hero > *,
.contact-grid > *,
.footer-grid > *,
.card-grid > * {
  min-width: 0;
}

/* ---------- Section image bg (soft, for split sections) ---------- */
.section-img-bg {
  position: relative;
  overflow: hidden;
}
.section-img-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.14;
  z-index: 0;
}
.section-img-bg > .container { position: relative; z-index: 1; }

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (min-width: 560px) {
  .hero-title { font-size: 34px; }
  .hero-badge { font-size: 11px; letter-spacing: 1.5px; padding: 10px 20px; }
}

@media (min-width: 768px) {
  :root { --section-pad-x: 40px; --section-pad-y: 80px; }
  .hero-title { font-size: 40px; letter-spacing: -0.5px; }
  .hero-visual-caption { display: block; }
  .hero-btn-row { gap: 16px; }
  .hero-btn { padding: 16px 30px; font-size: 14px; letter-spacing: 0.4px; gap: 8px; }
  .hero-btn .icon { width: 16px; height: 16px; }
  .section-title,
  .cta-title,
  .funding-round-title,
  .showcase-title,
  .sectors-title,
  .footer-trial-title {
    font-size: 28px;
  }
  .page-hero-title { font-size: 46px; }
  .cnom-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-trial { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; }
  .footer-trial-copy { max-width: 420px; }
  .footer-subscribe { flex-shrink: 0; width: 380px; }
  .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
  .icon-feature-grid { grid-template-columns: repeat(3, 1fr); }
  .value-card-grid, .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .advisory-grid { grid-template-columns: repeat(3, 1fr); }
  .timeline-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
  .split-grid { grid-template-columns: 1fr 1fr; }
  .funding-hero { grid-template-columns: 1fr 1.1fr; }
  .contact-grid { grid-template-columns: 1.1fr 0.9fr; }
  .form-row { grid-template-columns: 1fr 1fr; }
  .flow-tunnels { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .main-nav { display: block; }
  .nav-toggle { display: none; }
  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas: "badge visual" "rest visual";
    row-gap: 0;
    column-gap: 56px;
  }
  .hero-grid > .hero-badge { align-self: end; }
  .team-grid { grid-template-columns: repeat(4, 1fr); }
  .advisory-grid { grid-template-columns: repeat(3, 1fr); }
  .timeline-grid { grid-template-columns: repeat(4, 1fr); }
  .icon-feature-grid { grid-template-columns: repeat(3, 1fr); }
  .card-grid--4 { grid-template-columns: repeat(4, 1fr); }

  .vuln-section { min-height: 620px; display: flex; align-items: center; padding-bottom: 24px; }
  .vuln-bg-video {
    top: 50%;
    left: 6%;
    transform: translateY(-50%);
    width: 58%;
    max-width: 760px;
    border-radius: 0;
    -webkit-mask-image: radial-gradient(ellipse 28% 46% at 30% 50%, black 65%, transparent 100%);
    mask-image: radial-gradient(ellipse 28% 46% at 30% 50%, black 65%, transparent 100%);
  }
  .vuln-bg::after {
    background: radial-gradient(ellipse 620px 560px at 12% 50%, rgba(0, 229, 255, 0.26), rgba(37, 99, 235, 0.14) 45%, transparent 72%);
  }
  .vuln-copy { padding-top: 0; margin-left: 46%; max-width: 600px; }
}

@media (max-width: 1023px) {
  :root { --section-pad-x: 24px; }
  /* script.js moves #mainNav to be a direct child of <body> at this
     breakpoint (see the comment there for why), so it shares .site-
     header's stacking context instead of being trapped inside
     .header-inner's backdrop-filter containing block. A z-index below
     .site-header's (100) but above ordinary page content is all that's
     needed to keep the header's logo and toggle visible above it. */
  .main-nav {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: var(--bg-primary, #090D1A);
    padding: 104px 24px calc(28px + env(safe-area-inset-bottom, 0px));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    overflow-y: auto;
  }
  .main-nav.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 4px; margin: 0; }
  .main-nav a {
    display: block;
    width: 100%;
    padding: 16px 8px;
    font-size: 20px;
    border-bottom: 1px solid var(--border-dark);
  }
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  .nav-cta { display: block; width: 100%; text-align: center; margin-top: auto; flex-shrink: 0; }

  /* The scroll-linked pill-grow (.is-scrolled) is a desktop flourish —
     on a narrow viewport the max-width jump is invisible but the
     padding/top jump still fires, and repeated toggling near the 24px
     threshold (from iOS toolbar show/hide nudging scrollY) reads as the
     header jittering in place. Freeze the size/position to a single
     value on mobile; keep the tint/shadow crossfade since that one
     doesn't cause layout movement. */
  .site-header, .site-header.is-scrolled { padding-top: 20px; transition: none; }
  .header-inner, .site-header.is-scrolled .header-inner {
    max-width: 900px;
    padding: 10px 18px 10px 10px;
    transition: background 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
  }
}

/* Header actions (logo + Get Started + toggle) were wide enough to clip
   off the right edge on narrow phones since none of the flex children
   could shrink. */
@media (max-width: 400px) {
  .site-header { padding-inline: 12px; }
  .header-inner { padding: 8px 10px 8px 8px; gap: 8px; }
  .brand { padding: 6px 10px; }
  .brand-logo { height: 24px; }
  .header-actions { gap: 8px; }
  .header-actions .btn-sm { padding: 9px 14px; font-size: 13px; }

  /* "256-BIT ENCRYPTED" is the longest callout and still crowds the
     frame at this width — shrink it and give the atom a bit more room
     so the label reads as a callout, not an overhang. */
  .atom-img { width: 52%; max-width: 220px; }
  .connector-label { font-size: 9px; padding: 5px 9px; letter-spacing: 0.2px; }
  .connector-line { width: 10px; }
}

@media (max-width: 1023px) {
  /* Popups stay overlaid on the atom (same treatment as desktop) rather
     than dropping into a static stacked list — just with tighter
     offsets and smaller type so they don't run off a narrow viewport. */
  .hero-visual-frame { min-height: 180px; max-height: 46vh; }
  .atom-img { width: 58%; max-width: 280px; }
  .connector-dot { width: 9px; height: 9px; border-width: 2px; }
  .connector-line { width: 14px; }
  .connector-label { font-size: 10px; padding: 6px 11px; }
  /* Negative right/left offsets anchored the label boxes past the
     frame's own edge, pushing them off the side of the viewport where
     body's overflow-x:hidden silently clipped them. Anchoring at/inside
     the frame edge lets them overlap the image instead, which stays
     fully on-screen. */
  .connector--1 { top: 4%; right: 0%; }
  .connector--2 { top: 46%; right: 0%; }
  .connector--3 { bottom: 4%; left: 0%; }

  /* 100vh forced the hero to fill the screen even though its content is
     shorter, stranding the headline/CTA below a wall of empty space
     around the image. Let the section hug its content instead. */
  /* Mobile freezes the header to a compact ~74px-tall pill (see the
     .site-header, .site-header.is-scrolled rule above) instead of
     desktop's taller expanding one, so it needs noticeably less
     top-clearance than desktop's 116px — not more. */
  .hero-section { min-height: auto; padding-top: 96px; padding-bottom: 40px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-visual-frame { min-height: 320px; }
  .atom-img { width: 52%; }
  .connector-dot { width: 11px; height: 11px; }
  .connector-line { width: 22px; }
  .connector-label { font-size: 11px; padding: 8px 15px; }
  .connector--1 { top: 6%; right: 6%; }
  .connector--2 { top: 47%; right: 0%; }
  .connector--3 { bottom: 6%; left: 8%; }
}

@media (min-width: 1024px) {
  .hero-connectors { position: absolute; inset: 0; }
  .hero-visual-frame { min-height: 360px; flex-direction: row; }
}

@media (min-width: 1280px) {
  :root { --section-pad-x: 80px; --section-pad-y: 110px; }
}