/* ============================================================
   Ihor — Industrial Cockpit foundation
   Phase 1: layered architecture, OKLCH + light-dark() tokens,
   thematic background, modern motion stack.
   Light-mode rendering must remain byte-identical to the
   pre-refactor CSS — light-dark() light-arg uses the original hex.
   ============================================================ */

@layer reset, tokens, base, theme, bgfx, motion-v2, utilities, print;

/* ---------- @property registrations (animatable custom props) ----------
   Must live at top level, not inside a @layer (per CSS Houdini spec).
   Each --kpi-N is consumed by hero cockpit widget in Phase 2. */
@property --kpi-1 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --kpi-2 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --kpi-3 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --kpi-4 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --kpi-5 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --kpi-6 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --kpi-7 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --kpi-8 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --grid-shift { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --aurora-x { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --aurora-y { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --bg-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ============================================================
   @layer tokens — single source of truth for design tokens.
   Names are preserved from the pre-refactor file; values now use
   light-dark() so the same `var(--blue)` lookup yields the right
   colour automatically based on the active color-scheme.
   ============================================================ */
@layer tokens {
  :root {
    color-scheme: light dark;

    /* Brand — Siemens-inspired industrial */
    --blue:        light-dark(#0E3B73, oklch(74% 0.13 255));
    --blue-light:  light-dark(#EEF4FB, oklch(22% 0.04 255));
    --blue-mid:    light-dark(#C5D9EE, oklch(35% 0.07 255));
    --blue-dark:   light-dark(#072A55, oklch(86% 0.10 255));
    --cyan:        light-dark(#00A0DC, oklch(78% 0.14 224));
    --cyan-light:  light-dark(#E6F6FC, oklch(24% 0.05 224));
    --cyan-text:   light-dark(#0072A3, oklch(82% 0.13 224));
    --cyan-text-hover: light-dark(#005E80, oklch(88% 0.13 224));
    --green-light: light-dark(#EAF3DE, oklch(22% 0.05 145));
    --green-dark:  light-dark(#2E5E0A, oklch(80% 0.16 145));
    --teal-light:  light-dark(#E1F5EE, oklch(22% 0.04 180));
    --teal-dark:   light-dark(#0F6E56, oklch(80% 0.12 180));
    --amber-light: light-dark(#FCF0DA, oklch(24% 0.05  70));
    --amber-dark:  light-dark(#7A4A0B, oklch(82% 0.14  70));

    /* Greys */
    --gray-50:  light-dark(#FAFAF9, oklch(15% 0.005 250));
    --gray-100: light-dark(#F3F3F1, oklch(18% 0.005 250));
    --gray-200: light-dark(#E6E6E3, oklch(24% 0.005 250));
    --gray-300: light-dark(#D4D4D0, oklch(34% 0.005 250));
    --gray-400: light-dark(#9B9A96, oklch(54% 0.005 250));
    --gray-700: light-dark(#3A3A37, oklch(74% 0.005 250));
    --gray-900: light-dark(#111110, oklch(94% 0.003 250));
    --ink:      light-dark(#0B0B0A, oklch(99% 0    0));
    --text:     light-dark(#18181A, oklch(94% 0.005 250));
    --text-muted: light-dark(#5A5A58, oklch(70% 0.008 250));

    /* Surfaces — new in Phase 1, drive dark-mode page bg */
    --bg:        light-dark(#FFFFFF, oklch(13% 0.012 250));
    --bg-elev:   light-dark(#FFFFFF, oklch(17% 0.012 250));
    --bg-sunken: light-dark(#FAFAF9, oklch(11% 0.012 250));

    --border:        light-dark(rgba(11,11,10,0.09), oklch(100% 0 0 / 0.10));
    --border-strong: light-dark(rgba(11,11,10,0.16), oklch(100% 0 0 / 0.18));

    /* Geometry / depth */
    --radius: 8px;
    --radius-lg: 14px;
    --shadow-sm: light-dark(
      0 1px 2px rgba(11,11,10,0.04), 0 1px 3px rgba(11,11,10,0.05));
    --shadow-md: light-dark(
      0 4px 12px rgba(11,11,10,0.06), 0 2px 4px rgba(11,11,10,0.04));
    --shadow-lg: light-dark(
      0 20px 40px -12px rgba(11,11,10,0.12), 0 8px 16px -8px rgba(11,11,10,0.08));

    /* Easing — `linear()` spring (overshoots ~10%) for richer micro-motion */
    --ease-spring: linear(
      0, 0.402 7.4%, 0.711 15.1%, 0.929 23.2%,
      1.008 28.3%, 1.067 33.8%, 1.099 39.6%, 1.103 45.7%,
      1.083 53.4%, 1.029 61.4%, 1.001 71.2%, 0.997 100%);
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-snap: cubic-bezier(.2,.7,.3,1); /* preserved from old reveal anim */
  }

  /* Manual theme override (toggle button in nav writes data-theme on <html>) */
  [data-theme="light"] { color-scheme: light; }
  [data-theme="dark"]  { color-scheme: dark; }
}

/* ============================================================
   @font-face — top level (precedes any layer using these families)
   ============================================================ */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter-tight-latin-wght-normal.woff2') format('woff2-variations');
  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 Tight';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter-tight-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter-tight-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
  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: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
  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: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/instrument-serif-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/instrument-serif-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/fraunces-latin-400-normal.woff2') format('woff2');
  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: 'Fraunces';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/fraunces-latin-400-italic.woff2') format('woff2');
  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: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/fraunces-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/fraunces-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  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: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
  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: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/jetbrains-mono-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/fonts/jetbrains-mono-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/jetbrains-mono-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/fonts/jetbrains-mono-cyrillic-500-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* ============================================================
   @layer base — all pre-refactor styles, wrapped verbatim.
   This is the safety net that keeps light-mode rendering
   byte-identical. Subsequent layers (theme, bgfx, motion-v2)
   layer on top via increased layer specificity, never modify.
   ============================================================ */
@layer base {
  /* Anchor scroll offset — sticky nav (logo 120/80/56 + padding) would otherwise
     clip section h2. Breakpoints mirror the logo-height breakpoints below. */
  html { scroll-padding-top: 144px; }
  @media (max-width: 860px) { html { scroll-padding-top: 100px; } }
  @media (max-width: 600px) { html { scroll-padding-top: 80px; } }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  /* Skip-to-main-content link — visually hidden until keyboard focus. */
  .skip-link {
    position: absolute; top: -40px; left: 8px;
    background: var(--ink); color: var(--bg);
    padding: 10px 20px; border-radius: var(--radius);
    font-size: 14px; font-weight: 500;
    text-decoration: none;
    z-index: 1000;
    transition: top .15s;
  }
  .skip-link:focus {
    top: 8px;
    outline: 2px solid var(--cyan); outline-offset: 2px;
  }

  /* Global keyboard focus indicator. :focus-visible only fires on
     keyboard navigation, so mouse clicks don't flash an outline. */
  *:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
    border-radius: 2px;
  }
  /* On dark hero / cta / about backgrounds the cyan ring is too dim;
     swap to white for contrast. */
  .hero-wrap *:focus-visible,
  .cta-section *:focus-visible,
  .about-bg *:focus-visible {
    outline-color: #fff;
  }
  .cta-section input:focus-visible,
  .cta-section textarea:focus-visible,
  .cta-section select:focus-visible {
    outline: none;
  }
  button:focus-visible,
  .btn-primary:focus-visible,
  .btn-secondary:focus-visible,
  .btn-white:focus-visible,
  .nav-cta:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(0,160,220,0.2);
  }
  body {
    font-family: 'Inter Tight', system-ui, sans-serif;
    color: var(--text);
    background: #fff;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "ss01", "cv11";
  }
  .serif { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }
  .mono { font-family: 'JetBrains Mono', monospace; font-feature-settings: "zero"; }

  /* NAV */
  nav {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center;
    padding: 0.4rem 2.5rem;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border-bottom: 1px solid var(--border);
  }
  .nav-menu {
    display: flex; align-items: center; gap: 24px;
  }
  .nav-burger {
    display: none;
    background: transparent; border: none; padding: 8px;
    cursor: pointer; color: var(--ink);
    border-radius: 6px;
  }
  .nav-burger:hover { background: var(--gray-100); }
  .nav-backdrop { display: none; }
  .nav-logo { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
  .nav-logo .logo-wrap { position: relative; display: inline-block; line-height: 0; }
  .nav-logo img { height: 120px; width: auto; display: block; }
  .nav-logo .logo-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
  .nav-logo .brand { font-weight: 600; letter-spacing: -0.015em; }

  /* Logo FX — contact pulses, LED color flashes, electron, SCADA screens */
  .logo-fx .contact {
    fill: rgba(34, 211, 238, 0);
    stroke: var(--cyan, #22d3ee);
    stroke-width: 1.5;
    stroke-opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: contactPulse 2.6s ease-out infinite;
  }
  .logo-fx .contact:nth-of-type(1)  { animation-delay: 0s; }
  .logo-fx .contact:nth-of-type(2)  { animation-delay: 0.26s; }
  .logo-fx .contact:nth-of-type(3)  { animation-delay: 0.52s; }
  .logo-fx .contact:nth-of-type(4)  { animation-delay: 0.78s; }
  .logo-fx .contact:nth-of-type(5)  { animation-delay: 1.04s; }
  .logo-fx .contact:nth-of-type(6)  { animation-delay: 1.30s; }
  .logo-fx .contact:nth-of-type(7)  { animation-delay: 1.56s; }
  .logo-fx .contact:nth-of-type(8)  { animation-delay: 1.82s; }
  .logo-fx .contact:nth-of-type(9)  { animation-delay: 2.08s; }
  .logo-fx .contact:nth-of-type(10) { animation-delay: 2.34s; }
  @keyframes contactPulse {
    0%   { stroke-opacity: 0;    transform: scale(0.5); }
    25%  { stroke-opacity: 0.95; }
    100% { stroke-opacity: 0;    transform: scale(2.6); }
  }

  .logo-fx .led-glow { opacity: 0; }
  .logo-fx .led-glow-1 { animation: ledFlash 3.1s ease-in-out infinite; animation-delay: 0s;   filter: drop-shadow(0 0 3px #1ce64a) drop-shadow(0 0 6px #1ce64a); }
  .logo-fx .led-glow-2 { animation: ledFlash 2.8s ease-in-out infinite; animation-delay: 0.7s; filter: drop-shadow(0 0 3px #f0e500) drop-shadow(0 0 6px #f0e500); }
  .logo-fx .led-glow-3 { animation: ledFlash 3.4s ease-in-out infinite; animation-delay: 1.4s; filter: drop-shadow(0 0 3px #ff6a26) drop-shadow(0 0 6px #ff6a26); }
  .logo-fx .led-glow-4 { animation: ledFlash 2.6s ease-in-out infinite; animation-delay: 2.2s; filter: drop-shadow(0 0 3px #e51919) drop-shadow(0 0 6px #e51919); }
  .logo-fx .led-glow-5 { animation: ledFlash 3.0s ease-in-out infinite; animation-delay: 0.4s; filter: drop-shadow(0 0 3px #22d3ee) drop-shadow(0 0 6px #22d3ee); }
  @keyframes ledFlash {
    0%, 78%, 100% { opacity: 0; }
    85%, 92%      { opacity: 0.6; }
  }

  .logo-fx .trace { fill: none; stroke: none; }
  .logo-fx .electron {
    fill: var(--cyan, #22d3ee);
    filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.95))
            drop-shadow(0 0 10px rgba(34, 211, 238, 0.6));
  }

  .logo-fx .screen-bg {
    fill: #0a1628;
  }
  .logo-fx .screen {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 13px;
    font-weight: 700;
    fill: var(--cyan, #22d3ee);
    letter-spacing: -0.3px;
    user-select: none;
  }
  .logo-fx .screen-1 { animation: screenFlicker 2.6s steps(1) infinite; }
  .logo-fx .screen-2 { animation: screenFlicker 2.6s steps(1) infinite; animation-delay: 0.9s; }
  .logo-fx .screen-3 { animation: screenFlicker 2.6s steps(1) infinite; animation-delay: 1.7s; }
  @keyframes screenFlicker {
    0%, 92%, 100% { opacity: 0.95; }
    93%, 96%      { opacity: 0.4; }
  }

  @media (prefers-reduced-motion: reduce) {
    .logo-fx .contact, .logo-fx .led-glow, .logo-fx .electron, .logo-fx .screen {
      animation: none !important;
    }
    .logo-fx .contact { stroke-opacity: 0; }
    .logo-fx .led-glow { opacity: 0; }
    .logo-fx .electron { display: none; }
  }
  .nav-links { display: flex; gap: 24px; list-style: none; align-items: center; }
  .nav-links a {
    font-size: 13px; color: var(--text-muted); text-decoration: none;
    transition: color .2s; letter-spacing: -0.005em;
    position: relative;
  }
  .nav-links a:hover { color: var(--ink); }
  .nav-links a::after {
    content: ''; position: absolute; left: 0; bottom: -4px;
    width: 0; height: 1px; background: var(--cyan);
    transition: width .25s ease;
  }
  .nav-links a:hover::after { width: 100%; }
  .nav-cta {
    background: var(--ink); color: var(--bg);
    border: 1px solid var(--ink); padding: 8px 18px;
    border-radius: 100px; font-size: 13px;
    font-family: inherit; cursor: pointer; font-weight: 500;
    transition: all .2s;
  }
  .nav-cta:hover { background: transparent; color: var(--ink); }

  /* HERO — always-dark surface; explicit hex preserved (theme-agnostic) */
  .hero-wrap {
    position: relative;
    background: linear-gradient(180deg, #0B1F3A 0%, #0E3B73 60%, #164D8F 100%);
    color: #fff;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
  }
  .hero-wrap::before {
    content: ''; position: absolute; inset: 0;
    background-image:
      radial-gradient(circle at 15% 20%, rgba(0,160,220,0.18) 0%, transparent 40%),
      radial-gradient(circle at 85% 80%, rgba(0,160,220,0.12) 0%, transparent 45%);
    pointer-events: none;
  }
  .hero-wrap::after {
    content: ''; position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
    -webkit-mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  }
  .hero-grid {
    position: relative; z-index: 2;
    max-width: 1240px; margin: 0 auto;
    padding: 5rem 2.5rem 4rem;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 3.5rem;
    align-items: center;
  }
  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.7);
    text-transform: uppercase; letter-spacing: 0.12em;
    margin-bottom: 1.75rem;
  }
  .hero-eyebrow::before {
    content: ''; width: 24px; height: 1px; background: var(--cyan);
  }
  .hero-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-size: clamp(38px, 6vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin-bottom: 1.5rem;
    color: #fff;
  }
  .hero-title em {
    font-style: italic;
    color: #7FD4F5;
    font-weight: 400;
  }
  .hero-lede {
    font-size: 17px; line-height: 1.6;
    color: rgba(255,255,255,0.75);
    max-width: 520px;
    margin-bottom: 2.25rem;
    font-weight: 300;
  }
  .hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 2.5rem; }
  .btn-primary {
    background: var(--cyan-text); color: #fff;
    border: 1px solid var(--cyan-text); padding: 13px 26px;
    border-radius: 100px; font-size: 14px; font-weight: 500;
    font-family: inherit; cursor: pointer;
    transition: all .2s;
    letter-spacing: -0.005em;
  }
  .btn-primary:hover { background: var(--cyan-text-hover); border-color: var(--cyan-text-hover); transform: translateY(-1px); }
  .btn-secondary {
    background: transparent; color: #fff;
    border: 1px solid rgba(255,255,255,0.3); padding: 13px 26px;
    border-radius: 100px; font-size: 14px; font-weight: 500;
    font-family: inherit; cursor: pointer;
    transition: all .2s;
  }
  .btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

  .hero-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .hero-chip {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; font-weight: 500;
    padding: 5px 10px; border-radius: 4px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.12);
    letter-spacing: 0.02em;
  }

  .hero-photo {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/3;
    box-shadow: 0 40px 80px -20px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.12);
  }
  .hero-photo img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: contrast(1.05) saturate(0.95);
  }
  .hero-photo-overlay {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 1.5rem 1.5rem 1.25rem;
    background: linear-gradient(0deg, rgba(0,0,0,0.88) 0%, transparent 100%);
    color: #fff;
  }
  .hero-photo-overlay .label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; color: rgba(255,255,255,0.65);
    text-transform: uppercase; letter-spacing: 0.12em;
    margin-bottom: 4px;
  }
  .hero-photo-overlay .name { font-size: 17px; font-weight: 500; }
  .hero-photo-overlay .desc { font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 2px; }
  .hero-photo-tag {
    position: absolute; top: 14px; right: 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; font-weight: 500;
    padding: 5px 10px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff; border-radius: 4px;
    backdrop-filter: blur(6px);
    letter-spacing: 0.08em;
  }

  @media (max-width: 860px) {
    .hero-grid { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.5rem; }
    .hero-photo { max-width: 520px; margin: 0 auto; aspect-ratio: 4/3; }
  }

  /* STATS BAR */
  .stats-bar {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0;
    background: var(--gray-50);
    border-bottom: 1px solid var(--border);
  }
  .stat {
    padding: 2rem 1.75rem; text-align: left;
    border-right: 1px solid var(--border);
    position: relative;
  }
  .stat:last-child { border-right: none; }
  .stat-num {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 42px; font-weight: 400;
    color: var(--ink); letter-spacing: -0.03em; line-height: 1;
    margin-bottom: 6px;
  }
  .stat-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.1em;
    line-height: 1.4;
  }

  /* SECTIONS */
  section { padding: 6rem 2.5rem; position: relative; }
  section.alt { background: var(--gray-50); }
  section.dark { background: var(--ink); color: var(--bg); }
  .section-header {
    max-width: 1100px; margin: 0 auto 3.5rem;
    display: grid; grid-template-columns: auto 1fr; gap: 2.5rem; align-items: start;
    border-bottom: 1px solid var(--border);
    padding-bottom: 2rem;
  }
  .section-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: var(--cyan-text);
    text-transform: uppercase; letter-spacing: 0.15em;
    font-weight: 500;
    padding-top: 10px;
    white-space: nowrap;
  }
  .section-header h2 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 400; letter-spacing: -0.02em;
    line-height: 1.05;
    margin-bottom: 12px;
  }
  .section-header h2 em { font-style: italic; color: var(--blue); }
  .section-header p {
    font-size: 16px; color: var(--text-muted);
    max-width: 560px; font-weight: 300; line-height: 1.6;
  }
  @media (max-width: 700px) {
    .section-header { grid-template-columns: 1fr; gap: 12px; }
    .section-num { padding-top: 0; }
    section { padding: 4rem 1.5rem; }
  }

  /* CARDS GRID */
  .grid { display: grid; gap: 14px; max-width: 1100px; margin: 0 auto; }
  .grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

  .card {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 1.75rem 1.5rem;
    transition: all .25s ease;
    position: relative;
    overflow: hidden;
  }
  .card::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: var(--cyan);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
  }
  .card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  .card:hover::before { transform: scaleX(1); }
  .card.featured {
    border: 1px solid var(--ink);
    background: var(--ink);
    color: #fff;
  }
  .card.featured::before { background: var(--cyan); transform: scaleX(1); }
  .card.featured p { color: rgba(255,255,255,0.72); }
  .card.featured h3 { color: #fff; }
  .card.featured .tag { background: rgba(0,160,220,0.18); color: #7FD4F5; border: 1px solid rgba(127,212,245,0.25); }
  .card.featured .proto-tag { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.8); }
  .card-icon {
    width: 40px; height: 40px;
    background: var(--blue-light); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
    transition: all .25s;
  }
  .card.featured .card-icon { background: rgba(0,160,220,0.18); }
  .card.featured .card-icon svg { stroke: #7FD4F5; }
  .card h3 {
    font-size: 16px; font-weight: 600;
    margin-bottom: 8px; letter-spacing: -0.015em;
    line-height: 1.3;
  }
  .card p {
    font-size: 13px; color: var(--text-muted);
    line-height: 1.6;
  }

  .tag {
    display: inline-block; font-size: 10px; font-weight: 500;
    padding: 4px 10px; border-radius: 100px; margin-bottom: 12px;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .tag-blue { background: var(--blue-light); color: var(--blue-dark); border: 1px solid rgba(14,59,115,0.15); }
  .tag-green { background: var(--green-light); color: var(--green-dark); border: 1px solid rgba(46,94,10,0.15); }
  .tag-teal { background: var(--teal-light); color: var(--teal-dark); border: 1px solid rgba(15,110,86,0.18); }
  .tag-amber { background: var(--amber-light); color: var(--amber-dark); border: 1px solid rgba(122,74,11,0.2); }
  .tag-cyan { background: var(--cyan-light); color: var(--cyan-text-hover); border: 1px solid rgba(0,160,220,0.2); }

  .proto-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; }
  .proto-tag {
    font-size: 10px; padding: 3px 9px;
    background: var(--gray-100); border: 1px solid var(--border);
    border-radius: 100px; color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.02em;
  }

  .price-row {
    display: flex; align-items: baseline; gap: 6px;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .price-val { font-size: 22px; font-weight: 500; color: var(--blue); }
  .price-label { font-size: 12px; color: var(--text-muted); }

  .price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .price-cell {
    background: var(--gray-100); border-radius: var(--radius);
    padding: 8px; text-align: center;
  }
  .price-cell .name { font-size: 11px; color: var(--text-muted); }
  .price-cell .val { font-size: 17px; font-weight: 500; color: var(--blue); }

  /* NETBIRD BANNER */
  .nb-banner {
    background: var(--teal-light);
    border: 1px solid #9FE1CB;
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    display: flex; align-items: center; gap: 14px;
    max-width: 900px; margin-left: auto; margin-right: auto;
    margin-bottom: 1.5rem;
  }
  .nb-banner-logo { font-size: 13px; font-weight: 500; color: var(--teal-dark); white-space: nowrap; font-family: 'JetBrains Mono', monospace; }
  .nb-banner p { font-size: 13px; color: var(--teal-dark); line-height: 1.5; }

  /* COMPARISON TABLE */
  .compare-wrap { max-width: 900px; margin: 0 auto; overflow-x: auto; }
  .compare-intro {
    background: var(--blue-light); border: 1px solid var(--blue-mid);
    border-radius: var(--radius-lg); padding: 14px 18px;
    margin-bottom: 1.5rem;
    display: flex; align-items: center; gap: 12px;
  }
  .compare-intro p { font-size: 13px; color: var(--blue-dark); line-height: 1.5; }

  .sol-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 1.5rem; }
  .sol-card {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 1rem;
  }
  .sol-card.featured { border: 2px solid var(--blue); }
  .sol-card .sol-name { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
  .sol-card .sol-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.4; }
  .sol-card .sol-price { font-size: 20px; font-weight: 500; color: var(--blue); }
  .sol-card .sol-price-lbl { font-size: 11px; color: var(--text-muted); }

  table.ct { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
  table.ct th {
    font-size: 12px; font-weight: 500; padding: 10px 12px;
    text-align: center; border-bottom: 1px solid var(--border);
    color: var(--text-muted); background: var(--gray-100);
  }
  table.ct th:first-child { text-align: left; width: 30%; }
  table.ct th.ours { color: var(--blue-dark); background: var(--blue-light); }
  table.ct td {
    padding: 9px 12px; text-align: center;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted); vertical-align: middle;
  }
  table.ct td:first-child { text-align: left; color: var(--text); }
  table.ct td.ours-col { background: #F5F9FE; }
  table.ct tr:last-child td { border-bottom: none; }
  table.ct tr:hover td { background: var(--gray-100); }
  table.ct tr:hover td.ours-col { background: #EBF3FB; }
  .ct-section { font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 12px 4px; background: var(--gray-100) !important; }
  .yes { color: #27500A; font-weight: 500; }
  .no { color: #791F1F; }
  .part { color: #633806; }

  /* ABOUT — always-dark surface */
  .about-bg {
    position: relative;
    background: var(--ink);
    color: #fff;
    overflow: hidden;
  }
  .about-bg-picture { position: absolute; inset: 0; pointer-events: none; }
  .about-bg-image {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 30%;
    opacity: 0.18;
    filter: grayscale(0.4) contrast(1.1);
    display: block;
  }
  .about-bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--ink) 0%, rgba(11,11,10,0.85) 40%, var(--ink) 100%);
  }
  .about-bg > * { position: relative; z-index: 2; }
  .about-bg > .about-bg-picture { position: absolute; inset: 0; z-index: 0; }
  .about-bg .section-header h2 { color: #fff; }
  .about-bg .section-header p { color: rgba(255,255,255,0.7); }
  .about-bg .section-num { color: var(--cyan); }
  .about-bg .section-header { border-bottom-color: rgba(255,255,255,0.1); }
  .about-wrap { max-width: 900px; margin: 0 auto; }
  .about-header { display: flex; align-items: center; gap: 20px; margin-bottom: 2.5rem; }
  .avatar {
    width: 76px; height: 76px; border-radius: 50%; flex-shrink: 0;
    overflow: hidden;
    border: 2px solid var(--cyan);
    box-shadow: 0 0 0 4px rgba(0,160,220,0.15);
  }
  .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .about-name {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 26px; font-weight: 400;
    margin-bottom: 4px; letter-spacing: -0.02em;
    color: #fff;
  }
  .about-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; color: rgba(255,255,255,0.6);
    text-transform: uppercase; letter-spacing: 0.1em;
  }
  .about-header .proto-tag {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.8);
  }

  .timeline { border-left: 1px solid rgba(255,255,255,0.15); padding-left: 2rem; margin-bottom: 2.5rem; }
  .tl-item { position: relative; padding-bottom: 2rem; }
  .tl-item:last-child { padding-bottom: 0; }
  .tl-item::before {
    content: ''; position: absolute; left: -2.3rem; top: 8px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--ink); border: 2px solid rgba(255,255,255,0.3);
  }
  .tl-item.current::before {
    border-color: var(--cyan); background: var(--cyan);
    box-shadow: 0 0 0 4px rgba(0,160,220,0.2);
  }
  .tl-date {
    font-size: 11px; color: rgba(255,255,255,0.55);
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 3px;
  }
  .tl-title { font-size: 15px; font-weight: 500; margin-bottom: 4px; color: #fff; letter-spacing: -0.01em; }
  .tl-desc { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.6; }
  .current-badge {
    display: inline-block; font-size: 10px; padding: 2px 8px;
    background: var(--cyan); color: #fff;
    border-radius: 4px; margin-bottom: 6px;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase; letter-spacing: 0.1em;
    font-weight: 500;
  }

  .skill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
  .skill-box {
    background: rgba(255,255,255,0.04); border-radius: var(--radius);
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,0.08);
  }
  .skill-box h3 {
    font-size: 10px; font-weight: 500;
    color: var(--cyan);
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 8px;
  }
  .skill-box p { font-size: 12px; color: rgba(255,255,255,0.75); line-height: 1.55; }

  /* PRODUCT VISUALS */
  .photo-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all .25s ease;
  }
  .photo-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  .product-visual {
    width: 100%;
    aspect-ratio: 5/3;
    overflow: hidden;
    display: block;
  }
  .product-visual svg { width: 100%; height: 100%; display: block; }
  .photo-card-body { padding: 1.25rem 1.5rem 1.5rem; }
  .photo-card-body h3 {
    font-size: 16px; font-weight: 600;
    margin-bottom: 6px; letter-spacing: -0.01em;
  }
  .photo-card-body p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
  .photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1100px;
    margin: 2.5rem auto;
  }

  /* SCROLL ANIMATIONS — base reveal (motion-v2 layer adds scroll-driven upgrade) */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s var(--ease-snap), transform .7s var(--ease-snap);
  }
  .reveal.in-view { opacity: 1; transform: translateY(0); }
  .reveal-delay-1 { transition-delay: .08s; }
  .reveal-delay-2 { transition-delay: .16s; }
  .reveal-delay-3 { transition-delay: .24s; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; transition: none; }
  }

  /* ALERT BOX */
  .info-box {
    background: var(--blue-light);
    border-left: 3px solid var(--blue);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 12px 16px;
    font-size: 13px; color: var(--blue-dark); line-height: 1.6;
    max-width: 900px; margin-left: auto; margin-right: auto;
    margin-top: 1.5rem;
  }

  /* CTA — always-dark surface */
  .cta-section {
    background: linear-gradient(180deg, #0B1F3A 0%, #0E3B73 100%);
    color: #fff;
    padding: 5.5rem 2.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .cta-section::before {
    content: ''; position: absolute; inset: 0;
    background-image:
      radial-gradient(circle at 20% 50%, rgba(0,160,220,0.22) 0%, transparent 40%),
      radial-gradient(circle at 80% 50%, rgba(0,160,220,0.15) 0%, transparent 45%);
    pointer-events: none;
  }
  .cta-section > * { position: relative; z-index: 2; }
  .cta-section h2 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 400; letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 1rem;
  }
  .cta-section h2 em { font-style: italic; color: #7FD4F5; }
  .cta-section > p {
    font-size: 16px; color: rgba(255,255,255,0.75);
    margin-bottom: 2.5rem; max-width: 600px;
    margin-left: auto; margin-right: auto;
  }
  .contact-chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 2.5rem; }
  .contact-chip {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 100px; padding: 8px 18px;
    font-size: 13px; color: #fff;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.02em;
  }
  .btn-white {
    background: #fff; color: var(--ink);
    border: 1px solid #fff; padding: 13px 32px;
    border-radius: 100px; font-size: 14px;
    font-family: inherit; cursor: pointer; font-weight: 500;
    transition: all .2s;
    letter-spacing: -0.005em;
  }
  .btn-white:hover { background: var(--cyan-text); color: #fff; border-color: var(--cyan-text); }

  footer {
    padding: 1.5rem 2.5rem; border-top: 1px solid var(--border);
    text-align: center; font-size: 13px; color: var(--text-muted);
  }

  /* CONTACT FORM */
  .contact-chips a.contact-chip { text-decoration: none; transition: background .15s, border-color .15s; }
  .contact-chips a.contact-chip:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.45); }
  .contact-form {
    max-width: 560px; margin: 0 auto;
    text-align: left;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    backdrop-filter: blur(8px);
  }
  .form-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    margin-bottom: 14px;
  }
  .form-field { display: flex; flex-direction: column; margin-bottom: 14px; }
  .form-row .form-field { margin-bottom: 0; }
  .form-field label {
    font-size: 12px; font-weight: 500;
    color: rgba(255,255,255,0.85); margin-bottom: 6px;
    letter-spacing: 0.02em;
  }
  .form-field input,
  .form-field textarea,
  .form-field select {
    width: 100%;
    background: rgba(255,255,255,0.95);
    color: #18181A;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
  }
  .form-field input:focus-visible,
  .form-field textarea:focus-visible,
  .form-field select:focus-visible {
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
  }
  .form-field textarea { resize: vertical; min-height: 110px; }

  .field-error {
    display: block;
    margin-top: 4px;
    min-height: 16px;
    font-size: 12px; font-weight: 500;
    color: #FFB4B4;
  }
  .form-field input:invalid:not(:placeholder-shown):not(:focus),
  .form-field textarea:invalid:not(:placeholder-shown):not(:focus) {
    border-color: #FF8888;
  }
  .form-consent {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 12px; color: rgba(255,255,255,0.8);
    margin-bottom: 1.25rem; line-height: 1.5;
    cursor: pointer;
  }
  .form-consent input[type="checkbox"] {
    margin-top: 2px; flex-shrink: 0;
    accent-color: #fff;
  }
  .contact-form .btn-white { width: 100%; }
  .form-note { font-size: 12px; color: rgba(255,255,255,0.7); text-align: center; margin-top: 14px; }
  .form-note a { color: #fff; text-decoration: underline; }

  /* FOOTER LEGAL */
  footer.site-footer {
    padding: 0;
    border-top: 1px solid var(--border);
    background: var(--gray-100);
    text-align: left;
  }
  .footer-inner {
    max-width: 1100px; margin: 0 auto;
    padding: 2rem 2.5rem 1.25rem;
    display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2rem;
  }
  .footer-col h3 {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-muted); font-weight: 500; margin-bottom: 10px;
  }
  .footer-col p, .footer-col a {
    font-size: 13px; color: var(--text); line-height: 1.6;
    text-decoration: none; display: block;
  }
  .footer-col a { padding: 3px 0; min-height: 24px; }
  .footer-col a:hover { color: var(--blue); }
  .footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
  .footer-brand img { height: 100px; width: auto; }
  .footer-brand .brand-text { font-size: 15px; font-weight: 500; }
  .footer-bottom {
    border-top: 1px solid var(--border);
    padding: 1rem 2.5rem;
    display: flex; justify-content: space-between;
    align-items: center; flex-wrap: wrap; gap: 10px;
    font-size: 12px; color: var(--text-muted);
    max-width: 1100px; margin: 0 auto;
  }

  details.legal-block {
    border-top: 1px solid var(--border);
    background: var(--bg);
  }
  details.legal-block summary {
    cursor: pointer; user-select: none;
    padding: 14px 2.5rem;
    font-size: 13px; font-weight: 500; color: var(--text);
    list-style: none;
    display: flex; justify-content: space-between; align-items: center;
    max-width: 1100px; margin: 0 auto;
  }
  details.legal-block summary::-webkit-details-marker { display: none; }
  details.legal-block summary::after {
    content: '+'; font-size: 18px; color: var(--text-muted);
    transition: transform .2s;
  }
  details.legal-block[open] summary::after { content: '−'; }
  details.legal-block .legal-content {
    max-width: 1100px; margin: 0 auto;
    padding: 0 2.5rem 1.5rem;
    font-size: 12px; color: var(--text-muted); line-height: 1.7;
  }
  details.legal-block .legal-content h4 {
    font-size: 12px; font-weight: 500; color: var(--text);
    margin-top: 12px; margin-bottom: 4px;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  details.legal-block .legal-content p:first-of-type { margin-top: 0; }
  details.legal-block .legal-content a { color: var(--blue); }

  @media (max-width: 700px) {
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .footer-inner { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem 1.25rem 1rem; }
    .footer-bottom { padding: 1rem 1.25rem; }
    details.legal-block summary,
    details.legal-block .legal-content { padding-left: 1.25rem; padding-right: 1.25rem; }
  }

  /* TELTONIKA DETAIL */
  .detail-intro {
    max-width: 900px; margin: 0 auto 2.5rem;
    background: var(--amber-light); border: 1px solid #F0D4A8;
    border-radius: var(--radius-lg); padding: 14px 18px;
    display: flex; align-items: center; gap: 14px;
  }
  .detail-intro-logo { font-size: 13px; font-weight: 500; color: var(--amber-dark); white-space: nowrap; font-family: 'JetBrains Mono', monospace; }
  .detail-intro p { font-size: 13px; color: var(--amber-dark); line-height: 1.5; }

  .steps-list { max-width: 900px; margin: 0 auto; counter-reset: step; }
  .step-item {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 16px 0; border-bottom: 1px solid var(--border);
  }
  .step-item:last-child { border-bottom: none; }
  .step-num {
    flex-shrink: 0; width: 32px; height: 32px;
    background: var(--blue-light); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 500; color: var(--blue-dark);
    font-family: 'JetBrains Mono', monospace;
  }
  .step-body h4 { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
  .step-body p { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

  .advantage-table { max-width: 900px; margin: 0 auto; width: 100%; border-collapse: collapse; font-size: 13px; }
  .advantage-table th { background: var(--blue-dark); color: #fff; padding: 10px 14px; text-align: left; font-weight: 500; font-size: 12px; }
  .advantage-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
  .advantage-table tr:last-child td { border-bottom: none; }
  .advantage-table tr:nth-child(even) td { background: var(--gray-100); }
  .advantage-table td:first-child { font-weight: 500; }

  .scenario-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; max-width: 900px; margin: 0 auto; }
  .scenario-card {
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 1.25rem; background: var(--bg);
  }
  .scenario-card h4 { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
  .scenario-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; font-family: 'JetBrains Mono', monospace; }
  .scenario-steps { list-style: none; padding: 0; margin-top: 10px; }
  .scenario-steps li {
    font-size: 12px; color: var(--text-muted); padding: 5px 0;
    border-bottom: 1px solid var(--border);
    display: flex; gap: 8px; align-items: flex-start;
  }
  .scenario-steps li:last-child { border-bottom: none; }
  .scenario-steps li::before {
    content: '→'; color: var(--blue); flex-shrink: 0; font-size: 11px; margin-top: 1px;
  }

  /* NETBIRD DETAIL */
  .nb-compat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; max-width: 900px; margin: 0 auto 2rem; }
  .nb-compat-card {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 1.1rem;
  }
  .nb-compat-card h4 { font-size: 13px; font-weight: 500; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
  .nb-compat-card p { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
  .nb-icon {
    width: 28px; height: 28px; border-radius: 6px;
    background: var(--teal-light); display: inline-flex;
    align-items: center; justify-content: center; flex-shrink: 0;
  }

  .nb-flow { max-width: 900px; margin: 0 auto; }
  .nb-flow-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 1.5rem; }
  .nb-flow-step {
    background: var(--teal-light); border-radius: var(--radius-lg);
    padding: 1rem; position: relative;
  }
  .nb-flow-step .step-n {
    font-size: 11px; font-weight: 500; color: var(--teal-dark);
    font-family: 'JetBrains Mono', monospace; margin-bottom: 6px;
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .nb-flow-step h4 { font-size: 14px; font-weight: 500; color: var(--teal-dark); margin-bottom: 4px; }
  .nb-flow-step p { font-size: 12px; color: var(--teal-dark); line-height: 1.5; }

  .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; max-width: 900px; margin: 0 auto; }
  .service-item {
    background: var(--gray-100); border-radius: var(--radius-lg);
    padding: 1rem;
  }
  .service-item h4 { font-size: 13px; font-weight: 500; margin-bottom: 5px; }
  .service-item p { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

  .section-divider {
    max-width: 900px; margin: 0 auto;
    border: none; border-top: 1px solid var(--border);
  }

  .photo-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px; max-width: 900px; margin: 2rem auto 0;
  }
  .photo-card {
    border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--border); background: var(--gray-100);
    transition: border-color .2s;
  }
  .photo-card:hover { border-color: var(--gray-400); }
  .photo-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
  .photo-card-body { padding: 12px 14px; }
  .photo-card-body h3 { font-size: 13px; font-weight: 500; margin-bottom: 3px; }
  .photo-card-body p { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

  .diagram-wrap {
    max-width: 900px; margin: 2rem auto 0;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    overflow: hidden; background: var(--gray-100);
  }
  .diagram-wrap svg { display: block; width: 100%; }
  .diagram-label {
    padding: 10px 16px; font-size: 12px; color: var(--text-muted);
    border-top: 1px solid var(--border); background: var(--bg);
    display: flex; align-items: center; gap: 6px;
  }

  @media (max-width: 600px) {
    nav { padding: 0.5rem 1rem; }
    section { padding: 3rem 1.25rem; }
    .hero { padding: 4rem 1.25rem 3rem; }
    .nav-logo img { height: 56px; }
    .footer-brand img { height: 64px; }
  }

  @media (min-width: 601px) and (max-width: 860px) {
    nav { padding: 0.5rem 1.5rem; }
    .nav-logo img { height: 80px; }
    .footer-brand img { height: 80px; }
  }

  @media (max-width: 860px) {
    nav {
      background: rgba(255,255,255,0.96);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .nav-burger { display: inline-flex; align-items: center; justify-content: center; }

    .nav-menu {
      position: fixed; inset: 0 0 0 auto;
      width: min(80vw, 340px); max-width: 100%;
      background: var(--bg);
      flex-direction: column; align-items: stretch; justify-content: flex-start;
      padding: 5rem 1.5rem 2rem;
      margin-left: 0;
      gap: 0;
      transform: translateX(100%);
      transition: transform .25s var(--ease-snap);
      box-shadow: -10px 0 30px -10px rgba(0,0,0,0.15);
      z-index: 200;
    }
    .nav-menu.open { transform: translateX(0); }

    .nav-menu .nav-links {
      flex-direction: column; align-items: flex-start; gap: 1.25rem;
      width: 100%;
    }
    .nav-menu .nav-links a { font-size: 16px; }

    .nav-menu .nav-cta { width: 100%; padding: 12px; margin-top: 1rem; }

    .nav-backdrop {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.4);
      z-index: 199;
    }
    .nav-backdrop:not([hidden]) { display: block; }
  }

  /* LANGUAGE SWITCHER */
  .lang-switcher {
    display: inline-flex; align-items: center; gap: 2px;
    margin-left: auto;
    margin-right: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
  }
  .lang-switcher a {
    color: var(--text-muted); text-decoration: none;
    padding: 4px 8px; border-radius: 4px;
    transition: color .15s, background .15s;
  }
  .lang-switcher a:hover { color: var(--ink); background: var(--gray-100); }
  .lang-switcher a[aria-current="page"] {
    color: var(--ink); font-weight: 600;
    background: var(--gray-100);
  }
  .lang-switcher .sep { color: var(--gray-300); font-size: 10px; }

  @media (max-width: 600px) {
    .lang-switcher { font-size: 12px; margin-right: 4px; gap: 0; }
    .lang-switcher a { padding: 3px 4px; }
    .lang-switcher .sep { display: none; }
  }

  /* UK locale serif fallback */
  html[lang="uk"] .serif,
  html[lang="uk"] .hero-title,
  html[lang="uk"] h2,
  html[lang="uk"] .section-header h2 {
    font-family: 'Fraunces', 'Instrument Serif', Georgia, serif;
  }

  /* ============================================================
     HERO COCKPIT WIDGET (Phase 2.1)
     Two glass cards in the right hero column: a small portrait
     photo top-left, and a larger telemetry panel bottom-right
     overlapping it. Live KPI jitter is driven by main.js.
     Always rendered on the dark hero gradient — fixed light text.
     ============================================================ */
  .hero-cockpit {
    position: relative;
    aspect-ratio: 5 / 4;
    width: 100%;
    max-width: 660px;
    margin: 0 auto;
    overflow: visible;
  }
  .cockpit-photo {
    position: absolute;
    top: 0; left: 0;
    width: 86%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow: 0 30px 70px -20px rgba(0,0,0,0.7);
    z-index: 1;
    background: #0B1F3A;
  }
  .cockpit-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    filter: contrast(1.05) saturate(0.95);
  }
  .cockpit-photo-tag {
    position: absolute;
    top: 10px; right: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; font-weight: 500;
    padding: 4px 8px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    border-radius: 4px;
    backdrop-filter: blur(6px);
    letter-spacing: 0.08em;
  }
  .cockpit-photo-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 14px 12px 10px;
    background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, transparent 100%);
    color: #fff;
  }
  .cockpit-photo-name {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.005em;
    margin-bottom: 2px;
  }
  .cockpit-photo-desc {
    font-size: 9.5px;
    color: rgba(255,255,255,0.65);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
    line-height: 1.4;
  }

  .cockpit-panel {
    position: absolute;
    bottom: -14%; right: -20%;
    width: 76%;
    background: rgba(8, 18, 36, 0.60);
    backdrop-filter: blur(24px) saturate(1.25);
    -webkit-backdrop-filter: blur(24px) saturate(1.25);
    border: 1px solid rgba(127,212,245,0.22);
    border-radius: var(--radius-lg);
    padding: 12px 14px 10px;
    box-shadow: 0 24px 60px -16px rgba(0,0,0,0.6);
    color: #fff;
    z-index: 2;
  }
  .cockpit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .cockpit-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #7FD4F5;
  }
  .cockpit-status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px #4ade80, 0 0 14px rgba(74,222,128,0.5);
    animation: cockpit-status-pulse 1.6s ease-in-out infinite;
  }
  @keyframes cockpit-status-pulse {
    0%, 100% { opacity: 1;   transform: scale(1);    }
    50%      { opacity: 0.55; transform: scale(0.85); }
  }
  .cockpit-uptime { color: rgba(255,255,255,0.55); }

  .cockpit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  .kpi {
    position: relative;
    padding: 10px 6px 9px;
    border-right: 1px solid rgba(255,255,255,0.06);
    border-top: 1px solid rgba(255,255,255,0.06);
    min-height: 76px;
  }
  .kpi:nth-child(4n) { border-right: none; }
  .kpi:nth-child(-n+4) { border-top: none; }
  .kpi-label {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px; font-weight: 500;
    color: rgba(255,255,255,0.50);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1.25;
    margin-bottom: 8px;
    padding-right: 12px; /* leave room for the dot */
  }
  .kpi-row {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
  }
  .kpi-num {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 22px; font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
    display: inline-block;
    transition: transform .2s var(--ease-spring);
  }
  .kpi-num-tick { transform: scale(1.07); }
  .kpi-unit {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.02em;
  }
  .kpi-dot {
    position: absolute;
    top: 11px; right: 8px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px #4ade80;
    animation: cockpit-status-pulse 2.4s ease-in-out infinite;
  }
  .kpi-cyan  .kpi-dot { background: #22d3ee; box-shadow: 0 0 6px #22d3ee; }
  .kpi-amber .kpi-dot { background: #fbbf24; box-shadow: 0 0 6px #fbbf24; animation-duration: 1.2s; }

  /* Mini oscilloscope strip */
  .cockpit-osc {
    width: 100%;
    height: 30px;
    margin-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 4px;
    display: block;
  }
  .cockpit-osc path {
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }
  .cockpit-osc .osc-wave {
    stroke: #22d3ee;
    stroke-dasharray: 4 4;
    filter: drop-shadow(0 0 3px rgba(34,211,238,0.6));
    animation: osc-flow 6s linear infinite;
  }
  .cockpit-osc .osc-square {
    stroke: rgba(127,212,245,0.55);
    stroke-dasharray: 2 3;
    animation: osc-flow 4s linear infinite;
  }
  @keyframes osc-flow {
    to { stroke-dashoffset: -200; }
  }

  /* Mobile cockpit: stack photo above panel, full width */
  @media (max-width: 860px) {
    .hero-cockpit {
      aspect-ratio: auto;
      max-width: 480px;
    }
    .cockpit-photo {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 3;
      margin-bottom: -32px;
    }
    .cockpit-panel {
      position: relative;
      width: 100%;
      padding-top: 48px;
    }
  }
  @media (max-width: 700px) {
    .cockpit-grid { grid-template-columns: repeat(2, 1fr); }
    .kpi:nth-child(4n)   { border-right: 1px solid rgba(255,255,255,0.06); }
    .kpi:nth-child(2n)   { border-right: none; }
    .kpi:nth-child(-n+4) { border-top: 1px solid rgba(255,255,255,0.06); }
    .kpi:nth-child(-n+2) { border-top: none; }
  }

  /* ============================================================
     TECH-STRIP — protocol chips moved out of hero (closes D14).
     Sits between hero and stats; full-width band.
     ============================================================ */
  .tech-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 1.1rem 2.5rem;
    background: var(--bg-sunken);
    border-bottom: 1px solid var(--border);
  }
  .tech-chip {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; font-weight: 500;
    padding: 6px 12px;
    border-radius: 100px;
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color .25s, background .25s, border-color .25s, transform .35s var(--ease-spring);
  }
  .tech-chip:hover {
    background: color-mix(in oklch, var(--cyan) 10%, var(--bg));
    border-color: var(--cyan);
    color: var(--cyan-text);
    transform: translateY(-1px);
  }
  @media (max-width: 600px) {
    .tech-strip { padding: 0.9rem 1.25rem; gap: 6px; }
    .tech-chip { font-size: 9.5px; padding: 5px 10px; }
  }
}

/* ============================================================
   @layer theme — dark-mode polish that light-dark() alone can't
   express (filter overrides on photos, body bg, nav glass alpha).
   These rules are scoped to dark color-scheme so light render
   stays byte-identical.
   ============================================================ */
@layer theme {
  body { background: var(--bg); color: var(--text); }

  /* Dark-mode photo readability — luminosity tilt to sit on dark surfaces. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      .hero-photo img { filter: contrast(1.02) saturate(0.92) brightness(0.92); }
      .about-bg-image { opacity: 0.14; filter: grayscale(0.55) contrast(1.05) brightness(0.85); }

      /* Glass nav — translucent against dark page bg */
      nav { background: oklch(13% 0.012 250 / 0.78); border-bottom-color: var(--border); }
      @media (max-width: 860px) {
        nav { background: oklch(13% 0.012 250 / 0.96); }
      }

      /* Featured-card secondary cyan adjusted for dark surface */
      .card.featured { border-color: oklch(40% 0.04 250); background: oklch(11% 0.012 250); }

      /* Footer surface */
      footer.site-footer { background: var(--bg-sunken); }
      details.legal-block { background: var(--bg-elev); }

      /* Comparison table dark overrides */
      table.ct td.ours-col { background: oklch(20% 0.04 255); }
      table.ct tr:hover td.ours-col { background: oklch(24% 0.05 255); }
      .yes  { color: oklch(80% 0.16 145); }
      .no   { color: oklch(72% 0.18  25); }
      .part { color: oklch(80% 0.14  70); }

      /* Tag border alphas re-tuned for dark */
      .tag-blue  { border-color: oklch(74% 0.13 255 / 0.30); }
      .tag-green { border-color: oklch(80% 0.16 145 / 0.30); }
      .tag-teal  { border-color: oklch(80% 0.12 180 / 0.30); }
      .tag-amber { border-color: oklch(82% 0.14  70 / 0.30); }
      .tag-cyan  { border-color: oklch(78% 0.14 224 / 0.30); }

      /* Misc tinted block borders */
      .compare-intro { border-color: oklch(74% 0.13 255 / 0.25); }
      .nb-banner { border-color: oklch(80% 0.12 180 / 0.30); }
      .detail-intro { border-color: oklch(82% 0.14 70 / 0.30); }
    }
  }

  /* logo.png + footer brand are black-on-transparent — invert in dark mode
     so the wordmark stays legible on the dark page background. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .nav-logo img,
    :root:not([data-theme="light"]) .footer-brand img {
      filter: invert(1) hue-rotate(180deg);
    }
  }
  [data-theme="dark"] .nav-logo img,
  [data-theme="dark"] .footer-brand img {
    filter: invert(1) hue-rotate(180deg);
  }

  /* Manual data-theme="dark" mirror (forced regardless of OS pref) */
  [data-theme="dark"] .hero-photo img { filter: contrast(1.02) saturate(0.92) brightness(0.92); }
  [data-theme="dark"] .about-bg-image { opacity: 0.14; filter: grayscale(0.55) contrast(1.05) brightness(0.85); }
  [data-theme="dark"] nav { background: oklch(13% 0.012 250 / 0.78); }
  @media (max-width: 860px) {
    [data-theme="dark"] nav { background: oklch(13% 0.012 250 / 0.96); }
  }
  [data-theme="dark"] .card.featured { border-color: oklch(40% 0.04 250); background: oklch(11% 0.012 250); }
  [data-theme="dark"] footer.site-footer { background: var(--bg-sunken); }
  [data-theme="dark"] details.legal-block { background: var(--bg-elev); }
  [data-theme="dark"] table.ct td.ours-col { background: oklch(20% 0.04 255); }
  [data-theme="dark"] table.ct tr:hover td.ours-col { background: oklch(24% 0.05 255); }
  [data-theme="dark"] .yes  { color: oklch(80% 0.16 145); }
  [data-theme="dark"] .no   { color: oklch(72% 0.18  25); }
  [data-theme="dark"] .part { color: oklch(80% 0.14  70); }
  [data-theme="dark"] .tag-blue  { border-color: oklch(74% 0.13 255 / 0.30); }
  [data-theme="dark"] .tag-green { border-color: oklch(80% 0.16 145 / 0.30); }
  [data-theme="dark"] .tag-teal  { border-color: oklch(80% 0.12 180 / 0.30); }
  [data-theme="dark"] .tag-amber { border-color: oklch(82% 0.14  70 / 0.30); }
  [data-theme="dark"] .tag-cyan  { border-color: oklch(78% 0.14 224 / 0.30); }
  [data-theme="dark"] .compare-intro { border-color: oklch(74% 0.13 255 / 0.25); }
  [data-theme="dark"] .nb-banner { border-color: oklch(80% 0.12 180 / 0.30); }
  [data-theme="dark"] .detail-intro { border-color: oklch(82% 0.14 70 / 0.30); }

  /* Theme toggle button (lives in nav between lang-switcher and burger) */
  .theme-toggle {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-muted);
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    margin-right: 10px;
    transition: color .2s, border-color .2s, background .2s, transform .2s var(--ease-spring);
  }
  .theme-toggle:hover { color: var(--ink); border-color: var(--border-strong); transform: rotate(15deg); }
  .theme-toggle svg { width: 16px; height: 16px; transition: opacity .25s, transform .35s var(--ease-spring); }
  .theme-toggle .icon-sun  { display: none; }
  .theme-toggle .icon-moon { display: block; }
  [data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
  [data-theme="dark"] .theme-toggle .icon-moon { display: none; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: block; }
    :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
  }
  @media (max-width: 600px) {
    .theme-toggle { width: 28px; height: 28px; margin-right: 4px; }
    .theme-toggle svg { width: 14px; height: 14px; }
  }
}

/* ============================================================
   @layer bgfx — site-wide thematic background.
   Layers (z-index inside .bg-fx wrapper):
     1. Schematic blueprint drift (very low alpha)
     2. Cursor halo (mouse-reactive radial)
     3. Aurora blob (dark-mode only)
   Section dividers (.section-divider-pulse) are inline, not in
   the fixed wrapper — they live between sections.
   ============================================================ */
@layer bgfx {
  .bg-fx {
    position: fixed; inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
  }

  /* Layer 1 — schematic dot grid + crosshair markers (CSS-only) */
  .bg-fx-schematic {
    position: absolute; inset: -10% -10% -10% -10%;
    background-image:
      radial-gradient(circle at 1px 1px, var(--text-muted) 1px, transparent 0),
      linear-gradient(transparent 23px, var(--border) 23px 24px, transparent 24px),
      linear-gradient(90deg, transparent 23px, var(--border) 23px 24px, transparent 24px);
    background-size: 24px 24px, 240px 240px, 240px 240px;
    opacity: light-dark(0.06, 0.10);
    transform: translate3d(0, var(--grid-shift), 0);
    will-change: transform;
  }

  /* Slow scroll-driven drift — pure CSS, no rAF */
  @supports (animation-timeline: scroll(root)) {
    .bg-fx-schematic {
      animation: bgfx-drift linear;
      animation-timeline: scroll(root);
    }
    @keyframes bgfx-drift {
      from { --grid-shift: 0px;    transform: translate3d(0, 0, 0); }
      to   { --grid-shift: -120px; transform: translate3d(0, -120px, 0); }
    }
  }

  /* Layer 2 — cursor-reactive halo (set --mx, --my from JS pointermove) */
  .bg-fx-halo {
    position: absolute; inset: 0;
    background:
      radial-gradient(
        circle 600px at calc(var(--mx, 50) * 1%) calc(var(--my, 30) * 1%),
        color-mix(in oklch, var(--cyan) 10%, transparent),
        transparent 60%
      );
    transition: background 0.6s var(--ease-out);
    mix-blend-mode: light-dark(multiply, screen);
    opacity: light-dark(0.5, 0.7);
  }

  /* Layer 3 — aurora blob (dark-mode-only ambient color smear) */
  .bg-fx-aurora {
    position: absolute;
    width: 60vmax; height: 60vmax;
    left: calc(var(--aurora-x) - 30vmax);
    top: calc(var(--aurora-y) - 30vmax);
    background:
      radial-gradient(circle, color-mix(in oklch, var(--blue) 70%, var(--cyan)) 0%, transparent 60%);
    filter: blur(80px);
    opacity: 0;
    transition: left 1.4s var(--ease-out), top 1.4s var(--ease-out), opacity .6s ease;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .bg-fx-aurora { opacity: 0.18; }
  }
  [data-theme="dark"] .bg-fx-aurora { opacity: 0.18; }

  /* Layer 4 — scanlines (dark-only) */
  .bg-fx-scanlines {
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(
      0deg,
      transparent 0 2px,
      rgba(0,0,0,0.015) 2px 3px
    );
    opacity: 0;
    pointer-events: none;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .bg-fx-scanlines { opacity: 1; }
  }
  [data-theme="dark"] .bg-fx-scanlines { opacity: 1; }

  /* Section-divider pulse (between sections — inline element) */
  .section-divider-pulse {
    position: relative;
    height: 1px;
    max-width: 1100px;
    margin: 0 auto;
    background: var(--border);
    overflow: visible;
  }
  .section-divider-pulse::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 6px; height: 5px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 12px 2px color-mix(in oklch, var(--cyan) 60%, transparent);
    animation: pulse-flow 8s linear infinite;
  }
  @keyframes pulse-flow {
    0%   { left: 0%;   opacity: 0; }
    8%   {             opacity: 1; }
    92%  {             opacity: 1; }
    100% { left: 100%; opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .bg-fx-schematic { animation: none !important; transform: none !important; }
    .bg-fx-halo, .bg-fx-aurora { display: none !important; }
    .section-divider-pulse::after { display: none !important; }
  }
}

/* ============================================================
   @layer motion-v2 — modern motion stack additions.
   Coexists with @layer base `.reveal`. New components opt in to
   `.reveal-v2` for scroll-driven entrance; old `.reveal` still
   works via main.js IntersectionObserver.
   ============================================================ */
@layer motion-v2 {
  /* Spring entrance for new section content */
  .reveal-v2 {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(2px);
    transition:
      opacity .9s var(--ease-spring),
      transform .9s var(--ease-spring),
      filter .9s var(--ease-spring);
  }
  .reveal-v2.in-view {
    opacity: 1; transform: translateY(0); filter: blur(0);
  }

  /* Scroll-driven view() upgrade where supported */
  @supports (animation-timeline: view()) {
    .reveal-v2 {
      opacity: 1; transform: none; filter: none;
      animation: reveal-v2-anim linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    @keyframes reveal-v2-anim {
      from { opacity: 0; transform: translateY(40px); filter: blur(2px); }
      to   { opacity: 1; transform: translateY(0);   filter: blur(0);   }
    }
  }

  /* Stagger via custom property --i (set inline or via JS) */
  .reveal-v2 { animation-delay: calc(var(--i, 0) * 60ms); transition-delay: calc(var(--i, 0) * 60ms); }

  /* Split-text helper (JS wraps each word in <span class="word">) */
  [data-split] .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.4em);
    transition: opacity .7s var(--ease-spring), transform .7s var(--ease-spring);
    transition-delay: calc(var(--i, 0) * 35ms);
  }
  [data-split].in-view .word { opacity: 1; transform: translateY(0); }
  @supports (animation-timeline: view()) {
    [data-split] .word {
      opacity: 1; transform: none;
      animation: word-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
      animation-delay: calc(var(--i, 0) * 35ms);
    }
    @keyframes word-rise {
      from { opacity: 0; transform: translateY(0.4em); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }

  /* Stat counter animatable values (ticked by main.js for now;
     Phase 2 cockpit uses @property --kpi-N driven by view() timeline). */
  .stat-num[data-target] { transition: transform .25s var(--ease-spring); }
  .stat-num[data-target].tick { transform: scaleY(1.06); }

  /* Magnetic CTA — JS sets --magnet-x/-y on pointermove inside a radius;
     CSS spring-eases to the offset and back. Composes with the .btn-primary
     translateY(-1px) hover. Touch / coarse pointer skips the JS so this
     transform stays at 0,0 — no layout drift on mobile. */
  .magnetic {
    --magnet-x: 0;
    --magnet-y: 0;
    transform: translate(calc(var(--magnet-x) * 1px), calc(var(--magnet-y) * 1px));
    transition: transform .45s var(--ease-spring), background .2s, border-color .2s, color .2s;
    will-change: transform;
  }
  .btn-primary.magnetic:hover {
    transform: translate(
      calc(var(--magnet-x) * 1px),
      calc(var(--magnet-y) * 1px - 1px)
    );
  }

  /* Cursor-light overlay — opt-in via .has-cursor-light */
  .has-cursor-light { position: relative; isolation: isolate; }
  .has-cursor-light::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(
      circle 200px at calc(var(--mx, 50) * 1%) calc(var(--my, 50) * 1%),
      color-mix(in oklch, var(--cyan) 14%, transparent),
      transparent 70%
    );
    opacity: 0;
    transition: opacity .25s var(--ease-out);
    pointer-events: none;
    z-index: 0;
  }
  .has-cursor-light:hover::before { opacity: 1; }
  .has-cursor-light > * { position: relative; z-index: 1; }

  /* Logo extension — periodic ripple from logo center */
  .logo-fx-ripple {
    position: absolute; left: 50%; top: 50%;
    width: 4px; height: 4px;
    border-radius: 50%;
    border: 1px solid var(--cyan);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    animation: logo-ripple 5s ease-out infinite;
  }
  @keyframes logo-ripple {
    0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0;    }
    10%  {                                               opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(20);  opacity: 0;    }
  }

  /* Marquee row (used by trust-block partner logos in Phase 2) */
  .marquee {
    display: flex;
    overflow: hidden;
    mask: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  .marquee-track {
    display: flex; gap: 3rem;
    animation: marquee-scroll 28s linear infinite;
    flex-shrink: 0;
    padding-right: 3rem;
  }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  @keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
  }

  /* View transition on theme toggle (radial reveal from button origin) */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.55s;
  }
  ::view-transition-new(root) {
    animation-name: theme-reveal;
    animation-timing-function: var(--ease-out);
  }
  @keyframes theme-reveal {
    from { clip-path: circle(0% at var(--toggle-x, 50%) var(--toggle-y, 50%)); }
    to   { clip-path: circle(150% at var(--toggle-x, 50%) var(--toggle-y, 50%)); }
  }

  /* Reduced motion safety net — explicit (the wildcard rule in @layer base
     handles transitions/animations, but we kill animation-timeline too). */
  @media (prefers-reduced-motion: reduce) {
    .reveal-v2,
    [data-split] .word {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
    }
    .marquee-track { animation: none !important; }
    .logo-fx-ripple { display: none !important; }
    .has-cursor-light::before { display: none !important; }
  }
}

/* ============================================================
   @layer utilities — reusable single-purpose helpers
   ============================================================ */
@layer utilities {
  .visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .text-balance { text-wrap: balance; }
}

/* ============================================================
   @layer print — strip chrome, force light, expand details
   ============================================================ */
@layer print {
  @media print {
    .bg-fx, .section-divider-pulse, .theme-toggle { display: none !important; }

    nav, .nav-burger, .nav-cta, .hero-btns, .lang-switcher,
    .skip-link, .nav-backdrop,
    .cta-section .contact-form, .cta-section .contact-chips,
    details.legal-block summary,
    footer .footer-col:nth-child(3) { display: none !important; }

    body, .hero-wrap, section.dark, .about-bg, .cta-section,
    .stats-bar, footer.site-footer {
      background: #fff !important;
      color: #000 !important;
    }
    .hero-wrap *, .cta-section *, .about-bg *,
    .hero-title, .hero-lede, .hero-eyebrow {
      color: #000 !important;
    }

    details > div, details > p, details > ul, details > ol,
    details > table, details > section, details > article { display: block !important; }
    details > summary { display: none !important; }

    a[href^="http"]::after,
    a[href^="mailto:"]::after {
      content: " (" attr(href) ")";
      font-size: 10px; color: #666; word-break: break-all;
    }

    .card, .photo-card, .tl-item { break-inside: avoid; }

    h1 { font-size: 24pt !important; }
    h2 { font-size: 18pt !important; }
  }
}