/* =====================================================================
   KYTHERTEK — built on Prism Design System v3.0 (Liquid Glass edition)
   Material Design 3 foundation, Prism brand skin, Apple-style liquid
   glass surfaces: clear fills, refractive specular rims, capsule chrome.
   Colors and typefaces are derived from the KytherTek logo.
   ===================================================================== */

/* ---- Fonts --------------------------------------------------------- */
@font-face {
  font-family: "Garage Gothic";
  src: url("assets/fonts/GarageGothic-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Garage Gothic";
  src: url("assets/fonts/GarageGothic-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Garage Gothic";
  src: url("assets/fonts/GarageGothic-Black.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/HankenGrotesk.ttf") format("truetype");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/HankenGrotesk-Italic.ttf") format("truetype");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
/* Material Icons (filled) — self-hosted, ligature-based */
@font-face {
  font-family: "Material Icons";
  src: url("assets/fonts/material-icons.ttf") format("truetype");
  font-weight: normal; font-style: normal; font-display: block;
}

/* ---- Brand spectrum (theme-independent, from the logo) -------------- */
:root {
  --plum: #4b1d59;
  --deep: #087d69;
  --teal: #12b7a0;
  --aqua: #76c9c0;
  --ink: #15181e;
  --mist: #f4f8f7;

  --spectrum: linear-gradient(90deg, var(--plum), var(--deep), var(--teal), var(--aqua));

  --font-display: "Garage Gothic", "Arial Narrow", sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "Garage Gothic", "Arial Narrow", sans-serif;
  --font-code: ui-monospace, "Cascadia Code", "Consolas", monospace;

  /* M3 shape scale */
  --shape-xs: 4px;
  --shape-sm: 8px;
  --shape-md: 12px;
  --shape-lg: 16px;
  --shape-xl: 28px;
  --shape-full: 999px;

  --wrap: min(1180px, 100% - 40px);

  /* Liquid glass */
  --glass-blur: 20px;
  --glass-blur-sm: 10px;

  /* M3 motion */
  --ease: cubic-bezier(0.2, 0, 0, 1); /* emphasized */
  --ease-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --dur-short: 0.2s;
  --dur-med: 0.35s;

  /* M3 state-layer opacities */
  --state-hover: 0.08;
  --state-press: 0.12;
}

/* ---- Scheme: light -------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  --primary: #087d69; /* Deep Circuit — action */
  --on-primary: #ffffff;
  --primary-glow: rgb(8 125 105 / 0.32);
  --primary-container: rgb(18 183 160 / 0.2);
  --on-primary-container: #06423a;

  --secondary: #4b1d59; /* Authority Plum — identity */
  --on-secondary: #f3edf5;
  --secondary-container: rgb(75 29 89 / 0.13);
  --on-secondary-container: #36123f;

  --tertiary: #206b60; /* Aqua Glass family — highlights */
  --on-tertiary: #ffffff;
  --tertiary-container: rgb(118 201 192 / 0.3);
  --on-tertiary-container: #06312c;

  --surface-dim: #e4eae8;
  --surface: #f4f8f7; /* Sensor Mist */
  --surface-container-lowest: #ffffff;
  --surface-container-low: rgb(255 255 255 / 0.3);
  --surface-container: rgb(255 255 255 / 0.42);
  --surface-container-high: rgb(255 255 255 / 0.55);
  --surface-container-highest: rgb(255 255 255 / 0.68);

  --on-surface: #15181e;
  --on-surface-variant: #4d5862;
  --on-surface-faint: #7c868f;

  --outline: #75817c;
  --outline-variant: rgb(21 24 30 / 0.1);

  --inverse-surface: #15181e;
  --inverse-on-surface: #eef3f2;
  --inverse-primary: #2ad3bb;

  --warning: #9a5a10;
  --warning-container: rgb(154 90 16 / 0.13);
  --on-warning-container: #5c3403;

  /* Liquid glass: clear fill + refractive specular rim */
  --glass-bg: rgb(255 255 255 / 0.26);
  --glass-bg-strong: rgb(255 255 255 / 0.5);
  --glass-border: rgb(255 255 255 / 0.38);
  --glass-border-hover: rgb(255 255 255 / 0.65);
  --glass-shadow:
    inset 2.5px 2.5px 1.5px -2px rgb(255 255 255 / 0.95),
    inset -2.5px -2.5px 1.5px -2px rgb(255 255 255 / 0.8),
    inset 1px 1px 1px -0.5px rgb(255 255 255 / 0.7),
    inset -1px -1px 1px -0.5px rgb(255 255 255 / 0.55),
    inset 0 0 12px 5px rgb(255 255 255 / 0.12),
    0 14px 34px rgb(12 50 44 / 0.13),
    0 3px 9px rgb(12 50 44 / 0.07);
  --glass-shadow-hover:
    inset 2.5px 2.5px 1.5px -2px rgb(255 255 255 / 1),
    inset -2.5px -2.5px 1.5px -2px rgb(255 255 255 / 0.9),
    inset 1px 1px 1px -0.5px rgb(255 255 255 / 0.8),
    inset -1px -1px 1px -0.5px rgb(255 255 255 / 0.65),
    inset 0 0 14px 6px rgb(255 255 255 / 0.16),
    0 22px 48px rgb(12 50 44 / 0.18),
    0 4px 12px rgb(12 50 44 / 0.1);
  --glass-shadow-sm:
    inset 1.5px 1.5px 1px -1px rgb(255 255 255 / 0.9),
    inset -1.5px -1.5px 1px -1px rgb(255 255 255 / 0.6),
    inset 0 0 6px 3px rgb(255 255 255 / 0.1),
    0 3px 10px rgb(12 50 44 / 0.1);

  /* Ambient aurora in the logo colors — the wallpaper the glass bends */
  --aurora:
    radial-gradient(42% 50% at 10% 6%, rgb(18 183 160 / 0.26), transparent 70%),
    radial-gradient(46% 55% at 92% 10%, rgb(75 29 89 / 0.15), transparent 70%),
    radial-gradient(50% 60% at 82% 90%, rgb(118 201 192 / 0.32), transparent 70%),
    radial-gradient(38% 48% at 12% 92%, rgb(8 125 105 / 0.19), transparent 70%);

  --grid: rgb(8 125 105 / 0.035);
  --header-bg: rgb(255 255 255 / 0.4);
  --scrim: rgb(21 24 30 / 0.4);

  --elev-1: 0 1px 2px rgb(21 24 30 / 0.1), 0 1px 3px 1px rgb(21 24 30 / 0.06);
  --elev-2: 0 1px 2px rgb(21 24 30 / 0.1), 0 2px 6px 2px rgb(21 24 30 / 0.08);
  --elev-3: 0 4px 8px 3px rgb(21 24 30 / 0.1), 0 1px 3px rgb(21 24 30 / 0.12);
}

/* ---- Scheme: dark ---------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --primary: #2ad3bb;
  --on-primary: #063129;
  --primary-glow: rgb(42 211 187 / 0.32);
  --primary-container: rgb(42 211 187 / 0.16);
  --on-primary-container: #b2f2e4;

  --secondary: #eef3f5; /* off-white headings on dark (no pink) */
  --on-secondary: #15181e;
  --secondary-container: rgb(139 92 178 / 0.2);
  --on-secondary-container: #e6d3f2;

  --tertiary: #76c9c0;
  --on-tertiary: #06312c;
  --tertiary-container: rgb(118 201 192 / 0.14);
  --on-tertiary-container: #c4e9e3;

  --surface-dim: #0a0d10;
  --surface: #0d1014;
  --surface-container-lowest: #080b0e;
  --surface-container-low: rgb(255 255 255 / 0.05);
  --surface-container: rgb(255 255 255 / 0.07);
  --surface-container-high: rgb(255 255 255 / 0.09);
  --surface-container-highest: rgb(255 255 255 / 0.12);

  --on-surface: #e9eff0;
  --on-surface-variant: #9aa6ad;
  --on-surface-faint: #6b757d;

  --outline: #79858c;
  --outline-variant: rgb(255 255 255 / 0.1);

  --inverse-surface: #e9eff0;
  --inverse-on-surface: #15181e;
  --inverse-primary: #087d69;

  --warning: #e0a557;
  --warning-container: rgb(224 165 87 / 0.14);
  --on-warning-container: #f4d5a8;

  /* Liquid glass — smoked clear panes, cooler rim light */
  --glass-bg: rgb(255 255 255 / 0.055);
  --glass-bg-strong: rgb(255 255 255 / 0.12);
  --glass-border: rgb(255 255 255 / 0.1);
  --glass-border-hover: rgb(255 255 255 / 0.22);
  --glass-shadow:
    inset 2.5px 2.5px 1.5px -2px rgb(255 255 255 / 0.45),
    inset -2.5px -2.5px 1.5px -2px rgb(255 255 255 / 0.26),
    inset 1px 1px 1px -0.5px rgb(255 255 255 / 0.4),
    inset -1px -1px 1px -0.5px rgb(255 255 255 / 0.22),
    inset 0 0 14px 5px rgb(255 255 255 / 0.04),
    0 16px 40px rgb(0 0 0 / 0.5),
    0 3px 10px rgb(0 0 0 / 0.35);
  --glass-shadow-hover:
    inset 2.5px 2.5px 1.5px -2px rgb(255 255 255 / 0.6),
    inset -2.5px -2.5px 1.5px -2px rgb(255 255 255 / 0.38),
    inset 1px 1px 1px -0.5px rgb(255 255 255 / 0.5),
    inset -1px -1px 1px -0.5px rgb(255 255 255 / 0.3),
    inset 0 0 16px 6px rgb(255 255 255 / 0.06),
    0 24px 56px rgb(0 0 0 / 0.6),
    0 4px 14px rgb(0 0 0 / 0.45);
  --glass-shadow-sm:
    inset 1.5px 1.5px 1px -1px rgb(255 255 255 / 0.4),
    inset -1.5px -1.5px 1px -1px rgb(255 255 255 / 0.18),
    inset 0 0 6px 3px rgb(255 255 255 / 0.035),
    0 4px 12px rgb(0 0 0 / 0.4);

  --aurora:
    radial-gradient(42% 50% at 10% 6%, rgb(18 183 160 / 0.18), transparent 70%),
    radial-gradient(46% 55% at 92% 10%, rgb(130 65 160 / 0.2), transparent 70%),
    radial-gradient(50% 60% at 82% 90%, rgb(8 125 105 / 0.22), transparent 70%),
    radial-gradient(38% 48% at 12% 92%, rgb(75 29 89 / 0.26), transparent 70%);

  --grid: rgb(118 201 192 / 0.04);
  --header-bg: rgb(20 25 31 / 0.45);
  --scrim: rgb(0 0 0 / 0.55);

  --elev-1: 0 1px 2px rgb(0 0 0 / 0.5), 0 1px 3px 1px rgb(0 0 0 / 0.3);
  --elev-2: 0 1px 2px rgb(0 0 0 / 0.5), 0 2px 6px 2px rgb(0 0 0 / 0.35);
  --elev-3: 0 4px 8px 3px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.5);
}

