/* ==========================================================
   Bytescreen — styles.css
   Palette
     --night   #10163a  deep brand navy (dark sections)
     --ink     #2c3370  Bytescreen brand indigo
     --signal  #7d8dff  LED blue, taken from the product photography
     --paper   #f3f5fa  cool page ground
     --steel   #6b7291  secondary text
     --ok      #4fe0a0  "protected" status light only
   Type
     Archivo (expanded widths) for headings — hardware nameplate feel
     IBM Plex Sans for body copy
   ========================================================== */

:root {
  --night: #10163a;
  --night-2: #182052;
  --ink: #2c3370;
  --signal: #7d8dff;
  --paper: #f3f5fa;
  --white: #ffffff;
  --text: #1a2046;
  --steel: #6b7291;
  --line: #d9ddea;
  --line-dark: rgba(173, 184, 255, 0.18);
  --ok: #4fe0a0;

  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --max: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --section: clamp(72px, 10vw, 128px);
  --radius: 6px;
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }
address { font-style: normal; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-stretch: 118%;
  font-variation-settings: "wdth" 118;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0; }

.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.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;
}

:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--white); color: var(--ink); padding: 10px 16px; border-radius: var(--radius);
  font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons & links ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  background: var(--ink); color: var(--white);
  border: 1px solid var(--ink); border-radius: var(--radius);
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.button:hover { background: var(--night-2); border-color: var(--night-2); }
.button-sm { min-height: 40px; padding: 0 18px; font-size: 0.9rem; }
.button-ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .45); }
.button-ghost:hover { background: rgba(255, 255, 255, .08); border-color: var(--white); }
.button-light { background: var(--white); color: var(--ink); border-color: var(--white); }
.button-light:hover { background: #e4e8ff; border-color: #e4e8ff; color: var(--night); }

.textlink {
  display: inline-block; margin-top: auto; padding-top: 20px;
  font-weight: 600; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--signal);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
  transition: text-underline-offset .2s ease;
}
.textlink:hover { text-underline-offset: 3px; }
.textlink-light { color: var(--white); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  color: var(--white);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled {
  background: rgba(16, 22, 58, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line-dark);
}
/* The nav may run a little wider than the page content so large screens give the menu room */
.nav {
  height: var(--header-h); display: flex; align-items: center; justify-content: space-between;
  width: min(1320px, 100% - 2 * var(--gutter));
}

.logo { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.logo-badge { display: block; width: 50px; height: 50px; }
.logo-text { display: grid; gap: 3px; color: var(--white); line-height: 1; }
.logo-word {
  position: relative; padding-right: 15px;
  font-family: var(--font-display); font-variation-settings: "wdth" 118; font-stretch: 118%;
  font-size: 1.3rem; font-weight: 800; letter-spacing: .04em;
}
.logo-reg { position: absolute; top: -5px; right: -2px; font-family: Arial, Helvetica, sans-serif; font-size: .7em; font-weight: 400; }
/* Tagline sits inside a bracket (line underneath with upturned ends), as in the official logo */
.logo-tagline {
  display: flex; justify-content: space-between; gap: 4px;
  margin: 1px 17px 0 3px; padding: 1px 5px 2px;
  border: 1.5px solid var(--white); border-top: 0;
  font-size: .56rem; font-weight: 500; letter-spacing: .1em; line-height: 1.15; color: var(--white);
}
.logo-tagline span { opacity: .7; }
.logo-lg { gap: 16px; }
.logo-lg .logo-badge { width: 76px; height: 76px; }
.logo-lg .logo-word { font-size: 1.85rem; padding-right: 21px; }
.logo-lg .logo-tagline { font-size: .74rem; margin: 2px 23px 0 4px; padding: 1px 7px 3px; border-width: 2px; }

/* margin-left keeps a clear gap after the logo at every width */
.navlinks { display: flex; align-items: center; gap: 24px; margin-left: 48px; font-size: 0.93rem; font-weight: 500; }
.navlinks a { white-space: nowrap; }
.navlinks a:not(.button) { color: rgba(255, 255, 255, .78); transition: color .2s ease; }
.navlinks a:not(.button):hover { color: var(--white); }
.navlinks .button { background: var(--white); color: var(--ink); border-color: var(--white); }
.navlinks .button:hover { background: #e4e8ff; }
.navlinks .nav-login { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .45); margin-right: -12px; }
.navlinks .nav-login:hover { background: rgba(255, 255, 255, .08); border-color: var(--white); }
.dropdown-heading.dropdown-heading-first { margin-top: 0; padding-top: 4px; border-top: 0; }
.dropdown-heading {
  margin: 6px 14px 0; padding-top: 12px; border-top: 1px solid var(--line-dark);
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .5);
}

/* Products dropdown */
.nav-dropdown { position: relative; }
.dropdown-toggle {
  display: inline-flex; align-items: center; gap: 8px; padding: 0;
  font: inherit; color: rgba(255, 255, 255, .78); background: none; border: 0; cursor: pointer;
  transition: color .2s ease;
}
.dropdown-toggle:hover, .dropdown-toggle.is-current, .nav-dropdown.is-open .dropdown-toggle { color: var(--white); }
.caret {
  width: 7px; height: 7px; margin-top: -4px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease, margin .2s ease;
}
.nav-dropdown.is-open .caret { transform: rotate(-135deg); margin-top: 3px; }
.dropdown-menu {
  position: absolute; top: calc(100% + 18px); left: -20px; z-index: 60; min-width: 300px;
  display: grid; gap: 2px; padding: 8px;
  background: rgba(16, 22, 58, .98); border: 1px solid var(--line-dark); border-radius: 8px;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* Invisible bridge so the menu stays open while the pointer moves down to it */
.dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.nav-dropdown.is-open .dropdown-menu { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (min-width: 1261px) {
  .nav-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: none; }
  .nav-dropdown:hover .caret { transform: rotate(-135deg); margin-top: 3px; }
}
.navlinks .dropdown-menu a {
  display: grid; gap: 2px; padding: 12px 14px; border-radius: 6px; white-space: normal;
  color: var(--white); transition: background-color .15s ease;
}
.navlinks .dropdown-menu a:hover, .navlinks .dropdown-menu a[aria-current="page"] { background: rgba(125, 141, 255, .14); }
.dropdown-menu b { font-family: var(--font-display); font-variation-settings: "wdth" 112; font-size: 1rem; }
.dropdown-menu span { font-size: 0.85rem; font-weight: 400; color: rgba(255, 255, 255, .62); }

.menu-toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--radius);
  color: var(--white); cursor: pointer; position: relative;
}
.menu-bar, .menu-bar::before, .menu-bar::after {
  position: absolute; left: 12px; width: 18px; height: 2px; background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.menu-bar { top: 50%; margin-top: -1px; }
.menu-bar::before, .menu-bar::after { content: ""; left: 0; }
.menu-bar::before { top: -6px; }
.menu-bar::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-bar { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-bar::before { transform: translateY(6px) rotate(45deg); background: var(--white); }
.menu-toggle[aria-expanded="true"] .menu-bar::after { transform: translateY(-6px) rotate(-45deg); background: var(--white); }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(900px, 100svh);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--header-h) + 64px) 0 40px;
  background: var(--night); color: var(--white);
}
/* The image sits on the right and fades into the navy background, so the text
   on the left is always on a dark, even surface and the products stay visible */
