/* =====================================================================
   Elarxsys — "Cinematic Cosmos"
   Derived from the logo: space navy, electric-blue glass, amber sunrise.
   ===================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: "Exo 2";
  src: url("/fonts/exo2-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Design tokens ---------- */
:root {
  color-scheme: dark;

  /* Space */
  --space-0: #01040c;
  --bg: #030a18;
  --bg-2: #05112a;
  --bg-3: #0a1a38;

  /* Glass surfaces */
  --surface: rgba(14, 32, 66, .5);
  --surface-strong: rgba(16, 38, 78, .72);
  --line: rgba(124, 178, 255, .14);
  --line-strong: rgba(124, 178, 255, .3);

  /* Text (silver-white) */
  --text: #eaf1fb;
  --text-muted: #a9b9d4;
  --text-dim: #8b9dbe;

  /* Logo palette */
  --blue: #2e8bff;
  --sky: #5cb8ff;
  --ice: #a5dcff;
  --cyan: #57e8fa;
  --amber: #ffb547;
  --orange: #ff8a1f;
  --on-light: #031024;

  --grad-x: linear-gradient(100deg, #3a97ff 0%, #5cc6ff 36%, #ffb547 64%, #ff8a1f 100%);
  --grad-hl: linear-gradient(95deg, #6cc4ff 0%, #8fd6ff 38%, #ffe2b3 60%, #ffbd5c 80%, #ff9f33 100%);
  --hairline: linear-gradient(90deg, transparent, rgba(92, 184, 255, .55) 30%, rgba(255, 181, 71, .45) 70%, transparent);
  /* horizon rule: the logo's earth rim catching the sunrise (amber peak at ~78%) */
  --horizon-rule: linear-gradient(90deg, transparent 0%, rgba(92, 184, 255, .5) 26%, rgba(165, 220, 255, .6) 56%, rgba(255, 181, 71, .75) 78%, transparent 100%);

  /* Neural-network constellation from the logo's top ribbon (static SVG, CSP-safe data URI) */
  --constellation-mini: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 360' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M148 195L225 215M148 195L160 90M148 195L89 84M225 215L239 282M225 215L313 262M225 215L304 141M373 32L424 82M373 32L373 112M373 32L304 141M160 90L89 84M160 90L185 21M160 90L304 141M587 170L495 172M587 170L450 211M587 170L520 43M495 172L450 211M495 172L424 82M495 172L520 43M378 305L313 262M378 305L450 211M378 305L507 347M313 262L239 282M313 262L304 141M313 262L450 211M450 211L373 112M450 211L424 82M450 211L507 347M185 21L89 84M185 21L304 141M239 282L304 141M520 43L424 82M520 43L373 112M373 112L424 82M373 112L304 141M304 141L424 82' stroke='%235cb8ff' stroke-opacity='0.3' fill='none'/%3E%3Ccircle cx='148' cy='195' r='2.4' fill='%237cc4ff'/%3E%3Ccircle cx='225' cy='215' r='1.6' fill='%237cc4ff'/%3E%3Ccircle cx='373' cy='32' r='3' fill='%237cc4ff'/%3E%3Ccircle cx='18' cy='295' r='1.6' fill='%23ffb547'/%3E%3Ccircle cx='160' cy='90' r='2' fill='%237cc4ff'/%3E%3Ccircle cx='587' cy='170' r='3' fill='%23ffb547'/%3E%3Ccircle cx='495' cy='172' r='1.6' fill='%237cc4ff'/%3E%3Ccircle cx='378' cy='305' r='1.6' fill='%23ffb547'/%3E%3Ccircle cx='313' cy='262' r='2.4' fill='%237cc4ff'/%3E%3Ccircle cx='450' cy='211' r='2.4' fill='%237cc4ff'/%3E%3Ccircle cx='185' cy='21' r='1.6' fill='%237cc4ff'/%3E%3Ccircle cx='239' cy='282' r='1.6' fill='%237cc4ff'/%3E%3Ccircle cx='520' cy='43' r='1.6' fill='%23ffb547'/%3E%3Ccircle cx='89' cy='84' r='3' fill='%237cc4ff'/%3E%3Ccircle cx='373' cy='112' r='2.4' fill='%237cc4ff'/%3E%3Ccircle cx='304' cy='141' r='1.6' fill='%23ffb547'/%3E%3Ccircle cx='507' cy='347' r='2.4' fill='%237cc4ff'/%3E%3Ccircle cx='424' cy='82' r='2' fill='%237cc4ff'/%3E%3C/svg%3E");

  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius: 16px;
  --radius-sm: 10px;

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 72px;

  --font-display: "Exo 2", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}
/* Smooth scrolling for in-page links only: main.js adds .smooth-scroll after the first
   load, so deep links and links from other pages land without a long fly-down. */
@media (prefers-reduced-motion: no-preference) {
  html.smooth-scroll { scroll-behavior: smooth; }
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* fallback for browsers without overflow: clip */
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--sky); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--ice); }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 600; }
p { margin: 0; }
p, li, summary { text-wrap: pretty; }
h3, h4 { text-wrap: balance; }
h1, h2 { overflow-wrap: break-word; }
strong { color: var(--text); font-weight: 600; }
::selection { background: rgba(46, 139, 255, .45); color: #fff; }

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

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--sky); color: var(--on-light);
  font-weight: 600;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; color: var(--on-light); }

/* ---------- Brand ---------- */
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--text);
}
.brand:hover { color: var(--text); }
.brand-mark {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(124, 178, 255, .28), 0 0 22px -2px rgba(46, 139, 255, .55);
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.4375rem;
  letter-spacing: .015em;
  line-height: 1;
  /* background-clip: text only paints inside the box: extend it over the descender */
  padding-block: .1em .2em;
  margin-block: -.1em -.2em;
  background: linear-gradient(180deg, #ffffff 15%, #c9daf3 60%, #9fbbe3 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.brand-x {
  background: var(--grad-x);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 6px rgba(92, 184, 255, .35));
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(3, 9, 22, .5);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease;
}
.site-header.scrolled {
  background: rgba(3, 9, 22, .82);
  border-bottom-color: var(--line);
}
/* At the top of the page the bar is clear, so its bottom edge doesn't cut across the
   hero glow. JS only: without it .scrolled never applies and the bar stays tinted.
   The bar is tinted again while the mobile menu is open (.menu-open). */
