/* ==========================================================================
   NAVITRONIX INDIA PRIVATE LIMITED
   Website stylesheet v1.0
   Premium corporate / modern technology / clean & minimal
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand — taken from the Navitronix badge logo (cyan ring + orange wordmark) */
  --brand-700: #0b6e93;   /* darkest cyan — text on white, meets WCAG AA */
  --brand-600: #1189b8;   /* button + icon fills */
  --brand-500: #29abdc;   /* logo cyan */
  --brand-400: #5cc3e8;
  --cyan-500: #12b6d4;
  --cyan-400: #5cd0ee;

  --orange-600: #b85a08;  /* darkened logo orange — text on white, meets WCAG AA */
  --orange-500: #f5821f;  /* logo orange */
  --orange-400: #ff9b45;

  --amber: #ffaa00;
  --green: #12b981;

  --grad-brand: linear-gradient(135deg, var(--brand-500) 0%, var(--cyan-400) 100%);
  --grad-accent: linear-gradient(135deg, var(--orange-500) 0%, var(--orange-400) 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(41, 171, 220, .12) 0%, rgba(92, 208, 238, .12) 100%);
  --grad-navy: linear-gradient(160deg, #0c2340 0%, #071528 60%, #050f1d 100%);

  /* Surfaces */
  --navy-900: #050f1d;
  --navy-800: #071528;
  --navy-700: #0c2340;
  --navy-600: #133257;

  --bg: #ffffff;
  --bg-soft: #f5f8fc;
  --bg-soft-2: #eef3fa;

  /* Text */
  --ink: #0a1626;
  --ink-2: #3e5068;
  --muted: #6b7c93;
  --on-dark: #eaf2fb;
  --on-dark-muted: #9db2cc;

  /* Lines & shadows */
  --line: #e3e9f0;
  --line-dark: rgba(255, 255, 255, .12);
  --shadow-sm: 0 1px 2px rgba(10, 22, 38, .06), 0 1px 3px rgba(10, 22, 38, .05);
  --shadow-md: 0 6px 16px rgba(10, 22, 38, .07), 0 2px 6px rgba(10, 22, 38, .05);
  --shadow-lg: 0 18px 44px rgba(10, 22, 38, .12), 0 4px 12px rgba(10, 22, 38, .06);
  --shadow-brand: 0 14px 30px rgba(41, 171, 220, .28);

  /* Geometry */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  --container: 1200px;
  --container-wide: 1360px;
  --gutter: 24px;
  --header-h: 84px;

  /* Type */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* Every type size in this sheet is expressed in rem, so the whole scale —
     headings, body copy, cards, labels, nav — is set from this one value.
     112.5% = 18px against the 16px browser default. */
  font-size: 112.5%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

/* Pages with a sticky sub-navigation need a deeper anchor offset */
html:has(.subnav) { scroll-padding-top: calc(var(--header-h) + 76px); }

body {
  margin: 0;
  font-family: var(--font-body);
  /* In rem so body copy scales with the root, rather than staying pinned. */
  font-size: 1rem;
  line-height: 1.68;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.16;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  font-weight: 700;
}

h1 { font-size: clamp(2.15rem, 4.4vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.18rem, 1.7vw, 1.4rem); }
h4 { font-size: 1.05rem; letter-spacing: -.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-700); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--brand-600); }

img, svg { max-width: 100%; }
img { height: auto; display: block; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }

strong { color: var(--ink); font-weight: 650; }

hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

:focus-visible {
  outline: 3px solid var(--brand-400);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(41, 171, 220, .18); color: var(--ink); }

/* Inline sprite icons.
   `fill`/`stroke` must be set on the *referencing* <svg>: presentation attributes
   on the sprite's root element are not carried into the <use> shadow tree, but
   these properties are inherited, so they are. Without this every icon would
   render as a solid black silhouette. */
svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.15em; }
.ico--sm { width: .95em; height: .95em; }
.ico--lg { width: 1.5em; height: 1.5em; }
svg use { pointer-events: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--brand-600); color: #fff; padding: 12px 20px;
  border-radius: var(--r-sm); font-weight: 600; transition: top .2s var(--ease);
}
.skip-link:focus { top: 14px; color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: 860px; }

