/* ==========================================================================
   CyMobility Homepage — Stylesheet (v6 · Themeable + Animated)
   Light default (soft, not white) · Dark via [data-theme="dark"] toggle
   Animated radiant background · larger type · floating non-box data badges
   ========================================================================== */

/* ------------------------------ THEME TOKENS ------------------------------ */
:root {                      /* LIGHT (default, soft) */
  --bg: #e9ebf7;
  --bg-2: #e0e3f2;
  --surface: rgba(255,255,255,0.66);
  --surface-2: rgba(255,255,255,0.85);
  --panel: rgba(255,255,255,0.74);
  --panel-solid: #ffffff;
  --line: rgba(24,28,84,0.12);
  --line-2: rgba(24,28,84,0.2);
  --line-hi: rgba(58,99,200,0.55);
  --txt: #363a60;
  --txt-dim: rgba(54,58,96,0.66);
  --txt-dimmer: rgba(54,58,96,0.45);
  --heading: #12143c;
  --strong: #0c0e30;
  --accent: #3a63c8;         /* readable teal on light */
  --accent-bright: #4d7fe6;  /* glows / buttons */
  --accent-2: #6a95ec;
  --accent-3: #2f52b0;
  --purple: #5a3fb0;
  --crimson: #d80028;
  --header-bg: rgba(233,235,247,0.94);
  --blob-1: rgba(77,127,230,0.6);
  --blob-2: rgba(90,63,176,0.5);
  --blob-3: rgba(95,136,232,0.5);
  --blob-4: rgba(77,127,230,0.4);
  --blob-op: 0.4;
  --grain-op: 0.03;
  --shadow-1: 0 24px 60px rgba(30,34,90,0.14);
  --card-glow: 0 0 0 1px rgba(58,99,200,.2), 0 18px 46px rgba(30,34,90,.14);
  color-scheme: light;
}
:root[data-theme="dark"] {   /* DARK */
  /* Navy, not the old #0a0d24. That value was a desaturated blue-black, and
     every band without a background of its own fell through to it — the hero
     surround, the stats strip, the margin around the closing CTA card and the
     gap above the footer. Beside the #00003B accent bands they all read grey.
     Fixing the base fixes every fall-through at once; the bands that do set
     their own colour are unaffected. */
  --bg: #0b1538;
  --bg-2: #16123a;
  --surface: rgba(255,255,255,0.028);
  --surface-2: rgba(255,255,255,0.055);
  --panel: rgba(22,18,52,0.9);
  --panel-solid: #14122e;
  --line: rgba(255,255,255,0.09);
  --line-2: rgba(255,255,255,0.14);
  --line-hi: rgba(77,127,230,0.42);
  --txt: #c7cbe0;
  --txt-dim: rgba(199,203,224,0.62);
  --txt-dimmer: rgba(199,203,224,0.4);
  --heading: #ffffff;
  --strong: #ffffff;
  --accent: #4d7fe6;
  --accent-bright: #4d7fe6;
  --accent-2: #86a8f0;
  --accent-3: #b9ccf7;
  --purple: #6a4fc0;
  --crimson: #ff3546;
  --header-bg: rgba(13,18,64,0.94);
  --blob-1: rgba(77,127,230,0.55);
  --blob-2: rgba(90,63,176,0.65);
  --blob-3: rgba(77,127,230,0.45);
  --blob-4: rgba(90,63,176,0.4);
  --blob-op: 0.48;
  --grain-op: 0.04;
  --shadow-1: 0 24px 70px rgba(0,0,0,0.55);
  --card-glow: 0 0 0 1px rgba(77,127,230,.2), 0 18px 46px rgba(0,0,0,.5);
  color-scheme: dark;
}

:root {
  --font-disp: "Montserrat", "Segoe UI", Verdana, system-ui, sans-serif;
  --font-sans: "Segoe UI", Verdana, Geneva, Tahoma, system-ui, sans-serif;
  --font-mono: Consolas, "Segoe UI Mono", ui-monospace, Menlo, monospace;
  --fs-h1: clamp(3rem, 5.2vw + .5rem, 5.6rem);
  --fs-h2: clamp(2.25rem, 3.1vw + .6rem, 3.7rem);
  --fs-h3: clamp(1.28rem, .55vw + 1.02rem, 1.6rem);
  --fs-lede: clamp(1.16rem, .45vw + 1.02rem, 1.42rem);
  --maxw: 2160px;
  --radius: 12px;
  --radius-lg: 18px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: 180ms var(--ease);
  --t-med: 340ms var(--ease);
}

/* ------------------------------ RESET / BASE ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 88%; }
body { margin: 0; font-family: var(--font-sans); color: var(--txt); background: var(--bg);
  line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden; transition: background .5s var(--ease), color .5s var(--ease); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-disp); margin: 0 0 .5em; line-height: 1.05; letter-spacing: -0.02em; font-weight: 700; color: var(--heading); }
em.accent { font-style: italic; color: #00dddd; font-weight: 700; }
em.accent-crimson { font-style: italic; color: var(--crimson); font-weight: 700; }
strong { color: var(--strong); }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(16px, 2.2vw, 46px); }
.section { position: relative; padding: clamp(54px, 5.2vw, 96px) 0; }
.section > .container { position: relative; z-index: 2; }

/* --------------------- ANIMATED RADIANT BACKGROUND ------------------------ */
.bg-field { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(1100px 820px at 14% 20%, rgba(77,127,230,.16), transparent 60%),
    radial-gradient(1050px 820px at 86% 26%, rgba(90,63,176,.17), transparent 60%),
    radial-gradient(980px 780px at 24% 68%, rgba(90,63,176,.15), transparent 58%),
    radial-gradient(980px 780px at 80% 76%, rgba(77,127,230,.15), transparent 58%),
    radial-gradient(820px 700px at 52% 48%, rgba(77,127,230,.09), transparent 60%),
    var(--bg); }
.bg-field .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: var(--blob-op); will-change: transform; }
.bg-field .blob-1 { width: 42vw; height: 42vw; background: radial-gradient(circle, var(--blob-1), transparent 70%); top: -10%; left: -6%; animation: drift1 26s ease-in-out infinite alternate; }
.bg-field .blob-2 { width: 46vw; height: 46vw; background: radial-gradient(circle, var(--blob-2), transparent 70%); bottom: -14%; right: -8%; animation: drift2 32s ease-in-out infinite alternate; }
.bg-field .blob-3 { width: 34vw; height: 34vw; background: radial-gradient(circle, var(--blob-3), transparent 70%); top: 38%; left: 58%; animation: drift3 30s ease-in-out infinite alternate; }
.bg-field .blob-4 { width: 38vw; height: 38vw; background: radial-gradient(circle, var(--blob-4), transparent 70%); top: 60%; left: 2%; animation: drift4 34s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(20vw, 16vh) scale(1.25); } }
@keyframes drift2 { to { transform: translate(-16vw, -12vh) scale(1.15); } }
@keyframes drift3 { to { transform: translate(-26vw, 14vh) scale(1.3); } }
@keyframes drift4 { to { transform: translate(22vw, -14vh) scale(1.2); } }
.bg-field::after { content: ""; position: absolute; inset: 0; opacity: var(--grain-op);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- media ---------- */
.media { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.72) contrast(1.04) saturate(.9); transition: transform .8s var(--ease); }
.media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,8,26,.1), rgba(6,8,26,.55)), linear-gradient(120deg, rgba(77,127,230,.12), transparent 55%); }
.media:hover img { transform: scale(1.05); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; font-size: 1rem; cursor: pointer;
  position: relative; overflow: hidden; z-index: 1;
  border-radius: 6px 12px 28px; padding: 14px 28px; border: 1.5px solid transparent;
  transition: transform var(--t-fast), box-shadow var(--t-med), background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.btn span[aria-hidden] { transition: transform var(--t-fast); }
.btn:hover span[aria-hidden] { transform: translateX(3px); }
.btn-sm { padding: 10px 18px; font-size: .88rem; }
/* Buttons follow the about-page template (css/styles.css): cyan base, 6/12/28
   lozenge, a purple->navy overlay that cross-fades in on hover (::before) and a
   light shine sweep (::after). */
.btn-primary { background: linear-gradient(135deg, #4d7fe6 0%, #7fa0ee 100%); color: #00003b; box-shadow: 0 4px 20px rgba(77,127,230,.28); }
.btn-primary::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, #49299a 0%, #00003b 100%); opacity: 0; transition: opacity .5s var(--ease); }
.btn-primary::after { content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); transition: left .6s var(--ease); pointer-events: none; z-index: 1; }
.btn-primary:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(73,41,154,.35); }
.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover::after { left: 140%; }
.btn-ghost { background: transparent; border-color: #4d7fe6; color: #4d7fe6; }
.btn-ghost:hover { background: linear-gradient(135deg, #49299a 0%, #00003b 100%); border-color: transparent; color: #fff; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(73,41,154,.35); }
.arrow-link { display: inline-flex; align-items: center; gap: .45em; color: var(--accent); font-weight: 600; font-size: .96rem; transition: color var(--t-fast), gap var(--t-fast); }
.arrow-link span[aria-hidden] { transition: transform var(--t-fast); }
.arrow-link:hover { color: var(--accent-2); }
.arrow-link:hover span[aria-hidden] { transform: translateX(4px); }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- eyebrow / section head ---------- */
.eyebrow { display: inline-block; position: relative; font-family: var(--font-sans); font-size: .76rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; color: var(--accent); padding-left: 26px; margin: 0 0 22px; }
.eyebrow::before { content: ""; position: absolute; left: 0; top: .55em; width: 16px; height: 2px; background: var(--accent); }
.eyebrow .sec-num { color: var(--accent); margin-right: .5em; font-weight: 800; }
.eyebrow-center { display: block; text-align: center; padding-left: 0; }
.eyebrow-center::before { display: none; }
.section-head { max-width: 1060px; margin-bottom: clamp(30px, 3.4vw, 50px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { padding-left: 0; } .section-head.center .eyebrow::before { display: none; }
.section-title { font-size: var(--fs-h2); }
/* Audience heading: keep "…Automotive Value Chain" on one line (scales with viewport, never overflows) */
.audience .section-head { max-width: none; }
#audience-h2 { white-space: nowrap; font-size: min(var(--fs-h2), 3.2vw); }
/* Keep these section headings on a single line too (scale with viewport, never overflow) */
.urgency .section-head, .services .section-head, .platform .section-head { max-width: none; }
#urgency-h2, #services-h2, #platform-h2 { white-space: nowrap; font-size: min(var(--fs-h2), 2.75vw); }
/* EU CRA (critical deadline) timeline heading in red */
.tl-item.tl-crit h3 { color: var(--crimson); }
/* Below desktop: let long headings/subtitles wrap rather than shrink or clip.
   (Scoped to <=1024 so tablet keeps a readable, faithful layout too.) */
@media (max-width: 1024px) {
  #audience-h2, #urgency-h2, #services-h2, #platform-h2 { white-space: normal; font-size: var(--fs-h2); }
  .services .section-sub, .platform .section-sub, .why .section-sub { white-space: normal; }
  .hero h1 { white-space: normal; font-size: var(--fs-h1); }
}
.section-sub { margin: 20px 0 0; font-family: var(--font-sans); font-size: var(--fs-lede); color: var(--txt-dim); max-width: 66ch; }
.section-head.center .section-sub { margin-inline: auto; }
.section-sub strong { color: var(--accent); }
.services .section-sub, .platform .section-sub, .why .section-sub { max-width: none; }
/* Desktop only: keep these centred subtitles on a single line (they fit at >=1025px). */
@media (min-width: 1025px) { .services .section-sub, .platform .section-sub, .why .section-sub { white-space: nowrap; } }

/* ================================ HEADER ================================== */
/* Transparent over the hero; the frosted background fades in on scroll. */
.site-header { position: sticky; top: 0; z-index: 100; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid transparent; transition: background var(--t-med), -webkit-backdrop-filter var(--t-med), backdrop-filter var(--t-med), border-color var(--t-med), box-shadow var(--t-med); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-bright) 50%, transparent); opacity: 0; transition: opacity var(--t-med); }
.site-header.past-hero { background: var(--header-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color: var(--line); box-shadow: 0 10px 30px rgba(0,0,20,.14); }
.site-header.past-hero::after { opacity: .6; }
.topbar { border-bottom: 1px solid var(--line); font-size: .74rem; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 5px; }
.topbar-tag { display: inline-flex; align-items: center; gap: 9px; color: var(--accent-3); }
.tb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 8px var(--accent-bright); animation: pulse 2.6s infinite; }
.topbar-links { display: inline-flex; align-items: center; gap: 22px; }
.topbar-links a { color: var(--txt); display: inline-flex; align-items: center; gap: 6px; transition: color var(--t-fast); }
.topbar-links a:hover { color: var(--accent); }
.tb-ico { color: var(--accent); }
.tb-cert { position: relative; padding-left: 22px; color: var(--accent) !important; font-weight: 700; }
.tb-cert::before { content: "\2713"; position: absolute; left: 0; width: 15px; height: 15px; font-size: .62rem; display: grid; place-items: center; border-radius: 50%; background: rgba(77,127,230,.16); color: var(--accent); }
/* Header bar sizing — kept in lockstep with css/site-chrome.css so the homepage
   header and the interior-page header are the same bar. */
.header-inner { display: flex; align-items: center; gap: 20px; padding-block: 7px; }
/* The header's height is driven by its CTA button, so it sets the bar's size. */
.site-header .btn-sm { padding: 8px 16px; font-size: .85rem; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; transition: transform var(--t-fast), filter var(--t-fast); }
.brand:hover { transform: translateY(-1px); filter: drop-shadow(0 0 10px rgba(77,127,230,.4)); }
/* Fixed height + natural width, and never let the global img{max-width:100%} squish it */
.brand-logo { height: 14px; width: auto; max-width: none; flex-shrink: 0; }
.logo-on-dark { display: none; } .logo-on-light { display: block; }
:root[data-theme="dark"] .logo-on-dark { display: block; } :root[data-theme="dark"] .logo-on-light { display: none; }
.main-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; gap: 5px; color: var(--txt); font-weight: 600; font-size: .89rem; padding: 7px 11px; border-radius: 8px; transition: color var(--t-fast), background var(--t-fast); }
.nav-link .chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: transform var(--t-fast); }
.nav-item:hover .nav-link { color: var(--accent); background: rgba(77,127,230,.08); }
.nav-item:hover .chev { transform: rotate(180deg); }
/* Compact menus center under their own nav item; the wide Services menu anchors to the header. */
.nav-item.has-menu { position: relative; }
.nav-wide { position: static; }
.mega { position: absolute; top: calc(100% + 12px); left: 50%; z-index: 120; display: grid; grid-auto-flow: column; gap: clamp(22px, 3vw, 52px); padding: clamp(28px, 2.4vw, 40px) clamp(32px, 3vw, 46px); background: var(--panel-solid); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--shadow-1); opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(8px); pointer-events: none; transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast); }
.mega::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
/* Each column = one entry type; items of the same type stack within their column.
   Width is content-driven, so a single-type menu stays compact and multi-type menus grow wide. */