.hero-media {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: -2;
  width: 64%; height: 100%; object-fit: cover; object-position: 78% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 28%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(50% 70% at 0% 40%, rgba(44, 51, 112, .55), transparent 70%),
    linear-gradient(90deg, rgba(10, 14, 40, .96) 0%, rgba(10, 14, 40, .9) 34%, rgba(10, 14, 40, .35) 52%, rgba(10, 14, 40, 0) 66%),
    linear-gradient(0deg, rgba(10, 14, 40, .92) 0%, rgba(10, 14, 40, 0) 34%);
}
.hero h1, .hero .lead, .hero .kicker { text-shadow: 0 2px 24px rgba(10, 14, 40, .6); }
.hero .lead { max-width: 44ch; }
.hero-inner { padding-bottom: clamp(48px, 8vw, 96px); }
.kicker {
  font-size: 0.95rem; font-weight: 500; color: #c3cbff;
  margin-bottom: 20px; display: flex; align-items: center; gap: 12px;
}
.kicker::before { content: ""; width: 28px; height: 2px; background: var(--signal); }
.hero h1 {
  font-size: clamp(2.7rem, 7vw, 5.6rem);
  font-variation-settings: "wdth" 125; font-stretch: 125%;
  font-weight: 800; line-height: 0.98; letter-spacing: -0.035em;
  max-width: 11ch;
}
.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); max-width: 52ch; color: rgba(255, 255, 255, .8); margin: 28px 0 36px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Status panel — echoes the appliance front panel */
.status-panel {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line-dark); border-radius: var(--radius);
  background: rgba(16, 22, 58, .62); backdrop-filter: blur(8px);
}
.status-item { display: flex; gap: 14px; align-items: flex-start; padding: 20px 24px; }
.status-item + .status-item { border-left: 1px solid var(--line-dark); }
.status-item b { display: block; font-family: var(--font-display); font-variation-settings: "wdth" 112; font-size: 1.02rem; }
.status-item span { font-size: 0.9rem; color: rgba(255, 255, 255, .66); }
.led {
  flex: none; width: 9px; height: 9px; margin-top: 8px; border-radius: 50%;
  background: #3a4270; transition: background-color .3s ease, box-shadow .3s ease;
}
.is-ready .led { background: var(--ok); box-shadow: 0 0 0 4px rgba(79, 224, 160, .16), 0 0 14px rgba(79, 224, 160, .7); }
.is-ready .status-item:nth-child(2) .led { transition-delay: .35s; }
.is-ready .status-item:nth-child(3) .led { transition-delay: .7s; }

/* ---------- Sections ---------- */
.section { padding: var(--section) 0; }
.section-head {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px 64px; align-items: end;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.section-head h2 { max-width: 18ch; }
.intro { color: var(--steel); max-width: 48ch; }

/* Solutions */
.services { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); }
.service { display: flex; flex-direction: column; padding: 32px 32px 8px 0; }
.service + .service { padding-left: 28px; border-left: 1px solid var(--line); }
.service { padding-right: 28px; }
.service h3 { font-size: 1.45rem; margin-bottom: 14px; }
.service p { color: var(--steel); }
/* Card links sit together at the bottom of each card */
.service-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: auto; padding-top: 22px; }
.service-actions .textlink { margin-top: 0; padding-top: 0; }

/* Demo */
.demo { background: var(--night); color: var(--white); }
.demo-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.demo .intro { color: rgba(255, 255, 255, .7); margin: 20px 0 8px; }
.screen {
  padding: 10px; border-radius: 10px;
  background: linear-gradient(180deg, #2a3163, #151a3f);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px var(--line-dark);
}
.screen video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: #000; }

/* Offers */
.offers { background: var(--paper); }
.offer-list { display: grid; gap: 12px; }
.offer {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line);
}
.offer-text { padding: clamp(24px, 3vw, 36px); align-self: center; }
.offer-text h3 { margin-bottom: 10px; }
.offer-text p { color: var(--steel); font-size: 1rem; }
.offer img { width: 100%; height: 100%; min-height: 180px; object-fit: cover; }

