/* =========================================================================
   Eurostate Strategy — Editorial Design System
   Strict grid · One voice · Restrained palette · Calm interactions
   ========================================================================= */

@layer reset, tokens, base, layout, components, motion, utilities;

/* ---------- Reset --------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body { min-height: 100svh; }
  img, svg, canvas, video { display: block; max-width: 100%; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  h1, h2, h3, h4, p { margin: 0; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 4px;
    transition: outline-offset 120ms var(--ease-out);
  }
  :focus:not(:focus-visible) { outline: none; }
}

/* ---------- Skip link + sr-only (a11y essentials) ----------------------- */
@layer base {
  .skip-link {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.7rem 1.1rem;
    background: var(--accent);
    color: var(--bg);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0 0 var(--r-sm) 0;
    transform: translateY(-110%);
    transition: transform 200ms var(--ease-out);
    z-index: 200;
  }
  .skip-link:focus,
  .skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid var(--bg);
    outline-offset: -4px;
  }
}

/* ---------- Tokens -------------------------------------------------------- */
@layer tokens {
  :root {
    color-scheme: dark;

    /* Neutrals — warm cool blacks */
    --bg:          #06080a;
    --surface-1:   #0b0e10;
    --surface-2:   #11151a;
    --line:        rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);

    --text:    #f1f3f5;
    --muted:   #9aa3ad;
    --soft:    #5d6770;

    /* Palette — proportional 60/30/10 */
    --accent:        #64ffda;            /* mint — primary, 60% */
    --accent-strong: #00d4b0;
    --accent-2:      #d4a373;            /* warm sand — secondary, 30% */
    --accent-3:      #8b94d6;            /* cool indigo — tertiary, 10% */
    --accent-glow:   rgba(100, 255, 218, 0.22);
    --accent-soft:   rgba(100, 255, 218, 0.10);

    /* Type — single voice */
    --font-display: "Google Sans Flex", "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:    "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

    /* Type scale — fluid */
    --fs-mono:    0.72rem;
    --fs-12:      0.78rem;
    --fs-14:      0.86rem;
    --fs-16:      0.98rem;
    --fs-18:      1.08rem;
    --fs-22:      clamp(1.16rem, 1.04rem + 0.5vw, 1.36rem);
    --fs-28:      clamp(1.4rem, 1.2rem + 0.8vw, 1.7rem);
    --fs-36:      clamp(1.7rem, 1.36rem + 1.4vw, 2.4rem);
    --fs-48:      clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
    --fs-64:      clamp(2.8rem, 1.8rem + 4vw, 4.6rem);
    --fs-display: clamp(3.2rem, 2rem + 5.4vw, 6.4rem);

    /* Spacing scale */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.5rem;
    --sp-6:  2rem;
    --sp-7:  3rem;
    --sp-8:  4.5rem;
    --sp-9:  7rem;
    --sp-10: 10rem;

    /* Radii */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 14px;
    --r-xl: 22px;
    --r-pill: 999px;

    /* Easing */
    --ease-out:  cubic-bezier(0.19, 1, 0.22, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layout */
    --max:    1240px;
    --gutter: clamp(1rem, 4vw, 2.6rem);
    --header-h: 76px;

    --scroll-progress: 0;
  }

  :root[data-theme="light"] {
    color-scheme: light;
    --bg:          #fafaf8;
    --surface-1:   #ffffff;
    --surface-2:   #f3f4f1;
    --line:        rgba(10, 12, 14, 0.10);
    --line-strong: rgba(10, 12, 14, 0.18);
    --text:    #0c0e10;
    --muted:   #5a6470;
    --soft:    #8a939c;
    --accent:        #00a888;
    --accent-strong: #007e66;
    --accent-2:      #b07a3c;
    --accent-3:      #545fb2;
    --accent-glow:   rgba(0, 168, 136, 0.18);
    --accent-soft:   rgba(0, 168, 136, 0.08);
  }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
      color-scheme: light;
      --bg:          #fafaf8;
      --surface-1:   #ffffff;
      --surface-2:   #f3f4f1;
      --line:        rgba(10, 12, 14, 0.10);
      --line-strong: rgba(10, 12, 14, 0.18);
      --text:    #0c0e10;
      --muted:   #5a6470;
      --soft:    #8a939c;
      --accent:        #00a888;
      --accent-strong: #007e66;
      --accent-2:      #b07a3c;
      --accent-3:      #545fb2;
      --accent-glow:   rgba(0, 168, 136, 0.18);
      --accent-soft:   rgba(0, 168, 136, 0.08);
    }
  }
}