.js .site-header:not(.scrolled):not(.menu-open) {
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.nav {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav a:not(.btn) {
  position: relative;
  color: var(--text-muted);
  font-size: .9375rem; font-weight: 500;
  padding: 6px 0;
}
.site-nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--sky), var(--amber));
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.site-nav a:not(.btn):is(:hover, :focus-visible, [aria-current]) { color: var(--text); }
.site-nav a:not(.btn):is(:hover, :focus-visible, [aria-current])::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.nav-toggle span {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--text);
  transition: transform .25s ease;
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 880px) {
  :root { --header-h: 64px; }
  .brand-name { font-size: 1.3125rem; }
  .brand-mark { width: 36px; height: 36px; border-radius: 10px; }
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    display: none;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
  }
  .js .site-nav.open { display: flex; }
  .js .site-nav > * { flex-shrink: 0; }
  .js .site-nav a:not(.btn) {
    padding: 14px 0; font-size: 1.0625rem;
    border-bottom: 1px solid var(--line);
  }
  .js .site-nav a:not(.btn)::after { display: none; }
  .js .site-nav .btn { margin-top: 20px; height: 50px; font-size: 1rem; }
  /* Without JS: keep the call to action, rely on the footer for navigation */
  html:not(.js) .site-nav a:not(.btn) { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 24px;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-body); font-size: .96875rem; font-weight: 600; letter-spacing: .005em;
  line-height: 1; white-space: nowrap; cursor: pointer;
  transition: transform .2s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease, color .2s ease;
}
.btn-primary {
  color: var(--on-light);
  background: linear-gradient(180deg, #9ad8ff 0%, #5cb8ff 45%, #3d97ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 1px rgba(150, 210, 255, .35), 0 10px 30px -8px rgba(46, 139, 255, .75);
}
.btn-primary:hover {
  color: var(--on-light);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 1px rgba(170, 220, 255, .55), 0 14px 40px -8px rgba(46, 139, 255, .95), 0 0 30px -6px rgba(255, 181, 71, .35);
}
.btn-ghost {
  color: var(--text);
  background: rgba(255, 255, 255, .035);
  border-color: rgba(165, 220, 255, .3);
}
.btn-ghost:hover {
  color: #fff;
  background: rgba(92, 184, 255, .1);
  border-color: rgba(165, 220, 255, .55);
}
.btn-sm { height: 40px; padding: 0 18px; font-size: .875rem; }
.btn-lg { height: 54px; padding: 0 28px; font-size: 1rem; }

.arrow {
  position: relative; display: inline-block;
  width: 14px; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform .2s ease;
}
.arrow::after {
  content: ""; position: absolute; right: -1px; top: 50%;
  width: 7px; height: 7px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.btn:hover .arrow, .card-link:hover .arrow { transform: translateX(3px); }

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
  font-family: var(--font-body);
  font-size: .78125rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--ice);
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; flex: none;
  background: linear-gradient(90deg, transparent, var(--cyan));
}
.eyebrow-pill {
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(124, 178, 255, .24);
  background: rgba(10, 30, 64, .45);
  letter-spacing: .18em;
}
.eyebrow-pill::before { display: none; }
.signal {
  position: relative; width: 8px; height: 8px; flex: none;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px 2px rgba(87, 232, 250, .7);
}
.signal::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid rgba(87, 232, 250, .6);
  animation: ping 2.8s cubic-bezier(.2, .6, .4, 1) 2 forwards;
}

h1 {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: clamp(2.5rem, 1.35rem + 3.9vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -.012em;
  text-wrap: balance;
}
h2 {
  font-family: var(--font-display);
  font-weight: 620;
  font-size: clamp(1.9rem, 1.25rem + 2.1vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.008em;
  text-wrap: balance;
}
h3 { font-family: var(--font-display); font-weight: 620; letter-spacing: .005em; }

.hl {
  background: var(--grad-hl);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(46, 139, 255, .35));
}
.lead {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.21875rem);
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 35rem;
}
.section-lead {
  font-size: clamp(1.03125rem, 1rem + .2vw, 1.15625rem);
  color: var(--text-muted);
  max-width: 44rem;
  margin-top: 18px;
}
.section-lead a { text-decoration: underline; text-decoration-color: rgba(92, 184, 255, .45); text-underline-offset: 3px; }

/* ---------- Tagline (logo signature) ---------- */
.tagline {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 0 clamp(14px, 2.2vw, 30px);
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(.6875rem, .6rem + .35vw, .875rem);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: #c4d3ea;
}
.tagline > span:not(.sep):not(.sr-only) { margin-right: -.42em; } /* trailing tracking */
.sep {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
}
.sep-cyan { background: var(--cyan); box-shadow: 0 0 10px 1px rgba(87, 232, 250, .8); }
.sep-amber { background: var(--amber); box-shadow: 0 0 10px 1px rgba(255, 181, 71, .8); }

/* ---------- Starfield (CSS only) ---------- */
.sky {
  position: absolute; inset: 0; z-index: -2;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 88%);
}
.sky::before, .sky::after {
  content: ""; position: absolute; inset: 0;
}
.sky::before {
  background:
    radial-gradient(1.2px 1.2px at 32.4% 7.8%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.1px 1.1px at 82.1% 4.1%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.1px 1.1px at 21.5% 3.6%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.3px 1.3px at 9.1% 31.5%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.1px 1.1px at 94.7% 53.7%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.4px 1.4px at 57.7% 28.7%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.1px 1.1px at 55.7% 6.6%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.3px 1.3px at 11.8% 20.4%, rgba(255,255,255,.85), transparent),
    radial-gradient(0.9px 0.9px at 10.3% 47.0%, rgba(255,255,255,.85), transparent),
    radial-gradient(0.8px 0.8px at 54.8% 2.4%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.3px 1.3px at 49.6% 42.6%, rgba(220,235,255,.75), transparent),
    radial-gradient(1.0px 1.0px at 58.6% 34.4%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.1px 1.1px at 69.9% 14.9%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.1px 1.1px at 49.5% 23.6%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.1px 1.1px at 98.0% 5.6%, rgba(220,235,255,.75), transparent),
    radial-gradient(0.8px 0.8px at 15.2% 38.1%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.3px 1.3px at 7.8% 45.5%, rgba(220,235,255,.75), transparent),
    radial-gradient(1.1px 1.1px at 34.0% 24.3%, rgba(220,235,255,.75), transparent),
    radial-gradient(1.0px 1.0px at 6.9% 4.1%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.2px 1.2px at 66.4% 2.3%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.1px 1.1px at 57.8% 59.6%, rgba(255,255,255,.6), transparent),
    radial-gradient(0.8px 0.8px at 38.6% 58.1%, rgba(220,235,255,.75), transparent),
    radial-gradient(1.1px 1.1px at 35.5% 51.4%, rgba(255,255,255,.85), transparent),
    radial-gradient(0.9px 0.9px at 76.8% 6.3%, rgba(220,235,255,.75), transparent),
    radial-gradient(0.9px 0.9px at 91.7% 38.9%, rgba(220,235,255,.75), transparent),
    radial-gradient(1.0px 1.0px at 27.8% 30.5%, rgba(220,235,255,.75), transparent),
    radial-gradient(0.9px 0.9px at 95.8% 7.8%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.3px 1.3px at 65.9% 0.6%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.1px 1.1px at 26.3% 0.8%, rgba(220,235,255,.75), transparent),
    radial-gradient(0.9px 0.9px at 61.0% 21.4%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.2px 1.2px at 95.0% 56.5%, rgba(220,235,255,.75), transparent),
    radial-gradient(0.9px 0.9px at 39.2% 28.9%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.4px 1.4px at 40.0% 10.7%, rgba(220,235,255,.75), transparent),
    radial-gradient(0.8px 0.8px at 16.2% 23.3%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.4px 1.4px at 56.7% 43.2%, rgba(255,255,255,.6), transparent),
    radial-gradient(0.9px 0.9px at 48.0% 20.7%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.3px 1.3px at 34.3% 16.6%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.4px 1.4px at 51.6% 11.8%, rgba(220,235,255,.75), transparent),
    radial-gradient(0.8px 0.8px at 14.7% 43.9%, rgba(255,255,255,.6), transparent),
    radial-gradient(0.9px 0.9px at 29.8% 55.1%, rgba(220,235,255,.75), transparent),
    radial-gradient(1.0px 1.0px at 3.5% 14.2%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.1px 1.1px at 88.4% 22.9%, rgba(255,255,255,.7), transparent),
    radial-gradient(0.9px 0.9px at 74.2% 41.7%, rgba(220,235,255,.7), transparent);
  animation: twinkle 7s ease-in-out 3 alternate;
}
.sky::after {
  background:
    radial-gradient(1.9px 1.9px at 61.3% 65.3%, rgba(255,255,255,.95), transparent),
    radial-gradient(1.9px 1.9px at 20.0% 34.6%, rgba(140,205,255,.95), transparent),
    radial-gradient(1.5px 1.5px at 79.0% 32.7%, rgba(255,196,120,.9), transparent),
    radial-gradient(1.7px 1.7px at 8.1% 4.1%, rgba(255,196,120,.9), transparent),
    radial-gradient(2.0px 2.0px at 20.4% 47.6%, rgba(140,205,255,.95), transparent),
    radial-gradient(1.9px 1.9px at 47.9% 50.6%, rgba(140,205,255,.95), transparent),
    radial-gradient(1.6px 1.6px at 83.5% 5.1%, rgba(255,255,255,.95), transparent),
    radial-gradient(1.9px 1.9px at 47.8% 8.8%, rgba(255,196,120,.9), transparent),
    radial-gradient(1.8px 1.8px at 97.3% 1.7%, rgba(170,225,255,.9), transparent),
    radial-gradient(2.0px 2.0px at 80.7% 16.7%, rgba(170,225,255,.9), transparent),
    radial-gradient(1.7px 1.7px at 65.7% 21.8%, rgba(255,255,255,.95), transparent),
    radial-gradient(1.9px 1.9px at 2.1% 66.5%, rgba(140,205,255,.95), transparent),
    radial-gradient(1.5px 1.5px at 92.6% 11.0%, rgba(255,196,120,.9), transparent),
    radial-gradient(1.6px 1.6px at 36.1% 40.5%, rgba(170,225,255,.9), transparent),
    radial-gradient(1.8px 1.8px at 28.4% 12.2%, rgba(255,255,255,.9), transparent);
  animation: twinkle 9s ease-in-out -4s 4 alternate-reverse;
}

