/* ==========================================================================
   CypherMax — design system
   --------------------------------------------------------------------------
   Visual language adapted from the wope.com reference: deep violet-black base,
   a glowing horizon behind the home hero, gradient-filled headings, hairline
   borders, and frosted-glass controls.

   Palette follows the reference directly — #0a0118 ground, #713dff accent.
   Note this is warmer than the navy shield mark; once the designer confirms the
   brand hex values (spec B8), expect to retune --accent and the horizon glow
   together, since the glow is built from the accent family.

   Type: Space Grotesk (display) + Inter (UI/body). The reference uses Rebond
   Grotesque, which is a licensed commercial face from Extratype and cannot be
   used without a purchased licence — Space Grotesk is the closest open
   substitute at the weights and tracking we need.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surface ramp — deep violet-black, matching the reference */
  --bg:             #0a0118;
  --bg-elev:        #140b25;
  --bg-panel:       #170d2a;

  --surface-1:      rgba(255, 255, 255, .022);
  --surface-2:      rgba(255, 255, 255, .04);
  --surface-3:      rgba(255, 255, 255, .06);

  --border:         rgba(255, 255, 255, .10);
  --border-strong:  rgba(169, 163, 194, .24);
  --border-accent:  rgba(133, 102, 255, .30);

  /* Text ramp */
  --text:           #ffffff;
  --text-2:         #d2d0dd;
  --text-muted:     #9b96b0;
  --text-faint:     #676182;

  /* Accent */
  --accent:         #8b5cff;
  --accent-2:       #b9a3ff;
  --accent-soft:    rgba(133, 102, 255, .15);
  --accent-line:    rgba(133, 102, 255, .38);
  --accent-grad:    linear-gradient(120deg, #713dff 0%, #9d6bff 100%);

  /* Status */
  --danger:         #ff6b6b;
  --danger-soft:    rgba(255, 107, 107, .12);

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

  /* Rhythm */
  --container: 1200px;
  --gutter: 24px;
  --section-y: clamp(72px, 9vw, 124px);
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* The reference's signature control glow: a soft radial lift from below. */
  --glow-inset: radial-gradient(107.5% 107.5% at 50% 215%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 100%);

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

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

html {
  scroll-behavior: smooth;
  /* A little breathing room above an anchor target. The header is not sticky,
     so this no longer has to clear it — it is just margin. */
  scroll-padding-top: 24px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Ambient glow behind the whole page, strongest at the top. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 42% at 50% -8%, rgba(133, 102, 255, .16) 0%, rgba(133, 102, 255, 0) 100%),
    radial-gradient(40% 30% at 88% 6%, rgba(185, 163, 255, .08) 0%, rgba(185, 163, 255, 0) 100%);
}

main, header, footer { position: relative; z-index: 1; }

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

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; }

hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 0;
}

/* Visible focus for keyboard users — never removed, only restyled (spec 19). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: rgba(133, 102, 255, .32); color: #fff; }

/* Skip link — first tab stop on every page. */
.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #12042a;
  font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

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

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.028em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 5.4vw, 4.1rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.85rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -.022em; }
h4 { font-size: 1.125rem; letter-spacing: -.018em; line-height: 1.3; }

p { margin: 0; }

/* The reference's signature heading treatment: a vertical white-to-translucent
   gradient clipped to the glyphs, which reads as a soft light from above. */
.grad-text {
  background: linear-gradient(180deg, #ffffff 20%, rgba(255, 255, 255, .62) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Fallback for engines without background-clip:text support. */
  -webkit-text-fill-color: transparent;
}

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

.lede {
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.68;
  color: var(--text-muted);
  max-width: 62ch;
}

.section-intro {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 64ch;
  margin-top: 18px;
}

.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); font-size: .875rem; }

/* Small caps label used above section headings. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--accent-line);
}
.eyebrow--center { justify-content: center; }

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

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(52px, 6vw, 80px); }

/* A panel one step up from the page background, used to break up long pages.
   Sections meet through a soft glow rather than a ruled line: a violet bloom
   at each edge, plus a hairline that fades out before it reaches either side,
   so there is no hard horizontal cut anywhere on the page. */
/* Deliberately bare. Sections run into each other with nothing between them —
   no border, no tint, no glow — so the page reads as one continuous surface and
   the only rhythm comes from spacing and the lit section headings.
   The class is kept on the markup as the marker for "this section would take a
   distinct treatment"; add it back here if one is ever wanted. */
.section--panel { position: relative; }

/* Section headings sit in their own pool of light: a soft violet bloom behind
   the text, and a scatter of small glowing dots around it, echoing the hero's
   starfield so the two read as one system. Both are decorative pseudo-elements;
   the heading's own children are lifted above them. */
.section-head {
  position: relative;
  margin-bottom: 52px;
}
.section-head > * { position: relative; z-index: 1; }

.section-head::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: min(560px, 96%);
  height: 280px;
  transform: translateY(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(139, 92, 255, .20) 0%,
    rgba(113, 61, 255, .08) 44%,
    transparent 72%);
  filter: blur(26px);
  pointer-events: none;
}

/* One dot per gradient — the background box is the heading block, so each
   percentage position places a single star rather than tiling a field. */
