/* ==========================================================================
   GenesisX — main stylesheet (on top of Bootstrap 5.3)

   Organised in page order: tokens → base → shared components → header → hero
   → engines → process → solutions → focus → CTA → footer → responsive.

   Design decisions reference lawsofux.com:
   - Jakob's Law: conventional header / hero / features / footer.
   - Fitts's Law: every interactive target is at least 44px tall.
   - Hick's Law: one primary action ("Book a Demo"), seven nav items.
   - Von Restorff: cyan is reserved for the primary action, the brand "X" and
     key accents; everything else is monochrome.
   - Common Region: engines, audiences and principles are grouped in cards.
   - Goal-Gradient: the four-step process ends on an emphasised final step.
   - Peak-End: a closing CTA panel before the footer.
   - Doherty Threshold: ~70 KB of images, deferred JS, no layout shift.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --gx-bg: #06171d;              /* page */
  --gx-bg-deep: #03121a;         /* cards, panels */
  --gx-border: #143a46;
  --gx-text: #eef5f8;
  --gx-muted: #a4b6c0;
  --gx-accent: #22dcf0;
  --gx-accent-hover: #5fe8f5;
  --gx-accent-ink: #04202a;
  --gx-blue: #3f94e0;            /* secondary data colour (donut, EOPX step) */
  --gx-green: #4de38c;
  --gx-light: #f2f5f8;           /* light band */
  --gx-light-ink: #0f2233;
  --gx-light-muted: #566b7c;
  --gx-callout: #d3eafb;
  --gx-callout-ink: #1d3a5c;
  --gx-radius: 0.5rem;
  --gx-header-h: 64px;
  --gx-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --bs-body-bg: var(--gx-bg);
  --bs-body-color: var(--gx-text);
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-link-color-rgb: 34, 220, 240;
  --bs-border-color: var(--gx-border);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: var(--gx-header-h); }
body { background: var(--gx-bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin-bottom: 0; }
p { margin-bottom: 0; }
ul, ol { list-style: none; padding: 0; margin: 0; }
:focus-visible { outline: 2px solid var(--gx-accent); outline-offset: 3px; }

.skip-link {
  position: absolute; z-index: 1080; top: 0.5rem; left: 0.5rem;
  padding: 0.75rem 1rem; border-radius: var(--gx-radius);
  background: var(--gx-accent); color: var(--gx-accent-ink); font-weight: 600;
}

/* ---------- Shared components ---------- */
/* Utilities (the !important mirrors Bootstrap's own text utilities so they can be overridden) */
.text-accent { color: var(--gx-accent) !important; }
.text-muted-2 { color: var(--gx-muted) !important; }

.wordmark {
  font-family: "Michroma", var(--bs-body-font-family);
  letter-spacing: 0.04em;
  color: var(--gx-text);
  text-decoration: none;
}
.wordmark .x { color: var(--gx-accent); }

.eyebrow,
.section-kicker,
.label-accent {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.eyebrow { color: var(--gx-accent); margin-bottom: 0.75rem; }
.section-kicker { color: var(--gx-text); margin-bottom: 0.6rem; }
.label-accent { color: var(--gx-accent); font-size: 0.66rem; }

.section-title { font-size: clamp(1.35rem, 1.9vw, 1.6rem); font-weight: 600; line-height: 1.2; }

.glass {
  background: rgba(4, 18, 25, 0.82);
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius);
  backdrop-filter: blur(10px);
}

/* Buttons — Fitts: 44px minimum */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding-inline: 1.25rem;
  font-size: 0.875rem; font-weight: 600; border-radius: 0.3rem;
}
.btn-lg { min-height: 52px; padding-inline: 1.5rem; font-size: 1rem; }
.btn-accent {
  --bs-btn-color: var(--gx-accent-ink);
  --bs-btn-bg: var(--gx-accent);
  --bs-btn-border-color: var(--gx-accent);
  --bs-btn-hover-color: var(--gx-accent-ink);
  --bs-btn-hover-bg: var(--gx-accent-hover);
  --bs-btn-hover-border-color: var(--gx-accent-hover);
  --bs-btn-active-color: var(--gx-accent-ink);
  --bs-btn-active-bg: var(--gx-accent-hover);
  --bs-btn-active-border-color: var(--gx-accent-hover);
}
.btn-outline-accent {
  --bs-btn-color: var(--gx-accent);
  --bs-btn-bg: rgba(4, 18, 25, 0.5);
  --bs-btn-border-color: var(--gx-accent);
  --bs-btn-hover-color: var(--gx-accent-ink);
  --bs-btn-hover-bg: var(--gx-accent);
  --bs-btn-hover-border-color: var(--gx-accent);
  --bs-btn-active-color: var(--gx-accent-ink);
  --bs-btn-active-bg: var(--gx-accent);
  --bs-btn-active-border-color: var(--gx-accent);
}
.btn-icon { width: 44px; height: 44px; padding: 0; color: var(--gx-text); border: 0; }
.btn-icon:hover { color: var(--gx-accent); }

