/* ==========================================================================
   Define IT Solution — styles.css
   Design tokens, layout and components.
   Palette sampled from the supplied logo. See assets/images/brand/README.md.
   ========================================================================== */

/* ==========================================================================
   Define IT Solution — Core stylesheet
   Design system: tokens, layout, components
   Author: Define IT Solution
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --ink-900: #030508;   /* page background */
  --ink-800: #070B12;   /* major sections */
  --ink-700: #0B1220;   /* cards — black toward navy */
  --ink-600: #10192C;   /* elevated / hover */
  --ink-500: #16233D;

  --azure-600: #0B4FC4;
  --azure-500: #3D86FF;   /* hover */
  --azure-400: #1E6DF5;   /* logo electric blue */
  --azure-300: #00CAFD;   /* logo cyan, 11.9:1 on black */
  --azure-100: rgba(30, 109, 245, 0.24);
  --azure-050: rgba(30, 109, 245, 0.10);

  --signal-500: #10B981;  /* status only: health, verified, secured */

  /* ---- Logo palette. Sampled directly from the supplied artwork. ---- */
  --define-navy: #06183C;
  --define-navy-light: #0B2A5E;
  --define-blue: #1E6DF5;
  --define-blue-bright: #0058FD;
  --define-cyan: #00CAFD;
  --define-sky: #4AD0FD;
  --define-violet: #5C24F2;
  --define-purple: #4F31E9;
  --define-white: #FFFFFF;
  --define-black: #030508;
  --define-surface: #070B12;
  --define-surface-2: #0B1220;
  --define-text-primary: #FFFFFF;
  --define-text-secondary: #B4BED0;

  /* The one official brand gradient — cyan, blue, violet, in the order the
     logo runs them. Everything gradient-based derives from this. */
  --define-gradient: linear-gradient(110deg,
      var(--define-cyan) 0%,
      var(--define-blue) 42%,
      var(--define-purple) 74%,
      var(--define-violet) 100%);
  --define-gradient-soft: linear-gradient(110deg,
      rgba(0, 202, 253, 0.16), rgba(30, 109, 245, 0.14), rgba(92, 36, 242, 0.16));
  --signal-100: #DCFCEF;

  --grey-900: #FFFFFF;
  --grey-700: #E5E7EB;
  --grey-600: #B4BED0;
  --grey-500: #707887;
  --grey-400: #5A616E;
  --grey-300: #22304C;
  --grey-200: #1A2740;
  --grey-100: #10192C;
  --grey-050: #070B12;
  --white: #0B1220;   /* card layer */

  --warn-500: #FB923C;

  /* Semantic */
  --bg: var(--ink-900);
  --bg-alt: var(--ink-800);
  --bg-invert: var(--ink-800);
  --bg-elevated: var(--ink-700);
  --bg-raised: var(--ink-600);
  --text: #FFFFFF;
  --text-muted: var(--grey-600);
  --text-body: #E5E7EB;
  --text-meta: var(--grey-500);
  --text-invert: #FFFFFF;
  --text-invert-muted: #A9B0BD;
  --line: #1A2740;
  --line-invert: rgba(255, 255, 255, 0.10);
  --accent: var(--azure-400);
  --accent-hover: var(--azure-500);

  /* Typography */
  --font-display: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-eyebrow: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-xl: clamp(1.25rem, 0.9rem + 0.9vw, 1.5rem);
  --fs-h4: clamp(1.15rem, 1rem + 0.5vw, 1.375rem);
  --fs-h3: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  --fs-h2: clamp(1.75rem, 1.25rem + 1.9vw, 2.875rem);
  --fs-h1: clamp(2.125rem, 1.4rem + 3.1vw, 4rem);

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  /* Spacing scale (4px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* Layout */
  --container: 1240px;
  --container-narrow: 880px;
  --gutter: clamp(1.125rem, 0.5rem + 2.5vw, 2.5rem);

  /* Radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.65);
  --glow: 0 0 0 1px rgba(36, 183, 232, 0.28), 0 8px 30px rgba(36, 183, 232, 0.16);

  /* Motion system — one vocabulary, used everywhere */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 250ms;
  --dur: 250ms;
  --duration-fast: 250ms;
  --duration-normal: 600ms;
  --duration-slow: 1000ms;
  --dur-slow: 700ms;
  --reveal-distance: 52px;

  --header-h: 100px;
  --header-h-stuck: 84px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-feature-settings: "kern", "liga", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text);
  margin: 0 0 var(--sp-4);
  font-weight: 700;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.032em; }
h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.028em; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: 1.3; }
h5 { font-size: var(--fs-lg); line-height: 1.35; }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; color: var(--text-body); }
p:last-child { margin-bottom: 0; }

a { color: var(--azure-300); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: #7BDDFF; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.15rem; }
li { margin-bottom: var(--sp-2); }

strong { font-weight: 650; }

/* Long unbreakable tokens — file paths, URLs, code — must wrap on narrow
   viewports or they push the page wider than the screen. */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  overflow-wrap: anywhere;
  word-break: break-word;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  color: var(--azure-300);
}
.notice > span, .vendor-legal { min-width: 0; overflow-wrap: anywhere; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-8) 0; }

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

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 999;
  background: var(--azure-400);
  color: #04191F;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); color: #04191F; }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

/* overflow-x: clip contains the pre-reveal offset of horizontal reveals
   (translateX(±62px)) without creating a scroll container, so sticky elements
   outside these sections keep working. */
.section { padding-block: var(--section-y); position: relative; overflow-x: clip; }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--alt { background: var(--bg-alt); }
.section--line { border-top: 1px solid var(--line); }

.section-invert {
  background: var(--ink-800);
  color: var(--text-invert);
}
.section-invert h1, .section-invert h2, .section-invert h3,
.section-invert h4, .section-invert h5 { color: #fff; }
.section-invert p { color: var(--text-invert-muted); }
.section-invert a:not(.btn) { color: var(--azure-300); }
.section-invert .btn { color: var(--btn-fg); }
.cta-banner a:not(.btn) { color: var(--azure-300); }
.section-invert .eyebrow { color: var(--azure-300); }
.section-invert .lede { color: var(--text-invert-muted); }

.grid { display: grid; gap: var(--sp-5); }
.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)); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.split--wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.split--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.split--top { align-items: start; }

.stack > * + * { margin-top: var(--sp-4); }

/* --------------------------------------------------------------------------
   4. TYPE HELPERS — the bracket motif is the brand's structural signature
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azure-300);
  display: inline;
  margin: 0 0 var(--sp-4);
}
/* Brackets hug the text and wrap with it, rather than pinning to the line end */
.eyebrow::before { content: "[\00a0"; opacity: 0.55; }
.eyebrow::after { content: "\00a0]"; opacity: 0.55; }
p.eyebrow { display: block; }

.lede {
  font-size: var(--fs-xl);
  line-height: 1.5;
  color: var(--text-invert-muted);
  letter-spacing: -0.011em;
  max-width: 62ch;
}

.section-head { max-width: 68ch; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lede { margin-inline: auto; }


.text-mono { font-family: var(--font-mono); }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--azure-400);
  /* Cyan is a light colour: white on it is only 2.3:1, near-black is 8.7:1 */
  --btn-fg: #04191F;
  --btn-border: var(--azure-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.85rem 1.6rem;
  min-height: 48px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-align: center;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover {
  --btn-bg: var(--azure-300);
  --btn-border: var(--azure-300);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(36, 183, 232, 0.32);
}
.btn:active { transform: translateY(0); }

.btn--secondary {
  --btn-bg: rgba(255, 255, 255, 0.03);
  --btn-fg: #fff;
  --btn-border: var(--grey-300);
}
/* Secondary buttons inside dark surfaces read as ghost buttons */
.mobile-nav__foot .btn--secondary,
.section-invert .btn--secondary {
  --btn-fg: #fff;
  --btn-border: rgba(255, 255, 255, 0.28);
}
.mobile-nav__foot .btn--secondary:hover,
.section-invert .btn--secondary:hover {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-fg: #fff;
  --btn-border: rgba(255, 255, 255, 0.6);
}
.btn--secondary:hover {
  --btn-bg: rgba(36, 183, 232, 0.08);
  --btn-fg: #fff;
  --btn-border: var(--azure-400);
  box-shadow: none;
}

.btn--ghost-invert {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-border: rgba(255, 255, 255, 0.3);
}
.btn--ghost-invert:hover {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-border: rgba(255, 255, 255, 0.6);
  box-shadow: none;
}

.btn--sm { padding: 0.55rem 1rem; min-height: 40px; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--azure-300);
}
.link-arrow::after {
  content: "";
  width: 1em; height: 1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
.link-arrow:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   6. UTILITY BAR + HEADER + MEGA MENU
   -------------------------------------------------------------------------- */
.utility-bar {
  background: var(--ink-900);
  color: var(--text-invert-muted);
  font-size: var(--fs-xs);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 40px;
  flex-wrap: wrap;
}
.utility-bar__list { display: flex; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.utility-bar__list li { margin: 0; display: flex; align-items: center; gap: 0.45em; }
.utility-bar a { color: var(--text-invert-muted); }
.utility-bar a:hover { color: #fff; }
.utility-bar__icon { width: 14px; height: 14px; opacity: 0.65; flex: none; }
.utility-bar__support {
  display: inline-flex; align-items: center; gap: 0.5em;
  color: #fff; font-weight: 600;
}
.utility-bar__support .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal-500);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
  flex: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 5, 5, 0.9);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
  transition: min-height 350ms var(--ease);
}