.section-head::after {
  content: '';
  position: absolute;
  inset: -34px -4% -26px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(2.8px 2.8px at 4% 18%,  #fff 0%, rgba(199, 178, 255, .45) 28%, transparent 100%),
    radial-gradient(2.2px 2.2px at 17% 82%, #fff 0%, rgba(185, 163, 255, .4) 28%, transparent 100%),
    radial-gradient(2.5px 2.5px at 33% 8%,  #fff 0%, rgba(214, 200, 255, .42) 28%, transparent 100%),
    radial-gradient(1.9px 1.9px at 47% 92%, #fff 0%, rgba(185, 163, 255, .36) 28%, transparent 100%),
    radial-gradient(2.6px 2.6px at 62% 14%, #fff 0%, rgba(199, 178, 255, .42) 28%, transparent 100%),
    radial-gradient(2.1px 2.1px at 78% 74%, #fff 0%, rgba(214, 200, 255, .38) 28%, transparent 100%),
    radial-gradient(2.4px 2.4px at 90% 26%, #fff 0%, rgba(185, 163, 255, .4) 28%, transparent 100%),
    radial-gradient(1.8px 1.8px at 96% 66%, #fff 0%, rgba(199, 178, 255, .34) 28%, transparent 100%);
  animation: section-sparkle 6.5s ease-in-out infinite;
}

@keyframes section-sparkle {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}

.section-head--center { text-align: center; }
.section-head--center .section-intro { margin-inline: auto; }
.section-head--center::before { left: 50%; transform: translate(-50%, -50%); }

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.stack { display: grid; gap: 16px; }
.stack--lg { gap: 28px; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  /* 44px min height — tap-target floor from spec 19. */
  min-height: 44px;
  padding: 11px 24px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: .925rem;
  font-weight: 500;
  letter-spacing: -.012em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .22s var(--ease),
              background-color .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease);
}
.btn:active { transform: translateY(1px); }

/* Frosted violet glass. Reads as the primary action through tint and glow
   rather than through a flat opaque fill. */
.btn--primary {
  background-color: rgba(129, 85, 255, .30);
  background-image:
    var(--glow-inset),
    linear-gradient(180deg, rgba(178, 148, 255, .40) 0%, rgba(113, 61, 255, .22) 100%);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-color: rgba(198, 178, 255, .42);
  color: #fff;
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -1px 0 rgba(255, 255, 255, .06),
    0 10px 30px -12px rgba(113, 61, 255, .85);
}
.btn--primary:hover {
  background-color: rgba(143, 101, 255, .40);
  border-color: rgba(214, 200, 255, .56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .44),
    inset 0 -1px 0 rgba(255, 255, 255, .08),
    0 14px 40px -12px rgba(133, 102, 255, 1);
  transform: translateY(-1px);
}

/* Clear glass — the reference's default control: faint fill, hairline border,
   a blurred backdrop and a radial lift from below that reads as an inner glow. */
.btn--ghost {
  background-color: rgba(255, 255, 255, .055);
  background-image: var(--glow-inset);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-color: rgba(255, 255, 255, .16);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .20),
    0 8px 26px -14px rgba(0, 0, 0, .9);
}
.btn--ghost:hover {
  background-color: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 10px 30px -14px rgba(0, 0, 0, .9);
  transform: translateY(-1px);
}

.btn--quiet {
  background: transparent;
  color: var(--text-2);
  padding-inline: 14px;
}
.btn--quiet:hover { color: var(--text); }

.btn--lg { min-height: 52px; padding: 14px 30px; font-size: 1rem; }
.btn--block { width: 100%; }

/* --- Light travelling around the border ----------------------------------
   A conic gradient rotated by an animated custom property, masked down to the
   1px border ring so only the edge lights up. --btn-angle has to be registered
   with @property to be interpolable; where that (or mask-composite) is missing,
   the whole effect is simply skipped and the static glass border remains.
   The primary CTA flows continuously; quieter buttons flow on hover/focus, so
   a page full of buttons does not shimmer all at once.
   -------------------------------------------------------------------------- */
@property --btn-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  .btn--primary::after,
  .btn--ghost::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--btn-angle),
      transparent 0deg,
      transparent 55deg,
      rgba(255, 255, 255, .95) 84deg,
      rgba(196, 178, 255, .85) 100deg,
      transparent 130deg,
      transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s var(--ease);
  }

  .btn--primary::after {
    opacity: .9;
    animation: btn-border-flow 4.5s linear infinite;
  }
  .btn--primary:hover::after { opacity: 1; animation-duration: 2.2s; }

  /* Quieter buttons light up only when pointed at or focused. */
  .btn--ghost:hover::after,
  .btn--ghost:focus-visible::after {
    opacity: .85;
    animation: btn-border-flow 2.6s linear infinite;
  }
}

@keyframes btn-border-flow {
  to { --btn-angle: 360deg; }
}

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

/* Text link with a travelling arrow. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  font-weight: 500;
  font-size: .95rem;
}
.link-arrow svg { transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

.link-underline {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--accent-line);
}
.link-underline:hover { text-decoration-color: var(--accent); }

/* --------------------------------------------------------------------------
   6. Cards
   -------------------------------------------------------------------------- */
/* Spotlight strength, driven by hover. Registered so it can be transitioned;
   without @property it snaps instead of fading, which is an acceptable
   degradation. */
@property --card-spot {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

.card {
  position: relative;
  padding: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-1);
  transition: border-color .25s var(--ease), background-color .25s var(--ease),
              transform .25s var(--ease);
}

/* Top-edge highlight, brightest in the middle — the reference uses this to
   suggest a light source above the card. */
.card::before {
  content: '';
  position: absolute;
  inset-inline: 18%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent);
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}

/* Hover: the card lifts, the rim warms, a violet glow pools underneath, and a
   soft spotlight follows the cursor across the surface. The spotlight is a
   background layer rather than an overlay, so it never sits on top of the text.
   --mx / --my are set by initCardSpotlight() in site.js. */
.card--hover {
  --card-spot: 0;
  background-image: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 0%),
    rgba(167, 139, 250, calc(.22 * var(--card-spot))) 0%,
    transparent 72%);
  transition: border-color .3s var(--ease), background-color .3s var(--ease),
              transform .38s var(--ease), box-shadow .38s var(--ease),
              --card-spot .35s var(--ease);
}
.card--hover:hover {
  --card-spot: 1;
  border-color: rgba(185, 163, 255, .45);
  background-color: var(--surface-2);
  transform: translateY(-6px);
  box-shadow: 0 20px 52px -22px rgba(113, 61, 255, .65),
              0 0 0 1px rgba(185, 163, 255, .1);
}
.card--hover:hover::before { opacity: 1; transform: scaleX(1); }