/* Platform */
.platform { background: var(--ink); color: var(--white); }
.platform-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 7vw, 96px); align-items: start; }
.platform .intro { color: rgba(255, 255, 255, .75); margin: 20px 0 32px; }
.rack {
  display: grid; gap: 6px; padding: 14px;
  background: var(--night); border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--line-dark);
}
.rack-unit {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px;
  padding: 18px 22px; border-radius: 4px;
  background: linear-gradient(180deg, #2c3468 0%, #20275a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.rack-unit b { font-family: var(--font-display); font-variation-settings: "wdth" 120; font-size: 1.4rem; margin-right: 8px; }
.rack-unit span { color: rgba(255, 255, 255, .7); }
.unit-leds { display: flex; gap: 6px; }
.unit-leds i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal); }
.unit-leds i + i { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.unit-vent {
  width: 88px; height: 26px; opacity: .5;
  background-image: radial-gradient(circle, #0c1030 2px, transparent 2.5px);
  background-size: 8px 8px;
}
.outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 8px; background: var(--line-dark); border-radius: 4px; overflow: hidden; }
.outcomes > div { background: var(--night); padding: 22px; }
.outcomes h3 { font-size: 1.05rem; margin-bottom: 8px; }
.outcomes p { color: rgba(255, 255, 255, .65); font-size: 0.95rem; }

/* Why */
.why-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
/* The image is an infographic with text in it, so it is always shown whole (never cropped) */
.why-media img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 30px 60px -30px rgba(16, 22, 58, .45); }
.why-copy .intro { margin: 20px 0 28px; }
.checks { display: grid; gap: 14px; }
.checks li { position: relative; padding-left: 34px; font-weight: 500; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10.5 2.6 2.6L14 7.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.quote { margin-top: 40px; padding-left: 24px; border-left: 3px solid var(--signal); }
.quote p { font-family: var(--font-display); font-variation-settings: "wdth" 108; font-size: 1.35rem; line-height: 1.35; font-weight: 600; color: var(--ink); }
.quote footer { margin-top: 12px; font-size: 0.9rem; color: var(--steel); }

/* Approach */
.approach { background: var(--paper); }
.reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 48px); }
.reason { padding-top: 24px; border-top: 1px solid var(--line); }
.reason h3 { margin-bottom: 10px; }
.reason p { color: var(--steel); }

