/* ─────────────────────────────────────────────
   PODIUM — Revamp v3
   Inter body · Figtree headers · Pale blue · Navy
───────────────────────────────────────────── */

/* === TOKENS === */
:root {
  /* Backgrounds */
  --bg-white:    #FFFFFF;
  --bg-warm:     #e5f2ff;   /* pale blue */
  --bg-earth:    #cce3ff;   /* slightly richer pale blue */
  --bg-deep:     #0d2440;   /* deep navy */

  /* Blue-tinted scale (was "earth") */
  --earth-100:   #e5f2ff;
  --earth-200:   #cce3ff;
  --earth-300:   #a8cef5;
  --earth-400:   #7aaee0;
  --earth-500:   #4d82b8;

  /* Primary blue */
  --blue-50:     #edf6ff;
  --blue-100:    #cce3ff;
  --blue-500:    #005ad7;   /* primary button */
  --blue-600:    #004bbf;   /* hover */
  --blue-700:    #0d2440;   /* active */
  --blue-900:    #0d2440;   /* CTA / footer background */

  /* Text — navy tints */
  --text-primary:   #0d2440;
  --text-secondary: #2d4a6b;
  --text-muted:     #5a7a9a;
  --text-inverse:   #FFFFFF;

  /* Borders */
  --border-light:   #cce3ff;
  --border-medium:  #a8cef5;

  /* Fonts */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Figtree', 'Inter', sans-serif;

  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px; --space-6: 24px;  --space-7: 28px;  --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  --container-max: 1160px;
  --container-narrow: 720px;

  --radius-sm: 4px;  --radius-md: 8px;  --radius-lg: 16px;
  --radius-xl: 24px; --radius-full: 999px;

  --transition-fast: 120ms ease;
  --transition-base: 220ms ease;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-white);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* === UTILITY === */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-8);
}
.container--narrow { max-width: var(--container-narrow); }

/* === TYPOGRAPHY === */
.display-1 {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.025em;
}
.display-2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.heading-1 {
  font-size: clamp(1.375rem, 2.5vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.body-lg { font-size: 1.125rem; line-height: 1.7; }
.body-md { font-size: 1rem; line-height: 1.65; }
.body-sm { font-size: 0.875rem; line-height: 1.6; }
.label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 13px 26px;
  border-radius: var(--radius-full);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: all var(--transition-base);
  white-space: nowrap;
  min-height: 48px;
}
.btn--primary {
  background: var(--blue-500);
  color: #FFFFFF;
  font-weight: 600;
}
.btn--primary:hover {
  background: #FFFFFF;
  color: var(--bg-deep);
  border: 1px solid #000;
  transform: none;
  box-shadow: none;
}
.btn--primary:active {
  background: #FFFFFF;
  color: var(--bg-deep);
  border: 1px solid #000;
  transform: none;
  box-shadow: none;
}
.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--border-medium);
}
.btn--secondary:hover {
  background: var(--earth-100);
  border-color: var(--earth-400);
}
.btn--light {
  background: #ffffff;
  color: var(--blue-700);
  font-weight: 600;
}
.btn--light:hover {
  background: var(--earth-100);
  color: var(--blue-700);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.btn--light:active {
  background: #ffffff;
  transform: translateY(0);
  box-shadow: none;
}
.btn--ghost {
  background: transparent;
  color: var(--blue-500);
  padding: 12px 0;
}
.btn--ghost:hover { color: var(--blue-700); }
.btn--ghost .btn-arrow { transition: transform var(--transition-base); }
.btn--ghost:hover .btn-arrow { transform: translateX(4px); }
.btn--lg { padding: 16px 36px; font-size: 1.0625rem; }
.btn--sm { padding: 9px 18px; font-size: 0.8125rem; min-height: 36px; }
.btn--full { width: 100%; justify-content: center; }
.btn--white {
  background: #FFFFFF;
  color: var(--bg-deep);
  font-weight: 700;
}
.btn--white:hover {
  background: var(--blue-500);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,90,215,0.32);
}
.btn--white:active {
  background: var(--blue-600);
  color: #FFFFFF;
  transform: translateY(0);
}

/* === NAVIGATION — floating glass pill ===
   .nav is a transparent wrapper; .nav__inner is the pill.
   Initial state (over dark hero): translucent dark glass with white text.
   Scrolled: translucent light glass with dark text. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: var(--space-6) 0;
  background: transparent;
  pointer-events: none; /* let clicks pass through transparent wrapper */
}
.nav > .container {
  pointer-events: none;
  max-width: 1360px;
  padding: 0 var(--space-6);
}
.nav__inner,
.nav__mobile-panel { pointer-events: auto; } /* re-enable on real UI */

.nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 60px;
  gap: var(--space-5);
  padding: 0 var(--space-5) 0 var(--space-8);
  border-radius: var(--radius-full);
  /* layered: drifting radial sheens over the dark glass tint */
  background:
    radial-gradient(35% 120% at var(--nav-sheen-x, 20%) 50%, rgba(255,255,255,0.07), transparent 60%),
    radial-gradient(30% 110% at var(--nav-sheen-y, 85%) 50%, rgba(120,170,255,0.06), transparent 60%),
    rgba(13, 28, 52, 0.35);
  background-repeat: no-repeat;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
  animation: nav-sheen 14s ease-in-out infinite alternate;
}
@property --nav-sheen-x {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 20%;
}
@property --nav-sheen-y {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 85%;
}
@keyframes nav-sheen {
  0%   { --nav-sheen-x: 15%; --nav-sheen-y: 90%; }
  100% { --nav-sheen-x: 60%; --nav-sheen-y: 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__inner { animation: none; }
}

/* Nav text on dark hero */
.nav .nav__item-btn,
.nav .nav__plain-link {
  color: rgba(255,255,255,0.82);
}
.nav .nav__item-btn:hover,
.nav .nav__plain-link:hover,
.nav .nav__item.open .nav__item-btn {
  color: #ffffff;
  background: rgba(255,255,255,0.12);
}
.nav .nav__logo { color: #ffffff; }

/* Scrolled — flip pill to light glass */
.nav.scrolled .nav__inner {
  background: rgba(255,255,255,0.78);
  border-color: rgba(200, 220, 245, 0.6);
  box-shadow: 0 10px 36px rgba(13,36,64,0.12), inset 0 1px 0 rgba(255,255,255,1);
}
.nav.scrolled .nav__item-btn,
.nav.scrolled .nav__plain-link {
  color: var(--text-secondary);
}
.nav.scrolled .nav__item-btn:hover,
.nav.scrolled .nav__plain-link:hover,
.nav.scrolled .nav__item.open .nav__item-btn {
  color: var(--text-primary);
  background: var(--earth-100);
}
.nav.scrolled .nav__logo { color: var(--text-primary); }
.nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav__logo-img {
  height: 28px;
  width: auto;
  display: block;
}
/* Dark hero: show white/dark variant, hide color */
.nav__logo-img--color { display: none; }
.nav__logo-img--dark  { display: block; }
/* Scrolled white nav: flip visibility */
.nav.scrolled .nav__logo-img--dark  { display: none; }
.nav.scrolled .nav__logo-img--color { display: block; }

/* Nav items & dropdowns */
.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  grid-column: 2;
  justify-self: center;
  margin: 0;
}
.nav__logo { grid-column: 1; justify-self: start; }
.nav__actions { grid-column: 3; }
.nav__hamburger { grid-column: 3; }
.nav__item {
  position: relative;
}
.nav__item-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
  cursor: pointer;
  letter-spacing: -0.01em;
}
.nav__item-btn:hover,
.nav__item.open .nav__item-btn {
  color: #fff;
  background: rgba(255,255,255,0.12);
}
.nav__item-btn svg {
  transition: transform var(--transition-fast);
  flex-shrink: 0;
  opacity: 0.6;
}
.nav__item.open .nav__item-btn svg { transform: rotate(180deg); }
.nav.scrolled .nav__item-btn { color: var(--text-secondary); }
.nav.scrolled .nav__item-btn:hover,
.nav.scrolled .nav__item.open .nav__item-btn {
  color: var(--text-primary);
  background: var(--earth-100);
}

/* Pricing plain link */
.nav__plain-link {
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
  letter-spacing: -0.01em;
}
.nav__plain-link:hover { color: #fff; background: rgba(255,255,255,0.12); }
.nav.scrolled .nav__plain-link { color: var(--text-secondary); }
.nav.scrolled .nav__plain-link:hover { color: var(--text-primary); background: var(--earth-100); }

/* Dropdown panel — liquid glass */
.nav__dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  background: rgba(252, 253, 255, 0.96);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  border: 1px solid rgba(200, 220, 245, 0.7);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(13,36,64,0.22), 0 4px 16px rgba(13,36,64,0.1), inset 0 1px 0 rgba(255,255,255,1);
  min-width: 260px;
  padding: var(--space-3);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.nav__item.open .nav__dropdown,
.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.nav__item:hover .nav__item-btn svg,
.nav__item:focus-within .nav__item-btn svg { transform: rotate(180deg); }
/* Invisible bridge across the 12px gap so the dropdown doesn't snap shut
   when the cursor travels between the button and the dropdown body. */
.nav__dropdown::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.nav__dropdown-text {
  white-space: nowrap;
}
.nav__ext-icon {
  display: inline-block;
  margin-left: 8px;
  vertical-align: -2px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}
.nav__dropdown-link:hover .nav__ext-icon { opacity: 1; }

/* Dropdown — two column */
.nav__dropdown--wide {
  min-width: 560px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-3);
  padding: var(--space-4);
}
.nav__dropdown-section {
  padding: var(--space-2) 0;
}
.nav__dropdown-section + .nav__dropdown-section {
  border-left: 1px solid rgba(0,90,215,0.1);
  padding-left: var(--space-4);
}
.nav__dropdown-section-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 var(--space-2) var(--space-3);
  display: block;
}

/* Dropdown link row */
.nav__dropdown-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px 10px;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  text-decoration: none;
}
.nav__dropdown-link:hover {
  background: rgba(0,90,215,0.06);
}

/* Icon box */
.nav__dropdown-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: rgba(0,90,215,0.08);
  border: 1px solid rgba(0,90,215,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--blue-500);
  transition: background var(--transition-fast), border-color var(--transition-fast);
  overflow: hidden;
}
.nav__dropdown-link:hover .nav__dropdown-icon {
  background: rgba(0,90,215,0.14);
  border-color: rgba(0,90,215,0.25);
}
/* Typology icons — no box, just the illustration at full size */
.nav__dropdown-icon:has(img) {
  background: none;
  border-color: transparent;
  width: 40px;
  height: 40px;
}
.nav__dropdown-link:hover .nav__dropdown-icon:has(img) {
  background: none;
  border-color: transparent;
}
.nav__dropdown-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