/* Fallback when backdrop-filter is unavailable: solidify the glass. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root,
  [data-theme="light"] {
    --glass-bg: rgb(255 255 255 / 0.86);
    --glass-bg-strong: rgb(255 255 255 / 0.94);
    --header-bg: rgb(255 255 255 / 0.94);
  }
  [data-theme="dark"] {
    --glass-bg: rgb(23 28 34 / 0.92);
    --glass-bg-strong: rgb(30 36 44 / 0.95);
    --header-bg: rgb(20 25 31 / 0.95);
  }
}

/* ---- Reset ----------------------------------------------------------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* reserve the scrollbar gutter from first paint — otherwise the scrollbar
     arrives mid-load and shifts all centered content horizontally */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background:
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(180deg, var(--grid) 1px, transparent 1px),
    var(--surface);
  background-size: 56px 56px;
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

/* Fixed aurora wallpaper — the color the glass refracts */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--aurora);
  pointer-events: none;
}

button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; }

::selection { background: var(--teal); color: #06241f; }

[id] { scroll-margin-top: 96px; }

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 100;
  padding: 10px 20px; background: var(--secondary); color: var(--on-secondary);
  border-radius: var(--shape-full); transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; }

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

/* Material icon glyph */
.mi {
  font-family: "Material Icons"; font-weight: normal; font-style: normal;
  font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; direction: ltr; flex: 0 0 auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: "liga"; -webkit-font-feature-settings: "liga";
}
.service-card__icon .mi { font-size: 24px; } /* even size → clean 12px margins, no subpixel drift */
.why-card__mark .mi { font-size: 26px; }
.contact__list .ic .mi {
  font-size: 21px; color: var(--primary);
  letter-spacing: normal; text-transform: none;
}
.ind-cloud li .mi { font-size: 19px; color: var(--primary); }
.nav-toggle .mi { font-size: 22px; }

/* ---- Liquid glass pane ------------------------------------------------
   The shared clear pane: barely-there fill, heavy blur with boosted
   saturation, and a specular rim built from offset inset highlights so
   the edge reads as refracted light rather than a border. */
.hero__visual,
.stats,
.stack-card,
.service-card,
.process-step,
.why-card,
.accordion__item,
.cta,
.form-card {
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
  box-shadow: var(--glass-shadow);
  transition: box-shadow var(--dur-short) var(--ease), border-color var(--dur-short) var(--ease),
    transform var(--dur-short) var(--ease);
}

/* Glass lifts toward the light on hover — gel, not paper */
.service-card:hover,
.process-step:hover,
.why-card:hover {
  transform: translateY(-3px);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow-hover);
}

/* ---- Ripple (M3) ----------------------------------------------------- */
.ripple {
  position: absolute; z-index: 0; border-radius: 50%;
  background: currentColor; opacity: 0.14;
  transform: scale(0); pointer-events: none;
  animation: rippleGrow 0.55s var(--ease-decel) forwards;
}
@keyframes rippleGrow { to { transform: scale(1); opacity: 0; } }

/* ---- Spectrum signature ---------------------------------------------- */
.spectrum-rule {
  display: block;
  width: var(--wrap);
  height: 3px;
  margin: 0 auto;
  background: var(--spectrum);
  opacity: 0.85;
  border-radius: var(--shape-full);
}

/* ---- Top app bar — floating glass capsule ----------------------------- */
.site-header {
  position: sticky; top: 10px; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  width: min(1240px, 100% - 24px);
  min-height: 60px;
  margin: 10px auto 0;
  padding: 8px 12px 8px clamp(16px, 3vw, 24px);
}
/* The glass "bar" lives on a pseudo-element so it can materialize on scroll
   while the logo / nav / buttons stay put. At the very top it's absent; a
   thin line appears at its center first (scaleY near-zero), then that line
   grows into the full pill (scaleY -> 1) as it widens slightly (scaleX). A
   single symmetric ease-in-out curve gives a slow start AND slow finish, so
   the whole thing feels deliberate rather than snapping in. Reversing when
   you scroll back to the top uses this exact same transition, so it shrinks
   back down to a line and fades the same way, mirrored.
   NOTE: no clip-path here — clip-path silently disables backdrop-filter blur
   in Chromium, which is what flattened the translucency early on. At rest
   (scrolled) transform is none, so the frosted blur renders fully. */