/* Customers */
.logo-wall {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.client-logo {
  display: grid; place-items: center; min-height: 128px; padding: 24px; background: var(--white);
  font-family: var(--font-display); font-variation-settings: "wdth" 115; font-weight: 700; font-size: 1.05rem; color: var(--steel);
  text-align: center;
}
.client-logo img { max-width: 72%; max-height: 56px; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .25s ease, opacity .25s ease; }
.client-logo:hover img { filter: none; opacity: 1; }

/* Label on the left, then one equal column per certificate (any number of them) on one row */
.certs {
  display: grid; grid-template-columns: minmax(200px, 1.1fr); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  align-items: stretch; gap: 16px; margin-top: 48px;
}
.certs-label { align-self: center; color: var(--steel); }
.cert {
  display: grid; align-content: center; gap: 4px; padding: 16px 20px;
  border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: var(--radius);
}
.cert b { font-family: var(--font-display); font-variation-settings: "wdth" 118; font-size: 1.15rem; color: var(--ink); white-space: nowrap; }
.cert span { font-size: 0.9rem; color: var(--steel); }

/* CTA */
.cta { background: var(--night); color: var(--white); padding: clamp(64px, 8vw, 104px) 0; position: relative; overflow: hidden; }
.cta::after {
  content: ""; position: absolute; right: -10%; top: 0; bottom: 0; width: 55%;
  background: url("../images/firewall-demo.png") 80% 70% / cover no-repeat; opacity: .28;
  mask-image: linear-gradient(90deg, transparent, #000 60%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.cta-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta h2 { max-width: 16ch; }
.cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cta-phone { color: rgba(255, 255, 255, .75); font-size: 0.95rem; }
.cta-phone:hover { color: var(--white); }

/* Footer */
.footer { background: #0c1130; color: rgba(255, 255, 255, .66); padding: 72px 0 28px; font-size: 0.95rem; }
.footgrid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.foot-brand .logo { color: var(--white); margin-bottom: 18px; }
.foot-brand p { max-width: 30ch; margin-bottom: 16px; }
.footer h4 { color: var(--white); font-size: 0.95rem; font-variation-settings: "wdth" 112; margin-bottom: 16px; }
.footer li + li { margin-top: 10px; }
.footer a:not(.logo):hover { color: var(--white); }
.copyright {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-dark); font-size: 0.85rem;
}

.mobile-demo { display: none; }

/* ---------- About page ---------- */
.navlinks a:not(.button)[aria-current="page"] { color: var(--white); }

.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--header-h) + clamp(64px, 9vw, 120px)) 0 40px;
  background:
    /* signal line along the bottom edge */
    linear-gradient(90deg, transparent 5%, rgba(125, 141, 255, .55) 50%, transparent 95%) bottom / 100% 1px no-repeat,
    radial-gradient(55% 80% at 85% 0%, rgba(125, 141, 255, .24), transparent 70%),
    radial-gradient(40% 60% at 0% 100%, rgba(44, 51, 112, .55), transparent 70%),
    var(--night);
  color: var(--white);
}
/* Technical grid: fine lines that drift slowly and fade out toward the copy */
.page-hero::before {
  content: ""; position: absolute; inset: -56px 0 0; z-index: -1;
  background-image:
    linear-gradient(rgba(173, 184, 255, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(173, 184, 255, .09) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 75% at 78% 25%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 75% at 78% 25%, #000 10%, transparent 75%);
  animation: grid-drift 18s linear infinite;
}
/* Honeycomb (echoing the appliance vents) with a few lit network nodes */
.page-hero::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 55%; z-index: -1;
  background:
    radial-gradient(circle at 70% 26%, #c9d0ff 0 2.5px, rgba(125, 141, 255, .45) 3.5px, transparent 26px),
    radial-gradient(circle at 42% 44%, #bff5dc 0 2.5px, rgba(79, 224, 160, .4) 3.5px, transparent 22px),
    radial-gradient(circle at 88% 58%, #c9d0ff 0 2px, rgba(125, 141, 255, .4) 3px, transparent 20px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27.71 48'%3E%3Cpath d='M13.86 0 27.71 8v16L13.86 32 0 24V8zM13.86 32v16' fill='none' stroke='%23adb8ff' stroke-opacity='.2' stroke-width='.6'/%3E%3C/svg%3E") 0 0 / 34.64px 60px;
  mask-image: radial-gradient(80% 70% at 85% 30%, #000 15%, transparent 72%);
  -webkit-mask-image: radial-gradient(80% 70% at 85% 30%, #000 15%, transparent 72%);
}
@keyframes grid-drift { to { transform: translateY(56px); } }
.page-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  font-variation-settings: "wdth" 125; font-stretch: 125%;
  font-weight: 800; line-height: 1; letter-spacing: -0.035em;
  max-width: 14ch;
}
.page-hero .lead { max-width: 62ch; margin-bottom: clamp(48px, 7vw, 80px); }

.facts {
  display: grid; grid-template-columns: repeat(4, 1fr); margin: 0;
  border: 1px solid var(--line-dark); border-radius: var(--radius);
  background: rgba(24, 32, 82, .6);
}
.fact { padding: 22px 24px; }
.fact + .fact { border-left: 1px solid var(--line-dark); }
.fact dt { font-size: 0.88rem; color: rgba(255, 255, 255, .62); }
.fact dd {
  margin: 6px 0 0; font-family: var(--font-display); font-variation-settings: "wdth" 118;
  font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -0.02em;
}

/* Media hero: a page hero with a photo background, faded to navy on the left so the text
   stays readable. Each page sets its focal point with --media-pos / --media-pos-mobile. */
.media-hero { padding-bottom: 48px; }
.media-hero::before, .media-hero::after { display: none; }
.media-hero-img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: var(--media-pos, 75% 50%);
}
.media-hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(16, 22, 58, .97) 0%, rgba(16, 22, 58, .9) 32%, rgba(16, 22, 58, .45) 58%, rgba(16, 22, 58, .1) 100%),
    linear-gradient(180deg, rgba(16, 22, 58, .75) 0%, rgba(16, 22, 58, 0) 28%, rgba(16, 22, 58, 0) 62%, rgba(16, 22, 58, .7) 100%);
}
.media-hero .lead { max-width: 56ch; text-shadow: 0 2px 20px rgba(10, 14, 40, .6); }
.media-hero h1 { text-shadow: 0 2px 24px rgba(10, 14, 40, .5); }
.media-hero .facts { background: rgba(16, 22, 58, .72); backdrop-filter: blur(8px); }


.about-split { align-items: start; margin-bottom: 0; }
.prose { display: grid; gap: 18px; color: var(--steel); max-width: 60ch; }

.vision { background: var(--paper); }
.pillars {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: clamp(40px, 6vw, 64px);
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.pillars li {
  background: var(--white); padding: 24px 20px; border-top: 3px solid var(--ink);
  font-family: var(--font-display); font-variation-settings: "wdth" 115; font-weight: 700; font-size: 1.05rem; color: var(--ink);
}

.impact { background: var(--ink); color: var(--white); }
.impact .prose { color: rgba(255, 255, 255, .78); }

.cta-copy { max-width: 60ch; }
.cta-copy h2 { margin-bottom: 18px; }
.cta-copy p { color: rgba(255, 255, 255, .72); }

/* ---------- Contact page ---------- */
.eyebrow {
  font-size: 0.9rem; font-weight: 600; color: var(--ink); letter-spacing: .02em;
  margin-bottom: 16px; display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--signal); }
.eyebrow-light { color: #c3cbff; }

.route-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.route-card {
  display: grid; gap: 4px; padding: 22px 24px;
  border: 1px solid var(--line-dark); border-radius: var(--radius);
  background: rgba(24, 32, 82, .6); backdrop-filter: blur(6px);
  transition: border-color .2s ease, background-color .2s ease;
}
.route-card:hover { border-color: rgba(125, 141, 255, .6); background: rgba(36, 46, 110, .7); }
.route-card b { font-family: var(--font-display); font-variation-settings: "wdth" 112; font-size: 1.15rem; }
.route-card span:last-child { font-size: 0.92rem; color: rgba(255, 255, 255, .66); }
.route-label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--signal); }
.route-label-ok { color: var(--ok); }

.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.contact-copy .intro { margin: 20px 0 32px; }
.contact-list { display: grid; gap: 18px; border-top: 1px solid var(--line); padding-top: 24px; }
.contact-list span { display: block; font-size: 0.85rem; color: var(--steel); }
.contact-list a { font-weight: 600; color: var(--ink); }
.contact-list a:hover { text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 4px; }

.contact-form {
  display: grid; gap: 18px; padding: clamp(24px, 3.5vw, 40px);
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 6px; align-content: start; }
.field label { font-size: 0.9rem; font-weight: 600; }
.field abbr { color: var(--ink); text-decoration: none; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 14px;
  font: inherit; font-size: 1rem; color: var(--text);
  background: var(--white); border: 1px solid #c5cadf; border-radius: var(--radius);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; min-height: 128px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(125, 141, 255, .35);
}
.field [aria-invalid="true"] { border-color: #c2334d; }
.field-error { font-size: 0.85rem; color: #c2334d; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form-foot .button { cursor: pointer; }
.form-foot .button:disabled { opacity: .7; cursor: progress; }
.form-status { font-size: 0.93rem; font-weight: 500; }
.form-consent { font-size: 0.85rem; color: var(--steel); }
.form-consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.form-consent a:hover { text-decoration-color: var(--signal); }
.form-status[data-state="success"] { color: #16794f; }
.form-status[data-state="error"] { color: #c2334d; }

.contact-support { background: var(--night); color: var(--white); }
.contact-support .intro { color: rgba(255, 255, 255, .72); }
.support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.support-card {
  display: grid; gap: 6px; align-content: start; padding: 28px;
  border: 1px solid var(--line-dark); border-radius: var(--radius);
  background: linear-gradient(180deg, #1c2458 0%, #151c49 100%);
  transition: border-color .2s ease;
}
a.support-card:hover { border-color: rgba(125, 141, 255, .6); }
.support-card b { font-family: var(--font-display); font-variation-settings: "wdth" 112; font-size: 1.2rem; overflow-wrap: anywhere; }
.support-card > span:last-child { font-size: 0.92rem; color: rgba(255, 255, 255, .66); }
.support-label { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #c3cbff; margin-bottom: 8px; }
.support-label .led { margin-top: 0; }
.led-on { background: var(--ok); box-shadow: 0 0 0 4px rgba(79, 224, 160, .16), 0 0 14px rgba(79, 224, 160, .7); }

.support-help {
  display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px 64px; align-items: start;
  margin-top: clamp(40px, 6vw, 64px); padding-top: 32px; border-top: 1px solid var(--line-dark);
}
.checks-light li { color: rgba(255, 255, 255, .85); }
.checks-light li::before { background-color: var(--signal); }

.office-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: start; }
.office-address { color: var(--steel); line-height: 1.7; }
.office-address b { display: block; color: var(--text); margin-bottom: 6px; }

/* ---------- Partner page ---------- */
.page-hero .hero-actions { margin: calc(-1 * clamp(20px, 3vw, 40px)) 0 clamp(48px, 7vw, 80px); }

.partner-types {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line-dark); border-radius: var(--radius);
  background: rgba(24, 32, 82, .6); backdrop-filter: blur(6px);
}
.partner-types li { display: grid; gap: 4px; align-content: start; padding: 22px 24px; }
.partner-types li + li { border-left: 1px solid var(--line-dark); }
.partner-types b { font-family: var(--font-display); font-variation-settings: "wdth" 112; font-size: 1.05rem; }
.partner-types span { font-size: 0.9rem; color: rgba(255, 255, 255, .66); }

.partner-apply { background: var(--paper); }
.partner-apply .contact-form { background: var(--white); }

.steps { display: grid; gap: 0; counter-reset: step; border-top: 1px solid var(--line); }
.steps li {
  position: relative; display: grid; gap: 2px; padding: 18px 0 18px 52px;
  border-bottom: 1px solid var(--line); counter-increment: step;
}
.steps li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 18px;
  font-family: var(--font-display); font-variation-settings: "wdth" 118; font-weight: 700; color: var(--signal);
}
.steps span { color: var(--steel); font-size: 0.95rem; }
.steps + .contact-list { margin-top: 32px; border-top: 0; padding-top: 0; }

/* Honeypot field: kept out of view and out of the tab order */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Customers page ---------- */
.facts-3 { grid-template-columns: repeat(3, 1fr); }

.customer-group-alt { background: var(--paper); }
.group-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px;
  padding-bottom: 20px; margin-bottom: 32px; border-bottom: 2px solid var(--ink);
}
.group-count { color: var(--steel); font-size: 0.95rem; }

/* Cell outlines fill the 1px gaps, so an incomplete last row leaves no grey block */
.customer-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.customer { display: grid; grid-template-rows: 1fr auto; background: var(--white); outline: 1px solid var(--line); }
.customer-logo { display: grid; place-items: center; height: 160px; padding: 24px 20px 8px; }
.customer-logo img {
  max-width: 85%; max-height: 108px; width: auto; height: auto; object-fit: contain;
  transition: transform .25s ease;
}
.customer:hover .customer-logo img { transform: scale(1.04); }
.customer-name { padding: 8px 16px 18px; text-align: center; font-size: 0.9rem; font-weight: 500; color: var(--steel); }

/* ---------- Product page ---------- */
.button-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.button-outline:hover { background: var(--ink); color: var(--white); }

.product-hero { min-height: min(720px, 90svh); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(56px, 8vw, 96px); }
.product-hero-media { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; }
.product-hero-shade {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, rgba(10, 14, 40, .94) 0%, rgba(10, 14, 40, .72) 45%, rgba(10, 14, 40, .2) 100%),
    linear-gradient(0deg, rgba(10, 14, 40, .85) 0%, rgba(10, 14, 40, 0) 45%);
}
.product-subtitle {
  margin-top: 16px; font-family: var(--font-display); font-variation-settings: "wdth" 112;
  font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; color: #c3cbff;
}
.product-hero .lead { margin-bottom: 32px; }
.product-hero .actions .button-ghost { color: var(--white); }

/* Overview: text on one row, the image on its own full-width row below */
.overview-grid { display: grid; gap: clamp(36px, 5vw, 56px); }
.overview-copy { display: grid; grid-template-columns: .9fr 1.1fr; gap: 20px 64px; align-items: start; }
.overview-text { display: grid; gap: 14px; margin-bottom: 24px; }
.overview-media {
  margin: 0; padding: clamp(12px, 2vw, 28px); background: var(--white);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 24px 48px -36px rgba(16, 22, 58, .45);
}
.overview-media a { display: block; cursor: zoom-in; }
.overview-media img, .overview-media video { display: block; width: 100%; height: auto; border-radius: 4px; }
.overview-media figcaption { margin-top: 12px; text-align: center; font-size: .85rem; color: var(--steel); }

.product-features { background: var(--paper); }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.feature-card {
  display: flex; flex-direction: column; gap: 10px; padding: 28px;
  background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--ink); border-radius: var(--radius);
}
.feature-media img, .feature-media video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; margin-bottom: 8px; }
.feature-card p { color: var(--steel); }
.feature-card .textlink { padding-top: 12px; }