/* Accent text links ("Explore …", "Learn more") */
.link-accent {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 44px; color: var(--gx-accent); font-size: 0.85rem; font-weight: 600; text-decoration: none;
}
.link-accent:hover { color: var(--gx-accent-hover); }
.link-explore::before { content: "\203A"; font-size: 1.1em; line-height: 1; } /* › */
.btn .bi-arrow-right,
.link-accent .bi-arrow-right { transition: transform 0.2s var(--gx-ease); }
.btn:hover .bi-arrow-right,
.link-accent:hover .bi-arrow-right { transform: translateX(3px); }

/* Vehicle-mix lists (hero widget + audience profile) */
.mix-list li {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.8rem; line-height: 1.9; color: var(--gx-muted);
}
.mix-list .bi { font-size: 1rem; color: var(--gx-text); }
.mix-list strong { min-width: 2.4rem; color: var(--gx-text); font-weight: 600; }
.mix-list--sm li { font-size: 0.72rem; line-height: 1.8; gap: 0.5rem; }
.mix-list--sm .bi { font-size: 0.9rem; }
.mix-list--sm strong { min-width: 1.8rem; }

/* ---------- Header ---------- */
.site-header {
  background: linear-gradient(rgba(6, 23, 29, 0.85), rgba(6, 23, 29, 0));
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s, border-color 0.25s;
}
.site-header.is-scrolled,
.site-header:has(.navbar-collapse.show),
.site-header:has(.navbar-collapse.collapsing) {
  background: rgba(6, 23, 29, 0.96);
  border-bottom-color: var(--gx-border);
  backdrop-filter: blur(12px);
}
.site-header .navbar { min-height: var(--gx-header-h); padding-block: 0.25rem; }
.site-header .navbar-brand { font-size: 1.15rem; padding-block: 0.5rem; }
.site-header .navbar-nav .nav-link {
  min-height: 44px; padding: 0.6rem 0.85rem;
  color: var(--gx-text); font-size: 0.85rem; font-weight: 500;
}
.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link.active { color: var(--gx-accent); }
.navbar-toggler { min-width: 44px; min-height: 44px; border-color: var(--gx-border); }
.nav-actions { display: flex; align-items: center; gap: 0.5rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  margin-top: calc(-1 * var(--gx-header-h)); /* image runs up behind the transparent header */
  padding-top: calc(var(--gx-header-h) + 1rem);
  padding-bottom: 1.75rem;
  min-height: clamp(340px, 28vw, 420px);
  display: flex; align-items: center;
}
.hero > .container-xl { width: 100%; }
/* Anchored left so the billboard lands around the 2/3 mark and clears the right-hand
   taglines, as in the mockup; the skyline shows faintly behind the headline. */