/* Choreography: two SVG strokes sprout at the TOP-CENTRE, extend outward
   along the top edge, wrap the rounded caps, and close at the BOTTOM-CENTRE
   — the outline literally draws the stadium shape. Once it completes, the
   frosted glass materialises inside it. Scrolling back to the top plays the
   exact reverse: the glass fades out first, then the lines retract to the
   centre. (The strokes use pathLength="1" so dasharray/dashoffset are
   normalised; app.js builds the two half-pill path `d`s from the header's
   real size and keeps them in sync on resize.) */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: var(--shape-full);
  /* same frosted recipe as the project-type dropdown (.select-glass__list) */
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
  box-shadow: var(--glass-shadow);
  opacity: 0;
  /* closing: the glass fades out immediately (lines retract just after) */
  transition: opacity 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}
.site-header.is-scrolled::before {
  opacity: 1;
  /* opening: the glass waits for the outline to (mostly) complete */
  transition: opacity 0.45s cubic-bezier(0.76, 0, 0.24, 1) 0.28s;
}

.site-header__outline {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none; overflow: visible;
}
.site-header__outline path {
  fill: none;
  stroke: var(--glass-border-hover);
  stroke-width: 1.5;
  /* butt (not round) caps: the four paths share the top/bottom-centre start
     points and the two side end points — round caps would double there into
     bright dots. butt caps meet flush, so the outline reads as one seamless
     line. Round joins keep the straight-edge-to-cap corners smooth. */
  stroke-linecap: butt;
  stroke-linejoin: round;
  stroke-dasharray: 1;              /* pathLength="1" → 1 = the whole path */
  stroke-dashoffset: 1;             /* fully undrawn */
  /* closing: lines start retracting once the glass has begun fading */
  transition: stroke-dashoffset 0.5s cubic-bezier(0.76, 0, 0.24, 1) 0.12s;
}
.site-header.is-scrolled .site-header__outline path {
  stroke-dashoffset: 0;             /* fully drawn */
  /* opening: the lines lead */
  transition: stroke-dashoffset 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
@media (prefers-reduced-motion: reduce) {
  .site-header::before,
  .site-header.is-scrolled::before { transition: opacity 0.2s linear 0s; }
  .site-header__outline path,
  .site-header.is-scrolled .site-header__outline path { transition: none; }
}

.brand-lockup { display: inline-flex; align-items: center; gap: 10px; }
.site-header .brand-full { height: 40px; width: auto; }
/* theme-swapped lockup: colored mark always, wordmark ink per theme.
   Only these rules touch display — sizing rules must not, or specificity
   ties would show both variants at once. */
.brand-full { display: block; }
.brand-full--dark { display: none; }
[data-theme="dark"] .brand-full--light { display: none; }
[data-theme="dark"] .brand-full--dark { display: block; }
.brand-mark { height: 38px; width: auto; flex: 0 0 auto; }
.brand-text strong {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.35rem; line-height: 1; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--secondary);
}
.brand-text span {
  display: block; margin-top: 3px; color: var(--on-surface-faint);
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
}

.nav-links {
  display: flex; align-items: center; gap: clamp(2px, 0.8vw, 8px);
  font-size: 0.875rem; font-weight: 500;
}
.nav-links a {
  position: relative; isolation: isolate;
  padding: 8px 13px; border-radius: var(--shape-full);
  color: var(--on-surface-variant); white-space: nowrap;
  transition: color var(--dur-short) var(--ease);
}
.nav-links a::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: currentColor; opacity: 0;
  transition: opacity var(--dur-short) var(--ease);
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--on-surface); }
.nav-links a:hover::before, .nav-links a:focus-visible::before { opacity: var(--state-hover); }

.nav-actions { display: flex; align-items: center; gap: 8px; }

/* theme switch — spectrum track under a white lens thumb */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--glass-border); border-radius: var(--shape-full);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.6);
  box-shadow: var(--glass-shadow-sm);
  cursor: pointer;
  font-size: 0.78rem; font-weight: 500; color: var(--on-surface-variant);
  transition: border-color var(--dur-short) var(--ease);
}
.theme-toggle:hover { border-color: var(--glass-border-hover); }
.theme-toggle__track {
  position: relative; width: 34px; height: 20px;
  border-radius: var(--shape-full); background: var(--spectrum);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.25);
}
.theme-toggle__track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: var(--shape-full);
  background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
  transition: transform 0.25s var(--ease);
}
[data-theme="dark"] .theme-toggle__track::after { transform: translateX(14px); }

.nav-toggle {
  display: none; width: 44px; height: 44px; flex: 0 0 auto;
  border: 1px solid var(--glass-border); background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.6);
  box-shadow: var(--glass-shadow-sm);
  border-radius: var(--shape-full); cursor: pointer; color: var(--on-surface);
}

/* ---- Buttons (M3 roles, liquid glass skin) ----------------------------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 26px;
  border: 1px solid transparent; border-radius: var(--shape-full);
  cursor: pointer;
  font-family: var(--font-body); font-weight: 600;
  font-size: 0.95rem; letter-spacing: 0.01em; white-space: nowrap;
  transition: box-shadow var(--dur-short) var(--ease), background var(--dur-short) var(--ease),
    border-color var(--dur-short) var(--ease), color var(--dur-short) var(--ease),
    transform var(--dur-short) var(--ease);
}
.btn:active { transform: scale(0.97); }

/* state layer for every button */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: currentColor; opacity: 0;
  transition: opacity var(--dur-short) var(--ease);
}
.btn:hover::before { opacity: var(--state-hover); }
.btn:active::before { opacity: var(--state-press); }
/* lift real content above the state layer, but NOT the ripple span —
   it must stay position:absolute or it drops into flow and balloons the button */
.btn > :not(.ripple) { position: relative; z-index: 1; }

.btn--filled {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0) 55%), var(--primary);
  color: var(--on-primary);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.4), inset 0 -1px 1px rgb(0 0 0 / 0.12),
    0 4px 14px var(--primary-glow);
}
.btn--filled:hover {
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.5), inset 0 -1px 1px rgb(0 0 0 / 0.12),
    0 8px 24px var(--primary-glow);
}

.btn--tonal {
  border-color: var(--glass-border);
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.6);
  box-shadow: var(--glass-shadow-sm);
}

.btn--outlined {
  border-color: var(--glass-border-hover);
  background: var(--glass-bg);
  color: var(--primary);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.6);
  box-shadow: var(--glass-shadow-sm);
}
.btn--outlined:focus-visible { border-color: var(--primary); }

.btn--text { background: transparent; color: var(--primary); padding: 0 16px; }

.btn--sm { min-height: 40px; padding: 0 18px; font-size: 0.88rem; }

/* ---- Layout primitives ------------------------------------------------ */
.section { width: var(--wrap); margin: 0 auto; }
.band { padding: clamp(56px, 8vw, 104px) 0; }
.band--tight { padding: clamp(40px, 5vw, 68px) 0; }

.section-head { max-width: 760px; margin: 0 auto clamp(32px, 5vw, 56px); text-align: center; }

.eyebrow {
  /* inline-flex (not flex): stays an inline-level box so the parent's
     text-align still positions it — center in .section-head, left in the
     split layouts (.about__body, .contact__info) — while flex handles the
     dot / text / dot alignment internally. */
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 18px;
  font-family: var(--font-mono); font-size: 1.092rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--primary);
}
.eyebrow::before, .eyebrow::after {
  content: ""; flex: 0 0 auto;
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: 0.5;
}