/* ---------- Horizon & sunrise flare (echo of the logo) ---------- */
.horizon {
  position: absolute; z-index: -1;
  top: calc(100% - var(--rise, 150px));
  left: 50%;
  width: max(250%, 1500px);
  aspect-ratio: 3 / 1;
  transform: translateX(-50%);
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(60% 14% at 50% 0%, rgba(46, 139, 255, .26), transparent 100%),
    linear-gradient(180deg, #08204a 0%, #051431 3%, #040e24 8%, var(--bg) 14%);
  box-shadow:
    0 -1px 0 0 rgba(200, 236, 255, .9),
    0 -4px 14px 0 rgba(120, 200, 255, .6),
    0 -18px 60px 4px rgba(46, 139, 255, .42),
    0 -60px 160px 20px rgba(46, 139, 255, .2),
    inset 0 1px 0 0 rgba(220, 245, 255, .55),
    inset 0 10px 28px -12px rgba(92, 184, 255, .55);
}
/* city lights on the night side, as in the logo */
.horizon::before {
  content: ""; position: absolute;
  left: 30%; width: 40%; top: .9%; height: 5.5%;
  opacity: .9;
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent);
  mask-image: linear-gradient(180deg, #000 20%, transparent);
  background:
    radial-gradient(1.5px 1.5px at 45.4% 61.1%, rgba(255,196,120,0.66), transparent),
    radial-gradient(0.9px 0.9px at 50.8% 63.2%, rgba(255,196,120,0.68), transparent),
    radial-gradient(0.9px 0.9px at 62.5% 79.1%, rgba(255,196,120,0.59), transparent),
    radial-gradient(1.4px 1.4px at 10.7% 80.3%, rgba(255,196,120,0.47), transparent),
    radial-gradient(1.3px 1.3px at 96.3% 92.3%, rgba(255,196,120,0.73), transparent),
    radial-gradient(1.2px 1.2px at 17.1% 19.2%, rgba(255,196,120,0.48), transparent),
    radial-gradient(0.8px 0.8px at 20.3% 36.6%, rgba(255,196,120,0.66), transparent),
    radial-gradient(1.2px 1.2px at 44.3% 82.9%, rgba(255,196,120,0.74), transparent),
    radial-gradient(1.2px 1.2px at 50.0% 69.0%, rgba(255,196,120,0.58), transparent),
    radial-gradient(1.0px 1.0px at 32.3% 35.7%, rgba(255,196,120,0.48), transparent),
    radial-gradient(1.5px 1.5px at 75.6% 48.8%, rgba(255,196,120,0.62), transparent),
    radial-gradient(0.8px 0.8px at 94.0% 83.2%, rgba(255,196,120,0.54), transparent),
    radial-gradient(1.6px 1.6px at 89.4% 54.2%, rgba(255,196,120,0.63), transparent),
    radial-gradient(1.4px 1.4px at 9.0% 66.5%, rgba(255,196,120,0.57), transparent),
    radial-gradient(1.6px 1.6px at 10.4% 43.6%, rgba(255,196,120,0.79), transparent),
    radial-gradient(1.2px 1.2px at 78.5% 31.7%, rgba(255,196,120,0.65), transparent),
    radial-gradient(0.9px 0.9px at 20.3% 74.4%, rgba(255,196,120,0.74), transparent),
    radial-gradient(1.0px 1.0px at 13.2% 50.4%, rgba(255,196,120,0.57), transparent),
    radial-gradient(1.0px 1.0px at 95.2% 79.9%, rgba(255,196,120,0.85), transparent),
    radial-gradient(1.5px 1.5px at 22.2% 48.4%, rgba(255,196,120,0.74), transparent),
    radial-gradient(1.0px 1.0px at 76.2% 43.3%, rgba(255,196,120,0.48), transparent),
    radial-gradient(1.6px 1.6px at 37.7% 52.9%, rgba(255,196,120,0.67), transparent),
    radial-gradient(0.9px 0.9px at 57.2% 84.7%, rgba(255,196,120,0.52), transparent),
    radial-gradient(1.0px 1.0px at 89.2% 81.0%, rgba(255,196,120,0.54), transparent),
    radial-gradient(1.0px 1.0px at 73.0% 90.4%, rgba(255,196,120,0.88), transparent),
    radial-gradient(1.1px 1.1px at 86.7% 64.5%, rgba(255,196,120,0.50), transparent),
    radial-gradient(1.3px 1.3px at 26.7% 81.4%, rgba(255,196,120,0.58), transparent),
    radial-gradient(1.3px 1.3px at 55.7% 83.6%, rgba(255,196,120,0.58), transparent),
    radial-gradient(10px 3px at 85.1% 41.2%, rgba(255,180,90,.12), transparent),
    radial-gradient(13px 4px at 45.4% 33.3%, rgba(255,180,90,.12), transparent),
    radial-gradient(16px 6px at 56.1% 37.2%, rgba(255,180,90,.12), transparent),
    radial-gradient(21px 7px at 90.4% 66.1%, rgba(255,180,90,.12), transparent),
    radial-gradient(10px 4px at 19.8% 31.9%, rgba(255,180,90,.12), transparent),
    radial-gradient(15px 6px at 48.5% 70.2%, rgba(255,180,90,.12), transparent),
    radial-gradient(22px 8px at 14.3% 60.0%, rgba(255,180,90,.12), transparent),
    radial-gradient(23px 9px at 69.9% 68.7%, rgba(255,180,90,.12), transparent);
}
.flare {
  position: absolute; z-index: -1;
  left: 84%;
  /* sits on the horizon rim; --flare-dy follows the arc's curvature at this x */
  top: calc(100% - var(--rise, 150px) + var(--flare-dy, .9vw));
  width: 560px; height: 560px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(255, 250, 236, .95) 0%,
    rgba(255, 214, 140, .8) 4%,
    rgba(255, 170, 70, .42) 14%,
    rgba(255, 138, 31, .16) 34%,
    rgba(255, 138, 31, .05) 58%,
    transparent 78%);
}
.flare::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 760px; height: 4px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 244, 220, .95), rgba(255, 190, 100, .5) 28%, rgba(255, 150, 50, .12) 60%, transparent);
}
.flare::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 2px; height: 120px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 240, 210, .7), transparent);
}