/* The "Learn more" arrow travels further on card hover than on its own. */
.card--hover:hover .link-arrow svg { transform: translateX(6px); }

.card__title { margin-bottom: 10px; }
.card__body { color: var(--text-muted); font-size: .96rem; line-height: 1.66; }

/* Icon chip inside a card. */
.card__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  margin-bottom: 18px;
  background: var(--accent-soft);
  border: 1px solid var(--border-accent);
  color: var(--accent);
}
.card__icon svg { width: 20px; height: 20px; }

/* Small pill tag, used for the delivery-model distinction (spec 1.7). */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-size: .715rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--surface-2);
}
.tag--delivered { color: var(--accent); border-color: var(--border-accent); background: var(--accent-soft); }
.tag--partner { color: #c4b5fd; border-color: rgba(167, 139, 250, .3); background: rgba(167, 139, 250, .1); }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
/* Not sticky: the bar scrolls away with the page. */
.site-header {
  position: relative;
  z-index: 100;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 78px;
}

/* The logo and the right-hand slot each take an equal flexible share, which
   keeps the nav optically centred in the bar whatever the logo's width. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  flex: 1 1 0;
}
.logo__mark { width: 30px; height: 34px; color: var(--text); }
.logo__word {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -.035em;
}

.site-nav { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  font-size: .925rem;
  font-weight: 500;
  color: var(--text-2);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.site-nav__link:hover,
.site-nav__link[aria-current='page'] { color: var(--text); background: var(--surface-2); }
.site-nav__link svg { width: 13px; height: 13px; opacity: .65; transition: transform .22s var(--ease); }

.site-header__actions {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* --- Solutions dropdown --- */
.has-dropdown { position: relative; }
.has-dropdown:hover .site-nav__link svg,
.has-dropdown.is-open .site-nav__link svg { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, -8px);
  width: min(680px, calc(100vw - 40px));
  padding: 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: rgba(20, 11, 37, .96);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 28px 70px -22px rgba(0, 0, 0, .92);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* visibility flips instantly on open (so the panel is focusable straight
     away) and is held back until the fade finishes on close. */
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
}
.has-dropdown:hover .dropdown,
.has-dropdown.is-open .dropdown,
.dropdown:focus-within {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s;
}

.dropdown__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dropdown__group-title {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 12px;
  margin-bottom: 8px;
}
.dropdown__item {
  display: block;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  transition: background-color .18s var(--ease);
}
.dropdown__item:hover { background: var(--surface-2); }
.dropdown__item-name {
  display: block;
  font-weight: 600;
  font-size: .94rem;
  color: var(--text);
  margin-bottom: 2px;
}
.dropdown__item-desc { display: block; font-size: .83rem; color: var(--text-muted); line-height: 1.45; }
.dropdown__foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  padding-inline: 12px;
}

/* --- Mobile nav --- */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  background-image: var(--glow-inset);
  cursor: pointer;
}
.nav-toggle svg { width: 18px; height: 18px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded='true'] .icon-close { display: block; }
.nav-toggle[aria-expanded='true'] .icon-open { display: none; }

.mobile-nav {
  display: none;
  position: fixed;
  inset: 78px 0 0;
  z-index: 99;
  background: var(--bg);
  overflow-y: auto;
  padding: 20px var(--gutter) 40px;
}
.mobile-nav.is-open { display: block; }