/* Text block beside icon */
.nav__dropdown-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.nav__dropdown-text strong {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.nav__dropdown-text span {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  justify-self: end;
}
.nav__actions .btn {
  padding: 0 18px;
  height: 38px;
  min-height: 0;
  font-size: 0.875rem;
  line-height: 1;
}
/* Glass-pill "Book a Demo" — deep-navy translucent base with liquid glass shine */
.nav__actions .btn--primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px;
  background-color: rgba(13, 28, 52, 0.28);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 240ms ease, background-color 240ms ease, transform 200ms ease, color 240ms ease, box-shadow 240ms ease;
}
.nav__actions .btn--primary::after {
  content: "→";
  font-weight: 400;
  transition: transform 200ms ease;
}
/* Liquid glass highlight — radial pool at top + diagonal shine that sweeps on hover */
.nav__actions .btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(80% 110% at 50% -30%, rgba(255,255,255,0.35), rgba(255,255,255,0) 60%),
    radial-gradient(50% 80% at 50% -10%, rgba(255,255,255,0.18), rgba(255,255,255,0) 70%),
    linear-gradient(115deg,
      transparent 35%,
      rgba(255,255,255,0.40) 48%,
      rgba(255,255,255,0.75) 50%,
      rgba(255,255,255,0.40) 52%,
      transparent 65%);
  background-size: auto, auto, 220% 100%;
  background-position: 0 0, 0 0, 130% 0;
  background-repeat: no-repeat;
  opacity: 0.55;
  transition: opacity 280ms ease, transform 320ms cubic-bezier(0.4, 0, 0.2, 1), background-position 720ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nav__actions .btn--primary:hover {
  background-color: rgba(13, 28, 52, 0.42);
  border-color: rgba(255, 255, 255, 0.30);
  color: #ffffff;
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
}
.nav__actions .btn--primary:hover::before {
  opacity: 1;
  transform: translateY(8%) scale(1.05);
  background-position: 0 0, 0 0, -30% 0;
}
.nav__actions .btn--primary:hover::after {
  transform: translateX(2px);
}
.nav__actions .btn--primary:active {
  background-color: rgba(13, 28, 52, 0.55);
  transform: scale(0.985);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
/* Light theme — when nav flips to white glass on scroll, button flips too */
.nav.scrolled .nav__actions .btn--primary {
  background-color: var(--blue-500);
  color: #ffffff;
  border-color: rgba(13, 36, 64, 0.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 4px 12px rgba(0,90,215,0.22);
}
/* Liquid pool + diagonal shine — bright white sweep over the blue pill */
.nav.scrolled .nav__actions .btn--primary::before {
  background:
    radial-gradient(80% 110% at 50% -30%, rgba(255,255,255,0.55), rgba(255,255,255,0) 60%),
    radial-gradient(50% 80% at 50% -10%, rgba(255,255,255,0.30), rgba(255,255,255,0) 70%),
    linear-gradient(115deg,
      transparent 35%,
      rgba(255,255,255,0.40) 48%,
      rgba(255,255,255,0.85) 50%,
      rgba(255,255,255,0.40) 52%,
      transparent 65%);
  background-size: auto, auto, 220% 100%;
  background-position: 0 0, 0 0, 130% 0;
  background-repeat: no-repeat;
  opacity: 0.6;
}
.nav.scrolled .nav__actions .btn--primary:hover {
  background-color: var(--blue-600);
  border-color: rgba(13, 36, 64, 0.32);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 6px 18px rgba(0,90,215,0.28);
}
.nav.scrolled .nav__actions .btn--primary:hover::before {
  opacity: 1;
  transform: translateY(8%) scale(1.08);
  background-position: 0 0, 0 0, -30% 0;
}


/* Hero "Book a Demo" — same glass pill, sized for hero CTA */
.hero__actions-row .btn--primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(13, 28, 52, 0.28);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 240ms ease, background-color 240ms ease, transform 200ms ease, color 240ms ease, box-shadow 240ms ease;
}
.hero__actions-row .btn--primary::after {
  content: "→";
  font-weight: 400;
  transition: transform 200ms ease;
}
.hero__actions-row .btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(80% 110% at 50% -30%, rgba(255,255,255,0.40), rgba(255,255,255,0) 60%),
    radial-gradient(50% 80% at 50% -10%, rgba(255,255,255,0.20), rgba(255,255,255,0) 70%),
    linear-gradient(115deg,
      transparent 35%,
      rgba(255,255,255,0.40) 48%,
      rgba(255,255,255,0.80) 50%,
      rgba(255,255,255,0.40) 52%,
      transparent 65%);
  background-size: auto, auto, 220% 100%;
  background-position: 0 0, 0 0, 130% 0;
  background-repeat: no-repeat;
  opacity: 0.6;
  transition: opacity 280ms ease, transform 320ms cubic-bezier(0.4, 0, 0.2, 1), background-position 720ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hero__actions-row .btn--primary:hover {
  background-color: rgba(13, 28, 52, 0.42);
  border-color: rgba(255, 255, 255, 0.34);
  color: #ffffff;
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
}
.hero__actions-row .btn--primary:hover::before {
  opacity: 1;
  transform: translateY(8%) scale(1.05);
  background-position: 0 0, 0 0, -30% 0;
}
.hero__actions-row .btn--primary:hover::after {
  transform: translateX(2px);
}
.hero__actions-row .btn--primary:active {
  background-color: rgba(13, 28, 52, 0.55);
  transform: scale(0.985);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
/* === HERO — full viewport === */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: #081629;
  overflow: hidden;
  padding-top: 108px; /* floating pill nav: 24 + 60 + 24 */
}

/* Background layers */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.2;
}
.hero__bg-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 70% at 65% 45%, rgba(0,90,215,0.38) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 15% 80%, rgba(0,40,130,0.25) 0%, transparent 70%),
    linear-gradient(162deg, #081629 0%, #0c2a58 52%, #081629 100%);
  background-size: 200% 200%;
  animation: hero-glow 20s ease-in-out infinite;
}
@keyframes hero-glow {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
.hero__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 65% at 55% 25%, black 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 65% at 55% 25%, black 20%, transparent 100%);
}

/* Three.js full-bleed background — animated building massing */
.hero__threejs-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__threejs-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  opacity: 0.55;
}
.hero__threejs-label {
  position: absolute;
  bottom: 20px;
  right: 24px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
  white-space: nowrap;
  pointer-events: none;
  background: rgba(0,0,0,0.25);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.06);
}

/* Content */
.hero__body {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  padding: var(--space-20) 0 var(--space-12);
}
.hero__content {
  max-width: 780px;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
/* Reserved space above hero title for a page icon — used on platform pages */
.hero__icon {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
  overflow: hidden;
}
.hero__icon img, .hero__icon svg { width: 56px; height: 56px; object-fit: contain; }
.hero__title { color: #ffffff; }
.hero__cycle-wrap {
  display: block;
}
@keyframes hero-cycle-gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.hero__cycle {
  display: inline-block;
  background: linear-gradient(118deg, #70baff, #4d98ff, #a78bfa, #1a6aff, #38bdf8, #70baff);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: hero-cycle-gradient 4s ease infinite;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.hero__cycle.fade-out {
  opacity: 0;
  transform: translateY(-6px);
}
.hero__cycle.fade-in {
  opacity: 0;
  transform: translateY(6px);
}
.hero__title em {
  font-style: normal;
  color: #ffffff;
}
.hero__subtitle {
  color: rgba(255,255,255,0.6);
  max-width: 560px;
}
.hero__actions-row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.btn--ghost-light {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  color: rgba(255,255,255,0.75);
  padding: 15px 0;
  font-size: 1rem;
  font-weight: 500;
}
.btn--ghost-light .btn-arrow { transition: transform var(--transition-base); }
.btn--ghost-light:hover { color: #ffffff; }
.btn--ghost-light:hover .btn-arrow { transform: translateX(4px); }
.hero__proof-strip {
  display: flex;
  gap: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.hero__proof-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.025em;
  font-family: var(--font-display);
}
.hero__proof-label {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.42);
  margin-top: 3px;
}

/* Trust strip — seamless auto-scroll marquee */
.hero__trust {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  padding: 36px 0;
  background: rgba(0,0,0,0.08);
  backdrop-filter: blur(40px) saturate(140%);
  -webkit-backdrop-filter: blur(40px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 120px, black calc(100% - 120px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 120px, black calc(100% - 120px), transparent 100%);
}
.hero__trust > .container {
  max-width: none;
  padding: 0;
}
.hero__trust-label {
  /* keep label centered inside the masked strip */
}
.hero__trust-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
  text-align: center;
  margin-bottom: 14px;
}
.hero__trust-logos {
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  animation: trust-scroll 240s linear infinite;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
}
.hero__trust-logos:hover { animation-play-state: paused; }
/* Real company logos — force to pure white via brightness(0) + invert(1),
   then mute with opacity. Works on black, grey, and coloured logos alike. */
.hero__trust-logos img {
  height: 32px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  opacity: 0.7;
  filter: brightness(0) invert(1);
  color: #ffffff; /* affects SVGs that reference currentColor */
  transition: opacity var(--transition-base);
  margin: 0 72px;
}
.hero__trust-logos img:hover { opacity: 1; }
@keyframes trust-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* === HERO MEDIA — placeholder/video frame above the hero copy on typology pages === */
.hero-media {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 80% at 50% 100%, rgba(0,90,215,0.22) 0%, transparent 70%),
    linear-gradient(160deg, #0d2440 0%, #102e55 100%);
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: var(--space-8);
}
.hero-media__video,
.hero-media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-media__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: rgba(255,255,255,0.5);
}
.hero-media__play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(122,182,255,0.9);
}
.hero-media__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

/* === SPLIT HERO (text left, image right — used on platform plugin pages) === */
.hero__body--split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
.hero__body--split .hero__content { max-width: 560px; }
.hero__body--split .hero-media { margin-bottom: 0; max-width: none; aspect-ratio: 5 / 3; }
.hero__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}
.hero__media-img {
  max-width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,0.35));
}
.hero__media-vid {
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
  background: #000;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
@media (max-width: 900px) {
  .hero__body--split { grid-template-columns: 1fr; gap: var(--space-10); }
  .hero__media { min-height: auto; order: -1; }
  .hero__media-img { max-width: 360px; }
  .hero__media-vid { max-width: 100%; }
}

/* === INNER PAGE HERO === */
.hero--inner {
  min-height: auto;
}
.hero--inner .hero__body {
  align-items: flex-start;
  padding: var(--space-8) 0 var(--space-20);
}
.hero--inner .hero__content {
  gap: var(--space-5);
  max-width: 680px;
}
/* Typology hero — extra vertical room */
.hero--typology .hero__body {
  padding: var(--space-8) 0 var(--space-24);
}
.hero--inner .hero__title,
.hero--typology .hero__title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
}
.hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.38);
  margin-bottom: var(--space-5);   /* space before title */
}
.hero__breadcrumb a { color: rgba(255,255,255,0.55); transition: color var(--transition-fast); }
.hero__breadcrumb a:hover { color: rgba(255,255,255,0.9); }
.hero__breadcrumb-sep { opacity: 0.3; }

/* === CAPS GRID — 3-column capability blocks === */
.caps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.cap-card {
  background: #F0F6FC;
  border: 0;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.cap-card__icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: var(--earth-100);
  border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-500);
  flex-shrink: 0;
}
.cap-card__title { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.cap-card__body { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.6; }

/* === METRIC CARDS — 2-3 col grid === */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
.metric-grid--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.metric-card {
  background: #F0F6FC;
  border: 0;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
}
.metric-card__label { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: var(--space-2); }
.metric-card__value { font-size: 1rem; font-weight: 600; color: var(--text-primary); line-height: 1.5; }

/* === OUTPUT LIST === */
.output-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.output-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}
.output-item__icon {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--earth-100);
  border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-500);
}
.output-item__text { font-size: 0.9375rem; font-weight: 500; color: var(--text-primary); padding-top: 6px; }

/* === WHY STRIP — 3 inline reasons === */
.why-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}
.why-card {
  padding: var(--space-8);
  background: #F0F6FC;
  border: 0;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.why-card__icon { color: var(--blue-500); opacity: 0.85; }
.why-card__title { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.why-card__body { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.6; }
.why-card__visual {
  aspect-ratio: 5 / 3;
  background: #ffffff;
  border: 1px dashed rgba(13, 36, 64, 0.14);
  border-radius: var(--radius-md);
  margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) 0;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.why-card__visual::before {
  content: '';
  position: absolute;
  inset: 16px;
  border: 1px dashed rgba(13, 36, 64, 0.10);
  border-radius: var(--radius-md);
}
.why-card__visual:has(img)::before { display: none; }
.why-card__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) {
  .why-card { padding: var(--space-6); }
  .why-card__visual { margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) 0; }
}

/* === SOLUTIONS HUB CARDS === */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.solutions-grid--4 { grid-template-columns: repeat(4, 1fr); }
.sol-card {
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #F0F6FC;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.sol-card:hover {
  background: #E5EFF8;
  box-shadow: 0 12px 36px rgba(13,36,64,0.10);
  transform: translateY(-3px);
}
.sol-card__thumb {
  aspect-ratio: 16/9;
  background: var(--earth-200);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--border-light);
}
.sol-card__body { padding: var(--space-6) var(--space-8); display: flex; flex-direction: column; flex: 1; gap: var(--space-3); }
.sol-card__title { font-size: 1.0625rem; font-weight: 700; color: var(--text-primary); }
.sol-card__text { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.6; flex: 1; }
.sol-card__cta { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 0.875rem; font-weight: 600; color: var(--blue-500); margin-top: auto; }
.sol-card__cta:hover { color: var(--blue-600); }

/* === RELATED LINKS === */
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.related-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border: 0;
  border-radius: var(--radius-lg);
  background: #F0F6FC;
  transition: all var(--transition-fast);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
}
.related-card:hover { border-color: var(--blue-500); background: var(--earth-100); }
.related-card__icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--earth-100);
  border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-500);
}

/* === OUTCOME CHIPS — 3 chips row below hero === */
.outcome-chips {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.outcome-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--earth-100);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.outcome-chip svg { color: var(--blue-500); flex-shrink: 0; }
.section--chips { padding: var(--space-10) 0; border-bottom: 1px solid var(--border-light); }

/* === LAYOUT FAMILY CARDS === */
.layout-fam__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}
.layout-fam__card {
  border-radius: var(--radius-xl);
  border: 0;
  overflow: hidden;
  background: #F0F6FC;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.layout-fam__card:hover {
  background: #E5EFF8;
  box-shadow: 0 12px 36px rgba(13,36,64,0.10);
  transform: translateY(-3px);
}
.layout-fam__visual {
  aspect-ratio: 4/3;
  background: linear-gradient(145deg, var(--earth-100) 0%, var(--earth-200) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-light);
  position: relative;
  overflow: hidden;
  color: var(--blue-500);
}
.layout-fam__body {
  padding: var(--space-6) var(--space-6);
}
.layout-fam__label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue-500);
  margin-bottom: var(--space-2);
}
.layout-fam__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.layout-fam__text {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* === FEATURE CARDS — visual + text === */
/* === COMPONENT LIBRARY CARDS (reusable on all typology pages) ===
   Layout: 2-col grid; card = white visual on top + padded text body below.
   Padding standard: 32px inside visual AND body (--space-8). */
.comp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}
.comp-card {
  background: #F0F6FC;
  border: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
/* .comp-card hover removed — these aren't links on typology pages */
.comp-card__visual {
  aspect-ratio: 16/9;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-light);
  color: var(--blue-500);
  padding: var(--space-8);
}
.comp-card__visual svg,
.comp-card__visual img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
/* Photo variant — image fills edge-to-edge, no padding */
.comp-card__visual--photo {
  padding: 0;
  background: var(--earth-200);
}
.comp-card__visual--photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  display: block;
}
.comp-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.comp-card__body {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
}
.comp-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.comp-card__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.comp-card__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
}
.comp-card__text {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}
.card-bullets {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.card-bullets li {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  padding-left: 1.1em;
  position: relative;
}
.card-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue-500);
  opacity: 0.6;
}