/* ---------- Hero ---------- */
.hero {
  --rise: 150px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
  min-height: 680px;
  min-height: min(100svh, 920px);
  display: flex; flex-direction: column;
  background:
    radial-gradient(42% 52% at 74% 44%, rgba(46, 139, 255, .2), transparent 70%),
    radial-gradient(38% 40% at 8% 0%, rgba(26, 82, 170, .22), transparent 70%),
    linear-gradient(180deg, #000510 0%, #021126 48%, #051632 78%, #061a3a 100%);
}
.hero::after, .page-hero::after, .notfound::after {
  /* melt the planet into the page below */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  height: 72px;
  background: linear-gradient(180deg, rgba(3, 10, 24, 0), var(--bg));
  pointer-events: none;
}
.hero-grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 3vw, 40px);
  padding-top: clamp(24px, 4vh, 56px);
  padding-bottom: 180px;
}
.hero-copy h1 { margin-top: 8px; }
.hero-copy .lead { margin-top: 26px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero-points {
  list-style: none; padding: 22px 0 0; margin: 40px 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  max-width: 560px;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, rgba(124, 178, 255, .35), rgba(124, 178, 255, .05)) 1;
  color: var(--text-muted); font-size: .875rem; line-height: 1.45;
}
.hero-points li { position: relative; padding-left: 16px; }
.hero-points li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 8px 1px rgba(92, 184, 255, .8);
}
.hero-points li:last-child::before { background: var(--amber); box-shadow: 0 0 8px 1px rgba(255, 181, 71, .8); }

.hero-visual {
  position: relative;
  display: grid; place-items: center;
}
.emblem {
  position: relative;
  width: min(100%, 640px);
  aspect-ratio: 1;
  margin-inline: auto;
}
@media (min-width: 960px) {
  /* Centred on the copy and capped by the viewport height: the whole emblem is on the
     first screen, and its faded base ends above the horizon rim (the lighten blend
     would otherwise let the rim and the flare streak show through the E). */
  .hero-visual { align-self: center; margin-right: calc(-1 * clamp(0px, 4vw, 72px)); }
  .hero .emblem { width: min(100%, 640px, calc(100vh - 210px)); width: min(100%, 640px, calc(100svh - 210px)); }
}
/* Laptop-height screens: tighten the hero's vertical rhythm so the horizon comes into view */
@media (min-width: 960px) and (max-height: 860px) {
  .hero { --rise: 128px; }
  .hero-grid { padding-top: 12px; padding-bottom: 150px; }
  .hero-copy .lead { margin-top: 20px; }
  .hero-copy .cta-row { margin-top: 28px; }
  .hero-points { margin-top: 28px; padding-top: 18px; }
}
/* Short laptop screens (e.g. 1366x768): scale the headline with the viewport height and
   pull the horizon and tagline up so the whole hero fits on the first screen */