.mega-1 { width: min(480px, 92vw); grid-template-columns: 1fr; }
.mega-2 { width: min(78vw, 1160px); grid-auto-flow: row; grid-template-columns: 1fr 1fr minmax(300px, 340px); align-items: start; }
.mega-feature { width: auto; padding: 8px 12px 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; }
.mega-feature .mega-title { border-bottom: 0; padding: 6px 6px 10px; margin-bottom: 4px; }
.feat-media { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2);
  box-shadow: var(--shadow-1); margin-bottom: 13px; }
.feat-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top;
  display: block; transition: transform .5s ease; }
.feat-media:hover img { transform: scale(1.04); }
.feat-name { font-family: var(--font-disp); font-weight: 800; font-size: 1.32rem; color: var(--heading); margin: 0 0 8px; padding: 0 6px; }
.feat-desc { font-family: var(--font-sans); font-size: 1.02rem; line-height: 1.55; color: var(--txt-dim); margin: 0 0 15px; padding: 0 6px; }
.feat-link { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; color: var(--accent);
  font-family: var(--font-sans); font-weight: 700; font-size: .92rem; transition: gap var(--t-fast); }
.feat-link span { transition: transform var(--t-fast); }
.feat-link:hover span { transform: translateX(4px); }
.nav-item:hover .mega, .nav-item:focus-within .mega { opacity: 1; visibility: visible; transform: translateX(-50%); pointer-events: auto; }
.mega-col { min-width: 0; display: flex; flex-direction: column; }
.mega-title { font-family: var(--font-sans); font-size: .86rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); padding: 8px 16px 14px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
/* Dropdown link scale — kept identical in css/site-chrome.css so the menu is the
   same on every page, and trimmed by the same slight amount as the header bar. */
.mega-col a { display: block; padding: 13px 16px; border-radius: 11px; transition: background var(--t-fast); }
.mega-col a b { display: block; color: var(--heading); font-size: 1.26rem; font-weight: 700; line-height: 1.2; }
.mega-col a small { display: block; color: var(--txt-dim); font-size: 1rem; line-height: 1.5; margin-top: 4px; }
.mega-col a:hover { background: rgba(77,127,230,.1); }
.mega-col a:hover b { color: var(--accent); }
.mega-col a.mega-cta { margin: 10px 6px 2px; padding: 11px 14px; border-top: 0; text-align: center;
  position: relative; overflow: hidden; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 6px 12px 28px;
  background: linear-gradient(120deg, var(--accent-bright), var(--accent-2)); color: #00131a;
  font-family: var(--font-sans); font-weight: 800; font-size: .86rem; letter-spacing: .01em;
  box-shadow: 0 8px 20px rgba(77,127,230,.28); transition: transform var(--t-fast), box-shadow var(--t-fast), color var(--t-fast); }
.mega-col a.mega-cta::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, #49299a 0%, #00003b 100%); opacity: 0; transition: opacity .5s var(--ease); }
.mega-col a.mega-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(73,41,154,.4); }
.mega-col a.mega-cta:hover::before { opacity: 1; }
.mega-col a.mega-cta span { transition: transform var(--t-fast); }
.mega-col a.mega-cta:hover span { transform: translateX(4px); }
.header-actions { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; }
.header-login { color: var(--txt); font-weight: 600; font-size: .92rem; transition: color var(--t-fast); }
.header-login:hover { color: var(--accent); }
.theme-toggle { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); color: var(--txt); display: grid; place-items: center; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.theme-toggle:hover { color: var(--accent); border-color: var(--accent-bright); transform: translateY(-1px); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .i-moon { display: none; } .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: block; } :root[data-theme="dark"] .theme-toggle .i-sun { display: none; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 6px; background: none; border: 0; cursor: pointer; }
.nav-toggle span { width: 24px; height: 2px; background: var(--heading); border-radius: 2px; transition: .3s; }
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ================================= HERO ================================== */
/* The padding is held in variables because .hero-stage has to reach past it.
   The stage lives inside .hero-wrap so that it can take its place in the flex
   column on mobile, which means its absolute box on desktop is measured from
   .hero-wrap — inside the padding. Negative insets of exactly these values put
   it back to the full band. One source of truth, so changing the padding
   cannot leave the artwork misaligned. */
.hero {
  --hero-pt: clamp(30px, 3.4vw, 56px);
  --hero-pb: clamp(44px, 5vw, 74px);
  position: relative; overflow: hidden;
  padding: var(--hero-pt) 0 var(--hero-pb);
}
.hero-wrap { position: relative; }
/* .hero-orb and its .orb-glow / .orb-ring / .orb-media / .hero-canvas children
   are gone: the right-hand column holds no element at all now, only the hero's
   own background photograph. The desktop grid below still reserves the column,
   so nothing had to move to keep the copy off the artwork. */
.hero h1 { font-size: var(--fs-h1); letter-spacing: -0.03em; margin-top: 6px; white-space: normal; }
/* Desktop only: cap the headline so the italic line stays beside the floated orb on one line. */
@media (min-width: 1025px) { .hero h1 { font-size: min(var(--fs-h1), 5.5vw); white-space: nowrap; } }
/* Desktop hero: 2-col grid so the video sits vertically centered against the copy (no top-heavy blank gap). */
@media (min-width: 1025px) {
  .hero-wrap { display: grid; grid-template-columns: minmax(0, 1fr) clamp(420px, 44vw, 640px);
    column-gap: clamp(40px, 5vw, 72px); align-items: start; }
  #hero-h1 { grid-column: 1; grid-row: 1; white-space: normal; font-size: min(var(--fs-h1), 4.95vw); }
  .hero .sub { grid-column: 1; grid-row: 2; }
  .hero .pills { grid-column: 1; grid-row: 3; }
  .hero .cta { grid-column: 1; grid-row: 4; }
  /* Column 2 is deliberately empty and deliberately still declared. It is what
     keeps the headline and the sub-headline off the car in the background
     photograph, so the reservation has to survive the graphic that used to sit
     in it being removed. */
  .hero-stats { grid-column: 1 / -1; grid-row: 5; }
}
/* Tablet/mobile: single column — headline, then the stage, then the copy stack.
   Order 2 is the slot the hero graphic has always taken when this collapses.
   .hero-stage carries the artwork at BOTH breakpoints now; the separate static
   .hero-plate that used to serve mobile is gone, and with it the reason mobile
   had no animation. See the stage block further down for how one element does
   both jobs. */
@media (max-width: 1024px) {
  .hero-wrap { display: flex; flex-direction: column; }
  #hero-h1 { order: 1; }
  .hero .sub { order: 3; }
  .hero .pills { order: 4; }
  .hero .cta { order: 5; }
  .hero-stats { order: 6; }
}
/* The display scale above was set for "Secure Every Vehicle. / Pass Every
   Regulation." — 21 characters a line. The current headline is 58, so it is
   taken 15% down from that scale to claw back a line without giving up the
   hero's presence. Two rules, mirroring the two above: below 1025px the base is
   var(--fs-h1) with no viewport cap, so applying the desktop min() there would
   collapse the headline to ~20px on a phone. */
