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

/* Metric-matched fallbacks. Until Outfit and Inter arrive, text renders in
   Arial scaled to the same advance widths and line box, so the swap no longer
   re-wraps headings and shoves the hero copy a full line up or down. Values
   measured from the live webfonts against Arial. */
@font-face {
  font-family: 'Outfit Fallback';
  src: local('Arial'), local('ArialMT');
  size-adjust: 99.12%;
  ascent-override: 100.89%;
  descent-override: 26.23%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('ArialMT');
  size-adjust: 106.23%;
  ascent-override: 91.31%;
  descent-override: 22.59%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   MordoX design system
   ----------------------------------------------------------------------- */
@layer tokens {
  :root {
    color-scheme: dark;

    --brand-graphite: #20252b;
    --brand-green: #63d4c8;
    --brand-green-bright: #7ce1d7;
    --brand-soft: #f5f7f8;
    --brand-white: #ffffff;

    --ink-950: #090d11;
    --ink-900: #0d1217;
    --ink-850: #11171d;
    --ink-800: #151c23;
    --ink-700: #202932;

    --text: #f8fafb;
    --text-2: #a8b2bb;
    --text-3: #717d87;
    --surface: #11171d;
    --surface-2: #151c23;
    --surface-3: #202932;
    --line: rgba(255, 255, 255, .07);
    --line-strong: rgba(255, 255, 255, .14);
    --accent-line: rgba(99, 212, 200, .32);
    --accent: var(--brand-green);

    --font-display: 'Outfit', 'Outfit Fallback', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Inter', 'Inter Fallback', 'Segoe UI', system-ui, sans-serif;
    --f-display: var(--font-display);
    --f-body: var(--font-body);

    --step--1: .78rem;
    --step-0: .925rem;
    --step-1: 1rem;
    --step-2: 1.18rem;
    --step-3: 1.48rem;
    --step-4: 2rem;
    --step-5: 3rem;

    --space-1: .375rem;
    --space-2: .625rem;
    --space-3: .875rem;
    --space-4: 1.25rem;
    --space-5: 1.75rem;
    --space-6: 2.5rem;
    --space-7: 3.5rem;
    --space-8: 5rem;
    --space-9: 7rem;

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --r-sm: var(--radius-sm);
    --r: var(--radius-md);
    --r-lg: var(--radius-lg);

    --shadow-1: 0 14px 38px -28px rgba(0, 0, 0, .72);
    --shadow-2: 0 28px 70px -40px rgba(0, 0, 0, .85);
    --shadow-3: 0 50px 110px -58px rgba(0, 0, 0, .95);

    --ease-standard: cubic-bezier(.2, .7, .2, 1);
    --ease-emphasized: cubic-bezier(.16, 1, .3, 1);
    --duration-fast: 180ms;
    --duration-standard: 320ms;
    --duration-slow: 650ms;

    --wrap: 1260px;
    --wrap-narrow: 850px;
    --nav-h: 70px;
    --section-space: 104px;
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); -webkit-text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  img, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; }
  button { border: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  table { border-collapse: collapse; border-spacing: 0; }
  [hidden] { display: none !important; }
}

@layer base {
  html.lenis, html.lenis body { height: auto; }
  html.lenis { scroll-behavior: auto; }
  .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
  .lenis [data-lenis-prevent] { overscroll-behavior: contain; }
  html { background: var(--ink-950); scrollbar-color: rgba(90, 104, 114, .42) transparent; }
  body {
    min-width: 320px;
    overflow-x: hidden;
    background: var(--ink-950);
    color: var(--text-2);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.68;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  main { display: block; }
  main:focus { outline: none; }
  p { margin-bottom: 1em; }
  p:last-child { margin-bottom: 0; }
  strong, b { font-weight: 600; }
  ::selection { background: var(--brand-green); color: #071f1c; }
  :focus-visible { outline: 2px solid var(--brand-green); outline-offset: 3px; }

  h1, h2, h3, h4 {
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.16;
    letter-spacing: 0;
  }

  /* Measure caps are in em, not ch: ch is the width of "0", which differs
     between Outfit/Inter and their fallbacks, so ch caps re-wrapped text
     when the webfonts swapped in. Values preserve the original ch widths. */
  .h-xl { max-width: 11.13em; font-size: var(--step-5); line-height: 1.08; }
  .h-lg { max-width: 15.72em; font-size: var(--step-4); }
  .h-md { font-size: var(--step-3); line-height: 1.25; }
  .h-sm { font-size: var(--step-2); line-height: 1.3; }
  .h-xs { font-size: var(--step-1); line-height: 1.35; }
  .lede { max-width: 40.37em; color: var(--text-2); font-size: var(--step-1); line-height: 1.72; }
  .balance { text-wrap: balance; }
}

@layer layout {
  .wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: 32px;
  }
  .wrap-narrow { max-width: var(--wrap-narrow); }
  .section {
    --text: #f8fafb;
    --text-2: #a8b2bb;
    --text-3: #717d87;
    --surface: #131a21;
    --surface-2: #182029;
    --surface-3: #202932;
    --line: rgba(255, 255, 255, .1);
    --line-strong: rgba(255, 255, 255, .17);
    --accent-line: rgba(99, 212, 200, .32);
    --accent: var(--brand-green);

    position: relative;
    isolation: isolate;
    padding-block: var(--section-space);
    overflow: clip;
    background: var(--ink-900);
    color: var(--text-2);
  }
  .section + .section { border-top: 1px solid var(--line); }
  .section--tight { padding-block: 72px; }
  .section--alt { background: var(--ink-950); }
  .section--panel {
    --text: #f7f9fa;
    --text-2: #a8b2bb;
    --text-3: #717d87;
    --surface: #11171d;
    --surface-2: #151c23;
    --surface-3: #202932;
    --line: rgba(255, 255, 255, .075);
    --line-strong: rgba(255, 255, 255, .14);
    --accent-line: rgba(99, 212, 200, .34);
    --accent: var(--brand-green);

    background: var(--ink-900);
  }
  .section--panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 18%, rgba(99, 212, 200, .035) 50%, transparent 82%);
  }
  /* The "white" tone is the raised step of the dark theme: a lifted
     graphite band rather than a light one, so pages keep their rhythm. */
  .section--white {
    --text: #f8fafb;
    --text-2: #aab4bd;
    --text-3: #76828c;
    --surface: #18212a;
    --surface-2: #1d2731;
    --surface-3: #26313b;
    --line: rgba(255, 255, 255, .09);
    --line-strong: rgba(255, 255, 255, .16);
    --accent-line: rgba(99, 212, 200, .32);
    --accent: var(--brand-green);

    background: var(--ink-850);
  }

  .grid { display: grid; gap: 18px; }
  .grid--compact { gap: 14px; }
  .grid--dense { gap: 12px; }
  .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
  .split--wide-left { grid-template-columns: 1.12fr .88fr; }
  .split--wide-right { grid-template-columns: .88fr 1.12fr; }
  .split--flipped { grid-template-columns: .88fr 1.12fr; }
  .split--flipped .split__primary { order: 2; }
  .split--flipped .split__secondary { order: 1; }
  .split--start { align-items: start; }
}