@media (min-width: 960px) and (max-height: 800px) {
  .hero { --rise: 104px; }
  .hero-grid { padding-top: 0; padding-bottom: 116px; }
  .hero-copy h1 { font-size: min(4.5rem, 8.2vh); }
  .hero-copy .lead { margin-top: 16px; }
  .hero-copy .cta-row { margin-top: 22px; }
  .hero-points { margin-top: 22px; padding-top: 14px; }
  .hero .tagline { bottom: 36px; }
}
/* 960-1100px: give the longest point a little more room so the three read evenly */
@media (min-width: 960px) and (max-width: 1100px) {
  .hero-points { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
}
.emblem::before {
  /* luminous halo, over a soft navy backlight that matches the artwork's own sky,
     so the square crop never reads as a lighter rectangle */
  content: ""; position: absolute; inset: -16%; z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 46% 48%, rgba(70, 160, 255, .42), rgba(46, 139, 255, .2) 38%, rgba(46, 139, 255, .07) 62%, transparent 80%),
    radial-gradient(closest-side at 64% 62%, rgba(255, 170, 70, .16), transparent 70%),
    radial-gradient(closest-side at 50% 48%, rgba(14, 30, 56, .95) 60%, rgba(10, 24, 48, .55) 78%, transparent 100%);
  animation: breathe 8s ease-in-out 3;
}
.emblem::after {
  /* thin orbit ring */
  content: ""; position: absolute; inset: -4%; z-index: -1;
  border-radius: 50%;
  border: 1px solid rgba(124, 190, 255, .12);
  -webkit-mask-image: linear-gradient(200deg, #000 10%, transparent 55%);
  mask-image: linear-gradient(200deg, #000 10%, transparent 55%);
}
.emblem img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* float the image itself: a transform on .emblem would isolate the blend
     from the sky behind it */
  animation: float 10s ease-in-out 3;
  /* lighten (max per channel) drops the crop's dark sky into the backlight
     without washing out the logo's saturated blues and ambers */
  mix-blend-mode: lighten;
  /* Soft fades on all four sides keep the face profile (top right) crisp; two
     soft elliptical erasers dissolve the ends of the crop's horizon band, so it
     tapers out instead of stopping at a vertical column. A round fade just outside
     the E takes the corners to zero well inside the box, and the bottom fade ends
     above the artwork's reflective floor line, so the square crop never shows as a
     lighter box with a straight edge on dark backdrops.
     Layers composite bottom-up: (eraser R + eraser L), subtracted from the
     horizontal fade, intersected with the vertical fade and the round fade. */
  -webkit-mask-image:
    radial-gradient(64% 64% at 50% 49.5%, #000 82%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 6%, #000 84%, rgba(0, 0, 0, .45) 91%, transparent 96%),
    linear-gradient(90deg, transparent 0%, #000 13%, #000 88%, transparent 100%),
    radial-gradient(9% 15% at 0% 66%, #000 25%, transparent 100%),
    radial-gradient(12% 17% at 100% 65%, #000 30%, transparent 100%);
  -webkit-mask-composite: source-in, source-in, source-out, source-over, source-over;
  mask-image:
    radial-gradient(64% 64% at 50% 49.5%, #000 82%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 6%, #000 84%, rgba(0, 0, 0, .45) 91%, transparent 96%),
    linear-gradient(90deg, transparent 0%, #000 13%, #000 88%, transparent 100%),
    radial-gradient(9% 15% at 0% 66%, #000 25%, transparent 100%),
    radial-gradient(12% 17% at 100% 65%, #000 30%, transparent 100%);
  mask-composite: intersect, intersect, subtract, add, add;
}

@media (min-width: 960px) {
  .hero .flare { left: 89%; --flare-dy: 2.1vw; }
}
@media (min-width: 601px) and (max-width: 959px) {
  .hero .flare { left: 89%; --flare-dy: 2vw; }
}
/* In the hero the emblem already carries its own sunrise: keep the CSS flare as a
   soft glow and horizontal streak only, no vertical spike under the emblem. */
.hero .flare { width: 480px; height: 480px; }
.hero .flare::after { display: none; }
.hero .tagline {
  position: absolute; left: 0; right: 0; bottom: clamp(42px, 5.5vw, 64px);
  padding-inline: var(--gutter);
}

/* ---------- Sections ---------- */
.section {
  position: relative;
  padding-block: clamp(52px, 5.8vw, 84px);
}
.section-tight { padding-block: clamp(48px, 5.4vw, 78px); }
.section-head { max-width: 780px; margin-bottom: clamp(36px, 4.5vw, 56px); }
/* Split head on wide screens: heading left, lead bottom-aligned right */
@media (min-width: 960px) {
  .section-head-split {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    column-gap: clamp(48px, 6vw, 96px);
    align-items: end;
  }
  .section-head-split .eyebrow { grid-column: 1 / -1; justify-self: start; }
  .section-head-split .section-lead { margin-top: 0; padding-bottom: 6px; max-width: 36rem; }
}

.section-alt {
  background:
    radial-gradient(45% 28% at 85% 34%, rgba(46, 139, 255, .08), transparent 100%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 18%, var(--bg-2) 82%, var(--bg) 100%);
}
.section-alt::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: min(1100px, 88%); height: 1px;
  transform: translateX(-50%);
  background: var(--horizon-rule);
  opacity: .8;
}
.section-alt { overflow-x: hidden; overflow-x: clip; } /* the glow below may reach past narrow viewports */
.section-alt::after {
  /* sunrise glow where the rule turns amber */
  content: ""; position: absolute; top: -28px;
  left: calc(50% + min(1100px, 88%) * .28);
  width: min(260px, 50%); height: 56px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 170, 60, .2), transparent);
  pointer-events: none;
}
.section-glow::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 22%;
  width: min(1100px, 100%); height: 60%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(46, 139, 255, .1), transparent);
  pointer-events: none;
}
.section-glow { isolation: isolate; }

/* ---------- Icon tiles ---------- */
.icon-tile {
  display: inline-grid; place-items: center; flex: none;
  width: 52px; height: 52px;
  border-radius: 14px;
  background:
    linear-gradient(160deg, rgba(92, 184, 255, .22), rgba(46, 139, 255, .06)) padding-box,
    linear-gradient(160deg, rgba(165, 220, 255, .55), rgba(46, 139, 255, .1) 60%, rgba(255, 181, 71, .35)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 8px 26px -10px rgba(46, 139, 255, .7);
}
.icon-tile svg {
  width: 24px; height: 24px;
  fill: none; stroke: var(--ice); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon-tile-sm { width: 40px; height: 40px; border-radius: 11px; }
.icon-tile-sm svg { width: 20px; height: 20px; }

/* ---------- Proof / demo ---------- */
.proof {
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(32px, 4vw, 56px);
}
.proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.proof-points {
  list-style: none; padding: 0; margin: 34px 0 0;
  display: grid; gap: 18px;
}
.proof-points li {
  display: flex; gap: 16px; align-items: flex-start;
  color: var(--text-muted);
}
.proof-points li > span:last-child { padding-top: 8px; }

.demo { margin: 0; position: relative; }
.demo::before {
  content: ""; position: absolute; inset: 8% 0 -4% 6%; z-index: -1;
  background: radial-gradient(closest-side, rgba(46, 139, 255, .3), transparent);
  filter: blur(10px);
}
.demo-card {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(13, 31, 66, .94), rgba(6, 16, 36, .96)) padding-box,
    linear-gradient(150deg, rgba(165, 220, 255, .5), rgba(46, 139, 255, .12) 40%, rgba(46, 139, 255, .08) 70%, rgba(255, 181, 71, .45)) border-box;
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9), 0 30px 80px -40px rgba(46, 139, 255, .55);
  overflow: hidden;
}
.demo-head {
  display: flex; align-items: center; gap: 8px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
}
.demo-head .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(165, 200, 255, .2); }
.demo-title {
  margin-left: 10px;
  font-family: var(--font-display); font-size: .8125rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted);
}
.pill {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: .75rem; font-weight: 600; letter-spacing: .04em;
  color: #9ff1fc;
  background: rgba(87, 232, 250, .08);
  border: 1px solid rgba(87, 232, 250, .3);
}
.pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan);
}
.demo-body { padding: 22px; display: grid; gap: 16px; }
.msg { font-size: .9375rem; line-height: 1.6; }
.msg-user {
  justify-self: end; max-width: 86%;
  padding: 12px 16px;
  border-radius: 16px 16px 4px 16px;
  background: linear-gradient(180deg, rgba(46, 139, 255, .32), rgba(46, 139, 255, .2));
  border: 1px solid rgba(92, 184, 255, .32);
  color: #eef5ff;
}
.msg-ai {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px;
  border-radius: 16px 16px 16px 4px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line);
  color: var(--text);
}
.msg-avatar {
  width: 28px; height: 28px; flex: none; border-radius: 8px;
  box-shadow: 0 0 14px -2px rgba(46, 139, 255, .7);
}
.cite {
  display: inline-grid; place-items: center;
  min-width: 17px; height: 17px; padding: 0 4px;
  margin-left: 2px;
  border-radius: 5px;
  font-family: var(--font-body); font-size: .65625rem; font-weight: 700; line-height: 1;
  color: #241300;
  background: linear-gradient(180deg, #ffd08a, var(--amber));
  vertical-align: .55em;
}
.nobr { white-space: nowrap; }
.sources { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.source {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 6px;
  border-radius: 8px;
  font-size: .78125rem; color: var(--text-muted);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
}
.source .cite { margin: 0; vertical-align: 0; }
.demo-meta {
  display: flex; align-items: center; gap: 12px;
  font-size: .78125rem; color: var(--text-dim);
}
.meta-bar {
  position: relative; flex: 1; max-width: 120px; height: 4px; border-radius: 4px;
  background: rgba(255, 255, 255, .07); overflow: hidden;
}
.meta-bar span {
  position: absolute; inset: 0 22% 0 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}
.demo figcaption {
  position: absolute; z-index: 2;
  top: 0; right: 22px;
  transform: translateY(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 181, 71, .45);
  background: #0d1b36;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .8);
  font-size: .6875rem; font-weight: 600; line-height: 1.4;
  letter-spacing: .12em; text-transform: uppercase;
  color: #ffc56b;
  white-space: nowrap;
}

/* ---------- Services ---------- */
.services-grid {
  display: grid;
  grid-template-columns: 1.18fr 1fr 1fr;
  gap: 22px;
  align-items: stretch;
}
.card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(26px, 2.6vw, 34px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(15, 34, 70, .6), rgba(7, 18, 40, .55));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 30px 60px -36px rgba(0, 0, 0, .9);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 70px -30px rgba(46, 139, 255, .35);
}
.card-featured {
  border-color: transparent;
  background:
    radial-gradient(70% 50% at 100% 0%, rgba(255, 170, 70, .12), transparent 70%) padding-box,
    radial-gradient(80% 60% at 0% 0%, rgba(46, 139, 255, .22), transparent 70%) padding-box,
    linear-gradient(180deg, #0c2046, #071531) padding-box,
    linear-gradient(150deg, rgba(150, 215, 255, .85), rgba(46, 139, 255, .35) 38%, rgba(46, 139, 255, .15) 62%, rgba(255, 181, 71, .75)) border-box;
  box-shadow: 0 40px 90px -40px rgba(46, 139, 255, .6);
}
.card-featured:hover { border-color: transparent; }
.card-featured { isolation: isolate; }
.card-featured::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: var(--constellation-mini) right -90px top -70px / 480px auto no-repeat;
  opacity: .62;
  -webkit-mask-image: radial-gradient(110% 75% at 100% 0%, #000 25%, transparent 72%);
  mask-image: radial-gradient(110% 75% at 100% 0%, #000 25%, transparent 72%);
  pointer-events: none;
}
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 26px; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .71875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #ffc978;
  background: rgba(255, 181, 71, .1);
  border: 1px solid rgba(255, 181, 71, .42);
}
.badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 8px var(--amber);
}
.card h3 { font-size: clamp(1.375rem, 1.3rem + .4vw, 1.625rem); }
.card-featured h3 { font-size: clamp(1.5rem, 1.4rem + .6vw, 1.875rem); }
.card > p { margin-top: 12px; color: var(--text-muted); }
.checklist {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: grid; gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.checklist li {
  position: relative; padding-left: 28px;
  font-size: .9375rem; color: #cfdbee;
}
.checklist li::before {
  content: ""; position: absolute; left: 3px; top: .5em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan);
  transform: rotate(-45deg);
  filter: drop-shadow(0 0 4px rgba(87, 232, 250, .6));
}
.card-featured .checklist { margin-bottom: 26px; }
.card-link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: .9375rem;
  color: var(--ice);
}
.card-link:hover { color: #fff; }

/* ---------- RAG pipeline (constellation) ---------- */
.pipeline {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 22px;
}
.pipeline li {
  --node: var(--sky);
  --node-glow: rgba(92, 184, 255, .85);
  position: relative;
  padding: 30px 26px 28px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(14, 32, 66, .55), rgba(6, 16, 36, .4));
}
.pipeline li:nth-child(1) { --node: var(--cyan); --node-glow: rgba(87, 232, 250, .85); }
.pipeline li:nth-child(5) { --node: #ffc978; --node-glow: rgba(255, 181, 71, .85); }
.pipeline li:nth-child(6) { --node: var(--amber); --node-glow: rgba(255, 160, 50, .85); }
/* glowing node on the top edge */
.pipeline li::before {
  content: ""; position: absolute; top: -6px; left: 24px; z-index: 1;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--node);
  box-shadow: 0 0 0 4px rgba(3, 10, 24, 1), 0 0 14px 3px var(--node-glow);
}
/* link to the next node */
.pipeline li::after {
  content: ""; position: absolute; top: -1px; left: 40px;
  width: calc(100% + 22px - 10px); height: 1px;
  background: linear-gradient(90deg, var(--node-glow), rgba(92, 184, 255, .25));
}
.pipeline li:nth-child(3n)::after { display: none; }
.step-num {
  font-family: var(--font-display);
  font-size: .8125rem; font-weight: 600; letter-spacing: .22em;
  color: var(--sky);
}
.pipeline li:nth-child(n+5) .step-num { color: var(--amber); }
.pipeline h3 { margin-top: 10px; font-size: 1.3125rem; }
.pipeline p { margin-top: 10px; color: var(--text-muted); font-size: .96875rem; }