.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-10);
}
.feat-card {
  background: #F0F6FC;
  border: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.feat-card:hover {
  background: #E5EFF8;
  box-shadow: 0 12px 36px rgba(13,36,64,0.10);
  transform: translateY(-3px);
}
.feat-card__visual {
  aspect-ratio: 16/9;
  background: linear-gradient(145deg, var(--earth-100) 0%, var(--earth-200) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-light);
  color: var(--blue-500);
}
.feat-card__body {
  padding: var(--space-5) var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.feat-card__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
}
.feat-card__text {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* Responsive overrides for new typology components */
@media (max-width: 1024px) {
  .layout-fam__grid { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .outcome-chips { flex-direction: column; }
  .layout-fam__grid { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: 1fr; }
  .comp-grid { grid-template-columns: 1fr; }
  .comp-card__title { font-size: 1.1875rem; }
  .comp-card__visual { padding: var(--space-6); }
  .comp-card__body { padding: var(--space-6); }
}

/* === TYPOLOGY CROSS-LINK CARDS === */
.typo-xlink-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.typo-xlink-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
  background: #F0F6FC;
  border: 0;
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.typo-xlink-card:hover {
  background: #E5EFF8;
  box-shadow: 0 12px 36px rgba(13,36,64,0.10);
  transform: translateY(-3px);
}
.typo-xlink-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.typo-xlink-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.typo-xlink-card__text {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.typo-xlink-card__arrow {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--blue-500);
  margin-top: auto;
  padding-top: var(--space-4);
  transition: gap var(--transition-base);
}
.typo-xlink-card:hover .typo-xlink-card__arrow { letter-spacing: 0.03em; }
@media (max-width: 640px) {
  .typo-xlink-grid { grid-template-columns: 1fr; }
}

/* === CONNECTOR CARDS (connectors page) === */
.connector-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}
.connector-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
  background: #F0F6FC;
  border: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: background var(--transition-base), box-shadow var(--transition-base);
}
.connector-card__image {
  margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) var(--space-2);
  aspect-ratio: 16 / 10;
  background: #F0F6FC;
  border-bottom: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.connector-card__image img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.connector-card__image::before {
  content: '';
  position: absolute;
  inset: 18px;
  border: 1.5px dashed rgba(13,36,64,0.12);
  border-radius: var(--radius-lg);
  pointer-events: none;
}
.connector-card__image:has(img)::before { display: none; }
.connector-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.connector-card__logo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}
.connector-card__name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.connector-card__sub {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.connector-card__desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.connector-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.connector-card__features li {
  font-size: 0.875rem;
  color: var(--text-secondary);
  padding-left: var(--space-5);
  position: relative;
}
.connector-card__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-400);
}
.connector-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
  flex-wrap: wrap;
}
.connector-card__footer .btn { flex: 1; justify-content: center; }
.connector-card__meta {
  font-size: 0.8125rem;
  color: var(--text-muted);
  padding-top: var(--space-3);
  margin-top: 0;
}

/* Connector grid (coming soon tiles) */
.connector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.connector-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}
.connector-tile--soon { opacity: 0.75; }
.connector-tile--request {
  border-style: dashed;
  border-color: var(--blue-200);
  background: rgba(0,90,215,0.02);
}
.connector-tile__icon { color: var(--text-muted); }
.connector-tile--request .connector-tile__icon { color: var(--blue-400); }
.connector-tile__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}
.connector-tile__badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-muted);
  padding: 3px 8px;
  border-radius: 100px;
}
.connector-tile__badge--link {
  color: var(--blue-600);
  background: rgba(0,90,215,0.08);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8125rem;
}
.connector-tile__badge--link:hover { background: rgba(0,90,215,0.14); }

@media (max-width: 900px) {
  .connector-cards { grid-template-columns: 1fr; }
  .connector-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .connector-grid { grid-template-columns: 1fr; }
}

/* === EXPORT FORMATS ROW (connectors page) === */
.export-formats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-10);
}
.export-format {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  min-width: 96px;
}
.export-format__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: var(--bg-white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.export-format__icon img,
.export-format__icon svg {
  max-width: 65%;
  max-height: 65%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.export-format:hover .export-format__icon {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(13,36,64,0.08);
}
.export-format__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

/* === PLUGIN SPEC CARDS (connector subpages) === */
.plugin-spec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}
.plugin-spec-card {
  background: #F0F6FC;
  border: 0;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.plugin-spec-card__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.plugin-spec-card__value {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.plugin-spec-card__note {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.plugin-changelog {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
}
.plugin-changelog__title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.plugin-changelog__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.plugin-changelog__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  font-size: 0.875rem;
}
.plugin-changelog__ver {
  font-weight: 600;
  color: var(--blue-600);
  min-width: 48px;
  flex-shrink: 0;
}
.plugin-changelog__desc {
  color: var(--text-secondary);
}
@media (max-width: 768px) {
  .plugin-spec-grid { grid-template-columns: repeat(2, 1fr); }
}

/* === PROOF STRIP (typology) === */
.proof-strip {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-10) 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  flex-wrap: wrap;
}
.proof-strip__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  white-space: nowrap;
}
.proof-strip__logos {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
  align-items: center;
}
.proof-strip__logo {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

/* === PROSE BLOCK — narrative paragraphs === */
.cubs-prose {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.cubs-prose p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

/* === SECTION HELPERS === */
.section { padding: var(--space-20) 0; }
.section.comparison { padding: var(--space-16) 0; }
.section.feature    { padding: var(--space-20) 0; }
@media (max-width: 768px) {
  .section { padding: var(--space-12) 0; }
  .section.comparison { padding: var(--space-10) 0; }
  .section.feature    { padding: var(--space-12) 0; }
}
.section--warm { background: var(--bg-warm); }
.section--earth { background: var(--earth-200); }
.section--deep  { background: var(--bg-deep); color: var(--text-inverse); }
.section__header { max-width: 70%; margin-bottom: var(--space-16); }
@media (max-width: 768px) { .section__header { max-width: 100%; } }
.section__header--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__eyebrow { margin-bottom: var(--space-3); }
.section__title   { margin-bottom: var(--space-4); }
.section__subtitle { color: var(--text-secondary); }
.section--deep .section__subtitle { color: rgba(255,255,255,0.55); }

/* === VALUE PROP ROWS === */
.vp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.vp-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  background: #F0F6FC;
  border: 0;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: background 200ms ease, box-shadow 200ms ease;
}
.vp-card__graphic {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Uniform graphic area — keeps the title + body aligned across all 3 cards */
  height: 260px;
  flex-shrink: 0;
}
.vp-card__graphic-ph {
  width: 160px; height: 160px;
  background: transparent;
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vp-card__graphic-ph svg { width: 100%; height: 100%; color: var(--blue-500); }
.vp-card__graphic-ph svg { color: #5a8060; width: 36px; height: 36px; }
.vp-card__content {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.vp-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.3;
}
.vp-card__body {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* === HOW IT WORKS — CARD GRID === */
.how__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
/* Connecting line across the three how-cards to suggest a linear workflow. */
.how__cards--linked {
  position: relative;
}
.how__card {
  display: flex;
  flex-direction: column;
  background: #F0F6FC;
  border: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: background var(--transition-base), box-shadow var(--transition-base);
}
.how__card-graphic {
  aspect-ratio: 5 / 3;
  background: #ffffff;
  border-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.how__card-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.how__card-graphic-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  opacity: 0.5;
}
.how__card-graphic-ph svg { color: var(--earth-500); }
.how__card-body {
  padding: var(--space-6) var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.how__card-num {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-500);
}
.how__card-title {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  line-height: 1.3;
  margin-top: var(--space-1);
}
.how__card-body-text {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-top: var(--space-1);
}

/* === TYPOLOGY CARDS — icon · title · text · pill button, flip-dark on hover === */
.typo-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.typo-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding: 40px 36px 36px;
  background: #F0F6FC;
  border: 0;
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-base),
    background var(--transition-base);
}
.typo-card:hover {
  box-shadow: 0 12px 40px rgba(13,36,64,0.15);
  transform: translateY(-3px);
  background: var(--bg-deep);
}
.typo-card__icon {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.typo-card__icon img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}
.typo-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  width: 100%;
}
.typo-card__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
  transition: color var(--transition-base);
}
.typo-card__text {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
  transition: color var(--transition-base);
}
.typo-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue-500);
  color: #ffffff;
  border-radius: var(--radius-full);
  padding: 12px 24px;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-top: auto;
  transition:
    background var(--transition-base),
    color var(--transition-base),
    box-shadow var(--transition-base);
}
.typo-card__btn svg { transition: transform var(--transition-fast); }
.typo-card:hover .typo-card__title { color: #ffffff; }
.typo-card:hover .typo-card__text  { color: rgba(255,255,255,0.65); }
.typo-card:hover .typo-card__btn   { background: #ffffff; color: var(--bg-deep); box-shadow: none; }
.typo-card:hover .typo-card__btn svg { transform: translateX(3px); }

/* === QUOTE MARQUEE === */
.quotes-marquee {
  overflow: hidden;
  padding: 16px 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
}
.quotes-track {
  display: flex;
  gap: var(--space-4);
  width: max-content;
  animation: marquee 48s linear infinite;
}
.quotes-track:hover { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.quote-card {
  width: 360px;
  flex-shrink: 0;
  background: #F0F6FC;
  border: 0;
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-7) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.quote-card__mark {
  font-size: 2.25rem;
  line-height: 1;
  color: var(--blue-100);
  font-family: Georgia, serif;
  user-select: none;
  flex-shrink: 0;
}
.quote-card__text {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-primary);
  flex: 1;
}

/* === FINAL CTA === */
.cta-section {
  background: transparent;
  padding: var(--space-20) 0;
  position: relative;
}
/* CTA graphic strip */
.cta__graphic {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  position: relative;
}
.cta__graphic-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex-shrink: 0;
}
.cta__graphic-card--wide {
  width: 260px;
  height: 140px;
  display: flex;
  flex-direction: column;
}
.cta__graphic-card--narrow {
  width: 140px;
  height: 140px;
}
.cta__graphic-card-bar {
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  height: 28px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
}
.cta__graphic-card-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
}
.cta__graphic-card-body {
  flex: 1;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.cta__graphic-line {
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.12);
}
.cta__graphic-line.accent {
  background: rgba(43,92,230,0.55);
  width: 60%;
}
.cta__graphic-line.short { width: 40%; }
.cta__graphic-card-map {
  width: 100%;
  height: 100%;
  position: relative;
  background: rgba(43,92,230,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta__graphic-card-map::after {
  content: '';
  width: 50%; height: 50%;
  border: 1.5px solid rgba(43,92,230,0.5);
  border-radius: var(--radius-sm);
  background: rgba(43,92,230,0.15);
}
.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: var(--space-20) var(--space-12);
  border-radius: var(--radius-xl);
  /* Hero-matched dynamic gradient — same palette as the hero glow */
  background:
    radial-gradient(ellipse 70% 70% at 65% 45%, rgba(0,90,215,0.38) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 15% 80%, rgba(0,40,130,0.25) 0%, transparent 70%),
    linear-gradient(162deg, #081629 0%, #0c2a58 52%, #081629 100%);
  background-size: 200% 200%;
  animation: cta-glow 20s ease-in-out infinite;
  overflow: hidden;
  isolation: isolate;
}
@keyframes cta-glow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .cta__inner { animation: none; }
}
.cta__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* subtle grid overlay matching hero */
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 65% at 55% 25%, black 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 65% at 55% 25%, black 20%, transparent 100%);
}
.cta__title { color: var(--text-inverse); }
.cta__body {
  color: rgba(255,255,255,0.72);
  font-size: 1.0625rem;
  max-width: 640px;
}
.cta__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; }