.section { padding: clamp(64px, 8vw, 108px) 0; }
.section--tight { padding: clamp(48px, 5.5vw, 72px) 0; }
.section--soft { background: var(--bg-soft); }
.section--soft-2 { background: var(--bg-soft-2); }
.section--dark { background: var(--grad-navy); color: var(--on-dark); position: relative; overflow: hidden; }
/* PCB texture wash so dark bands read as board, not flat paint */
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../img/circuit-pattern.svg");
  background-size: 280px 280px;
  opacity: .3;
  mask-image: radial-gradient(105% 85% at 50% -5%, #000 8%, rgba(0, 0, 0, .35) 45%, transparent 76%);
  -webkit-mask-image: radial-gradient(105% 85% at 50% -5%, #000 8%, rgba(0, 0, 0, .35) 45%, transparent 76%);
}
.section--dark > .container { position: relative; z-index: 1; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p { color: var(--on-dark-muted); }
.section--line-top { border-top: 1px solid var(--line); }

.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-2-1 { grid-template-columns: 1.15fr .85fr; }
.grid-1-2 { grid-template-columns: .85fr 1.15fr; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split--top { align-items: start; }
.split--form { grid-template-columns: .8fr 1.2fr; }

.stack > * + * { margin-top: 18px; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mt-56 { margin-top: 56px; }

/* --------------------------------------------------------------------------
   4. Type helpers
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-700);
  margin: 0 0 16px;
}
.section--dark .eyebrow { color: var(--cyan-400); }
.center .eyebrow { justify-content: center; }

.lead {
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  color: var(--ink-2);
  line-height: 1.7;
}
.section--dark .lead { color: var(--on-dark-muted); }

.section-head { max-width: 780px; margin-bottom: clamp(34px, 4vw, 54px); }
.section-head.center { margin-inline: auto; }
.section-head p:last-child { margin-bottom: 0; }

.text-grad {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.quote {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  line-height: 1.42;
  letter-spacing: -.02em;
  color: #fff;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--brand-600);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn--primary { background: var(--grad-brand); box-shadow: var(--shadow-brand); }
.btn--primary:hover { box-shadow: 0 18px 38px rgba(41, 171, 220, .36); }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.btn--outline:hover { color: var(--brand-600); border-color: var(--brand-400); }

.btn--ghost-light {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  border-color: rgba(255, 255, 255, .26);
  backdrop-filter: blur(6px);
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); color: #fff; }

.btn--white { background: #fff; color: var(--navy-700); }
.btn--white:hover { color: var(--brand-700); box-shadow: var(--shadow-lg); }

.btn--sm { padding: 10px 18px; font-size: .875rem; }
.btn--lg { padding: 16px 32px; font-size: 1rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.center .btn-row { justify-content: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: .93rem;
  color: var(--brand-700);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform .22s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. Header & navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-md); background: rgba(255, 255, 255, .96); }

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Brand */
.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.brand:hover { color: inherit; }
/* Logo lockup. The supplied badge is a circular mark on a white square, so it is
   clipped to a circle — this keeps it clean on the dark footer as well. */
.brand__mark {
  width: 64px; height: 64px; flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  /* The badge is white-on-white against the light header, so its edge would
     dissolve and the mark would read smaller than it is. A hairline ring gives
     it the same presence it has on the dark home/footer headers. */
  box-shadow: 0 0 0 1px var(--line), 0 1px 3px rgba(11, 30, 51, .07);
}
body[data-page="home"] .site-header .brand__mark,
.footer-brand .brand__mark { box-shadow: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.34rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}
.brand__tag {
  font-size: .655rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-top: 3px;
}

/* Primary nav */
.nav { display: flex; align-items: center; gap: 2px; }
.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: .935rem;
  font-weight: 550;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav__link:hover { color: var(--brand-600); background: rgba(41, 171, 220, .06); }
.nav__link.is-active { color: var(--brand-600); font-weight: 650; }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
}
.nav__caret { width: 11px; height: 11px; opacity: .6; transition: transform .22s var(--ease); }
.nav__item:hover .nav__caret { transform: rotate(180deg); }

/* Dropdown */
.dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 620px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav__item:hover .dropdown,
.nav__item:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dropdown::before {
  content: "";
  position: absolute;
  top: -12px; left: 0; right: 0; height: 12px;
}
.dd-link {
  display: flex;
  gap: 12px;
  padding: 11px 13px;
  border-radius: var(--r-md);
  transition: background-color .18s var(--ease);
}
.dd-link:hover { background: var(--bg-soft); }
.dd-link__icon {
  width: 34px; height: 34px; flex: none;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--grad-brand-soft);
  color: var(--brand-600);
}
.dd-link__icon svg { width: 17px; height: 17px; }
.dd-link__title { display: block; font-weight: 650; font-size: .9rem; color: var(--ink); }
.dd-link__desc { display: block; font-size: .79rem; color: var(--muted); line-height: 1.45; margin-top: 2px; }

.header-actions { display: flex; align-items: center; gap: 12px; flex: none; }

/* Hamburger */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  position: relative;
  display: block;
  width: 19px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: background-color .2s var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after {
  content: "";
  position: absolute; left: 0;
  width: 19px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .26s var(--ease), top .2s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 99;
  background: #fff;
  padding: 22px var(--gutter) 40px;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .32s var(--ease), visibility .32s;
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }
.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--ink);
}
.mobile-nav__link.is-active { color: var(--brand-600); }
.mobile-nav__sub { padding: 4px 4px 14px; display: none; }
.mobile-nav__sub.is-open { display: block; }
.mobile-nav__sub a {
  display: block;
  padding: 9px 12px;
  font-size: .93rem;
  color: var(--ink-2);
  border-left: 2px solid var(--line);
}
.mobile-nav__sub a:hover { color: var(--brand-600); border-left-color: var(--brand-500); }
.mobile-nav__toggle-icon { width: 16px; height: 16px; transition: transform .24s var(--ease); color: var(--muted); }
.mobile-nav__link[aria-expanded="true"] .mobile-nav__toggle-icon { transform: rotate(180deg); }
.mobile-nav__cta { margin-top: 26px; display: grid; gap: 12px; }
.mobile-nav__meta { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .9rem; }
.mobile-nav__meta a { display: block; margin-bottom: 8px; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background:
    radial-gradient(135% 42% at 50% 108%, rgba(41, 171, 220, .22) 0%, transparent 62%),
    var(--grad-navy);
  color: var(--on-dark);
  overflow: hidden;
  padding: clamp(70px, 9vw, 118px) 0 clamp(60px, 7vw, 96px);
}
/* --- Layered "connected board" backdrop -------------------------------------
   Paint order inside .hero__bg, back to front:
     0  .hero__glow      ambient colour
     1  .hero__grid      PCB plane laid flat in 3D, receding to the horizon
     2  ::before         flat PCB texture over the whole panel
     3  .tb-scene        parallaxing IC / bus / sensor scene (injected by techbg.js)
     4  ::after          scrim that keeps the copy column readable
   `perspective` on the container is what turns .hero__grid into a real 3D plane. */
.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  perspective: 900px;
  perspective-origin: 50% 42%;
}

.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url("../img/circuit-pattern.svg");
  background-size: 300px 300px;
  opacity: .5;
  mask-image: radial-gradient(115% 95% at 74% 6%, #000 10%, rgba(0, 0, 0, .4) 46%, transparent 78%);
  -webkit-mask-image: radial-gradient(115% 95% at 74% 6%, #000 10%, rgba(0, 0, 0, .4) 46%, transparent 78%);
}

/* Scrim. The scene now runs the full width of the panel, so this only has to
   hold enough density behind the copy column to keep it readable. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    linear-gradient(90deg, rgba(5, 15, 29, .95) 0%, rgba(5, 15, 29, .88) 26%, rgba(5, 15, 29, .58) 48%, rgba(5, 15, 29, .3) 72%, rgba(5, 15, 29, .26) 100%),
    linear-gradient(to top, rgba(5, 15, 29, .62) 0%, transparent 32%);
}

/* The board plane. Tilted away from the viewer and slowly travelling forward. */
.hero__grid {
  position: absolute;
  z-index: 1;
  left: -40%; right: -40%;
  bottom: -14%;
  height: 82%;
  background-image:
    linear-gradient(rgba(92, 208, 238, .4) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(92, 208, 238, .4) 1.5px, transparent 1.5px),
    url("../img/circuit-pattern.svg");
  background-size: 110px 110px, 110px 110px, 220px 220px;
  transform: rotateX(68deg);
  transform-origin: 50% 100%;
  opacity: 1;
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .78) 34%, rgba(0, 0, 0, .28) 62%, transparent 88%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .78) 34%, rgba(0, 0, 0, .28) 62%, transparent 88%);
  animation: tb-travel 44s linear infinite;
}
@keyframes tb-travel { to { background-position: 0 220px, 0 220px, 0 220px; } }

.page-hero .hero__grid { height: 62%; opacity: .78; bottom: -18%; }