/* ---------- Base ---------------------------------------------------------- */
@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    background: var(--bg);
    scroll-behavior: smooth;
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }
  body {
    color: var(--text);
    font-family: var(--font-display);
    font-size: var(--fs-16);
    line-height: 1.55;
    font-variation-settings: "wdth" 100, "opsz" 18;
    /* Smoother grayscale rendering on macOS, kerning + ligatures on */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern", "liga", "calt";
    background: var(--bg);
    transition: background-color 300ms var(--ease-out), color 200ms var(--ease-out);
  }
  /* Tabular figures for stats / readouts so digits don't shift width */
  .tabular,
  dd, dt,
  .hero-meta,
  .hero-footnote,
  [class*="readout"] b,
  [class*="readout"] dd,
  .closing .kicker,
  time {
    font-feature-settings: "tnum" 1, "kern" 1;
    font-variant-numeric: tabular-nums;
  }

  ::selection { background: var(--accent-soft); color: var(--text); }

  h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--text);
    font-weight: 450;
    letter-spacing: -0.026em;
    line-height: 1.04;
  }
  h1 {
    font-size: var(--fs-display);
    font-variation-settings: "wdth" 100, "opsz" 144;
    letter-spacing: -0.038em;
    line-height: 0.98;
  }
  h2 {
    font-size: var(--fs-64);
    font-variation-settings: "wdth" 100, "opsz" 72;
    letter-spacing: -0.028em;
    line-height: 1.02;
  }
  h3 {
    font-size: var(--fs-22);
    font-weight: 500;
    letter-spacing: -0.014em;
    line-height: 1.18;
  }
  p {
    font-size: var(--fs-16);
    line-height: 1.65;
    color: var(--muted);
    font-variation-settings: "wdth" 100, "opsz" 17;
  }

  /* Scroll progress — single hairline */
  .progress-bar {
    position: fixed;
    inset: 0 0 auto 0;
    height: 1px;
    z-index: 100;
    background: var(--line);
    pointer-events: none;
  }
  .progress-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), transparent 90%);
    transform: scaleX(var(--scroll-progress, 0));
    transform-origin: 0 0;
  }
}

/* ---------- Layout helpers ----------------------------------------------- */
@layer layout {
  .container {
    width: min(var(--max), calc(100% - var(--gutter) * 2));
    margin-inline: auto;
  }
  .section {
    padding-block: clamp(5rem, 12vw, 10rem);
    content-visibility: auto;
    contain-intrinsic-size: 800px;
  }
  .section + .section { border-top: 1px solid var(--line); }

  /* Editorial grid — kicker | content | meta */
  .editorial {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  @media (max-width: 860px) {
    .editorial { grid-template-columns: 1fr; gap: var(--sp-5); }
  }

  .editorial-aside {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
  @media (max-width: 860px) { .editorial-aside { position: static; } }

  .lede {
    max-width: 60ch;
    font-size: var(--fs-22);
    line-height: 1.5;
    color: var(--text);
    font-variation-settings: "wdth" 100, "opsz" 24;
    font-weight: 400;
  }
  .lede + .lede { margin-top: var(--sp-4); color: var(--muted); }
}

/* ---------- Header ------------------------------------------------------- */
@layer components {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: var(--header-h);
    padding-inline: var(--gutter);
    background: color-mix(in oklab, var(--bg) 80%, transparent);
    backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid transparent;
    transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
  }
  .site-header.scrolled {
    border-color: var(--line);
    background: color-mix(in oklab, var(--bg) 92%, transparent);
  }

  .brand { display: inline-flex; align-items: center; gap: var(--sp-3); }
  .brand-mark {
    width: 28px; height: 28px;
    border-radius: 6px;
    background: var(--accent);
    color: var(--bg);
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: -0.04em;
  }
  .brand strong {
    display: block;
    font-size: 0.96rem;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .brand small { display: none; }

  .site-nav { display: flex; align-items: center; gap: var(--sp-1); }
  .site-nav a {
    padding: 0.5rem 0.9rem;
    font-size: 0.86rem;
    font-weight: 450;
    color: var(--muted);
    border-radius: var(--r-pill);
    transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out);
  }
  .site-nav a:hover { color: var(--text); }
  .site-nav a.active {
    color: var(--text);
    background: var(--surface-1);
  }

  .header-tools { display: flex; align-items: center; gap: var(--sp-3); }

  .theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 36px; height: 36px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--text);
    transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
  }
  .theme-toggle:hover { border-color: var(--line-strong); background: var(--surface-1); }
  .theme-toggle svg { width: 16px; height: 16px; }
  .theme-toggle .icon-sun  { display: none; }
  .theme-toggle .icon-moon { display: block; }
  :root[data-theme="light"] .theme-toggle .icon-sun  { display: block; }
  :root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

  /* Hamburger toggle (visible only on narrow viewports) */
  .nav-toggle {
    display: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 200ms var(--ease-out);
  }
  .nav-toggle:hover { border-color: var(--accent); }
  .nav-toggle .nav-toggle-bars {
    position: relative;
    width: 18px; height: 2px;
    background: currentColor;
    transition: background 160ms var(--ease-out);
  }
  .nav-toggle .nav-toggle-bars::before,
  .nav-toggle .nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0; width: 18px; height: 2px;
    background: currentColor;
    transition: transform 220ms var(--ease-out);
  }
  .nav-toggle .nav-toggle-bars::before { top: -6px; }
  .nav-toggle .nav-toggle-bars::after  { top:  6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

  @media (max-width: 860px) {
    .site-nav {
      position: fixed;
      inset: var(--header-h) 0 auto 0;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 0;
      padding: var(--sp-5) var(--gutter);
      background: color-mix(in oklab, var(--bg) 96%, transparent);
      backdrop-filter: blur(24px) saturate(160%);
      border-radius: 0;
      border: 0;
      border-top: 1px solid var(--line);
      transform: translateY(-110%);
      opacity: 0;
      visibility: hidden;
      transition:
        transform 280ms var(--ease-out),
        opacity 200ms var(--ease-out),
        visibility 0s 280ms;
    }
    .site-nav.is-open {
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
      transition:
        transform 280ms var(--ease-out),
        opacity 200ms var(--ease-out);
    }
    .site-nav a {
      padding: 1rem 1.2rem;
      font-size: 1rem;
      border-bottom: 1px solid var(--line);
      border-radius: 0;
      width: 100%;
    }
    .site-nav a:last-child { border-bottom: 0; }
    .site-nav a.active { background: var(--accent-soft); }
    .nav-toggle { display: inline-grid; }
  }

  /* Buttons */
  .btn {
    /* Touch-target floor (Apple HIG 44pt / Material 48dp) */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.8rem 1.3rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
      border-color 200ms var(--ease-out),
      background-color 200ms var(--ease-out),
      transform 160ms var(--ease-out),
      box-shadow 200ms var(--ease-out);
  }
  .btn:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-1px);
  }
  .btn:active { transform: translateY(0) scale(0.98); transition-duration: 80ms; }
  .btn:disabled,
  .btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
  }
  .btn-primary {
    /* Subtle linear gradient + a flowing sheen on hover */
    background:
      linear-gradient(120deg, var(--accent) 0%, #9ee6df 50%, var(--accent) 100%);
    background-size: 220% 100%;
    background-position: 0% 50%;
    color: var(--bg);
    border-color: var(--accent);
    box-shadow: 0 0 0 0 transparent;
    transition:
      background-position 600ms var(--ease-out),
      transform 200ms var(--ease-out),
      box-shadow 280ms var(--ease-out),
      filter 200ms var(--ease-out);
  }
  .btn-primary:hover {
    background-position: 100% 50%;
    border-color: var(--accent-strong);
    transform: translateY(-2px);
    box-shadow:
      0 14px 32px -14px var(--accent-glow),
      0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent);
    filter: brightness(1.05);
  }
  .btn-primary:active { transform: translateY(0) scale(0.98); }
  .btn .arrow {
    display: inline-block;
    transition: transform 200ms var(--ease-out);
  }
  .btn:hover .arrow { transform: translateX(3px); }

  /* Site-nav links — touch-friendly + smooth state */
  .site-nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ---------- Section heading meta (kicker + index) ------------------------ */