.benefit-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(24px, 4vw, 40px); counter-reset: benefit; }
.benefit { position: relative; padding-top: 52px; border-top: 1px solid var(--line); counter-increment: benefit; }
.benefit::before {
  content: counter(benefit, decimal-leading-zero); position: absolute; top: 18px; left: 0;
  font-family: var(--font-display); font-variation-settings: "wdth" 118; font-weight: 700; color: var(--signal);
}
.benefit h3 { margin-bottom: 10px; }
.benefit p { color: var(--steel); }

.why-choose { background: var(--ink); color: var(--white); }
.why-choose .intro { color: rgba(255, 255, 255, .75); }
.why-choose-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden;
}
.why-choose-grid li { display: grid; gap: 8px; align-content: start; padding: 28px 24px; background: var(--night); }
.why-choose-grid b { font-family: var(--font-display); font-variation-settings: "wdth" 112; font-size: 1.15rem; }
.why-choose-grid span { font-size: 0.95rem; color: rgba(255, 255, 255, .68); }

/* Two models per row on larger screens so the product photos get room */
.model-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.model-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--white); }
/* White behind the photos (which have white backgrounds) so they blend in without a visible box */
.model-media { display: grid; place-items: center; height: clamp(240px, 26vw, 340px); padding: 28px; background: var(--white); border-bottom: 1px solid var(--line); }
.model-media img, .model-media video { width: 100%; height: 100%; object-fit: contain; }
.model-body { display: flex; flex-direction: column; gap: 12px; padding: 24px 28px 28px; flex: 1; }
.model-body > p { color: var(--steel); }
/* Buttons sit at the bottom of every card, so they line up across the row */
.model-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: auto; padding-top: 16px; }
.model-actions .button { width: 100%; }
.spec-table { margin: 4px 0 0; border-top: 1px solid var(--line); }
/* One spec per row: label on the left, value on the right */
.spec-table div { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.spec-table dt { flex: none; font-size: 0.9rem; color: var(--steel); }
.spec-table dd { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--text); text-align: right; }