.hero__glow {
  position: absolute;
  z-index: 0;
  width: 720px; height: 720px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .32;
}
.hero__glow--1 { top: -280px; right: -140px; background: radial-gradient(circle, #29abdc 0%, transparent 65%); }
.hero__glow--2 { bottom: -340px; left: -180px; background: radial-gradient(circle, #5cd0ee 0%, transparent 65%); opacity: .2; }

/* --------------------------------------------------------------------------
   7b. Page scene (markup injected by assets/js/techbg.js)

   techbg.js builds a different scene per page and paints it into two hosts:
     .tb-scene--hero  inside .hero__bg, over the navy panel
     .tb-scene--page  inside .pagebg, fixed behind the whole document
   Both share one rule set; the four --tb-* tokens are all that changes.
   -------------------------------------------------------------------------- */
.tb-scene {
  --tb-line: #29abdc;   /* copper runs, pins            */
  --tb-edge: #5cc3e8;   /* package and body outlines    */
  --tb-glow: #5cd0ee;   /* live data, nodes, pulses     */
  --tb-text: #a6dcf0;   /* silkscreen labels            */
  --tb-dim:  #7aa8c6;   /* annotation type              */
  --tb-fill: rgba(41, 171, 220, .07);

  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Hero host ------------------------------------------------------------ */
.tb-scene--hero {
  z-index: 3;
  /* Soft top/bottom feather only — the scene fills the panel edge to edge. */
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 80%, rgba(0, 0, 0, .45) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 80%, rgba(0, 0, 0, .45) 100%);
}

/* Page-specific hue on the hero scene: same brand family, a different reading
   per section. The fixed page layer stays neutral so it never fights the copy. */
body[data-page="about"]      .tb-scene--hero { --tb-glow: #7fd4f2; }
body[data-page="services"]   .tb-scene--hero { --tb-glow: #4fd6d0; --tb-edge: #56c9d8; }
body[data-page="solutions"]  .tb-scene--hero { --tb-glow: #6fc9ff; --tb-edge: #63c0ee; }
body[data-page="industries"] .tb-scene--hero { --tb-glow: #5ce0c9; --tb-edge: #56cbd6; }
body[data-page="resources"]  .tb-scene--hero { --tb-glow: #8cc9f5; --tb-edge: #6dbde8; }
body[data-page="contact"]    .tb-scene--hero { --tb-glow: #62d8ee; --tb-edge: #5ec8e6; }

.tb-layer { transition: transform .45s var(--ease); }
.tb-far  { opacity: .3;  filter: blur(.7px); }
.tb-mid  { opacity: .72; }
.tb-near { opacity: .95; }

.tb-trace { stroke: var(--tb-line); stroke-width: 1.4; opacity: .5; }
.tb-line  { stroke: var(--tb-edge); stroke-width: 1.6; }
.tb-flow {
  stroke: var(--tb-glow);
  stroke-width: 1.9;
  stroke-dasharray: 10 24;
  opacity: .95;
  animation: tb-flow 2.6s linear infinite;
}
@keyframes tb-flow { to { stroke-dashoffset: -34; } }

/* Outline that draws itself on, holds, then wipes away. */
.tb-draw {
  stroke: var(--tb-edge);
  stroke-width: 1.6;
  stroke-dasharray: 2600;
  stroke-dashoffset: 2600;
  animation: tb-draw 11s var(--ease) infinite;
}
@keyframes tb-draw {
  0%        { stroke-dashoffset: 2600; }
  38%, 78%  { stroke-dashoffset: 0; }
  100%      { stroke-dashoffset: -2600; }
}

/* Payload riding a path (moved by SMIL, coloured here). */
.tb-packet { fill: var(--tb-glow); stroke: none; opacity: .9; }

.tb-chip rect   { stroke: var(--tb-edge); stroke-width: 1.6; fill: var(--tb-fill); }
.tb-chip circle { stroke: var(--tb-edge); stroke-width: 1.4; }
.tb-key         { stroke: var(--tb-edge); stroke-width: 1.4; }
.tb-pin         { stroke: var(--tb-line); stroke-width: 1.5; opacity: .85; }

.tb-node { stroke: var(--tb-glow); stroke-width: 1.5; }
.tb-dot  { fill: var(--tb-glow); stroke: none; opacity: .85; }
.tb-pulse {
  stroke: var(--tb-glow);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  animation: tb-pulse 3.4s ease-out infinite;
}
@keyframes tb-pulse {
  0%   { transform: scale(.35); opacity: .7; }
  100% { transform: scale(3.6); opacity: 0; }
}

/* Radar sweep — rotates about an origin set inline, in user units. */
.tb-sweep {
  transform-box: view-box;
  opacity: .85;
  animation: tb-sweep 4.6s ease-in-out infinite;
}
@keyframes tb-sweep {
  0%, 100% { transform: rotate(-38deg); }
  50%      { transform: rotate(38deg); }
}

/* Detection bracket blinking as a target is acquired and dropped. */
.tb-blink { animation: tb-blink 4.2s steps(1, end) infinite; }
@keyframes tb-blink {
  0%, 44%   { opacity: 0; }
  46%, 88%  { opacity: 1; }
  90%, 100% { opacity: 0; }
}

/* Vertical scan bar inside the driver-monitoring frame. */
.tb-scan {
  opacity: .8;
  animation: tb-scan 3.6s ease-in-out infinite;
}
@keyframes tb-scan {
  0%, 100% { transform: translateY(-134px); opacity: .15; }
  50%      { transform: translateY(134px);  opacity: .85; }
}

/* Download arrow. */
.tb-fall { animation: tb-fall 2.8s var(--ease) infinite; }
@keyframes tb-fall {
  0%       { transform: translateY(-14px); opacity: 0; }
  35%, 65% { transform: translateY(0);     opacity: .9; }
  100%     { transform: translateY(16px);  opacity: 0; }
}

/* Chart column growing from its baseline. */
.tb-bar {
  fill: var(--tb-fill);
  stroke: var(--tb-edge);
  stroke-width: 1.4;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: tb-bar 6s var(--ease) infinite;
}
@keyframes tb-bar {
  0%       { transform: scaleY(.08); }
  30%, 72% { transform: scaleY(1); }
  100%     { transform: scaleY(.08); }
}

/* Progress arc sweeping around a ring. */
.tb-arc {
  stroke: var(--tb-glow);
  stroke-width: 3;
  stroke-dasharray: 82 245;
  animation: tb-arc 3.4s linear infinite;
}
@keyframes tb-arc { to { stroke-dashoffset: -327; } }

/* Gears. */
.tb-spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: tb-spin 20s linear infinite;
}
.tb-spin--rev { animation-name: tb-spin-rev; }
@keyframes tb-spin     { to { transform: rotate(360deg); } }
@keyframes tb-spin-rev { to { transform: rotate(-360deg); } }

.tb-accent { stroke: #f5821f; opacity: .75; }

.tb-label {
  fill: var(--tb-text);
  stroke: none;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-anchor: middle;
}
.tb-tag {
  fill: var(--tb-dim);
  stroke: none;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: .1em;
}

/* --------------------------------------------------------------------------
   7c. Full-page backdrop

   Fixed behind the document at z-index -1: it paints over the body canvas but
   under every block background, so it shows through the plain (transparent)
   sections and stays hidden behind the soft, dark and hero panels.
   -------------------------------------------------------------------------- */
.pagebg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.pagebg__grid {
  position: absolute;
  inset: -6%;
  background-image:
    linear-gradient(rgba(41, 171, 220, .11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41, 171, 220, .11) 1px, transparent 1px),
    url("../img/circuit-pattern.svg");
  background-size: 96px 96px, 96px 96px, 300px 300px;
  opacity: .28;
  animation: tb-drift 70s linear infinite;
}
@keyframes tb-drift {
  to { background-position: 96px 96px, 96px 96px, 300px 300px; }
}

.pagebg__glow {
  position: absolute;
  width: 780px; height: 780px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .3;
}
.pagebg__glow--1 {
  top: -300px; right: -180px;
  background: radial-gradient(circle, rgba(41, 171, 220, .5) 0%, transparent 66%);
  animation: tb-float-a 26s ease-in-out infinite;
}
.pagebg__glow--2 {
  bottom: -340px; left: -220px;
  background: radial-gradient(circle, rgba(92, 208, 238, .42) 0%, transparent 66%);
  animation: tb-float-b 32s ease-in-out infinite;
}
@keyframes tb-float-a {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-70px, 60px, 0); }
}
@keyframes tb-float-b {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(80px, -50px, 0); }
}

/* The rear layers again, this time over white: darker strokes, far lower
   contrast, and pushed in so it reads as texture rather than a second hero. */
.tb-scene--page {
  --tb-line: #1189b8;
  --tb-edge: #0b6e93;
  --tb-glow: #12b6d4;
  --tb-fill: rgba(17, 137, 184, .05);
  opacity: .13;
  transform: scale(1.3);
  transform-origin: 50% 50%;
}
/* Scroll drift is applied every frame — a transition would only smear it. */
.pagebg .tb-layer { transition: none; }

.hero__inner { position: relative; z-index: 2; }
.hero__layout {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero h1 { color: #fff; margin-bottom: 22px; }
.hero__lead { font-size: clamp(1rem, 1.35vw, 1.13rem); color: #b9cee6; max-width: 56ch; }
.hero .btn-row { margin-top: 32px; }

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 9px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #cfe2f7;
  margin-bottom: 26px;
}
.badge-pill__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan-400);
  box-shadow: 0 0 0 4px rgba(92, 208, 238, .18);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(92, 208, 238, .2); }
  50%      { box-shadow: 0 0 0 8px rgba(92, 208, 238, 0); }
}

/* Hero trust strip */
.hero__strip {
  position: relative;
  z-index: 2;
  margin-top: clamp(48px, 6vw, 76px);
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.hero__strip-item .n {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
  display: block;
  line-height: 1.1;
}
.hero__strip-item .n span { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__strip-item .t {
  font-size: .82rem;
  color: var(--on-dark-muted);
  margin-top: 6px;
  display: block;
  letter-spacing: .02em;
}

/* Page hero (inner pages) */
.page-hero {
  position: relative;
  background:
    radial-gradient(135% 46% at 50% 112%, rgba(41, 171, 220, .18) 0%, transparent 62%),
    var(--grad-navy);
  color: var(--on-dark);
  overflow: hidden;
  padding: clamp(58px, 7vw, 96px) 0 clamp(52px, 6vw, 80px);
}
.page-hero__inner { position: relative; z-index: 2; }
/* Constrain the text blocks, not the container: the container must keep its
   normal width so the hero copy aligns with every section below it. */
.page-hero__inner > * { max-width: 800px; }
.page-hero h1 { color: #fff; }
.page-hero p { color: #b9cee6; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: var(--on-dark-muted);
  margin-bottom: 20px;
  list-style: none;
  padding: 0;
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: 8px; }
.breadcrumb a { color: var(--on-dark-muted); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb li::after { content: "/"; opacity: .4; }
.breadcrumb li:last-child::after { display: none; }
.breadcrumb li[aria-current] { color: var(--cyan-400); }

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
  overflow: hidden;
  height: 100%;
}
.card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: #d3e0f0; }
.card:hover::after { transform: scaleX(1); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-2); font-size: .95rem; }
.card p:last-child { margin-bottom: 0; }
.card--flat:hover { transform: none; }
.card--flat::after { display: none; }

.card__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: var(--grad-brand-soft);
  color: var(--brand-600);
  margin-bottom: 20px;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.card__icon svg { width: 25px; height: 25px; }
.card:hover .card__icon { background: var(--grad-brand); color: #fff; }

.card__num {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--brand-700);
  margin-bottom: 14px;
  display: block;
}

/* Dark card */
.card--dark {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.card--dark h3 { color: #fff; }
.card--dark p { color: var(--on-dark-muted); }
.card--dark:hover { background: rgba(255, 255, 255, .075); border-color: rgba(255, 255, 255, .22); }
.card--dark .card__icon { background: rgba(92, 208, 238, .14); color: var(--cyan-400); }

/* Solution card (with feature list) */
.sol-card { display: flex; flex-direction: column; }
.sol-card .feature-list { margin-top: auto; padding-top: 18px; }

/* Feature list with ticks */
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  font-size: .93rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.feature-list li:last-child { margin-bottom: 0; }
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--grad-brand-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6e93' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
}
.section--dark .feature-list li { color: var(--on-dark-muted); }
.section--dark .feature-list li::before {
  background-color: rgba(92, 208, 238, .16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235cd0ee' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
/* Items carrying a subject icon show it in place of the generic tick. The
   tick stays as the fallback for any item without one. */
.feature-list li[data-icon]::before { display: none; }
.feature-list li[data-icon] > svg {
  position: absolute;
  left: 0; top: .18em;
  width: 18px; height: 18px;
  color: var(--brand-600);
  stroke-width: 2;
}
.section--dark .feature-list li[data-icon] > svg { color: var(--cyan-400); }

.feature-list--2col { columns: 2; column-gap: 30px; }
.feature-list--2col li { break-inside: avoid; }

/* Plain bullet list */
/* Inline attribute list. Deliberately flat — filled, bordered pills read as
   buttons and invite a click these items have no destination for. */
.tick-inline { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.tick-inline li {
  margin: 0;
  padding: 0 0 0 25px;
  position: relative;
  font-size: .9rem;
  font-weight: 450;
  color: var(--ink-2);
}
.tick-inline li::before {
  content: "";
  position: absolute;
  left: 0; top: .3em;
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6e93' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
}
.section--dark .tick-inline li { color: var(--on-dark-muted); }
.section--dark .tick-inline li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235cd0ee' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
/* Same contract as .feature-list: an item carrying a subject icon shows it in
   place of the generic tick, which stays as the fallback. */
.tick-inline li[data-icon]::before { display: none; }
.tick-inline li[data-icon] > svg {
  position: absolute;
  left: 0; top: .13em;
  width: 17px; height: 17px;
  color: var(--brand-600);
  stroke-width: 2;
}
.section--dark .tick-inline li[data-icon] > svg { color: var(--cyan-400); }

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
/* Roadmap status is neutral information — orange stays reserved for safety
   and alert elements, per the brand accent rules. */
.badge--future { background: rgba(100, 122, 148, .14); color: #4a5b70; }
/* Safety / alert callouts keep the orange. */
.badge--alert { background: rgba(245, 130, 31, .13); color: var(--orange-600); }
.badge--live { background: rgba(18, 185, 129, .13); color: #0a7d57; }
.badge--brand { background: var(--grad-brand-soft); color: var(--brand-700); }

/* --------------------------------------------------------------------------
   9. Product / detail blocks
   -------------------------------------------------------------------------- */
.product {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 24px;
  padding: 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
  height: 100%;
}
.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.product__icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.product__icon svg { width: 30px; height: 30px; }
.product__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.product__head h3 { margin: 0; }
.product__desc { font-size: .95rem; margin-bottom: 18px; }
.product__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

/* Category header strip inside a page */
.cat-head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 34px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.cat-head__icon {
  width: 56px; height: 56px; flex: none;
  border-radius: 15px;
  display: grid; place-items: center;
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.cat-head__icon svg { width: 26px; height: 26px; }
.cat-head h2 { margin-bottom: 6px; }
.cat-head p { margin: 0; font-size: .97rem; }

/* Sticky sub navigation */
.subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 60;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.subnav__scroll {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 10px 0;
}
.subnav__scroll::-webkit-scrollbar { display: none; }
.subnav a {
  padding: 9px 16px;
  border-radius: var(--r-pill);
  font-size: .875rem;
  font-weight: 550;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.subnav a:hover { background: var(--bg-soft); color: var(--brand-600); }
.subnav a.is-active { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-brand); }

/* --------------------------------------------------------------------------
   10. Stats, values, timeline
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.stat {
  padding: 26px 24px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  text-align: center;
}
.stat__n {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1;
  display: block;
}
.stat__l { font-size: .85rem; color: var(--on-dark-muted); margin-top: 10px; display: block; }

.value-row {
  display: flex;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.value-row:last-child { border-bottom: 0; }
.value-row__n {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand-700);
  flex: none;
  width: 44px;
  padding-top: 2px;
}
.value-row h3 { margin-bottom: 6px; font-size: 1.15rem; }
.value-row p { margin: 0; font-size: .95rem; }

.timeline { position: relative; padding-left: 34px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 9px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--brand-500), var(--cyan-400));
  border-radius: 2px;
  opacity: .35;
}
.timeline__item { position: relative; padding-bottom: 26px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: -34px; top: 6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--brand-500);
  box-shadow: 0 0 0 4px rgba(41, 171, 220, .12);
}
.timeline__item h4 { margin-bottom: 4px; color: var(--ink); }
.timeline__item p { margin: 0; font-size: .93rem; }
.section--dark .timeline__item::before { background: var(--navy-800); }

/* --------------------------------------------------------------------------
   11. Media / illustration placeholders
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--navy-700);
}
.media img { width: 100%; display: block; }
/* Crops a tall asset to a wider frame so it does not tower over a short text
   column and leave the row half empty. */
.media--fit { aspect-ratio: 16 / 10; }
.media--fit img { height: 100%; object-fit: cover; }

.media-ph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 320px;
  padding: 32px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(41, 171, 220, .22) 0%, transparent 55%),
    radial-gradient(120% 120% at 100% 100%, rgba(92, 208, 238, .2) 0%, transparent 55%),
    var(--navy-700);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #cfe2f7;
  text-align: center;
  overflow: hidden;
}
.media-ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/circuit-pattern.svg");
  background-size: 190px 190px;
  opacity: .75;
}
.media-ph > * { position: relative; }
.media-ph__icon {
  width: 60px; height: 60px;
  border-radius: 18px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
}
.media-ph__icon svg { width: 28px; height: 28px; color: var(--cyan-400); }
.media-ph__label { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: #fff; }
.media-ph__hint { font-size: .8rem; color: #90a9c6; letter-spacing: .03em; max-width: 34ch; }
.media-ph--sm { min-height: 220px; }
.media-ph--wide { min-height: 380px; }

/* Floating spec chip over media */
.media-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-lg);
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  backdrop-filter: blur(8px);
}
.media-chip svg { width: 18px; height: 18px; color: var(--brand-600); flex: none; }
.media-chip--tl { top: 20px; left: 20px; }
.media-chip--br { bottom: 20px; right: 20px; }

/* --------------------------------------------------------------------------
   12. Ecosystem diagram (Solutions 3.9)
   -------------------------------------------------------------------------- */
.eco { display: grid; gap: 18px; }
.eco__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.eco__row--3 { grid-template-columns: repeat(3, 1fr); }
.eco__node {
  padding: 20px 18px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  text-align: center;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.eco__node:hover { background: rgba(255, 255, 255, .1); border-color: rgba(92, 208, 238, .5); transform: translateY(-3px); }
.eco__node svg { width: 22px; height: 22px; color: var(--cyan-400); margin-bottom: 10px; }
.eco__node span { display: block; font-size: .88rem; font-weight: 600; color: #fff; }
.eco__node small { display: block; font-size: .75rem; color: var(--on-dark-muted); margin-top: 4px; }
.eco__bus {
  padding: 18px;
  border-radius: var(--r-md);
  background: var(--grad-brand);
  color: #fff;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .04em;
  font-size: .92rem;
  box-shadow: var(--shadow-brand);
}
.eco__arrow {
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .3);
}
.eco__arrow svg { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   13. Accordion
   -------------------------------------------------------------------------- */
.accordion { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.acc__item + .acc__item { border-top: 1px solid var(--line); }
.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.acc__btn:hover { background: var(--bg-soft); color: var(--brand-600); }
.acc__btn svg { width: 18px; height: 18px; flex: none; color: var(--brand-500); transition: transform .28s var(--ease); }
.acc__btn[aria-expanded="true"] svg { transform: rotate(45deg); }
.acc__panel { display: none; padding: 0 24px 24px; }
.acc__panel.is-open { display: block; }
.acc__panel p:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   14. Tables
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
table.data { width: 100%; border-collapse: collapse; min-width: 480px; }
table.data th, table.data td { padding: 15px 20px; text-align: left; font-size: .93rem; }
table.data thead th {
  background: var(--bg-soft);
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
table.data tbody tr + tr td { border-top: 1px solid var(--line); }
table.data td:first-child { font-weight: 600; color: var(--ink); }

/* --------------------------------------------------------------------------
   15. Resources / download cards
   -------------------------------------------------------------------------- */
.doc-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.doc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #cddff5; }
.doc-card__icon {
  width: 42px; height: 42px; flex: none;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--grad-brand-soft);
  color: var(--brand-600);
}
.doc-card__icon svg { width: 20px; height: 20px; }
.doc-card__body { flex: 1; min-width: 0; }
.doc-card__title { display: block; font-weight: 620; font-size: .94rem; color: var(--ink); }
.doc-card__meta { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }
/* Reads "Request →" rather than a download glyph: the documents are issued on
   request, so the action must not promise an immediate file. */
.doc-card__action {
  flex: none;
  color: var(--brand-700);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 620;
  white-space: nowrap;
}
.doc-card__action svg { width: 16px; height: 16px; }
.doc-card:hover .doc-card__action svg { transform: translateX(2px); }
.doc-card__action svg { transition: transform .2s var(--ease); }

/* On narrow screens the label would squeeze the document title. */
@media (max-width: 420px) {
  .doc-card__action { font-size: 0; gap: 0; }
  .doc-card__action svg { width: 18px; height: 18px; }
}

/* --------------------------------------------------------------------------
   16. Forms
   -------------------------------------------------------------------------- */
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(26px, 3.4vw, 44px);
  box-shadow: var(--shadow-md);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-size: .84rem;
  font-weight: 620;
  color: var(--ink);
  letter-spacing: .01em;
}
.field label .req { color: #e0483d; margin-left: 2px; }
/* Named rather than starred: with only four optional fields left it is clearer
   to label those than to leave the reader inferring from the absence of a *. */
.field label .optional {
  margin-left: 4px;
  font-weight: 400;
  font-size: .78em;
  color: var(--muted);
  letter-spacing: .01em;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  font-family: inherit;
  font-size: .94rem;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
  appearance: none;
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7c93' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--brand-400);
  box-shadow: 0 0 0 4px rgba(41, 171, 220, .12);
}
.field input::placeholder, .field textarea::placeholder { color: #9aa9bd; }

.field .error-msg {
  display: none;
  font-size: .78rem;
  color: #d63a2e;
  font-weight: 550;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #e0483d; background: #fff7f6; }
.field.has-error .error-msg { display: block; }

.field label.form-consent {
  display: flex;
  font-weight: 400;
  gap: 11px;
  align-items: flex-start;
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.55;
}
/* `.field input` above sets appearance:none, which also strips the native
   checkbox glyph and makes accent-color inert — so draw the box and tick here. */
.field label.form-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  padding: 0;
  flex: none;
  border-radius: 5px;
  border: 1.5px solid var(--brand-400);
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.field label.form-consent input[type="checkbox"]::after {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform .15s var(--ease);
  background: #fff;
  clip-path: polygon(14% 47%, 0 61%, 39% 100%, 100% 22%, 85% 9%, 37% 71%);
}
.field label.form-consent input[type="checkbox"]:checked {
  background: var(--brand-600);
  border-color: var(--brand-600);
}
.field label.form-consent input[type="checkbox"]:checked::after { transform: scale(1); }
.field label.form-consent input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(41, 171, 220, .22);
}

.form-note { font-size: .82rem; color: var(--muted); margin-top: 14px; }

.form-status {
  display: none;
  margin-top: 18px;
  padding: 15px 18px;
  border-radius: var(--r-md);
  font-size: .9rem;
  font-weight: 550;
}
.form-status.is-visible { display: block; }
.form-status--ok { background: rgba(18, 185, 129, .1); color: #0a7d57; border: 1px solid rgba(18, 185, 129, .28); }
.form-status--err { background: rgba(224, 72, 61, .08); color: #b8342a; border: 1px solid rgba(224, 72, 61, .25); }

/* --------------------------------------------------------------------------
   17. Contact blocks
   -------------------------------------------------------------------------- */
.contact-tile {
  display: flex;
  gap: 16px;
  padding: 24px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  height: 100%;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.contact-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.contact-tile__icon {
  width: 46px; height: 46px; flex: none;
  border-radius: 13px;
  display: grid; place-items: center;
  background: var(--grad-brand);
  color: #fff;
}
.contact-tile__icon svg { width: 21px; height: 21px; }
.contact-tile h4 { margin: 0 0 6px; }
.contact-tile p, .contact-tile a { font-size: .93rem; margin: 0; }
.contact-tile a { display: block; color: var(--ink-2); }
.contact-tile a:hover { color: var(--brand-600); }

.map-embed {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  min-height: 380px;
  background: var(--bg-soft-2);
}
.map-embed iframe { width: 100%; height: 420px; border: 0; display: block; }
.map-embed--sm { min-height: 0; border-radius: var(--r-lg); }
.map-embed--sm iframe { height: 320px; }

/* Location card — address block + embedded map + directions link */
.map-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border-radius: var(--r-xl);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.map-card__head { display: flex; gap: 16px; }
.map-card__head h4 { margin: 0 0 6px; }
.map-card__head p { font-size: .93rem; margin: 0; }
.map-card .btn { align-self: flex-start; margin-top: auto; }

/* Map figure — brand highlight ring over the pinned coordinates.
   The iframe is click-blocked until the visitor activates it, so the ring
   (which is fixed to the frame's centre) cannot drift off the pin by panning. */
.map-figure { position: relative; }
.map-figure.is-locked iframe { pointer-events: none; }

.map-figure__highlight {
  position: absolute;
  top: 50%; left: 50%;
  width: 62px; height: 62px;
  margin: -31px 0 0 -31px;
  border-radius: 50%;
  border: 3px solid var(--brand-500);
  background: rgba(41, 171, 220, .14);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .75), var(--shadow-md);
  pointer-events: none;
}
.map-figure__highlight::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 3px solid var(--brand-500);
  animation: map-pulse 2.4s var(--ease) infinite;
}
@keyframes map-pulse {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

.map-figure__coords {
  position: absolute;
  left: 12px; bottom: 12px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow-sm);
  font-size: .78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  pointer-events: none;
}

.map-figure__unlock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 12px;
  border: 0;
  border-radius: var(--r-lg);
  background: transparent;
  cursor: pointer;
  font: inherit;
}
.map-figure__unlock span {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow-sm);
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-2);
}
.map-figure__unlock:hover span { color: var(--brand-600); }

/* Once unlocked the frame pans freely, so the centred ring would lie —
   both it and the prompt are removed. */
.map-figure:not(.is-locked) .map-figure__highlight,
.map-figure:not(.is-locked) .map-figure__unlock { display: none; }

@media (prefers-reduced-motion: reduce) {
  .map-figure__highlight::after { animation: none; }
}

/* --------------------------------------------------------------------------
   18. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--grad-navy);
  color: #fff;
  padding: clamp(56px, 7vw, 90px) 0;
}
/* Both ambient glows in one layer, freeing ::after for the board texture. */
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(660px 660px at calc(100% + 60px) -200px, rgba(41, 171, 220, .42) 0%, transparent 62%),
    radial-gradient(520px 520px at -80px calc(100% + 140px), rgba(92, 208, 238, .3) 0%, transparent 62%);
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("../img/circuit-pattern.svg");
  background-size: 300px 300px;
  opacity: .32;
  mask-image: linear-gradient(105deg, transparent 4%, rgba(0, 0, 0, .55) 42%, #000 100%);
  -webkit-mask-image: linear-gradient(105deg, transparent 4%, rgba(0, 0, 0, .55) 42%, #000 100%);
}
.cta-band .container { position: relative; z-index: 2; }
/* When the CTA follows a dark section, keep the two blocks visually distinct. */
.section--dark + .cta-band { border-top: 1px solid rgba(255, 255, 255, .1); }
.cta-band h2 { color: #fff; }
.cta-band p { color: #b9cee6; }
.cta-band__inner {
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 40px;
  align-items: center;
}
.cta-band__inner .btn-row { justify-content: flex-end; }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy-900);
  color: var(--on-dark-muted);
  padding: clamp(52px, 6vw, 76px) 0 0;
  font-size: .92rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 44px;
  padding-bottom: 46px;
}
.site-footer h5 {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: var(--on-dark-muted); font-size: .9rem; }
.footer-links a:hover { color: var(--cyan-400); }

.footer-brand .brand__name { color: #fff; }
.footer-brand .brand__tag { color: var(--cyan-400); }
.footer-about { margin: 20px 0 22px; max-width: 40ch; line-height: 1.65; font-size: .9rem; }

.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--on-dark-muted);
  transition: background-color .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.social-row a:hover { background: var(--grad-brand); color: #fff; transform: translateY(-2px); border-color: transparent; }
.social-row svg { width: 17px; height: 17px; }

.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { display: flex; gap: 12px; margin-bottom: 15px; align-items: flex-start; }
.footer-contact svg { width: 17px; height: 17px; color: var(--cyan-400); flex: none; margin-top: 3px; }
.footer-contact a { color: var(--on-dark-muted); }
.footer-contact a:hover { color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: .84rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-bottom a { color: var(--on-dark-muted); }
.footer-bottom a:hover { color: #fff; }

/* Back to top */
.to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 90;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-brand);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top svg { width: 19px; height: 19px; }

/* --------------------------------------------------------------------------
   20. Scroll reveal
   -------------------------------------------------------------------------- */
/* Scoped to .js (set by icons.js): without JavaScript nothing is ever hidden. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }
[data-reveal-delay="5"] { transition-delay: .4s; }

/* --------------------------------------------------------------------------
   21. Responsive
   -------------------------------------------------------------------------- */
/* Raised from 1100px: with the larger root scale the seven nav links need to
   start tightening sooner or they crowd the Get in Touch button. */
@media (max-width: 1280px) {
  .nav__link { padding: 10px 10px; font-size: .9rem; }
  .brand__tag { display: none; }
}

/* Between the 980px mobile switch and ~1120px the full desktop nav (brand +
   seven items + CTA) was wider than the viewport, so the whole page scrolled
   sideways on landscape tablets. Tighten the header through that band. */
@media (max-width: 1120px) and (min-width: 981px) {
  .nav__link { padding: 9px 7px; font-size: .855rem; }
  .nav { gap: 0; }
  .brand__mark { width: 46px; height: 46px; }
  .brand__name { font-size: 1.12rem; }
  .header-actions .btn { padding: 9px 14px; font-size: .84rem; }
  .header-inner { gap: 12px; }
}

@media (max-width: 980px) {
  :root { --header-h: 72px; }
  .brand__mark { width: 52px; height: 52px; }
  .nav, .header-actions .btn { display: none; }
  .nav-toggle { display: flex; }
  .hero__layout { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  /* minmax(0, 1fr) rather than 1fr: a bare 1fr track keeps a min-content floor,
     which lets wide children (e.g. the min-width tables) push the page sideways. */
  .split, .split--form { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2-1, .grid-1-2 { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 34px; }
  .cta-band__inner { grid-template-columns: 1fr; }
  .cta-band__inner .btn-row { justify-content: flex-start; }
  .eco__row { grid-template-columns: repeat(2, 1fr); }

  /* No room for the detailed scene once the hero stacks — keep the board
     texture, the 3D plane and the drifting page backdrop, drop the vector
     scene in both hosts, and even out the scrim. */
  .tb-scene { display: none; }
  .pagebg__grid { opacity: .38; }
  .hero__bg::before { opacity: .34; }
  .hero__grid { opacity: .55; }
  .hero__bg::after {
    background: linear-gradient(to bottom,
      rgba(5, 15, 29, .74) 0%, rgba(5, 15, 29, .5) 42%, rgba(5, 15, 29, .9) 100%);
  }
}

@media (max-width: 720px) {
  /* Ease the scale back on phones — 18px body is generous on a narrow column. */
  html { font-size: 106.25%; }
  :root { --gutter: 18px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .hero__strip { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .feature-list--2col { columns: 1; }
  .product { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cat-head { flex-direction: column; gap: 14px; }
  .btn-row .btn { width: 100%; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .eco__row, .eco__row--3 { grid-template-columns: minmax(0, 1fr); }
  .media-chip { display: none; }
  .timeline { padding-left: 28px; }
}

@media (max-width: 420px) {
  .hero__strip { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   22. Motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  /* Hold the scene on a readable frame rather than a blank one: the draw-on
     outlines and the growing bars would otherwise freeze at zero. */
  .tb-draw { stroke-dashoffset: 0; }
  .tb-bar  { transform: none; }
  .tb-blink, .tb-scan, .tb-fall { opacity: .8; }
}

@media print {
  .site-header, .mobile-nav, .to-top, .subnav, .cta-band, .pagebg { display: none !important; }
  body { color: #000; }
  .section--dark, .hero, .page-hero { background: #fff !important; color: #000 !important; }
  .section--dark h1, .section--dark h2, .hero h1, .page-hero h1 { color: #000 !important; }
}

/* --------------------------------------------------------------------------
   22. Home page — dark canvas + reference-design blocks

   The home page runs the navy treatment end to end (header, body, cards)
   instead of the light shell the inner pages use. Everything here is scoped to
   body[data-page="home"] so about/solutions/... keep the white layout.
   Appended last so it wins over the earlier component rules; the page-scoped
   selectors also outrank the unscoped responsive block above.
   -------------------------------------------------------------------------- */
body[data-page="home"] {
  background: var(--navy-900);
  color: var(--on-dark-muted);
}

/* --- Header on the dark canvas -------------------------------------------- */
body[data-page="home"] .site-header {
  background: rgba(5, 15, 29, .62);
  border-bottom-color: rgba(255, 255, 255, .09);
}
body[data-page="home"] .site-header.is-stuck {
  background: rgba(5, 15, 29, .94);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
body[data-page="home"] .brand__name { color: #fff; }
body[data-page="home"] .brand__tag { color: var(--cyan-400); }

body[data-page="home"] .nav__link { color: #c3d6ec; }
body[data-page="home"] .nav__link:hover { color: #fff; background: rgba(255, 255, 255, .07); }
/* The base rule already draws the active underline; on navy it only needs the
   lighter cyan so it reads against the dark header. */
body[data-page="home"] .nav__link.is-active { color: var(--cyan-400); }
body[data-page="home"] .nav__link.is-active::after { background: var(--cyan-400); }

body[data-page="home"] .nav-toggle { border-color: rgba(255, 255, 255, .22); }
body[data-page="home"] .nav-toggle span,
body[data-page="home"] .nav-toggle span::before,
body[data-page="home"] .nav-toggle span::after { background: #fff; }
body[data-page="home"] .nav-toggle[aria-expanded="true"] span { background: transparent; }

body[data-page="home"] .mobile-nav { background: var(--navy-900); }
body[data-page="home"] .mobile-nav__link { color: #dce9f7; border-bottom-color: rgba(255, 255, 255, .1); }
body[data-page="home"] .mobile-nav__sub a { color: var(--on-dark-muted); }

/* --- Surfaces -------------------------------------------------------------- */
body[data-page="home"] .section { background: transparent; }
/* The alternating band becomes a faint lift rather than a light panel. */
body[data-page="home"] .section--soft {
  background: rgba(255, 255, 255, .028);
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
/* Retune the fixed page texture for a navy ground — the light-page tokens
   would otherwise paint near-black lines that never show. */
body[data-page="home"] .tb-scene--page {
  --tb-line: #29abdc;
  --tb-edge: #5cc3e8;
  --tb-glow: #5cd0ee;
  --tb-fill: rgba(41, 171, 220, .06);
  opacity: .1;
}
body[data-page="home"] .pagebg__grid { opacity: .16; }

/* --- Type on the dark canvas ---------------------------------------------- */
body[data-page="home"] h1,
body[data-page="home"] h2,
body[data-page="home"] h3,
body[data-page="home"] h4 { color: #fff; }
body[data-page="home"] p,
body[data-page="home"] li,
body[data-page="home"] .lead { color: var(--on-dark-muted); }
body[data-page="home"] .eyebrow { color: var(--cyan-400); }
body[data-page="home"] strong { color: #fff; }
body[data-page="home"] .link-arrow { color: var(--cyan-400); }
body[data-page="home"] .link-arrow:hover { color: #fff; }
body[data-page="home"] .product__label { color: #fff; }

body[data-page="home"] .btn--outline {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  border-color: rgba(255, 255, 255, .26);
  box-shadow: none;
}
body[data-page="home"] .btn--outline:hover { color: #fff; border-color: rgba(92, 208, 238, .7); }

/* --- Cards ----------------------------------------------------------------- */
body[data-page="home"] .card {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: none;
  backdrop-filter: blur(6px);
}
body[data-page="home"] .card:hover {
  background: rgba(255, 255, 255, .075);
  border-color: rgba(92, 208, 238, .38);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .42);
}
body[data-page="home"] .card h3 { color: #fff; }
body[data-page="home"] .card p { color: var(--on-dark-muted); }
body[data-page="home"] .card__icon { background: rgba(92, 208, 238, .13); color: var(--cyan-400); }
body[data-page="home"] .card__num { color: var(--cyan-400); }
body[data-page="home"] .feature-list li { color: var(--on-dark-muted); }
body[data-page="home"] .feature-list svg { color: var(--cyan-400); }

/* --- Hero stat panel -------------------------------------------------------
   The reference frames the hero figures in a bordered card rather than hanging
   them off a rule, so the base .hero__strip border-top is replaced outright. */
body[data-page="home"] .hero__strip {
  margin-top: clamp(38px, 4.5vw, 60px);
  padding: 26px 30px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .045);
  backdrop-filter: blur(6px);
  gap: 0;
}
body[data-page="home"] .hero__strip-item { padding-inline: 26px; }
body[data-page="home"] .hero__strip-item:first-child { padding-left: 0; }
body[data-page="home"] .hero__strip-item:last-child { padding-right: 0; }
body[data-page="home"] .hero__strip-item + .hero__strip-item {
  border-left: 1px solid rgba(255, 255, 255, .1);
}

/* --------------------------------------------------------------------------
   23. Cloud platform panel
   A bordered panel whose caption sits astride the top border.
   -------------------------------------------------------------------------- */
.platform-panel {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .035);
  padding: 52px 30px 36px;
}
.platform-panel__label {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 24px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(92, 208, 238, .38);
  background: var(--navy-900);
  color: var(--cyan-400);
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.platform-panel__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 26px 18px;
}
.platform-panel__grid li {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 13px;
}
.platform-panel__ico {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 15px;
  background: rgba(92, 208, 238, .12);
  border: 1px solid rgba(92, 208, 238, .22);
  color: var(--cyan-400);
}
.platform-panel__ico svg { width: 25px; height: 25px; }
.platform-panel__grid span:not(.platform-panel__ico) {
  font-size: .87rem;
  font-weight: 550;
  line-height: 1.35;
  color: #d6e6f7;
}

/* --------------------------------------------------------------------------
   24. Highlight cards & mission band
   -------------------------------------------------------------------------- */
.card--highlight h3 { color: var(--cyan-400) !important; }

.promise {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 30px 34px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .035);
}
.promise__ico {
  width: 74px; height: 74px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(92, 208, 238, .12);
  border: 1px solid rgba(92, 208, 238, .3);
  color: var(--cyan-400);
}
.promise__ico svg { width: 32px; height: 32px; }
.promise h2 {
  font-size: clamp(1.35rem, 2.1vw, 1.72rem);
  margin-bottom: 8px;
  color: var(--cyan-400);
}
.promise p { margin: 0; font-size: .96rem; }

@media (max-width: 980px) {
  .platform-panel__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .promise { grid-template-columns: auto minmax(0, 1fr); }
  .promise .btn { grid-column: 1 / -1; justify-self: start; }
  body[data-page="home"] .hero__strip { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  body[data-page="home"] .hero__strip-item:nth-child(odd) { padding-left: 0; }
  body[data-page="home"] .hero__strip-item:nth-child(2n+1) { border-left: 0; }
}

@media (max-width: 620px) {
  .platform-panel { padding: 46px 20px 30px; }
  .platform-panel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-panel__label { letter-spacing: .16em; font-size: .68rem; padding: 7px 16px; }
  .promise { grid-template-columns: minmax(0, 1fr); text-align: left; padding: 26px 22px; }
  body[data-page="home"] .hero__strip { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  body[data-page="home"] .hero__strip-item { padding-inline: 0; border-left: 0 !important; }
}

/* Reference layout runs the platform panel straight off the hero. */
.section--flush-top { padding-top: 0; }

/* --------------------------------------------------------------------------
   25. Background restraint — PCB texture is a feature, not a wallpaper

   The circuit scene belongs to the hero and to the dark bands that punctuate
   a page. Painting it behind every section as well (via the fixed .pagebg)
   made all seven pages read as one continuous board. On the inner pages the
   fixed layer is therefore dropped entirely and normal content sits on clean
   white, so the dark blocks land as deliberate accents. The home page keeps
   its dark canvas.
   -------------------------------------------------------------------------- */
body:not([data-page="home"]) .pagebg { display: none; }

/* Plain sections were transparent so the backdrop could show through; with the
   backdrop gone they need to paint their own ground. Excluding the modifier
   classes matters: this selector outranks .section--dark, and without the
   :not() chain it would repaint the dark bands white. */
body:not([data-page="home"]) .section:not(.section--soft):not(.section--soft-2):not(.section--dark) {
  background: var(--bg);
}

/* Dark bands keep the board texture, but softer than the hero so a page with
   several of them doesn't repeat the hero at full strength. */
body:not([data-page="home"]) .section--dark::before { opacity: .16; }

/* One texture per dark run: consecutive dark bands (or a dark band running
   straight into the CTA) would otherwise tile the same pattern twice. */
.section--dark + .section--dark::before,
.section--dark + .cta-band::after { opacity: .1; }

/* Current-vs-roadmap key on the Solutions page. */
.status-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin: 28px 0 0;
  font-size: .9rem;
  color: var(--ink-2);
}
.status-key__item { display: inline-flex; align-items: center; gap: 9px; }
@media (max-width: 620px) {
  .status-key { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* --------------------------------------------------------------------------
   26. Engineering flow (About) — Concept → … → Production

   Six numbered stages. Three-up on desktop, two-up on tablet, stacked on
   phones; the connector line is dropped once the steps wrap so it never
   points at the wrong neighbour.
   -------------------------------------------------------------------------- */
.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  counter-reset: flow;
}
.flow__step {
  position: relative;
  padding: 28px 24px 26px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
/* Connector between steps within a row. */
.flow__step::after {
  content: "";
  position: absolute;
  top: 46px;
  right: -26px;
  width: 26px;
  height: 1px;
  background: var(--line);
}
.flow__step:nth-child(3n)::after,
.flow__step:last-child::after { display: none; }
.flow__n {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--grad-brand-soft, rgba(41, 171, 220, .12));
  color: var(--brand-700, #0b6e93);
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .04em;
}
.flow__step h3 { font-size: 1.08rem; margin: 0 0 8px; }
.flow__step p { margin: 0; font-size: .94rem; }

@media (max-width: 900px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow__step:nth-child(3n)::after { display: block; }
  .flow__step:nth-child(2n)::after { display: none; }
}
@media (max-width: 600px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  /* Stacked: no horizontal connector to draw. */
  .flow__step::after { display: none !important; }
}

/* Inline notice — used where a page needs to set an expectation before the
   reader starts clicking (e.g. documents issued on request). */
.notice {
  padding: 14px 18px;
  border-radius: var(--r-md, 14px);
  font-size: .93rem;
  line-height: 1.6;
}
.notice--info {
  background: rgba(41, 171, 220, .1);
  border: 1px solid rgba(41, 171, 220, .28);
  color: var(--ink-2);
}
/* On the dark page heroes the light-page colours would disappear. */
.page-hero .notice--info,
.hero .notice--info {
  background: rgba(92, 208, 238, .12);
  border-color: rgba(92, 208, 238, .32);
  color: #d6e6f7;
}

/* Inline links inside the dark CTA band — the default link colour is tuned for
   white backgrounds and goes near-invisible here. */
.cta-band p a {
  color: var(--cyan-400);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cta-band p a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   27. Outcome table (Industries) — sector / problem / result

   A three-column table on desktop. On phones each row becomes a stacked card
   with the sector as its heading, and the header row is dropped (it is already
   aria-hidden, so nothing is lost).
   -------------------------------------------------------------------------- */
.outcome-table {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg);
}
.outcome-row {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1.3fr);
  gap: 22px;
  padding: 20px 24px;
  border-top: 1px solid var(--line);
  font-size: .93rem;
  align-items: start;
}
.outcome-row:first-child { border-top: 0; }
.outcome-row--head {
  background: var(--bg-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.outcome-row__k { font-weight: 650; color: var(--ink); }
.outcome-row__k a { color: inherit; }
.outcome-row__k a:hover { color: var(--brand-700); }

@media (max-width: 860px) {
  .outcome-row--head { display: none; }
  .outcome-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 20px 20px 22px;
  }
  .outcome-row__k {
    font-size: 1.02rem;
    margin-bottom: 2px;
  }
  /* Label the two unheaded cells now that the header row is gone. */
  .outcome-row > span:nth-child(2)::before {
    content: "Problem — ";
    font-weight: 650;
    color: var(--muted);
  }
  .outcome-row > span:nth-child(3)::before {
    content: "Result — ";
    font-weight: 650;
    color: var(--brand-700);
  }
}

/* --------------------------------------------------------------------------
   28. Solution summary chips (Home)

   Home names what sits inside each solution domain without repeating the
   feature lists that /solutions carries in full.
   -------------------------------------------------------------------------- */
.sol-card__tags {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sol-card__tags li {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--brand-700);
  background: rgba(41, 171, 220, .1);
  border: 1px solid rgba(41, 171, 220, .22);
}
/* Home runs on the dark canvas, where the light-page tones vanish. */
body[data-page="home"] .sol-card__tags li {
  color: var(--cyan-400);
  background: rgba(92, 208, 238, .1);
  border-color: rgba(92, 208, 238, .26);
}

/* The concrete hand-off named at the foot of each Services capability card. */
.deliverable {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: .84rem;
  font-weight: 600;
  color: var(--brand-700);
}