@layer components {
  .kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    font-weight: 500;
    color: var(--accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .kicker::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
  }

  .section-number {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    color: var(--soft);
    letter-spacing: 0.08em;
  }
}

/* ---------- Hero --------------------------------------------------------- */
@layer components {
  .hero {
    position: relative;
    padding-block: clamp(5rem, 12vw, 10rem) clamp(4rem, 10vw, 8rem);
    isolation: isolate;
    overflow: hidden;
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(60% 40% at 50% 0%, var(--accent-soft) 0%, transparent 60%);
    pointer-events: none;
  }
  .hero-canvas {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    opacity: 0.35;
  }
  .hero-content {
    width: min(var(--max), calc(100% - var(--gutter) * 2));
    margin: 0 auto;
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
  }
  .hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    align-items: center;
    justify-content: space-between;
    color: var(--muted);
    font-size: var(--fs-12);
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .hero-meta > div { display: inline-flex; align-items: center; gap: var(--sp-2); }
  .hero-meta .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
  }

  .hero h1 {
    max-width: 18ch;
    /* Larger, more cinematic display size */
    font-size: clamp(3rem, 7vw, 7.2rem);
    line-height: 0.94;
    letter-spacing: -0.04em;
  }
  .hero h1 .accent {
    /* Animated mint -> cyan -> mint gradient flowing across the word */
    background:
      linear-gradient(
        90deg,
        var(--accent) 0%,
        #9ee6df 25%,
        #c9f5ee 50%,
        #9ee6df 75%,
        var(--accent) 100%
      );
    background-size: 220% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-style: normal;
    animation: heroAccentShift 9s ease-in-out infinite;
  }
  @keyframes heroAccentShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
  }
  /* Hero accent gradient stays alive under reduced-motion — it's a
     color sweep, not vestibular motion. iOS Low Power Mode users
     keep the brand shimmer. */

  .hero-deck {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: end;
  }
  @media (max-width: 860px) { .hero-deck { grid-template-columns: 1fr; } }

  .hero-lede {
    max-width: 56ch;
    font-size: var(--fs-22);
    line-height: 1.45;
    color: var(--muted);
    font-variation-settings: "wdth" 100, "opsz" 24;
  }
  .hero-actions {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    align-items: center;
  }

  .hero-footnote {
    border-top: 1px solid var(--line);
    padding-top: var(--sp-5);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
  }
  @media (max-width: 640px) { .hero-footnote { grid-template-columns: 1fr; } }
  .hero-footnote dt {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    color: var(--soft);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--sp-2);
  }
  .hero-footnote dd {
    margin: 0;
    color: var(--text);
    font-size: var(--fs-16);
    font-weight: 450;
  }
}

/* ---------- Capabilities / Engine — clean rows -------------------------- */
@layer components {
  .row-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
    margin-top: clamp(2rem, 5vw, 4rem);
  }
  @media (max-width: 740px) { .row-grid { grid-template-columns: 1fr; } }

  .row-item {
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.5rem) 0;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--sp-5);
  }
  .row-item:nth-child(2n) { padding-left: clamp(1.5rem, 3vw, 2rem); border-left: 1px solid var(--line); padding-right: 0; }
  @media (max-width: 740px) {
    .row-item, .row-item:nth-child(2n) {
      padding-inline: 0;
      border-left: 0;
    }
  }

  .row-item-num {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    color: var(--accent);
    letter-spacing: 0.08em;
    padding-top: 0.3em;
  }
  .row-item h3 { margin-bottom: var(--sp-3); }
  .row-item p  { max-width: 50ch; font-size: var(--fs-16); }
  .row-item ul { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); }
  .row-item li {
    color: var(--muted);
    font-size: var(--fs-14);
    padding-left: 1rem;
    position: relative;
  }
  .row-item li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.6em;
    width: 8px; height: 1px;
    background: var(--accent);
  }
}