.product-resources { background: var(--paper); }
.resource-list { display: grid; gap: 10px; }
.resource {
  display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 20px;
  padding: 18px 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.resource:hover { border-color: var(--ink); box-shadow: 0 10px 24px -18px rgba(16, 22, 58, .6); }
.resource-type { justify-self: start; padding: 4px 10px; border-radius: 999px; background: #e4e8ff; color: var(--ink); font-size: 0.8rem; font-weight: 600; }
.resource-text { display: grid; gap: 2px; }
.resource-text span { font-size: 0.9rem; color: var(--steel); }
.resource-action { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 5px; }

.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 32px 64px; align-items: start; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  position: relative; padding: 20px 40px 20px 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.05rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--ink);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { padding: 0 40px 22px 0; color: var(--steel); }

/* ---------- Resources pages ---------- */
.coming-soon { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px 80px; align-items: start; }
.coming-soon .intro { margin-top: 20px; }

.breadcrumb { gap: 10px; }
.breadcrumb a { color: #c3cbff; text-decoration: underline; text-decoration-color: rgba(195, 203, 255, .4); text-underline-offset: 4px; }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb [aria-current] { color: var(--white); }
.textlink-inline { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 3px; }

/* Flexible rows: up to three cards per row, and cards in a shorter last row stretch to fill it */
.resource-hub { display: flex; flex-wrap: wrap; gap: 16px; }
.resource-hub > li { flex: 1 1 320px; }
.hub-card {
  display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 28px;
  background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--ink); border-radius: var(--radius);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hub-card:hover { border-color: var(--ink); box-shadow: 0 16px 32px -22px rgba(16, 22, 58, .6); transform: translateY(-2px); }
.hub-count { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--signal); }
.hub-card h3 { font-size: 1.35rem; }
.hub-card p { color: var(--steel); flex: 1; }
.hub-action {
  margin-top: 8px; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 5px;
}

.dropdown-footer { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line-dark); }
.navlinks .dropdown-footer a b { font-size: .9rem; color: #c3cbff; }

.doc-intro { margin-top: 10px; }
.doc-help { background: var(--paper); }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.doc-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  height: 100%; padding: 18px 20px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.doc-card:hover { border-color: var(--ink); box-shadow: 0 12px 28px -20px rgba(16, 22, 58, .55); transform: translateY(-1px); }
.doc-icon {
  display: grid; place-items: center; width: 44px; height: 52px; border-radius: 4px;
  background: #e4e8ff; color: var(--ink); font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%);
}
.doc-title { font-weight: 600; line-height: 1.35; }
.doc-action {
  display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 5px;
}

/* ---------- 404 page ---------- */
.not-found { min-height: min(860px, 100svh); display: flex; flex-direction: column; justify-content: center; gap: clamp(48px, 7vw, 80px); padding-bottom: 64px; }
.not-found-inner { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 32px; }
.not-found h1 { max-width: 13ch; }
.not-found .lead { margin-bottom: 32px; }
.not-found-status {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px; padding: 8px 16px;
  border: 1px solid var(--line-dark); border-radius: 999px; background: rgba(24, 32, 82, .6);
  font-size: 0.9rem; font-weight: 500; color: #c3cbff;
}
.not-found-status .led { margin-top: 0; }
.led-warn {
  background: #ffb547; box-shadow: 0 0 0 4px rgba(255, 181, 71, .16), 0 0 14px rgba(255, 181, 71, .7);
  animation: led-blink 1.6s ease-in-out infinite;
}
@keyframes led-blink { 50% { opacity: .35; } }
.not-found-code {
  justify-self: end; margin: 0;
  font-family: var(--font-display); font-variation-settings: "wdth" 125; font-weight: 800;
  font-size: clamp(7rem, 20vw, 15rem); line-height: .85; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 2px rgba(173, 184, 255, .55);
  text-shadow: 0 0 60px rgba(125, 141, 255, .35);
}
.not-found-links {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line-dark); border-radius: var(--radius); background: rgba(24, 32, 82, .6); backdrop-filter: blur(6px);
}
.not-found-links a { display: grid; gap: 4px; padding: 20px 24px; transition: background-color .2s ease; }
.not-found-links a + a { border-left: 1px solid var(--line-dark); }
.not-found-links a:hover { background: rgba(125, 141, 255, .12); }
.not-found-links b { font-family: var(--font-display); font-variation-settings: "wdth" 112; }
.not-found-links span { font-size: 0.88rem; color: rgba(255, 255, 255, .62); }