.hero-media {
  position: absolute; inset: 0;
  background: url("/assets/img/hero.webp") left center / cover no-repeat;
}
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--gx-bg) 0%, rgba(6, 23, 29, 0.88) 18%, rgba(6, 23, 29, 0.35) 42%, rgba(6, 23, 29, 0) 58%),
    linear-gradient(0deg, var(--gx-bg) 0%, rgba(6, 23, 29, 0) 25%);
}
.display-title {
  font-size: clamp(2.1rem, 2.8vw, 2.6rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.hero-lead { font-size: 1rem; font-weight: 500; margin-bottom: 0.6rem; }
.hero-text { color: var(--gx-muted); font-size: 0.82rem; line-height: 1.5; max-width: 30rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }

.live-card { max-width: 19.5rem; padding: 0.8rem 1rem 0.9rem; margin-top: 1.9rem; }
.live-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.live-site { font-size: 0.75rem; font-weight: 600; }
.live-dot { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: auto; color: var(--gx-green); font-size: 0.75rem; font-weight: 600; }
.live-dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 0 rgba(77, 227, 140, 0.6); animation: pulse 2s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 7px rgba(77, 227, 140, 0); }
  100% { box-shadow: 0 0 0 0 rgba(77, 227, 140, 0); }
}
.live-body { display: flex; align-items: center; gap: 1.1rem; }
.live-total { flex: 1 1 auto; padding-right: 1rem; border-right: 1px solid var(--gx-border); }
.live-count { font-size: 2.1rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.live-unit { margin-top: 0.4rem; font-size: 0.75rem; color: var(--gx-muted); }

.hero-aside { display: flex; flex-direction: column; align-items: flex-end; }
.hero-tagline {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; line-height: 1.9; text-transform: uppercase;
  min-width: 9.5rem;
}
.hero-tagline--rule { margin-top: 3.25rem; padding: 1.5rem 0 1.5rem 1.25rem; border-left: 1px solid rgba(238, 245, 248, 0.55); }

@media (min-width: 1200px) {
  /* Mockup proportions: copy ~34%, widget ~30%, taglines at the far right. */
  .hero-copy { flex: 0 0 auto; width: 34%; }
  .hero-copy + .col-xl-4 { flex: 0 0 auto; width: 28%; }
  .hero-copy ~ .col-xl-4:last-child { flex: 0 0 auto; width: 38%; }
}

/* ---------- Sections ---------- */
.section { padding-block: 2.25rem; }

/* ---------- Engines ---------- */
.engine-card {
  position: relative; overflow: hidden; height: 100%;
  display: flex; flex-direction: column;
  padding: 1.1rem 1.1rem 0.6rem;
  min-height: 12rem;
  background: var(--gx-bg-deep);
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius);
  transition: transform 0.25s var(--gx-ease), border-color 0.25s;
}
.engine-card:hover { transform: translateY(-3px); border-color: var(--gx-accent); }
.engine-card > * { position: relative; z-index: 1; }
.engine-card > .stretched-link { position: static; } /* keeps the clickable area on the card */
.engine-card::before {
  content: ""; position: absolute; inset: 0 0 0 auto; width: 64%; z-index: 0;
  background-position: center right; background-size: cover; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%), linear-gradient(0deg, transparent 8%, #000 45%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 32%), linear-gradient(0deg, transparent 8%, #000 45%);
  mask-composite: intersect;
}
.engine-card--visionx::before { background-image: url("/assets/img/visionx.webp?v=2"); }
.engine-card--eopx::before { background-image: url("/assets/img/eopx.webp?v=2"); }
.engine-card--semx::before { content: none; }

.engine-body { flex: 1 1 auto; }
.engine-body--split { display: flex; justify-content: space-between; gap: 0.75rem; }
.engine-name { font-size: 1.3rem; margin-bottom: 0.6rem; }
.engine-tagline { font-size: 1rem; font-weight: 600; margin-bottom: 0.3rem; white-space: nowrap; }
.engine-copy { color: var(--gx-muted); font-size: 0.78rem; line-height: 1.45; max-width: 13rem; }