/* ---------- Timeline ----------------------------------------------------- */
@layer components {
  .timeline {
    margin-top: clamp(2rem, 5vw, 4rem);
    border-top: 1px solid var(--line);
  }
  .timeline-step {
    display: grid;
    grid-template-columns: 100px 1fr 1fr;
    gap: clamp(1rem, 3vw, 3rem);
    padding-block: clamp(1.5rem, 3vw, 2.5rem);
    border-bottom: 1px solid var(--line);
    align-items: baseline;
    transition: background-color 240ms var(--ease-out);
  }
  .timeline-step:hover { background: var(--surface-1); }
  .timeline-step .step-num {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    color: var(--accent);
    letter-spacing: 0.08em;
  }
  .timeline-step h3 {
    font-size: var(--fs-36);
    font-weight: 400;
    letter-spacing: -0.022em;
  }
  .timeline-step p { font-size: var(--fs-16); max-width: 48ch; }
  @media (max-width: 740px) {
    .timeline-step { grid-template-columns: 1fr; gap: var(--sp-3); }
  }
}

/* ---------- Architecture board ----------------------------------------- */
@layer components {
  .architecture-switcher {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin-top: clamp(2rem, 5vw, 3rem);
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface-1);
  }
  .architecture-switcher button {
    padding: 0.55rem 1rem;
    border-radius: var(--r-pill);
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 450;
    transition: color 200ms var(--ease-out), background-color 200ms var(--ease-out);
  }
  .architecture-switcher button:hover { color: var(--text); }
  .architecture-switcher button.active {
    color: var(--bg);
    background: var(--accent);
  }

  .system-board {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    margin-top: clamp(2rem, 5vw, 3rem);
    align-items: center;
  }
  @media (max-width: 860px) { .system-board { grid-template-columns: 1fr; } }

  .system-stage {
    position: relative;
    aspect-ratio: 1 / 1;
    min-height: clamp(360px, 50vw, 560px);
    max-height: 620px;
    /* Circular clip moved to the canvas itself so .system-meta text in
       the corners is no longer hidden by the round overflow:hidden. */
  }
  .system-stage canvas {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.65) 100%),
      #04060a;
  }

  .system-meta {
    position: absolute;
    left: var(--sp-5);
    top: var(--sp-5);
    z-index: 2;
    max-width: 280px;
  }
  .system-meta .meta-label {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    color: var(--soft);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .system-meta strong {
    display: block;
    margin-top: var(--sp-2);
    font-size: var(--fs-22);
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.014em;
  }
  .system-meta small {
    display: block;
    margin-top: var(--sp-2);
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.5;
  }

  .system-readout {
    position: absolute;
    left: var(--sp-5);
    bottom: var(--sp-5);
    right: var(--sp-5);
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2) var(--sp-5);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--muted);
  }
  .system-readout > span { display: inline-flex; align-items: center; gap: 6px; }
  .system-readout .key { color: var(--soft); letter-spacing: 0.06em; }

  .signal-panel {
    padding: 0;
  }
  .signal-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--line);
  }
  .signal-panel-header span {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    color: var(--soft);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .signal-panel-header strong {
    color: var(--text);
    font-weight: 450;
    font-size: 0.96rem;
  }
  .signal-row { display: grid; gap: 6px; margin-top: var(--sp-4); }
  .signal-row .signal-meta {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 0.84rem;
  }
  .signal-row .signal-meta b {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--text);
    font-size: 0.78rem;
  }
  .signal-row > div {
    height: 2px;
    background: var(--line);
    overflow: hidden;
  }
  .signal-row i {
    display: block;
    height: 100%;
    background: var(--accent);
    transform: scaleX(var(--w, 0.6));
    transform-origin: left;
    transition: transform 600ms var(--ease-out);
  }
  .signal-row.active i, .signal-row:hover i { transform: scaleX(var(--w, 0.6)) translateX(0); }

  .terminal-feed {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
    display: grid;
    gap: var(--sp-2);
  }
  .terminal-feed p {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.5;
  }
  .terminal-feed span { color: var(--accent); margin-right: 6px; }
}