.mobile-nav__link {
  display: block;
  padding: 15px 4px;
  font-size: 1.06rem;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.mobile-acc__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 4px;
  font-size: 1.06rem;
  font-weight: 500;
  color: var(--text);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
}
.mobile-acc__trigger svg { width: 14px; height: 14px; transition: transform .24s var(--ease); }
.mobile-acc__trigger[aria-expanded='true'] svg { transform: rotate(180deg); }
.mobile-acc__panel { display: none; padding: 6px 0 12px 4px; }
.mobile-acc__panel.is-open { display: block; }
.mobile-acc__panel a {
  display: block;
  padding: 11px 12px;
  font-size: .95rem;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
}
.mobile-acc__panel a:hover { color: var(--text); background: var(--surface-2); }
.mobile-nav__actions { margin-top: 26px; display: grid; gap: 12px; }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* Generous bottom padding on the home hero: the horizon and its glow live in
     that space, below the CTAs. */
  padding-block: clamp(64px, 8vw, 104px) clamp(200px, 26vw, 340px);
  text-align: center;
  overflow: hidden;
}
.hero__inner { position: relative; z-index: 1; }
.hero h1 { margin-bottom: 24px; }
.hero .lede { margin-inline: auto; }
.hero .btn-row { margin-top: 36px; }

/* --- The glowing horizon --------------------------------------------------
   A very large dark disc whose top arc crosses the lower hero, with light
   blooming off its rim. Built from four stacked layers, back to front:
     1. .hero__stars   faint starfield
     2. .hero__aurora  broad violet bloom sitting behind the rim
     3. .hero__arcs    thin concentric rings, all sharing the disc's centre
     4. .hero__dome    the disc itself, with a bright lit rim
   All of it is decorative and sits behind .hero__inner.
   -------------------------------------------------------------------------- */
/* The hero clips its sky, which would otherwise leave a hard horizontal seam
   where the disc and its glow meet the next section. Rather than covering that
   up with a fixed-height gradient, the whole sky is masked out before it
   reaches the hero's bottom edge — so there is nothing left to cut, at any
   apex. The fade starts just past the rim, which is why it is expressed
   against the same --horizon-apex the disc is positioned with. */
.hero__sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  mask-image: linear-gradient(180deg,
    #000 0%,
    #000 calc(var(--horizon-apex, 72%) + 5%),
    transparent 100%);
  -webkit-mask-image: linear-gradient(180deg,
    #000 0%,
    #000 calc(var(--horizon-apex, 72%) + 5%),
    transparent 100%);
}

/* Three star layers, each tiled at its own size so the repeat never reads as a
   grid, and each twinkling on its own cycle so the field never pulses in
   unison. Layer 3 carries the brighter dots, which have a soft halo. */
.hero__stars {
  position: absolute;
  inset: 0;
  /* Thin the field out towards the horizon so the glow stays the focus. */
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .75) 62%, transparent 88%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .75) 62%, transparent 88%);
}

/* Layer 1 — fine dust, static. Small tiles, so the field is dense. */
.hero__stars {
  background-image:
    radial-gradient(1.6px 1.6px at 18% 24%, rgba(255, 255, 255, .95), transparent 100%),
    radial-gradient(1.4px 1.4px at 63% 11%, rgba(232, 224, 255, .9), transparent 100%),
    radial-gradient(1.5px 1.5px at 41% 62%, rgba(255, 255, 255, .85), transparent 100%),
    radial-gradient(1.3px 1.3px at 8%  71%, rgba(214, 200, 255, .8), transparent 100%),
    radial-gradient(1.5px 1.5px at 92% 44%, rgba(255, 255, 255, .8), transparent 100%),
    radial-gradient(1.3px 1.3px at 75% 86%, rgba(226, 216, 255, .75), transparent 100%);
  background-size: 197px 173px, 263px 229px, 151px 139px, 311px 271px, 229px 197px, 179px 157px;
}