/* Glass-pill primary CTA — dark edition matching the nav/hero "Book a Demo" */
.btn--cta-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(13, 28, 52, 0.42);
  color: #ffffff;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 240ms ease, background-color 240ms ease, transform 200ms ease, color 240ms ease, box-shadow 240ms ease;
}
.btn--cta-primary::after {
  content: "→";
  font-weight: 400;
  transition: transform 200ms ease;
}
.btn--cta-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(80% 110% at 50% -30%, rgba(255,255,255,0.40), rgba(255,255,255,0) 60%),
    radial-gradient(50% 80% at 50% -10%, rgba(255,255,255,0.20), rgba(255,255,255,0) 70%),
    linear-gradient(115deg,
      transparent 35%,
      rgba(255,255,255,0.40) 48%,
      rgba(255,255,255,0.80) 50%,
      rgba(255,255,255,0.40) 52%,
      transparent 65%);
  background-size: auto, auto, 220% 100%;
  background-position: 0 0, 0 0, 130% 0;
  background-repeat: no-repeat;
  opacity: 0.6;
  transition: opacity 280ms ease, transform 320ms cubic-bezier(0.4, 0, 0.2, 1), background-position 720ms cubic-bezier(0.4, 0, 0.2, 1);
}
.btn--cta-primary:hover {
  background-color: rgba(13, 28, 52, 0.58);
  border-color: rgba(255, 255, 255, 0.40);
  color: #ffffff;
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24);
}
.btn--cta-primary:hover::before {
  opacity: 1;
  transform: translateY(8%) scale(1.05);
  background-position: 0 0, 0 0, -30% 0;
}
.btn--cta-primary:hover::after { transform: translateX(2px); }
.btn--cta-primary:active {
  background-color: rgba(13, 28, 52, 0.72);
  transform: scale(0.985);
}

.btn--cta-secondary {
  background: transparent;
  color: #fff;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.4);
}
.btn--cta-secondary:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.7);
}

/* === FOOTER === */
.footer {
  background: var(--bg-deep);
  color: rgba(255,255,255,0.55);
  padding: var(--space-16) 0 var(--space-8);
}
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-10);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__nav {
  display: flex;
  gap: var(--space-16);
  flex-wrap: wrap;
  flex: 1;
}
.footer__col { min-width: 0; }
.footer__col-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-inverse);
  margin-bottom: var(--space-4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__link {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
  transition: color var(--transition-fast);
}
.footer__link:hover { color: var(--text-inverse); }
.footer__link--external {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.footer__ext-icon {
  opacity: 0.55;
  transition: opacity var(--transition-fast);
  flex-shrink: 0;
}
.footer__link--external:hover .footer__ext-icon { opacity: 1; }
.footer__subheading {
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer__socials {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
  align-items: flex-start;
}
.footer__social {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
  color: var(--blue-700);
  cursor: pointer;
}
.footer__social:hover {
  background: #e9eef5;
  color: var(--blue-700);
}
.footer__social:active,
.footer__social:focus-visible {
  background: var(--blue-500);
  color: #ffffff;
  outline: none;
}

.footer__middle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-8) 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__logo { display: inline-flex; }
.footer__logo-img {
  height: 32px;
  width: auto;
  display: block;
}

.footer__newsletter-form {
  display: flex;
  gap: var(--space-2);
  flex: 0 1 420px;
  max-width: 420px;
}
.footer__newsletter-input {
  flex: 1;
  padding: 10px 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  color: var(--text-inverse);
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast);
  min-width: 0;
}
.footer__newsletter-input::placeholder { color: rgba(255,255,255,0.35); }
.footer__newsletter-input:focus {
  outline: none;
  border-color: rgba(255,255,255,0.3);
}
.footer__newsletter-btn {
  padding: 10px 20px;
  background: #005ad7;
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
  font-family: var(--font-sans);
}
.footer__newsletter-btn:hover { background: #004bbf; }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-6);
  font-size: 0.8125rem;
}
.footer__legal { display: flex; gap: var(--space-6); }


/* === TYPOLOGY TABS (VP2) === */
.typo-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-10);
  flex-wrap: wrap;
}
.typo-tab-btn {
  padding: 9px 20px;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  border: 1.5px solid var(--border-light);
  background: var(--bg-white);
  transition: all var(--transition-fast);
  cursor: pointer;
}
.typo-tab-btn.active, .typo-tab-btn:hover {
  border-color: var(--blue-500);
  color: var(--blue-600);
  background: var(--blue-50);
}
.typo-panel {
  display: none;
}
.typo-panel.active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
.typo-panel__label { margin-bottom: var(--space-3); }
.typo-panel__title {
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
  color: var(--text-primary);
}
.typo-panel__body {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: var(--space-6);
}
.typo-panel__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--blue-500);
  transition: color var(--transition-fast);
}
.typo-panel__cta:hover { color: var(--blue-700); }
.typo-panel__cta svg { transition: transform var(--transition-fast); }
.typo-panel__cta:hover svg { transform: translateX(3px); }
.typo-panel__visual {
  background: var(--earth-200);
  border-radius: var(--radius-xl);
  aspect-ratio: 4/3;
  border: 1px solid var(--border-medium);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === CUBS / TECHNOLOGY SECTION === */
.tech__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
.tech__trademark {
  font-size: 0.625rem;
  vertical-align: super;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tech__body {
  color: var(--text-secondary);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-bottom: var(--space-8);
}
.tech__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.tech__point {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.9375rem;
  color: var(--text-secondary);
}
.tech__point-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue-500);
  flex-shrink: 0;
  margin-top: 8px;
}
.tech__visual {
  background: var(--bg-deep);
  border-radius: var(--radius-xl);
  aspect-ratio: 4/3;
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  gap: var(--space-4);
  position: relative;
}
.tech__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 80%, rgba(43,92,230,0.25) 0%, transparent 70%);
  pointer-events: none;
}
.tech-visual-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.tech-visual-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  letter-spacing: -0.015em;
}
.tech-visual-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  justify-content: center;
}
.tech-visual-row {
  height: 20px;
  border-radius: 3px;
  background: rgba(255,255,255,0.07);
  position: relative;
  overflow: hidden;
}
.tech-visual-row-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--blue-500), #4d98ff);
  transform-origin: left;
  animation: bar-grow 1.2s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes bar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.tech-visual-row:nth-child(1) .tech-visual-row-fill { animation-delay: .05s; }
.tech-visual-row:nth-child(2) .tech-visual-row-fill { animation-delay: .15s; }
.tech-visual-row:nth-child(3) .tech-visual-row-fill { animation-delay: .25s; }
.tech-visual-row:nth-child(4) .tech-visual-row-fill { animation-delay: .35s; }
.tech-visual-row:nth-child(5) .tech-visual-row-fill { animation-delay: .45s; }

/* === QUOTE CARDS === */
.quotes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.quote-card {
  background: #F0F6FC;
  border: 0;
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-12) var(--space-10);
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: background var(--transition-fast);
  position: relative;
}
.quote-card:hover {
  /* background unchanged; border + glow are handled by the unified card-hover rule */
}
.quote-card__mark {
  font-size: 5rem;
  line-height: 0.8;
  color: var(--blue-500);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  user-select: none;
  opacity: 0.18;
  margin-bottom: var(--space-5);
  display: block;
}
.quote-card__text {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-primary);
  font-weight: 500;
  flex: 1;
}
.quote-card__attr {
  margin-top: var(--space-6);
  padding-top: 0;
}
.quote-card__name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}
.quote-card__company {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* === FAQ === */
.faq__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-light);
}
.faq__item {
  border-bottom: 1px solid var(--border-light);
}
.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-sans);
  transition: color var(--transition-fast);
}
.faq__question:hover { color: var(--blue-600); }
.faq__icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border-medium);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.faq__icon svg {
  transition: transform var(--transition-base), color var(--transition-base);
}
.faq__question:hover .faq__icon { border-color: var(--blue-500); }
.faq__item.open .faq__icon {
  background: var(--blue-500);
  border-color: var(--blue-500);
  color: #ffffff;
}
.faq__item.open .faq__icon svg { transform: rotate(45deg); color: #ffffff; }
.faq__answer {
  display: none;
  padding-bottom: var(--space-6);
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 760px;
}
.faq__item.open .faq__answer { display: block; }

/* === ANIMATIONS === */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.8); }
}
@keyframes blink-soft {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
@keyframes svg-rise {
  from { opacity: 0.2; transform: translateY(6px); }
  to   { opacity: 0.6; transform: translateY(0); }
}
@keyframes svg-draw {
  0%   { stroke-dashoffset: 200; opacity: 0; }
  30%  { opacity: 1; }
  80%  { stroke-dashoffset: 0; opacity: 0.8; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes bounce-down {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* Hero eyebrow accent dot — pulsing */
.hero__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4d98ff;
  display: inline-block;
  animation: pulse-dot 2s ease infinite;
}

/* Hero pill eyebrow */
.hero__eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,90,215,0.18);
  border: 1px solid rgba(0,90,215,0.35);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(100,180,255,0.9);
  width: fit-content;
}

/* === PROJECT CONVERSION METRICS (dark section) === */
.pc-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}
.pc-metric {
  padding: var(--space-8);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  text-align: left;
}
.pc-metric__value {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #ffffff;
  margin-bottom: var(--space-4);
}
.pc-metric__unit {
  font-size: 0.6em;
  font-weight: 700;
  color: rgba(122,182,255,0.85);
  margin-left: 2px;
}
.pc-metric__label {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.55;
}
@media (max-width: 900px) { .pc-metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pc-metrics { grid-template-columns: 1fr; } }

/* === CUBS ENGINE DATA-GRAPH VISUAL (index page) — transparent, larger, livelier === */
.cubs-graph {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  background: transparent;
  overflow: visible;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
}
.cubs-graph__scene {
  width: 100%;
  height: 100%;
  perspective: 1800px;
  perspective-origin: 50% 42%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cubs-graph__stage {
  position: relative;
  width: 110%;
  height: 110%;
  margin: -5%;
  transform-style: preserve-3d;
  animation: cubs-graph-sway 14s ease-in-out infinite;
}
.cubs-graph__layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cubs-graph__bg-layer { transform: translateZ(-260px); opacity: 0.35; }
.cubs-graph__fg-layer { transform: translateZ(80px); }
.cubs-graph-flow {
  stroke-dasharray: 3 6;
  animation: cubs-graph-flow 1.3s linear infinite;
}
.cubs-graph-breathe { animation: cubs-graph-line-breathe 2.4s ease-in-out infinite; }
@keyframes cubs-graph-sway {
  0%, 100% { transform: rotateY(-14deg) rotateX(5deg); }
  50%      { transform: rotateY(14deg)  rotateX(2deg); }
}
@keyframes cubs-graph-flow { to { stroke-dashoffset: -180; } }
@keyframes cubs-graph-line-breathe {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 0.25; }
}

/* CTA animated SVG blocks (optional decorative) */
.cta-svg-block { fill: none; stroke: rgba(255,255,255,0.2); stroke-width: 1.5; }
.cta-svg-block.b1 { animation: svg-rise 3s 0s ease-in-out infinite alternate; }
.cta-svg-block.b2 { animation: svg-rise 3s .3s ease-in-out infinite alternate; }
.cta-svg-block.b3 { animation: svg-rise 3s .6s ease-in-out infinite alternate; }
.cta-svg-block.b4 { animation: svg-rise 3s .9s ease-in-out infinite alternate; }
.cta-svg-block.b5 { animation: svg-rise 3s 1.2s ease-in-out infinite alternate; }
.cta-svg-block.b6 { animation: svg-rise 3s 1.5s ease-in-out infinite alternate; }
.cta-svg-block.b7 { animation: svg-rise 3s 1.8s ease-in-out infinite alternate; }
.cta-svg-line { fill: none; stroke: rgba(0,90,215,0.5); stroke-width: 1.5; stroke-dasharray: 200; stroke-dashoffset: 200; animation: svg-draw 4s ease forwards infinite; }
.cta-svg-line.l1 { animation-delay: .5s; }
.cta-svg-line.l2 { animation-delay: 1.2s; }

/* === MOBILE NAV (always-defined; visibility controlled below) === */
.nav__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: rgba(255,255,255,0.9);
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}
.nav.scrolled .nav__hamburger { color: var(--text-primary); }
.nav__hamburger:hover { background: rgba(255,255,255,0.1); }
.nav.scrolled .nav__hamburger:hover { background: var(--earth-100); }
.nav__hamburger .ham-icon { display: block; }
.nav__hamburger .close-icon { display: none; }
.nav--mobile-open .nav__hamburger .ham-icon { display: none; }
.nav--mobile-open .nav__hamburger .close-icon { display: block; }

.nav__mobile-panel {
  display: none;
  position: fixed;
  /* sits just below the floating pill: nav.top + 24 (padding) + 60 (pill) + 12 (gap) */
  top: calc(var(--nav-pill-top, 0px) + 96px);
  left: var(--space-4);
  right: var(--space-4);
  max-height: calc(100vh - var(--nav-pill-top, 0px) - 96px - var(--space-4));
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 40px rgba(13,36,64,0.18);
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(200,220,245,0.5);
  z-index: 190;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, top 280ms cubic-bezier(0.4, 0, 0.2, 1), max-height 0.3s ease;
}
/* Track the nav-pill position when the breaking-news banner pushes nav down */
body.has-breaking { --nav-pill-top: 40px; }
body.has-breaking.is-scrolled { --nav-pill-top: 0px; }
.nav--mobile-open .nav__mobile-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.nav__mobile-content {
  padding: var(--space-5) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 560px;
  margin: 0 auto;
}
.nav__mobile-section { display: flex; flex-direction: column; }
.nav__mobile-section-title {
  position: relative;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text-primary, #0d2440);
  padding: var(--space-3) 32px var(--space-3) 4px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 0;
  cursor: pointer;
  user-select: none;
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.nav__mobile-section-title::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 1.75px solid currentColor;
  border-bottom: 1.75px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.5;
}
.nav__mobile-section.is-open .nav__mobile-section-title::after {
  transform: translateY(-30%) rotate(-135deg);
  opacity: 0.85;
}
/* Collapsible body via grid-template-rows trick — animates smoothly */
.nav__mobile-section__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nav__mobile-section.is-open .nav__mobile-section__body {
  grid-template-rows: 1fr;
}
.nav__mobile-section__body > div {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.nav__mobile-link {
  display: block;
  padding: 10px 4px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.nav__mobile-link:hover { color: var(--blue-600); }
.nav__mobile-link--standalone {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue-500);
  padding: var(--space-2) 4px;
  border-bottom: 1.5px solid var(--blue-500);
}
.nav__mobile-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: 0;
}
/* Plain links inside the mobile footer (e.g. Pricing) match the
   section-title scale so they sit alongside Platform / Solutions / etc. */