#hero-h1 { font-size: calc(var(--fs-h1) * 0.85); }
@media (min-width: 1025px) {
  #hero-h1 { font-size: calc(min(var(--fs-h1), 4.95vw) * 0.85); }
}
/* The global heading rule sets `margin: 0 0 .5em`, and em resolves against the
   element's OWN size — so on a ~76px hero headline that is a 38px gap before
   the sub-headline's own 26px top margin even begins. Tie the headline's gap to
   a fixed value instead, so it stays a deliberate space rather than a function
   of how large the type happens to be. */
#hero-h1 { margin-bottom: 0.18em; }
.hero .sub { color: var(--txt); font-size: var(--fs-lede); margin: 16px 0 30px; }

/* Regulation badges (hero) — clean check-pills */
.pills { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 34px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 11px; font-size: .84rem; font-weight: 600; color: var(--txt);
  background: var(--surface); border: 1px solid var(--line); border-radius: 30px; transition: transform var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.pill::before { content: "\2713"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(77,127,230,.16); color: var(--accent); font-size: .64rem; font-weight: 800; }
.pill:hover { transform: translateY(-3px); border-color: var(--line-hi); color: var(--heading); }
.hero .cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* The hero orb's furniture — .orb-glow, .orb-ring, .orb-media, .hero-canvas,
   and the .hv-slide / .hv-video rules from the video that predated all of it —
   went out with the orb itself. Everything here styled a child of a box that no
   longer exists in index.html, and the two `display: none` ones had been doing
   nothing for longer than that.

   @keyframes spin stays: .final-bg::before still uses it. @keyframes orbpulse
   went, since .orb-glow was its only caller. */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(77,127,230,.5);} 70% { box-shadow: 0 0 0 8px rgba(77,127,230,0);} 100% { box-shadow: 0 0 0 0 rgba(77,127,230,0);} }

/* Hero stat row */
.hero-stats { clear: both; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: clamp(38px, 4vw, 60px); }
/* 2-up from 900 rather than 640. Four columns in a tablet's width gives each
   stat about 179px, which is narrower than its own label — "Threat intelligence
   & vulnerability monitoring" wraps to three lines in that box while the number
   above it sits alone. Two columns give each ~380px, so the label sits on one
   or two lines and the number keeps its weight. */
@media (max-width: 900px) { .hero-stats { grid-template-columns: repeat(2, 1fr); } }
.hero-stat { position: relative; padding: 20px 22px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: transform var(--t-fast), border-color var(--t-fast); }
.hero-stat:hover { transform: translateY(-4px); border-color: var(--line-hi); }
.hero-stat b { display: block; font-family: var(--font-disp); font-size: clamp(1.6rem, 2.1vw, 2.15rem); color: var(--heading); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.hero-stat b em { font-style: normal; font-size: .48em; color: var(--accent); font-weight: 700; }
.hero-stat span { display: block; margin-top: 8px; font-size: .88rem; color: var(--txt-dim); }

/* =============================== TRUST BAR =============================== */
.trust { padding: clamp(54px, 5.2vw, 96px) 0; }
.trust-title { text-align: center; color: var(--heading); font-size: calc(var(--fs-h2) * 0.82); margin: 0 0 clamp(24px, 3vw, 40px); }
.logo-static { position: relative; width: 100%; padding-inline: clamp(16px, 2.2vw, 46px); }
/* Centred flex wrap (not a rigid grid): every logo sits in an equal-size cell
   and each row — including a partial last row — stays centred and balanced,
   so an odd logo count never leaves a lopsided gap on one side. */
.logo-track { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(28px, 3.4vw, 54px) clamp(26px, 2.8vw, 50px); width: 100%; max-width: var(--maxw); margin-inline: auto; padding: 0; list-style: none; }
.logo-track li { flex: 0 0 auto; width: clamp(128px, 17%, 196px); height: 58px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 1000px) { .logo-track { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px) { .logo-track { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .logo-track { grid-template-columns: repeat(2, 1fr); } }
/* Uniform bounding box: every logo scales to the same max height/width so they read at one size */
.logo-img { max-height: 40px; max-width: 88%; width: auto; height: auto; object-fit: contain; opacity: 1; transition: transform var(--t-fast), filter var(--t-fast); }
/* Optical balance: compact marks read a touch larger, wide wordmarks a touch smaller, so all look one visual size */
.logo-img[src*="unominda"]          { max-height: 50px; }
.logo-img[src*="deviseelectronics"] { max-height: 46px; }
.logo-img[src*="ignitarium"]        { max-height: 50px; }
.logo-img[src*="sbd"]               { max-height: 48px; }
.logo-img[src*="tuvsud"]            { max-height: 50px; }
.logo-img[src*="tatamotors"]        { max-width: 72%; }
/* Pioneer is 6.65:1, the widest mark on the strip by some way. Left at the
   default 88% it hits the width cap long before the height cap and lands about
   24px tall against everyone else's 40, so it reads as a much smaller logo. The
   full cell width gets it to ~29px, which is as close to parity as a wordmark
   this long can come without overrunning its neighbours. */
.logo-img[src*="pioneer"]           { max-width: 100%; }
.logo-img[src*="hyundai-kefico"]    { max-height: 46px; }
.logo-img[src*="secure-elements"]   { max-height: 42px; }
.logo-img[src*="mahindra-rise"]     { max-height: 42px; }
.logo-img[src*="knot"]              { max-height: 46px; }   /* wide KNOT Consulting lockup */
/* Dark theme: lift the logos off the navy background so darker marks stay visible (no solid chip) */
:root[data-theme="dark"] .logo-img { filter: brightness(1.14) contrast(1.06) drop-shadow(0 0 6px rgba(255,255,255,.18)); }
/* KNOT is dark line-art on a colourful bulb → add a stronger white glow so the outline reads on dark */
:root[data-theme="dark"] .logo-img[src*="knot"] { filter: brightness(1.08) contrast(1.04) drop-shadow(0 0 5px rgba(255,255,255,.22)); }
:root[data-theme="dark"] .logo-track li:hover .logo-img { filter: brightness(1.2) contrast(1.08) drop-shadow(0 0 9px rgba(255,255,255,.28)); }
/* itemis renders in a dark navy-blue → lift it to a bright, on-brand blue so it reads on the dark strip */
:root[data-theme="dark"] .logo-img[src*="itemis"] { filter: brightness(2.15) saturate(1.35) contrast(1.05) drop-shadow(0 0 8px rgba(70,160,255,.3)); }
:root[data-theme="dark"] .logo-track li:hover .logo-img[src*="itemis"] { filter: brightness(2.35) saturate(1.4) contrast(1.05) drop-shadow(0 0 12px rgba(70,160,255,.45)); }
/* Hyundai Kefico is a very dark navy-blue → render it clean white so it stays legible on the dark strip */
:root[data-theme="dark"] .logo-img[src*="hyundai-kefico"] { filter: brightness(0) invert(1) opacity(.95) drop-shadow(0 0 6px rgba(255,255,255,.2)); }
:root[data-theme="dark"] .logo-track li:hover .logo-img[src*="hyundai-kefico"] { filter: brightness(0) invert(1) opacity(1) drop-shadow(0 0 10px rgba(255,255,255,.32)); }
.logo-text { display: none; } /* trusted-by shows logos only, no company names */
.logo-track li:hover .logo-text { color: var(--accent); }
.logo-track li:hover .logo-img { transform: scale(1.09); }
/* Invert (not flatten) so filled logos keep their internal detail instead of becoming white blobs. */
/* Original colours stay readable on dark by sitting the logos on a light chip. */
/* Dark theme uses the exact same logo treatment as light — original colours,
   same size, no chip/backdrop. (Inherits the base .logo-img rules.) */

/* ======================= UPDATES & INSIGHTS ============================= */
.insights { position: relative; }
.insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.6vw, 24px); }
.insights-status { grid-column: 1 / -1; text-align: center; padding: 40px 0; font-family: var(--font-sans); color: var(--txt-dim); }
.insights-status.error { color: var(--crimson); }

.news-card { position: relative; display: flex; flex-direction: column; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); overflow: hidden;
  transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med); }
.news-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background-color: #0a0e28; background-size: cover; background-position: center; background-repeat: no-repeat; }
.news-media::after { content: ""; position: absolute; inset: 0; -webkit-backdrop-filter: blur(22px) brightness(.6); backdrop-filter: blur(22px) brightness(.6); }
.news-media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .6s ease; }
.news-card:hover .news-media img { transform: scale(1.06); }
.news-body { display: flex; flex-direction: column; gap: 13px; flex: 1; padding: clamp(18px, 1.8vw, 24px); }
.news-card:hover { transform: translateY(-6px); border-color: var(--line-hi); box-shadow: 0 30px 70px rgba(0,0,40,.22); }

.news-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.news-cat { font-family: var(--font-sans); font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); padding: 5px 11px; border-radius: 20px; background: rgba(77,127,230,.1); border: 1px solid rgba(77,127,230,.28); white-space: nowrap; }
.news-cat.cat-regulation, .news-cat.cat-report { color: var(--purple); background: rgba(106,79,192,.12); border-color: rgba(106,79,192,.34); }
.news-date { font-family: var(--font-sans); font-size: .76rem; color: var(--txt-dimmer); white-space: nowrap; }

.news-title { font-family: var(--font-disp); font-weight: 700; font-size: 1.15rem; line-height: 1.34; color: var(--heading); margin: 0; flex: 1 0 auto; }
.news-title a { color: inherit; transition: color var(--t-fast); }
.news-title a::after { content: ""; position: absolute; inset: 0; z-index: 2; } /* stretched link: whole card clickable */
.news-card:hover .news-title a { color: var(--accent); }