.hero__stars::before,
.hero__stars::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* Layer 2 — mid-size stars, each with a faint halo. */
.hero__stars::before {
  background-image:
    radial-gradient(2.4px 2.4px at 72% 18%, #fff 0%, rgba(226, 216, 255, .32) 40%, transparent 100%),
    radial-gradient(2.2px 2.2px at 26% 47%, #fff 0%, rgba(214, 200, 255, .3) 40%, transparent 100%),
    radial-gradient(2.3px 2.3px at 54% 78%, #fff 0%, rgba(232, 224, 255, .3) 40%, transparent 100%),
    radial-gradient(2.1px 2.1px at 12% 12%, #fff 0%, rgba(206, 188, 255, .28) 40%, transparent 100%),
    radial-gradient(2.2px 2.2px at 88% 64%, #fff 0%, rgba(226, 216, 255, .3) 40%, transparent 100%);
  background-size: 331px 283px, 251px 223px, 383px 317px, 293px 251px, 421px 359px;
  animation: star-twinkle-a 5.5s ease-in-out infinite;
}

/* Layer 3 — the bright ones: larger, with a wide soft glow around each. */
.hero__stars::after {
  background-image:
    radial-gradient(3.4px 3.4px at 38% 30%, #fff 0%, rgba(226, 216, 255, .5) 26%, rgba(167, 139, 250, .18) 55%, transparent 100%),
    radial-gradient(3.1px 3.1px at 82% 58%, #fff 0%, rgba(214, 200, 255, .48) 26%, rgba(167, 139, 250, .16) 55%, transparent 100%),
    radial-gradient(3.6px 3.6px at 15% 66%, #fff 0%, rgba(232, 224, 255, .5) 26%, rgba(167, 139, 250, .18) 55%, transparent 100%),
    radial-gradient(3px 3px     at 66% 8%,  #fff 0%, rgba(214, 200, 255, .46) 26%, rgba(167, 139, 250, .15) 55%, transparent 100%),
    radial-gradient(3.3px 3.3px at 47% 88%, #fff 0%, rgba(226, 216, 255, .48) 26%, rgba(167, 139, 250, .16) 55%, transparent 100%);
  background-size: 457px 389px, 521px 443px, 613px 509px, 397px 347px, 683px 571px;
  animation: star-twinkle-b 8.5s ease-in-out infinite;
}

@keyframes star-twinkle-a {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
@keyframes star-twinkle-b {
  0%, 100% { opacity: 1; }
  40%      { opacity: .6; }
  70%      { opacity: .95; }
}

/* Everything below is concentric with this box, whose TOP edge is the apex of
   the horizon. Anchoring by `top` rather than `bottom` keeps the apex at a
   predictable point in the hero no matter how large the disc gets. */
.hero__horizon {
  position: absolute;
  left: 50%;
  top: var(--horizon-apex, 72%);
  width: min(1240px, 140vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
}

/* Concentric rings, all larger than the disc, so their arcs sit above its rim.
   Masked from the apex outwards so they fade away at the sides and read as a
   horizon rather than as drawn circles. The disc itself is left unmasked — its
   lit rim is the whole point. */
.hero__arcs {
  position: absolute;
  inset: 0;
  mask-image: radial-gradient(46% 30% at 50% 0%, #000 10%, transparent 76%);
  -webkit-mask-image: radial-gradient(46% 30% at 50% 0%, #000 10%, transparent 76%);
}
.hero__arcs span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(185, 163, 255, .26);
  border-radius: 50%;
  aspect-ratio: 1;
}
.hero__arcs span:nth-child(1) { width: 104%; }
.hero__arcs span:nth-child(2) { width: 110%; border-color: rgba(185, 163, 255, .19); }
.hero__arcs span:nth-child(3) { width: 117%; border-color: rgba(185, 163, 255, .13); }
.hero__arcs span:nth-child(4) { width: 125%; border-color: rgba(185, 163, 255, .09); }
.hero__arcs span:nth-child(5) { width: 134%; border-color: rgba(185, 163, 255, .05); }

/* The disc itself. Its fill is darker than the page, which is what makes the
   lit rim read as an edge with light behind it. */
.hero__dome {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* Deliberately darker than the page: the disc is the unlit side of the
     horizon, and that contrast is what sells the rim as a lit edge. */
  background: #06000f;
  box-shadow:
    /* the lit rim */
    0 0 0 1.5px rgba(228, 219, 255, .6),
    /* light spilling upward off it, in three widening falloffs */
    0 -1px 14px rgba(214, 200, 255, .5),
    0 -8px 56px rgba(150, 105, 255, .38),
    0 -22px 140px rgba(113, 61, 255, .26);
}

/* The bloom sitting on the apex — brightest dead centre, falling away to the
   sides so the rim dims as it curves out of frame. It breathes slowly, and a
   second highlight glides back and forth along the rim, so the horizon reads
   as lit rather than painted. Both stop under prefers-reduced-motion. */
.hero__aurora {
  position: absolute;
  left: 50%;
  top: 0;
  width: 82%;
  height: min(400px, 44vw);
  transform: translate(-50%, -76%);
  background:
    radial-gradient(ellipse 34% 62% at 50% 100%, rgba(255, 255, 255, .5) 0%, rgba(203, 183, 255, .3) 34%, transparent 70%),
    radial-gradient(ellipse 88% 52% at 50% 100%, rgba(122, 72, 255, .3) 0%, transparent 74%);
  filter: blur(16px);
  transform-origin: 50% 100%;
  animation: horizon-breathe 9s ease-in-out infinite;
}

/* The travelling highlight. */
.hero__aurora::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 16% 54% at 50% 100%, rgba(255, 255, 255, .5) 0%, rgba(214, 200, 255, .22) 40%, transparent 72%);
  filter: blur(18px);
  animation: horizon-sweep 11s ease-in-out infinite;
}

@keyframes horizon-breathe {
  0%, 100% { opacity: .82; transform: translate(-50%, -76%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -76%) scale(1.07); }
}
@keyframes horizon-sweep {
  0%, 100% { opacity: .3; transform: translateX(-28%); }
  50%      { opacity: .9; transform: translateX(28%); }
}

/* Pill above the H1. */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 10px;
  margin-bottom: 26px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, .16);
  background-color: rgba(255, 255, 255, .055);
  background-image: var(--glow-inset);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20);
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-2);
}
.hero__badge b { color: var(--accent-2); font-weight: 600; }

/* Inner pages get the same horizon as a backdrop rather than the subject:
   turned down, and with the disc body dropped so only the lit arc and its glow
   remain. With no solid body there is nothing for the hero's bottom edge to
   clip, which is what made it look sliced in half. */
.hero--page {
  --horizon-apex: 84%;
  padding-block: clamp(56px, 7vw, 88px) clamp(96px, 11vw, 150px);
  text-align: left;
}
.hero--page .lede { margin-inline: 0; }
.hero--page .hero__sky { opacity: .62; }
.hero--page .hero__dome { background: transparent; }

/* Breadcrumb above a page hero. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .84rem;
  color: var(--text-faint);
  margin-bottom: 22px;
}
.crumbs a:hover { color: var(--text-2); }
.crumbs span[aria-hidden] { opacity: .5; }

/* --------------------------------------------------------------------------
   9. Stats band
   -------------------------------------------------------------------------- */
/* Tiles are rendered only for parameters with a value (spec 1.8, 3.5). The
   band centres itself, so two tiles look as deliberate as four. */
.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.stats__tile {
  flex: 1 1 210px;
  max-width: 300px;
  padding: 30px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-1);
  text-align: center;
}
.stats__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: 12px;
}
/* The label carries the qualification that makes the number accurate, so it
   wraps rather than truncates — the tile grows instead (spec 3.5). */
.stats__label {
  display: block;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   10. Partner / model logo wall
   -------------------------------------------------------------------------- */
/* --- Marquee -------------------------------------------------------------
   Two identical sets sit side by side and the track slides left by exactly one
   set's width before looping, so the seam never shows. The gap between sets is
   the same as the gap between cells, which is why the translation is
   `-50% - half a gap` rather than a flat -50%.
   Full-bleed, with the edges masked so cells fade out rather than being
   chopped off at the viewport.
   -------------------------------------------------------------------------- */
.logo-marquee {
  --marquee-gap: 14px;
  overflow: hidden;
  padding-block: 4px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

.logo-marquee__track {
  display: flex;
  width: max-content;
  gap: var(--marquee-gap);
  animation: logo-marquee 42s linear infinite;
}
/* Pause while someone is looking at a particular logo. */
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }

.logo-marquee__set {
  display: flex;
  gap: var(--marquee-gap);
}
.logo-marquee__set .logo-wall__cell {
  width: clamp(168px, 17vw, 216px);
  flex: 0 0 auto;
}

@keyframes logo-marquee {
  to { transform: translateX(calc(-50% - (var(--marquee-gap) / 2))); }
}

.logo-wall__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 108px;
  padding: 22px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-1);
  text-align: center;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.logo-wall__cell:hover { border-color: var(--border-strong); background: var(--surface-2); }

.logo-wall__mark { width: 28px; height: 28px; color: var(--text-2); flex-shrink: 0; }
.logo-wall__name {
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-muted);
}
/* Cells with no available mark lean on the wordmark instead. */
.logo-wall__cell--word .logo-wall__name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--text-2);
}

.logo-wall__caption {
  margin-top: 26px;
  text-align: center;
  font-size: .86rem;
  color: var(--text-faint);
  max-width: 70ch;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   11. Model wall (AIaaS)
   -------------------------------------------------------------------------- */
.model-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }

.model-card { display: flex; flex-direction: column; gap: 14px; }
.model-card__head { display: flex; align-items: center; gap: 12px; }
.model-card__mark {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  flex-shrink: 0;
}
.model-card__mark svg { width: 21px; height: 21px; }
.model-card__mark--word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.03em;
}
.model-card__name { font-family: var(--font-display); font-size: 1.16rem; font-weight: 700; letter-spacing: -.028em; color: var(--text); }
.model-card__dev { font-size: .8rem; color: var(--text-faint); }

.model-card__meta { display: grid; gap: 9px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }
.model-card__row { display: flex; gap: 10px; font-size: .855rem; line-height: 1.5; }
.model-card__row dt { color: var(--text-faint); flex: 0 0 62px; }
.model-card__row dd { margin: 0; color: var(--text-2); }

/* --------------------------------------------------------------------------
   12. Lists
   -------------------------------------------------------------------------- */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.check-list li {
  position: relative;
  padding-left: 30px;
  color: var(--text-muted);
  line-height: 1.62;
}
.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .52em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--border-accent);
}
.check-list li::after {
  content: '';
  position: absolute;
  left: 5px;
  top: .78em;
  width: 5px;
  height: 8px;
  border-right: 1.6px solid var(--accent);
  border-bottom: 1.6px solid var(--accent);
  transform: rotate(42deg);
}
.check-list strong { color: var(--text-2); font-weight: 600; }