/* --------------------------------------------------------------------------
   LOGO SIZING
   Height drives the size and width stays auto, so the cropped aspect ratio is
   always preserved — never stretched, never clipped. The width/height
   attributes on the <img> reserve the box before the SVG loads, so there is no
   layout shift.
   -------------------------------------------------------------------------- */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
  min-width: 0;
}
.brand-lockup img {
  display: block;
  height: 70px;          /* desktop header */
  width: auto;
  max-width: 100%;
}

/* Between 1080 and 1279px the nav and CTA need the room */
@media (max-width: 1279px) {
  .brand-lockup img { height: 60px; }
}

/* Tablet and below: the nav collapses to the toggle, so the logo can breathe */
@media (max-width: 768px) {
  .brand-lockup img { height: 52px; }
}

/* Narrow phones — keeps clear of the 46px toggle inside the gutters */
@media (max-width: 400px) {
  :root { --header-h: 76px; --header-h-stuck: 68px; }
  .brand-lockup img { height: 46px; }
}

/* The stacked lockup is sized by WIDTH (see .site-footer__brand below), because
   it is a wide block rather than a bar — height would make it grow unpredictably
   as the tagline width changes. width:auto is never combined with a fixed height,
   so the aspect ratio is always preserved. */
.brand-lockup--stacked img { height: auto; }

/* Mobile drawer header */
.mobile-nav__head .brand-lockup img { height: 46px; }
.brand-lockup__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
}

.primary-nav { display: none; }
@media (min-width: 1080px) {
  .primary-nav { display: block; margin-inline: auto; }
}
.primary-nav__list { display: flex; align-items: center; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.primary-nav__list > li { margin: 0; position: relative; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.65rem 0.8rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--text-invert);
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.nav-link:hover, .nav-link[aria-expanded="true"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.nav-link[aria-current="page"] { color: var(--azure-300); }
.nav-link__caret { width: 10px; height: 10px; transition: transform var(--dur) var(--ease); opacity: 0.6; }
.nav-link[aria-expanded="true"] .nav-link__caret { transform: rotate(180deg); }

/* Mega menu panel */
.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(1100px, calc(100vw - 3rem));
  background: var(--ink-800);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  padding: var(--sp-6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.mega[data-open="true"] {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega--sm { width: min(560px, calc(100vw - 3rem)); }

.mega__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); }
.mega--sm .mega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega__col-title {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--azure-300);
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__list li { margin: 0; }
.mega__list a {
  display: block;
  padding: 0.4rem 0.5rem;
  margin-left: -0.5rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text-invert);
  font-weight: 500;
}
.mega__list a:hover { background: rgba(36, 183, 232, 0.1); color: var(--azure-300); }
.mega__list .mega__desc { display: block; font-size: var(--fs-xs); color: var(--text-invert-muted); font-weight: 400; margin-top: 1px; }

.mega__promo {
  grid-column: span 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: rgba(37, 99, 255, 0.12);
  border: 1px solid rgba(108, 151, 255, 0.28);
  border-radius: var(--r-md);
  color: var(--text-invert-muted);
  font-size: var(--fs-sm);
}
.mega__promo strong { color: #fff; display: block; font-family: var(--font-display); font-size: var(--fs-lg); }

.header-actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.header-actions .btn { display: none; }
@media (min-width: 600px) { .header-actions .btn { display: inline-flex; } }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  color: #fff;
}
@media (min-width: 1080px) { .nav-toggle { display: none; } }
.nav-toggle__bars { width: 20px; height: 14px; position: relative; }
.nav-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
  /* Clips the closed panel, which sits at translateX(100%). Without this it
     counts toward document scrollWidth and creates horizontal overflow.
     clip-path is used as well because it reliably clips fixed descendants. */
  overflow: hidden;
  clip-path: inset(0);
}
.mobile-nav[data-open="true"] { visibility: visible; pointer-events: auto; }
.mobile-nav__scrim {
  position: absolute; inset: 0;
  background: rgba(6, 12, 22, 0.55);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.mobile-nav[data-open="true"] .mobile-nav__scrim { opacity: 1; }
.mobile-nav__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  background: var(--ink-800);
  box-shadow: -24px 0 64px rgba(0, 0, 0, 0.6);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav[data-open="true"] .mobile-nav__panel { transform: translateX(0); }
.mobile-nav__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky; top: 0; background: var(--ink-800); z-index: 2;
}
.mobile-nav__body { padding: var(--sp-4) var(--sp-5) var(--sp-8); flex: 1; }
.mobile-nav__group + .mobile-nav__group { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.mobile-nav__trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: var(--sp-3);
  padding: var(--sp-4) 0;
  background: none; border: 0;
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 650;
  color: #fff; text-align: left; cursor: pointer;
}
.mobile-nav__trigger .nav-link__caret { transition: transform var(--dur) var(--ease); }
.mobile-nav__trigger[aria-expanded="true"] .nav-link__caret { transform: rotate(180deg); }
.mobile-nav__sub { display: none; padding: 0 0 var(--sp-4) var(--sp-3); list-style: none; margin: 0; border-left: 2px solid rgba(108, 151, 255, 0.35); }
.mobile-nav__sub[data-open="true"] { display: block; }
.mobile-nav__sub li { margin: 0; }
.mobile-nav__sub a { display: block; padding: 0.5rem 0 0.5rem var(--sp-4); font-size: var(--fs-sm); color: var(--text-invert-muted); }
.mobile-nav__sub a:hover { color: #fff; }
.mobile-nav__sub-title {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--azure-300);
  padding: var(--sp-4) 0 var(--sp-1) var(--sp-4);
}
.mobile-nav__link {
  display: block; padding: var(--sp-4) 0;
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 650; color: #fff;
}
.mobile-nav__foot { padding: var(--sp-5); border-top: 1px solid rgba(255, 255, 255, 0.1); background: var(--ink-900); }
.mobile-nav__foot .btn + .btn { margin-top: var(--sp-3); }

body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow-x: clip;
  background: var(--ink-800);
  color: var(--text-invert);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 480px at 78% 12%, rgba(30, 107, 255, 0.22), transparent 62%),
    radial-gradient(620px 380px at 8% 92%, rgba(11, 63, 168, 0.28), transparent 60%);
  z-index: -2;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 10%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 40%, #000 10%, transparent 78%);
  z-index: -1;
}
.hero h1 { color: #fff; }
.hero__inner { padding-block: clamp(3.5rem, 2rem + 8vw, 7.5rem); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 1rem + 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 980px) {
  .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
}
.hero__lede { font-size: var(--fs-xl); color: var(--text-invert-muted); line-height: 1.55; max-width: 56ch; }
.hero__eyebrow { color: var(--azure-300); }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-invert);
  list-style: none; padding-left: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--text-invert-muted);
}
.hero__meta li { margin: 0; display: flex; align-items: center; gap: 0.5em; }
.hero__meta li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--azure-400); flex: none;
}