.feature-list {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem;
  margin-top: 1rem; font-size: 0.68rem;
}
.feature-list li { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.feature-list .bi { font-size: 1.1rem; }
.engine-card .link-accent { margin-top: 0.1rem; }

.audience-profile {
  flex: 0 0 auto; width: 12.5rem; margin: 0;
  padding: 0.5rem 0.7rem 0.6rem; text-align: center;
  background: #08171c; border: 1px solid var(--gx-border); border-radius: var(--gx-radius);
}
.audience-profile .label-accent { display: block; margin-bottom: 0.4rem; }
.audience-profile-body { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; text-align: left; }
.donut { width: 64px; height: 64px; flex: 0 0 auto; }
.donut-seg { fill: none; stroke-width: 4.5; }
.donut-seg--cars   { stroke: var(--gx-accent); }
.donut-seg--taxis  { stroke: var(--gx-blue); }
.donut-seg--trucks { stroke: #2a6fb3; }
.donut-seg--other  { stroke: #1a4a7a; }
.donut-num { fill: var(--gx-text); font-size: 7.5px; font-weight: 700; text-anchor: middle; }
.donut-lbl { fill: var(--gx-muted); font-size: 3.8px; text-anchor: middle; }

/* ---------- Process (Goal-Gradient) ---------- */
.process {
  position: relative; padding-block: 1.75rem;
  background: url("/assets/img/mountains.webp") center / cover no-repeat;
  border-block: 1px solid var(--gx-border);
}
.process::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6, 23, 29, 0.6), rgba(6, 23, 29, 0.25) 40%, rgba(6, 23, 29, 0.45));
}
.process > .container-xl { position: relative; }
.process-steps { display: flex; align-items: flex-start; justify-content: space-between; }
.step { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.step:not(:last-child)::after {
  content: "\2192"; position: absolute; top: 1.75rem; right: -0.5rem; transform: translate(50%, -50%);
  color: var(--gx-accent); font-size: 1.25rem; line-height: 1;
}
.step-icon {
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; margin-bottom: 0.6rem;
  border: 1px solid rgba(238, 245, 248, 0.5); border-radius: 50%;
  background: rgba(3, 18, 26, 0.75); font-size: 1.35rem;
}
.step-icon--blue { color: var(--gx-blue); }
.step--final .step-icon { border: 2px solid var(--gx-accent); color: var(--gx-accent); box-shadow: 0 0 22px rgba(34, 220, 240, 0.35); }
.step-name { font-size: 0.78rem; }
.step:not(.step--final) .step-name .x { color: inherit; } /* only the final step carries the cyan X */
.step-desc { margin-top: 0.3rem; font-size: 0.78rem; line-height: 1.3; }
.process-claim {
  padding: 1.1rem 0 1.1rem 1.5rem; border-left: 1px solid rgba(238, 245, 248, 0.55);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; line-height: 1.8; text-transform: uppercase;
}

/* ---------- Solutions (audience cards + impact image) ---------- */
.solutions { position: relative; overflow: hidden; }
.audience-card {
  position: relative; height: 100%;
  display: flex; gap: 0.8rem; align-items: flex-start;
  padding: 0.9rem 1rem 0.5rem;
  background: var(--gx-bg-deep);
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius);
  transition: border-color 0.25s;
}
.audience-card:hover { border-color: var(--gx-accent); }
.audience-icon { flex: 0 0 auto; margin-top: 0.25rem; font-size: 2rem; line-height: 1; }
.audience-title { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.3rem; }
.audience-line { font-size: 0.75rem; line-height: 1.35; }
.audience-sub { font-size: 0.68rem; color: var(--gx-muted); margin-top: 0.15rem; }
.audience-card .link-accent { font-size: 0.75rem; }