/* Exclusions — what is deliberately not included. */
.cross-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.cross-list li { position: relative; padding-left: 30px; color: var(--text-muted); line-height: 1.62; }
.cross-list li::before {
  content: '';
  position: absolute;
  left: 0; top: .52em;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border);
}
.cross-list li::after {
  content: '\00d7';
  position: absolute;
  left: 4.6px; top: .3em;
  font-size: .82rem;
  color: var(--text-faint);
  line-height: 1.5;
}

/* Numbered process steps. */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 4px; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 22px 0 22px 62px;
  border-bottom: 1px solid var(--border);
}
.steps li:last-child { border-bottom: 0; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 22px;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  color: var(--accent);
  width: 42px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  border: 1px solid var(--border-accent);
}
.steps__title { display: block; font-weight: 600; color: var(--text); margin-bottom: 5px; font-size: 1.02rem; }
.steps__body { color: var(--text-muted); font-size: .95rem; line-height: 1.64; }

/* Definition-style rows, used for company details and coverage. */
.detail-list { display: grid; gap: 0; margin: 0; }
.detail-list > div {
  display: grid;
  grid-template-columns: minmax(150px, 230px) 1fr;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.detail-list > div:last-child { border-bottom: 0; }
.detail-list dt { color: var(--text-faint); font-size: .9rem; }
.detail-list dd { margin: 0; color: var(--text-2); font-size: .95rem; }

/* --------------------------------------------------------------------------
   12b. Tables
   -------------------------------------------------------------------------- */
/* The wrapper scrolls, not the page — tables must never cause horizontal
   scroll on the document at 375px (spec 19). */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  -webkit-overflow-scrolling: touch;
}
.table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: .93rem;
}
.table th, .table td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
  border-bottom: 1px solid var(--border);
}
.table thead th {
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--surface-2);
  white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table td { color: var(--text-muted); }