/* Page hero (interior) */
.page-hero { background: var(--ink-800); color: var(--text-invert); position: relative; overflow: hidden; isolation: isolate; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(760px 400px at 88% 0%, rgba(30, 107, 255, 0.2), transparent 62%),
    linear-gradient(to bottom, rgba(255,255,255,0.03), transparent 40%);
}
.page-hero__inner { padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem); }
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero .lede { color: var(--text-invert-muted); }
.page-hero .eyebrow { color: var(--azure-300); }
.page-hero__grid {
  display: grid; gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .page-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; }
}

.breadcrumbs { font-size: var(--fs-xs); color: var(--text-invert-muted); padding-top: var(--sp-5); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5em; margin: 0; padding: 0; }
.breadcrumbs li { margin: 0; display: flex; align-items: center; gap: 0.5em; }
.breadcrumbs li + li::before { content: "/"; opacity: 0.4; }
.breadcrumbs a { color: var(--text-invert-muted); }
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs [aria-current="page"] { color: #fff; }

/* --------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover { border-color: var(--azure-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card h3, .card h4 { margin-bottom: var(--sp-1); font-size: var(--fs-h4); }
.grid-3 .card h3 { font-size: var(--fs-xl); }
.grid-4 .card h3 { font-size: var(--fs-lg); }
.card p { font-size: var(--fs-sm); color: var(--text-muted); }
.card__link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.card__link { position: static; }
.card .link-arrow { margin-top: auto; padding-top: var(--sp-3); }

.card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: rgba(36, 183, 232, 0.1);
  color: var(--azure-300);
  border: 1px solid rgba(36, 183, 232, 0.24);
  margin-bottom: var(--sp-2);
  flex: none;
}
.card__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------------------------
   8b. SOLUTION SPHERE
   The particle globe that leads every solution tile. The canvas is
   transparent and bleeds past the card padding, so the particles read as
   floating inside the card rather than sitting in a visible box. Sizing is
   driven by --sphere-h; the engine derives the globe radius from it.
   -------------------------------------------------------------------------- */
.card--sphere {
  --sphere-h: 210px;
  --sphere-icon: 58px;
  /* Matches .card's own horizontal padding, so the globe can bleed to the
     tile edges. Kept in step with the padding at every breakpoint. */
  --sphere-bleed: var(--sp-6);
  padding-top: var(--sp-4);
}

.solution-sphere {
  position: relative;
  width: calc(100% + var(--sphere-bleed) * 2);
  margin-inline: calc(var(--sphere-bleed) * -1);
  height: var(--sphere-h);
  display: grid;
  place-items: center;
  pointer-events: none;
}

/* The ground the dust sits on — a darkening, not a glow.

   The particles are single pixels at low opacity, so they need something
   near black behind them; the card's own navy otherwise swallows the whole
   back hemisphere. This is the opposite of a fill: it does not describe the
   globe, it deepens the band of card the globe occupies, and the black it
   restores is what stays visible between the particles.

   Deliberately a full-width band and not a disc. A radial darkening sized
   anywhere near the globe reads as a dark circle behind it, which is the
   same mistake as drawing the sphere — just in negative. Squared off and
   run to the card's own edges, there is no shape to see: it reaches the
   card's top edge exactly, and fades out below the globe, well clear of
   the silhouette. */
.solution-sphere::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--sp-4) * -1);      /* .card--sphere's own padding-top */
  bottom: -40px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(180deg,
    rgba(2, 5, 11, 0.78) 0%,
    rgba(2, 5, 11, 0.78) 84%,
    transparent 100%);
  z-index: 0;
  pointer-events: none;
}

/* The band runs a little past the globe, so the copy sits above it. */
.card--sphere > h3,
.card--sphere > p,
.card--sphere > .link-arrow {
  position: relative;
  z-index: 1;
}

.solution-sphere canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.solution-sphere__icon {
  position: relative;
  z-index: 2;
  width: var(--sphere-icon);
  height: var(--sphere-icon);
  display: grid;
  place-items: center;
  color: #fff;
  /* No filter here. A filter on this element rasterises its whole subtree
     first — including the ::before scrim below — and then casts the shadow
     from that, so the scrim's own disc gets stamped out as a wide coloured
     bloom behind the icon. The glow belongs on the glyph alone, so it lives
     on the svg rule further down. */
}

/* A soft scrim so the white icon stays crisp against the particles that
   pass behind it. Sits under the glyph, over the canvas. */
.solution-sphere__icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(3, 5, 9, 0.78) 0%,
    rgba(3, 5, 9, 0.5) 38%,
    rgba(3, 5, 9, 0.18) 58%,
    transparent 78%);
  z-index: -1;
  pointer-events: none;
}

.solution-sphere__icon svg {
  position: relative;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  /* Tight, and on the glyph only. The icon should read as a crisp white
     line that is plainly brighter than the dust behind it — a wide bloom
     fattens every stroke and reintroduces exactly the fuzziness the
     particles are drawn to avoid. */
  filter: drop-shadow(0 0 3px rgba(0, 150, 235, 0.45));
}

@media (max-width: 1024px) {
  .card--sphere { --sphere-h: 190px; --sphere-icon: 54px; }
}
@media (max-width: 620px) {
  /* .card drops to --sp-5 padding at this width, so the bleed follows. */
  .card--sphere { --sphere-h: 168px; --sphere-icon: 50px; --sphere-bleed: var(--sp-5); }
}

.section-invert .card {
  background: var(--ink-700);
  border-color: var(--line-invert);
}
.section-invert .card:hover { border-color: rgba(90, 147, 255, 0.5); box-shadow: none; }
.section-invert .card p { color: var(--text-invert-muted); }
.section-invert .card__icon { background: rgba(30, 107, 255, 0.14); border-color: rgba(90, 147, 255, 0.3); color: var(--azure-300); }
.section-invert .card .link-arrow { color: var(--azure-300); }

/* Numbered process steps — used only where order genuinely matters */
.steps { counter-reset: step; display: grid; gap: var(--sp-5); }
.step {
  position: relative;
  padding-left: 3.75rem;
  counter-increment: step;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: rgba(36, 183, 232, 0.1);
  border: 1px solid rgba(36, 183, 232, 0.24);
  color: var(--azure-300);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.section-invert .step::before {
  background: rgba(30, 107, 255, 0.14);
  border-color: rgba(90, 147, 255, 0.28);
  color: var(--azure-300);
}
.step h4, .step h3 { margin-bottom: var(--sp-2); font-size: var(--fs-h4); }
.step p { font-size: var(--fs-sm); color: var(--text-muted); }

/* Capability list */
.capability-block { border-top: 1px solid var(--line); padding-top: var(--sp-5); }
.capability-block h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.capability-block > p { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-4); }
.capability-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-2) var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.capability-list li {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-invert-muted);
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.5;
}
.capability-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 2px;
  border: 1.5px solid var(--azure-400);
}
.section-invert .capability-list li { color: var(--text-invert-muted); }
.section-invert .capability-block { border-color: var(--line-invert); }

/* Checked feature list */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.check-list li { margin: 0; padding-left: 2rem; position: relative; font-size: var(--fs-sm); }
.check-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.15em;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.16);
  -webkit-mask: none;
}
.check-list li::after {
  content: "";
  position: absolute; left: 5px; top: 0.45em;
  width: 10px; height: 6px;
  border-left: 2px solid var(--signal-500);
  border-bottom: 2px solid var(--signal-500);
  transform: rotate(-45deg);
}
.section-invert .check-list li::before { background: rgba(16, 185, 129, 0.16); }

/* Outcome tiles */
.outcome {
  display: flex; gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line);
}
.outcome__index {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--grey-500); flex: none; padding-top: 0.35em; letter-spacing: 0.08em;
}
.outcome h4, .outcome h3 { margin-bottom: var(--sp-2); font-size: var(--fs-lg); }
.outcome p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
.section-invert .outcome { border-color: var(--line-invert); }
.section-invert .outcome__index { color: var(--grey-500); }