.usecases { margin-top: clamp(56px, 6.5vw, 88px); }
.subhead {
  display: flex; align-items: center; gap: 18px;
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  margin-bottom: 28px;
}
.subhead::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(92, 184, 255, .4), transparent);
}
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--line);
}
.usecase {
  position: relative;
  padding: 28px 28px 30px;
  background: linear-gradient(180deg, #07142e, #050f24);
  transition: background-color .3s ease;
}
.usecase::before {
  content: ""; display: block;
  width: 26px; height: 2px; margin-bottom: 18px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--sky), var(--amber));
  box-shadow: 0 0 10px rgba(92, 184, 255, .6);
}
.usecase h4 { font-family: var(--font-display); font-size: 1.15625rem; font-weight: 620; }
.usecase p { margin-top: 8px; color: var(--text-muted); font-size: .9375rem; }

/* ---------- Approach ---------- */
.process {
  --dot: 56px;
  list-style: none; padding: 0; margin: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}
.process::before {
  /* sunrise line: blue (intelligence) to amber (impact) */
  content: ""; position: absolute; z-index: 0;
  top: calc(var(--dot) / 2); left: calc(var(--dot) / 2); right: 8%;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue) 35%, #8b8cff 60%, var(--amber) 90%, transparent);
  opacity: .75;
}
.process li { position: relative; z-index: 1; }
.process-num {
  display: grid; place-items: center;
  width: var(--dot); height: var(--dot); border-radius: 50%;
  font-family: var(--font-display); font-size: 1.375rem; font-weight: 600;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 30%, #12305f, #071631) padding-box,
    linear-gradient(160deg, var(--sky), rgba(46, 139, 255, .2)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 0 6px var(--bg), 0 0 26px -4px rgba(46, 139, 255, .7);
}
.process li:nth-child(4) .process-num {
  background:
    radial-gradient(circle at 50% 30%, #3a2a17, #1a1209) padding-box,
    linear-gradient(160deg, #ffd08a, rgba(255, 138, 31, .3)) border-box;
  box-shadow: 0 0 0 6px var(--bg), 0 0 26px -4px rgba(255, 160, 50, .7);
}
.process h3 { margin-top: 24px; font-size: 1.3125rem; }
.process p { margin-top: 10px; color: var(--text-muted); font-size: .96875rem; max-width: 30ch; }

.principles {
  margin-top: clamp(48px, 6vw, 72px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.principle {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(15, 34, 70, .5), rgba(6, 16, 36, .35));
}
.principle h3 { font-size: 1.21875rem; margin-top: 2px; }
.principle p { margin-top: 8px; color: var(--text-muted); font-size: .96875rem; }

/* ---------- Technology ---------- */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.stack {
  padding: 26px 24px 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: rgba(10, 24, 52, .45);
}
.stack h3 {
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ice);
}
.tags { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  padding: 7px 13px;
  border-radius: 999px;
  font-size: .875rem; color: #d4e0f2;
  background: rgba(92, 184, 255, .07);
  border: 1px solid rgba(124, 178, 255, .2);
}

/* ---------- FAQ ---------- */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.faq-head { margin-bottom: 0; position: sticky; top: calc(var(--header-h) + 32px); }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative;
  display: block;
  list-style: none;
  padding: 24px 52px 24px 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.09375rem, 1rem + .3vw, 1.25rem);
  font-weight: 600;
  color: var(--text);
  transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: ""; position: absolute; right: 12px; top: 50%;
  width: 14px; height: 2px; border-radius: 2px;
  background: var(--sky);
  transition: transform .3s ease, background-color .3s ease;
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details[open] summary::before { background: var(--amber); }
.faq details[open] summary::after { background: var(--amber); }
.faq summary:hover { color: #fff; }
.faq summary:focus-visible { outline-offset: 2px; }
.faq details p {
  padding: 0 52px 26px 0;
  color: var(--text-muted);
  max-width: 62ch;
}

/* ---------- Contact CTA ---------- */
.section-cta { padding-top: 0; padding-bottom: clamp(48px, 6vw, 80px); }
.cta-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line-strong);
  padding: clamp(56px, 7vw, 96px) clamp(20px, 5vw, 64px) clamp(150px, 15vw, 200px);
  text-align: center;
  background:
    radial-gradient(60% 70% at 50% 100%, rgba(46, 139, 255, .25), transparent 70%),
    linear-gradient(180deg, #010714 0%, #041330 70%, #071d42 100%);
}
.cta-panel .sky {
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%);
  mask-image: linear-gradient(180deg, #000, transparent 80%);
}
.cta-panel { --rise: 92px; --flare-dy: .6vw; }
.cta-panel .horizon { width: max(220%, 1300px); }
.cta-panel .flare { left: 72%; width: 460px; height: 460px; }
.cta-panel::after {
  /* neural constellation drifting in from the upper left */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--constellation-mini) left -90px top -70px / 500px auto no-repeat;
  opacity: .36;
  -webkit-mask-image: radial-gradient(55% 75% at 0% 0%, #000 25%, transparent 80%);
  mask-image: radial-gradient(55% 75% at 0% 0%, #000 25%, transparent 80%);
  pointer-events: none;
}
.cta-content { position: relative; max-width: 640px; margin-inline: auto; }
.cta-content .eyebrow { justify-content: center; }
.cta-content .eyebrow::after {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}
.cta-content h2 { font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.6rem); }
.cta-content p:not(.eyebrow) { margin: 20px auto 0; max-width: 34rem; color: var(--text-muted); font-size: clamp(1.03125rem, 1rem + .2vw, 1.15625rem); }
.cta-content .btn { margin-top: 34px; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  margin-top: clamp(24px, 3vw, 48px);
  padding: clamp(56px, 6vw, 80px) 0 28px;
  background: linear-gradient(180deg, var(--bg), var(--space-0));
}
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: min(1200px, 92%); height: 1px;
  transform: translateX(-50%);
  background: var(--hairline);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.footer-brand p { margin-top: 18px; color: var(--text-muted); font-size: .9375rem; max-width: 32ch; }
.footer-brand .tagline-sm {
  justify-content: flex-start;
  margin-top: 22px;
  font-size: .65625rem; letter-spacing: .26em;
  gap: 0 10px;
  color: var(--text-dim);
  max-width: none;
}
.footer-brand .tagline-sm > span:not(.sep):not(.sr-only) { margin-right: -.26em; }
.footer-brand .tagline-sm .sep { width: 5px; height: 5px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col h2 {
  margin-bottom: 6px;
  line-height: 1.15;
  font-family: var(--font-body);
  font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-dim);
}
.footer-col a { color: var(--text-muted); font-size: .9375rem; width: fit-content; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  font-size: .875rem; color: var(--text-dim);
}
.footer-bottom::before {
  content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter);
  height: 1px; background: var(--line);
}
.footer-bottom a { color: var(--text-muted); }
.footer-bottom a:hover { color: var(--text); }

/* ---------- Sub pages (privacy, 404) ---------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(-1 * var(--header-h));
  padding: calc(var(--header-h) + clamp(56px, 8vw, 96px)) 0 clamp(120px, 12vw, 150px);
  background:
    radial-gradient(40% 60% at 80% 30%, rgba(46, 139, 255, .16), transparent 70%),
    linear-gradient(180deg, #000510 0%, #021126 60%, #051632 100%);
}
.page-hero { --rise: 70px; --flare-dy: .7vw; }
.page-hero .horizon { width: max(240%, 1400px); }
.page-hero .flare { left: 80%; width: 420px; height: 420px; }
.page-hero h1 { font-size: clamp(2.4rem, 1.5rem + 3vw, 3.8rem); }
.page-hero .meta { margin-top: 16px; color: var(--text-muted); }

.prose-wrap { padding: clamp(40px, 5vw, 64px) 0 clamp(64px, 8vw, 104px); }
.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 760px);
  column-gap: clamp(48px, 7vw, 112px);
  align-items: start;
}
/* "On this page" (sticky, from B) */
.toc {
  position: sticky; top: calc(var(--header-h) + 32px);
  padding: 22px 0 4px;
}
.toc h2 {
  font-family: var(--font-body);
  font-size: .75rem; font-weight: 600; line-height: 1.3;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-dim);
}
.toc ol {
  list-style: none; margin: 16px 0 0; padding: 0;
  border-left: 1px solid var(--line-strong);
}
.toc a {
  display: block;
  margin-left: -1px; padding: 7px 0 7px 18px;
  border-left: 1px solid transparent;
  color: var(--text-muted); font-size: .90625rem; line-height: 1.4;
  transition: color .2s ease, border-color .2s ease;
}
.toc a:hover { color: var(--text); border-left-color: var(--sky); }
.toc a[aria-current] { color: var(--text); border-left-color: var(--amber); }
.prose {
  max-width: 760px;
  color: var(--text-muted);
  font-size: 1.0625rem;
}
.prose h2 {
  margin: 48px 0 14px;
  scroll-margin-top: calc(var(--header-h) + 24px);
  font-size: clamp(1.35rem, 1.1rem + .8vw, 1.65rem);
  color: var(--text);
  display: flex; align-items: center; gap: 14px;
}
.prose h2::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--sky); box-shadow: 0 0 10px 1px rgba(92, 184, 255, .8);
}
.prose h2:first-child { margin-top: 0; }
.prose p + p { margin-top: 14px; }
.prose ul { margin: 14px 0; padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--sky); }
.prose a { text-decoration: underline; text-decoration-color: rgba(92, 184, 255, .5); text-underline-offset: 3px; }