.section-head h2,
.svc__aside h2,
.about__body h2,
.contact__info h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.04;
  letter-spacing: -0.01em; color: var(--on-surface);
}
.section-head p:not(.eyebrow),
.svc__aside p:not(.eyebrow) {
  max-width: 60ch; margin: 22px auto 0;
  color: var(--on-surface-variant); font-size: 1.05rem; line-height: 1.6;
}

/* ---- Hero — asymmetric split over the aurora ---------------------------- */
.hero-band { position: relative; }
.hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.85fr);
  gap: clamp(40px, 5vw, 72px); align-items: center;
  min-height: min(74dvh, 660px);
  padding: clamp(44px, 6vw, 80px) 0 clamp(40px, 5vw, 64px);
}
.hero__copy { min-width: 0; }
.hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 4.8vw, 4.6rem); line-height: 0.93;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--secondary);
  max-width: 22ch;
}
.hero h1 em { font-style: normal; color: var(--primary); }
.hero__lead {
  max-width: 48ch; margin: 22px 0 0;
  color: var(--on-surface-variant); font-size: clamp(1.05rem, 1.6vw, 1.28rem); line-height: 1.5;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* hero visual — a pane of glass holding the horizontal lockup */
.hero__visual {
  position: relative; margin: 0; display: grid; place-items: center;
  min-height: 360px; padding: clamp(30px, 4vw, 48px);
  border-radius: var(--shape-xl);
  overflow: hidden;
}
.hero__visual img {
  position: relative; z-index: 2; width: min(92%, 460px); height: auto;
  animation: logoFloat 9s ease-in-out infinite alternate;
}
.hero__visual .logo-light { filter: drop-shadow(0 10px 28px rgb(12 50 44 / 0.18)); }
.hero__visual .logo-dark { display: none; }
[data-theme="dark"] .hero__visual .logo-light { display: none; }
[data-theme="dark"] .hero__visual .logo-dark {
  display: block;
  filter: drop-shadow(0 10px 32px rgb(0 0 0 / 0.45));
}
@keyframes logoFloat { from { transform: translateY(-5px); } to { transform: translateY(5px); } }

/* telemetry chips — small glass capsules */
.hero__chip {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 32px; padding: 0 14px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.6);
  border-radius: var(--shape-full);
  box-shadow: var(--glass-shadow-sm);
  font-family: var(--font-code); font-size: 0.68rem; font-weight: 600;
  color: var(--on-surface-variant);
}
.hero__chip::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal);
  animation: chipPulse 2.6s ease-in-out infinite;
}
.hero__chip--a { top: 20px; left: 20px; animation: floatY 7s ease-in-out infinite alternate; }
.hero__chip--b { bottom: 22px; right: 20px; animation: floatY 8s ease-in-out 1.2s infinite alternate; }
.hero__chip--b::before { background: var(--secondary); animation-delay: 0.6s; }

@keyframes floatY { from { transform: translateY(-4px); } to { transform: translateY(6px); } }
@keyframes chipPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(18 183 160 / 0.35); }
  50%      { box-shadow: 0 0 0 5px rgb(18 183 160 / 0); }
}

/* ---- Stats — one glass strip ------------------------------------------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 4vw, 48px);
  width: var(--wrap); margin: clamp(28px, 4vw, 44px) auto 0;
  padding: 26px clamp(22px, 3vw, 36px);
  border-radius: var(--shape-xl);
}
.stat { display: grid; gap: 4px; justify-items: center; text-align: center; }
.stat strong {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.9rem; line-height: 1; color: var(--on-surface);
}
.stat span { color: var(--on-surface-variant); font-size: 0.88rem; max-width: 24ch; }

/* ---- About ------------------------------------------------------------- */
.about {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
  gap: clamp(36px, 5vw, 72px); align-items: center;
}
.about__body h2 { margin-bottom: 22px; }
/* intro reads as a lead (matches hero/section leads): larger, light, airy */
.about__body .lead-statement {
  color: var(--on-surface); font-size: clamp(1.12rem, 1.6vw, 1.3rem);
  font-weight: 400; line-height: 1.55; letter-spacing: -0.003em;
}
.about__body p:not(.eyebrow) { color: var(--on-surface-variant); font-size: 1.05rem; line-height: 1.65; }
.about__body p + p { margin-top: 16px; }

/* stack card — glass pane with clear layer rows */
.stack-card {
  position: relative;
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--shape-xl);
  overflow: hidden;
}
.stack-card h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  letter-spacing: 0.01em; color: var(--on-surface); margin: 0 0 16px;
}
.stack-layers { display: grid; gap: 8px; margin: 0; padding: 0; }
.stack-layers li {
  display: flex; align-items: center; gap: 13px; padding: 12px 15px;
  border: 1px solid var(--glass-border);
  background: var(--surface-container-high);
  border-radius: var(--shape-md); font-size: 0.93rem; font-weight: 520;
  color: var(--on-surface); list-style: none;
  box-shadow: inset 1px 1px 1px -0.5px rgb(255 255 255 / 0.5);
  transition: transform var(--dur-short) var(--ease), background var(--dur-short) var(--ease);
}
.stack-layers li:hover { transform: translateX(5px); background: var(--primary-container); }
.stack-layers li span {
  flex: 0 0 auto; width: 28px;
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700;
  color: var(--primary);
}

/* ---- Capabilities marquee ------------------------------------------------ */
.marquee {
  overflow: hidden; padding: 16px 0; margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--outline-variant); border-bottom: 1px solid var(--outline-variant);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track {
  display: inline-flex; align-items: center; gap: 42px;
  width: max-content; white-space: nowrap;
  animation: marqueeScroll 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  display: inline-flex; align-items: center; gap: 42px;
  color: var(--on-surface-faint);
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.2rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.marquee__track span::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--aqua); opacity: 0.7;
}
@keyframes marqueeScroll { to { transform: translateX(-50%); } }

/* ---- Services (glass card grid) ------------------------------------------- */
.svc__aside { max-width: 760px; margin: 0 auto clamp(32px, 5vw, 52px); text-align: center; }

.service-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.service-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.4vw, 28px);
  border-radius: var(--shape-xl);
}
.service-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.service-card__icon {
  width: 48px; height: 48px; display: grid; place-items: center;
  color: var(--on-primary-container); background: var(--primary-container);
  border: 1px solid var(--glass-border);
  border-radius: var(--shape-lg);
  box-shadow: inset 1px 1px 1px -0.5px rgb(255 255 255 / 0.5);
  transition: transform var(--dur-short) var(--ease);
}
/* the squircle tile just lifts on hover — it keeps its shape */
.service-card:hover .service-card__icon { transform: translateY(-2px); }
.service-card__num {
  font-family: var(--font-mono); font-weight: 700; font-size: 0.88rem;
  color: var(--primary);
}
.service-card h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.22rem;
  letter-spacing: 0.01em; color: var(--on-surface);
  margin: 0 0 8px; line-height: 1.08;
}
.service-card p { margin: 0; color: var(--on-surface-variant); font-size: 0.93rem; line-height: 1.55; }

/* the panel's own display rule (grid/block) would otherwise beat [hidden] */
[data-view-panel][hidden] { display: none; }

/* Disciplines <-> Tech stack crossfade (driven by app.js): the outgoing panel
   fades + settles down, then the incoming one fades + rises into place — the
   same fade-and-lift language as the site's scroll reveals. */