.news-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.news-source { font-family: var(--font-sans); font-size: .82rem; font-weight: 600; color: var(--txt-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-read { font-family: var(--font-sans); font-size: .8rem; font-weight: 700; color: var(--accent); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.news-read span { transition: transform var(--t-fast); }
.news-card:hover .news-read span { transform: translateX(4px); }

.insights-meta { display: flex; align-items: center; justify-content: center; gap: 9px; margin: clamp(24px,3vw,34px) 0 0;
  font-family: var(--font-sans); font-size: .84rem; color: var(--txt-dimmer); text-align: center; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-bright); flex-shrink: 0; animation: livepulse 2.2s infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(77,127,230,.5); } 70% { box-shadow: 0 0 0 8px rgba(77,127,230,0); } 100% { box-shadow: 0 0 0 0 rgba(77,127,230,0); } }

/* ============================ URGENCY (§01) ============================== */
.urgency .section-title { color: var(--heading); }
.countdown { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid rgba(216,0,40,.55); border-radius: var(--radius-lg); background: linear-gradient(120deg, rgba(216,0,40,.2), var(--surface)); padding: 22px 28px; margin-bottom: 40px; }
.cd-caption { display: inline-flex; align-items: center; gap: 12px; color: var(--txt); font-size: 1rem; }
.cd-caption strong { color: var(--heading); }
.cd-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--crimson); animation: pulse-red 1.8s infinite; }
@keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(216,0,40,.5);} 70% { box-shadow: 0 0 0 10px rgba(216,0,40,0);} 100% { box-shadow: 0 0 0 0 rgba(216,0,40,0);} }
.cd-clock { display: inline-flex; align-items: flex-start; gap: 10px; }
.cd-unit { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 66px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 8px; }
.cd-num { font-family: var(--font-disp); font-size: 1.85rem; font-weight: 700; color: var(--heading); line-height: 1; font-variant-numeric: tabular-nums; }
.cd-lbl { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-3); }
.cd-sep { color: var(--crimson); font-family: var(--font-disp); font-size: 1.5rem; font-weight: 700; padding-top: 12px; }
/* Urgency → deadline timeline (no boxes) — enlarged */
.timeline { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 54px; padding-top: 6px; }
.tl-rail { position: absolute; top: 32px; left: 32px; width: 66%; height: 2px; background: linear-gradient(90deg, var(--accent-bright), var(--purple)); opacity: .35; z-index: 0; }
.tl-spark { position: absolute; top: 27px; left: 32px; width: 52px; height: 11px; border-radius: 11px; background: radial-gradient(closest-side, var(--accent-bright), transparent); z-index: 1; animation: tlspark 5s ease-in-out infinite; }
@keyframes tlspark { 0% { left: 32px; opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 100% { left: 66%; opacity: 0; } }
.tl-item { position: relative; padding-top: 98px; z-index: 2; }
.tl-node { position: absolute; top: 0; left: 0; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: var(--bg); border: 2px solid var(--line-hi); box-shadow: 0 0 0 8px var(--bg), 0 6px 18px rgba(0,0,0,.15); z-index: 3; }
.tl-node svg { width: 30px; height: 30px; }
.tl-tag { position: absolute; top: 50px; left: 84px; font-family: var(--font-sans); font-size: .8rem; font-weight: 700; color: var(--accent); background: var(--surface); border: 1px solid var(--line-hi); border-radius: 20px; padding: 6px 14px; white-space: nowrap; }
.tl-crit .tl-node { border-color: var(--crimson); color: var(--crimson); box-shadow: 0 0 0 8px var(--bg), 0 0 20px rgba(216,0,40,.4); }
.tl-tag.crit { color: var(--crimson); border-color: rgba(216,0,40,.6); background: rgba(216,0,40,.14); }
.tl-item h3 { color: var(--heading); font-size: clamp(1.5rem, 1.3vw + 1.1rem, 1.95rem); margin-bottom: 14px; }
.tl-item p { color: var(--txt); font-size: 1.1rem; line-height: 1.6; margin-bottom: 20px; }
.tl-item .arrow-link { font-size: 1.02rem; }
.fine { color: var(--crimson); font-weight: 700; }
/* Urgency regulations — clean check + label row (no boxes) — enlarged */
.badge-strip-wrap { margin-top: 56px; text-align: center; }
.badge-strip-label { display: block; color: var(--accent); font-size: 1.2rem; letter-spacing: .01em; margin-bottom: 26px; }
.badge-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 36px; }
.badge-strip li { display: inline-flex; align-items: center; gap: 11px; color: var(--txt); font-weight: 700; font-size: 1.05rem; transition: color var(--t-fast); }
.badge-strip li::before { content: "\2713"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(77,127,230,.14); color: var(--accent); font-size: .82rem; font-weight: 800; transition: background var(--t-fast), color var(--t-fast); }
.badge-strip li:hover { color: var(--accent); }
.badge-strip li:hover::before { background: var(--accent-bright); color: #00131a; }

/* ============================= SECURE (§02) ============================== */
.secure .section-head { margin-bottom: clamp(30px, 3.4vw, 48px); }
/* Secure data — flowing icon points, no boxes */
.asset-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 1.1vw, 14px); margin: 4px auto 34px; max-width: 960px; list-style: none; padding: 0; }
.asset-grid li { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); font-family: var(--font-disp); font-weight: 600; color: var(--heading); font-size: 1rem; letter-spacing: -.01em; transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
.asset-grid li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 8px var(--accent-bright); flex-shrink: 0; }
.asset-grid li:hover { transform: translateY(-3px); border-color: var(--accent-bright); box-shadow: 0 0 0 4px rgba(77,127,230,.10), var(--shadow-1); }
.secure .closing { text-align: center; color: var(--txt-dim); max-width: 840px; margin: 0 auto; font-size: 1.1rem; }

/* ============================ AUDIENCE (§03) ============================= */
/* Audience → connected zig-zag journey (no boxes) */
.journey { position: relative; display: flex; flex-direction: column; gap: clamp(28px, 4vw, 54px); }
.jr-rail { position: absolute; top: 24px; bottom: 24px; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(var(--accent-bright), var(--purple)); opacity: .28; z-index: 0; }
.jr-item { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4.5vw, 72px); align-items: center; z-index: 1; }
.jr-item::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 0 6px var(--bg), 0 0 16px var(--accent-bright); z-index: 3; }
.jr-item.reverse .jr-media { order: 2; justify-self: end; }
.jr-item.reverse .jr-body { order: 1; text-align: right; }
.jr-item.reverse .pills.small { justify-content: flex-end; }
.jr-media { position: relative; width: 84%; max-width: 540px; justify-self: start; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.jr-media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7) contrast(1.05) saturate(.9); transition: transform .8s var(--ease); }
.jr-item:hover .jr-media img { transform: scale(1.05); }
.jr-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(77,127,230,.12), transparent 55%); }
.jr-ico { position: absolute; left: 18px; bottom: 18px; z-index: 2; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; color: var(--accent); background: var(--panel-solid); border: 1px solid var(--line-hi); }
.jr-ico svg { width: 24px; height: 24px; }
.jr-step { display: inline-block; font-family: var(--font-sans); font-size: .86rem; letter-spacing: .06em; color: var(--accent); margin-bottom: 14px; }
.jr-body h3 { color: var(--heading); font-weight: 700; font-size: clamp(1.7rem, 1.6vw + .8rem, 2.4rem); margin-bottom: 16px; }
.jr-body p { color: var(--txt-dim); font-size: 1.18rem; line-height: 1.65; }
.jr-body .pills.small { margin: 20px 0 24px; }
.jr-body .pills.small .pill { font-size: .92rem; }
.jr-body .arrow-link { font-size: 1.08rem; }
/* Persona data — outline "ticket" chips with dot, distinct */
.pills.small { justify-content: flex-start; gap: 10px; margin: 16px 0 22px; }
.pills.small .pill { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px dashed var(--line-hi); color: var(--accent); border-radius: 20px; font-size: .76rem; padding: 5px 13px 5px 11px; box-shadow: none; backdrop-filter: none; animation: none; }
.pills.small .pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-bright); }
.pills.small .pill:hover { transform: translateY(-2px); background: rgba(77,127,230,.06); }
.persona-card .arrow-link { margin-top: auto; }

/* ============================ SERVICES (§04) ============================= */
.services .section-title { color: var(--heading); }
.lifecycle { margin: 0 0 34px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); padding: 28px clamp(20px,3vw,44px) 36px; box-shadow: var(--shadow-1); }
.fig-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px dashed var(--line-2); padding-bottom: 16px; margin-bottom: 34px; }
.fig-label { font-family: var(--font-sans); font-size: .8rem; letter-spacing: .02em; color: var(--accent); }
.fig-std { font-family: var(--font-sans); font-size: .8rem; color: var(--accent); border: 1px solid var(--line-hi); border-radius: 5px; padding: 3px 10px; }
.fig-track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.fig-track::before { content: ""; position: absolute; top: 19px; left: 0; right: 0; height: 1px; background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px); }
.fig-progress { position: absolute; top: 19px; left: 0; height: 2px; width: 100%; background: var(--purple); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease); z-index: 0; }
.fig-track.run .fig-progress { transform: scaleX(1); }
.fig-track li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.fig-node { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-disp); font-size: .85rem; font-weight: 700; color: var(--accent); background: var(--panel-solid); border: 1.5px solid var(--line-2); transition: all var(--t-med); }
.fig-node.on { color: #fff; background: var(--purple); border-color: var(--purple); box-shadow: 0 0 0 5px rgba(90,63,176,.18); transform: scale(1.08); }
/* Monitoring (end node) now uses the same purple as every other node. */
.fig-title { font-family: var(--font-disp); font-weight: 700; color: var(--heading); font-size: 1rem; }
.fig-meta { font-family: var(--font-sans); font-size: .8rem; color: var(--txt-dimmer); }
/* Services → hexagon honeycomb (no boxes) */
.services-hive { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(30px,3.4vw,52px) clamp(24px,3vw,44px); max-width: 1140px; margin: 8px auto 0; padding-bottom: 46px; }
.hive-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; transition: transform var(--t-med); }
.hive-item:nth-child(3n+2) { transform: translateY(46px); }
.hive-item:hover { transform: translateY(-6px); }
.hive-item:nth-child(3n+2):hover { transform: translateY(40px); }
.hive-ico { width: 92px; height: 104px; display: grid; place-items: center; color: var(--accent);
  background: linear-gradient(155deg, rgba(77,127,230,.16), rgba(90,63,176,.14));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: color var(--t-med), background var(--t-med), filter var(--t-med), transform var(--t-med); }
.hive-ico svg { width: 36px; height: 36px; }
.hive-item:hover .hive-ico { color: var(--accent-bright); background: linear-gradient(155deg, rgba(77,127,230,.32), rgba(90,63,176,.24)); filter: drop-shadow(0 12px 24px rgba(77,127,230,.35)); transform: scale(1.06); }
.hive-item h3 { color: var(--heading); font-weight: 700; font-size: 1.32rem; }
.hive-item p { color: var(--txt-dim); font-size: 1.12rem; line-height: 1.6; margin: 0; max-width: 38ch; }
.services .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px; margin-top: 40px; }