@layer components {
  /* Type helpers ------------------------------------------------------ */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--accent);
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: .15em;
    line-height: 1.3;
    text-transform: uppercase;
  }
  .eyebrow--muted { color: var(--text-3); }
  .eyebrow--center { justify-content: center; }
  .sec-head { max-width: 730px; margin-bottom: 48px; }
  .sec-head.center { margin-inline: auto; text-align: center; }
  .center .eyebrow, .center .lede { margin-inline: auto; }
  .staccato { color: var(--text-2); font-size: var(--step-1); line-height: 1.85; }
  .staccato span { display: block; }
  .staccato .accent { color: var(--text); font-weight: 500; }

  /* Buttons ----------------------------------------------------------- */
  .btn {
    --mag-x: 0px;
    --mag-y: 0px;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: inherit;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transform: translate3d(var(--mag-x), var(--mag-y), 0);
    transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast);
  }
  .btn::before { content: ''; position: absolute; inset: -2px; pointer-events: none; background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .34) 48%, transparent 64%); transform: translateX(-130%); transition: transform 620ms var(--ease-emphasized); }
  .btn:hover::before { transform: translateX(130%); }
  .btn > *, .btn svg { position: relative; z-index: 1; }
  .btn svg { width: 15px; height: 15px; transition: transform var(--duration-fast) var(--ease-standard); }
  .btn:hover svg { transform: translateX(3px); }
  .btn:active { transform: translate3d(var(--mag-x), var(--mag-y), 0) scale(.985); }
  .btn--primary {
    background: var(--brand-green);
    color: #071f1c;
    box-shadow: 0 12px 28px -18px rgba(99, 212, 200, .9), inset 0 1px rgba(255, 255, 255, .4);
  }
  .btn--primary:hover { transform: translate3d(var(--mag-x), calc(var(--mag-y) - 2px), 0); background: var(--brand-green-bright); box-shadow: 0 18px 36px -18px rgba(99, 212, 200, .92); }
  .btn--ghost { border-color: var(--line-strong); background: rgba(255, 255, 255, .035); color: var(--text); }
  .btn--ghost:hover { transform: translate3d(var(--mag-x), calc(var(--mag-y) - 2px), 0); border-color: var(--accent-line); background: rgba(99, 212, 200, .075); }
  .btn--sm { min-height: 38px; padding-inline: 15px; font-size: .76rem; }
  .btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
  .btn-row.center { justify-content: center; }
  .link-arrow { display: inline-flex; align-items: center; gap: 9px; color: var(--accent); font-size: .84rem; font-weight: 600; transition: gap var(--duration-fast); }
  .section--panel .link-arrow { color: var(--brand-green); }
  .link-arrow:hover { gap: 14px; }
  .link-arrow svg { width: 14px; height: 14px; }

  /* Loading and skip link -------------------------------------------- */
  .skip-link {
    position: fixed;
    top: 12px;
    left: 16px;
    z-index: 120;
    transform: translateY(-160%);
    padding: 9px 13px;
    border-radius: var(--radius-sm);
    background: var(--brand-green);
    color: #071f1c;
    font-size: .8rem;
    font-weight: 600;
    transition: transform var(--duration-fast);
  }
  .skip-link:focus { transform: none; }
  /* Navigation -------------------------------------------------------- */
  .nav { position: fixed; inset: 0 0 auto; z-index: 80; height: var(--nav-h); display: flex; align-items: center; padding-inline: 12px; }
  .nav__inner {
    display: flex;
    height: 54px;
    align-items: center;
    gap: 20px;
    padding: 0 8px 0 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    transition: background var(--duration-standard), border-color var(--duration-standard), box-shadow var(--duration-standard), backdrop-filter var(--duration-standard);
  }
  .nav.is-stuck .nav__inner { border-color: var(--line-strong); background: rgba(13, 18, 23, .86); box-shadow: var(--shadow-2); backdrop-filter: blur(18px) saturate(140%); }
  .nav__logo { display: inline-flex; flex: none; align-items: center; gap: 11px; color: #fff; }
  .nav:not(.is-stuck) .nav__logo { color: #11171d; }
  .nav__logo svg { width: 27px; height: 35px; }
  .nav__logo b { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; }
  .nav__menu { display: flex; align-items: center; gap: 1px; margin-left: auto; }
  .nav__link { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 8px 9px; border-radius: var(--radius-xs); background: transparent; color: #a8b2bb; font-size: .78rem; font-weight: 500; transition: color var(--duration-fast), background var(--duration-fast); }
  .nav__link:hover, .nav__link.is-active { color: #fff; background: rgba(255, 255, 255, .045); }
  .nav:not(.is-stuck) .nav__link { color: #4d5963; }
  .nav:not(.is-stuck) .nav__link:hover, .nav:not(.is-stuck) .nav__link.is-active { color: #10161b; background: rgba(20, 28, 34, .05); }
  .nav:not(.is-stuck) .nav__link::after { background: #147168; }
  .nav__link::after { content: ''; position: absolute; right: 9px; bottom: 2px; left: 9px; height: 1px; background: var(--brand-green); transform: scaleX(0); transform-origin: right; transition: transform var(--duration-standard) var(--ease-emphasized); }
  .nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
  .nav__link svg { width: 11px; height: 11px; opacity: .65; transition: transform var(--duration-fast); }
  .nav__drop { position: relative; }
  .nav__drop:hover .nav__link svg, .nav__drop:focus-within .nav__link svg, .nav__drop.is-open .nav__link svg { transform: rotate(180deg); }
  .nav__panel {
    position: absolute;
    top: calc(100% + 12px);
    left: -8px;
    min-width: 300px;
    padding: 7px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: rgba(17, 23, 29, .96);
    box-shadow: var(--shadow-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    backdrop-filter: blur(18px);
    transition: opacity var(--duration-fast), transform var(--duration-fast), visibility var(--duration-fast);
  }
  .nav__drop:hover .nav__panel, .nav__drop:focus-within .nav__panel, .nav__drop.is-open .nav__panel { opacity: 1; visibility: visible; transform: none; }
  .nav__panel a { display: block; padding: 11px 12px; border-radius: var(--radius-sm); opacity: 0; transform: translateY(-5px); transition: background var(--duration-fast), opacity var(--duration-standard), transform var(--duration-standard) var(--ease-emphasized); }
  .nav__panel a:nth-child(2) { transition-delay: 35ms; }
  .nav__panel a:nth-child(3) { transition-delay: 70ms; }
  .nav__panel a:nth-child(4) { transition-delay: 105ms; }
  .nav__drop:hover .nav__panel a, .nav__drop:focus-within .nav__panel a, .nav__drop.is-open .nav__panel a { opacity: 1; transform: none; }
  .nav__panel a:hover, .nav__panel a[aria-current='page'] { background: rgba(255, 255, 255, .055); }
  .nav__panel strong { display: block; color: #fff; font-family: var(--font-display); font-size: .84rem; font-weight: 500; }
  .nav__panel span { display: block; margin-top: 2px; color: var(--text-3); font-size: .72rem; line-height: 1.45; }
  .nav__cta { margin-left: 4px; }
  .nav__burger { display: none; width: 38px; height: 38px; margin-left: auto; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .03); color: #fff; }
  .nav:not(.is-stuck) .nav__burger { border-color: rgba(16, 22, 27, .16); background: rgba(255, 255, 255, .7); color: #11171d; }
  .nav__burger i, .nav__burger i::before, .nav__burger i::after { display: block; width: 16px; height: 1px; background: currentColor; transition: transform var(--duration-fast), opacity var(--duration-fast); }
  .nav__burger i { position: relative; }
  .nav__burger i::before, .nav__burger i::after { content: ''; position: absolute; left: 0; }
  .nav__burger i::before { top: -5px; }
  .nav__burger i::after { top: 5px; }
  .menu-open .nav__burger i { background: transparent; }
  .menu-open .nav__burger i::before { transform: translateY(5px) rotate(45deg); }
  .menu-open .nav__burger i::after { transform: translateY(-5px) rotate(-45deg); }
  .mobile-menu { position: fixed; inset: var(--nav-h) 0 0; z-index: 75; overflow-y: auto; background: rgba(9, 13, 17, .98); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--duration-standard), transform var(--duration-standard), visibility var(--duration-standard); }
  .menu-open { overflow: hidden; }
  .menu-open .mobile-menu { opacity: 1; visibility: visible; transform: none; }
  .mobile-menu__inner { display: grid; padding-block: 22px 56px; }
  .mobile-menu a:not(.btn) { padding: 13px 0; border-bottom: 1px solid var(--line); color: #c8cfd4; font-family: var(--font-display); font-size: 1.02rem; font-weight: 500; }
  .mobile-menu a.is-active { color: var(--brand-green); }
  .mobile-menu .btn { margin-top: 24px; }

  /* Hero -------------------------------------------------------------- */
  .hero, .phero {
    --hero-x: 0px;
    --hero-y: 0px;
    --hero-scroll: 0px;
    --hero-pointer-x: 72%;
    --hero-pointer-y: 48%;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--ink-950);
    color: var(--text-2);
  }
  .hero { min-height: 720px; height: calc(100svh - 36px); max-height: 860px; display: flex; align-items: center; padding: calc(var(--nav-h) + 44px) 0 40px; }
  .hero__media, .phero__media {
    position: absolute;
    inset: -1%;
    z-index: 0;
    width: 102%;
    height: 102%;
    object-fit: cover;
    object-position: center;
    transform: translate3d(var(--hero-x), calc(var(--hero-y) + var(--hero-scroll)), 0) scale(1.012);
    filter: saturate(.96) contrast(1.015);
    will-change: transform;
    transition: opacity 900ms var(--ease-standard), filter 1100ms var(--ease-standard), transform 700ms var(--ease-emphasized);
  }
  .is-loading .hero__media, .is-loading .phero__media { opacity: 0; filter: blur(10px) saturate(.75); }
  .hero__veil, .phero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  .hero__veil { background: linear-gradient(90deg, rgba(247, 249, 250, .995) 0%, rgba(247, 249, 250, .97) 34%, rgba(247, 249, 250, .74) 46%, rgba(247, 249, 250, .12) 64%, transparent 78%), linear-gradient(0deg, rgba(247, 249, 250, .98), rgba(247, 249, 250, .56) 19%, transparent 39%); }
  .hero::before, .phero::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(420px circle at var(--hero-pointer-x) var(--hero-pointer-y), rgba(20, 113, 104, .075), transparent 70%); transition: background-position 260ms linear; }
  .hero::after, .phero::after { content: ''; position: absolute; inset: -35% -45%; z-index: 2; pointer-events: none; background: linear-gradient(105deg, transparent 44%, rgba(20, 113, 104, .018) 49%, rgba(255, 255, 255, .2) 50%, rgba(20, 113, 104, .025) 51%, transparent 56%); transform: translate3d(-32%, 0, 0); animation: heroLightPass 13s var(--ease-emphasized) infinite; }
  .hero__inner { position: relative; z-index: 3; display: flex; min-height: 100%; flex-direction: column; justify-content: center; }
  .hero__content { max-width: 690px; padding-block: 36px; }
  .hero .eyebrow, .phero .eyebrow { color: #147168; }
  .hero .h-xl { max-width: 9.83em; color: #11171d; }
  .hero .on-green, .phero .on-green { color: #147168; }
  .hero .lede { max-width: 38.48em; color: #4f5b64; }
  .hero .btn--ghost, .phero .btn--ghost { border-color: rgba(17, 23, 29, .18); background: rgba(255, 255, 255, .55); color: #11171d; }
  .hero .btn--ghost:hover, .phero .btn--ghost:hover { border-color: rgba(20, 113, 104, .4); background: rgba(255, 255, 255, .86); }
  .hero__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: auto; border-top: 1px solid rgba(17, 23, 29, .13); }
  .hero__meta div { display: grid; grid-template-columns: auto 1fr; gap: 2px 13px; padding: 20px 24px 0 0; border-right: 1px solid rgba(17, 23, 29, .1); }
  .hero__meta div + div { padding-left: 24px; }
  .hero__meta div:last-child { border-right: 0; }
  .hero__meta span { grid-row: 1 / span 2; color: #147168; font-size: .65rem; font-weight: 600; letter-spacing: .12em; }
  .hero__meta strong { color: #11171d; font-family: var(--font-display); font-size: .82rem; font-weight: 500; }
  .hero__meta small { color: #68747d; font-size: .7rem; line-height: 1.45; }

  .phero { min-height: 560px; display: flex; align-items: end; padding: calc(var(--nav-h) + 60px) 0 72px; border-bottom: 1px solid var(--line); }
  .phero__media { object-position: center; opacity: 1; }
  .phero--v1 .phero__media { object-position: 58% center; }
  .phero__veil { background: linear-gradient(90deg, rgba(247, 249, 250, .995) 0%, rgba(247, 249, 250, .96) 37%, rgba(247, 249, 250, .58) 53%, rgba(247, 249, 250, .06) 72%), linear-gradient(0deg, rgba(247, 249, 250, .82), transparent 55%); }
  .phero__inner { position: relative; z-index: 3; }
  .phero__content { max-width: 720px; }
  .phero .h-xl { max-width: 11.13em; color: #11171d; font-size: 2.65rem; }
  .phero .lede { color: #4f5b64; }
  .crumb { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; color: #68747d; font-size: .72rem; }
  .crumb a:hover { color: var(--brand-green); }
  .crumb span { opacity: .5; }

  /* Cards and lists --------------------------------------------------- */
  .card, .stage, .dash, .pull, .form { --pointer-x: 50%; --pointer-y: 50%; --tilt-x: 0deg; --tilt-y: 0deg; }
  .card {
    position: relative;
    overflow: hidden;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    transition: transform var(--duration-standard) var(--ease-emphasized), border-color var(--duration-standard), box-shadow var(--duration-standard);
  }
  .card::before, .stage::before, .form::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(280px circle at var(--pointer-x) var(--pointer-y), rgba(99, 212, 200, .11), transparent 64%); opacity: 0; transition: opacity var(--duration-standard); }
  .card:hover, .stage:hover { transform: perspective(900px) translateY(-5px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); border-color: var(--accent-line); box-shadow: var(--shadow-2); }
  .card:hover::before, .stage:hover::before, .form:hover::before { opacity: 1; }
  .card > *, .stage > *, .form > * { position: relative; z-index: 1; }
  .card p { color: var(--text-2); font-size: .87rem; line-height: 1.7; }
  .card .h-sm { margin-bottom: 10px; }
  .card--flat { background: var(--surface-2); box-shadow: none; }
  .card--outline { background: transparent; box-shadow: none; }
  .card--feature { padding: 34px; }
  .mini-card { padding: 16px 18px; }
  .mini-card span { color: var(--text-2); font-size: .84rem; }
  .card__num { display: inline-block; margin-bottom: 17px; color: var(--accent); font-size: .67rem; font-weight: 600; letter-spacing: .14em; }
  .section--panel .card__num { color: var(--brand-green); }
  .card__icon { display: grid; width: 42px; height: 42px; margin-bottom: 20px; place-items: center; border: 1px solid var(--accent-line); border-radius: var(--radius-sm); background: rgba(99, 212, 200, .09); }
  .card__icon svg { width: 19px; height: 19px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .section--panel .card__icon svg { stroke: var(--brand-green); }
  .card__foot { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--line); }

  .card__foot--flush { margin-top: 0; padding-top: 0; border-top: 0; }
  .card__foot span { display: block; margin-bottom: 6px; color: var(--text-3); font-size: .65rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
  .card__foot p { margin: 0; }
  .ticks li { position: relative; margin-bottom: 9px; padding-left: 25px; color: var(--text-2); font-size: .86rem; line-height: 1.58; }
  .ticks li:last-child { margin-bottom: 0; }
  .ticks li::before { content: ''; position: absolute; top: .62em; left: 0; width: 12px; height: 12px; border: 1px solid var(--accent-line); border-radius: 3px; background: rgba(99, 212, 200, .08); }
  .ticks li::after { content: ''; position: absolute; top: calc(.62em + 3px); left: 3px; width: 6px; height: 3px; transform: rotate(-45deg); border-bottom: 1.5px solid var(--accent); border-left: 1.5px solid var(--accent); }
  .ticks--dash li::before { top: .66em; left: 3px; width: 5px; height: 5px; border: 0; border-radius: 50%; background: var(--accent); }
  .ticks--dash li::after { display: none; }

  /* Service rows ------------------------------------------------------ */
  .service { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 34px; margin-inline: -28px; padding: 44px 28px; border-top: 1px solid var(--line); border-radius: var(--radius-md); background: transparent; transition: background var(--duration-standard) var(--ease-emphasized), border-color var(--duration-standard); }
  .service:last-child { border-bottom: 1px solid var(--line); }
  .service:hover {
    --text: #f8fafb;
    --text-2: #a8b2bb;
    --text-3: #717d87;
    --line: rgba(255, 255, 255, .1);
    --line-strong: rgba(255, 255, 255, .17);
    --accent-line: rgba(99, 212, 200, .32);
    --accent: var(--brand-green);
    border-color: transparent;
    background: #11171d;
  }
  .service__idx { color: transparent; font-family: var(--font-display); font-size: 2.35rem; font-weight: 500; line-height: 1; -webkit-text-stroke: 1px var(--line-strong); transition: -webkit-text-stroke-color var(--duration-standard); }
  .service:hover .service__idx { -webkit-text-stroke-color: var(--accent); }
  .service__body { display: grid; gap: 20px; }
  .service__tagline { font-family: var(--font-display); font-size: 1rem; }
  .service__cols { display: grid; grid-template-columns: 1.18fr .82fr; gap: 46px; }
  .service__lead { max-width: 42.89em; }

  /* Stages and wheel -------------------------------------------------- */
  .stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .stage { position: relative; overflow: hidden; min-height: 220px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-1); transition: transform var(--duration-standard) var(--ease-emphasized), border-color var(--duration-standard), box-shadow var(--duration-standard); }
  .stage__k { color: var(--accent); font-size: .66rem; font-weight: 600; letter-spacing: .14em; }
  .stage h3 { margin: 17px 0 10px; font-size: 1.22rem; }
  .stage p { color: var(--text-2); font-size: .85rem; line-height: 1.65; }
  .stage__bar { position: absolute; top: 0; left: 0; width: 0; height: 2px; background: var(--brand-green); transition: width 520ms var(--ease-emphasized); }
  .stage:hover .stage__bar { width: 100%; }
  .wheel { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: center; }
  .wheel__ring { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1; margin-inline: auto; }
  .wheel__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .wheel__hub { position: absolute; top: 50%; left: 50%; display: grid; width: 39%; aspect-ratio: 1; transform: translate(-50%, -50%); place-items: center; padding: 7%; border: 1px solid var(--accent-line); border-radius: 50%; background: var(--surface); text-align: center; box-shadow: var(--shadow-2); }
  .wheel__hub span { display: block; color: var(--accent); font-size: .61rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
  .wheel__hub strong { display: block; margin-top: 7px; color: var(--text); font-family: var(--font-display); font-size: 1.02rem; font-weight: 500; line-height: 1.2; }
  .wheel__node { position: absolute; top: 50%; left: 50%; display: grid; width: 88px; aspect-ratio: 1; margin: -44px 0 0 -44px; place-items: center; padding: 7px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--text-2); font-family: var(--font-display); font-size: .78rem; font-weight: 500; text-align: center; transition: color var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast); }
  .wheel__node:hover, .wheel__node.is-on { border-color: var(--accent); background: var(--surface-2); color: var(--text); box-shadow: 0 0 0 4px rgba(99, 212, 200, .09); }
  .wheel__detail { min-height: 230px; }
  .wheel__pane { animation: paneIn var(--duration-standard) var(--ease-standard); }

  /* Process flow and timeline ---------------------------------------- */
  .flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--line); gap: 1px; }
  @media (min-width: 721px) {
    #operating-system-flow .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  .flow__step { min-height: 150px; padding: 24px; background: var(--surface); }
  .flow__step i { display: block; margin-bottom: 25px; color: var(--accent); font-size: .85rem; font-style: normal; font-weight: 700; letter-spacing: .1em; }
  .flow__step b { display: block; color: var(--text); font-family: var(--font-display); font-size: .9rem; font-weight: 500; }
  .flow__step span { display: block; margin-top: 6px; color: var(--text-3); font-size: .75rem; line-height: 1.5; }

  /* Interactive revenue system -------------------------------------- */
  .system-map { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .68fr); overflow: hidden; border-block: 1px solid var(--line-strong); background: rgba(8, 13, 17, .46); }
  .system-map::after { content: ''; position: absolute; top: 0; bottom: 0; left: -16%; width: 15%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(99, 212, 200, .07), transparent); transform: skewX(-12deg); animation: systemSweep 8s var(--ease-emphasized) infinite; }
  .system-map__visual { position: relative; min-height: 560px; overflow: hidden; }
  .system-map__mesh { position: absolute; inset: 0; opacity: .48; background-image: linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 76%); }
  .system-map__links { position: absolute; inset: 0; width: 100%; height: 100%; }
  .system-link { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 1; stroke-dasharray: 5 7; vector-effect: non-scaling-stroke; transition: stroke var(--duration-standard), stroke-width var(--duration-standard), filter var(--duration-standard); animation: routeFlow 12s linear infinite; }
  .is-step-1 .system-link--1, .is-step-2 .system-link--2, .is-step-3 .system-link--3, .is-step-4 .system-link--4, .is-step-5 .system-link--5, .is-step-6 .system-link--6 { stroke: var(--brand-green); stroke-width: 1.8; filter: drop-shadow(0 0 5px rgba(99, 212, 200, .65)); }
  .system-core { position: absolute; top: 50%; left: 50%; display: grid; width: 168px; height: 128px; transform: translate(-50%, -50%); place-content: center; border: 1px solid rgba(99, 212, 200, .42); background: rgba(12, 18, 23, .9); box-shadow: 0 22px 60px rgba(0, 0, 0, .32), inset 0 0 40px rgba(99, 212, 200, .035); text-align: center; }
  .system-core::before, .system-core::after { content: ''; position: absolute; inset: -10px; border: 1px solid rgba(99, 212, 200, .16); animation: systemPulse 3.4s var(--ease-standard) infinite; }
  .system-core::after { inset: -21px; animation-delay: 1.1s; }
  .system-core span { color: var(--brand-green); font-size: .61rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
  .system-core strong { display: block; margin-top: 9px; color: #fff; font-family: var(--font-display); font-size: .92rem; font-weight: 500; line-height: 1.25; }
  .system-core i { position: absolute; right: -4px; bottom: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-green); box-shadow: 0 0 14px var(--brand-green); }
  .system-node { position: absolute; z-index: 2; display: grid; width: 154px; min-height: 66px; grid-template-columns: auto 1fr; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-sm); background: rgba(16, 22, 27, .95); color: #c7d0d6; text-align: left; transition: transform var(--duration-standard) var(--ease-emphasized), border-color var(--duration-standard), background var(--duration-standard), color var(--duration-standard), box-shadow var(--duration-standard); }
  .system-node:hover { transform: translateY(-3px); border-color: rgba(99, 212, 200, .46); color: #fff; }
  .system-node.is-active { border-color: var(--brand-green); background: var(--brand-green); color: #09201d; box-shadow: 0 16px 32px -18px rgba(99, 212, 200, .82); }
  .system-node i { color: var(--brand-green); font-size: .61rem; font-style: normal; font-weight: 600; letter-spacing: .1em; }
  .system-node.is-active i { color: #0d4842; }
  .system-node span { font-family: var(--font-display); font-size: .77rem; font-weight: 500; line-height: 1.25; }
  .system-node--1 { top: 11%; left: 8%; }
  .system-node--2 { top: 11%; right: 6%; }
  .system-node--3 { top: calc(50% - 33px); left: 1.5%; }
  .system-node--4 { top: calc(50% - 33px); right: 1.5%; }
  .system-node--5 { bottom: 11%; left: 8%; }
  .system-node--6 { right: 6%; bottom: 11%; }
  .system-map__detail { position: relative; display: flex; min-height: 560px; flex-direction: column; justify-content: center; padding: 50px 42px; border-left: 1px solid var(--line); background: rgba(16, 22, 27, .72); }
  .system-pane { animation: systemPaneIn 520ms var(--ease-emphasized) both; }
  .system-pane__index { display: block; margin-bottom: 24px; color: var(--brand-green); font-size: .64rem; font-weight: 600; letter-spacing: .14em; }
  .system-pane h3 { color: #fff; }
  .system-pane p { margin-top: 18px; color: #a8b2bb; font-size: .86rem; line-height: 1.75; }
  .system-pane strong { display: block; margin-top: 28px; padding-top: 17px; border-top: 1px solid rgba(255, 255, 255, .09); color: var(--brand-green); font-size: .72rem; font-weight: 500; line-height: 1.5; }
  .system-map__progress { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-top: 40px; }
  .system-map__progress i { height: 2px; overflow: hidden; background: rgba(255, 255, 255, .1); }
  .system-map__progress i::after { content: ''; display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--brand-green); transition: transform 420ms var(--ease-emphasized); }
  .system-map__progress i.is-active::after { transform: scaleX(1); }

  .timeline { position: relative; display: grid; gap: 0; padding-left: 42px; }
  .timeline::before { content: ''; position: absolute; top: 8px; bottom: 8px; left: 8px; width: 1px; background: linear-gradient(var(--accent), rgba(35, 142, 133, .12)); }
  .timeline__item { position: relative; padding-bottom: 38px; }
  .timeline__item:last-child { padding-bottom: 0; }
  .timeline__item::before { content: ''; position: absolute; top: 7px; left: -41px; width: 15px; height: 15px; border: 1px solid var(--accent); border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 5px rgba(99, 212, 200, .08); }
  .timeline__index { display: block; margin-bottom: 7px; color: var(--accent); font-size: .64rem; font-weight: 600; letter-spacing: .12em; }
  .timeline__item h3 { margin-bottom: 8px; font-size: 1.08rem; }
  .timeline__item p { color: var(--text-2); font-size: .86rem; }

  /* Statistics and comparison --------------------------------------- */
  .stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--line); }
  .stat { min-height: 150px; padding: 26px; background: var(--surface); }
  .stat b { display: block; color: var(--text); font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; line-height: 1.2; }
  .stat span { display: block; margin-top: 10px; color: var(--text-3); font-size: .76rem; line-height: 1.52; }
  .compare-shell { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-1); }
  .compare { width: 100%; table-layout: fixed; }
  .compare th, .compare td { padding: 17px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--text-2); font-size: .83rem; font-weight: 400; line-height: 1.55; text-align: left; vertical-align: top; }
  .compare tr > *:last-child { border-right: 0; }
  .compare tbody tr:last-child > * { border-bottom: 0; }
  .compare thead th { background: var(--surface-2); color: var(--text); font-size: .69rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
  .compare thead th:last-child { color: var(--accent); }
  .compare tbody th { width: 34%; background: rgba(0, 0, 0, .018); color: var(--text); font-weight: 500; }
  .compare tbody td:last-child { background: rgba(99, 212, 200, .055); }

  /* Dashboard --------------------------------------------------------- */
  .dash { overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--ink-900); box-shadow: var(--shadow-3); color: #a8b2bb; }
  .dash__bar { display: flex; align-items: center; gap: 9px; padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
  .dash__bar .dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .13); }
  .dash__bar .dot:first-child { background: rgba(99, 212, 200, .68); }
  .dash__bar b { margin-left: 6px; color: #fff; font-family: var(--font-display); font-size: .78rem; font-weight: 500; }
  .dash__bar em { margin-left: auto; padding: 4px 9px; border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--radius-xs); color: #717d87; font-size: .66rem; font-style: normal; }
  .dash__body { display: grid; gap: 12px; padding: 20px; }
  .dash__hero { position: relative; min-height: 180px; overflow: hidden; padding: 24px; border: 1px solid rgba(255, 255, 255, .07); border-radius: var(--radius-md); background: linear-gradient(120deg, rgba(99, 212, 200, .08), transparent 68%); }
  .dash__hero > span { color: #717d87; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }
  .dash__hero b { display: block; margin-top: 9px; color: #fff; font-family: var(--font-display); font-size: 2.9rem; font-weight: 500; line-height: 1; }
  .dash__hero b i { margin-left: 3px; color: var(--brand-green); font-size: .78em; font-weight: 700; font-style: normal; }
  .dash__hero em { display: block; max-width: 18.92em; margin-top: 8px; color: #a8b2bb; font-size: .75rem; font-style: normal; }
  .dash__spark { position: absolute; right: 0; bottom: 0; width: 54%; opacity: .85; }
  .dash__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .dash__tile { padding: 17px; border: 1px solid rgba(255, 255, 255, .07); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .018); }
  .dash__tile--meters { padding: 22px; }
  .dash__tile span { display: block; min-height: 2.8em; color: #717d87; font-size: .68rem; line-height: 1.42; }
  .dash__tile b { display: block; margin-top: 8px; color: #fff; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; }
  .dash__tile > u { display: block; width: 30px; height: 2px; margin-top: 10px; border-radius: 2px; background: var(--brand-green); text-decoration: none; opacity: .7; }
  .dash__note { margin-top: 14px; color: var(--text-3); font-size: .7rem; text-align: center; }
  .meters { display: grid; gap: 14px; }
  .meter b { display: flex; justify-content: space-between; margin-bottom: 8px; color: #a8b2bb; font-family: var(--font-body); font-size: .75rem; font-weight: 500; }
  .meter b i { color: var(--brand-green); font-style: normal; }
  .meter u { display: block; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .07); text-decoration: none; }
  .meter u s { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(99, 212, 200, .5), var(--brand-green)); text-decoration: none; transition: width 900ms var(--ease-emphasized); }

  /* Hub --------------------------------------------------------------- */
  .hub { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; margin-inline: auto; }
  .hub__core { position: absolute; top: 50%; left: 50%; display: grid; width: 35%; aspect-ratio: 1; transform: translate(-50%, -50%); place-items: center; padding: 6%; border: 1px solid var(--accent-line); border-radius: 50%; background: var(--surface); text-align: center; box-shadow: 0 0 60px -24px rgba(99, 212, 200, .62); }
  .hub__core strong { color: var(--text); font-family: var(--font-display); font-size: .98rem; font-weight: 500; line-height: 1.2; }
  .hub__spoke { position: absolute; top: 50%; left: 50%; display: grid; width: 126px; height: 50px; margin: -25px 0 0 -63px; place-items: center; padding: 0 10px; border: 1px solid var(--line); border-radius: 25px; background: var(--surface); color: var(--text-2); font-size: .73rem; font-weight: 500; text-align: center; box-shadow: var(--shadow-1); }
  .hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hub__lines g { stroke: rgba(35, 142, 133, .32); stroke-width: .22; stroke-dasharray: 1.4 1.4; }

  /* Tabs and accordion ------------------------------------------------ */
  .tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 32px; }
  .component-label { margin-bottom: 14px; color: var(--text-3); font-size: .84rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  .tab { min-height: 38px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: transparent; color: var(--text-2); font-size: .76rem; font-weight: 500; transition: color var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast); }
  .tab:hover { transform: translateY(-1px); border-color: var(--accent-line); color: var(--text); }
  .tab.is-on { border-color: var(--accent); background: var(--accent); color: #071f1c; }
  .tabpane.is-on { animation: paneIn var(--duration-standard) var(--ease-standard); }
  .acc { border-top: 1px solid var(--line); }
  .acc__item { border-bottom: 1px solid var(--line); }
  .acc__item h3 { margin: 0; }
  .acc__q { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 23px 0; background: transparent; color: var(--text); font-family: var(--font-display); font-size: 1.02rem; font-weight: 500; line-height: 1.4; text-align: left; transition: color var(--duration-fast); }
  .acc__q:hover { color: var(--accent); }
  .acc__ic { position: relative; width: 20px; height: 20px; flex: none; margin-top: 2px; }
  .acc__ic::before, .acc__ic::after { content: ''; position: absolute; top: 50%; left: 50%; background: var(--accent); transition: transform var(--duration-standard); }
  .acc__ic::before { width: 12px; height: 1px; transform: translate(-50%, -50%); }
  .acc__ic::after { width: 1px; height: 12px; transform: translate(-50%, -50%); }
  .acc__item.is-open .acc__ic::after { transform: translate(-50%, -50%) scaleY(0); }
  .acc__a > div { max-width: 46.68em; padding: 0 0 24px; color: var(--text-2); font-size: .88rem; }

  /* Principles, manifesto, quote ------------------------------------- */
  .sticky-head { position: sticky; top: calc(var(--nav-h) + 36px); align-self: start; }
  .principle { display: grid; grid-template-columns: 42px 1fr; gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--line); }
  .principle:last-child { border-bottom: 0; }
  .principle__n { padding-top: .3em; color: var(--accent); font-size: .68rem; font-weight: 600; letter-spacing: .1em; }
  .principle h3 { margin-bottom: 7px; font-size: 1.18rem; }
  .principle p { max-width: 41.0em; color: var(--text-2); font-size: .86rem; }
  .never { display: grid; gap: 7px; }
  .never li { position: relative; padding: 15px 18px 15px 44px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-2); font-size: .87rem; }
  .never li::before, .never li::after { content: ''; position: absolute; top: 50%; left: 16px; width: 15px; height: 2px; border-radius: 1px; background: #e07a72; }
  .never li::before { transform: rotate(45deg); }
  .never li::after { transform: rotate(-45deg); }
  .pull { position: relative; overflow: hidden; padding: 42px; border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-2); }
  .pull p { color: var(--text); font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; line-height: 1.48; }
  .pull cite { display: block; margin-top: 18px; color: var(--accent); font-size: .67rem; font-style: normal; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }

  /* CTA --------------------------------------------------------------- */
  .cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    --text: #f8fafb;
    --text-2: #aab4bd;
    --text-3: #76828c;
    --line: rgba(255, 255, 255, .09);
    --line-strong: rgba(255, 255, 255, .16);
    --accent-line: rgba(99, 212, 200, .34);
    --accent: var(--brand-green);
    border-top: 1px solid var(--line);
    background: radial-gradient(70% 120% at 50% 0%, rgba(99, 212, 200, .1), transparent 70%), var(--ink-850);
  }
  .cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 15%, rgba(99, 212, 200, .12) 50%, transparent 85%); background-size: 180% 100%; animation: ambientDrift 12s var(--ease-emphasized) infinite alternate; }
  .cta__inner { padding-block: 88px; text-align: center; }
  .cta__title { max-width: 14.41em; margin-inline: auto; color: var(--text); }
  .cta__inner .lede { margin-inline: auto; color: var(--text-2); }

  /* Form -------------------------------------------------------------- */
  .form { position: relative; display: grid; gap: 17px; overflow: hidden; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-2); }
  .form__title { margin-bottom: 2px; }
  .form__intro { margin-bottom: 8px; }
  .form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
  .field label { display: block; margin-bottom: 7px; color: var(--text-3); font-size: .65rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
  .field label span { font-weight: 400; opacity: .72; }
  .field input, .field select, .field textarea { width: 100%; min-height: 47px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); outline: 0; background: var(--surface-2); color: var(--text); font-size: .86rem; appearance: none; transition: border-color var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast); }
  .field textarea { min-height: 126px; resize: vertical; line-height: 1.55; }
  .field select { background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px; background-repeat: no-repeat; background-size: 5px 5px; }
  .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-strong); }
  .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px rgba(99, 212, 200, .11); }
  .field input::placeholder, .field textarea::placeholder { color: var(--text-3); opacity: .75; }
  .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #e07a72; box-shadow: 0 0 0 3px rgba(224, 122, 114, .14); }
  .field__error { display: block; min-height: 17px; padding-top: 4px; color: #ec8d85; font-size: .68rem; }
  .form__note { color: var(--text-3); font-size: .72rem; }
  .form__status { display: none; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .78rem; }
  .form__status.is-error, .form__status.is-success { display: grid; gap: 7px; }
  .form__status.is-error { border-color: rgba(224, 122, 114, .4); background: rgba(224, 122, 114, .08); color: #ec8d85; }
  .form__status.is-pending { display: grid; gap: 7px; color: var(--text-2); }
  .form__status a { color: var(--brand-green); text-decoration: underline; text-underline-offset: 2px; }
  /* Honeypot: off-screen for people, still filled in by naive bots. */
  .form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
  .form__submit[aria-busy="true"] { cursor: progress; opacity: .72; pointer-events: none; }
  .form__status.is-success { border-color: var(--accent-line); background: rgba(99, 212, 200, .08); color: var(--brand-green); }
  .form__status strong { color: var(--text); font-family: var(--font-display); font-weight: 500; }
  .form__brief { max-height: 190px; overflow: auto; margin: 4px 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface-2); color: var(--text-2); font-family: var(--font-body); font-size: .7rem; line-height: 1.5; white-space: pre-wrap; }
  .form__status .btn { width: fit-content; margin-top: 5px; }
  .contact-side { display: grid; gap: 8px; }
  .contact-item { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); transition: transform var(--duration-fast), border-color var(--duration-fast); }
  .contact-item:hover { transform: translateX(3px); border-color: var(--accent-line); }
  .contact-item span { display: block; margin-bottom: 7px; color: var(--accent); font-size: .65rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
  .contact-item b { display: block; color: var(--text); font-family: var(--font-display); font-size: .98rem; font-weight: 500; }
  .contact-item p { margin-top: 5px; color: var(--text-3); font-size: .78rem; }

  /* Footer ------------------------------------------------------------ */
  .footer { position: relative; padding: 72px 0 30px; border-top: 1px solid rgba(255, 255, 255, .07); background: var(--ink-900); color: #a8b2bb; }
  .footer__statement { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 56px; padding-bottom: 34px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .footer__statement .eyebrow { margin: 0; }
  .footer__statement > p:last-child { max-width: 500px; color: #fff; font-family: var(--font-display); font-size: 1.22rem; font-weight: 400; line-height: 1.4; text-align: right; }
  .footer__top { display: grid; grid-template-columns: 1.45fr repeat(3, 1fr); gap: 46px; }
  .footer__logo { display: flex; align-items: center; gap: 10px; margin-bottom: 17px; color: #fff; }
  .footer__logo svg { width: 22px; height: 28px; }
  .footer__logo b { font-family: var(--font-display); font-size: 1.12rem; font-weight: 500; }
  .footer__brand > strong { display: block; margin-bottom: 10px; color: var(--brand-green); font-family: var(--font-display); font-size: .8rem; font-weight: 500; }
  .footer__brand > p { max-width: 23.97em; color: #717d87; font-size: .78rem; line-height: 1.7; }
  .footer__availability { margin-top: 18px; }
  .footer__pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px; color: #717d87; font-size: .68rem; }
  .footer__pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-green); box-shadow: 0 0 0 3px rgba(99, 212, 200, .13); }
  .footer h4 { margin-bottom: 16px; color: #717d87; font-family: var(--font-body); font-size: .65rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
  .footer li { margin-bottom: 9px; }
  .footer li a { color: #a8b2bb; font-size: .78rem; transition: color var(--duration-fast); }
  .footer li a:hover { color: var(--brand-green); }
  .footer__bot { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 52px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .07); }
  .footer__bot p, .footer__bot a { color: #68747e; font-size: .7rem; }
  .footer__bot nav { display: flex; gap: 20px; }
  .footer__bot a:hover { color: var(--brand-green); }
  .to-top { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: grid; width: 40px; height: 40px; transform: translateY(14px); place-items: center; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-sm); background: rgba(13, 18, 23, .88); color: var(--brand-green); opacity: 0; visibility: hidden; backdrop-filter: blur(12px); transition: opacity var(--duration-fast), transform var(--duration-fast), visibility var(--duration-fast); }
  .to-top.is-visible { transform: none; opacity: 1; visibility: visible; }
  .to-top svg { width: 14px; height: 14px; transform: rotate(-90deg); }
}

@layer utilities {
  .mt-s { margin-top: 14px; }
  .mt-m { margin-top: 24px; }
  .mt-l { margin-top: 40px; }
  .center { text-align: center; }
  .muted { color: var(--text-3); }
  .on-green { color: var(--accent); }
  .text-sm { font-size: .82rem; }
  .aside-title { margin-bottom: 16px; }
  .text-strong { color: var(--text); }
}

@layer motion {
  .has-js .is-loading [data-hero-sequence] > *, .has-js .is-loading [data-hero-meta] > div { opacity: 0; transform: translate3d(0, 18px, 0); }
  .has-js .is-ready [data-hero-sequence] > * { animation: heroCopyIn 820ms var(--ease-emphasized) both; }
  .has-js .is-ready [data-hero-sequence] > :nth-child(1) { animation-delay: 80ms; }
  .has-js .is-ready [data-hero-sequence] > :nth-child(2) { animation-delay: 170ms; }
  .has-js .is-ready [data-hero-sequence] > :nth-child(3) { animation-delay: 310ms; }
  .has-js .is-ready [data-hero-sequence] > :nth-child(4) { animation-delay: 430ms; }
  .has-js .is-ready [data-hero-meta] > div { animation: heroMetaIn 720ms var(--ease-emphasized) both; }
  .has-js .is-ready [data-hero-meta] > div:nth-child(1) { animation-delay: 560ms; }
  .has-js .is-ready [data-hero-meta] > div:nth-child(2) { animation-delay: 650ms; }
  .has-js .is-ready [data-hero-meta] > div:nth-child(3) { animation-delay: 740ms; }
  .has-js .is-ready .hero .on-green { background: linear-gradient(var(--brand-green), var(--brand-green)) 0 100% / 0 1px no-repeat; animation: accentUnderline 900ms 860ms var(--ease-emphasized) forwards; }

  .has-js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity var(--duration-slow) var(--ease-emphasized) var(--reveal-delay, 0ms), transform var(--duration-slow) var(--ease-emphasized) var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  .has-js [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }
  .has-js .card[data-reveal], .has-js .stage[data-reveal], .has-js .stat-strip[data-reveal] { transform: translate3d(0, 20px, 0) scale(.985); }
  .has-js .card[data-reveal].is-in, .has-js .stage[data-reveal].is-in, .has-js .stat-strip[data-reveal].is-in { transform: none; }
  .card__icon svg { transition: transform var(--duration-standard) var(--ease-emphasized), color var(--duration-fast); }
  .card:hover .card__icon svg { transform: translate3d(0, -2px, 0) scale(1.08); }
  .nav__logo svg { transition: transform 520ms var(--ease-emphasized), filter 520ms var(--ease-emphasized); }
  .nav__logo:hover svg { transform: translateY(-2px) scale(1.04); filter: drop-shadow(0 5px 10px rgba(99, 212, 200, .26)); }
  .stage.is-in .stage__bar { width: 38%; }
  .stage.is-in:hover .stage__bar { width: 100%; }
  .dash__spark path:last-child { stroke-dasharray: 380; stroke-dashoffset: 380; }
  [data-reveal].is-in .dash__spark path:last-child { animation: chartDraw 1.35s 320ms var(--ease-emphasized) forwards; }
  .dash__spark path:first-of-type { opacity: 0; transition: opacity 900ms 640ms var(--ease-standard); }
  [data-reveal].is-in .dash__spark path:first-of-type { opacity: 1; }
  .dash__tile { transition: transform var(--duration-standard) var(--ease-emphasized), border-color var(--duration-standard), background var(--duration-standard); }
  .dash__tile:hover { transform: translateY(-3px); border-color: rgba(99, 212, 200, .25); background: rgba(99, 212, 200, .045); }
  .has-js .compare-shell[data-reveal] tbody tr { opacity: 0; transform: translateY(8px); }
  .has-js .compare-shell[data-reveal].is-in tbody tr { animation: tableRowIn 520ms var(--ease-emphasized) forwards; }
  .has-js .compare-shell[data-reveal].is-in tbody tr:nth-child(2) { animation-delay: 55ms; }
  .has-js .compare-shell[data-reveal].is-in tbody tr:nth-child(3) { animation-delay: 110ms; }
  .has-js .compare-shell[data-reveal].is-in tbody tr:nth-child(4) { animation-delay: 165ms; }
  .has-js .compare-shell[data-reveal].is-in tbody tr:nth-child(5) { animation-delay: 220ms; }
  .has-js .compare-shell[data-reveal].is-in tbody tr:nth-child(6) { animation-delay: 275ms; }
  .has-js .compare-shell[data-reveal].is-in tbody tr:nth-child(7) { animation-delay: 320ms; }

  @keyframes heroCopyIn { from { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
  @keyframes heroMetaIn { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
  @keyframes accentUnderline { to { background-size: 100% 1px; } }
  @keyframes systemSweep { 0%, 20% { transform: translateX(0) skewX(-12deg); opacity: 0; } 36% { opacity: 1; } 72%, 100% { transform: translateX(860%) skewX(-12deg); opacity: 0; } }
  @keyframes systemPulse { 0%, 100% { transform: scale(.97); opacity: .22; } 50% { transform: scale(1.04); opacity: .72; } }
  @keyframes routeFlow { to { stroke-dashoffset: -96; } }
  @keyframes systemPaneIn { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
  @keyframes chartDraw { to { stroke-dashoffset: 0; } }
  @keyframes tableRowIn { to { opacity: 1; transform: none; } }
  @keyframes paneIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
  @keyframes heroLightPass { 0%, 18% { transform: translate3d(-34%, 0, 0); opacity: 0; } 30% { opacity: 1; } 58%, 100% { transform: translate3d(34%, 0, 0); opacity: 0; } }
  @keyframes ambientDrift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 180ms ease both fadeOut; }
  ::view-transition-new(root) { animation: 260ms ease both fadeIn; }
  @keyframes fadeOut { to { opacity: 0; } }
  @keyframes fadeIn { from { opacity: 0; } }
}

@layer responsive {
  @media (min-width: 1500px) {
    :root { --wrap: 1360px; --section-space: 116px; }
    .hero__content { max-width: 740px; }
  }

  @media (max-width: 1180px) {
    .nav__link { padding-inline: 7px; font-size: .74rem; }
    .nav__inner { gap: 14px; }
  }

  @media (max-width: 1080px) {
    :root { --section-space: 88px; }
    .nav__menu, .nav__cta { display: none; }
    .nav__burger { display: grid; }
    .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .g-4, .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero .h-xl { font-size: 2.7rem; }
    .system-map { grid-template-columns: minmax(0, 1fr) 310px; }
    .system-node { width: 140px; }
  }

  @media (max-width: 900px) {
    .split, .split--wide-left, .split--wide-right, .split--flipped, .wheel { grid-template-columns: 1fr; gap: 48px; }
    .split--flipped .split__primary, .split--flipped .split__secondary { order: initial; }
    .split--flipped .split__secondary { order: -1; }
    .sticky-head { position: static; }
    .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .service__cols { grid-template-columns: 1fr; gap: 24px; }
    .dash__tiles { grid-template-columns: 1fr; }
    .footer__statement { align-items: start; flex-direction: column; }
    .footer__statement > p:last-child { text-align: left; }
    .system-map { grid-template-columns: 1fr; }
    .system-map__visual { min-height: 520px; }
    .system-map__detail { min-height: 0; padding: 42px; border-top: 1px solid var(--line); border-left: 0; }
  }

  @media (max-width: 720px) {
    :root { --step-5: 2.15rem; --step-4: 1.68rem; --step-3: 1.3rem; --section-space: 72px; --nav-h: 64px; }
    .wrap { padding-inline: 20px; }
    .hero { height: auto; min-height: calc(100svh - 26px); padding-top: calc(var(--nav-h) + 26px); }
    .hero__veil { background: linear-gradient(90deg, rgba(247, 249, 250, .99), rgba(247, 249, 250, .82)), linear-gradient(0deg, rgba(247, 249, 250, .98), transparent 48%); }
    .hero__media { object-position: 61% center; }
    .hero__content { padding-block: 24px 40px; }
    .hero .h-xl { font-size: var(--step-5); }
    .hero__meta { grid-template-columns: 1fr; }
    .hero__meta div { padding: 12px 0; border-right: 0; border-top: 1px solid var(--line); }
    .hero__meta div + div { padding-left: 0; }
    .phero { min-height: 520px; padding-bottom: 54px; }
    .phero .h-xl { font-size: 2.1rem; }
    .phero__media { object-position: 58% 50%; }
    .g-2, .g-3, .g-4, .stages, .stat-strip, .form__row { grid-template-columns: 1fr; }
    .stage { min-height: 0; }
    .service { grid-template-columns: 1fr; gap: 14px; }
    .service__idx { font-size: 1.8rem; }
    .compare-shell { overflow: visible; border: 0; background: transparent; box-shadow: none; }
    .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
    .compare thead { display: none; }
    .compare tr { overflow: hidden; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
    .compare th, .compare td { border-right: 0; }
    .compare th { background: var(--surface-2); }
    .compare td::before { content: attr(data-l); display: block; margin-bottom: 5px; color: var(--text-3); font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
    .flow { grid-template-columns: 1fr; }
    .flow__step { min-height: 0; }
    .system-map { overflow: visible; border: 0; background: transparent; }
    .system-map::after, .system-map__mesh, .system-map__links { display: none; }
    .system-map__visual { display: grid; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; padding-bottom: 18px; }
    .system-core { position: relative; top: auto; left: auto; width: 100%; height: auto; min-height: 118px; grid-column: 1 / -1; transform: none; }
    .system-node { position: static; width: 100%; min-height: 58px; transform: none; backdrop-filter: none; }
    .system-node:hover { transform: none; }
    .system-map__detail { padding: 30px 22px; border: 1px solid var(--line); }
    .system-pane__index { margin-bottom: 18px; }
    .system-map__progress { margin-top: 30px; }
    .wheel__node { width: 72px; margin: -36px 0 0 -36px; font-size: .68rem; }
    .hub__spoke { width: 108px; height: 46px; margin: -23px 0 0 -54px; font-size: .66rem; }
    .form { padding: 22px; }
    .footer__top { grid-template-columns: 1fr; }
    .footer__bot { align-items: start; flex-direction: column; }
    .btn-row { flex-direction: column; }
    .btn-row .btn { width: 100%; }
    .cta__inner { padding-block: 70px; }
  }

  @media (max-width: 420px) {
    .hero__meta small { display: none; }
    .hero__meta div { grid-template-columns: auto 1fr; }
    .phero { min-height: 480px; }
    .card, .card--feature { padding: 22px; }
    .pull { padding: 28px; }
    .pull p { font-size: 1.16rem; }
    .tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
    .tab { flex: none; }
  }

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

  @media (forced-colors: active) {
    .btn, .card, .stage, .compare-shell, .form, .nav__inner, .system-map, .system-node { border: 1px solid CanvasText; }
  }
}


/* ==========================================================================
   Isometric hero scene + motion + mobile refinement
   Appended after the base system: later rules in the same layer win.
   ========================================================================== */

@layer components {
  /* ---- Scene shell --------------------------------------------------- */
  .hero, .phero {
    --scene-y: 0px;
    background: var(--ink-950);
    isolation: isolate;
  }

  .hero__scene, .phero__scene {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    transform: translate3d(0, calc(var(--scene-y, 0px) + var(--hero-scroll, 0px)), 0);
  }
  [data-scene] > * {
    transform: translate3d(var(--scene-px, 0px), var(--scene-py, 0px), 0);
    transition: transform 620ms var(--ease-emphasized);
  }
  /* The transform above makes these wrappers the containing block for the
     absolutely positioned art, so they must fill the scene themselves or the
     image sizes against a zero-height box and disappears. */
  .hero__scene-land, .hero__scene-port { position: absolute; inset: 0; }
  .hero__scene { inset: -6% -8% -6% 38%; }
  .phero__scene { inset: -14% -10% -18% 44%; opacity: .82; }
  .hero__scene-port { display: none; }

  .mx-scene { width: 100%; height: 100%; overflow: visible; }
  .mx-scene__ambient { transform-origin: 330px 330px; }
  .hero__scene-img, .phero__scene-img { display: block; position: absolute; inset: 0; margin: auto; max-width: 76%; max-height: 76%; object-fit: contain; object-position: center; }

  /* Veils: dark scrims that keep the copy legible over the art. */
  .hero__veil, .phero__veil { z-index: 1; }
  .hero__veil {
    background:
      linear-gradient(90deg, var(--ink-950) 0%, var(--ink-950) 30%, rgba(9, 13, 17, .82) 46%, rgba(9, 13, 17, .28) 62%, transparent 76%),
      linear-gradient(0deg, var(--ink-950) 0%, rgba(9, 13, 17, .35) 22%, transparent 46%);
  }
  .phero__veil {
    background:
      linear-gradient(90deg, var(--ink-950) 0%, var(--ink-950) 32%, rgba(9, 13, 17, .78) 50%, rgba(9, 13, 17, .2) 70%, transparent 84%),
      linear-gradient(0deg, var(--ink-950), transparent 58%);
  }

  /* Pointer spotlight + light sweep tuned for the dark surface. */
  .hero::before, .phero::before {
    background: radial-gradient(460px circle at var(--hero-pointer-x, 72%) var(--hero-pointer-y, 48%), rgba(99, 212, 200, .09), transparent 70%);
  }
  .hero::after, .phero::after {
    background: linear-gradient(105deg, transparent 44%, rgba(99, 212, 200, .03) 49%, rgba(255, 255, 255, .05) 50%, rgba(99, 212, 200, .03) 51%, transparent 56%);
  }

  /* ---- Hero copy back to light-on-dark ------------------------------- */
  .hero .eyebrow, .phero .eyebrow { color: var(--brand-green); }
  .hero .h-xl, .phero .h-xl { color: var(--text); }
  .hero .on-green, .phero .on-green { color: var(--brand-green); }
  .hero .lede, .phero .lede { color: var(--text-2); }
  .hero .crumb, .phero .crumb { color: var(--text-3); }
  .hero .btn--ghost, .phero .btn--ghost {
    border-color: var(--line-strong);
    background: rgba(255, 255, 255, .03);
    color: var(--text);
  }
  .hero .btn--ghost:hover, .phero .btn--ghost:hover {
    border-color: var(--accent-line);
    background: rgba(99, 212, 200, .1);
    color: var(--brand-white);
  }
  .hero__meta { border-top-color: var(--line); }
  .hero__meta div { border-right-color: var(--line); }
  .hero__meta span { color: var(--brand-green); }
  .hero__meta strong { color: var(--text); }
  .hero__meta small { color: var(--text-3); }

  /* ---- Scroll progress ---------------------------------------------- */
  .scroll-progress {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 90;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-green), var(--brand-green-bright));
    transform: scaleX(var(--progress, 0));
    transform-origin: 0 50%;
    opacity: 0;
    transition: opacity 260ms var(--ease-standard);
    pointer-events: none;
  }
  .scroll-progress.is-on { opacity: 1; }

  /* ---- Mobile action bar --------------------------------------------- */
  .action-bar {
    position: fixed;
    z-index: 75;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 12px;
    display: none;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: rgba(13, 18, 23, .92);
    box-shadow: var(--shadow-2);
    transform: translate3d(0, 130%, 0);
    transition: transform 420ms var(--ease-emphasized);
  }
  .action-bar.is-on { transform: none; }
  .action-bar .btn { flex: 1; min-height: 48px; }
}

@layer motion {
  /* ---- Scene entrance ------------------------------------------------ */
  .has-js .mx-slab {
    opacity: 0;
    transform-box: view-box;
    transform-origin: 330px 330px;
  }
  .has-js .is-ready .mx-slab {
    animation: slabIn 1100ms var(--ease-emphasized) both;
    animation-delay: calc(240ms + var(--i) * 110ms);
  }
  .has-js .mx-beam { opacity: 0; }
  .has-js .is-ready .mx-beam { animation: beamIn 1500ms var(--ease-emphasized) 900ms both; }
  .has-js .mx-guides { opacity: 0; }
  .has-js .is-ready .mx-guides { animation: guidesIn 1400ms var(--ease-standard) 1300ms both; }

  /* Continuous life: each slab drifts on its own clock. */
  .mx-slab__body { transform-box: view-box; }
  .is-ready .mx-slab--1 .mx-slab__body { animation: slabDrift 9s var(--ease-standard) 1.6s infinite; }
  .is-ready .mx-slab--2 .mx-slab__body { animation: slabDrift 11.5s var(--ease-standard) 1.9s infinite reverse; }
  .is-ready .mx-slab--3 .mx-slab__body { animation: slabDriftAlt 13s var(--ease-standard) 2.2s infinite; }

  .mx-slab__glow { opacity: .35; }
  .is-ready .mx-slab__glow { animation: edgePulse 6s var(--ease-standard) 2s infinite; }
  .mx-beam__bloom { transform-box: view-box; transform-origin: center; }
  .is-ready .mx-beam__bloom { animation: bloomPulse 6s var(--ease-standard) 2s infinite; }
  .is-ready .mx-beam__spark { animation: sparkFade 7s var(--ease-standard) 2.4s infinite; }
  .mx-beam__spark ellipse { transform-box: view-box; }
  .is-ready .mx-beam__spark ellipse { animation: sparkSlide 7s var(--ease-standard) 2.4s infinite; }
  .is-ready .mx-scene__ambient { animation: ambientBreathe 12s var(--ease-standard) infinite; }

  @keyframes slabIn {
    from { opacity: 0; transform: translate3d(26px, -34px, 0) scale(.94); }
    to { opacity: 1; transform: none; }
  }
  @keyframes beamIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes guidesIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes slabDrift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -9px, 0); } }
  @keyframes slabDriftAlt { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, 7px, 0); } }
  @keyframes edgePulse { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
  @keyframes bloomPulse { 0%, 100% { opacity: .72; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
  @keyframes sparkFade { 0%, 100% { opacity: 0; } 14%, 86% { opacity: .85; } }
  @keyframes sparkSlide { from { transform: translateX(-430px); } to { transform: translateX(430px); } }
  @keyframes ambientBreathe { 0%, 100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.07); } }

  /* ---- Heading line reveal ------------------------------------------- */
  .has-js .line-wrap { display: block; overflow: hidden; padding-bottom: .04em; }
  .has-js .line-wrap > span { display: block; transform: translate3d(0, 105%, 0); }
  .has-js .is-ready [data-hero-sequence] .line-wrap > span { animation: lineRise 1000ms var(--ease-emphasized) both; }
  .has-js .is-ready [data-hero-sequence] .line-wrap:nth-child(1) > span { animation-delay: 190ms; }
  .has-js .is-ready [data-hero-sequence] .line-wrap:nth-child(2) > span { animation-delay: 280ms; }
  .has-js .is-ready [data-hero-sequence] .line-wrap:nth-child(3) > span { animation-delay: 370ms; }
  .has-js .is-ready [data-hero-sequence] .line-wrap:nth-child(4) > span { animation-delay: 460ms; }
  .has-js .is-ready [data-hero-sequence] .line-wrap:nth-child(n + 5) > span { animation-delay: 550ms; }
  .has-js [data-reveal] .line-wrap > span { transition: transform 900ms var(--ease-emphasized) var(--reveal-delay, 0ms); }
  .has-js [data-reveal].is-in .line-wrap > span { transform: none; }
  @keyframes lineRise { from { transform: translate3d(0, 105%, 0); } to { transform: none; } }

  /* Hero headline underline colour follows the dark theme. */
  .has-js .is-ready .hero .on-green {
    background-image: linear-gradient(var(--brand-green), var(--brand-green));
  }

  /* ---- Tap feedback --------------------------------------------------- */
  .btn:active { transform: translate3d(0, 1px, 0) scale(.985); }
  .tab:active, .acc__q:active, .wheel__node:active, .system-node:active { transform: scale(.97); }

  /* Motion-safe fallback: the scene renders complete and still. */
  @media (prefers-reduced-motion: reduce) {
    .has-js .mx-slab, .has-js .mx-beam, .has-js .mx-guides { opacity: 1; transform: none; animation: none !important; }
    .has-js .line-wrap > span { transform: none; }
    .hero__scene, .phero__scene { transform: none; }
  }
}

@layer responsive {
  /* ---- Tablet -------------------------------------------------------- */
  @media (max-width: 1080px) {
    .hero__scene { inset: -4% -14% -4% 30%; opacity: .9; }
    .phero__scene { inset: -12% -16% -16% 36%; opacity: .7; }
  }

  /* ---- Mobile: art on top, copy beneath ------------------------------ */
  @media (max-width: 900px) {
    .hero {
      height: auto;
      min-height: 0;
      max-height: none;
      padding-top: calc(var(--nav-h) + 6px);
      padding-bottom: 44px;
    }
    .hero__scene {
      position: relative;
      inset: auto;
      width: 100%;
      height: clamp(230px, 40svh, 340px);
      margin-inline: auto;
      opacity: 1;
    }
    .hero__scene-land { display: none; }
    .hero__scene-port { display: block; height: 100%; }
    .hero__veil {
      inset: auto 0 0 0;
      height: 64%;
      background: linear-gradient(0deg, var(--ink-950) 0%, rgba(9, 13, 17, .55) 26%, transparent 58%);
    }
    .hero__inner { display: contents; }
    .hero__content { position: relative; z-index: 3; max-width: none; padding-block: 4px 0; }
    .hero__meta { position: relative; z-index: 3; margin-top: 30px; }

    .phero { min-height: 0; padding-bottom: 46px; }
    .phero__scene {
      position: absolute;
      inset: auto -20% -6% auto;
      width: 82%;
      height: 76%;
      opacity: .32;
    }
    .phero__veil { background: linear-gradient(0deg, var(--ink-950), rgba(9, 13, 17, .5) 44%, transparent 90%); }
  }

  @media (max-width: 720px) {
    :root { --step-5: 2.35rem; --step-4: 1.72rem; --step-3: 1.34rem; --step-1: 1rem; --step-0: .96rem; }

    /* Comfortable, thumb-friendly targets. */
    .btn { min-height: 50px; }
    .btn--sm { min-height: 44px; }
    .nav__burger { width: 46px; height: 46px; }
    .acc__q { min-height: 56px; }
    .tab { min-height: 44px; }

    /* Safe-area padding for notched devices. */
    .wrap { padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); }
    .footer { padding-bottom: calc(34px + env(safe-area-inset-bottom)); }
    body.has-action-bar .footer { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
    .action-bar { display: flex; }

    /* Horizontal rail instead of cramped wrapping. */
    .tabs {
      display: flex;
      flex-wrap: nowrap;
      gap: 8px;
      overflow-x: auto;
      margin-inline: -20px;
      padding-inline: 20px;
      padding-bottom: 6px;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab { flex: none; scroll-snap-align: start; }

    /* Cheaper compositing on phones. */
    .card::before, .dash::before { display: none; }
    .system-node { backdrop-filter: none; }
    .hero::after, .phero::after, .hero::before, .phero::before { display: none; }
  }

  @media (max-width: 480px) {
    .hero__scene { height: clamp(198px, 33svh, 268px); }
    .hero__meta { grid-template-columns: 1fr; }
    .hero__meta small { display: block; }
  }

  /* Pointer-driven flourishes are meaningless on touch. */
  @media (hover: none) {
    .hero__scene, .phero__scene { transition: none; }
    .card:hover, .stage:hover, .dash__tile:hover { transform: none; }
  }
}

/* --------------------------------------------------------------------------
   Nav over the dark hero. The base sheet assumed a light photographic hero,
   so the transparent (un-stuck) state was inked dark. Flip it back.
   ----------------------------------------------------------------------- */
@layer components {
  .nav:not(.is-stuck) .nav__logo { color: #fff; }
  .nav:not(.is-stuck) .nav__link { color: var(--text-2); }
  .nav:not(.is-stuck) .nav__link:hover,
  .nav:not(.is-stuck) .nav__link.is-active { color: #fff; background: rgba(255, 255, 255, .05); }
  .nav:not(.is-stuck) .nav__link::after { background: var(--brand-green); }
  .nav:not(.is-stuck) .nav__burger {
    border-color: var(--line-strong);
    background: rgba(255, 255, 255, .04);
    color: #fff;
  }
  .nav.is-stuck .nav__inner { background: rgba(13, 18, 23, .9); }
}

/* --------------------------------------------------------------------------
   Headline metric — the dashboard's primary number carries the section, so
   give it real presence and let it scale with the viewport.
   ----------------------------------------------------------------------- */
@layer components {
  .dash__hero { min-height: 210px; padding: 28px; }
  .dash__hero b {
    margin-top: 12px;
    font-size: clamp(3.8rem, 7.6vw, 5.6rem);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: .95;
  }
  .dash__hero b i { margin-left: 6px; font-size: .74em; font-weight: 700; letter-spacing: 0; }
  .dash__hero > span { font-size: .68rem; }
  .dash__hero em { max-width: 21.45em; margin-top: 12px; font-size: .8rem; }
  .dash__tile b { font-size: clamp(1.45rem, 2.4vw, 1.85rem); letter-spacing: -.02em; }
}

@layer responsive {
  @media (max-width: 720px) {
    .dash__hero { min-height: 0; padding: 24px; }
    .dash__hero b { font-size: clamp(3.6rem, 17vw, 4.8rem); }
  }
}

/* --------------------------------------------------------------------------
   System map connectors. Each link is now a group: a short dashed run plus a
   solid anchor dot sitting exactly on the node, so the connection always reads
   as attached no matter where the marching dash pattern happens to land.
   ----------------------------------------------------------------------- */
@layer components {
  .system-link { animation: none; filter: none; }
  .system-link__path {
    fill: none;
    stroke: rgba(255, 255, 255, .16);
    stroke-width: 1;
    stroke-dasharray: 5 7;
    stroke-linecap: butt;
    vector-effect: non-scaling-stroke;
    animation: routeFlow 12s linear infinite;
    transition: stroke var(--duration-standard), stroke-width var(--duration-standard);
  }

  .is-step-1 .system-link--1 .system-link__path,
  .is-step-2 .system-link--2 .system-link__path,
  .is-step-3 .system-link--3 .system-link__path,
  .is-step-4 .system-link--4 .system-link__path,
  .is-step-5 .system-link--5 .system-link__path,
  .is-step-6 .system-link--6 .system-link__path {
    stroke: var(--brand-green);
    stroke-width: 1.8;
  }
}

/* --------------------------------------------------------------------------
   Connector anchor dots sit on each node's attachment point. The core panel
   carries no corner marker of its own.
   ----------------------------------------------------------------------- */
@layer components {
  .system-core i { display: none; }

  .system-link__dot {
    fill: rgba(255, 255, 255, .28);
    stroke: none;
    transition: fill var(--duration-standard), r var(--duration-standard);
  }
  .is-step-1 .system-link--1 .system-link__dot,
  .is-step-2 .system-link--2 .system-link__dot,
  .is-step-3 .system-link--3 .system-link__dot,
  .is-step-4 .system-link--4 .system-link__dot,
  .is-step-5 .system-link--5 .system-link__dot,
  .is-step-6 .system-link--6 .system-link__dot {
    fill: var(--brand-green);
    r: 4;
  }
}

/* --------------------------------------------------------------------------
   Mobile hero, corrected.

   The desktop hero is a centred flex row with the scene absolutely positioned
   over the right half. On phones the scene becomes a full-bleed band above the
   copy, so the hero has to drop back to normal block flow — otherwise the
   scene, the copy and the meta strip all become flex siblings and sit in a row.
   ----------------------------------------------------------------------- */
@layer responsive {
  @media (max-width: 900px) {
    .hero {
      display: block;
      height: auto;
      min-height: 0;
      max-height: none;
      padding-top: calc(var(--nav-h) + 4px);
      padding-bottom: 48px;
    }

    /* Full-bleed art band, with its own fade so it melts into the page. */
    .hero__scene {
      position: relative;
      inset: auto;
      width: 100%;
      height: clamp(232px, 40svh, 330px);
      opacity: 1;
    }
    .hero__scene::after {
      content: '';
      position: absolute;
      inset: auto 0 -1px 0;
      height: 58%;
      background: linear-gradient(0deg, var(--ink-950) 12%, rgba(9, 13, 17, .6) 52%, transparent);
      pointer-events: none;
    }
    .hero__scene-land { display: none; }
    .hero__scene-port { display: block; height: 100%; }
    .hero__veil { display: none; }

    /* Back to a normal stacked column. */
    .hero__inner {
      display: flex;
      min-height: 0;
      flex-direction: column;
      justify-content: flex-start;
    }
    .hero__content { max-width: none; padding-block: 0; }
    .hero__meta { margin-top: 32px; }

    /* Interior heroes keep the art as a corner accent behind the copy. */
    .phero { min-height: 0; padding-bottom: 48px; }
    .phero__scene {
      position: absolute;
      inset: auto -22% -8% auto;
      width: 86%;
      height: 78%;
      opacity: .3;
    }
    .phero__veil { background: linear-gradient(0deg, var(--ink-950), rgba(9, 13, 17, .45) 46%, transparent 92%); }
  }

  @media (max-width: 720px) {
    .hero__meta { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
    .hero__meta div {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 2px 14px;
      padding: 14px 0;
      border-top: 0;
      border-right: 0;
      border-bottom: 1px solid var(--line);
    }
    .hero__meta div:last-child { border-bottom: 0; }
    .hero__meta div + div { padding-left: 0; }
    .hero__meta span { grid-row: 1 / span 2; align-self: start; padding-top: 3px; }
    .hero__meta strong { font-size: .92rem; }
    .hero__meta small { font-size: .78rem; }
  }

  @media (max-width: 480px) {
    .hero__scene { height: clamp(206px, 33svh, 268px); }
  }
}

/* --------------------------------------------------------------------------
   The mobile action bar owns the bottom of the screen, so the floating
   back-to-top control stands down rather than sitting under it.
   ----------------------------------------------------------------------- */
@layer components {
  body.has-action-bar .to-top { transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard); }
}

@layer responsive {
  @media (max-width: 720px) {
    body.has-action-bar .to-top { display: none; }
  }
}