/* Stat / fact panel (no fabricated numbers — descriptive facts only) */
.fact-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 700px) { .fact-grid { grid-template-columns: repeat(3, 1fr); } }
.fact { background: var(--bg-elevated); padding: var(--sp-6); }
.fact__value { font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; color: #fff; line-height: 1; margin-bottom: var(--sp-3); }
.fact__label { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
.fact__value--text { font-size: var(--fs-xl); line-height: 1.2; letter-spacing: -0.02em; }
.section-invert .fact-grid { background: var(--line-invert); border-color: var(--line-invert); }
.section-invert .fact { background: var(--ink-700); }
.section-invert .fact__value { color: #fff; }

/* Pills / tags */
.pill-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.pill {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-elevated);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-invert-muted);
  margin: 0;
}
.section-invert .pill { background: rgba(255,255,255,0.05); border-color: var(--line-invert); color: var(--text-invert-muted); }

/* Technology / partner tiles */
.tech-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tech-tile {
  background: var(--bg-elevated);
  padding: var(--sp-5) var(--sp-4);
  display: grid; place-items: center; gap: var(--sp-2);
  text-align: center;
  min-height: 104px;
  transition: background var(--dur) var(--ease);
}
.tech-tile:hover { background: var(--bg-raised); }
.tech-tile__name { font-family: var(--font-display); font-weight: 650; font-size: var(--fs-sm); color: #fff; letter-spacing: -0.01em; }
.tech-tile__cat { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-500); }

/* Notice / placeholder marker */
.notice {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  border: 1px dashed var(--grey-400);
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--fs-sm);
  color: var(--text-invert-muted);
}
.notice--action { border-color: var(--warn-500); background: rgba(251, 146, 60, 0.08); color: #FDBA74; }
.notice__tag {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; flex: none;
  color: var(--warn-500);
}
.notice p { margin: 0; }
.section-invert .notice { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.24); color: var(--text-invert-muted); }

/* Person card (leadership placeholders) */
.person { text-align: left; }
.person__avatar {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--ink-600), var(--ink-900));
  border: 1px solid var(--line);
  display: grid; place-items: center;
  margin-bottom: var(--sp-4);
  overflow: hidden;
  position: relative;
}
.person__avatar::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
}
.person__initials { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: rgba(255,255,255,0.28); position: relative; z-index: 1; }
.person__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); margin: 0 0 2px; }
.person__role { font-size: var(--fs-sm); color: var(--azure-300); margin: 0 0 var(--sp-2); font-weight: 550; }
.person__bio { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

/* Insight / case-study cards */
.post-card { display: flex; flex-direction: column; height: 100%; position: relative; }
.post-card__thumb {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--ink-700) 0%, rgba(36,183,232,0.35) 160%);
  margin-bottom: var(--sp-4);
  position: relative;
  overflow: hidden;
}
.post-card__thumb::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
}
.post-card__meta {
  display: flex; gap: var(--sp-3); align-items: center;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--grey-500); text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: var(--sp-3);
}
.post-card h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.post-card p { font-size: var(--fs-sm); color: var(--text-muted); }

/* Industry card */
.industry-card {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.industry-card:hover { border-color: var(--azure-300); box-shadow: var(--shadow-sm); }
.industry-card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.industry-card p { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-3); }
.industry-card .pill-row { margin-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   9. ACCORDION (FAQ)
   -------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-5) 0;
  background: none; border: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 650;
  letter-spacing: -0.015em;
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.accordion__trigger:hover { color: var(--azure-300); }
.accordion__icon {
  flex: none; width: 22px; height: 22px; position: relative; margin-top: 0.2em;
}
.accordion__icon::before, .accordion__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 13px; height: 2px; border-radius: 2px;
  background: var(--azure-400);
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }
.accordion__panel { display: none; padding: 0 0 var(--sp-5); max-width: 74ch; }
.accordion__panel[data-open="true"] { display: block; }
.accordion__panel p { font-size: var(--fs-sm); color: var(--text-muted); }
.section-invert .accordion, .section-invert .accordion__item { border-color: var(--line-invert); }
.section-invert .accordion__trigger { color: #fff; }

/* --------------------------------------------------------------------------
   10. FORMS
   -------------------------------------------------------------------------- */
.form-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field--full { grid-column: 1 / -1; }

.label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
  display: flex; align-items: baseline; gap: 0.4em;
}
.label .req { color: var(--warn-500); font-size: var(--fs-xs); }
.hint { font-size: var(--fs-xs); color: var(--grey-500); }

.input, .select, .textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  min-height: 48px;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--grey-300);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--grey-500); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--grey-400); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--azure-400);
  box-shadow: 0 0 0 3px rgba(36, 183, 232, 0.2);
  background: var(--bg-raised);
}
.textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23A9B0BD' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 16px;
  padding-right: 2.5rem;
}

.checkbox { display: flex; gap: var(--sp-3); align-items: flex-start; }
.checkbox input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--azure-400); }
.checkbox label { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; }

.field-error {
  font-size: var(--fs-xs);
  color: var(--warn-500);
  font-weight: 550;
  display: none;
}
.field[data-invalid="true"] .field-error { display: block; }
.field[data-invalid="true"] .input,
.field[data-invalid="true"] .select,
.field[data-invalid="true"] .textarea { border-color: var(--warn-500); }

.form-status {
  display: none;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  margin-top: var(--sp-4);
}
.form-status[data-state="ok"] { display: block; background: rgba(36, 183, 232, 0.1); border: 1px solid rgba(36, 183, 232, 0.35); color: var(--azure-300); }
.form-status[data-state="error"] { display: block; background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.35); color: #FCA5A5; }

.form-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   11. CTA BANNER
   -------------------------------------------------------------------------- */
.cta-banner {
  background: var(--ink-800);
  color: var(--text-invert);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cta-banner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(700px 340px at 82% 20%, rgba(30, 107, 255, 0.26), transparent 62%);
}
.cta-banner h2 { color: #fff; }
.cta-banner p { color: var(--text-invert-muted); }
.cta-banner__inner {
  display: grid; gap: var(--sp-6);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .cta-banner__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .cta-banner__actions { justify-self: end; }
}
.cta-banner .btn-row { margin-top: 0; }

/* --------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink-900);
  color: var(--text-invert-muted);
  font-size: var(--fs-sm);
  border-top: 1px solid rgba(255,255,255,0.07);
}
.site-footer a { color: var(--text-invert-muted); }
.site-footer a:hover { color: #fff; }
.site-footer__top {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3rem);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;          /* brand block tops align with the column headings */
}
@media (min-width: 760px) {
  .site-footer__top { grid-template-columns: minmax(0, 1.35fr) minmax(0, 2.65fr); }
}
/* Everything in the brand column shares the same left edge as the lockup. */
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer__brand .brand-lockup { margin: 0 0 var(--sp-6); }
/* Sized by width, so the lockup scales as one piece and can never be stretched. */
.site-footer__brand .brand-lockup img {
  width: clamp(230px, 19vw, 280px);
  height: auto;
}
.site-footer__brand p { max-width: 360px; }
.site-footer__contact { max-width: 360px; }
.site-footer__brand .social-row { margin-top: var(--sp-2); }
.social-row a { width: 40px; height: 40px; }
.site-footer__brand p { margin-bottom: var(--sp-5); }
.site-footer__nav {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
@media (min-width: 620px) { .site-footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 759px) {
  .site-footer__brand .brand-lockup img { width: clamp(210px, 48vw, 260px); }
}
@media (max-width: 430px) {
  .site-footer__nav { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .site-footer__brand .brand-lockup img { width: min(240px, 66vw); }
}
.site-footer h4, .site-footer h3 {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--grey-500); margin-bottom: var(--sp-4); font-weight: 500;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--sp-2); }
.site-footer__contact { list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
.site-footer__contact li { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-3); }
.site-footer__contact svg { width: 16px; height: 16px; flex: none; margin-top: 4px; opacity: 0.6; fill: none; stroke: currentColor; stroke-width: 1.6; }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-block: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-xs);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); list-style: none; margin: 0; padding: 0; }
.site-footer__legal li { margin: 0; }
.social-row { display: flex; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.social-row li { margin: 0; }
.social-row a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-md);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.social-row a:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.35); }
.social-row svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------------------
   13. MISC COMPONENTS
   -------------------------------------------------------------------------- */