/* ---------- Portfolio ---------------------------------------------------- */
@layer components {
  .portfolio-grid {
    margin-top: clamp(2rem, 5vw, 4rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  @media (max-width: 740px) { .portfolio-grid { grid-template-columns: 1fr; } }
  .portfolio-card {
    position: relative;
    padding: clamp(2rem, 4vw, 3rem);
    border-right: 1px solid var(--line);
    cursor: pointer;
    transition:
      background-color 320ms var(--ease-out),
      transform 320ms var(--ease-out),
      box-shadow 320ms var(--ease-out);
    display: grid;
    gap: var(--sp-4);
    align-content: start;
    outline: none;
    overflow: hidden;
  }
  /* Animated accent rail at top of card on hover */
  .portfolio-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    transform: translateX(-100%);
    transition: transform 600ms var(--ease-out);
  }
  .portfolio-card:hover::before,
  .portfolio-card.is-active::before {
    transform: translateX(0);
  }
  .portfolio-card:last-child { border-right: 0; }
  @media (max-width: 740px) {
    .portfolio-card { border-right: 0; border-bottom: 1px solid var(--line); }
    .portfolio-card:last-child { border-bottom: 0; }
  }
  .portfolio-card:hover, .portfolio-card.is-active, .portfolio-card:focus-visible {
    background: var(--surface-1);
    transform: translateY(-4px);
    box-shadow: 0 24px 48px -28px var(--accent-glow);
  }
  .portfolio-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--soft);
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .portfolio-card-top strong { color: var(--accent); font-weight: 500; }
  .portfolio-card h3 {
    font-size: var(--fs-48);
    font-weight: 400;
    letter-spacing: -0.026em;
    line-height: 1;
  }
  .portfolio-card p { font-size: var(--fs-16); max-width: 44ch; }
  .portfolio-card .tag-row {
    display: flex; gap: 6px; flex-wrap: wrap;
  }
  .portfolio-card .tag-row span {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--muted);
    font-size: 0.74rem;
  }

  .portfolio-detail {
    margin-top: clamp(2rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: baseline;
  }
  @media (max-width: 740px) { .portfolio-detail { grid-template-columns: 1fr; } }
  .portfolio-detail dl {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
  }
  @media (max-width: 640px) { .portfolio-detail dl { grid-template-columns: 1fr; } }
  .portfolio-detail dt {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    color: var(--soft);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--sp-2);
  }
  .portfolio-detail dd { margin: 0; color: var(--text); font-size: var(--fs-16); }
}

/* ---------- Closing / Statement ----------------------------------------- */
@layer components {
  .statement {
    margin-top: clamp(2rem, 5vw, 4rem);
    padding: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface-1);
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: end;
  }
  @media (max-width: 860px) { .statement { grid-template-columns: 1fr; align-items: start; } }
  .statement h2 { font-size: var(--fs-48); }

  .closing {
    text-align: left;
    max-width: 720px;
  }
  .closing h2 {
    margin-top: var(--sp-5);
    font-size: var(--fs-64);
    max-width: 18ch;
  }
  .closing p { margin-top: var(--sp-5); font-size: var(--fs-18); }
}

/* ---------- Footer ------------------------------------------------------- */
@layer components {
  .site-footer {
    width: min(var(--max), calc(100% - var(--gutter) * 2));
    margin: 0 auto;
    padding-block: var(--sp-7) var(--sp-8);
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-4);
    color: var(--soft);
    font-size: 0.84rem;
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
}

/* ---------- Reveal ------------------------------------------------------- */
@layer motion {
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  }
  .reveal.is-visible { opacity: 1; transform: none; }

  /* Stronger section-level reveal — applied automatically to every
     <section class="section ..."> via JS at runtime. Subtle but visible
     fade + lift as each section enters the viewport. */
  .section-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
    will-change: opacity, transform;
  }
  .section-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  /* Stagger child elements inside revealed sections for cinematic feel */
  .section-reveal > * { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
  @media (prefers-reduced-motion: reduce) {
    .section-reveal { opacity: 1; transform: none; transition: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    /* No global wildcard kill — iOS Low Power Mode forces this media
       query, and the previous "animation-duration: 0.001ms !important"
       reset was nuking the marquee, hero accent gradient, hub pulses,
       arcs, etc. We now disable only the truly vestibular triggers
       (auto-zooming Ken Burns, scrolly parallax transform) in their
       own scoped @media blocks below. Ambient color / opacity / wave
       animations stay alive.

       .reveal entrance still snaps in — it's an opacity move on first
       view, not a continuous animation. */
    .reveal { opacity: 1; transform: none; transition: none; }
  }
}

/* ---------- Utilities ---------------------------------------------------- */
@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
  }
}

/* =========================================================================
   PILLAR PAGES — Data Centers + Waste-to-Energy
   ========================================================================= */