.table tbody td:first-child { color: var(--text-2); font-weight: 500; }

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 0; border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.4;
  color: var(--text);
  transition: color .2s var(--ease);
}
.faq__q:hover { color: var(--accent); }
.faq__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  position: relative;
  margin-top: 2px;
}
.faq__icon::before, .faq__icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.faq__icon::before { width: 11px; height: 1.5px; }
.faq__icon::after { width: 1.5px; height: 11px; }
.faq__q[aria-expanded='true'] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease);
}
.faq__a[data-open='true'] { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  color: var(--text-muted);
  line-height: 1.7;
  padding-bottom: 24px;
  max-width: 78ch;
}
.faq__a p + p { padding-top: 14px; }

/* --------------------------------------------------------------------------
   14. CTA band
   -------------------------------------------------------------------------- */
.cta-band { padding-block: var(--section-y); }
.cta-band__inner {
  position: relative;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
  border-radius: clamp(var(--radius), 3vw, 28px);
  border: 1px solid var(--border);
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(133, 102, 255, .16) 0%, rgba(133, 102, 255, 0) 62%),
    var(--surface-1);
  text-align: center;
  overflow: hidden;
}
.cta-band__inner::before {
  content: '';
  position: absolute;
  inset-inline: 22%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(133, 102, 255, .55), transparent);
}
.cta-band h2 { margin-bottom: 18px; }
.cta-band p { color: var(--text-muted); max-width: 60ch; margin: 0 auto 32px; line-height: 1.68; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, .012) 0%, rgba(255, 255, 255, 0) 100%);
  padding-top: clamp(52px, 6vw, 76px);
}
.site-footer__cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding-bottom: 48px;
}
.site-footer__brand .logo { margin-bottom: 16px; }
.site-footer__tagline {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.024em;
  color: var(--text-2);
  margin-bottom: 20px;
}
.site-footer__entity { font-size: .855rem; line-height: 1.75; color: var(--text-faint); font-style: normal; }
.site-footer__entity strong { color: var(--text-muted); font-weight: 500; }

.site-footer__title {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 18px;
}
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.site-footer__list a { font-size: .915rem; color: var(--text-muted); }
.site-footer__list a:hover { color: var(--text); }

.site-footer__contact { display: grid; gap: 11px; font-size: .915rem; }
.site-footer__contact a { color: var(--text-muted); }
.site-footer__contact a:hover { color: var(--text); }
.site-footer__contact span { color: var(--text-faint); }

.site-footer__partners { padding-block: 34px; border-top: 1px solid var(--border); }
.site-footer__partner-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 34px;
  margin-bottom: 18px;
}
/* Greyscale partner treatment in the footer, per spec 3.2. */
.site-footer__partner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-faint);
  font-size: .83rem;
  font-weight: 500;
  transition: color .22s var(--ease);
}
.site-footer__partner:hover { color: var(--text-muted); }
.site-footer__partner svg { width: 19px; height: 19px; }
.site-footer__partner-caption { text-align: center; font-size: .82rem; color: var(--text-faint); max-width: 72ch; margin-inline: auto; line-height: 1.6; }

.site-footer__legal {
  border-top: 1px solid var(--border);
  padding-block: 26px 34px;
  display: grid;
  gap: 14px;
  font-size: .82rem;
  color: var(--text-faint);
  line-height: 1.65;
}
.site-footer__legal-top { display: flex; flex-wrap: wrap; gap: 2px 22px; align-items: center; }
/* 44px min tap target on the legal row's controls (spec 19) — the extra height
   is vertical padding, so the row still reads as one line of small print. */
.site-footer__legal-top a,
.site-footer__legal-top .site-footer__linkbtn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* Looks like the links beside it, but is a button because it opens a dialog. */
.site-footer__linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
.site-footer__linkbtn:hover { color: var(--text-muted); }
.site-footer__legal a:hover { color: var(--text-muted); }
.site-footer__trademark { max-width: 90ch; }

/* --------------------------------------------------------------------------
   16. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 20px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.field { display: grid; gap: 7px; }
.field__label { font-size: .89rem; font-weight: 500; color: var(--text-2); }
.field__label .req { color: var(--accent); margin-left: 2px; }
.field__hint { font-size: .8rem; color: var(--text-faint); }

.field input[type='text'],
.field input[type='email'],
.field input[type='tel'],
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text);
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.5;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%239b96b0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px;
  padding-right: 40px;
}
.field select option { background: var(--bg-panel); color: var(--text); }

.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px rgba(133, 102, 255, .16);
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: var(--danger); background: var(--danger-soft); }

/* Errors are text, not colour alone, and are announced to assistive tech. */
.field__error { font-size: .82rem; color: var(--danger); display: none; }
.field.is-invalid .field__error { display: block; }
.field__warning { font-size: .82rem; color: #fbbf24; display: none; }
.field.has-warning .field__warning { display: block; }

.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  cursor: pointer;
  font-size: .89rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.checkbox input[type='checkbox'] {
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  border-radius: 5px;
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.checkbox input[type='checkbox']:checked { background: var(--accent); border-color: var(--accent); }
.checkbox input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  left: 6.5px;
  top: 3px;
  width: 5px;
  height: 9px;
  border-right: 2px solid #12042a;
  border-bottom: 2px solid #12042a;
  transform: rotate(42deg);
}
.checkbox.is-invalid input[type='checkbox'] { border-color: var(--danger); }

/* Honeypot — hidden from people, visible to naive bots (spec 16.3). */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  display: none;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--danger);
  background: var(--danger-soft);
  color: #ffc9c9;
  font-size: .9rem;
}
.form__status.is-visible { display: block; }