.nav__mobile-footer .nav__mobile-link:not(.nav__mobile-cta) {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary, #0d2440);
  padding: var(--space-3) 4px;
  border-bottom: 1px solid var(--border-light);
}
.nav__mobile-cta { width: 100%; text-align: center; justify-content: center; }

/* === RESPONSIVE BREAKPOINTS === */

/* ≤1024px — tablet: collapse two-column visuals */
@media (max-width: 1024px) {
  .hero__content { max-width: 600px; }
  .tech__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .tech__visual { display: none; }
  .footer__nav { gap: var(--space-10); }
  .cta__graphic { display: none; }
  .layout-fam__grid { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .plugin-spec-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ≤900px — small tablet: card grids stack */
@media (max-width: 900px) {
  .how__cards { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .typo-cards { grid-template-columns: 1fr !important; max-width: 480px; margin-left: auto; margin-right: auto; }
  .connector-cards { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
  .vp-cards { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
  .connector-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ≤840px — hamburger appears, full nav hides */
@media (max-width: 840px) {
  .nav > .container { padding: 0 var(--space-5); max-width: 100%; }
  .nav__inner {
    display: flex;
    justify-content: space-between;
    padding: 0 var(--space-5);
    gap: var(--space-3);
  }
  .nav__menu { display: none; }
  .nav__actions { display: none; }
  .nav__hamburger { display: flex; }
  .nav__mobile-panel { display: block; }
}
@media (max-width: 480px) {
  .nav > .container { padding: 0 var(--space-4); }
  .nav__inner { padding: 0 var(--space-4); }
}

/* ≤768px — phone: typography, padding, single-col layouts */
@media (max-width: 768px) {
  .container { padding: 0 var(--space-5); }
  .section { padding: var(--space-16) 0; }
  .section__header,
  .section__header--center { margin-bottom: var(--space-10); max-width: 100%; }

  /* Hero */
  .hero { padding-top: 100px; }
  .hero__body { padding: var(--space-12) 0 var(--space-10); }
  .hero__content { gap: var(--space-5); }
  .hero__actions-row { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .hero__actions-row .btn { width: 100%; justify-content: center; }
  .hero__proof-strip { gap: var(--space-6); flex-wrap: wrap; }
  .hero__threejs-canvas { opacity: 0.35; }
  .hero__threejs-label { display: none; }
  .hero__trust { padding: 24px 0; }
  .hero__trust-logos img { margin: 0 36px; height: 26px; }
  .hero__trust-logos span { height: 30px; padding: 0 14px; font-size: 0.75rem; }

  /* VP cards — tighter padding on mobile */
  .vp-card { padding: var(--space-7); }
  .vp-card__title { font-size: 1.0625rem; }
  .vp-card__body { font-size: 0.9375rem; }

  /* How cards already stacked above */
  .how__card-body { padding: var(--space-5) var(--space-5) var(--space-6); }

  /* Typology cards — keep readable padding */
  .typo-card { padding: var(--space-8) var(--space-7) var(--space-7); gap: var(--space-5); }
  .typo-card__icon { width: 80px; height: 80px; }
  .typo-card__icon img { width: 80px; height: 80px; }
  .typo-card__title { font-size: 1.25rem; }
  .typo-card__body { gap: var(--space-2); }

  /* Connector cards on connectors.html */
  .connector-card { padding: var(--space-6) var(--space-6) var(--space-7); }
  .connector-card__footer { flex-direction: column; gap: var(--space-3); }
  .connector-card__footer .btn { width: 100%; }

  /* Tech / CUBS section */
  .tech__points { gap: var(--space-3); }

  /* CTA card — extra breathing room on mobile */
  .cta__inner {
    gap: var(--space-6);
    padding: var(--space-12) var(--space-6);
    border-radius: var(--radius-lg);
  }
  .cta__title { font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.15; }
  .cta__body { font-size: 1rem; }
  .cta__actions { width: 100%; }
  .cta__actions .btn { width: 100%; justify-content: center; }
  /* Section padding inside the CTA section gets a tad more side gap */
  .cta-section { padding: var(--space-10) 0 var(--space-12); }
  .cta__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .cta__actions .btn { width: 100%; justify-content: center; }

  /* FAQ */
  .faq__question { padding: 18px 0; font-size: 0.9375rem; }

  /* Section chips on typology pages */
  .outcome-chips { flex-direction: column; }
  .layout-fam__grid { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: 1fr; }
  .comp-grid { grid-template-columns: 1fr; }
  .plugin-spec-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-strip { flex-direction: column; align-items: flex-start; gap: var(--space-6); padding: var(--space-8) 0; }

  /* Footer */
  .footer__top { flex-direction: column; gap: var(--space-8); }
  .footer__nav { gap: var(--space-8); }
  .footer__socials { align-self: flex-start; }
  .footer__middle { flex-direction: column; align-items: stretch; gap: var(--space-5); }
  .footer__newsletter-form { max-width: 100%; flex: 1 1 auto; }
  .footer__bottom { flex-direction: column; gap: var(--space-4); text-align: center; align-items: center; }
  .footer__legal { flex-wrap: wrap; justify-content: center; }
}

/* ≤640px — small phone */
@media (max-width: 640px) {
  .container { padding: 0 var(--space-4); }
  .section { padding: var(--space-14, 56px) 0; }
  .typo-xlink-grid { grid-template-columns: 1fr; }
  .quote-card { padding: var(--space-6) var(--space-6) var(--space-7); }
  .typo-card { padding: var(--space-7) var(--space-6) var(--space-6); }
  .typo-card__icon, .typo-card__icon img { width: 72px; height: 72px; }
  .typo-card__title { font-size: 1.125rem; }
  .connector-grid { grid-template-columns: 1fr; }
  .plugin-spec-grid { grid-template-columns: 1fr; }
  /* Inline overrides on typology pages may force 2-col grid; collapse here */
  .typo-cards[style*="repeat(2"] { grid-template-columns: 1fr !important; max-width: 100% !important; }
}

/* ≤480px — tightest scale */
@media (max-width: 480px) {
  .nav__logo img { height: 22px; }
  .vp-card { padding: var(--space-6); }
  .hero-media__placeholder { padding: var(--space-6); }
  .quote-card__text { font-size: 0.9375rem; }
}

/* ═════════════════════════════════════════════════════════════════════════
   BLOG PAGE — tag filter, featured top-3, newsletter, all-posts grid
   ═════════════════════════════════════════════════════════════════════════ */

.blog-filter-bar {
  background: var(--bg-white);
  padding: var(--space-5) 0;
}
/* Full-width liquid-glass tab strip — replaces the old pill row.
   Active tab gets a frosted white pill on a translucent blue glass track. */
.blog-tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  border-radius: var(--radius-full);
  background:
    radial-gradient(120% 200% at 30% -40%, rgba(255,255,255,0.20), rgba(255,255,255,0) 60%),
    radial-gradient(100% 200% at 80% 140%, rgba(0,90,215,0.10), rgba(0,90,215,0) 65%),
    rgba(13, 36, 64, 0.05);
  border: 1px solid rgba(13, 36, 64, 0.08);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.blog-tag {
  position: relative;
  appearance: none;
  flex: 1 1 0;
  min-width: 120px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-transform: none;
  padding: 14px 20px;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: color 200ms ease;
  z-index: 0;
}
.blog-tag:hover { color: var(--text-primary); }
.blog-tag::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: var(--radius-full);
  background: transparent;
  z-index: -1;
  transition: background 240ms ease, box-shadow 240ms ease;
}
.blog-tag:hover::before {
  background: rgba(255,255,255,0.45);
}
.blog-tag--active { color: var(--text-primary); }
.blog-tag--active::before {
  background:
    radial-gradient(80% 120% at 50% -20%, rgba(255,255,255,0.95), rgba(255,255,255,0) 60%),
    rgba(255,255,255,0.92);
  box-shadow:
    0 4px 14px rgba(13,36,64,0.10),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(13,36,64,0.04);
}
.blog-tag--active:hover::before {
  background:
    radial-gradient(80% 120% at 50% -20%, rgba(255,255,255,1), rgba(255,255,255,0) 60%),
    rgba(255,255,255,0.96);
}
@media (max-width: 720px) {
  .blog-tabs { gap: 2px; padding: 5px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .blog-tag { flex: 0 0 auto; min-width: 0; padding: 12px 16px; font-size: 0.875rem; }
}

.blog-featured-section {
  background: var(--bg-white);
  padding: var(--space-10) 0 var(--space-8);
}
.blog-featured-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.blog-featured-card {
  background: #f4f8fd;
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background var(--transition-base), border-color var(--transition-base);
}
.blog-featured-card:hover {
  background: #eaf1fa;
  border-color: rgba(13,36,64,0.10);
}
.blog-featured-card__image {
  display: block;
  aspect-ratio: 3 / 1;
  background: linear-gradient(135deg, var(--blue-100) 0%, var(--earth-200) 100%);
  overflow: hidden;
}
.blog-featured-card__image > img,
.blog-featured-card > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* CMS-rendered featured cards use an <a> with inline aspect-ratio; lock it
   here too so the box always matches even when the inline style is dropped */
.blog-featured-card > a[class="blog-featured-card__image"],
.blog-featured-card > a:not([class]) {
  aspect-ratio: 3 / 1;
}
.blog-featured-card__body {
  padding: var(--space-7) var(--space-8) var(--space-8);
}
.blog-featured-card__tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue-700);
  background: rgba(0, 90, 215, 0.10);
  padding: 3px 10px;
  border-radius: 999px;
  margin: 0 0 var(--space-4);
  align-self: flex-start;
}
.blog-featured-card__title {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0;
}
.blog-featured-card__body { display: flex; flex-direction: column; }

.blog-newsletter-section {
  background: var(--bg-white);
  padding: var(--space-4) 0 var(--space-10);
}
.blog-newsletter {
  background: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-500) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
  color: #ffffff;
  box-shadow: 0 10px 32px rgba(13,36,64,0.18);
}
.blog-newsletter__text { max-width: 520px; }
.blog-newsletter__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 var(--space-2);
}
.blog-newsletter__body {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.55;
  margin: 0;
}
.blog-newsletter__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 320px;
  max-width: 440px;
}
.blog-newsletter__row {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
}
.blog-newsletter__row .btn {
  flex: 0 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  white-space: nowrap;
}
.blog-newsletter__input {
  flex: 1;
  min-width: 0;
  padding: 11px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  font: inherit;
  font-size: 0.9375rem;
  color: #ffffff;
}
.blog-newsletter__input::placeholder { color: rgba(255,255,255,0.55); }
.blog-newsletter__input:focus {
  outline: none;
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
}
.blog-newsletter__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.92);
  line-height: 1.45;
  cursor: pointer;
}
.blog-newsletter__consent input[type="checkbox"] {
  margin-top: 2px;
  accent-color: #ffffff;
  flex-shrink: 0;
}
.blog-newsletter__consent a {
  color: #ffffff;
  text-decoration: underline;
}
.blog-newsletter__consent a:hover { opacity: 0.85; }