[data-view-panel] { transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
[data-view-panel].is-view-hidden { opacity: 0; transform: translateY(10px); }

/* ---- Capabilities view toggle (Disciplines <-> Tech stack) ------------------- */
.svc-view {
  display: inline-flex; gap: 4px; margin: clamp(22px, 3vw, 30px) auto 0;
  padding: 4px; border: 1px solid var(--glass-border); border-radius: var(--shape-full);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.6);
  box-shadow: var(--glass-shadow-sm);
}
.svc-view__btn {
  padding: 8px 20px; border: 0; border-radius: var(--shape-full);
  background: transparent; color: var(--on-surface-variant); cursor: pointer;
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 600;
  transition: background var(--dur-short) var(--ease), color var(--dur-short) var(--ease);
}
.svc-view__btn:hover { color: var(--on-surface); }
.svc-view__btn.is-active {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0) 55%), var(--primary);
  color: var(--on-primary);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.3), 0 3px 10px var(--primary-glow);
}

/* ---- Tech-stack logo grid --------------------------------------------------- */
.tech-stack { margin-top: clamp(32px, 4vw, 50px); }
.tech-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin: 0 auto clamp(28px, 4vw, 44px); max-width: 900px;
}
.tech-tab {
  padding: 8px 16px; border: 1px solid transparent; border-radius: var(--shape-full);
  background: transparent; color: var(--on-surface-variant); cursor: pointer;
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 550;
  transition: background var(--dur-short) var(--ease), color var(--dur-short) var(--ease),
    border-color var(--dur-short) var(--ease);
}
.tech-tab:hover { color: var(--on-surface); background: var(--surface-container); }
.tech-tab.is-active {
  color: var(--primary); border-color: var(--glass-border);
  background: var(--primary-container);
}

/* Flex (not grid) so an incomplete last row can center. Each tile's basis is
   the exact 1/6 track width, so a FULL row has no free space (fills edge to
   edge, nothing for justify-content to shift) while a PARTIAL row does — only
   that last row centers. The -0.5px guards against subpixel over-wrap. */
.tech-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin: 0; padding: 0; list-style: none;
}
.tech-item {
  flex: 0 0 calc((100% - 5 * 12px) / 6 - 0.5px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; min-height: 116px; padding: 20px 12px;
  border: 1px solid var(--glass-border); border-radius: var(--shape-lg);
  /* solid glass-tint, NOT backdrop-filter: 45 blurred panes would cripple the
     GPU. The tiles read as glass from the border + inset highlight alone. */
  background: var(--surface-container);
  box-shadow: inset 1px 1px 1px -0.5px rgb(255 255 255 / 0.4);
  transition: transform var(--dur-short) var(--ease), border-color var(--dur-short) var(--ease),
    background var(--dur-short) var(--ease);
}
.tech-item:hover {
  transform: translateY(-3px); border-color: var(--glass-border-hover);
  background: var(--surface-container-high);
}
/* monochrome, theme-adaptive: the SVG is a mask, the fill is a theme color,
   so every logo is one ink that flips white-on-dark / ink-on-light */
.tech-logo {
  width: 40px; height: 40px; flex: 0 0 auto;
  background-color: var(--on-surface);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  opacity: 0.92;
  transition: background-color var(--dur-short) var(--ease), opacity var(--dur-short) var(--ease);
}
.tech-item:hover .tech-logo { background-color: var(--primary); opacity: 1; }
.tech-name {
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 550;
  color: var(--on-surface-variant); text-align: center; line-height: 1.2;
}
.tech-item[hidden] { display: none; }

/* the "Show all / Show less" expander sits centered under the grid */
.tech-more-wrap { display: flex; justify-content: center; margin-top: clamp(24px, 3vw, 34px); }
.tech-more[hidden] { display: none; }

/* ---- Process ----------------------------------------------------------------- */
.process-steps {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 13px;
  margin-top: clamp(32px, 4vw, 48px);
}
.process-step {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.6vw, 28px);
  border-radius: var(--shape-xl);
}
.process-step__num {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 15px;
  border: 1px solid var(--glass-border);
  border-radius: var(--shape-full);
  background: var(--secondary-container); color: var(--on-secondary-container);
  box-shadow: inset 1px 1px 1px -0.5px rgb(255 255 255 / 0.5);
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
}
.process-step:nth-child(odd) .process-step__num {
  background: var(--primary-container); color: var(--on-primary-container);
}
.process-step h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  letter-spacing: 0.01em; color: var(--on-surface); margin: 0 0 8px;
}
.process-step p { margin: auto 0 0; color: var(--on-surface-variant); font-size: 0.91rem; line-height: 1.55; }

/* ---- Industries (glass filter chips) --------------------------------------------- */
.industries { width: var(--wrap); margin: 0 auto; }
.ind-cloud {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 900px;
  margin: clamp(28px, 4vw, 40px) auto 0; padding: 0;
}
.ind-cloud li {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--glass-border); background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.6);
  box-shadow: var(--glass-shadow-sm);
  border-radius: var(--shape-full); list-style: none;
  color: var(--on-surface); font-size: 0.93rem; font-weight: 520;
  transition: transform var(--dur-short) var(--ease), border-color var(--dur-short) var(--ease),
    background var(--dur-short) var(--ease);
}
.ind-cloud li:hover {
  transform: translateY(-3px); border-color: var(--glass-border-hover);
  background: var(--primary-container);
}

/* ---- Why: bento of glass ------------------------------------------------------------ */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: clamp(32px, 4vw, 48px); }
.why-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 210px; padding: clamp(24px, 3vw, 32px);
  border-radius: var(--shape-xl);
}
.why-card--xl { grid-column: span 2; }
.why-card--wide { grid-column: span 2; }

/* accent cell — same glass as its siblings, seen through a plum-tinted lens */
.why-card--accent {
  grid-column: span 2;
  background: linear-gradient(135deg, var(--secondary-container), transparent 65%), var(--glass-bg);
}
.why-card--accent .why-card__mark {
  background: var(--secondary-container); color: var(--on-secondary-container);
}

.why-card__mark {
  width: 50px; height: 50px; flex: 0 0 auto; margin-bottom: auto;
  display: grid; place-items: center;
  color: var(--on-primary-container); background: var(--primary-container);
  border: 1px solid var(--glass-border);
  border-radius: var(--shape-lg);
  box-shadow: inset 1px 1px 1px -0.5px rgb(255 255 255 / 0.5);
}
.why-card h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.4rem;
  letter-spacing: 0.01em; color: var(--on-surface); line-height: 1.08;
}
.why-card--xl h3 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.why-card p { margin: 0; color: var(--on-surface-variant); line-height: 1.58; }
.why-card h3 + p { margin-top: -4px; }