.support-strip {
  background: linear-gradient(180deg, rgba(36,183,232,0.08), rgba(36,183,232,0.02));
  border-block: 1px solid rgba(36, 183, 232, 0.2);
}
.support-strip__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding-block: var(--sp-5);
}
.support-strip strong { font-family: var(--font-display); font-size: var(--fs-lg); color: #fff; }

.anchor-nav {
  position: sticky; top: var(--header-h); z-index: 20;
  background: rgba(5, 5, 5, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.anchor-nav::-webkit-scrollbar { display: none; }
.anchor-nav ul { display: flex; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.anchor-nav li { margin: 0; }
.anchor-nav a {
  display: inline-block; padding: var(--sp-4) var(--sp-3);
  font-size: var(--fs-sm); font-weight: 550; color: var(--text-invert-muted);
  border-bottom: 2px solid transparent;
}
.anchor-nav a:hover, .anchor-nav a.is-active { color: var(--azure-300); border-bottom-color: var(--azure-400); }

.quote-block {
  border-left: 3px solid var(--azure-400);
  padding-left: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1.45;
  letter-spacing: -0.018em;
  color: #fff;
}
.section-invert .quote-block { color: #fff; }

.definition {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--grey-500);
}

.divider-label {
  display: flex; align-items: center; gap: var(--sp-4);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-500);
  margin-bottom: var(--sp-5);
}
.divider-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.section-invert .divider-label::after { background: var(--line-invert); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.data th, table.data td { text-align: left; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); }
table.data th { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-600); background: var(--ink-800); font-weight: 500; }
table.data tr:last-child td { border-bottom: 0; }

/* Hero systems diagram */
.systems-visual { width: 100%; height: auto; }
.systems-visual .node-pulse { animation: nodePulse 3.6s var(--ease) infinite; transform-origin: center; }
.systems-visual .node-pulse:nth-of-type(2n) { animation-delay: 0.7s; }
.systems-visual .node-pulse:nth-of-type(3n) { animation-delay: 1.4s; }
.systems-visual .flow { stroke-dasharray: 5 9; animation: flowDash 2.4s linear infinite; }
@keyframes nodePulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes flowDash { to { stroke-dashoffset: -28; } }

/* --------------------------------------------------------------------------
   15. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split--wide-left, .split--wide-right { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  /* Tall enough for the 52px logo plus breathing room */
  :root { --header-h: 84px; --header-h-stuck: 74px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .card { padding: var(--sp-5); }
  .btn-row .btn { width: 100%; }
  .utility-bar__list li:not(:first-child) { display: none; }
}


/* --------------------------------------------------------------------------
   16. MOTION PREFERENCES & PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    /* Delays must be cleared too. Staggered groups set an inline
       transition-delay, which would otherwise keep cards invisible for up to
       0.84s even with the transition itself disabled. */
    animation-delay: 0.001ms !important;
    transition-delay: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .site-header, .utility-bar, .mobile-nav, .cta-banner, .site-footer__top { display: none; }
  body { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* --------------------------------------------------------------------------
   17. TECHNOLOGY ECOSYSTEM — vendor logo component
   One component, three densities: strip (homepage), card (ecosystem page),
   inline (solution pages). Logos size by HEIGHT only so every vendor keeps
   its own aspect ratio; nothing is stretched and nothing is recoloured.
   -------------------------------------------------------------------------- */

/* Shared logo slot -------------------------------------------------------- */
.vendor-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--vendor-logo-h, 40px);
}
.vendor-logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;   /* never distorts the mark */
}
/* The reversed asset is only shown on dark surfaces. Swapping the file, rather
   than applying a CSS filter, keeps each vendor's identity intact. */
.vendor-logo .vendor-logo__reverse { display: none; }
.section-invert .vendor-logo .vendor-logo__reverse,
.vendor-strip--invert .vendor-logo .vendor-logo__reverse { display: block; }
.section-invert .vendor-logo .vendor-logo__default,
.vendor-strip--invert .vendor-logo .vendor-logo__default { display: none; }