.blog-all-section {
  background: var(--bg-white);
  padding-top: 0;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.blog-card {
  background: #F0F6FC;
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background var(--transition-base), border-color var(--transition-base);
}
.blog-card:hover {
  background: #f1f1f3;
  border-color: rgba(13,36,64,0.10);
}
.blog-card__image {
  display: block;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--blue-100) 0%, var(--earth-200) 100%);
  overflow: hidden;
}
.blog-card__image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.blog-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog-card__tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue-700);
  background: rgba(0, 90, 215, 0.10);
  padding: 4px 10px;
  border-radius: 999px;
  margin: 0 0 var(--space-4);
  align-self: flex-start;
}
.blog-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.blog-card__excerpt {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-5);
}
.blog-card__date {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: auto 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
}
.blog-all-note {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-top: var(--space-8);
}
.blog-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--space-10);
}
.blog-load-more {
  appearance: none;
  border: 1px solid var(--border-medium);
  background: var(--bg-white);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.blog-load-more:hover { border-color: var(--blue-400); color: var(--blue-500); }
.blog-load-more:disabled {
  cursor: default;
  color: var(--text-muted);
  border-color: var(--border-light);
  background: transparent;
}

@media (max-width: 960px) {
  .blog-featured-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .blog-featured-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-newsletter { flex-direction: column; align-items: stretch; padding: var(--space-6); }
  .blog-newsletter__form { max-width: 100%; }
  .blog-newsletter__row { flex-direction: column; }
  .blog-newsletter__form .btn { width: 100%; justify-content: center; }
}

/* ═════════════════════════════════════════════════════════════════════════
   BLOG POST PAGE — single post template
   ═════════════════════════════════════════════════════════════════════════ */

.post-hero {
  position: relative;
  background: #081629;
  padding: 120px 0 var(--space-20);
  overflow: hidden;
}
.post-hero > .container { position: relative; z-index: 1; }
.post-hero__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255,255,255,0.6);
  font-size: 0.875rem;
  margin-bottom: var(--space-8);
  transition: color var(--transition-fast);
}
.post-hero__back:hover { color: rgba(255,255,255,0.9); }
.post-hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
}
.post-hero__meta--bottom {
  margin-top: var(--space-5);
  margin-bottom: 0;
}
.post-hero__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(122,174,224,0.4);
  background: rgba(122,174,224,0.12);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #a8cef5;
}
.post-hero__dot { color: rgba(255,255,255,0.25); }
.post-hero__date {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.5);
}
.post-hero__read-time {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.5);
}
.post-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.025em;
  max-width: 800px;
}
.post-hero__image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-top: var(--space-12);
  background: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-500) 100%);
}
.post-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.post-layout {
  background: var(--bg-white);
  padding: var(--space-16) 0 var(--space-24);
}

/* WordPress-rendered post content — fills the standard .container width so
   it aligns with the rest of the site (feasibility, project-conversion etc). */
.post-body {
  max-width: 100%;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--text-primary);
}
.post-body img,
.post-body figure,
.post-body video,
.post-body iframe { max-width: 100%; }
.post-body > * + * { margin-top: var(--space-5); }
.post-body > h2,
.post-body > h3,
.post-body > h4 { margin-top: var(--space-12); }

.post-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}
.post-body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-top: var(--space-10);
  margin-bottom: var(--space-2);
}
.post-body h4 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
  margin-top: var(--space-8);
  margin-bottom: var(--space-2);
}
.post-body p { margin: 0 0 var(--space-5); }
.post-body p:last-child { margin-bottom: 0; }

.post-body a {
  color: var(--blue-500);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}
.post-body a:hover { color: var(--blue-600); }

.post-body ul,
.post-body ol {
  padding-left: var(--space-7);
  margin: var(--space-5) 0;
}
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { margin-bottom: var(--space-2); line-height: 1.7; }
.post-body li:last-child { margin-bottom: 0; }
.post-body li > ul,
.post-body li > ol { margin: var(--space-2) 0; }

.post-body blockquote,
.post-body .wp-block-quote {
  border-left: 3px solid var(--blue-500);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-8) 0;
  background: var(--blue-50);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.post-body blockquote p,
.post-body .wp-block-quote p {
  font-size: 1.125rem;
  font-style: italic;
  color: var(--text-secondary);
  margin: 0;
}
.post-body blockquote cite,
.post-body .wp-block-quote cite {
  display: block;
  margin-top: var(--space-3);
  font-size: 0.875rem;
  font-style: normal;
  color: var(--text-muted);
}

.post-body .wp-block-pullquote {
  border-top: 2px solid var(--blue-500);
  border-bottom: 2px solid var(--blue-500);
  border-left: none;
  padding: var(--space-8) 0;
  margin: var(--space-10) 0;
  background: transparent;
  border-radius: 0;
  text-align: center;
}
.post-body .wp-block-pullquote p {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  font-style: normal;
  color: var(--text-primary);
}

.post-body figure,
.post-body .wp-block-image {
  margin: var(--space-8) 0;
}
.post-body figure img,
.post-body .wp-block-image img {
  border-radius: var(--radius-lg);
  width: 100%;
  height: auto;
}
.post-body figcaption,
.post-body .wp-element-caption {
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-2);
  line-height: 1.5;
}

.post-body img {
  border-radius: var(--radius-lg);
  max-width: 100%;
  height: auto;
}

.post-body .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.post-body .alignleft  { float: left;  margin: 0 var(--space-6) var(--space-4) 0; max-width: 45%; }
.post-body .alignright { float: right; margin: 0 0 var(--space-4) var(--space-6); max-width: 45%; }

.post-body hr,
.post-body .wp-block-separator {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: var(--space-10) 0;
}

.post-body code {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.875em;
  background: var(--blue-50);
  color: var(--text-secondary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.post-body pre {
  background: var(--bg-deep);
  color: rgba(255,255,255,0.88);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.6;
  margin: var(--space-8) 0;
}
.post-body pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

.post-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin: var(--space-8) 0;
}
.post-body th,
.post-body td {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-light);
  text-align: left;
  vertical-align: top;
}
.post-body th {
  background: var(--blue-50);
  font-weight: 700;
  color: var(--text-primary);
}
.post-body tr:nth-child(even) td { background: var(--bg-warm); }

.post-body .wp-block-embed,
.post-body .wp-block-video { margin: var(--space-8) 0; }
.post-body .wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.post-body .wp-block-embed__wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

.post-body .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0;
}
.post-body .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  background: var(--blue-500);
  color: #fff;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background var(--transition-base);
}
.post-body .wp-block-button__link:hover { background: var(--blue-600); color: #fff; }
.post-body .is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--blue-500);
  border: 2px solid var(--blue-500);
}
.post-body .is-style-outline .wp-block-button__link:hover {
  background: var(--blue-500);
  color: #fff;
}

.post-body .wp-block-columns {
  display: flex;
  gap: var(--space-6);
  margin: var(--space-8) 0;
}
.post-body .wp-block-column { flex: 1; min-width: 0; }

/* Post prev/next navigation */
.post-nav {
  border-top: 1px solid var(--border-light);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.post-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  min-width: 0;
}
.post-nav__item:not(.post-nav__item--empty):hover {
  border-color: var(--blue-300);
  box-shadow: 0 4px 16px rgba(0,90,215,0.08);
}
.post-nav__item--empty { border: none; padding: 0; pointer-events: none; }
.post-nav__item--next { flex-direction: row-reverse; }
.post-nav__arrow {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--blue-50);
  color: var(--blue-500);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.post-nav__item:hover .post-nav__arrow {
  background: var(--blue-500);
  color: #fff;
}
.post-nav__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.post-nav__item--next .post-nav__text { align-items: flex-end; }
.post-nav__label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
}
.post-nav__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-nav__item--next .post-nav__title { text-align: right; }

/* Tablet (≤768px) */
@media (max-width: 768px) {
  .post-hero { padding: var(--space-20) 0 var(--space-16); }
  .post-layout { padding: var(--space-12) 0 var(--space-20); }
  .post-body { font-size: 1rem; }
  .post-body h2 { margin-top: var(--space-10); }
  .post-body h3 { margin-top: var(--space-8); }
}

/* Mobile (≤640px) */
@media (max-width: 640px) {
  /* Hero: top padding must clear the 60px fixed nav with breathing room */
  .post-hero { padding: var(--space-20) 0 var(--space-10); }
  .post-hero__meta { flex-wrap: wrap; gap: var(--space-2); }
  .post-layout { padding: var(--space-8) 0 var(--space-12); }
  .post-body { font-size: 0.9375rem; }
  .post-body > * + * { margin-top: var(--space-4); }
  .post-body h2 { margin-top: var(--space-8); }
  .post-body h3 { margin-top: var(--space-6); }
  .post-body blockquote,
  .post-body .wp-block-quote { padding: var(--space-4); }
  .post-body pre { padding: var(--space-4); font-size: 0.8125rem; }
  .post-body .alignleft,
  .post-body .alignright { float: none; max-width: 100%; margin: var(--space-5) 0; }
  .post-body .wp-block-columns { flex-direction: column; }
  .post-body .wp-block-pullquote p { font-size: 1.0625rem; }
  /* Tables: scroll horizontally instead of overflowing */
  .post-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Nav: stack vertically, both left-aligned */
  .post-nav { grid-template-columns: 1fr; }
  .post-nav__item--next { flex-direction: row; }
  .post-nav__item--next .post-nav__text { align-items: flex-start; }
  .post-nav__item--next .post-nav__title { text-align: left; }
}

/* ═════════════════════════════════════════════════════════════════════════
   LEGAL PAGES — privacy / terms / cookies
   ═════════════════════════════════════════════════════════════════════════ */

.legal-page {
  background: var(--bg-white);
  padding: var(--space-12) 0 var(--space-16);
}
.legal-container { max-width: 780px; }
.legal-section { margin-bottom: var(--space-10); }
.legal-section:last-child { margin-bottom: 0; }
.legal-section h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
}
.legal-section h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: var(--space-6) 0 var(--space-2);
}
.legal-section h3:first-of-type { margin-top: var(--space-2); }
.legal-section p,
.legal-section li {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
.legal-section p { margin: 0 0 var(--space-3); }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
}
.legal-section li { margin-bottom: var(--space-2); }
.legal-section a {
  color: var(--blue-500);
  text-decoration: underline;
}
.legal-section a:hover { color: var(--blue-600); }

/* ═════════════════════════════════════════════════════════════════════════
   UNIFIED CARD HOVER — black border + soft black glow, no zoom.
   Targets every regular card class except .vp-card (Built for the work),
   .pricing-card (custom glass), and .typo-card (typology hub).
   ═════════════════════════════════════════════════════════════════════════ */
/* Unified card hover removed — flat cards use background-only hover */

/* ═════════════════════════════════════════════════════════════════════════
   404 PAGE
   ═════════════════════════════════════════════════════════════════════════ */
/* On the 404 page the gradient lives on <body> so it covers the whole
   viewport (including behind the nav and below the content). */
body.page-404 {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 60% at 50% 10%, rgba(0,90,215,0.32) 0%, transparent 60%),
    linear-gradient(180deg, var(--blue-700) 0%, #050b18 100%);
  background-attachment: fixed;
  color: rgba(255,255,255,0.78);
}
body.page-404 .nav { background: transparent; border: none; box-shadow: none; }
.not-found {
  position: relative;
  background: transparent;
  min-height: calc(100vh - 96px);
  padding: var(--space-12) 0;
  display: flex;
  align-items: center;
  color: inherit;
  overflow: hidden;
}
.not-found::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black, transparent 80%);
  pointer-events: none;
}
.not-found__inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: center;
}
.not-found__code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 8.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
  background: linear-gradient(135deg, #7ab6ff 0%, #ffffff 50%, #7ab6ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.not-found__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
}
.not-found__body {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
  max-width: 540px;
  margin: 0;
}
.not-found__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-3);
}
.not-found__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  justify-content: center;
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.not-found__link {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
  padding: 6px 12px;
  border-radius: 999px;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.not-found__link:hover {
  background: rgba(255,255,255,0.1);
  color: #ffffff;
}

/* ═════════════════════════════════════════════════════════════════════════
   OUTPUTS LIST — platform pages
   ═════════════════════════════════════════════════════════════════════════ */
.outputs-list { margin-top: var(--space-8); }
.outputs-list__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3) var(--space-6);
}
.outputs-list__item {
  position: relative;
  padding-left: var(--space-5);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.outputs-list__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-500);
}

/* ═════════════════════════════════════════════════════════════════════════
   ANIMATED GRADIENT TEXT HIGHLIGHT (hero headlines)
   ═════════════════════════════════════════════════════════════════════════ */
.hero-gradient {
  display: inline;
  background: linear-gradient(90deg,
    #22d3ee 0%,
    #60a5fa 25%,
    #a78bfa 50%,
    #f472b6 75%,
    #22d3ee 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: hero-gradient-shift 6s linear infinite;
}
@keyframes hero-gradient-shift {
  0%   { background-position:    0% 50%; }
  100% { background-position: -200% 50%; }
}

/* ═════════════════════════════════════════════════════════════════════════
   ENTERPRISE SECURITY — trust badges
   ═════════════════════════════════════════════════════════════════════════ */
.security-section {
  background: var(--bg-white);
  padding: var(--space-16) 0;
}
.security-badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-10);
}
@media (max-width: 640px) {
  .security-badges { grid-template-columns: 1fr; }
}
.security-badge {
  background: #F0F6FC;
  border: 0;
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  transition: background var(--transition-base), box-shadow var(--transition-base);
}
.security-badge__logo {
  width: 144px;
  height: 144px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.security-badge__logo img,
.security-badge__logo svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* Tint the BSI white mark to brand blue (~#005ad7) */
.security-badge__logo--dark img {
  filter: brightness(0) saturate(100%) invert(22%) sepia(87%) saturate(4000%) hue-rotate(212deg) brightness(91%) contrast(101%);
}
.security-badge__label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.security-badge__note {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ═════════════════════════════════════════════════════════════════════════
   VIDEO MODAL — walkthrough embed
   ═════════════════════════════════════════════════════════════════════════ */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.video-modal.is-open { display: flex; }
.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 36, 64, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}
.video-modal__dialog {
  position: relative;
  width: min(960px, 100%);
  background: #000;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  padding-top: 44px;
}
.video-modal__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.video-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-modal__close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--blue-700);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.video-modal__close:hover {
  background: var(--earth-100);
  transform: scale(1.08);
}

/* ═════════════════════════════════════════════════════════════════════════
   FEASIBILITY PAGE — workflow comparison cards
   ═════════════════════════════════════════════════════════════════════════ */
.wf-compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}
.wf-compare__card {
  background: var(--bg-white);
  border: 1px solid rgba(0,90,215,0.20);
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.wf-compare__card--podium {
  background: var(--bg-white);
  border-color: rgba(0,90,215,0.20);
}
.wf-compare__visual {
  aspect-ratio: 5 / 3;
  background: #ffffff;
  border: 0;
  border-bottom: 1px solid rgba(0,90,215,0.20);
  border-radius: 0;
  margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wf-compare__visual img,
.wf-compare__visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wf-compare__card--podium .wf-compare__visual img,
.wf-compare__card--podium .wf-compare__visual video {
  object-fit: contain;
}
.wf-compare__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue-500);
  margin: 0;
}
.wf-compare__card--traditional .wf-compare__eyebrow {
  color: var(--text-muted);
}
.wf-compare__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.3;
}
.wf-compare__body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}
@media (max-width: 768px) {
  .wf-compare { grid-template-columns: 1fr; gap: var(--space-4); }
  .wf-compare__card { padding: var(--space-6); }
  .wf-compare__visual { margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) 0; }
}