.notfound {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(-1 * var(--header-h));
  padding: calc(var(--header-h) + clamp(64px, 10vw, 120px)) 0 clamp(180px, 20vw, 240px);
  min-height: min(100svh, 860px);
  --rise: 120px;
  text-align: center;
  background:
    radial-gradient(40% 50% at 50% 35%, rgba(46, 139, 255, .2), transparent 70%),
    linear-gradient(180deg, #000510 0%, #021126 60%, #061a3a 100%);
}
.notfound .flare { left: 70%; }
/* Same blended emblem as the hero (halo, soft mask): no tile, no ring */
.notfound .emblem {
  width: clamp(160px, 17vw, 210px);
  margin: 0 auto 10px;
}
/* this sky is already lighter than the artwork's, so the halo needs no navy backlight */
.notfound .emblem::before {
  background:
    radial-gradient(closest-side at 46% 48%, rgba(70, 160, 255, .42), rgba(46, 139, 255, .2) 38%, rgba(46, 139, 255, .07) 62%, transparent 80%),
    radial-gradient(closest-side at 64% 62%, rgba(255, 170, 70, .16), transparent 70%);
}
.notfound .code {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(4rem, 12vw, 7.5rem); line-height: 1;
  background: var(--grad-hl);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.notfound h1 { margin-top: 12px; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); }
.notfound p:not(.code) { margin: 14px auto 0; max-width: 32rem; color: var(--text-muted); }
.notfound .cta-row { justify-content: center; margin-top: 32px; }

.site-footer-slim { margin-top: 0; padding-top: 28px; }
.site-footer-slim .footer-bottom { margin-top: 0; padding-top: 0; align-items: center; }
.site-footer-slim .footer-bottom::before { display: none; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer-slim .brand-name { font-size: 1.125rem; }
.site-footer-slim .brand-mark { width: 30px; height: 30px; border-radius: 9px; }

/* ---------- Reveal on scroll (enhancement only) ---------- */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
}
.reveal-ready [data-reveal].in { opacity: 1; transform: none; }
.reveal-ready :is(.services-grid, .pipeline, .usecase-grid, .process, .principles, .stack-grid) > :nth-child(2) { transition-delay: .07s; }
.reveal-ready :is(.services-grid, .pipeline, .usecase-grid, .process, .principles, .stack-grid) > :nth-child(3) { transition-delay: .14s; }
.reveal-ready :is(.pipeline, .usecase-grid, .process, .principles, .stack-grid) > :nth-child(4) { transition-delay: .21s; }
.reveal-ready :is(.pipeline, .usecase-grid) > :nth-child(5) { transition-delay: .28s; }
.reveal-ready :is(.pipeline, .usecase-grid) > :nth-child(6) { transition-delay: .35s; }

@media print {
  .reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; }
  .site-header { position: static; }
}