/* ============================ PLATFORM (§05) ============================= */
.netmap { position: relative; width: 100%; margin-inline: auto; }
.net-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; }
.net-line { fill: none; stroke: var(--line-hi); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .3s, stroke-width .3s, opacity .3s; opacity: .55; }
.net-line.chord { stroke: var(--purple); opacity: .35; }
.net-line.hot { stroke: var(--accent-bright); stroke-width: 2.4; opacity: 1; }
.net-flow { fill: none; stroke: var(--accent-bright); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 3 9; opacity: .75; animation: netflow 3.4s linear infinite; }
@keyframes netflow { to { stroke-dashoffset: -24; } }
.net-hub, .net-node { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.net-hub { left: 50%; top: 50%; z-index: 3; border-radius: 50%; display: grid; place-items: center; align-content: center; text-align: center; padding: 12px; background: radial-gradient(circle, rgba(77,127,230,.22), var(--panel-solid) 72%); border: 1.5px solid var(--line-hi); box-shadow: 0 0 60px rgba(77,127,230,.22); }
.net-core-ico { color: var(--accent); margin: 0 auto 3px; }
.net-hub code { font-family: var(--font-sans); color: var(--accent); font-weight: 700; font-size: .9rem; }
.net-hub small { display: block; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-dim); margin-top: 1px; }
.engine-map { max-width: 1280px; height: clamp(520px, 40vw, 640px); margin-bottom: 34px; }
.engine-map .net-hub { width: clamp(122px, 12vw, 154px); height: clamp(122px, 12vw, 154px); }
.engine-map .net-core-ico { width: 30px; height: 30px; }
.ew-node { width: clamp(244px, 22vw, 304px); }
.ew-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; box-shadow: var(--shadow-1); backdrop-filter: blur(6px); transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med); }
.ew-node:hover .ew-card { transform: translateY(-4px); border-color: var(--line-hi); box-shadow: var(--card-glow); }
.ew-chead { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ew-ico { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; background: rgba(77,127,230,.08); border: 1px solid var(--line); color: var(--accent); }
.ew-ico svg { width: 22px; height: 22px; }
.ew-card code { font-family: var(--font-sans); color: var(--accent); font-weight: 700; font-size: .92rem; }
.ew-card h3 { font-family: var(--font-disp); color: var(--heading); font-size: 1.08rem; margin: 2px 0 8px; }
.ew-card p { color: var(--txt-dim); font-size: 1.0rem; line-height: 1.55; margin: 0; }
.engine-map .n1 { left: 20%; top: 27%; } .engine-map .n2 { left: 80%; top: 27%; }
.engine-map .n3 { left: 20%; top: 73%; } .engine-map .n4 { left: 80%; top: 73%; }
.platform-cta { text-align: center; }

/* ============================== WHY (§06) ================================ */
.why .section-title { color: var(--heading); }
.diff-map { max-width: 1080px; height: clamp(560px, 44vw, 690px); margin-bottom: 30px; }
.diff-map .net-hub { width: clamp(128px, 12vw, 160px); height: clamp(128px, 12vw, 160px); }
.diff-map .net-core-ico { width: 30px; height: 30px; }
.diff-node { width: clamp(148px, 15vw, 190px); }
.dn-chip { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; padding: 16px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-1); backdrop-filter: blur(6px); text-align: center; transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med); }
.diff-node:hover .dn-chip { transform: translateY(-3px); border-color: var(--line-hi); box-shadow: var(--card-glow); }
.dn-ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: rgba(77,127,230,.08); border: 1px solid var(--line); color: var(--accent); }
.dn-ico svg { width: 24px; height: 24px; }
.dn-chip b { font-family: var(--font-disp); color: var(--heading); font-size: .9rem; line-height: 1.22; font-weight: 700; }
.dn-tip { position: absolute; bottom: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(6px); width: 300px; background: var(--panel-solid); border: 1px solid var(--line-hi); border-radius: 14px; padding: 20px 22px 18px; font-size: 1.02rem; line-height: 1.6; color: var(--txt); opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s, visibility .25s; z-index: 6; box-shadow: var(--shadow-1), 0 0 0 5px rgba(77,127,230,.07); pointer-events: none; }
.dn-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: var(--panel-solid); }
.diff-node:hover .dn-tip { opacity: 1; visibility: visible; transform: translateX(-50%); }
.dn-tip.below { bottom: auto; top: calc(100% + 14px); }
.dn-tip.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--panel-solid); }
.diff-map .n1 { left: 50%; top: 11%; } .diff-map .n2 { left: 85%; top: 39%; }
.diff-map .n3 { left: 71%; top: 88%; } .diff-map .n4 { left: 29%; top: 88%; }
.diff-map .n5 { left: 15%; top: 39%; }
.diff-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }
.iso-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--heading); font-weight: 700; font-size: .84rem; box-shadow: var(--shadow-1); transition: transform var(--t-fast), border-color var(--t-fast); }
.iso-badge::before { content: ""; width: 22px; height: 22px; flex-shrink: 0; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 1l8 3v6c0 5-3.4 9.3-8 11-4.6-1.7-8-6-8-11V4l8-3zm-1 14l6-6-1.4-1.4L11 12.2 8.4 9.6 7 11l4 4z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 1l8 3v6c0 5-3.4 9.3-8 11-4.6-1.7-8-6-8-11V4l8-3zm-1 14l6-6-1.4-1.4L11 12.2 8.4 9.6 7 11l4 4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.iso-badge:hover { transform: translateY(-2px); border-color: var(--line-hi); }

/* ============================== STATS (§09) ============================== */
.stats { position: relative; padding: clamp(54px, 5.2vw, 96px) 0; overflow: hidden; }
.stats-bg { position: absolute; inset: 0; z-index: 0; background:
    radial-gradient(760px 300px at 50% 130%, rgba(77,127,230,.09), transparent 62%),
    radial-gradient(560px 280px at 50% -25%, rgba(90,63,176,.12), transparent 60%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
.stat-strip { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); }
.stat-strip li { text-align: center; padding: 12px 26px; border-right: 1px solid var(--line); }
.stat-strip li:last-child { border-right: 0; }
.stat-strip .num { display: block; font-family: var(--font-disp); color: var(--heading); font-weight: 700; font-size: clamp(2.1rem, 3.4vw, 3rem); line-height: 1.05; letter-spacing: -.02em; }
.stat-strip .label { display: block; color: var(--txt-dim); font-size: 14px; margin-top: 10px; }

/* ============================ FINAL CTA (§10) =========================== */
.final-cta { position: relative; overflow: hidden; padding: clamp(70px, 8vw, 120px) 0; border-radius: 28px; margin: clamp(20px,3vw,44px) clamp(12px,2vw,32px); }
.final-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(135deg, rgba(77,127,230,.16), rgba(90,63,176,.2)); border: 1px solid var(--line-hi); border-radius: 28px; overflow: hidden; }
.final-bg::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, rgba(77,127,230,.18), transparent 40%, rgba(90,63,176,.16), transparent 75%); animation: spin 16s linear infinite; }
.final-inner { position: relative; z-index: 2; max-width: 860px; margin-inline: auto; text-align: center; }
.final-cta .eyebrow-center { color: var(--accent); margin-bottom: 18px; }
.final-cta h2 { color: var(--heading); font-size: var(--fs-h2); }
.final-cta p { color: var(--txt); font-size: var(--fs-lede); }
.final-cta .cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; margin: 30px 0 26px; }
.link-secondary { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.link-secondary:hover { color: var(--accent-2); }
.contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 26px; font-size: .96rem; margin-top: 12px; }
.contact a { color: var(--txt); display: inline-flex; align-items: center; gap: 6px; transition: color var(--t-fast); }
.contact a:hover { color: var(--accent); }
.contact .ci { color: var(--accent); }

/* =============================== FOOTER ================================== */
/* Footer stays deep-toned in both themes for grounding */
.site-footer { position: relative; background: #0d1240; border-top: 1px solid rgba(255,255,255,.11); overflow: hidden; padding-top: clamp(32px, 3.4vw, 50px); box-shadow: 0 -1px 0 rgba(0,221,221,.14), 0 -22px 46px rgba(0,0,25,.30); }
.footer-glow { position: absolute; top: -140px; left: 50%; transform: translateX(-50%); width: 820px; height: 300px; background: radial-gradient(ellipse at center, rgba(77,127,230,.1), transparent 70%); pointer-events: none; }
.footer-main { position: relative; display: grid; grid-template-columns: 1.3fr 2.7fr; gap: clamp(40px,6vw,84px); padding-bottom: clamp(16px, 2vw, 26px); }
.footer-logo { height: 14px; width: auto; margin: 0 0 15px; }
.footer-tag { color: #b9bde0; font-size: .95rem; margin: 0 0 18px; max-width: 42ch; }
.footer-contact { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.footer-contact li { display: flex; align-items: center; gap: 10px; color: #cdd0ec; font-size: .94rem; }
.fc-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(77,127,230,.14); color: var(--accent-bright); flex-shrink: 0; }
.fc-ico svg { width: 14px; height: 14px; }
.footer-contact a:hover { color: var(--accent-bright); }
.fc-sep { color: var(--txt-dimmer); margin: 0 3px; font-weight: 400; }
.footer-social-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: clamp(-40px, -2.6vw, -16px); padding-bottom: clamp(8px, 1.2vw, 15px); }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; color: #cdd0ec; border: 1px solid rgba(255,255,255,.1); transition: all var(--t-fast); }
.footer-social a svg { width: 18px; height: 18px; }
.footer-social a:hover { color: #00131a; background: var(--accent-bright); border-color: var(--accent-bright); transform: translateY(-3px); }
.footer-certs { display: flex; gap: 12px; align-items: center; margin-left: auto; }
.footer-cert-badge { width: 62px; height: 62px; transition: transform var(--t-fast); }
.footer-cert-badge:hover { transform: translateY(-2px) scale(1.04); }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; }
.footer-col h4 { font-family: var(--font-sans); color: #fff; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 18px; }
.footer-col a { color: #a8ace0; font-size: .92rem; padding: 7px 0; transition: color var(--t-fast), padding-left var(--t-fast); }
.footer-col a:hover { color: var(--accent-bright); padding-left: 6px; }
.footer-bottom { position: relative; background: transparent; border-top: 0; margin-top: 0; }
.footer-bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.footer-copy { color: rgba(200,204,240,.5); font-size: .86rem; margin: 0; }
.footer-meta { display: flex; align-items: center; gap: 24px; }
.fb-iso { display: flex; gap: 10px; }
.iso-badge.sm { padding: 6px 14px; font-size: .76rem; color: var(--accent-3); border-color: rgba(77,127,230,.4); }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { color: rgba(200,204,240,.5); font-size: .86rem; transition: color var(--t-fast); }
.footer-legal a:hover { color: var(--accent-bright); }

/* ============================= INTERACTIVE =============================== */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--purple), var(--accent-bright)); z-index: 200; box-shadow: 0 0 10px rgba(77,127,230,.5); transition: width .1s linear; }
.spot-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(500px circle at var(--mx,50%) var(--my,40%), rgba(77,127,230,.07), transparent 68%); opacity: 0; transition: opacity var(--t-med); }
.has-spot:hover .spot-layer { opacity: 1; }
.cards, .persona-cards, .tile-grid { perspective: 1200px; }
[data-tilt] { transform-style: preserve-3d; transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med); will-change: transform; }
/* Back-to-top button — unified with the About/Contact `.back-to-top`: a
   circular, translucent-navy button with a cyan-tinted border + blur, so the
   same scroll-to-top control appears identically on every page. */