/* ═════════════════════════════════════════════════════════════════════════
   FEASIBILITY PAGE — alternating step panels
   ═════════════════════════════════════════════════════════════════════════ */
.fb-panels {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: var(--space-10);
}
.fb-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.65fr);
  gap: var(--space-10);
  align-items: center;
}
.fb-panel--flip {
  grid-template-columns: minmax(0, 0.65fr) minmax(0, 1fr);
}
.fb-panel + .fb-panel {
  padding-top: var(--space-12);
  border-top: 1px solid var(--border-light);
}
/* Site-wide section dividers — drawn at the top of every .section that
   follows another .section, centered within the section's top padding so
   the section keeps symmetrical (equal) padding before and after content. */
.section + .section > .container::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--border-medium);
  margin: calc(-1 * var(--space-10)) 0 var(--space-10);
}
@media (max-width: 768px) {
  .section + .section > .container::before {
    margin: calc(-1 * var(--space-6)) 0 var(--space-6);
  }
}
.fb-panel--flip .fb-panel__media { order: 2; }
.fb-panel--flip .fb-panel__copy  { order: 1; }
.fb-panel__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  box-shadow: 0 14px 36px rgba(13,36,64,0.12);
  aspect-ratio: 5 / 3;
}
.fb-panel__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.fb-panel__copy { display: flex; flex-direction: column; gap: var(--space-3); }
.fb-panel__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.25;
}
.fb-panel__num {
  display: inline-block;
  margin-right: var(--space-3);
  color: var(--blue-500);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.fb-panel__body {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}
.fb-panel__body strong {
  display: block;
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

/* ═════════════════════════════════════════════════════════════════════════
   PROJECT CONVERSION — Benefits and features (3-column bullet lists)
   ═════════════════════════════════════════════════════════════════════════ */
.bf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-10);
}
.bf-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.bf-col__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-light);
}
.bf-col__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.bf-col__list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.bf-col__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-500);
}
@media (max-width: 900px) {
  .bf-grid { grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (max-width: 900px) {
  .fb-panel { grid-template-columns: 1fr; gap: var(--space-5); }
  .fb-panel--flip .fb-panel__media,
  .fb-panel__media { order: 0; }
  .fb-panel--flip .fb-panel__copy,
  .fb-panel__copy { order: 1; }
  .fb-panels { gap: var(--space-10); }
}

/* ═════════════════════════════════════════════════════════════════════════
   MOBILE TIGHTENING — reduce card padding on small viewports
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .why-card        { padding: var(--space-5); gap: var(--space-3); }
  .why-card__visual { aspect-ratio: 16 / 9; }
  .comp-card__body { padding: var(--space-5) var(--space-5) var(--space-6); }
  .comp-card__visual { padding: var(--space-4); }
  .feat-card       { padding: var(--space-5); }
  .blog-card__body { padding: var(--space-4) var(--space-5) var(--space-5); }
  .blog-featured-card__body { padding: var(--space-4) var(--space-5) var(--space-5); }
  .team-card__body { padding: var(--space-4) var(--space-5) var(--space-5); }
  .metric-card     { padding: var(--space-4) var(--space-5); }
  .security-badge  { padding: var(--space-5); }
  .how__card-body  { padding: var(--space-4) var(--space-5) var(--space-5); }
  .connector-card  { padding: var(--space-5); }
}

/* ═════════════════════════════════════════════════════════════════════════
   MOBILE FOOTER — collapsible nav columns via <details>/<summary>
   ═════════════════════════════════════════════════════════════════════════ */
.footer__col-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 var(--space-3);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-inverse);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.45;
}
.footer__col-summary::-webkit-details-marker { display: none; }
.footer__col-summary::after {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 2px solid rgba(255,255,255,0.55);
  border-bottom: 2px solid rgba(255,255,255,0.55);
  transform: rotate(45deg);
  transition: transform 200ms ease;
  flex-shrink: 0;
  margin-left: var(--space-3);
}
.footer__col[open] .footer__col-summary::after {
  transform: rotate(-135deg);
}

@media (min-width: 721px) {
  /* Desktop / tablet: behave like before — always expanded, no chevron, plain title */
  .footer__col[open],
  .footer__col:not([open]) { display: block; }
  .footer__col-summary {
    cursor: default;
    pointer-events: none;
    padding: 0 0 var(--space-3);
  }
  .footer__col-summary::after { display: none; }
  /* <details> shows children only when [open]; force always-open look at desktop */
  details.footer__col > .footer__links { display: flex; }
}

@media (max-width: 720px) {
  /* Mobile: collapsed by default; expanding shows the links */
  details.footer__col {
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  details.footer__col:last-of-type {
    border-bottom: none;
  }
  details.footer__col > .footer__links {
    padding: 0 0 var(--space-4);
  }
}


/* ═════════════════════════════════════════════════════════════════════════
   PODI AI PAGE
   ═════════════════════════════════════════════════════════════════════════ */
.ai-hero {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  max-width: none;
  width: 100%;
}
.ai-hero__copy { max-width: 680px; }
.ai-hero__icon {
  flex-shrink: 0;
  width: clamp(140px, 18vw, 220px);
  height: clamp(140px, 18vw, 220px);
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 12px 32px rgba(244,254,199,0.45));
  order: 2;
  margin-left: auto;
}
.ai-hero__copy { display: flex; flex-direction: column; gap: var(--space-4); flex: 1; min-width: 0; order: 1; }
@media (max-width: 768px) {
  .ai-hero { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .ai-hero__icon { width: 120px; height: 120px; margin-left: 0; }
}

.ai-intro {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.ai-intro p {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--text-primary);
  margin: 0;
}
.ai-intro__lead {
  font-weight: 700;
}

.ai-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.ai-pillar {
  background: #F0F6FC;
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.ai-pillar__title {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}
.ai-pillar__body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}
.ai-pillar__pills {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ai-pillar__pill {
  background: #DCF85F;
  color: var(--text-primary);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 12px 18px;
  border-radius: 999px;
  letter-spacing: -0.005em;
}
.ai-pillar__pill--muted {
  background: #ECFAB9;
  color: var(--text-secondary);
}
@media (max-width: 900px) {
  .ai-pillars { grid-template-columns: 1fr; gap: var(--space-4); }
  .ai-pillar { padding: var(--space-6); }
}

/* ═════════════════════════════════════════════════════════════════════════
   FEASIBILITY BEYOND MASSING — interactive video + steps
   ═════════════════════════════════════════════════════════════════════════ */
.fbm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.65fr);
  gap: var(--space-8);
  align-items: start;
  margin-top: var(--space-10);
}
.fbm__media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #050b18;
  aspect-ratio: 5 / 3;
  box-shadow: 0 14px 36px rgba(13,36,64,0.12);
}
.fbm__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.fbm__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-self: stretch;
  justify-content: center;
}
.fbm__step {
  position: relative;
  text-align: left;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-light);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font: inherit;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: color var(--transition-fast);
}
.fbm__step:hover { color: var(--text-primary); }
.fbm__step-progress {
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--blue-500);
  transition: none;
}
.fbm__step.is-active .fbm__step-progress {
  /* Width animated by JS via inline style based on the elapsed step time */
}
.fbm__step-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
  line-height: 1.3;
  transition: color var(--transition-fast);
}
.fbm__step.is-active .fbm__step-title,
.fbm__step:hover .fbm__step-title { color: var(--text-primary); }

/* Animate the body row open/closed via grid-template-rows so the
   surrounding layout never pops — both expanding and collapsing complete
   over the same duration regardless of inner content height. */
.fbm__step-body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 360ms ease, opacity 240ms ease;
}
.fbm__step-body > * {
  min-height: 0;
  overflow: hidden;
}
.fbm__step.is-active .fbm__step-body {
  grid-template-rows: 1fr;
  opacity: 1;
}

@media (max-width: 900px) {
  .fbm { grid-template-columns: 1fr; gap: var(--space-5); }
  .fbm__media { aspect-ratio: 16 / 9; }
}

/* ═════════════════════════════════════════════════════════════════════════
   CAREERS PAGE — benefits + role cards + monday.com form embed
   ═════════════════════════════════════════════════════════════════════════ */
.careers-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
}
.careers-benefit {
  background: #F0F6FC;
  border: 0;
  border-radius: var(--radius-lg);
  padding: var(--space-7);
}
.careers-benefit__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(13,36,64,0.04);
  color: var(--blue-600, #1e3a8a);
  margin-bottom: var(--space-5);
}
.careers-benefit__num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--blue-500, #2563eb);
  line-height: 1;
  margin-bottom: var(--space-4);
}
.careers-benefit__title {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 var(--space-2) 0;
  color: var(--ink-900, #0d2440);
}
.careers-benefit__body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-700, #4b5b73);
  margin: 0;
}

.role-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-6);
  max-width: 960px;
  margin: 0 auto;
}
.role-card {
  background: #F0F6FC;
  border: 0;
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.role-card__tag {
  align-self: flex-start;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(13,36,64,0.06);
  color: var(--ink-700, #4b5b73);
}
.role-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.role-card__pill {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(13,36,64,0.06);
  color: var(--ink-700, #4b5b73);
}
.role-card__list-heading {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-900, #0d2440);
  margin: 0;
}
.role-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  color: var(--ink-900, #0d2440);
  line-height: 1.2;
}
.role-card__body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-700, #4b5b73);
  margin: 0;
}
.role-card__list {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-700, #4b5b73);
}
.role-card__cta {
  margin-top: auto;
  align-self: flex-start;
  min-height: 0;
  height: 38px;
  padding: 0 18px;
  font-size: 0.875rem;
  line-height: 1;
}

.careers-form-section { padding: var(--space-12) 0 var(--space-20); }
.careers-form-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-8);
  max-width: 1080px;
  margin: 0 auto;
  align-items: start;
}
.careers-form-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-6);
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  position: sticky;
  top: var(--space-8);
}
.careers-form-meta__row { display: flex; flex-direction: column; gap: 4px; }
.careers-form-meta__row + .careers-form-meta__row {
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-light);
}
.careers-form-meta__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}
.careers-form-meta__value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.careers-form-iframe {
  display: block;
  width: 100%;
  /* Tall enough that the form scrolls with the page rather than inside its own box */
  height: 1800px;
  border: 0;
  background: transparent;
}

/* Glass pill back-link — used in inner-hero pages (e.g. careers-apply) */
.back-pill {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 14px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.back-pill__arrow {
  display: inline-block;
  transition: transform 200ms ease;
}
.back-pill:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.36);
  color: #ffffff;
}
.back-pill:hover .back-pill__arrow {
  transform: translateX(-2px);
}
@media (max-width: 880px) {
  .careers-form-layout { grid-template-columns: 1fr; gap: var(--space-5); }
  .careers-form-meta { position: static; }
}

@media (max-width: 720px) {
  .careers-benefit { padding: var(--space-6); }
  .role-card { padding: var(--space-7); }
}

/* ═════════════════════════════════════════════════════════════════════════
   BREAKING NEWS BANNER — long pill above nav, slides up on scroll
   ═════════════════════════════════════════════════════════════════════════ */