/* ---------- Motion ---------- */
/* Every decorative loop runs a few cycles and ends on its resting frame, so an idle
   page stops producing frames (and motion stops on its own). */
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .85; } }
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 80%, 100% { transform: scale(1.9); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal-ready [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-featured { grid-column: 1 / -1; }
  .card-featured .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 959px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    padding-top: 12px;
    padding-bottom: 170px;
    gap: 8px;
  }
  .hero-visual { order: -1; width: 100%; }
  .emblem { width: min(74vw, 400px, 50vh); width: min(74vw, 400px, 50svh); }
  /* stars fade out above the copy, so none sit between words of the lead */
  .hero .sky {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 28%, transparent 42%);
    mask-image: linear-gradient(180deg, #000 0%, #000 28%, transparent 42%);
  }
  .hero-copy { width: 100%; max-width: 640px; }
  .hero-copy .lead { margin-inline: auto; }
  .cta-row { justify-content: center; }
  .hero-points { margin-inline: auto; text-align: left; border-image: linear-gradient(90deg, rgba(124, 178, 255, .05), rgba(124, 178, 255, .35), rgba(124, 178, 255, .05)) 1; }
  .proof-grid { grid-template-columns: minmax(0, 1fr); }
  .demo { max-width: 620px; width: 100%; margin-inline: auto; }
  .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipeline li:nth-child(3n)::after { display: block; }
  .pipeline li:nth-child(2n)::after { display: none; }
  .usecase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .process::before { display: none; }
  .faq-layout { grid-template-columns: minmax(0, 1fr); }
  .faq-head { position: static; }
  .legal-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
}

@media (max-width: 959px) and (max-height: 500px) and (orientation: landscape) {
  .emblem { width: min(74vw, 400px, 40vh); width: min(74vw, 400px, 40svh); }
}

@media (max-width: 720px) {
  .services-grid { grid-template-columns: 1fr; }
  .card-featured .checklist { grid-template-columns: 1fr; }
  .principles { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  body { font-size: .96875rem; }
  .hero-grid { padding-bottom: 150px; }
  .emblem { width: min(72vw, 290px, 50vh); width: min(72vw, 290px, 50svh); }
  .hero-copy h1 { font-size: clamp(2.2rem, 1.2rem + 5vw, 2.7rem); }
  .cta-row { flex-direction: column; align-items: stretch; width: 100%; }
  .cta-row .btn { width: 100%; white-space: normal; height: auto; min-height: 54px; padding-block: 12px; text-align: center; }
  .hero-points {
    grid-template-columns: 1fr; justify-items: center; gap: 8px;
    margin-top: 30px; padding-top: 20px; font-size: .875rem;
  }
  .eyebrow { letter-spacing: .18em; }
  .hero .flare { left: 92%; }
  .demo-head .dot { display: none; }
  .demo-title { margin-left: 0; font-size: .75rem; letter-spacing: .1em; }
  .hero { --rise: 120px; }
  .hero .flare { width: 380px; height: 380px; }
  .hero .tagline { letter-spacing: .3em; gap: 0 12px; bottom: 40px; }
  .hero .tagline > span:not(.sep):not(.sr-only) { margin-right: -.3em; }

  /* Vertical constellation for the pipeline */
  .pipeline { grid-template-columns: 1fr; gap: 18px; padding-left: 26px; }
  .pipeline li::before { top: 30px; left: -26px; }
  .pipeline li::after,
  .pipeline li:nth-child(2n)::after,
  .pipeline li:nth-child(3n)::after {
    display: block;
    top: 36px; left: -21px;
    width: 1px; height: calc(100% + 18px);
    background: linear-gradient(180deg, var(--node-glow), rgba(92, 184, 255, .2));
  }
  .pipeline li:last-child::after { display: none; }
  .pipeline li { padding: 24px 22px; }

  .usecase-grid { grid-template-columns: 1fr; }
  .usecase { padding: 24px 22px; }
  .process { grid-template-columns: 1fr; row-gap: 0; padding-left: 0; }
  .process li { display: grid; grid-template-columns: var(--dot) 1fr; column-gap: 20px; padding-bottom: 32px; }
  .process li::before {
    content: ""; position: absolute; left: calc(var(--dot) / 2 - 1px); top: var(--dot); bottom: 0;
    width: 2px; background: linear-gradient(180deg, rgba(92, 184, 255, .6), rgba(92, 184, 255, .1));
  }
  .process li:last-child::before { display: none; }
  .process li:last-child { padding-bottom: 0; }
  .process-num { grid-row: span 2; }
  .process h3 { margin-top: 12px; }
  .process { --dot: 48px; }
  .principle { flex-direction: column; gap: 16px; padding: 24px; }
  .stack-grid { grid-template-columns: 1fr; }
  .faq summary { padding-right: 40px; }
  .faq details p { padding-right: 0; }
  .cta-panel { border-radius: var(--radius-lg); }
  .cta-panel::after { background-size: 340px auto; background-position: left -70px top -60px; opacity: .3; }
  .cta-content .btn { width: 100%; white-space: normal; height: auto; min-height: 54px; padding-block: 14px; }
  .demo-body { padding: 16px; }
  .msg-ai { padding: 14px; gap: 10px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .footer-col:last-child { grid-column: 1 / -1; }
}

@media (max-width: 380px) {
  .footer-brand .tagline-sm { letter-spacing: .22em; }
  .footer-brand .tagline-sm > span:not(.sep):not(.sr-only) { margin-right: -.22em; }
  .eyebrow-pill { gap: 10px; padding-inline: 10px 12px; font-size: .71875rem; letter-spacing: .1em; }
}

/* ---------- Forced colours (Windows High Contrast) ---------- */
/* Icons drawn with backgrounds would be painted over by the forced Canvas colour */
@media (forced-colors: active) {
  .nav-toggle span { forced-color-adjust: none; background: ButtonText; }
  .faq summary::before, .faq summary::after,
  .faq details[open] summary::before, .faq details[open] summary::after { forced-color-adjust: none; background: CanvasText; }
  .arrow { forced-color-adjust: none; background: LinkText; }
  .arrow::after { border-color: LinkText; }
}