.to-top { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 150; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,59,.6); color: #e8e8fc; border: 1px solid rgba(0,204,204,.3); box-shadow: 0 10px 30px rgba(0,0,0,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transform: translateY(14px); cursor: pointer; transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med), color var(--t-fast), border-color var(--t-fast); }
.to-top svg { width: 20px; height: 20px; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--accent-bright); border-color: rgba(0,204,204,.6); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,204,204,.25); }
[data-theme="light"] .to-top { background: rgba(255,255,255,.85); color: #12143c; border-color: rgba(73,41,154,.2); box-shadow: 0 10px 30px rgba(0,0,59,.15); }
[data-theme="light"] .to-top:hover { color: #49299a; border-color: rgba(73,41,154,.35); box-shadow: 0 14px 34px rgba(73,41,154,.2); }

/* ============================== RESPONSIVE =============================== */
@media (max-width: 1180px) {
  .secure-top { grid-template-columns: 1fr; }
  .asset-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .services-hive { grid-template-columns: repeat(2, 1fr); }
  .insights-grid { grid-template-columns: repeat(2, 1fr); }
  .hive-item:nth-child(3n+2) { transform: none; }
  .hive-item:nth-child(3n+2):hover { transform: translateY(-6px); }
  .journey .jr-rail { display: none; }
  .jr-item { grid-template-columns: 1fr; gap: 20px; }
  .jr-item::before { display: none; }
  .jr-item.reverse .jr-media { order: 0; }
  .jr-item.reverse .jr-body { order: 0; text-align: left; }
  .jr-item.reverse .pills.small { justify-content: flex-start; }
  .footer-main { grid-template-columns: 1fr; gap: 40px; }
  .footer-social-row { margin-top: 0; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
  .netmap { height: auto; display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
  .net-svg, .net-hub { display: none; }
  .net-node { position: static; transform: none; width: 100%; }
  .ew-node, .diff-node { width: 100%; }
  .dn-chip { flex-direction: row; align-items: center; text-align: left; gap: 14px; }
  .dn-chip b { font-size: .98rem; }
  .dn-tip { position: static; opacity: 1; visibility: visible; transform: none; width: auto; box-shadow: none; border: 0; padding: 6px 0 0; background: transparent; }
  .dn-tip::after, .dn-tip::before { display: none; }
}
@media (min-width: 769px) and (max-width: 1120px) {
  /* Not enough room for the featured panel — fall back to two columns. */
  .mega-feature { display: none; }
  .mega-2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) { .topbar-tag { display: none; } .topbar-inner { justify-content: center; } }
/* Narrow phones: keep the logo at its constant size by dropping the long header CTA. */
@media (max-width: 600px) { .header-actions .nav-cta { display: none; } }
/* THE HEADER COLLAPSES AT 1024, NOT 768. The hamburger used to arrive at 768,
   so every width from 769 up rendered the full desktop bar into a space too
   small for it: the CTA ran off the right edge and took the whole document with
   it. On an iPad Air (820 wide, 794 of viewport) the page scrolled sideways by
   70px — measured, not estimated.

   1024 rather than the tightest value that technically works. The desktop bar
   needs 962px of viewport, and at exactly 962 the CTA lands ON the container's
   padding edge with nothing to spare, so any longer menu label or a late font
   swap puts it back over the edge. 1024 hands over with ~62px of slack, and it
   is where this stylesheet already draws its desktop boundary — the hero grid
   opposite it keys off `min-width: 1025px`, and the orb and services hive go
   tablet at `max-width: 1024px`. The header now turns over on the same line
   rather than inventing a breakpoint of its own.

   Only the header and mega-menu rules moved up here. Everything below stays at
   768 on purpose: a tablet wants the 2-up services hive it inherits from the
   1024px block, not the 1-up that 768 gives it. */
@media (max-width: 1024px) {
  .topbar { display: none; }
  .main-nav { display: none; }
  .header-login { display: none; }
  .header-actions { margin-left: auto; gap: 10px; }
  .nav-cta { padding: 9px 14px; font-size: .8rem; }
  .nav-toggle { display: flex; }
  .site-header.nav-open .main-nav { display: flex; flex-direction: column; align-items: stretch; gap: 4px; position: absolute; top: 100%; left: 0; right: 0; max-height: 78vh; overflow-y: auto; background: var(--panel-solid); padding: 16px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-1); }
  .site-header.nav-open .nav-item { position: static; }
  .site-header.nav-open .nav-link { justify-content: space-between; padding: 14px 12px; font-size: 1.05rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .mega { position: static; opacity: 1; visibility: visible; transform: none; pointer-events: auto; display: block; width: auto; min-width: 0; left: auto; margin-left: 0; box-shadow: none; border: 0; background: transparent; padding: 4px 0 10px 12px; }
  .mega-1, .mega-2 { display: block; grid-template-columns: none; width: auto; }
  .mega-1 .mega-col { display: block; }
  .mega-feature { width: auto; margin-left: 0; margin-top: 8px; }
  .mega-title, .mega-col a small { display: none; }
}
@media (max-width: 768px) {
  .timeline { grid-template-columns: 1fr; gap: 34px; }
  .tl-rail, .tl-spark { display: none; }
  .services-hive { grid-template-columns: 1fr; }
  .insights-grid { grid-template-columns: 1fr; }
  .hive-item:nth-child(3n+2) { transform: none; }
  .fig-track { grid-template-columns: repeat(2, 1fr); gap: 22px 10px; }
  .fig-track::before, .fig-progress { display: none; }
  .stat-strip { grid-template-columns: 1fr; }
  .stat-strip li { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px 26px; }
  .stat-strip li:last-child { border-bottom: 0; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 24px 28px; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
  .footer-meta { flex-wrap: wrap; gap: 16px; }
}
@media (max-width: 520px) { .asset-grid { grid-template-columns: repeat(2, 1fr); } .fig-track { grid-template-columns: 1fr; } .btn { width: 100%; justify-content: center; } .hero .cta, .final-cta .cta { flex-direction: column; } .cd-unit { min-width: 54px; } }

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

/* ==========================================================================
   ABOUT-PAGE RHYTHM  ·  v42
   Bring the homepage in line with the About page's look & feel: a light-
   dominant page broken up by fixed dark accent bands (hero, deadlines,
   platform engines, final CTA), exactly like About's dark/light rhythm.
   Each dark band re-declares the dark palette locally, so every var()-driven
   child (pills, stat cards, countdown, timeline, net-maps, chips) adapts
   automatically without touching any markup.
   ========================================================================== */

/* --- Dark accent bands: local dark palette ------------------------------ */
.hero,
.urgency,
.platform,
.final-cta {
  --bg: #0b1538; --bg-2: #16123a;
  --surface: rgba(255,255,255,0.03); --surface-2: rgba(255,255,255,0.06);
  --panel: rgba(22,18,52,0.9); --panel-solid: #14122e;
  --line: rgba(255,255,255,0.09); --line-2: rgba(255,255,255,0.14); --line-hi: rgba(77,127,230,0.42);
  --txt: #c7cbe0; --txt-dim: rgba(199,203,224,0.62); --txt-dimmer: rgba(199,203,224,0.4);
  --heading: #ffffff; --strong: #ffffff;
  --accent: #6a95ec; --accent-bright: #4d7fe6; --accent-2: #86a8f0; --accent-3: #b9ccf7;
  --purple: #6a4fc0; --crimson: #ff3546;
  --header-bg: rgba(13,18,64,0.94);
  --shadow-1: 0 24px 70px rgba(0,0,0,0.45);
  --card-glow: 0 0 0 1px rgba(77,127,230,.2), 0 18px 46px rgba(0,0,0,.5);
  color: var(--txt);
}

/* --- Band backgrounds: the connected-vehicle plate under the house wash -----
   Layer order is top-first in CSS, so this reads bottom-up: the navy base, the
   photograph, a scrim over it, then the two gradients that every other band on
   the page uses. Putting the photo UNDER the existing wash rather than over it
   is what keeps the hero looking like the same site — the purple at 82% -12%
   and the blue at 6% 112% still tint it, so it sits in the palette instead of
   being a picture dropped on top of one.

   The scrim is the load-bearing part: opaque navy across the copy column,
   releasing toward the right, because the headline is 76px of white type and
   the "empty" half of the artwork is still a lit navy field. It is angled
   100deg rather than 90 so it follows the road sweeping up to the right rather
   than cutting a vertical line through it.

   There was a second, radial pass here at 78% 30%, holding the photo down hard
   where the lifecycle animation used to sit in the orb — the car's roofline ran
   straight through the phase labels. The animation is gone and so is that pass:
   with nothing on top of the photograph, dimming its own subject was only
   costing contrast.

   background-position: right — with cover on a container wider-than-tall, the
   crop comes off the horizontal, and the left of the plate is the empty half.
   Anchoring right keeps the car and the skyline and throws away only field.

   image-set with x descriptors, because the artwork is 1827px wide and `cover`
   on a 2560px monitor already stretches it 1.4x at DPR 1 — a 1.25x Windows
   display scale takes that to 1.75x, which is exactly the softness you notice.
   The @2x file is a Lanczos resample with a light unsharp pass rather than a
   straight enlargement, so the browser is handed pixels instead of magnifying
   a JPEG itself. It does not invent detail: 1827px is the real ceiling in the
   supplied file, and a larger original is the only thing that raises it.

   The three gradient layers now live on .stage-scrim rather than here, in the
   same order, because the photograph became an element. What is left is the
   band's flat base. */
.hero { background: #00003B; }
/* Below 1025px the plate stops being a background at all — .hero-plate carries
   it as a figure under the heading instead, which is where a stacked layout
   wants its graphic and where a background cannot go.

   The route here is worth recording, because the obvious fix was the wrong one.
   `cover` fits the SHORTER axis, so a 2.12:1 landscape plate poured into a
   roughly 0.4:1 portrait band showed about a tenth of its width — one wheel
   arch and a light trail, which reads as a smudge, not a car. Sizing it on its
   width and parking it along the bottom fixed that and the whole vehicle came
   back, but it came back underneath the stat cards, which is not where anyone
   looks first. A background can only ever be behind the copy; the graphic
   belongs after the heading, so it had to become an element.

   What stays is the band's own colour: the same two gradients as every other
   section, over the flat navy. */
@media (max-width: 1024px) {
  .hero {
    background:
      radial-gradient(120% 128% at 82% -12%, rgba(73,41,154,.40), transparent 56%),
      radial-gradient(90% 90% at 6% 112%, rgba(77,127,230,.18), transparent 60%),
      #00003B;
  }
}

/* ==========================================================================
   HERO STAGE  ·  the glowing track
   --------------------------------------------------------------------------
   Layout, type, spacing, colour and copy are untouched. Everything below is
   one extra layer behind the content.

   THE GLOWING TRACK IS THE ONLY THING IN THIS HERO THAT ANIMATES. It has had
   more at various points — a breathing bloom on the car, a halo/pulse/ripple
   overlay on the three icons with light travelling the links between them,
   drifting streaks and dust, a drive-in entrance, a hero-scoped button hover.
   All of it is removed. If any of it is wanted back, it is in the history
   around this comment rather than commented out here.

   WHY THE PLATE IS AN ELEMENT AND NOT A BACKGROUND-IMAGE. The road light is
   painted into a flat JPEG, so animating it means drawing over exactly where
   it is, at every viewport width. .stage-plate reproduces `background-size:
   cover` with container query units instead of using cover, which makes it a
   box with known edges — and that is what lets the SVG inside it work in the
   artwork's own 1827x861 coordinates and stay registered to the painted road.
   A background-image crop offers nothing to register against.

   The layer is screen-blended, so the artwork's road is the cold base and
   everything here only ever adds light to it. Nothing is masked or covered.

   The site-wide prefers-reduced-motion rule near the top of this file already
   stops all of it; nothing here needs its own opt-out.
   ========================================================================== */

/* ONE element, both layouts. It used to be a full-bleed layer on desktop and a
   separate static .hero-plate on mobile, and that second element is exactly why
   mobile had no animation: the road overlay and the icons only ever existed in
   the desktop one. Rather than duplicate thirty lines of SVG into a second
   copy, the stage now moves — absolute and full-bleed above 1024px, an in-flow
   figure in the flex column below it — and everything inside it comes along.

   It lives inside .hero-wrap so it can take an `order` in that column. That
   costs one thing on desktop: an absolute box inside .hero-wrap is measured
   from inside the container's padding, not from the band. The negative insets
   below put it back — 50% - 50vw reaches the viewport edges regardless of the
   container's max-width, and --hero-pt/--hero-pb are the same variables .hero
   pads itself with, so the two cannot drift apart. */
.hero-stage {
  position: absolute;
  top: calc(-1 * (var(--hero-pt) + var(--hdr-h, 54px)));
  bottom: calc(-1 * var(--hero-pb));
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  pointer-events: none;
  overflow: hidden;
  /* -1, not 0. As a child of .hero-wrap the stage is a POSITIONED sibling of
     the copy, and positioned elements paint above in-flow content whatever
     order they are in — at 0 the photograph covered the headline completely.
     A negative index puts it below the copy while staying inside .hero-wrap's
     stacking context, so it is still above .hero's own background.
     On mobile it goes back to z-index auto: there it is in the flow, nothing
     overlaps it, and -1 would push it behind the band. */
  z-index: -1;
  container-type: size;
  /* 1827 / 861, the artwork's own ratio. */
  --plate-ar: 2.1219;
  /* Exactly what `cover` computes: whichever of the two fits is the larger. */
  --plate-w: max(100cqw, calc(100cqh * var(--plate-ar)));
  --plate-h: calc(var(--plate-w) / var(--plate-ar));
  /* Where the crop lands horizontally, 0 = show the left edge, 1 = the right.
     Same meaning as background-position-x, so the two layouts differ by one
     number rather than by a second set of rules. */
  --crop-x: 1;
}
.hero-wrap { z-index: 2; }   /* .hero-wrap is already position: relative */

/* --- the plate ---------------------------------------------------------- */
.stage-plate {
  position: absolute;
  width: var(--plate-w);
  height: var(--plate-h);
  left: calc((100cqw - var(--plate-w)) * var(--crop-x));
  top: calc((100cqh - var(--plate-h)) / 2);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* 1% of the plate's width, so the icon overlay scales with the artwork
     instead of with the viewport. */
  --u: calc(var(--plate-w) / 100);
  /* The plate itself is static. The drive-in entrance, its motion trail and
     the bloom that gave the car a breathing glow are all gone; what animates
     is the road and the three icons, both drawn on top of it. */
}
/* Each source declared inside the query that uses it, so a phone never fetches
   the 3200px plate and a desktop never fetches the 1100px one. */
@media (min-width: 1025px) {
  .stage-plate {
    background-image:
      image-set(url("../assets/img/hero-connected-vehicle.jpg") 1x,
                url("../assets/img/hero-connected-vehicle@2x.jpg") 2x);
  }
}
@media (max-width: 1024px) {
  /* In the flow, between the headline and the copy. Full bleed: the negative
     inline margin is exactly the .container padding this sits inside, so it
     reaches both screen edges while the copy keeps its gutters.

     The height drives the crop. At 390px the box is about 1.5:1 against a
     2.12:1 plate, so `cover` throws ~29% off the width, and --crop-x .96
     throws nearly all of it off the empty end — the half of the artwork drawn
     as copy space for a headline that here sits above it rather than in it.
     That is what fills the frame with car instead of leaving it in the corner
     of a wide, half-empty rectangle. */
  .hero-stage {
    position: relative;
    order: 2;
    z-index: auto;
    top: auto; bottom: auto; left: auto; right: auto;
    margin: clamp(18px, 3.5vw, 28px) calc(-1 * clamp(16px, 2.2vw, 46px)) clamp(20px, 4vw, 32px);
    height: clamp(260px, 78vw, 380px);
    --crop-x: .96;
    /* Top and bottom only. The plate's own navy is a shade off the hero's
       #00003B, so a hard horizontal edge reads as a pasted-in rectangle; the
       left and right do not need it, because full bleed makes those edges the
       screen, which is a boundary the eye already expects. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 84%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 84%, transparent 100%);
  }
  .stage-plate { background-image: url("../assets/img/hero-connected-vehicle-sm.jpg"); }
  /* No scrim stacked here: the copy is above and below the figure now, not on
     top of it, so there is nothing to protect and darkening would only cost
     contrast. */
  .stage-scrim { display: none; }
}

/* --- the road ------------------------------------------------------------ */
.stage-road {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* Additive. The road painted into the artwork is the cold base; everything
     drawn here only ever adds light to it, so nothing is masked or covered. */
  mix-blend-mode: screen;
}
.stage-road path { fill: none; stroke-linecap: round; }
/* The track used to surge brighter and settle, synced to the car arriving.
   With no arrival to sync to, that one-shot is gone and the road runs at its
   steady level from the start. The loops below are untouched. */

/* Soft outer glow around the entire track, breathing on 4s. Never reaches
   zero and never spikes, so it reads as intensity rather than as a flicker. */
.rd-halo {
  stroke: rgba(96,160,255,.22);
  stroke-width: 17;
  filter: blur(9px);
  animation: roadGlow 4s ease-in-out infinite;
}
/* A faint permanent rail, so the streaks have a track to run on even in the
   gaps between them. */
.rd-base { stroke: rgba(150,205,255,.09); stroke-width: 3; }

/* The streaks. Each dash pattern sums to a whole fraction of pathLength 100 —
   100, 50, 100, 25 — and each animation moves the offset by exactly one
   pattern length per cycle. That is what makes them seamless: a pattern that
   does not tile the path visibly jumps every time it wraps. Widths, colours,
   opacities and durations are all different so they never march in step. */
.rd-flow { animation: roadFlow 2.5s linear infinite; }
.rd-1 {
  stroke: rgba(255,255,255,.95); stroke-width: 2.6; stroke-dasharray: 9 91;
  filter: drop-shadow(0 0 4px rgba(120,215,255,.9));
  animation-duration: 2.5s;
}
.rd-2 {
  stroke: rgba(0,221,255,.8); stroke-width: 2; stroke-dasharray: 5 45;
  filter: drop-shadow(0 0 3px rgba(0,221,255,.8));
  animation-duration: 3.1s; animation-delay: -.8s;
  --pattern: 50;
}
.rd-3 {
  stroke: rgba(96,165,255,.62); stroke-width: 1.6; stroke-dasharray: 14 86;
  animation-duration: 3.9s; animation-delay: -2.1s;
}
.rd-4 {
  stroke: rgba(200,242,255,.55); stroke-width: 1.3; stroke-dasharray: 3 22;
  animation-duration: 2.2s; animation-delay: -1.4s;
  --pattern: 25;
}
.rd-2, .rd-4 { animation-name: roadFlowShort; }

/* The pulse: one bright head every 3.5s, blurred hard so it drags a soft comet
   behind it rather than arriving as a hard bar. Confined to this SVG, which is
   itself clipped to the stage, so it cannot touch anything else on the page. */
.rd-pulse {
  stroke: rgba(255,255,255,.95);
  stroke-width: 4.5;
  stroke-dasharray: 15 85;
  filter: drop-shadow(0 0 9px rgba(140,225,255,1)) drop-shadow(0 0 20px rgba(70,150,255,.75));
  opacity: 0;
  animation: roadPulse 3.5s cubic-bezier(.45,0,.55,1) infinite;
}

/* Particles. The wrapper rides the traced curve with offset-path — CSS motion
   path, resolved in the SVG's own user units, so it needs no JavaScript and no
   second copy of the geometry. The dot inside drifts off the line and fades,
   which is the "detaches briefly" without a second path to keep in sync. */
.rp-w {
  offset-path: path("M1067 884 C1150 862 1260 823 1404 768 C1520 723 1640 670 1728 612 C1782 576 1806 546 1800 514 C1794 486 1752 466 1690 458");
  offset-rotate: 0deg;
  animation: roadDust var(--d) linear infinite;
  animation-delay: var(--dl);
}
.rp {
  fill: rgba(215,246,255,.95);
  opacity: 0;
  animation: roadDustFade var(--d) ease-in-out infinite;
  animation-delay: var(--dl);
}

/* The house wash, unchanged and in the same order it was in when these three
   were layers of .hero's own background. Above the plate, below the copy. */
/* Re-balanced for the graded plate. Every value on the right-hand half came
   down: the scrim was carrying the job of darkening a bright photograph, and
   the photograph is not bright any more — median luminance 3 where it used to
   be 19. Left at the old settings it was subtracting light twice and the car
   went muddy. The copy column is untouched; it is still protecting 76px of
   white type, and that has not changed. */
.stage-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 128% at 82% -12%, rgba(73,41,154,.30), transparent 56%),
    radial-gradient(90% 90% at 6% 112%, rgba(77,127,230,.14), transparent 60%),
    linear-gradient(100deg,
      #00003B 0%, rgba(0,0,59,.94) 24%, rgba(0,0,59,.70) 38%,
      rgba(0,0,59,.26) 54%, rgba(0,0,59,.14) 74%, rgba(0,0,59,.32) 100%);
}

/* --- the three icons ----------------------------------------------------- */
/* Positions are percentages of the plate, measured off the artwork at
   1827x861: chip 1287,164 r40 · core 1483,237 r50 · car 1622,125 r45. Because
   .stage-plate is a real box that reproduces `cover` rather than being a
   background crop, these percentages land on the painted icons at every
   viewport width.

   The icon is not redrawn. The artwork's own circle stays exactly as it is and
   this only adds light around it, which is why the wireframe never changes. */
.stage-nodes { position: absolute; inset: 0; }
.node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
}
.node-chip { --x: 70.44%; --y: 19.05%; --halo: 13; --ring: 4.4; }
.node-core { --x: 81.17%; --y: 27.53%; --halo: 16; --ring: 5.5; animation-delay: -1s; }
.node-car  { --x: 88.78%; --y: 14.52%; --halo: 14; --ring: 4.9; animation-delay: -2s; }

/* The glow. A pre-blurred radial scaled 1 -> 1.34 rather than an animated
   box-shadow blur: same visual distance, but box-shadow animates on the paint
   thread and scale/opacity never leave the compositor. The three are offset by
   a second each so they breathe out of step — in step they read as one
   mechanism blinking rather than as three live nodes. */
.node::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--halo) * var(--u));
  height: calc(var(--halo) * var(--u));
  margin: calc(var(--halo) * var(--u) / -2);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(0,221,221,.50) 0%, rgba(0,221,221,.22) 34%,
    rgba(77,160,255,.10) 56%, transparent 72%);
  transform: translate3d(0, 0, 0) scale(1);
  animation: nodeHalo 3s ease-in-out infinite;
  animation-delay: inherit;
  will-change: transform, opacity;
}