/* ---------- Legal pages ---------- */
.legal-hero { padding-bottom: clamp(48px, 7vw, 80px); }
.legal-updated { margin-top: 20px; color: rgba(255, 255, 255, .7); }

.legal-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.legal-toc { position: sticky; top: calc(var(--header-h) + 24px); }
.legal-toc-title { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--steel); margin-bottom: 12px; }
.legal-toc ol { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--line); }
.legal-toc a { display: block; padding: 7px 0 7px 16px; margin-left: -2px; border-left: 2px solid transparent; font-size: 0.93rem; color: var(--steel); transition: color .2s ease, border-color .2s ease; }
.legal-toc a:hover { color: var(--ink); border-left-color: var(--signal); }

.legal-body { max-width: 72ch; }
.legal-draft { margin-bottom: 28px; padding: 14px 18px; border: 1px solid #f3d29a; border-left: 4px solid #ffb547; border-radius: var(--radius); background: #fff8eb; font-size: 0.95rem; }
.legal-intro { font-size: 1.12rem; color: var(--text); margin-bottom: 16px; }
.legal-body section { padding-top: 36px; scroll-margin-top: calc(var(--header-h) + 16px); }
.legal-body h2 { display: flex; align-items: baseline; gap: 14px; font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin-bottom: 14px; }
.legal-body h2 span { font-size: 0.9rem; color: var(--signal); }
.legal-body p, .legal-body li { color: #3d4466; }
.legal-body p + p, .legal-body ul + p, .legal-body p + ul { margin-top: 12px; }
.legal-body ul { padding-left: 4px; display: grid; gap: 8px; }
.legal-body ul li { position: relative; padding-left: 22px; }
.legal-body ul li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }

.legal-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.legal-links a:hover { color: var(--white); }

/* ---------- Responsive ---------- */
/* Below 1180px (small laptops, tablets, phones) the image moves out from behind the text
   and shows below the buttons; wider screens show it on the right */
@media (max-width: 1180px) {
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 48px); }
  .hero-inner { order: 1; padding-bottom: 0; }
  .hero-media {
    position: relative; order: 2; z-index: 0;
    width: 100%; height: auto; max-height: 520px; aspect-ratio: 16 / 10; margin: 8px 0 -8px;
    object-position: 75% 60%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  }
  .hero > .wrap:last-child { order: 3; }
  .hero::before { background: none; }
}