/* --------------------------------------------------------------------------
   17. Cookie banner
   -------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 150;
  max-width: 560px;
  margin-inline: auto;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background: rgba(20, 11, 37, .97);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 24px 64px -18px rgba(0, 0, 0, .9);
  transform: translateY(140%);
  transition: transform .4s var(--ease);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner h2 { font-size: 1.06rem; margin-bottom: 10px; }
.cookie-banner p { font-size: .87rem; color: var(--text-muted); line-height: 1.62; margin-bottom: 18px; }
/* "Essential only" must be equally prominent as "Accept" (spec 3.6). */
.cookie-banner .btn { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   18. Legal / long-form prose
   -------------------------------------------------------------------------- */
.prose { max-width: 76ch; }
.prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-top: 52px; margin-bottom: 16px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.14rem; margin-top: 32px; margin-bottom: 12px; }
.prose p { color: var(--text-muted); line-height: 1.75; margin-bottom: 16px; }
.prose ul, .prose ol { color: var(--text-muted); line-height: 1.75; padding-left: 22px; margin-bottom: 16px; }
.prose li { margin-bottom: 9px; }
.prose li::marker { color: var(--text-faint); }
.prose strong { color: var(--text-2); font-weight: 600; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.prose__meta {
  padding: 18px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-1);
  font-size: .875rem;
  color: var(--text-muted);
  margin-bottom: 44px;
  line-height: 1.7;
}

/* Sticky in-page table of contents for the legal pages. */
.legal-layout { display: grid; grid-template-columns: 250px 1fr; gap: 56px; align-items: start; }
.legal-toc { position: sticky; top: 104px; }
.legal-toc__title {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 16px;
}
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.legal-toc a {
  display: block;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-size: .855rem;
  line-height: 1.45;
  color: var(--text-muted);
  border-left: 2px solid transparent;
}
.legal-toc a:hover { color: var(--text); background: var(--surface-2); }
.legal-toc a.is-active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); }

/* --------------------------------------------------------------------------
   19. Utility
   -------------------------------------------------------------------------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mt-56 { margin-top: 56px; }
.mb-24 { margin-bottom: 24px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.split--sticky > :first-child { position: sticky; top: 112px; }

.panel {
  padding: clamp(26px, 3.4vw, 40px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface-1);
}
.panel--accent {
  border-color: var(--border-accent);
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(133, 102, 255, .1) 0%, rgba(133, 102, 255, 0) 60%),
    var(--surface-1);
}

/* Reveal-on-scroll. Opt-in per element; disabled under reduced motion.
   Uses the independent `translate` property rather than `transform`, so it
   composes with hover transforms instead of fighting them — a revealed card
   still lifts on hover, which a `transform: none` here would silently cancel. */
[data-reveal] {
  opacity: 0;
  translate: 0 18px;
  transition: opacity .6s var(--ease), translate .6s var(--ease);
}
[data-reveal].is-visible { opacity: 1; translate: 0 0; }

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 36px; }
  .legal-layout { grid-template-columns: 1fr; gap: 36px; }
  .legal-toc { position: static; }
  .legal-toc ol { display: flex; flex-wrap: wrap; gap: 6px; }
  .legal-toc a { border-left: 0; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 6px 13px; }
}

@media (max-width: 900px) {
  .hero { --horizon-apex: 80%; }
  .hero--page { --horizon-apex: 92%; }
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split--sticky > :first-child { position: static; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }
  /* The hero text stack is proportionally much taller on a phone, so the
     horizon has to sit lower or its rim cuts across the CTAs. */
  .hero { --horizon-apex: 88%; }
  .hero--page { --horizon-apex: 98%; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  /* Narrower cells and a tighter gap so more than one logo is on screen. */
  .logo-marquee { --marquee-gap: 10px; }
  .form__row { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: 1fr; gap: 34px; }
  .detail-list > div { grid-template-columns: 1fr; gap: 4px; }
  .stats__tile { flex-basis: 100%; max-width: none; }
  .btn-row .btn { width: 100%; }
  .cookie-banner { padding: 20px; }
  .steps li { padding-left: 54px; }
}

/* --------------------------------------------------------------------------
   21. Motion & print preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; translate: none; }
}

@media print {
  body::before, .site-header, .cookie-banner, .cta-band, .hero__arcs { display: none !important; }
  body { background: #fff; color: #000; }
  .grad-text, .accent-text { -webkit-text-fill-color: #000; color: #000; }
}