/* The ripple. Sized to the circle actually drawn in the artwork, so it reads as
   that circle throwing off a ring rather than as a new shape arriving. Same 3s
   clock as the glow and timed to fire as it peaks, which is the whole point —
   it is the pulse reaching maximum, not a separate event. */
.node::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--ring) * var(--u));
  height: calc(var(--ring) * var(--u));
  margin: calc(var(--ring) * var(--u) / -2);
  border-radius: 50%;
  border: 1px solid rgba(150,240,255,.5);
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1);
  animation: nodeRipple 3s cubic-bezier(.2,.7,.2,1) infinite;
  animation-delay: inherit;
  will-change: transform, opacity;
}

/* The four-point twinkles that used to be here are removed. The glow, the
   ripple, the particles and the link sparks are all unchanged. */

/* Tiny particles, two per icon, orbiting slowly and fading in and out so they
   appear and vanish rather than visibly looping. Durations are all different
   and none divides into another, so the six never fall into step — the moment
   they do, drifting dust starts reading as a mechanism. */
.node i.pt {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(1.5px, calc(.15 * var(--u)), 3.5px);
  aspect-ratio: 1;
  margin: calc(clamp(1.5px, calc(.15 * var(--u)), 3.5px) / -2);
  border-radius: 50%;
  background: rgba(200,248,255,.95);
  box-shadow: 0 0 calc(.4 * var(--u)) rgba(0,221,221,.7);
  transform: translate3d(0, 0, 0);
  animation: nodeDust var(--ps) linear infinite;
  animation-delay: var(--pd);
  will-change: transform, opacity;
  --r: calc(var(--halo) * var(--u) * .42);
}