.breaking-banner {
  position: fixed;
  top: 18px;
  left: 0; right: 0;
  z-index: 201;
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: 0 var(--space-4);
  transform: translateY(0);
  opacity: 1;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 320ms ease;
  will-change: transform, opacity;
}
.breaking-banner__inner {
  position: relative;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: min(920px, calc(100vw - var(--space-8)));
  padding: 5px 14px 5px 5px;
  border-radius: var(--radius-full);
  isolation: isolate;
  overflow: hidden;
  /* translucent white liquid glass with soft moving sheen */
  background:
    radial-gradient(140% 220% at 30% -20%, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(140% 220% at 80% 120%, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg,
      rgba(255,255,255,0.42) 0%,
      rgba(255,255,255,0.42) 100%);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow:
    0 6px 18px rgba(13,28,52,0.08),
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 0 20px rgba(255,255,255,0.30);
  color: var(--text-primary, #0d2440);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
/* Drifting specular highlight — gives the surface a slow liquid sheen */
.breaking-banner__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(115deg,
      transparent 25%,
      rgba(255,255,255,0.55) 45%,
      rgba(255,255,255,0.85) 50%,
      rgba(255,255,255,0.55) 55%,
      transparent 75%);
  background-size: 220% 100%;
  background-position: -20% 0;
  mix-blend-mode: screen;
  opacity: 0.55;
  animation: liquid-sheen 7s ease-in-out infinite;
}
/* Subtle bottom-edge refraction — light bending under the pill */
.breaking-banner__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(70% 110% at 50% 110%, rgba(200,210,225,0.10), transparent 65%);
  opacity: 0.5;
}
@keyframes liquid-sheen {
  0%   { background-position: -30% 0; }
  50%  { background-position:  60% 0; }
  100% { background-position: 130% 0; }
}
.breaking-banner__inner:hover {
  border-color: rgba(255,255,255,1);
  box-shadow:
    0 8px 22px rgba(13,28,52,0.10),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 24px rgba(255,255,255,0.40);
}
@media (prefers-reduced-motion: reduce) {
  .breaking-banner__inner::before { animation: none; }
}
.breaking-banner__tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, #a855f7 0%, #6366f1 35%, #3b82f6 65%, #a855f7 100%);
  background-size: 220% 100%;
  animation: tag-gradient 4s ease-in-out infinite;
  padding: 5px 11px;
  border-radius: 999px;
}
@keyframes tag-gradient {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .breaking-banner__tag { animation: none; }
}
.breaking-banner__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(13,28,52,0.85);
  font-weight: 500;
}
.breaking-banner__arrow {
  flex-shrink: 0;
  color: rgba(13,28,52,0.45);
  transition: transform 200ms ease, color 200ms ease;
}
.breaking-banner__inner:hover .breaking-banner__arrow {
  color: rgba(13,28,52,0.85);
  transform: translateX(2px);
}

/* Hide entirely if banner not opted-in */
body:not(.has-breaking) .breaking-banner { display: none; }

/* Push the nav down to make room for the banner */
body.has-breaking .nav { top: 46px; transition: top 280ms cubic-bezier(0.4, 0, 0.2, 1); }

/* When scrolled, banner retracts and nav returns to top */
body.has-breaking.is-scrolled .nav { top: 0; }
body.has-breaking.is-scrolled .breaking-banner {
  transform: translateY(-130%);
  opacity: 0;
  pointer-events: none;
}

/* Hide the duplicated copy on desktop (no marquee there) */
.breaking-banner__text-copy + .breaking-banner__text-copy { display: none; }

@media (max-width: 720px) {
  .breaking-banner__text { font-size: 0.75rem; }
  .breaking-banner__inner {
    padding: 4px 12px 4px 4px;
    width: 100%;
    max-width: 100%;
  }
  .breaking-banner__tag { font-size: 0.625rem; padding: 2px 8px; }
  body.has-breaking .nav { top: 40px; }

  /* Turn the long text into a continuous marquee on mobile */
  .breaking-banner__text {
    overflow: hidden;
    text-overflow: clip;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
  }
  .breaking-banner__text-track {
    display: inline-flex;
    gap: 32px;
    width: max-content;
    animation: banner-marquee 14s linear infinite;
  }
  .breaking-banner__text-copy + .breaking-banner__text-copy { display: inline; }
  .breaking-banner__text-copy { white-space: nowrap; }
  @keyframes banner-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 16px)); }
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   ISOMETRIC PODIUM ANIMATION — vp-card #1 (Replace spreadsheet feasibility)
   Build/teardown loop with two pill counters (Area, Cost).
   ═════════════════════════════════════════════════════════════════════════ */
.vp-card__graphic--iso { width: 100%; }
.iso-podium {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
  width: 100%;
}
/* Tower graphic — fills the card */
.iso-podium svg {
  display: block;
  width: 100%;
  max-width: 480px;
  max-height: 240px;
  height: auto;
  margin: calc(-1 * var(--space-4)) 0 calc(-1 * var(--space-3));
}
/* Pills row — side by side, fixed width so animating numbers don't reflow */
.iso-pills {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
  justify-content: center;
}
.iso-pill {
  padding: 8px 14px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--text-primary);
  border: 1px solid rgba(13,36,64,0.08);
  box-shadow: 0 1px 2px rgba(13,36,64,0.04);
  /* Fixed width keeps the pill stable while the number animates inside */
  width: 150px;
  min-width: 0;
  flex: 0 0 150px;
}
.iso-pill-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.iso-pill-value {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
}
@media (max-width: 720px) {
  .iso-pill { flex: 0 0 140px; width: 140px; padding: 7px 12px; }
  .iso-pill-value { font-size: 0.875rem; }
}

/* GIS LAYERS STACK ANIMATION — vp-card #2 (Bring everything into one platform) */
.vp-card__graphic--gis { width: 100%; }
.gis-stack {
  display: flex;
  justify-content: center;
  width: 100%;
}
.gis-stack svg {
  display: block;
  width: 100%;
  max-width: 480px;
  max-height: 240px;
  height: auto;
  margin: calc(-1 * var(--space-4)) 0 calc(-1 * var(--space-3));
}

/* ISOMETRIC FRAME ANIMATION — vp-card #3 (Massing to BIM) */
.vp-card__graphic--frame { width: 100%; }
.iso-frame {
  display: flex;
  justify-content: center;
  width: 100%;
}
.iso-frame svg {
  display: block;
  width: 100%;
  max-width: 480px;
  max-height: 240px;
  height: auto;
  margin: calc(-1 * var(--space-4)) 0 calc(-1 * var(--space-3));
}

/* PODI AI page — section placeholders + coming-soon pill */
.ai-context-graphic {
  margin: 0 0 var(--space-10);
}
.ai-context-graphic__ph {
  width: 100%;
  aspect-ratio: 16 / 7;
  background: #F0F6FC;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fb-panel__ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F0F6FC;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ai-pill-soon {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(168,85,247,0.12), rgba(99,102,241,0.12));
  color: var(--blue-700);
  border: 1px solid rgba(99,102,241,0.30);
}

/* ═════════════════════════════════════════════════════════════════════════
   PODI AI PAGE THEME — yellow-green / cornflower / cream palette + Anybody
   font for headers. Scoped to body.ai-page so the rest of the site is
   untouched.
   ═════════════════════════════════════════════════════════════════════════ */
.ai-page {
  --ai-yellow: #E5FF6E;
  --ai-yellow-deep: #B6D32A;
  --ai-yellow-pale: #ECFFB9;
  --ai-cream: #F4FFD8;
  --ai-blue: #99B5FF;
  --ai-grey: #F2F2F2;
}
/* Anybody display font for every header on the AI page */
.ai-page h1,
.ai-page h2,
.ai-page h3,
.ai-page .display-1,
.ai-page .display-2,
.ai-page .hero__title,
.ai-page .section__title,
.ai-page .fb-panel__title,
.ai-page .cta__title {
  font-family: "Anybody", "Figtree", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Section placeholder + fb-panel placeholders use the cream/yellow tones */
.ai-page .ai-context-graphic__ph {
  background: var(--ai-cream);
  color: rgba(40,60,20,0.55);
}
.ai-page .fb-panel__ph {
  background: var(--ai-yellow-pale);
  color: rgba(40,60,20,0.55);
}

/* Coming-soon pill — re-skin to a soft yellow capsule */
.ai-page .ai-pill-soon {
  background: var(--ai-yellow-pale);
  color: #5a6a18;
  border-color: rgba(160,180,40,0.30);
}

/* CTA — flip to yellow-on-white (contained card variant) */
.ai-page .cta-section { background: transparent; }
.ai-page .cta__inner {
  background: var(--ai-cream);
  animation: none;
  border: 1px solid rgba(160,180,40,0.30);
}
.ai-page .cta__inner::before { display: none; }
.ai-page .cta__title { color: #1c1a18; }
.ai-page .cta__body { color: rgba(28,26,24,0.72); }
.ai-page .btn--cta-primary {
  background-color: var(--ai-yellow);
  color: #1c1a18;
  border: 1px solid rgba(160,180,40,0.45);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 4px 12px rgba(180,200,40,0.30), inset 0 1px 0 rgba(255,255,255,0.40);
}
.ai-page .btn--cta-primary::before {
  background-image:
    radial-gradient(80% 110% at 50% -30%, rgba(255,255,255,0.55), rgba(255,255,255,0) 60%),
    radial-gradient(50% 80% at 50% -10%, rgba(255,255,255,0.30), rgba(255,255,255,0) 70%),
    linear-gradient(115deg,
      transparent 35%,
      rgba(255,255,255,0.50) 48%,
      rgba(255,255,255,0.90) 50%,
      rgba(255,255,255,0.50) 52%,
      transparent 65%);
}
.ai-page .btn--cta-primary:hover {
  background-color: #d8f24a;
  color: #1c1a18;
  border-color: rgba(160,180,40,0.65);
  box-shadow: 0 6px 18px rgba(180,200,40,0.40), inset 0 1px 0 rgba(255,255,255,0.55);
}
.ai-page .btn--cta-primary:active { background-color: #c8e238; }

/* AI page hero — yellow radial glow on light grey, animated.
   And CTA card — yellow radial glow on cream, animated. */
.ai-page .hero {
  background: #081629;
}
.ai-page .hero__bg-glow {
  background:
    radial-gradient(ellipse 70% 70% at 70% 40%, rgba(229,255,110,0.40) 0%, transparent 60%),
    radial-gradient(ellipse 55% 55% at 15% 80%, rgba(229,255,110,0.20) 0%, transparent 70%),
    linear-gradient(162deg, #081629 0%, #0c2a58 52%, #081629 100%);
  background-size: 200% 200%;
  animation: ai-glow 22s ease-in-out infinite;
}
/* hero__bg-grid stays the site default — light hairlines on the dark bg */
.ai-page .hero__title { color: #ffffff; }
.ai-page .hero__subtitle { color: rgba(255,255,255,0.72); }
.ai-page .hero__eyebrow { color: rgba(255,255,255,0.55); }

@keyframes ai-glow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* CTA card — yellow radial glow on cream, animated */
.ai-page .cta__inner {
  background:
    radial-gradient(ellipse 70% 70% at 65% 45%, rgba(229,255,110,0.55) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 15% 80%, rgba(229,255,110,0.35) 0%, transparent 70%),
    linear-gradient(162deg, #F4FFD8 0%, #ECFFB9 52%, #F4FFD8 100%);
  background-size: 200% 200%;
  animation: ai-glow 22s ease-in-out infinite;
  border: 1px solid rgba(160,180,40,0.30);
}
@media (prefers-reduced-motion: reduce) {
  .ai-page .hero__bg-glow,
  .ai-page .cta__inner { animation: none; }
}

/* AI hero — icon on the right of the header */
.ai-page .ai-hero__icon {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}
.ai-page .ai-hero__icon img {
  width: 80%;
  max-width: 288px;
  height: auto;
  display: block;
}
@media (max-width: 840px) {
  .ai-page .ai-hero__icon img { max-width: 176px; }
}

/* AI page — section divider line in yellow */
.ai-page .section + .section > .container::before { background: var(--ai-yellow-deep); }

/* AI hero — "New" pill with animated yellow glow beside PODI AI title */
.ai-page .ai-new-pill {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  font-family: "Anybody", "Figtree", system-ui, sans-serif;
  font-size: 0.4em;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2c3a05;
  background: var(--ai-yellow);
  padding: 6px 14px;
  border-radius: 999px;
  margin-left: 0.4em;
  position: relative;
  top: -0.2em;
  box-shadow: 0 0 0 0 rgba(229,255,110,0.7);
  animation: ai-new-pulse 2.4s ease-in-out infinite;
}
@keyframes ai-new-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229,255,110,0.65), 0 0 14px rgba(229,255,110,0.45); }
  50%      { box-shadow: 0 0 0 12px rgba(229,255,110,0), 0 0 28px rgba(229,255,110,0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-page .ai-new-pill { animation: none; }
}

/* AI page — yellow divider between stacked fb-panels */
.ai-page .fb-panel + .fb-panel { border-top-color: var(--ai-yellow-deep); }

/* MASSING-TO-BIM page — outcomes + persona grids */
.outcomes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.outcome-card {
  background: #F0F6FC;
  border: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.outcome-card__media {
  width: 100%;
  aspect-ratio: 5 / 3;
  background: #DCE7F2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: rgba(13,36,64,0.45);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.outcome-card__body {
  padding: var(--space-7) var(--space-7) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.outcome-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}
.outcome-card__lead {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 var(--space-2);
}
.outcome-card__list {
  list-style: disc;
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.persona-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.persona-card {
  background: #F0F6FC;
  border: 0;
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.persona-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
}
.persona-card__body {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 1024px) {
  .outcomes-grid, .persona-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}
.outcome-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; aspect-ratio: auto; }