.impact {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: flex-end;
  min-height: 9.5rem; padding: 1.25rem 2rem 1.25rem 1rem;
  border-radius: var(--gx-radius);
  background: url("/assets/img/city.webp") center / cover no-repeat;
}
.impact::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--gx-bg) 0%, rgba(6, 23, 29, 0) 35%);
}
.impact-text {
  position: relative;
  font-size: 1.05rem; font-weight: 600; line-height: 1.5; text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
@media (min-width: 1200px) {
  /* Bleed the city image to the right edge of the viewport, like the mockup. */
  .impact {
    position: absolute; top: 0; bottom: 0; right: 0; min-height: 0; border-radius: 0;
    left: calc(50% + var(--gx-container) / 2 - var(--gx-container) * 0.19);
  }
  .solutions { --gx-container: 1140px; }
}
@media (min-width: 1400px) { .solutions { --gx-container: 1320px; } }

/* ---------- Focus (light privacy band) ---------- */
.focus { padding-block: 2.25rem; background: var(--gx-light); color: var(--gx-light-ink); }
.focus-intro { display: flex; gap: 1.1rem; align-items: flex-start; }
.focus-shield { flex: 0 0 auto; width: 3.4rem; height: auto; }
.focus-kicker { color: var(--gx-light-muted); font-size: 0.66rem; margin-bottom: 0.35rem; }
.focus-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.4rem; }
.focus-text { font-size: 0.82rem; line-height: 1.45; color: #2b3f50; }

.principles { display: flex; }
.principle {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0.25rem 0.5rem; text-align: center; border-left: 1px solid #c7d3dc;
}
.principle-icon {
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem; margin-bottom: 0.5rem;
  border: 1px solid #c7d3dc; border-radius: 50%; color: var(--gx-accent); font-size: 1.25rem;
}
.principle-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; line-height: 1.5; text-transform: uppercase; color: #2f4a66; }
.principle--vac .bi { font-size: 2.1rem; line-height: 1; color: var(--gx-accent); }
.principle--vac strong { margin-top: 0.3rem; font-size: 0.95rem; font-weight: 700; }
.principle--vac span { font-size: 0.72rem; line-height: 1.3; color: #2f4a66; }

.not-cctv {
  display: flex; gap: 0.9rem; align-items: flex-start;
  padding: 0.9rem 1.1rem; border-radius: var(--gx-radius);
  background: var(--gx-callout); color: var(--gx-callout-ink);
}
.not-cctv .bi { flex: 0 0 auto; font-size: 2rem; line-height: 1; color: var(--gx-light-ink); }
.not-cctv-title { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.3rem; }
.not-cctv-text { font-size: 0.74rem; line-height: 1.45; }

/* ---------- Closing CTA (Peak-End) ---------- */
.cta-panel {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--gx-border); border-radius: var(--gx-radius);
  background: radial-gradient(120% 160% at 100% 0%, rgba(34, 220, 240, 0.14), transparent 55%), var(--gx-bg-deep);
}
.cta-title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 600; margin-bottom: 0.4rem; }
.cta-text { color: var(--gx-muted); font-size: 0.9rem; }

/* ---------- Footer ---------- */
.site-footer { padding-block: 2.5rem 1.5rem; border-top: 1px solid var(--gx-border); background: #031015; }
.footer-brand { font-size: 1.1rem; }
.footer-tagline { margin-top: 0.75rem; font-size: 0.8rem; color: var(--gx-muted); }
.footer-heading { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gx-muted); margin-bottom: 0.5rem; }
.footer-links a { display: inline-block; padding-block: 0.3rem; font-size: 0.875rem; color: var(--gx-text); text-decoration: none; }
.footer-links a:hover { color: var(--gx-accent); }
.footer-legal { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--gx-border); font-size: 0.75rem; color: var(--gx-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1399.98px) {
  .hero-tagline--rule { margin-top: 2rem; }
}
@media (max-width: 1199.98px) {
  .engine-body--split { flex-direction: column; }
  .audience-profile { align-self: flex-start; margin-bottom: 0.5rem; }
  .impact { margin-top: 0.5rem; }
  .principles { margin-top: 0.5rem; }
}
@media (max-width: 991.98px) {
  .site-header .navbar-collapse { padding-bottom: 0.75rem; background: rgba(6, 23, 29, 0.96); } /* fallback where :has() is unsupported */
  .nav-actions { padding-top: 0.5rem; }
  .hero { min-height: 0; }
  .hero-media { width: 100%; opacity: 0.5; }
  .live-card { margin-top: 0; }
  .process-steps { flex-wrap: wrap; row-gap: 1.5rem; }
  .step { flex-basis: 50%; }
  .step:nth-child(2)::after { display: none; }
  .process-claim { border-left: 0; padding: 0; text-align: center; }
  .principles { flex-wrap: wrap; row-gap: 1rem; }
  .principle { flex-basis: 50%; }
  .principle:nth-child(odd) { border-left: 0; }
}
@media (max-width: 767.98px) {
  .engine-card::before { opacity: 0.35; }
  .audience-card { padding-bottom: 0.4rem; }
}
@media (max-width: 575.98px) {
  .audience-profile { width: 100%; }
  .step { flex-basis: 50%; }
  .live-body { gap: 0.8rem; }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}