/* Four solution cards are too tight on small laptops, so show them as a 2 × 2 grid */
@media (min-width: 1001px) and (max-width: 1200px) {
  .services { grid-template-columns: repeat(2, 1fr); }
  .service:nth-child(odd) { padding-left: 0; border-left: 0; }
  .service:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

@media (max-width: 1400px) {
  .navlinks { gap: 18px; margin-left: 40px; font-size: 0.9rem; }
}

/* The full nav (logo, two dropdowns, login and demo buttons) needs ~1240px, so below 1260px it
   collapses into the menu rather than squeezing up against the logo */
@media (max-width: 1260px) {
  .menu-toggle { display: block; }
  .navlinks {
    position: absolute; top: var(--header-h); left: 0; right: 0; margin-left: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 24px;
    background: rgba(16, 22, 58, .98); border-bottom: 1px solid var(--line-dark);
    display: none;
  }
  .navlinks.is-open { display: flex; }
  .navlinks a:not(.button) { padding: 14px 0; border-bottom: 1px solid var(--line-dark); }
  .navlinks .button { margin-top: 20px; min-height: 48px; }
  .navlinks .nav-login { margin-right: 0; }
  .navlinks .nav-login + .button { margin-top: 10px; }
  .dropdown-heading { margin: 6px 12px 0; }
  .dropdown-toggle { width: 100%; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line-dark); }
  .caret { margin-right: 4px; }
  .dropdown-menu {
    position: static; min-width: 0; padding: 4px 0 8px 12px; display: none;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .dropdown-menu::before { display: none; }
  .nav-dropdown.is-open .dropdown-menu { display: grid; }
  .navlinks .dropdown-menu a { padding: 10px 12px; border-bottom: 0; }
}

@media (max-width: 1000px) {
  .section-head, .demo-grid, .platform-grid, .why-grid { grid-template-columns: 1fr; }
  .services, .reasons { grid-template-columns: 1fr; }
  .service, .service + .service { padding: 28px 0; border-left: 0; }
  .service + .service { border-top: 1px solid var(--line); }
  .why-media { max-width: 560px; margin-inline: auto; }
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
  .footgrid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(3) { border-left: 0; }
  .fact:nth-child(n + 3) { border-top: 1px solid var(--line-dark); }
  .facts-3 { grid-template-columns: repeat(3, 1fr); }
  .certs { grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; }
  .certs-label { grid-column: 1 / -1; }
  .facts-3 .fact:nth-child(3) { border-left: 1px solid var(--line-dark); }
  .facts-3 .fact:nth-child(n + 3) { border-top: 0; }
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .contact-grid, .support-help, .office-grid { grid-template-columns: 1fr; }
  .overview-copy, .faq-grid, .coming-soon { grid-template-columns: 1fr; }
  .model-grid { grid-template-columns: repeat(2, 1fr); }
  .legal-grid { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .not-found-inner { grid-template-columns: 1fr; }
  .not-found-code { display: none; }
  .not-found-links { grid-template-columns: 1fr 1fr; }
  .not-found-links a:nth-child(3) { border-left: 0; }
  .not-found-links a:nth-child(n + 3) { border-top: 1px solid var(--line-dark); }
  .why-choose-grid { grid-template-columns: 1fr 1fr; }
  .partner-types { grid-template-columns: 1fr 1fr; }
  .partner-types li:nth-child(3) { border-left: 0; }
  .partner-types li:nth-child(n + 3) { border-top: 1px solid var(--line-dark); }
  .support-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 1rem; }
  .status-panel { grid-template-columns: 1fr; }
  .status-item { padding: 16px 18px; }
  .status-item + .status-item { border-left: 0; border-top: 1px solid var(--line-dark); }
  .offer { grid-template-columns: 1fr; }
  .offer img { order: -1; height: 120px; min-height: 0; }
  .rack-unit { grid-template-columns: auto 1fr; padding: 16px; }
  .unit-vent { display: none; }
  .rack-unit b { display: block; }
  .outcomes { grid-template-columns: 1fr; }
  .client-logo { min-height: 104px; }
  .footgrid { grid-template-columns: 1fr; }
  .cta::after { width: 100%; right: 0; opacity: .16; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .page-hero::after { width: 100%; opacity: .6; }
  .media-hero-img { object-position: var(--media-pos-mobile, 80% 100%); }
  .media-hero-shade { background: linear-gradient(180deg, rgba(16, 22, 58, .92) 0%, rgba(16, 22, 58, .82) 55%, rgba(16, 22, 58, .55) 100%); }
  .route-cards, .field-row, .support-grid { grid-template-columns: 1fr; }
  .logo-lg { gap: 12px; }
  .logo-lg .logo-badge { width: 58px; height: 58px; }
  .logo-lg .logo-word { font-size: 1.4rem; padding-right: 17px; }
  .logo-lg .logo-tagline { font-size: .6rem; margin: 1px 19px 0 3px; padding: 1px 5px 2px; border-width: 1.5px; }
  .why-choose-grid { grid-template-columns: 1fr; }
  .not-found-links { grid-template-columns: 1fr; }
  .not-found-links a:nth-child(n) + a { border-left: 0; border-top: 1px solid var(--line-dark); }
  .resource { grid-template-columns: 1fr; gap: 10px; padding: 18px; }
  .product-hero { min-height: auto; }
  .facts-3 { grid-template-columns: 1fr; }
  .doc-grid { grid-template-columns: 1fr; }
  .model-grid { grid-template-columns: 1fr; }
  .spec-table div { display: grid; gap: 2px; }
  .spec-table dd { text-align: left; }
  .certs { grid-template-columns: 1fr; }
  .facts-3 .fact:nth-child(n + 2) { border-left: 0; border-top: 1px solid var(--line-dark); }
  .customer-grid { grid-template-columns: repeat(2, 1fr); }
  .customer-logo { height: 120px; padding: 18px 14px 6px; }
  .customer-logo img { max-height: 80px; }
  .partner-types { grid-template-columns: 1fr; }
  .partner-types li + li { border-left: 0; border-top: 1px solid var(--line-dark); }
  .mobile-demo {
    display: flex; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40;
    box-shadow: 0 12px 30px -10px rgba(16, 22, 58, .6);
    transform: translateY(140%); transition: transform .3s ease;
  }
  .mobile-demo.is-visible { transform: none; }
  .footer { padding-bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
}