/* ---- Feature (ezGeyser) — the plum glass board -------------------------------------- */
.feature {
  position: relative;
  width: var(--wrap); margin: 0 auto;
  padding: clamp(36px, 5vw, 64px); border-radius: var(--shape-xl);
  border: 1px solid rgb(255 255 255 / 0.2);
  background: linear-gradient(135deg, rgb(75 29 89 / 0.9), rgb(52 18 62 / 0.84));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  color: #f3edf5;
  box-shadow: inset 2.5px 2.5px 1.5px -2px rgb(255 255 255 / 0.5),
    inset -2.5px -2.5px 1.5px -2px rgb(255 255 255 / 0.25),
    inset 0 0 16px 6px rgb(255 255 255 / 0.05),
    0 28px 70px rgb(31 8 40 / 0.4);
  overflow: hidden;
}
.feature__inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.82fr);
  gap: clamp(32px, 5vw, 58px); align-items: center;
}
.feature h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 4rem); line-height: 0.92; color: #ffffff;
}
.feature__tagline { margin: 13px 0 0; color: var(--aqua); font-size: 0.96rem; font-weight: 600; letter-spacing: 0.03em; }
.feature__body { margin: 20px 0 0; max-width: 54ch; color: rgb(243 237 245 / 0.82); font-size: 1.03rem; line-height: 1.62; }
.feature__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.feature__chips li {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 13px;
  border: 1px solid rgb(255 255 255 / 0.18); background: rgb(255 255 255 / 0.07);
  border-radius: var(--shape-full); color: rgb(243 237 245 / 0.92);
  font-size: 0.78rem; font-weight: 520;
  box-shadow: inset 1px 1px 1px -0.5px rgb(255 255 255 / 0.3);
}
.feature .eyebrow { color: #f3edf5; opacity: 0.7; }

/* device mock — a clear lens floating inside the plum board */
.device-mock {
  position: relative;
  display: grid; gap: 14px; padding: 22px;
  border: 1px solid rgb(255 255 255 / 0.18);
  background: rgb(255 255 255 / 0.07);
  border-radius: var(--shape-lg);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  backdrop-filter: blur(var(--glass-blur-sm));
  box-shadow: inset 1.5px 1.5px 1px -1px rgb(255 255 255 / 0.4),
    inset -1.5px -1.5px 1px -1px rgb(255 255 255 / 0.2);
}
.device-mock__top { display: flex; align-items: center; justify-content: space-between; }
.device-mock__top span {
  font-family: var(--font-display); font-weight: 700; font-size: 1.4rem;
  letter-spacing: 0.02em; color: #ffffff;
}
.device-mock__top strong {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 30px; padding: 0 13px;
  background: var(--teal); color: #06241f;
  border-radius: var(--shape-full); font-size: 0.73rem; font-weight: 700;
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.35);
}
.device-mock__top strong::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  animation: chipPulse 2.4s ease-in-out infinite;
}
.device-mock__readout { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.device-mock__readout div {
  padding: 14px; border: 1px solid rgb(255 255 255 / 0.16);
  background: rgb(255 255 255 / 0.06); border-radius: var(--shape-md);
  box-shadow: inset 1px 1px 1px -0.5px rgb(255 255 255 / 0.3);
}
.device-mock__readout span { display: block; font-size: 0.72rem; color: rgb(243 237 245 / 0.6); }
.device-mock__readout strong {
  display: block; margin-top: 6px; color: var(--aqua);
  font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700;
}
.device-mock__bars {
  display: grid; grid-template-columns: repeat(7, 1fr);
  align-items: end; gap: 8px; height: 90px;
}
.device-mock__bars span {
  display: block;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.3), rgb(255 255 255 / 0) 50%), var(--teal);
  border-radius: var(--shape-sm) var(--shape-sm) var(--shape-xs) var(--shape-xs);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.4);
  animation: barBreath 3.6s ease-in-out infinite;
  transform-origin: bottom;
  transition: height 1.1s var(--ease); /* live telemetry re-levels smoothly */
}
.device-mock__bars span:nth-child(1) { height: 42%; }
.device-mock__bars span:nth-child(2) { height: 66%; animation-delay: 150ms; }
.device-mock__bars span:nth-child(3) { height: 86%; animation-delay: 300ms; }
.device-mock__bars span:nth-child(4) { height: 54%; animation-delay: 450ms; }
.device-mock__bars span:nth-child(5) { height: 92%; animation-delay: 600ms; }
.device-mock__bars span:nth-child(6) { height: 48%; animation-delay: 750ms; }
.device-mock__bars span:nth-child(7) { height: 72%; animation-delay: 900ms; }

@keyframes barBreath {
  0%, 100% { transform: scaleY(1); opacity: 0.85; }
  50%      { transform: scaleY(0.82); opacity: 1; }
}

/* ---- Founders — leadership trio (CTO · CEO · CMO) ------------------------------------- */
.founders {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 26px); align-items: center; /* centre lets the lead card sit taller */
  max-width: 1000px; margin: 0 auto;
}
.founder-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--glass-border); border-radius: var(--shape-xl);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.6);
  box-shadow: var(--glass-shadow-sm);
  transition: transform var(--dur-short) var(--ease), border-color var(--dur-short) var(--ease),
    box-shadow var(--dur-short) var(--ease);
}
.founder-card:hover {
  transform: translateY(-4px); border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow);
}
.founder-card__photo {
  width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--shape-lg); border: 1px solid var(--glass-border);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.04);
}
.founder-card__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-med) var(--ease);
}
.founder-card:hover .founder-card__photo img { transform: scale(1.04); }
.founder-card__name {
  margin: clamp(16px, 2vw, 20px) 0 0;
  font-family: var(--font-display); font-weight: 700; font-size: 1.32rem;
  letter-spacing: 0.01em; color: var(--on-surface); line-height: 1.1;
}
.founder-card__role {
  margin: 7px 0 0; font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary);
}

/* the CEO (centre) leads only by position + a touch larger; frame matches the others */
.founder-card--lead {
  transform: scale(1.06);
  box-shadow: var(--glass-shadow);
}
.founder-card--lead:hover { transform: scale(1.06) translateY(-4px); }

/* ---- Accordion — stacked glass panes -------------------------------------------------- */
.accordion { display: grid; gap: 12px; margin: clamp(28px, 4vw, 40px) auto 0; max-width: 860px; }
.accordion__item { border-radius: var(--shape-lg); overflow: hidden; }
.accordion__item.is-open { border-color: var(--glass-border-hover); box-shadow: var(--glass-shadow-hover); }
.accordion__trigger {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  width: 100%; padding: 20px 24px; border: 0; background: transparent;
  cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
  letter-spacing: 0.01em; color: var(--on-surface);
}
.accordion__trigger .plus { flex: 0 0 auto; position: relative; width: 16px; height: 16px; }
.accordion__trigger .plus::before, .accordion__trigger .plus::after {
  content: ""; position: absolute; background: var(--primary); border-radius: 2px;
  transition: transform 0.24s var(--ease), opacity 0.24s var(--ease);
}
.accordion__trigger .plus::before { top: 7px; left: 0; width: 16px; height: 2px; }
.accordion__trigger .plus::after { top: 0; left: 7px; width: 2px; height: 16px; }
.accordion__item.is-open .plus::after { transform: scaleY(0); opacity: 0; }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s var(--ease); }
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p {
  margin: 0; padding: 0 24px 22px; color: var(--on-surface-variant); line-height: 1.6; max-width: 70ch;
  opacity: 0; transition: opacity 0.3s var(--ease) 0.06s;
}
.accordion__item.is-open .accordion__panel p { opacity: 1; }

/* ---- CTA — one bright pane ------------------------------------------------------------ */
.cta {
  position: relative;
  width: var(--wrap); margin: 0 auto;
  padding: clamp(48px, 6.5vw, 88px) clamp(26px, 5vw, 60px);
  background: var(--glass-bg-strong);
  border-radius: var(--shape-xl); text-align: center;
  overflow: hidden;
}
.cta h2 {
  position: relative;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 0.96; text-transform: uppercase;
  letter-spacing: 0.01em; color: var(--secondary); max-width: 18ch; margin: 0 auto;
}
.cta p {
  position: relative; max-width: 58ch; margin: 20px auto 0;
  color: var(--on-surface-variant); font-size: 1.05rem; line-height: 1.6;
}
.cta__actions { position: relative; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }

/* ---- Contact ---------------------------------------------------------------------------- */
.contact {
  display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(340px, 1fr);
  gap: clamp(36px, 5vw, 64px); align-items: start;
}
.contact__info h2 { margin-bottom: 22px; }
.contact__info .lead {
  margin: 0 0 28px; color: var(--on-surface-variant);
  font-size: 1.05rem; line-height: 1.6; max-width: 44ch;
}
.contact__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.contact__list li { display: flex; gap: 15px; padding: 18px 0; border-top: 1px solid var(--outline-variant); }
.contact__list li:first-child { border-top: 0; padding-top: 0; }
.contact__list .ic {
  flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center;
  color: var(--on-primary-container); background: var(--primary-container);
  border: 1px solid var(--glass-border);
  border-radius: var(--shape-lg);
  box-shadow: inset 1px 1px 1px -0.5px rgb(255 255 255 / 0.5);
}
.contact__list span {
  display: block; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.11em; color: var(--on-surface-variant);
}
.contact__list strong { display: block; margin-top: 5px; color: var(--on-surface); font-size: 0.97rem; font-weight: 520; line-height: 1.46; }
.contact__list a:hover { color: var(--primary); }

/* form — glass card with rounded glass wells (Prism 3.0 text fields) */
.form-card {
  padding: clamp(26px, 3vw, 36px);
  border-radius: var(--shape-xl);
}
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.field {
  position: relative; display: grid; gap: 2px;
  padding: 10px 16px 9px;
  border: 1px solid var(--glass-border); border-radius: var(--shape-lg);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.6);
  box-shadow: var(--glass-shadow-sm);
  transition: border-color var(--dur-short) var(--ease), box-shadow var(--dur-short) var(--ease);
}
.field:focus-within {
  border-color: var(--primary);
  box-shadow: var(--glass-shadow-sm), 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: 0.74rem; font-weight: 600; color: var(--on-surface-variant);
  transition: color var(--dur-short) var(--ease);
}
.field:focus-within label { color: var(--primary); }
.field input, .field select, .field textarea {
  width: 100%; padding: 0; border: 0; background: transparent;
  color: var(--on-surface);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; }
.field input, .field select { height: 34px; }
/* Native <select> fallback (no-JS, or if the enhancer below fails to run):
   the OS-drawn popup can't inherit our glass "transparent" background (that
   just falls back to browser-default white), so give it an explicit,
   opaque, theme-aware fill — legible everywhere, if visually plain. */
.field select option {
  background: var(--surface); color: var(--on-surface);
}

/* ---- Glass select (progressive enhancement over <select>, see app.js) ----
   Native <select> popups are drawn by the OS, not the page, so they can
   never really match our glass system (rounded corners, blur, teal accents)
   — confirmed: even browsers that accept `appearance: base-select` in the
   stylesheet don't reliably render a custom popup from it. This is a real
   HTML/CSS listbox we fully control, so it matches the theme exactly. */
.select-glass { position: relative; }
.select-glass__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 34px; padding: 0; border: 0; background: transparent;
  color: var(--on-surface); font: inherit; text-align: left; cursor: pointer;
}
.select-glass__chevron {
  flex: 0 0 auto; width: 10px; height: 10px; margin-top: -2px;
  border-right: 2px solid var(--on-surface-variant); border-bottom: 2px solid var(--on-surface-variant);
  transform: rotate(45deg); transition: transform var(--dur-short) var(--ease);
}
.select-glass.is-open .select-glass__chevron { transform: rotate(225deg); margin-top: 2px; }

.select-glass__list {
  /* position: fixed + appended to <body> on open (see app.js): every glass
     .field establishes its own stacking context (backdrop-filter does that
     by spec), which traps a same-context z-index and stops it from ever
     beating a LATER sibling field — no z-index value fixes that from
     inside. Escaping to <body> sidesteps the trap entirely. */
  position: fixed; z-index: 1000;
  margin: 0; padding: 6px; list-style: none; max-height: 280px; overflow-y: auto;
  border: 1px solid var(--glass-border); border-radius: var(--shape-lg);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
  box-shadow: var(--glass-shadow);
}
.select-glass__option {
  padding: 10px 12px; border-radius: var(--shape-sm);
  color: var(--on-surface); font-size: 0.95rem; cursor: pointer;
  transition: background var(--dur-short) var(--ease), color var(--dur-short) var(--ease);
}
.select-glass__option:hover,
.select-glass__option:focus,
.select-glass__option[aria-selected="true"] {
  background: var(--primary-container); color: var(--on-primary-container); outline: none;
}
.select-glass__native-hidden {
  position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px;
}
.field textarea { min-height: 108px; padding: 4px 0 0; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--on-surface-faint); opacity: 1; }

.form-card .btn { margin-top: 20px; width: 100%; }
.form-note { margin: 13px 0 0; color: var(--on-surface-variant); font-size: 0.84rem; text-align: center; }
.form-status {
  margin: 13px 0 0; padding: 13px 16px;
  border: 1px solid var(--glass-border); background: var(--primary-container);
  border-radius: var(--shape-lg); color: var(--on-primary-container);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.6);
  box-shadow: var(--glass-shadow-sm);
  font-weight: 550; font-size: 0.92rem;
}
.form-status--error { background: var(--warning-container); color: var(--warning); }
.form-status[hidden] { display: none; }

/* ---- Footer -------------------------------------------------------------------------------- */
.site-footer { margin-top: clamp(48px, 7vw, 96px); padding-bottom: 8px; }
.site-footer .spectrum-rule { margin-bottom: clamp(36px, 5vw, 56px); }
.footer-main {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 5vw, 60px);
  width: var(--wrap); margin: 0 auto;
  padding: 0 0 clamp(28px, 4vw, 40px);
}
.footer-brand p { margin: 18px 0 0; max-width: 44ch; color: var(--on-surface-variant); font-size: 0.93rem; line-height: 1.6; }
.footer-brand .brand-full { height: 46px; width: auto; }
.footer-col h4 {
  margin: 0 0 16px;
  font-family: var(--font-display); font-size: 0.88rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary);
}
.footer-col ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.footer-col a, .footer-col span { color: var(--on-surface-variant); font-size: 0.92rem; transition: color var(--dur-short) var(--ease); }
.footer-col a:hover { color: var(--on-surface); }
.footer-bottom { border-top: 1px solid var(--outline-variant); }
.footer-bottom__inner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  width: var(--wrap); margin: 0 auto; padding: 20px 0;
  color: var(--on-surface-variant); font-size: 0.87rem;
}
.footer-bottom__inner strong {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--secondary);
}
.footer-bottom__inner span:last-child { font-family: var(--font-code); font-size: 0.78rem; color: var(--on-surface-variant); }

/* ---- Snackbar — floating glass capsule -------------------------------------------------------- */
.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--shape-full);
  background: color-mix(in srgb, var(--inverse-surface) 82%, transparent);
  color: var(--inverse-on-surface);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.5);
  backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.5);
  box-shadow: inset 1px 1px 1px -0.5px rgb(255 255 255 / 0.4), var(--elev-3);
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 500;
  transform: translateY(20px); opacity: 0; pointer-events: none;
  transition: transform 0.25s var(--ease-decel), opacity 0.25s var(--ease-decel);
}
.toast::before {
  content: ""; width: 8px; height: 8px; border-radius: var(--shape-full);
  background: var(--inverse-primary);
}
.toast.is-visible { transform: translateY(0); opacity: 1; }