/* Strip — retained static variant --------------------------------------------------- */
.vendor-strip {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.vendor-strip__item {
  --vendor-logo-h: 42px;
  position: relative;
  background: var(--bg-elevated);
  padding: var(--sp-6) var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 116px;
  text-align: center;
  transition: background var(--dur) var(--ease);
}
.vendor-strip__item:hover,
.vendor-strip__item:focus-within { background: var(--azure-050); }

/* Hover reveals the technology area. It is always in the DOM for screen
   readers and always visible on touch, where there is no hover state. */
.vendor-strip__area {
  /* Positioned out of flow so the logo stays optically centred whether or not
     the hover label is showing. */
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--grey-500);
  line-height: 1.3;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.vendor-strip__item:hover .vendor-strip__area,
.vendor-strip__item:focus-within .vendor-strip__area { opacity: 1; transform: none; }
@media (hover: none) {
  .vendor-strip__area { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vendor-strip__area { transition: none; }
}

.vendor-strip--invert { background: var(--line-invert); border-color: var(--line-invert); }
.vendor-strip--invert .vendor-strip__item { background: var(--ink-700); }
.vendor-strip--invert .vendor-strip__item:hover { background: var(--ink-600); }

/* Card — ecosystem page ---------------------------------------------------
   The vendor's mark leads the card. Sizing is not defined here: the card sets
   --logo-scale and everything else comes from the shared .partner-logo--{mod}
   rules in section 18b, so retuning a vendor changes it here and in the
   homepage carousel at the same time.

   0.92 puts the tallest marks (Dell, HPE, Fortinet) at roughly 55-57px of
   actual ink, which is the point at which a square mark and a 6:1 wordmark
   read as equally prominent in a card this wide.
   -------------------------------------------------------------------------- */
.vendor-card {
  --logo-scale: 0.92;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;                  /* clips the accent line to the radius */
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* The gradient top accent line is NOT defined here — section 25 already
   declares it for .card, .vendor-card and .industry-card together, including
   its reduced-motion behaviour. Duplicating it would put two rules with equal
   specificity in the cascade, and the later one silently wins.
   `position: relative` and `overflow: hidden` above are what make that existing
   rule work on this card: its ::before is absolutely positioned, and without a
   positioned ancestor here it was resolving against the viewport. */
.vendor-card:hover { border-color: var(--azure-300); box-shadow: var(--shadow-sm); }

/* Logo region. A fixed slot so the divider lands at the same height on every
   card in a row regardless of how tall that vendor's mark happens to be. */
.vendor-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(116px * var(--logo-scale));
}
.vendor-card__logo .partner-logo__img {
  opacity: 0.94;                     /* the mark leads the card, so barely held back */
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.vendor-card:hover .partner-logo__img,
.vendor-card:focus-within .partner-logo__img {
  opacity: 1;
  transform: translateY(-2px) scale(1.025);
}

.vendor-card__divider {
  height: 1px;
  background: var(--line);
  margin-block: calc(var(--sp-2) * -1) 0;
}

.vendor-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1 1 auto;
}

.vendor-card__capability { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
.vendor-card__families {
  list-style: none; margin: auto 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.vendor-card__families li {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--grey-600);
  background: var(--grey-050);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.7rem;
}

/* The Data Protection group holds a single vendor, so its card runs the full
   container width. Cap the logo region there — a mark centred in 1100px of card
   looks stranded, and the copy reads better on a measure than across the lot. */
.grid-1 .vendor-card__content { max-width: 74ch; }

@media (max-width: 900px) {
  .vendor-card { --logo-scale: 0.88; }
}
@media (max-width: 620px) {
  /* One card per row. Marks land at 130-150px wide, still comfortably
     recognisable, with the region tightened so the copy is not pushed down. */
  .vendor-card { --logo-scale: 0.82; padding: var(--sp-5); }
}

@media (prefers-reduced-motion: reduce) {
  .vendor-card__logo .partner-logo__img { transition: none; }
  .vendor-card:hover .partner-logo__img,
  .vendor-card:focus-within .partner-logo__img { transform: none; }
}

/* Inline — "technologies supporting this capability" on solution pages ----- */
.vendor-inline {
  --vendor-logo-h: 34px;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.vendor-inline__item {
  background: var(--bg-elevated);
  padding: var(--sp-5) var(--sp-3);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  text-align: center;
}
.vendor-inline__area {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--grey-500);
}
.section-invert .vendor-inline { background: var(--line-invert); border-color: var(--line-invert); }
.section-invert .vendor-inline__item { background: var(--ink-700); }

/* Trademark note ---------------------------------------------------------- */
.vendor-legal {
  font-size: var(--fs-xs);
  color: var(--grey-500);
  max-width: 78ch;
  line-height: 1.6;
  margin-top: var(--sp-5);
}
.section-invert .vendor-legal { color: var(--text-invert-muted); }

/* Responsive: 5 per row desktop, 3 tablet, 2 mobile ----------------------- */
@media (max-width: 1024px) {
  .vendor-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .vendor-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vendor-strip__item { min-height: 100px; padding: var(--sp-5) var(--sp-3); }
  .vendor-inline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Screen-reader-only utility --------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   18. TECHNOLOGY ECOSYSTEM CAROUSEL
   A CSS-only marquee. Two identical sets sit side by side inside one track;
   the track translates exactly -50%, so the second set lands precisely where
   the first began and the loop is seamless with no snap. The duplicate set is
   aria-hidden, so assistive technology announces each vendor once.

   The panel is dark because the supplied logo files are white-on-transparent
   PNGs. That is the constraint the whole component is built around: a white
   mark on a light surface is not a subtle contrast problem, it is invisible.
   Both sections that host this component are already .section-black, so the
   panel reads as an inset window rather than a pasted-on box.
   -------------------------------------------------------------------------- */

/* The ecosystem section is one of the few places on the site asked to carry
   more weight than a standard section: it is the proof block. Extra vertical
   room and a larger heading are the whole of the difference. */
.section--ecosystem { padding-block: calc(var(--section-y) * 1.25); }
.section-head__xl { font-size: var(--fs-h1); line-height: 1.06; }
.section--ecosystem .section-head { margin-bottom: clamp(2.5rem, 1.4rem + 3.4vw, 4rem); }

.partner-carousel {
  position: relative;
  overflow: hidden;                 /* never lets the track scroll the page */
  border: 1px solid rgba(0, 202, 253, 0.16);
  border-radius: var(--r-lg);
  /* Slightly lighter than the section behind it, with a cool cast toward the
     centre so the logos sit in a pool of light rather than on flat black. */
  background:
    radial-gradient(120% 160% at 50% 0%, rgba(30, 109, 245, 0.14) 0%, transparent 62%),
    linear-gradient(180deg, var(--ink-700) 0%, var(--ink-800) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
              0 24px 60px -32px rgba(0, 0, 0, 0.9);
  padding-block: var(--sp-6);
  /* Faded edges so logos enter and leave rather than being clipped. The two
     properties are separate declarations on purpose: Safari still wants the
     prefixed one and drops the whole rule if they are combined. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}

/* Faint technical grid, matching the one the dark sections already use. */
.partner-carousel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(0, 202, 253, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 202, 253, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 140% at 50% 50%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 140% at 50% 50%, #000 30%, transparent 78%);
  pointer-events: none;
}

/* Scan line — a narrow cyan sweep crossing the panel. Deliberately faint and
   slow: it should register as the panel being "live" on a second look, not as
   a moving object competing with the logos. */
.partner-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 22%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 202, 253, 0.05) 42%,
    rgba(0, 202, 253, 0.14) 50%,
    rgba(0, 202, 253, 0.05) 58%,
    transparent 100%);
  animation: partnerScan 9s linear infinite;
}
@keyframes partnerScan {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(560%); }
}

.partner-carousel__track {
  position: relative;
  z-index: 1;
  display: flex;
  width: max-content;
  animation: partnerMarquee 42s linear infinite;
  will-change: transform;
}
@keyframes partnerMarquee { to { transform: translateX(-50%); } }

/* Pause on hover, on keyboard focus anywhere inside, and while offscreen.
   The scan line pauses with it so a hovered panel is completely still and the
   logo under the cursor can be read. */
.partner-carousel:hover .partner-carousel__track,
.partner-carousel:focus-within .partner-carousel__track,
.partner-carousel[data-offscreen="true"] .partner-carousel__track,
.partner-carousel:hover::after,
.partner-carousel[data-offscreen="true"]::after {
  animation-play-state: paused;
}

.partner-carousel__set {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.partner-carousel__item {
  --logo-scale: 1;
  margin: 0;
  flex: 0 0 auto;
  /* ~5 visible. The upper bound is deliberately low: .container caps at about
     1160px, so past that width a vw-based cell stops growing with the viewport
     and simply shows fewer logos. Capping the cell instead keeps the count
     steady from 1100px all the way up. */
  width: clamp(196px, 19vw, 226px);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background: transparent;
  transition: transform 320ms var(--ease),
              border-color 320ms var(--ease),
              background 320ms var(--ease);
}
.partner-carousel__item:hover,
.partner-carousel__item:focus-visible,
.partner-carousel__item:focus-within {
  transform: scale(1.06);
  border-color: rgba(0, 202, 253, 0.42);
  background: rgba(0, 202, 253, 0.05);
}
.partner-carousel__item:focus-visible { outline: none; }   /* the border is the focus ring */

.partner-carousel__label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--grey-500);
  line-height: 1.35;
  min-height: 1.5em;                 /* reserves space — no layout shift on hover */
  opacity: 0;
  transform: translateY(3px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.partner-carousel__item:hover .partner-carousel__label,
.partner-carousel__item:focus-visible .partner-carousel__label,
.partner-carousel__item:focus-within .partner-carousel__label {
  opacity: 1;
  transform: none;
  color: var(--define-cyan);
}
/* Touch devices have no hover, so the label is always shown there. */
@media (hover: none) {
  .partner-carousel__label { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   18b. PARTNER LOGO SLOT — the optical tuning surface

   Every logo gets an IDENTICAL outer slot, and inside it a box of fixed
   height and a per-logo max-width. `object-fit: contain` then scales each
   file to fit, so a mark can never be stretched, cropped or squashed.

   Sizing is per-logo because these eight files share a canvas but not a
   shape. Measured ink boxes:

     MICROSOFT  390x84  in 431x258   wordmark, 4.6:1
     MIRKOTIK   390x95  in 431x258   wordmark, 4.1:1
     VEEAM      390x69  in 431x258   wordmark, 5.7:1
     VMWARE     390x62  in 431x258   wordmark, 6.3:1
     CISCO      422x223 in 452x258   stacked lockup, 1.9:1
     FORTINET   188x135 in 431x258   compact lockup, 1.4:1, ink fills only 44%
     AWS        431x258 in 431x258   lockup, 1.7:1, ink fills the frame
     HP         258x258 in 258x258   square mark, 1.0:1, ink fills the frame

   A single shared width would render HP at roughly three times the optical
   mass of Veeam. The values below are derived from those ink boxes so that
   wordmarks land near 156px wide and compact marks near 52-56px tall — the
   point at which they read as equally prominent — and were then adjusted by
   eye. --logo-h is a shared ceiling set high enough that every logo is
   width-driven, so changing one --logo-w moves that logo and nothing else.

   To retune a single logo, change its --logo-w. Nothing else needs touching.
   -------------------------------------------------------------------------- */
.partner-logo {
  --logo-w: 150px;                   /* fallback for a logo added without one */
  --logo-h: 116px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(var(--logo-h) * var(--logo-scale, 1));
}

.partner-logo__img {
  display: block;
  width: 100%;
  max-width: calc(var(--logo-w) * var(--logo-scale, 1));
  height: calc(var(--logo-h) * var(--logo-scale, 1));
  /* contain is what protects the aspect ratio: the file is scaled to fit the
     box, never resampled to fill it. */
  object-fit: contain;
  object-position: center;
  /* The files are supplied as white marks and are used exactly as supplied —
     no filter, no recolouring, no monochrome conversion. Only the resting
     opacity is touched, so the row reads as a calm set and the hovered logo
     steps forward. */
  opacity: 0.82;
  transition: opacity 320ms var(--ease);
}
.partner-carousel__item:hover .partner-logo__img,
.partner-carousel__item:focus-visible .partner-logo__img,
.partner-carousel__item:focus-within .partner-logo__img { opacity: 1; }

/* Awaiting official artwork — HPE Aruba Networking and Mimecast.
   The name is set in type in the slot the mark will occupy, so the card keeps
   its height and the grid keeps its rhythm. Deliberately quiet and clearly
   typographic: it must never be mistaken for a vendor's actual mark, and it
   must never be a substituted logo from a parent brand. Delete nothing when
   the file arrives — add the LOGO_FILES entry and this rule stops matching. */
.partner-logo__word {
  display: block;
  max-width: 100%;
  font-family: var(--font-display, var(--font-body));
  font-weight: 700;
  font-size: calc(1.0625rem * var(--logo-scale, 1));
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
  color: var(--grey-600);
  transition: color 320ms var(--ease);
}
.vendor-card:hover .partner-logo__word { color: #EAF6FF; }

/* Per-logo optical widths. One line each — this is the tuning surface, and it
   is shared: the homepage carousel and the Technology Ecosystem vendor cards
   both read these, so a vendor is retuned in exactly one place. Each surface
   only sets --logo-scale to say how large it wants the whole set. */
.partner-logo--microsoft { --logo-w: 172px; }   /* ink 156 x 34 */
.partner-logo--mikrotik  { --logo-w: 172px; }   /* ink 156 x 38 */
.partner-logo--veeam     { --logo-w: 172px; }   /* ink 156 x 28 */
.partner-logo--vmware    { --logo-w: 172px; }   /* ink 156 x 25 */
.partner-logo--fortinet  { --logo-w: 188px; }   /* ink  82 x 59 */
.partner-logo--cisco     { --logo-w: 100px; }   /* ink  93 x 49 */
.partner-logo--aws       { --logo-w:  94px; }   /* ink  94 x 56 */
/* Dell is a 330x330 white SVG whose ink fills the frame — same square-mark
   treatment as HP, and sized to match it rather than the wordmarks. */
.partner-logo--dell      { --logo-w:  62px; }   /* ink  62 x 62 */
.partner-logo--hpe       { --logo-w:  60px; }   /* ink  60 x 60 */

/* Tablet: fewer, larger cells so the logos stay comfortably readable. */
@media (max-width: 1100px) {
  .partner-carousel__item {
    width: clamp(200px, 26vw, 248px);                             /* ~3-4 visible */
    --logo-scale: 0.9;
  }
}
/* Mobile: 2 to 2.5 in view, and a faster cycle so the shorter visible run
   still turns over at a similar rate. */
@media (max-width: 620px) {
  .partner-carousel { padding-block: var(--sp-5); }
  .partner-carousel__item {
    width: clamp(140px, 41vw, 180px);                             /* ~2-2.5 visible */
    --logo-scale: 0.72;
    padding: var(--sp-3) var(--sp-3) var(--sp-2);
    gap: var(--sp-2);
  }
  .partner-carousel__track { animation-duration: 30s; }
  .partner-carousel::after { display: none; }   /* scan line is noise at this size */
}

/* Reduced motion: stop the loop and lay the single real set out as a static,
   wrapping grid. Content stays fully visible and readable. */
@media (prefers-reduced-motion: reduce) {
  .partner-carousel {
    -webkit-mask-image: none;
    mask-image: none;
    padding-inline: var(--sp-4);
  }
  .partner-carousel::after { display: none; }
  .partner-carousel__track { animation: none; width: 100%; }
  .partner-carousel__set { flex-wrap: wrap; justify-content: center; width: 100%; }
  .partner-carousel__set[aria-hidden="true"] { display: none; }
  .partner-carousel__item { transition: none; }
  .partner-carousel__item:hover,
  .partner-carousel__item:focus-visible,
  .partner-carousel__item:focus-within { transform: none; }
  .partner-logo__img { transition: none; opacity: 1; }
  .partner-carousel__label { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   20. MICRO-INTERACTIONS
   -------------------------------------------------------------------------- */
.card { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                    transform var(--dur) var(--ease); }
.card:hover { transform: translateY(-4px); }
.card__icon { transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
                          border-color var(--dur) var(--ease); }
.card:hover .card__icon {
  transform: translateY(-2px);
  background: var(--azure-100);
  border-color: var(--azure-300);
}
.industry-card { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                             transform var(--dur) var(--ease); }
.industry-card:hover { transform: translateY(-4px); }
.vendor-card:hover { transform: translateY(-4px); }

/* Primary buttons gain a sliding arrow */
.btn--arrow::after {
  content: "";
  width: 1em; height: 1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
.btn--arrow:hover::after { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .card:hover, .industry-card:hover, .vendor-card:hover,
  .partner-carousel__item:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   21. BLACK BRAND DIRECTION
   Black is used deliberately — navigation, hero, technology sections, major
   CTAs and the footer. Light sections sit between them so the page keeps a
   readable rhythm rather than becoming uniformly dark.
   -------------------------------------------------------------------------- */
.hero { background: var(--brand-black, #050505); }
.hero::before {
  background:
    radial-gradient(900px 480px at 78% 12%, rgba(37, 99, 255, 0.20), transparent 62%),
    radial-gradient(620px 380px at 8% 92%, rgba(18, 58, 174, 0.24), transparent 60%);
}
.page-hero { background: var(--ink-900); }
.cta-banner { background: var(--ink-900); }
.cta-banner::before {
  background: radial-gradient(700px 340px at 82% 20%, rgba(37, 99, 255, 0.22), transparent 62%);
}

/* A black section variant with a faint technical grid */
.section-black {
  background: var(--ink-900);
  color: var(--text-invert);
  position: relative;
  isolation: isolate;
}
.section-black::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.032) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 5%, transparent 80%);
  mask-image: radial-gradient(circle at 50% 40%, #000 5%, transparent 80%);
}
.section-black h1, .section-black h2, .section-black h3, .section-black h4 { color: #fff; }
.section-black p, .section-black .lede { color: var(--text-invert-muted); }
.section-black .eyebrow { color: var(--azure-300); }
.section-black a:not(.btn) { color: var(--azure-300); }
.section-black .btn { color: var(--btn-fg); }
.section-black .btn--secondary { --btn-fg: #fff; --btn-border: rgba(255,255,255,0.28); }
.section-black .divider-label { color: var(--text-invert-muted); }
.section-black .divider-label::after { background: var(--line-invert); }
.section-black .vendor-legal { color: var(--text-invert-muted); }

/* Carousel on black — the reversed vendor assets are used automatically */
.section-black .partner-carousel,
.section-invert .partner-carousel {
  background: linear-gradient(180deg, #12171F 0%, #0B0D10 100%);
  border-color: rgba(255, 255, 255, 0.14);
}
.section-black .partner-carousel::before,
.section-invert .partner-carousel::before {
  background-image:
    linear-gradient(to right, rgba(108, 151, 255, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(108, 151, 255, 0.055) 1px, transparent 1px);
}
.section-black .partner-carousel__label,
.section-invert .partner-carousel__label { color: var(--text-invert-muted); }
.section-black .vendor-logo .vendor-logo__reverse,
.section-black .vendor-logo .vendor-logo__default { display: none; }
.section-black .vendor-logo .vendor-logo__reverse { display: block; }

/* Vendor cards on black */
.section-black .vendor-card {
  background: var(--ink-800);
  border-color: rgba(255, 255, 255, 0.12);
}
.section-black .vendor-card:hover { border-color: rgba(108, 151, 255, 0.5); box-shadow: none; }
.section-black .vendor-card .vendor-logo { border-bottom-color: rgba(255, 255, 255, 0.12); }
.section-black .vendor-card__capability { color: var(--text-invert-muted); }
.section-black .vendor-card__families li {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-invert-muted);
}
.section-black .card {
  background: var(--ink-800);
  border-color: rgba(255, 255, 255, 0.12);
}
.section-black .card p { color: var(--text-invert-muted); }
.section-black .card__icon {
  background: rgba(37, 99, 255, 0.16);
  border-color: rgba(108, 151, 255, 0.3);
  color: var(--azure-300);
}
.section-black .card .link-arrow { color: var(--azure-300); }
.section-black .notice {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--text-invert-muted);
}
.section-black .tech-panel { border-color: rgba(255, 255, 255, 0.12); }

/* Animated logo introduction. Runs once on the homepage, then holds. */
.brand-lockup--intro .bl-shape {
  opacity: 0;
  animation: blShape 0.5s var(--ease) 0.05s forwards;
}
.brand-lockup--intro .bl-trace {
  stroke-dasharray: 60; stroke-dashoffset: 60;
  animation: blTrace 0.45s var(--ease) 0.36s forwards;
}
.brand-lockup--intro .bl-node {
  opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: blNode 0.32s var(--ease) 0.6s forwards;
}
.brand-lockup--intro .bl-node2 { animation-delay: 0.72s; }
.brand-lockup--intro .brand-lockup__text {
  opacity: 0;
  animation: blWord 0.4s var(--ease) 0.84s forwards;
}
@keyframes blShape { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes blTrace { to { stroke-dashoffset: 0; } }
@keyframes blNode  { from { opacity: 0; transform: scale(0.45); } to { opacity: 1; transform: scale(1); } }
@keyframes blWord  { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .brand-lockup--intro .bl-shape,
  .brand-lockup--intro .bl-node,
  .brand-lockup--intro .brand-lockup__text { opacity: 1; animation: none; transform: none; }
  .brand-lockup--intro .bl-trace { stroke-dashoffset: 0; animation: none; }
}

/* --------------------------------------------------------------------------
   22. DARK ENTERPRISE DEPTH
   Black is layered, not flat: near-black planes, thin borders, faint grids,
   low-opacity cyan lighting. Everything here is transform/opacity only.
   -------------------------------------------------------------------------- */

/* Faint technical grid. Applied deliberately — hero, technology, CTA. */
.has-grid { position: relative; isolation: isolate; }
.has-grid::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 78%);
}

/* Ambient cyan lighting behind major technology graphics */
.has-glow { position: relative; isolation: isolate; overflow: hidden; }
.has-glow::after {
  content: "";
  position: absolute; z-index: -1;
  width: 70%; aspect-ratio: 1;
  top: -10%; right: -12%;
  background: radial-gradient(circle, rgba(36, 183, 232, 0.14), transparent 65%);
  pointer-events: none;
}
.has-glow--left::after { right: auto; left: -14%; top: 20%; }

/* Section transitions — a hairline that fades out toward the edges */
.section--seam { border-top: 0; position: relative; }
.section--seam::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(36, 183, 232, 0.4), transparent);
}

/* Elevated section layer */
.section--raised { background: var(--bg-elevated); }

/* --------------------------------------------------------------------------
   27. FOOTER PATTERN
   -------------------------------------------------------------------------- */
.site-footer { position: relative; isolation: isolate; overflow: hidden; }
.site-footer::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 56px 56px;
}
.site-footer::after {
  content: "";
  position: absolute; z-index: -1;
  left: -6%; bottom: -40%;
  width: 46%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(36, 183, 232, 0.1), transparent 65%);
}

/* --------------------------------------------------------------------------
   35. LOGO-DERIVED BRAND SYSTEM
   Navy is the elevated surface, blue the primary accent, cyan the highlight
   and violet the terminal note — exactly the order they appear in the mark.
   -------------------------------------------------------------------------- */

/* Gradient text. Used on selected words only, never whole paragraphs. */
.gradient-text {
  background: var(--define-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Fallback for anything that cannot clip a background to text */
@supports not (background-clip: text) {
  .gradient-text { color: var(--define-cyan); -webkit-text-fill-color: currentColor; }
}

/* Primary CTA now carries the brand gradient */
.btn {
  --btn-fg: #FFFFFF;
  background: var(--define-gradient);
  background-size: 180% 100%;
  background-position: 0% 50%;
  border-color: transparent;
  transition: background-position 600ms var(--ease-out-premium),
              transform 250ms var(--ease-out-premium),
              box-shadow 300ms var(--ease);
}
.btn:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(30, 109, 245, 0.35), 0 0 0 1px rgba(0, 202, 253, 0.35);
}
.btn:active { transform: translateY(0); }

/* Secondary CTA: navy field, blue-violet border, gradient fill on hover */
.btn--secondary {
  background: rgba(11, 18, 32, 0.85);
  border: 1px solid var(--grey-300);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.btn--secondary::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--define-gradient-soft);
  opacity: 0;
  transition: opacity 300ms var(--ease);
}
.btn--secondary:hover {
  background: rgba(11, 18, 32, 0.85);
  border-color: var(--define-blue);
  box-shadow: 0 0 0 1px rgba(92, 36, 242, 0.35);
}
.btn--secondary:hover::before { opacity: 1; }
.btn--secondary > * { position: relative; z-index: 1; }

.btn--ghost-invert { background: transparent; border-color: rgba(255,255,255,0.28); }
.btn--ghost-invert:hover { background: rgba(255,255,255,0.07); box-shadow: none; }

/* Cards gain a gradient top edge that lights on hover */
.card, .vendor-card, .industry-card { position: relative; overflow: hidden; }
.card::before, .vendor-card::before, .industry-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--define-gradient);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 500ms var(--ease-out-premium);
  z-index: 2;
}
.card:hover::before, .vendor-card:hover::before, .industry-card:hover::before { transform: scaleX(1); }
.card:hover, .industry-card:hover, .vendor-card:hover,
.js .card[data-reveal].is-visible:hover,
.js .industry-card[data-reveal].is-visible:hover,
.js .vendor-card[data-reveal].is-visible:hover {
  border-color: rgba(30, 109, 245, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 202, 253, 0.22), 0 18px 44px rgba(30, 109, 245, 0.16);
}
.card { background: linear-gradient(180deg, var(--ink-700), var(--ink-800)); }

/* Card icons pick up the gradient tint */
.card__icon {
  background: var(--define-gradient-soft);
  border-color: rgba(30, 109, 245, 0.3);
  color: var(--define-cyan);
}
.card:hover .card__icon { border-color: rgba(0, 202, 253, 0.55); }

/* Scroll progress and section indicators use the brand gradient */
.scroll-progress { background: var(--define-gradient); height: 3px; }
.rule-draw::after { background: var(--define-gradient); }
.nav-indicator { background: var(--define-gradient); }
.section-nav a.is-active::before {
  background: var(--define-cyan);
  border-color: var(--define-cyan);
  box-shadow: 0 0 12px rgba(0, 202, 253, 0.8);
}

/* Footer: gradient hairline above, links warming to cyan then violet */
.site-footer { border-top: 0; }
.site-footer::first-line { color: inherit; }
.site-footer__top { position: relative; }
.site-footer a:not(.btn):hover { color: var(--define-cyan); }
.site-footer__legal a:hover { color: var(--define-violet); }

/* Navigation states */
.nav-link:hover, .nav-link[aria-expanded="true"] {
  color: #fff;
  background: var(--define-gradient-soft);
}
.nav-link[aria-current="page"] { color: var(--define-cyan); }
.mega { background: linear-gradient(180deg, #0B1220, #070B12); }
.mega__list a:hover { background: var(--define-gradient-soft); color: var(--define-cyan); }
.mobile-nav__panel { background: linear-gradient(180deg, #0B1220, #030508); }

/* Elevated navy surfaces */
.form-panel, .vendor-card, .industry-card, .fact {
  background: linear-gradient(180deg, var(--ink-700), var(--ink-800));
}
.input, .select, .textarea { background: rgba(11, 18, 32, 0.9); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--define-blue);
  box-shadow: 0 0 0 3px rgba(30, 109, 245, 0.22);
  background: var(--ink-600);
}

/* Partner carousel on the navy field */
.section-black .partner-carousel,
.section-invert .partner-carousel {
  background: linear-gradient(180deg, #0B1220 0%, #030508 100%);
  border-color: rgba(30, 109, 245, 0.22);
}
.partner-carousel__item::before {
  background: radial-gradient(circle, rgba(30, 109, 245, 0.3), transparent 68%);
}

/* Hero mesh in the logo's blue */
.mesh-pkt { filter: drop-shadow(0 0 6px rgba(0, 202, 253, 0.7)); }

/* Ambient glows now blue-violet rather than flat cyan */
.has-glow::after {
  background: radial-gradient(circle, rgba(30, 109, 245, 0.16), rgba(92, 36, 242, 0.06) 45%, transparent 68%);
}

@media (prefers-reduced-motion: reduce) {
  .card::before, .vendor-card::before, .industry-card::before { transform: scaleX(1); }
  .btn:hover { transform: none; }
}

/* Hero capability line — the one place a full line carries the gradient */
.hero__caps {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 0.85rem + 0.5vw, 1.25rem);
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-4);
}

/* --------------------------------------------------------------------------
   FORM HONEYPOT
   Hidden from people and from assistive technology, but present in the HTML so
   automated submitters fill it. A filled value is treated as spam. Kept as its
   own class rather than reusing .visually-hidden, which exists for content that
   screen readers SHOULD announce.
   -------------------------------------------------------------------------- */
.form-honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}