@layer components {
  /* Integrated-stack section on homepage */
  .stack-grid {
    margin-top: clamp(2rem, 5vw, 3rem);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  @media (max-width: 860px) { .stack-grid { grid-template-columns: 1fr; } }
  .stack-cell {
    position: relative;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    text-decoration: none;
    color: inherit;
    transition:
      background-color 320ms var(--ease-out),
      transform 320ms var(--ease-out),
      box-shadow 320ms var(--ease-out);
    min-height: 280px;
    overflow: hidden;
  }
  .stack-cell::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    transform: translateX(-100%);
    transition: transform 600ms var(--ease-out);
  }
  .stack-cell:hover::before { transform: translateX(0); }
  .stack-cell:last-child { border-right: 0; }
  @media (max-width: 860px) {
    .stack-cell { border-right: 0; border-bottom: 1px solid var(--line); }
    .stack-cell:last-child { border-bottom: 0; }
  }
  .stack-cell:hover {
    background: var(--surface-1);
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -28px var(--accent-glow);
  }
  .stack-cell .pillar-num {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    color: var(--accent);
    letter-spacing: 0.08em;
  }
  .stack-cell h3 {
    font-size: var(--fs-28);
    font-weight: 450;
    letter-spacing: -0.018em;
  }
  .stack-cell p { font-size: 0.94rem; max-width: 38ch; }
  .stack-cell .pillar-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .stack-cell .pillar-link::after {
    content: "→";
    transition: transform 240ms var(--ease-out);
  }
  .stack-cell:hover .pillar-link::after { transform: translateX(4px); }

  /* === Data Center slide — full-bleed, edge-to-edge === */
  .dc-stage {
    position: relative;
    margin-top: clamp(2rem, 5vw, 3rem);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    aspect-ratio: 2 / 1;
    max-height: none;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%, #000 7%, #000 93%, transparent 100%
    );
            mask-image: linear-gradient(
      to bottom,
      transparent 0%, #000 7%, #000 93%, transparent 100%
    );
  }
  .dc-stage svg { width: 100%; height: 100%; display: block; min-height: 520px; }
  .dc-stage canvas {
    width: 100%; height: 100%; display: block; min-height: 520px;
    cursor: grab;
  }
  .dc-stage canvas:active { cursor: grabbing; }
  .dc-stage .dc-piece { transition: filter 240ms var(--ease-out); }
  .dc-stage .dc-piece:hover { filter: drop-shadow(0 0 22px var(--accent-glow)); }

  .dc-floor-grid { stroke: var(--line); }
  .dc-rack {
    cursor: pointer;
    transition: filter 220ms var(--ease-out), transform 220ms var(--ease-out);
    transform-origin: center;
  }
  .dc-rack .rack-top    { fill: rgba(20, 38, 28, 0.92); stroke: var(--line-strong); stroke-width: 0.8; }
  .dc-rack .rack-face-l { fill: rgba(10, 22, 16, 0.94); stroke: var(--line-strong); stroke-width: 0.8; }
  .dc-rack .rack-face-r { fill: rgba(6, 14, 10, 0.96); stroke: var(--line-strong); stroke-width: 0.8; }
  .dc-rack .rack-led    {
    fill: var(--accent);
    opacity: 0.6;
    transition: opacity 200ms var(--ease-out);
  }
  .dc-rack:hover { filter: drop-shadow(0 0 16px var(--accent-glow)); }
  .dc-rack:hover .rack-top    { fill: rgba(40, 80, 60, 0.95); }
  .dc-rack:hover .rack-face-l { fill: rgba(22, 48, 34, 0.95); }
  .dc-rack:hover .rack-face-r { fill: rgba(14, 32, 22, 0.95); }
  .dc-rack:hover .rack-led    { opacity: 1; fill: var(--accent); }
  .dc-rack.is-pulsing .rack-led {
    animation: ledBlink 1.6s var(--ease-out) infinite;
  }
  @keyframes ledBlink {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 0.25; }
  }

  .dc-readout {
    margin-top: var(--sp-5);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
  }
  @media (max-width: 640px) { .dc-readout { grid-template-columns: 1fr 1fr; } }
  .dc-readout > div {
    padding: var(--sp-4) 0;
    border-top: 1px solid var(--line);
  }
  .dc-readout dt { color: var(--soft); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--sp-2); }
  .dc-readout dd { color: var(--text); font-size: 1.2rem; font-feature-settings: "tnum"; margin: 0; }
  .dc-readout dd b { color: var(--accent); font-weight: 500; }

  /* === Waste-to-Energy isometric === */
  .we-stage {
    margin-top: clamp(2rem, 5vw, 3rem);
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 720px;
    overflow: visible;
    position: relative;
  }
  .we-stage svg { width: 100%; height: 100%; display: block; overflow: visible; }
  .we-stage canvas {
    width: 100%; height: 100%; display: block;
    cursor: grab;
  }
  .we-stage canvas:active { cursor: grabbing; }

  /* Wide industrial slide — full-bleed, edge-to-edge, no box framing.
     Soft mask fades top + bottom into the surrounding page so the visual
     reads as part of the scrolling story, not a card. */
  .we-stage-wide {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    aspect-ratio: 2 / 1;
    max-height: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%, #000 7%, #000 93%, transparent 100%
    );
            mask-image: linear-gradient(
      to bottom,
      transparent 0%, #000 7%, #000 93%, transparent 100%
    );
  }
  .we-stage-wide svg { min-height: 520px; }
  .we-stage-wide .we-piece { transition: opacity 240ms var(--ease-out), filter 240ms var(--ease-out); }
  .we-stage-wide .we-piece:hover { filter: drop-shadow(0 0 18px var(--accent-glow)); }

  .we-iso-grid { stroke: var(--line); }
  .we-unit {
    cursor: pointer;
    transition: filter 240ms var(--ease-out), transform 240ms var(--ease-out);
  }
  .we-unit .face-top    { stroke: var(--line-strong); stroke-width: 0.8; }
  .we-unit .face-left   { stroke: var(--line-strong); stroke-width: 0.8; }
  .we-unit .face-right  { stroke: var(--line-strong); stroke-width: 0.8; }
  .we-unit:hover { filter: drop-shadow(0 0 24px var(--accent-glow)); }
  .we-unit.intake     .face-top { fill: rgba(28, 50, 38, 0.95); }
  .we-unit.intake     .face-left { fill: rgba(14, 28, 20, 0.96); }
  .we-unit.intake     .face-right { fill: rgba(8, 18, 12, 0.97); }
  .we-unit.combustion .face-top { fill: rgba(64, 50, 30, 0.95); }
  .we-unit.combustion .face-left { fill: rgba(40, 30, 18, 0.96); }
  .we-unit.combustion .face-right { fill: rgba(28, 20, 12, 0.97); }
  .we-unit.turbine    .face-top { fill: rgba(34, 64, 50, 0.95); }
  .we-unit.turbine    .face-left { fill: rgba(18, 38, 28, 0.96); }
  .we-unit.turbine    .face-right { fill: rgba(10, 24, 18, 0.97); }
  .we-unit.output     .face-top { fill: rgba(50, 80, 64, 0.95); }
  .we-unit.output     .face-left { fill: rgba(26, 48, 36, 0.96); }
  .we-unit.output     .face-right { fill: rgba(16, 32, 24, 0.97); }

  .we-flow {
    stroke: var(--accent);
    stroke-width: 1.4;
    fill: none;
    stroke-dasharray: 4 6;
    animation: flowDash 1.2s linear infinite;
    opacity: 0.7;
  }
  .we-flow.heat   { stroke: var(--accent-2); animation-duration: 0.9s; }
  .we-flow.output { stroke: var(--accent); animation-duration: 0.8s; opacity: 0.9; }
  @keyframes flowDash {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -10; }
  }

  .we-label {
    font-family: var(--font-mono);
    font-size: 11px;
    fill: var(--text);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .we-label-muted {
    fill: var(--muted);
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.04em;
  }

  /* Wave-pulsing LED overlay on the waste-to-energy hero image.
     A field of tiny amber dots scattered across the facility,
     animated as a left-to-right wave (each dot's phase = its x). */
  .we-led-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
  }
  .we-led-overlay .we-led {
    fill: #ffc44a;
    filter: drop-shadow(0 0 1.4px rgba(255, 196, 74, 0.9));
    transform-origin: center;
    animation: weWavePulse 5s ease-in-out infinite;
  }
  .we-led-overlay .we-led.is-feature {
    fill: #ffd86a;
    filter:
      drop-shadow(0 0 2px rgba(255, 200, 90, 1))
      drop-shadow(0 0 6px rgba(255, 180, 60, 0.5));
  }
  @keyframes weWavePulse {
    0%, 100% { opacity: 0.18; }
    45%, 55% { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    /* Keep the wave animation but slow it dramatically — iOS Low Power
       Mode forces this media query, and going fully static reads as
       broken/unlit instead of accessible. */
    .we-led-overlay .we-led { animation-duration: 14s; }
  }

  /* Interactive rack overlay on top of the data-center hero image.
     Tiny amber LEDs blink on each rack; hovering a rack brightens
     its cluster + tints the cabinet area. */
  .rack-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
  }
  .rack-overlay .rack { pointer-events: auto; }
  .rack-overlay .rack-hotspot {
    fill: rgba(255, 200, 80, 0);
    cursor: pointer;
    transition: fill 220ms var(--ease-out);
  }
  .rack-overlay .rack:hover .rack-hotspot {
    fill: rgba(255, 200, 90, 0.06);
  }
  .rack-overlay .rack-led {
    fill: #ffc44a;
    opacity: 0.85;
    filter: drop-shadow(0 0 1.2px rgba(255, 196, 74, 0.85));
    transform-origin: center;
    animation: rackLedBlink 2.4s ease-in-out infinite;
  }
  .rack-overlay .rack-led-cool {
    fill: #78d8d0;
    filter: drop-shadow(0 0 1.4px rgba(120, 216, 208, 0.75));
  }
  .rack-overlay .rack:hover .rack-led {
    fill: #ffd86a;
    opacity: 1;
    filter:
      drop-shadow(0 0 3px rgba(255, 200, 90, 1))
      drop-shadow(0 0 9px rgba(255, 180, 60, 0.55));
    animation-duration: 1s;
  }
  .rack-overlay .rack:hover .rack-led-cool {
    fill: #9ee6df;
    filter:
      drop-shadow(0 0 3px rgba(150, 230, 220, 1))
      drop-shadow(0 0 9px rgba(120, 210, 200, 0.55));
  }
  @keyframes rackLedBlink {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    /* See comment above — keep the LED blink alive (slower) so users
       in iOS Low Power Mode still see a living data center. */
    .rack-overlay .rack-led { animation-duration: 7s; }
  }

  /* Cinematic stage image (production-facing hero visual until a GLB
     model exists). Visible by default; replaced by the 3D canvas if a
     real model loads. No user-facing debug messaging. */
  .stage-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
    transition: opacity 600ms var(--ease-out);
    /* CSS fallback only — never the main visual; shows if the image itself
       fails to load. Approximates the dark industrial mood. */
    background:
      radial-gradient(ellipse 80% 60% at 50% 80%, rgba(60, 40, 18, 0.4), transparent 65%),
      radial-gradient(ellipse 90% 70% at 50% 30%, rgba(20, 30, 36, 0.5), transparent 60%),
      linear-gradient(180deg, #0a1018 0%, #08121a 50%, #050a10 100%);
  }
  .stage-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Tone the photo into the site's dark premium palette */
    filter: brightness(0.74) contrast(1.06) saturate(0.78) hue-rotate(8deg);
    animation: stageKenBurns 28s ease-in-out infinite alternate;
    will-change: transform;
  }
  .stage-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 90% 70% at 50% 0%, rgba(0, 0, 0, 0.55), transparent 60%),
      radial-gradient(ellipse 90% 70% at 50% 100%, rgba(0, 0, 0, 0.7), transparent 65%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.5) 100%);
  }
  .stage-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 40% at 50% 50%, rgba(100, 255, 218, 0.05), transparent 70%);
  }
  @keyframes stageKenBurns {
    0%   { transform: scale(1.02) translate3d(0, 0, 0); }
    100% { transform: scale(1.10) translate3d(-1.2%, -0.8%, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .stage-image img { animation: none; }
  }

  /* =========================================================================
     SCROLLY — frame-by-frame waste → energy → compute scrubber
     ========================================================================= */
  .scrolly {
    position: relative;
    height: 320vh; /* scroll distance that maps to frame 0 → frame N */
    margin-block: clamp(2rem, 6vw, 5rem);
  }
  .scrolly-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background: #04060a;
  }
  .scrolly-stage canvas,
  .scrolly-stage .scrolly-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Fallback image is shown until JS swaps it out for the canvas frame.
     It uses the LAST frame so the user sees the final state even if
     JS / preload is slow. */
  .scrolly-stage .scrolly-fallback {
    z-index: 1;
    opacity: 1;
    transition: opacity 400ms var(--ease-out);
  }
  [data-scrolly][data-scrolly-ready] .scrolly-fallback {
    opacity: 0;
    pointer-events: none;
  }
  /* Canvas: subtle push-in parallax driven by --p (0..1 scroll progress)
     set by scroll-frames.js. Compensates for Veo's static camera —
     gives the viewer the feeling of moving forward into the compute hall. */
  .scrolly-stage canvas {
    z-index: 2;
    opacity: 0;
    transition: opacity 400ms var(--ease-out);
    transform-origin: 50% 55%;
    transform:
      scale(calc(1 + 0.06 * var(--p, 0)))
      translateY(calc(-16px * var(--p, 0)));
    will-change: transform, opacity;
  }
  [data-scrolly][data-scrolly-ready] canvas { opacity: 1; }

  /* Vignette + bottom gradient for caption legibility */
  .scrolly-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
      linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%),
      radial-gradient(120% 80% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35) 100%);
    pointer-events: none;
  }

  .scrolly-captions {
    position: absolute;
    z-index: 4;
    left: clamp(1.5rem, 5vw, 4rem);
    bottom: clamp(2rem, 7vh, 5rem);
    color: #fff;
    pointer-events: none;
  }
  .scrolly-kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: clamp(0.5rem, 1.5vh, 1rem);
  }
  .scrolly-captions p {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    font-size: clamp(3rem, 11vw, 9rem);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.03em;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
    color: #fff;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
    white-space: nowrap;
  }
  .scrolly-captions p span {
    background: linear-gradient(180deg, #ffffff 0%, #b9f3d6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .scrolly-captions p.is-on {
    opacity: 1;
    transform: translateY(0);
  }

  /* Mobile: shorter scroll distance + tighter type so the section
     fits in one or two swipes and doesn't feel oversized. */
  @media (max-width: 768px), (pointer: coarse) {
    .scrolly { height: 160vh; }
    .scrolly-stage { height: 100svh; }
    .scrolly-captions {
      left: clamp(0.9rem, 5vw, 1.6rem);
      bottom: clamp(1.2rem, 5vh, 2.4rem);
    }
    .scrolly-kicker {
      font-size: 0.66rem;
      letter-spacing: 0.12em;
      margin-bottom: 0.4rem;
    }
    .scrolly-captions p {
      font-size: clamp(2rem, 11vw, 3.6rem);
      letter-spacing: -0.025em;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    /* Honor reduced-motion only for the parallax transform (the
       vestibular trigger). The scroll-driven slideshow itself stays
       active — it's user-controlled, not autoplay. iOS Low Power Mode
       forces this query on, and a fully-static page reads as broken. */
    .scrolly-stage canvas {
      transform: none !important;
    }
  }

  /* === Brand marquee strip === */
  .brand-marquee {
    margin-block: clamp(2rem, 5vw, 4rem);
    border-block: 1px solid var(--line);
    overflow: hidden;
    background: color-mix(in oklab, var(--surface-1) 60%, transparent);
  }
  .brand-marquee-track {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    padding-block: clamp(0.9rem, 1.6vw, 1.4rem);
    width: max-content;
    animation: marqueeScroll 38s linear infinite;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.84rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .brand-marquee-track > span {
    display: inline-flex;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
  }
  .brand-marquee-track > span::after {
    content: "✦";
    color: var(--accent);
    font-style: normal;
    opacity: 0.6;
  }
  @keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    /* Slow the marquee instead of killing it. iOS Low Power Mode
       forces this media query; a static row reads as broken on a
       page that's otherwise alive. */
    .brand-marquee-track { animation-duration: 90s; }
  }
  .brand-marquee:hover .brand-marquee-track { animation-play-state: paused; }

  /* Section divider — small geometric mark used between major sections */
  .section-mark {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-block: clamp(1rem, 3vw, 2rem);
    color: var(--soft);
  }
  .section-mark::before,
  .section-mark::after {
    content: "";
    flex: 1;
    max-width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  }
  .section-mark span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
  }

  /* Pillar preview slide (homepage section linking to dedicated page) */
  .pillar-preview {
    margin-top: clamp(2rem, 5vw, 3rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: end;
    padding-top: clamp(2rem, 4vw, 3rem);
  }
  @media (max-width: 740px) {
    .pillar-preview { grid-template-columns: 1fr; align-items: start; }
  }
  .pillar-preview-visual {
    width: 100%;
    max-width: 520px;
    aspect-ratio: 9 / 5;
  }
  .pillar-preview-visual svg {
    width: 100%; height: 100%; display: block;
  }

  /* Cross-page CTA */
  .cross-link {
    margin-top: clamp(2rem, 5vw, 3rem);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-4) clamp(2rem, 4vw, 4rem);
    justify-content: space-between;
  }
  .cross-link h3 {
    font-size: var(--fs-28);
    font-weight: 450;
    letter-spacing: -0.018em;
    max-width: 30ch;
  }
  .cross-link p { color: var(--muted); max-width: 50ch; }
}