/* --- the connection lines ------------------------------------------------ */
.stage-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* pathLength normalises each segment to 100 units, so one dash length and one
   offset animation give all three sparks the same size and speed however long
   the segment really is, and the three are staggered so only one is in flight
   at a time.
   This is the only animation in the hero that is not transform/opacity —
   stroke-dashoffset repaints. It is three hairlines over a few hundred pixels
   once every four seconds; the alternative, a masked gradient element per
   link, costs three more composited layers to save almost nothing. */
.lk {
  stroke: rgba(155,240,255,.95);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 11 89;
  filter: drop-shadow(0 0 5px rgba(0,221,221,.9));
  animation: linkSpark 4s linear infinite;
}
.lk-2 { animation-delay: 1.15s; }
.lk-3 { animation-delay: 2.4s; }





/* The hero-scoped button hover went with the rest: the buttons here use the
   site's own hover again. */

/* --- keyframes ----------------------------------------------------------- */
/* heroDriveIn, heroTrail and roadArrive lived here — the entrance, its motion
   trail, and the road surge that was timed to it. All three are removed. */
@keyframes nodeHalo {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);    opacity: .55; }
  50%      { transform: translate3d(0, 0, 0) scale(1.34); opacity: 1; }
}
/* Silent for the first third, then one ring on the beat the glow peaks. 1.72
   rather than 2.1: the ring starts at the size of a circle already ~100px
   across, and doubling it threw a hoop that reached the next icon. */
@keyframes nodeRipple {
  0%, 34%  { transform: translate3d(0, 0, 0) scale(1);    opacity: 0; }
  46%      { opacity: .55; }
  100%     { transform: translate3d(0, 0, 0) scale(1.72); opacity: 0; }
}
/* A slow orbit that fades in and out, so a particle appears and disappears
   rather than looping visibly back to where it started. */
@keyframes nodeDust {
  0%   { transform: translate3d(calc(var(--r) *  1),  calc(var(--r) * -.2), 0); opacity: 0; }
  18%  { opacity: .85; }
  25%  { transform: translate3d(calc(var(--r) *  .2), calc(var(--r) * -1),  0); }
  50%  { transform: translate3d(calc(var(--r) * -1),  calc(var(--r) *  .2), 0); opacity: .7; }
  75%  { transform: translate3d(calc(var(--r) * -.2), calc(var(--r) *  1),  0); }
  86%  { opacity: 0; }
  100% { transform: translate3d(calc(var(--r) *  1),  calc(var(--r) * -.2), 0); opacity: 0; }
}
/* One dash pattern per cycle, so the spark crosses once and the loop is
   seamless. */
@keyframes linkSpark {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}
/* Offset moves by exactly one dash pattern per cycle, which is what makes the
   loop seamless. Two variants because two of the streaks use a shorter,
   more frequent pattern. */
@keyframes roadFlow      { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes roadFlowShort { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -50; } }
@keyframes roadPulse {
  0%   { stroke-dashoffset: 0;    opacity: 0; }
  10%  { opacity: 1; }
  72%  { opacity: .85; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes roadGlow {
  0%, 100% { opacity: .62; }
  50%      { opacity: 1; }
}
@keyframes roadDust {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}
/* Fade and drift are on the dot, not the wrapper, so a particle can leave the
   line without leaving the path that carries it. */
@keyframes roadDustFade {
  0%   { opacity: 0; transform: translate3d(0, 0, 0); }
  15%  { opacity: var(--o); }
  70%  { opacity: var(--o); transform: translate3d(0, calc(var(--drift) * .5), 0); }
  100% { opacity: 0; transform: translate3d(0, var(--drift), 0); }
}
/* ==================== HEADER / HERO MERGE ==================================
   The homepage used to merge for free: the header was transparent over a hero
   that had no background of its own, so both showed the same fixed .bg-field.
   The band above gave the hero its own opaque #00003B, so the strip behind the
   transparent header kept showing .bg-field (#0a0d24) instead — a visible bar
   exactly the header's height.

   Same fix the interior pages use (css/site-chrome.css): pull the hero up by
   the header's height and give the space back as a transparent top border, so
   the hero's own background paints behind the header. background-origin must be
   border-box or the gradients would be sized below the border and tile into it,
   which reintroduces the band. Content position is unchanged.

   Home's hero sits inside <main>, so the selector differs from the interior
   pages' `.site-header + .hero`. --hdr-h is published by js/main.js. */
.site-header + main > .hero:first-child {
  margin-top: calc(-1 * var(--hdr-h, 54px));
  border-top: var(--hdr-h, 54px) solid transparent;
  background-origin: border-box;
  /* overflow:hidden clips to the padding box, i.e. at the border's lower edge,
     so a layer moved up into the strip still painted nothing there. Clipping to
     the border box extends the region by exactly the header's height at the top
     and by nothing on the other three sides. Browsers without
     overflow-clip-margin fall back to today's behaviour. */
  overflow: clip;
  overflow-clip-margin: border-box;
}
/* Overlays use inset:0, which resolves to the padding box and would stop at the
   border's lower edge — the same seam one layer up. */
.site-header + main > .hero:first-child > .spot-layer {
  top: calc(-1 * var(--hdr-h, 54px));
  height: auto;
  bottom: 0;
}
.urgency,
.platform {
  background:
    radial-gradient(88% 120% at 50% 0%, rgba(73,41,154,.30), transparent 62%),
    #00003B;
}

/* ---- The bands between the accent bands -------------------------------
   These carried no background of their own, so they fell through to the page
   --bg of #0a0d24 — a desaturated blue-black that reads as grey once it sits
   next to the #00003B navy of .urgency and .platform. Each now takes its own
   dark navy.

   The hue matters less than the green channel here: a colour with R and G near
   zero reads as black no matter how much blue is in it, because there is no
   luminance for the eye to read the hue off. Both tones therefore carry a real
   green component — that is what makes them read as navy rather than as black
   with a blue cast.

   Two tones, alternating down the page (insights, trust, secure, audience,
   services, why), so no two neighbouring bands are identical. They sit above
   the #00003B accent bands in luminance, which is what keeps the seam visible
   without a rule line, and the radial sits on opposite sides in each tone —
   blue on one, violet on the other — so the alternation is legible as more
   than a brightness step. */
.insights,
.secure,
.services {
  background:
    radial-gradient(84% 115% at 16% 0%, rgba(77,127,230,.16), transparent 62%),
    #0e1a42;
}
.trust,
.audience,
.why {
  background:
    radial-gradient(84% 115% at 84% 0%, rgba(122,86,214,.16), transparent 62%),
    #141c4d;
}
/* The stats strip sits between .why and the closing CTA and had no colour of
   its own either. It takes the blue tone so the alternation carries all the way
   down: .why (violet) -> .stats (blue) -> the CTA card. */
.stats {
  background:
    radial-gradient(84% 130% at 16% 0%, rgba(77,127,230,.14), transparent 62%),
    #0e1a42;
}
/* The halo behind a timeline node is drawn in var(--bg) so it reads as a hole
   punched in the band. These two bands paint #00003B but were declaring the
   page base, so every halo sat a shade off its own background. */
.urgency,
.platform { --bg: #00003B; }
.final-cta .final-bg {
  background:
    radial-gradient(92% 140% at 50% 0%, rgba(73,41,154,.42), transparent 60%),
    #00003B;
  border-color: rgba(255,255,255,.12);
}
/* Teal heading accent stays vivid where it sits on a dark band */
.hero em.accent,
.urgency em.accent,
.platform em.accent,
.final-cta em.accent { color: #00dddd; }
/* On the light content sections, accents echo About's purple (teal is kept for
   the dark bands and for the full dark theme), for a truer match + contrast. */
.insights em.accent,
.secure em.accent,
.audience em.accent,
.services em.accent,
.why em.accent { color: var(--purple); }
:root[data-theme="dark"] .insights em.accent,
:root[data-theme="dark"] .secure em.accent,
:root[data-theme="dark"] .audience em.accent,
:root[data-theme="dark"] .services em.accent,
:root[data-theme="dark"] .why em.accent { color: #00dddd; }

/* --- Sticky header while it floats over the fixed-dark hero -------------- */
/* The page is light by default, but the hero is always a dark band, so force
   the on-dark logo + light nav chrome until the reader scrolls past it. */
.site-header:not(.past-hero) .logo-on-dark { display: block; }
.site-header:not(.past-hero) .logo-on-light { display: none; }
.site-header:not(.past-hero) .nav-link,
.site-header:not(.past-hero) .header-login { color: #eaeefc; }
.site-header:not(.past-hero) .nav-link:hover,
.site-header:not(.past-hero) .header-login:hover { color: #ffffff; }
.site-header:not(.past-hero) .theme-toggle { color: #eaeefc; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06); }
.site-header:not(.past-hero) .nav-toggle span { background: #eaeefc; }

/* ==========================================================================
   PREMIUM POLISH · v43   (flagship homepage pass)
   Additive only — accessibility focus rings + mobile touch-target sizing.
   No layout or content changes; this block is the pattern to roll to other pages.
   ========================================================================== */

/* 1. Keyboard focus ring — visible, on-brand (cyan), high-contrast safe.
      The homepage had no :focus-visible; interior pages already carry one. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.nav-link:focus-visible,
.nav-cta:focus-visible,
.pill:focus-visible,
.chip:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid transparent;            /* keeps a ring in forced-colors mode */
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #00dddd, 0 0 0 5px rgba(0, 0, 59, 0.55);
  border-radius: 6px;
}
/* Only keyboard users see the ring — never mouse/touch */
:focus:not(:focus-visible) { outline: none; }

/* 2. Mobile touch target — lift the header CTA to the 44px minimum. */
@media (max-width: 768px) {
  .nav-cta { min-height: 44px; display: inline-flex; align-items: center; }
}

/* 3. Visible premium touches — more whitespace + real hover micro-interactions.
      Fully reversible; no content or structural changes. */

/* More breathing room between content sections (prompt: 80–120px rhythm) */
.section { padding-block: clamp(64px, 6vw, 112px); }

/* Compliance pills: softer + interactive — lift and pick up a cyan edge on hover */
.hero .pill {
  transition: transform .2s var(--ease), border-color .2s var(--ease),
              box-shadow .2s var(--ease), background .2s var(--ease);
}
.hero .pill:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 221, 221, 0.55);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 221, 221, 0.28);
}

/* Hero stat cards: gentle premium lift on hover */
.hero-stat { transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.hero-stat:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); }