/* ---- Reveal (progressive; armed only when IO works) -------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal-armed .reveal {
    opacity: 0; transform: translateY(22px);
    transition: opacity 0.7s var(--ease-decel), transform 0.7s var(--ease-decel);
  }
  .reveal-armed .reveal.is-in { opacity: 1; transform: none; }
  .reveal-armed .reveal[data-delay="1"] { transition-delay: 0.07s; }
  .reveal-armed .reveal[data-delay="2"] { transition-delay: 0.14s; }
  .reveal-armed .reveal[data-delay="3"] { transition-delay: 0.21s; }
  .reveal-armed .reveal[data-delay="4"] { transition-delay: 0.28s; }

  /* grid cascade: cards stagger in by column */
  .reveal-armed .service-grid .reveal:nth-child(3n+2) { transition-delay: 0.08s; }
  .reveal-armed .service-grid .reveal:nth-child(3n+3) { transition-delay: 0.16s; }
  .reveal-armed .bento .reveal:nth-child(2) { transition-delay: 0.08s; }
  .reveal-armed .bento .reveal:nth-child(3) { transition-delay: 0.16s; }
  .reveal-armed .bento .reveal:nth-child(5) { transition-delay: 0.1s; }
}

/* ---- Motion layer: load choreography + ambient light + hover glints ------
   Motivated motion only (hierarchy, storytelling, feedback). Everything sits
   under prefers-reduced-motion: no-preference; the reduce block below stays
   the kill-switch. Load choreography is additionally gated on .reveal-armed
   (JS + IntersectionObserver confirmed), so content can never get stuck
   hidden. */
@media (prefers-reduced-motion: no-preference) {
  /* ambient: the aurora breathes slowly behind the glass */
  body::before {
    animation: auroraDrift 70s ease-in-out infinite alternate;
    will-change: transform;
  }
  @keyframes auroraDrift {
    from { transform: translate3d(-1.5%, -1%, 0) scale(1.08); }
    to   { transform: translate3d(1.5%, 1.2%, 0) scale(1.14); }
  }

  /* ambient: light glides along the spectrum signature */
  .spectrum-rule {
    background-size: 220% 100%;
    animation: spectrumSlide 16s ease-in-out infinite alternate;
  }
  @keyframes spectrumSlide {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
  }

  /* load: the capsule header drops in once (motion-go = fonts settled).
     While armed-but-not-started it stays hidden, so it can't paint visible
     and then restart its entrance (the cold-load header blink). */
  .reveal-armed:not(.motion-go) .site-header { opacity: 0; }
  .motion-go .site-header { animation: headerDrop 0.6s var(--ease-decel) both; }
  @keyframes headerDrop { from { opacity: 0; transform: translateY(-16px); } }

  /* load: hero content rises into focus (blur -> sharp) */
  .reveal-armed .hero .reveal {
    transform: translateY(26px);
    filter: blur(6px);
    transition: opacity 0.8s var(--ease-decel), transform 0.8s var(--ease-decel),
      filter 0.8s var(--ease-decel);
  }
  .reveal-armed .hero .reveal.is-in { transform: none; filter: blur(0); }
  .reveal-armed .hero__visual.reveal { transform: translateY(18px) scale(0.97); }
  .reveal-armed .hero__visual.reveal.is-in { transform: none; }

  /* load: telemetry chips fade up after the pane settles
     (their idle float owns transform, so only opacity is choreographed) */
  .reveal-armed .hero__chip { opacity: 0; transition: opacity 0.6s var(--ease-decel); }
  .reveal-armed .hero__visual.is-in .hero__chip--a { opacity: 1; transition-delay: 0.55s; }
  .reveal-armed .hero__visual.is-in .hero__chip--b { opacity: 1; transition-delay: 0.75s; }

  /* hover feedback: a specular glint sweeps across the glass pane */
  .service-card::after,
  .process-step::after,
  .why-card::after {
    content: ""; position: absolute; top: -12%; bottom: -12%; left: 0; width: 44%;
    z-index: 2; pointer-events: none;
    background: linear-gradient(105deg, transparent, rgb(255 255 255 / 0.16), transparent);
    transform: translateX(-160%) skewX(-16deg);
    opacity: 0;
  }
  .service-card:hover::after,
  .process-step:hover::after,
  .why-card:hover::after { animation: glassGlint 0.9s var(--ease) forwards; }
  @keyframes glassGlint {
    0%   { transform: translateX(-160%) skewX(-16deg); opacity: 0; }
    25%  { opacity: 1; }
    100% { transform: translateX(340%) skewX(-16deg); opacity: 0; }
  }

  /* hover feedback: filled buttons lift toward the light */
  .btn--filled:hover { transform: translateY(-1px); }

  /* load: headline words materialize in place, one by one — opacity and
     focus only, zero positional motion (JS splits into .w spans; without JS
     the h1 falls back to the plain hero reveal above) */
  .reveal-armed .hero h1.is-split { transform: none; filter: none; }
  .reveal-armed .hero h1 .w {
    display: inline-block;
    opacity: 0; filter: blur(5px);
    transition: opacity 0.55s var(--ease-decel), filter 0.55s var(--ease-decel);
    transition-delay: calc(var(--wi) * 65ms + 0.12s);
  }
  .reveal-armed .hero h1.is-in .w { opacity: 1; filter: none; }
  /* per-character decode cells: fixed slots, centered glyphs */
  .hero h1 .w .c { display: inline-block; text-align: center; }
}

/* ---- Theme wipe (View Transitions API; inert in unsupporting browsers) --- */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theme-wiping * { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
  .ripple { display: none; }
}

/* ---- Responsive --------------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .hero, .about, .feature__inner, .contact { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .hero { min-height: auto; }
  .hero__visual { order: -1; min-height: 300px; }
  /* stacked hero: pane on top, copy centered beneath it */
  .hero__copy { text-align: center; }
  .hero h1, .hero__lead { margin-left: auto; margin-right: auto; }
  .hero__actions { justify-content: center; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .tech-item { flex-basis: calc((100% - 3 * 12px) / 4 - 0.5px); }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .why-card--xl, .why-card--wide, .why-card--accent { grid-column: span 2; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav-links {
    position: fixed; top: 84px; left: 12px; right: 12px; z-index: 39;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 10px;
    border: 1px solid var(--glass-border);
    border-radius: var(--shape-xl);
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(26px) saturate(1.8);
    backdrop-filter: blur(26px) saturate(1.8);
    box-shadow: var(--glass-shadow);
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: transform 0.24s var(--ease), opacity 0.24s var(--ease);
  }
  .nav-links.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav-links a { padding: 14px 16px; color: var(--on-surface); }
  .nav-cta { display: none; }
  .nav-toggle { display: grid; place-items: center; }
  .theme-toggle__label { display: none; }
}

@media (max-width: 720px) {
  /* founders stack to one column; the lead card drops its scale so it never
     overflows, and re-orders to the top so the CEO leads on mobile */
  .founders { grid-template-columns: 1fr; max-width: 380px; gap: 16px; }
  .founder-card--lead { transform: none; order: -1; }
  .founder-card--lead:hover { transform: translateY(-4px); }
}

@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr; gap: 18px; }
  .form-grid, .service-grid, .process-steps, .bento { grid-template-columns: 1fr; }
  .tech-item { flex-basis: calc((100% - 2 * 12px) / 3 - 0.5px); }
  .why-card--xl, .why-card--wide, .why-card--accent { grid-column: auto; }
  .hero__actions, .cta__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn, .cta__actions .btn { width: 100%; }
  .hero__visual { min-height: 240px; }
  .hero__chip--a { top: 12px; left: 12px; }
  .hero__chip--b { bottom: 14px; right: 12px; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-bottom__inner { flex-direction: column; align-items: flex-start; }
}