/* ============================================================
   Zetrix Landing — styles
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Metropolis";
  src: url("../assets/fonts/Metropolis-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("../assets/fonts/Metropolis-Medium.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("../assets/fonts/Metropolis-SemiBold.woff") format("woff");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("../assets/fonts/Metropolis-Bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("../assets/fonts/Metropolis-ExtraBold.woff") format("woff");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  src: url("../assets/fonts/TitilliumWeb-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  src: url("../assets/fonts/TitilliumWeb-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  src: url("../assets/fonts/TitilliumWeb-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* colors */
  --red: #c5242e;
  --red-hover: #a91f27;
  --bg: #18181b;
  --nav-bg: #131316;
  --white: #ffffff;
  --black: #000000;
  --grey: #999999;
  --text-tertiary: #a1a1aa;
  --border-primary: #d1d1d6;
  --line: #d6d7da;
  --hairline: rgba(255, 255, 255, 0.08);

  /* radii */
  --radius-sm: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 9999px;

  /* type */
  --font-head: "Metropolis", "Segoe UI", system-ui, sans-serif;
  --font-body: "Titillium Web", "Segoe UI", system-ui, sans-serif;

  /* layout */
  --page-w: 1440px;
  --content-w: 1200px;
  --gutter: 120px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }

/* ============================= SESSION INTRO ============================= */
.site-intro {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  place-items: center;
  overflow: hidden;
  background: #fafafa;
  pointer-events: auto;
  isolation: isolate;
}
.site-intro-pending .site-intro { display: grid; }
.site-intro-pending { overflow: hidden; }
.site-intro-pending .nav__logo img { opacity: 0; }
.site-intro__canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.site-intro__canvas--brand {
  z-index: 1;
  background: #c5242e;
  clip-path: inset(0 100% 0 0);
}
.site-intro__canvas--dark {
  z-index: 2;
  background: #18181b;
  clip-path: inset(0 100% 0 0);
}
.site-intro__logo {
  position: relative;
  z-index: 3;
  width: min(348px, calc(100vw - 48px));
  aspect-ratio: 348 / 60;
  transform-origin: 0 0;
  opacity: 0;
  filter: blur(8px);
  clip-path: inset(0 100% 0 0);
  will-change: transform, opacity, filter, clip-path;
}
.site-intro__logo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: url("../assets/img/logo-zetrix-intro.svg") left center / 100% 100% no-repeat;
  clip-path: inset(0 84% 0 0);
  filter: brightness(0) invert(1);
  opacity: 0;
  transform-origin: 8% 50%;
  pointer-events: none;
}
.site-intro__mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.site-intro__mark--light { opacity: 1; }
.site-intro__mark--white { opacity: 0; filter: brightness(0) invert(1); }
.site-intro__mark--nav { opacity: 0; }
.site-intro.is-logo-visible .site-intro__logo {
  opacity: 1;
  filter: blur(0);
  clip-path: inset(0 0 0 0);
  transition: opacity 550ms cubic-bezier(.16, 1, .3, 1),
              filter 550ms cubic-bezier(.16, 1, .3, 1),
              clip-path 550ms cubic-bezier(.16, 1, .3, 1),
              transform 550ms cubic-bezier(.16, 1, .3, 1);
}
.site-intro.is-brand .site-intro__canvas--brand {
  clip-path: inset(0 0 0 0);
  transition: clip-path 600ms cubic-bezier(.16, 1, .3, 1);
}
.site-intro.is-brand .site-intro__mark--light { opacity: 0; }
.site-intro.is-brand .site-intro__mark--white { opacity: 1; }
.site-intro.is-brand .site-intro__mark--light,
.site-intro.is-brand .site-intro__mark--white {
  transition: opacity 360ms ease;
}
.site-intro.is-brand .site-intro__logo::after {
  animation: site-intro-pulse 600ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes site-intro-pulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  42% { opacity: .72; transform: scale(1.055); }
}
.site-intro.is-handoff {
  background: transparent;
  transition: background-color 750ms cubic-bezier(.16, 1, .3, 1);
}
.site-intro.is-handoff .site-intro__canvas--brand {
  clip-path: inset(0 0 0 100%);
  transition: clip-path 750ms cubic-bezier(.16, 1, .3, 1);
}
.site-intro.is-handoff .site-intro__canvas--dark {
  clip-path: inset(0 0 0 0);
  opacity: 0;
  transition: clip-path 750ms cubic-bezier(.16, 1, .3, 1),
              opacity 750ms cubic-bezier(.16, 1, .3, 1);
}
.site-intro.is-handoff .site-intro__mark--white { opacity: 0; }
.site-intro.is-handoff .site-intro__mark--nav { opacity: 1; }
.site-intro.is-handoff .site-intro__mark--white,
.site-intro.is-handoff .site-intro__mark--nav { transition: opacity 300ms ease; }
.site-intro.is-settling { opacity: 0; transition: opacity 100ms linear; }
/* Light theme: land the intro's logo handoff on the LIGHT nav seamlessly.
   The nav logo is filtered dark in light mode, so (1) the handoff "--nav" mark
   gets the same dark filter — the travelling logo crossfades white → dark as it
   moves to the nav, instead of the intro fading out to reveal a suddenly-dark
   nav logo; and (2) the reveal canvas is light instead of #18181b, so there is
   no dark flash before the light page shows. Dark mode is unchanged. */
html[data-theme="light"] .site-intro__canvas--dark { background: var(--theme-bg); }
/* Handoff mark uses the same two-image toggle as the nav, so the intro lands on
   the identical light logo (red Z + dark ETRIX) in light mode. */
.site-intro__mark--nav-light { display: none; }
html[data-theme="light"] .site-intro__mark--nav-dark { display: none; }
html[data-theme="light"] .site-intro__mark--nav-light { display: block; }
@media (max-width: 479px) {
  .site-intro__logo { width: min(220px, calc(100vw - 48px)); }
}
@media (prefers-reduced-motion: reduce) {
  .site-intro__logo {
    opacity: 1;
    filter: none;
    clip-path: none;
    will-change: auto;
  }
  .site-intro__canvas,
  .site-intro__mark { transition: none !important; }
  .site-intro.is-reduced { opacity: 0; transition: opacity 250ms ease; }
}

/* Centered content column */
.container {
  width: 100%;
  max-width: var(--content-w);
  margin-inline: auto;
  padding-inline: 20px;
}

/* ---------- Skip link (a11y) ---------- */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--red);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-150%);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid var(--white);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: background-color .18s ease, transform .18s ease, opacity .18s ease, filter .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.btn--red {
  background: linear-gradient(180deg, #cb2d36 0%, var(--red) 45%, var(--red-hover) 100%);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 14px rgba(197, 36, 46, .32);
}
.btn--red:hover {
  filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 18px rgba(197, 36, 46, .4);
}

/* ============================= NAV ============================= */
.nav-wrap {
  position: fixed;
  top: 24px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.nav {
  position: relative;
  z-index: 0;
  pointer-events: auto;
  width: min(1032px, calc(100% - 48px));
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 12px 0 20px;
  /* glass effect */
  background: rgba(22, 22, 26, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.nav__logo { flex-shrink: 0; display: inline-block; line-height: 0; margin-right: 26px; }
.nav__logo img { display: block; height: 20px; width: auto; max-width: none; }
.nav__menu > li { display: flex; }
.nav__menu {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-right: 24px;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--white);
  padding: 6px 0;
  opacity: .95;
  transition: opacity .15s ease;
}
.nav__link:hover { opacity: 1; color: #fff; }
.nav__link[aria-expanded="true"] { opacity: 1; }
.caret {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .85;
  transition: transform 180ms ease;
}
.nav__link[aria-expanded="true"] .caret { transform: translateY(2px) rotate(225deg); }
.nav__cta {
  flex-shrink: 0;
  height: 40px;
  padding: 0 20px;
  font-size: 15px;
  border-radius: 10px;
}
.theme-toggle {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, .045);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 10px 30px rgba(0, 0, 0, .28);
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}
.theme-toggle:hover { filter: brightness(1.12); }
.theme-toggle__track {
  position: relative;
  display: block;
  width: 38px;
  height: 20px;
  padding: 2px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-pill);
  background: rgba(48, 48, 54, .94);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .28);
  transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}
.theme-toggle__orb {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translateX(18px);
  background: radial-gradient(circle at 32% 32%, #fff 0 9%, #d7d9dc 10% 53%, #71717a 55% 59%, #18181b 61%);
  box-shadow: 0 0 8px rgba(255, 255, 255, .22);
  transition: transform 280ms cubic-bezier(.16, 1, .3, 1), background-color 240ms ease, box-shadow 240ms ease;
}
/* the appearance/theme row lives inside the dropdown on tablet + mobile only */
.nav-dropdown__theme { display: none; }
@media (min-width: 1200px) {
  .theme-toggle {
    position: absolute;
    top: 0;
    right: -68px;
  }
}
@media (max-width: 1199px) {
  .theme-toggle {
    position: static;
    margin-left: 8px;
  }
}
.nav__mobile-toggle {
  position: relative;
  display: none;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
}
.nav__mobile-toggle span {
  grid-area: 1 / 1;
  display: block;
  width: 16px;
  height: 1.5px;
  border-radius: 2px;
  background: #fff;
  transition: transform 180ms ease;
}
.nav__mobile-toggle span:first-child { transform: translateY(-3px); }
.nav__mobile-toggle span:last-child { transform: translateY(3px); }
.nav.is-mobile-open .nav__mobile-toggle span:first-child { transform: rotate(45deg); }
.nav.is-mobile-open .nav__mobile-toggle span:last-child { transform: rotate(-45deg); }
.nav__backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100vw;
  height: 100svh;
  border: 0;
  background: rgba(0, 0, 0, .52);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  pointer-events: auto;
}
.nav-dropdown {
  position: absolute;
  z-index: 2;
  top: 64px;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.2, .8, .2, 1), visibility 0s linear 220ms;
}
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  width: 100%;
  height: 8px;
}
.nav.is-menu-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}
.nav.is-mobile-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}
.nav-dropdown__surface {
  height: var(--nav-panel-height, 128px);
  padding: 16px;
  overflow: hidden;
  background-color: rgba(22, 22, 26, .985);
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012) 58%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(115%);
  backdrop-filter: blur(24px) saturate(115%);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 24px 64px rgba(0, 0, 0, .48), 0 0 48px rgba(204, 34, 45, .08);
}
.nav-panel__group {
  opacity: 1;
  transition: opacity 140ms ease;
}
.nav-panel__group:not(.is-active) { display: none; }
.nav-panel__group.is-switching { opacity: 0; }
.nav-panel__accordion { display: none; }
.nav-panel__content {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.nav-panel__group[data-nav-count="1"] .nav-panel__content { grid-template-columns: minmax(0, 1fr); }
.nav-panel__group[data-nav-count="2"] .nav-panel__content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav-card {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  min-height: 88px;
  padding: 14px;
  color: var(--white);
  background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025));
  border: 1px solid rgba(255, 255, 255, .085);
  border-radius: 13px;
  transition: background-color 160ms ease, border-color 160ms ease, filter 160ms ease;
}
.nav-card:hover {
  border-color: rgba(228, 34, 46, .55);
  background-color: rgba(197, 36, 46, .14);
}
.nav-card:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.nav-card__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 11px;
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.nav-card__icon img {
  display: block;
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
  opacity: .9;
}
.nav-card__copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.nav-card__title {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  color: #fff;
}
.nav-card__desc {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: rgba(255, 255, 255, .68);
}
.nav-card__arrow {
  align-self: start;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  opacity: .56;
}
.nav-card__arrow img { width: 100%; height: 100%; }
.nav__link:focus-visible,
.theme-toggle:focus-visible,
.nav__mobile-toggle:focus-visible,
.nav-panel__accordion:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

@media (max-width: 1023px) {
  .nav {
    width: min(calc(100% - 32px), 720px);
    padding-left: 16px;
  }
  .nav__logo { margin-right: auto; }
  .nav__menu { display: none; }
  .nav__cta { margin-left: auto; }
  .nav > .theme-toggle { display: none; } /* moved into the dropdown */
  .nav__mobile-toggle {
    display: grid;
    margin-left: 8px;
  }
  .nav-dropdown__theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 4px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  }
  .nav-dropdown__theme .theme-toggle { position: static; margin: 0; width: 48px; height: 48px; }
  .nav-dropdown__theme-label {
    font-family: "Titillium Web", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--white);
  }
  html[data-theme="light"] .nav-dropdown__theme {
    border-color: rgba(209, 209, 214, .86);
    background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(245, 245, 246, .86));
  }
  html[data-theme="light"] .nav-dropdown__theme-label { color: var(--theme-text); }
  .nav-dropdown {
    position: fixed;
    /* The nav's backdrop-filter makes it the containing block, so the panel is
       anchored to the nav's own box: left/right 0 match the floating nav's
       width, and top places it 8px below the 56px nav. */
    top: 63px;
    left: -1px;
    right: -1px;
    width: auto;
    max-height: calc(100svh - 96px);
    overflow-y: auto;
    border-radius: 18px;
  }
  .nav-dropdown__surface {
    height: auto;
    min-height: 0;
    padding: 10px;
    overflow: visible;
  }
  .nav-panel__group,
  .nav-panel__group:not(.is-active) {
    display: block;
  }
  .nav-panel__group + .nav-panel__group { border-top: 1px solid rgba(255, 255, 255, .07); }
  .nav-panel__accordion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 0 10px;
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 700;
  }
  .nav-panel__accordion[aria-expanded="true"] .caret { transform: translateY(2px) rotate(225deg); }
  /* Force a single vertical column, overriding the desktop
     [data-nav-count="2"|"3"] multi-column rules. */
  .nav-panel__group[data-nav-count] .nav-panel__content {
    grid-template-columns: 1fr;
    padding: 0 0 10px;
  }
  .nav-panel__content[hidden] { display: none; }
  .nav-card { min-height: 80px; }
  body.is-nav-locked { overflow: hidden; }
}

@media (max-width: 479px) {
  .nav__cta {
    height: 38px;
    padding: 0 14px;
    font-size: 14px;
  }
  .nav__logo img { height: 18px; }
  .nav-card__desc { font-size: 12.5px; line-height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown,
  .nav-dropdown__surface,
  .nav-panel__group,
  .nav-card,
  .theme-toggle,
  .theme-toggle__track,
  .theme-toggle__orb,
  .nav__mobile-toggle span,
  .nav .caret {
    transition: none !important;
  }
}

/* ============================= HERO ============================= */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--bg);
  text-align: center;
  padding-top: 122px; /* nav bottom (80px) + 48px gap ≈ title cap */
  overflow: hidden;
}
/* Hero colour gradient (Figma 521:884) — crimson top fading to the dark base,
   present on load (no entrance) with a slow living drift. */
.hero__aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(to top, #18181b 39.9%, #c5242e 164.26%);
}
/* two crimson crests that flow + undulate = a slow wave rolling across the top */
.hero__aurora::before,
.hero__aurora::after {
  content: "";
  position: absolute;
  left: -45%;
  right: -45%;
  top: -32%;
  height: 92%;
  pointer-events: none;
  will-change: transform;
}
.hero__aurora::before {
  background: radial-gradient(42% 46% at 50% 50%, rgba(197, 36, 46, .52), transparent 66%);
  filter: blur(44px);
  animation: hero-wave-a 8s ease-in-out infinite;
}
.hero__aurora::after {
  background: radial-gradient(48% 44% at 50% 50%, rgba(228, 34, 46, .38), transparent 70%);
  filter: blur(54px);
  animation: hero-wave-b 11s ease-in-out infinite;
}
@keyframes hero-wave-a {
  0%   { transform: translate(-30%, -3%) scale(1); }
  25%  { transform: translate(-8%, 14%)  scale(1.12); }
  50%  { transform: translate(24%, -3%)  scale(1); }
  75%  { transform: translate(-4%, 14%)  scale(1.12); }
  100% { transform: translate(-30%, -3%) scale(1); }
}
@keyframes hero-wave-b {
  0%   { transform: translate(26%, 12%)  scale(1.1); }
  50%  { transform: translate(-24%, -5%) scale(1); }
  100% { transform: translate(26%, 12%)  scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__aurora::before,
  .hero__aurora::after { animation: none; }
}
/* light theme: soft chrome/grey tint at the top of the white hero.
   Uses the brand's neutral grey (--grey #999) rather than the crimson accent:
   the warm red fought the near-black title and grey subtitle and muddied them,
   while a neutral grey wash keeps the text at full contrast and lets the red
   CTA and globe accents pop. (Brand palette is red + white/black/chrome-grey;
   blue/purple are off-brand.) */
/* Light theme: a soft brand-crimson tint at the TOP of the hero (behind the nav
   and above the title), mirroring the dark hero's crimson crest. Kept low so the
   near-black title stays high-contrast. */
html[data-theme="light"] .hero__aurora {
  background: linear-gradient(to top, var(--theme-bg) 46%, rgba(197, 36, 46, .10) 118%);
}
html[data-theme="light"] .hero__aurora::before {
  background: radial-gradient(42% 46% at 50% 50%, rgba(197, 36, 46, .10), transparent 66%);
}
html[data-theme="light"] .hero__aurora::after {
  background: radial-gradient(48% 44% at 50% 50%, rgba(228, 34, 46, .07), transparent 70%);
}
/* Mobile: tone down the red glow behind the globe — the hero reads too red on
   small screens where the aurora fills a larger share of the viewport. */
@media (max-width: 767px) {
  .hero__aurora {
    background: linear-gradient(to top, #18181b 58%, #c5242e 215%);
  }
  .hero__aurora::before {
    background: radial-gradient(28% 32% at 50% 50%, rgba(197, 36, 46, .26), transparent 62%);
  }
  .hero__aurora::after {
    background: radial-gradient(32% 30% at 50% 50%, rgba(228, 34, 46, .18), transparent 64%);
  }
}
.hero__content {
  position: relative;
  z-index: 2;
}
.hero__reveal-visual {
  display: inline;
}
.hero__word,
.hero__glyph {
  display: inline-block;
}
.hero__word {
  white-space: nowrap;
}
.is-reveal-ready .hero__glyph {
  opacity: 0;
  filter: blur(12px);
  transition-property: opacity, filter;
  transition-duration: 160ms;
  transition-timing-function: ease-out;
  transition-delay: 0ms;
}
.is-in .hero__glyph {
  opacity: 1;
  filter: blur(0);
  transition-duration: 720ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--hero-glyph-delay);
}
.hero__content.is-reveal-ready .hero__cta {
  opacity: 0;
  transition-property: opacity, background-color, transform;
  transition-duration: 160ms, 180ms, 180ms;
  transition-timing-function: ease-out, ease, ease;
  transition-delay: 0ms;
}
.hero__content.is-in .hero__cta {
  opacity: 1;
  transition-duration: 500ms, 180ms, 180ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1), ease, ease;
  transition-delay: 420ms, 0ms, 0ms;
}
.hero__reveal-a11y,
.copy-dissolve__a11y {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.copy-dissolve__visual {
  display: inline;
}
.copy-dissolve__word {
  display: inline-block;
}
.is-reveal-ready .copy-dissolve__word {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(8px);
}
.is-in .copy-dissolve__word {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1) var(--copy-word-delay),
              filter 800ms cubic-bezier(0.16, 1, 0.3, 1) var(--copy-word-delay),
              transform 800ms cubic-bezier(0.16, 1, 0.3, 1) var(--copy-word-delay);
}
@media (prefers-reduced-motion: reduce) {
  .is-reveal-ready .hero__glyph,
  .hero__content.is-reveal-ready .hero__cta,
  .is-reveal-ready .copy-dissolve__word,
  .is-in .copy-dissolve__word {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}
.hero__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 60px;
  line-height: 72px;
  letter-spacing: -0.5px;
  color: var(--white);
}
.hero__subtitle {
  margin: 16px auto 0;
  max-width: 760px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: var(--text-tertiary);
}
.hero__cta {
  margin-top: 34px;
  height: 50px;
  padding: 0 30px;
  font-size: 18px;
  border-radius: var(--radius-sm);
}
.hero__globe {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  width: 100%;
  height: 720px;
}
/* soft backlight aura behind the globe (frame-glow, GitHub-style) —
   only appears once the globe has fully assembled (data-globe-entrance-phase="settled") */
.hero__globe::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 58%;
  width: 640px;
  height: 640px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(228, 34, 46, .55) 0%, rgba(197, 36, 46, .28) 34%, rgba(197, 36, 46, .08) 55%, transparent 70%);
  filter: blur(56px);
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero__globe[data-globe-entrance-phase="settled"]::before { opacity: 1; }
html[data-theme="light"] .hero__globe::before {
  background: radial-gradient(circle at center,
    rgba(161, 161, 170, .34) 0%, rgba(161, 161, 170, .16) 34%, rgba(161, 161, 170, .05) 55%, transparent 70%);
}
.hero__globe canvas {
  display: block;
  margin-inline: auto;
  cursor: grab;
}
.hero__globe canvas:active {
  cursor: grabbing;
}

/* Shared section heading (h2) */
.section-heading {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  color: var(--white);
}

/* ===================== ONE ECOSYSTEM ===================== */
.ecosystem {
  position: relative;
  z-index: 2;
  padding: 0 80px;
  margin-top: 0;
}
/* tall track: scroll length that steps through the feature cards */
.eco-track {
  position: relative;
  z-index: 2;
  height: 280vh;
}
/* pinned wrapper: card sticks while the track scrolls, cards step on scroll */
.eco-pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
}
@media (prefers-reduced-motion: reduce) {
  .eco-track { height: auto; }
  .eco-pin { position: static; min-height: 0; display: block; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero {
    position: sticky;
    top: var(--hero-eco-sticky-top, 0px);
    bottom: 0;
    z-index: 1;
    --hero-eco-exit-progress: 0;
  }
  .hero__content,
  .hero__globe {
    opacity: calc(1 - var(--hero-eco-exit-progress, 0));
    filter: blur(calc(var(--hero-eco-exit-progress, 0) * 12px));
  }
  .ecosystem {
    z-index: 2;
    background: var(--bg);
  }
  .ecosystem::before {
    content: "";
    position: absolute;
    top: -192px;
    left: 0;
    width: 100%;
    height: 192px;
    background: linear-gradient(180deg, rgba(24, 24, 27, 0) 0%, rgba(24, 24, 27, .68) 58%, #18181b 100%);
    pointer-events: none;
  }
  .hero:focus-within {
    z-index: 3;
  }
  .hero__content:focus-within {
    opacity: 1;
    filter: none;
  }
}
.eco-card {
  position: relative;
  width: 100%;
  max-width: 1280px;
  height: min(840px, calc(100svh - 120px));
  min-height: 0;
  margin-inline: auto;
  padding: 80px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  background: #121216;
  border: 1px solid #2e2e34;
  border-radius: 28px;
  overflow: hidden;
}
/* chained-blockchain-cubes background band behind the card content */
.eco-card__bg {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 150%;
  min-width: 1180px;
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  /* silky slide-in: starts offset along the chain (down-left) + faded,
     glides into place with a smooth expo-out ease when the section lands. */
  opacity: 0;
  transform: translate(-50%, -50%) translate3d(-64px, 40px, 0) scale(1.05);
  transition:
    opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.eco-card__bg.is-in {
  opacity: 1;
  transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .eco-card__bg {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition: none;
  }
}
.eco-card__left {
  position: relative;
  z-index: 2;
  width: 525px;
  flex-shrink: 0;
}
.eco-card__sub {
  margin-top: 16px;
  max-width: 430px;
  font-size: 20px;
  line-height: 28px;
  color: var(--text-tertiary);
}
.eco-card__coin {
  position: absolute;
  left: -205px;
  bottom: -285px;
  width: 900px;
  max-width: none;
  height: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translateY(90px);
  transition: opacity .9s ease, transform 1.05s cubic-bezier(.16, .84, .44, 1);
}
.eco-card__coin.is-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .eco-card__coin { opacity: 1; transform: none; transition: none; }
}

/* stacked feature cards — interactive deck */
.eco-stack {
  position: relative;
  z-index: 2;
  width: 523px;
  margin-right: 32px;
  transform: translateY(13px);
  flex-shrink: 0;
  height: min(660px, calc(100svh - 280px));
}
.eco-fcard {
  position: absolute;
  left: 0; right: 0; top: 0;
  --rot: 4deg; /* per-card resting tilt (see nth-child below) */
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(24, 24, 28, 0.98);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-xl);
  transform-origin: 50% 85%;
  /* hidden until dealt; each card slides UP from below and settles with a
     slight clockwise tilt (deal-in like the reference site) */
  opacity: 0;
  transform: translateY(175px) scale(0.95) rotate(calc(var(--rot) + 5deg));
  transition: top .8s cubic-bezier(.16, .84, .44, 1),
              opacity .5s ease,
              transform .7s cubic-bezier(.16, .84, .44, 1),
              box-shadow .3s ease, border-color .3s ease;
}
.eco-fcard.is-shown {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(var(--rot));
}
/* per-card resting tilt (clockwise) */
.eco-fcard:nth-child(1) { --rot: 3deg; }
.eco-fcard:nth-child(2) { --rot: 0deg; }
.eco-fcard:nth-child(3) { --rot: 2deg; }
.eco-fcard__head {
  display: block;
  width: 100%;
  margin: 0;
  padding: 24px 28px;
  text-align: left;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.eco-fcard__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: var(--white);
}
.eco-fcard__desc {
  margin-top: 8px;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-tertiary);
}
.eco-fcard__panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity .55s ease;
}
.eco-fcard.is-active {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
/* dealt cards keep their full panel (they don't collapse when stacked) */
.eco-fcard.is-shown .eco-fcard__panel {
  max-height: 360px;
  opacity: 1;
}
.eco-fcard__head:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: var(--radius-lg);
}

/* node panel + SVG illustrations */
.node-panel {
  margin: 4px 28px 28px;
  padding: 26px 28px;
  min-height: 224px;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.node-panel--smart-contract {
  background: #000;
}
.node-panel--smart-contract picture {
  display: block;
  width: 100%;
}
.node-panel--w3c-identifiers {
  background: #000;
}
.node-panel--w3c-identifiers picture {
  display: block;
  width: 100%;
}
.node-panel--verifiable-credential {
  background: #000;
}
.node-panel--verifiable-credential picture {
  display: block;
  width: 100%;
}
/* dark/light illustration swap (keyed off the site theme, not prefers-color-scheme) */
.node-panel .node-illus-theme--light { display: none; }
html[data-theme="light"] .node-panel .node-illus-theme--dark { display: none; }
html[data-theme="light"] .node-panel .node-illus-theme--light { display: block; }

.node-illus {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
}
.node-illus--smart-contract {
  max-width: 480px;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}
.node-illus--w3c-identifiers {
  max-width: 480px;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}
.node-illus--verifiable-credential {
  max-width: 480px;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}
/* Node-network illustrations (inline SVG via NodeIllus.tsx) — theme-aware + animated.
   A signal radiates from the hub: nodes fill in a wave, links + spokes pulse,
   and the focus node carries a breathing red halo. */
.node-illus { --node-active: rgba(255, 255, 255, .5); --node-line: rgba(255, 255, 255, .42); }
.node-illus .ring { fill: transparent; stroke: #b9b9c0; stroke-width: 2; }
.node-illus .link,
.node-illus .spoke,
.node-illus .badge-connect { fill: none; stroke: var(--node-line); stroke-width: 1.2; }
.node-illus .cf { stroke: none; }
.node-illus .cf-top { fill: #ef4a54; }
.node-illus .cf-left { fill: #a01d25; }
.node-illus .cf-right { fill: var(--red); }
.node-illus .ce { fill: none; stroke: rgba(255, 255, 255, .92); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.node-illus .check-circle { fill: var(--red); stroke: none; }
.node-illus .check-mark { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.node-illus .focus-halo { fill: none; stroke: var(--red); stroke-width: 2; opacity: .5; transform-box: fill-box; transform-origin: center; }
.node-illus .badge-bg { fill: #1b2236; }
.node-illus .badge-ring { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1; }

/* Light theme: darken rings/lines so they read on the white ground */
html[data-theme="light"] .node-illus { --node-active: rgba(24, 24, 27, .5); --node-line: rgba(24, 24, 27, .26); }
html[data-theme="light"] .node-illus .ring { stroke: #c2c2c8; }

/* Motion: a signal spreads out from the hub (nodes fill), links flash, spokes
   beat bold, and the focus halo breathes. Per-element delays are set inline. */
@keyframes node-fill  { 0%, 68%, 100% { fill: transparent; } 30% { fill: var(--node-active); } }
@keyframes link-flash { 0%, 68%, 100% { opacity: .55; } 30% { opacity: 1; } }
@keyframes spoke-beat { 0%, 100% { opacity: .3; stroke-width: 1; } 50% { opacity: .95; stroke-width: 3; } }
@keyframes halo-beat  { 0%, 100% { opacity: .3; transform: scale(.88); } 50% { opacity: .85; transform: scale(1.14); } }
.node-illus .ring  { animation: node-fill 3.6s ease-in-out infinite; }
.node-illus .link  { animation: link-flash 3.6s ease-in-out infinite; }
.node-illus .spoke { animation: spoke-beat 2.6s ease-in-out infinite; }
.node-illus .focus-halo { animation: halo-beat 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .node-illus .ring, .node-illus .link, .node-illus .spoke, .node-illus .focus-halo { animation: none; }
  .node-illus .ring { fill: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .eco-fcard, .eco-fcard__panel { transition: none; }
}

/* Shared centered heading + sub */
.section-heading--center { text-align: center; }
.section-sub {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 28px;
  color: var(--text-tertiary);
}
.section-sub--center {
  text-align: center;
  max-width: 760px;
  margin: 16px auto 0;
}
.fig-note {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 1px;
  color: #5a5a60;
  margin-top: 40px;
}

/* ===================== CONTINUOUS RIBBON STORY ===================== */
.ribbon-story {
  position: relative;
  z-index: 2;
  isolation: isolate;
  background: var(--bg);
}
.ribbon-flow {
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: clip;
  /* transparent so the grid-ribbon stage behind it (inside .ribbon-story)
     shows through the right-edge negative space. The identical dark base is
     painted by .ribbon-story, so there is no visual change to the sections. */
  background: transparent;
}

/* Grid ribbon: a canvas pinned to the right edge, spanning Sections 2–5.
   Fixed positioning (viewport-relative) sidesteps the page's 0-width flow
   containers. It lives inside .ribbon-story's isolated stacking context at
   z-index 1 — above the base background but below the sections (z-index 2) —
   so it reads as a background/decorative element behind all content. JS fades
   it in only while the Sections 2–5 band is on screen. */
.grid-ribbon {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1;
  display: block;
  width: 50vw;
  height: 100vh;
  height: 100svh;
  pointer-events: none;
  opacity: 0;          /* JS fades in/out at the band edges */
  will-change: opacity;
  /* Edge fade so the fine grid dissolves into the background with no hard
     border — horizontal (both sides) AND vertical (top/bottom). The two
     gradients are intersected, so the grid is strongest in the centre (where
     the red wave lives) and melts away toward every edge of the viewport,
     including the top where it meets the section above. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-composite: intersect;
}
/* Tablet & mobile: the grid becomes a full-width layer so the morphs
   (cubes / robot / logo) read as each section's centred visual. A lighter
   horizontal fade keeps the centred shape from being over-masked. */
@media (max-width: 1023px) {
  .grid-ribbon {
    width: 100vw;
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    mask-image:
      linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  }
}
.ribbon-flow__visual {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1185.65px;
  height: 100%;
  margin-left: -506.67px;
  display: block;
  max-width: none;
  z-index: 1;
  pointer-events: none;
}
.ribbon-flow__mobile { display: none; }
.ribbon-flow > section {
  position: relative;
  z-index: auto;
}

@media (prefers-reduced-motion: reduce) {
  .ribbon-flow__path {
    stroke-dasharray: none !important;
  }

}

@media (min-width: 1024px) {
  .ribbon-flow__visual {
    overflow: visible;
  }
}

@media (max-width: 1023px) {
  .ribbon-flow__visual {
    left: 50%;
    width: clamp(700px, 110vw, 1100px);
    margin-left: 0;
    transform: translateX(-50%);
    overflow: visible;
  }

  .ribbon-flow__path {
    stroke-width: clamp(120px, 23.5vw, 240px);
  }
}

/* ===================== ZETRIX-POWERED TOOLS ===================== */
.tools {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  height: auto;
}
.tools__pin {
  --cube-bottom-y: -72px;
  --cube-bottom-scale: 0.88;
  --cube-bottom-opacity: 0;
  --cube-centre-y: -72px;
  --cube-centre-scale: 0.88;
  --cube-centre-opacity: 0;
  --cube-top-y: -72px;
  --cube-top-scale: 0.88;
  --cube-top-opacity: 0;
  position: relative;
  top: auto;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  padding: 120px 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.tools__pin.is-cubes-assembled {
  --cube-bottom-y: 0px;
  --cube-bottom-scale: 1;
  --cube-bottom-opacity: 1;
  --cube-centre-y: 0px;
  --cube-centre-scale: 1;
  --cube-centre-opacity: 1;
  --cube-top-y: 0px;
  --cube-top-scale: 1;
  --cube-top-opacity: 1;
}
.tools__section-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tools__section-frame {
  z-index: 0;
  object-fit: cover;
}
.tools__inner {
  position: relative;
  z-index: 2;
  width: min(1200px, calc(100% - 48px));
  margin-inline: auto;
}
.tools__left { position: relative; z-index: 3; width: 600px; }
.tools__sub {
  margin-top: 16px;
  width: 100%;
  max-width: 600px;
  font-size: 20px;
  line-height: 28px;
  color: var(--text-tertiary);
}
.tool-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, 290px);
  gap: 20px;
}
.tool-card {
  position: relative;
  height: 176px;
  min-height: 176px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  background: rgba(24, 24, 27, 0.74);
  border: 1px solid rgba(209, 209, 214, 0.20);
  border-radius: 14px;
  transform: translateY(0);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  backdrop-filter: blur(22px) saturate(120%);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.06),
              inset -1px -1px 0 rgba(0, 0, 0, 0.16);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tools__left.is-reveal-ready .tool-card {
  opacity: 0;
  transition: opacity 160ms ease-out,
              transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tools__left.is-in .tool-card {
  opacity: 1;
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--tool-card-delay),
              transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .tools__left.is-reveal-ready .tool-card {
    opacity: 1;
    transition: none;
  }
}
.tool-card__top {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tool-card__icon {
  width: 48px;
  height: 48px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  backdrop-filter: blur(4px) saturate(120%);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.18),
              inset -1px -1px 0 rgba(0, 0, 0, 0.12);
  transition: background-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tool-card__icon img {
  width: 24px;
  height: 24px;
  display: block;
}
.tool-card__arrow {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tool-card__arrow img { width: 100%; height: 100%; display: block; }

@media (hover: hover) and (pointer: fine) {
  .tool-card:hover {
    transform: translateY(-8px) scale(1.01);
    background: rgba(30, 30, 35, 0.92);
    border-color: rgba(228, 34, 46, 0.68);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.46),
                0 10px 30px rgba(197, 36, 46, 0.22),
                inset 1px 1px 0 rgba(255, 255, 255, 0.12),
                inset -1px -1px 0 rgba(0, 0, 0, 0.12);
  }

  .tool-card:hover .tool-card__arrow {
    transform: translate(3px, -3px);
  }

  .tool-card:hover .tool-card__icon {
    background: rgba(197, 36, 46, 0.24);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.22),
                inset -1px -1px 0 rgba(0, 0, 0, 0.10),
                0 6px 16px rgba(197, 36, 46, 0.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tool-card,
  .tool-card__icon,
  .tool-card__arrow {
    transition: none;
  }

  .tool-card:hover {
    transform: none;
  }
}
.tool-card__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tool-card__title {
  height: 24px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: var(--white);
}
.tool-card__desc {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-tertiary);
}
.tools__art {
  --tools-art-active-opacity: 1;
  position: absolute;
  top: -22px;
  right: 0;
  width: 576px;
  height: 820px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: none;
}
.tools__pin.is-cubes-visible .tools__art {
  opacity: var(--tools-art-active-opacity);
  visibility: visible;
}
/* The grid-ribbon canvas renders the cube stack at every width now, so the
   image cubes are hidden throughout (no-canvas safety net only). */
.tools__art { display: none; }
.tools__art-layer,
.tools__cube {
  position: absolute;
  display: block;
  max-width: none;
}
.tools__art-particles { left: 37.82px; top: 35.75px; width: 589.178px; height: 694.119px; }
.tools__art-small-cubes { left: 127.48px; top: 289px; width: 411.836px; height: 397px; }
.tools__art-ticks { left: 106px; top: 116px; width: 458px; height: 607px; }
.tools__art-connectors { left: 318.5px; top: 277.5px; width: 3px; height: 256px; }

@keyframes tools-particles-float {
  0%, 100% { translate: 0 0; }
  35% { translate: 10px -14px; }
  70% { translate: -8px 8px; }
}

@keyframes tools-wire-cubes-float {
  0%, 100% { translate: 0 0; }
  38% { translate: -12px 18px; }
  72% { translate: 13px -10px; }
}

@keyframes tools-rendered-cube-float {
  0%, 100% { translate: 0 0; }
  50% { translate: var(--cube-float-x) var(--cube-float-y); }
}

.tools__art-particles {
  animation: tools-particles-float 12s ease-in-out -5s infinite;
  animation-play-state: paused;
}
.tools__art-small-cubes {
  animation: tools-wire-cubes-float 10s ease-in-out -3s infinite;
  animation-play-state: paused;
}

.tools__cube {
  transform: translateY(var(--cube-y)) scale(var(--cube-scale));
  transform-origin: 50% 100%;
  opacity: var(--cube-opacity);
  will-change: transform, opacity;
  transition:
    transform 1200ms cubic-bezier(.16, 1, .3, 1) var(--cube-entry-delay),
    opacity 700ms ease-out var(--cube-entry-delay);
  animation: tools-rendered-cube-float var(--cube-float-duration) ease-in-out var(--cube-float-delay) infinite;
  animation-play-state: paused;
}
.tools__pin:not(.is-cubes-visible) .tools__cube {
  transition: none;
}
.tools__cube--bottom {
  --cube-entry-delay: 0ms;
  --cube-y: var(--cube-bottom-y);
  --cube-scale: var(--cube-bottom-scale);
  --cube-opacity: var(--cube-bottom-opacity);
  --cube-float-x: -3px;
  --cube-float-duration: 6.6s;
  --cube-float-y: -11px;
  --cube-float-delay: -3.7s;
  left: 251.12px; top: 584px; width: 154.211px; height: 160px;
}
.tools__cube--centre {
  --cube-entry-delay: 250ms;
  --cube-y: var(--cube-centre-y);
  --cube-scale: var(--cube-centre-scale);
  --cube-opacity: var(--cube-centre-opacity);
  --cube-float-x: 4px;
  --cube-float-duration: 7.8s;
  --cube-float-y: -16px;
  --cube-float-delay: -2.4s;
  left: 183.66px; top: 260px; width: 289.145px; height: 300px;
}
.tools__cube--top {
  --cube-entry-delay: 500ms;
  --cube-y: var(--cube-top-y);
  --cube-scale: var(--cube-top-scale);
  --cube-opacity: var(--cube-top-opacity);
  --cube-float-x: -4px;
  --cube-float-duration: 6.2s;
  --cube-float-y: -13px;
  --cube-float-delay: -1.3s;
  left: 251.12px; top: 76px; width: 154.211px; height: 160px;
}

.tools__pin.is-cube-assembly-complete.is-float-active .tools__art-particles,
.tools__pin.is-cube-assembly-complete.is-float-active .tools__art-small-cubes,
.tools__pin.is-cube-assembly-complete.is-float-active .tools__cube {
  animation-play-state: running;
  will-change: translate;
}

@media (prefers-reduced-motion: reduce) {
  .tools__art-particles,
  .tools__art-small-cubes,
  .tools__cube {
    animation: none;
    translate: 0 0;
  }
  .tools__cube { transition: none; }
}

@media (min-width: 1024px) and (max-height: 899px) {
  .eco-card { padding: 48px; }
  .eco-card__coin { bottom: -360px; }
  .tools__pin {
    padding: 112px 0 72px;
    align-items: flex-start;
  }
  /* Flow at 1:1 (no scale-to-fit) so the fonts render at the same size as the
     Agentic section; the section grows taller than the viewport and scrolls. */
  .tools__inner {
    left: auto;
    width: min(1200px, calc(100% - 48px));
    max-width: none;
    margin-inline: auto;
    transform: none;
  }
  .tools__left { width: 600px; }
  .tool-grid {
    width: auto;
    grid-template-columns: repeat(2, 290px);
  }
}

@media (min-width: 1024px) and (max-height: 799px) {
  .tools__inner {
    width: min(1200px, calc(100% - 48px));
    transform: none;
    flex-shrink: 0;
  }
}

@media (max-width: 1023px), (prefers-reduced-motion: reduce) {
  .tools { height: auto; }
  .tools__pin {
    position: relative;
    top: auto;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
  }
}

@media (max-width: 1023px) {
  .ecosystem { padding: 88px 32px; }
  .eco-track { height: auto; }
  .eco-pin { position: static; min-height: 0; display: block; }
  .eco-card {
    height: auto;
    min-height: 0;
    padding: 48px;
    flex-direction: column;
  }
  .eco-card__left { width: 100%; }
  .eco-stack { width: 100%; margin-right: 0; transform: none; height: 660px; }
  .tools__pin {
    padding: 112px 0 80px;
    display: block;
  }
  .tools__left { width: min(600px, 100%); }
  .tool-grid { grid-template-columns: repeat(2, 290px); }
  .tools__art {
    --tools-art-active-opacity: .38;
    right: -180px;
  }
}

@media (max-width: 699px) {
  .ecosystem { padding: 80px 20px; }
  .eco-card { padding: 32px 20px; }
  .eco-card__coin { left: -260px; width: 720px; }
  .eco-stack { height: 620px; }
  .tools__pin { padding: 96px 0 64px; }
  .tools__inner { width: calc(100% - 40px); }
  .tool-grid { grid-template-columns: 1fr; }
  .tool-card { width: 100%; }
  .tools__art {
    --tools-art-active-opacity: .28;
    display: block;
    right: -250px;
    transform: scale(.72);
    transform-origin: 50% 0;
  }
}

/* ===================== AI LAYER ===================== */
.ai-layer {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  height: auto;
}
.ai-layer__pin {
  position: relative;
  top: auto;
  width: 100%;
  /* min-height (not fixed height) so the section grows to fit its content on
     short windows and flows like the NurAI section — no scale-to-fit, so the
     Agentic copy/cards render at the same size as NurAI/Tools. */
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}
.ai-layer__backdrop {
  /* Hidden per request: removes the decorative dots (.ai-layer__particles) and
     frame (.ai-layer__frame) so only the ribbon shows behind this section. */
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.ai-layer__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
.ai-layer__frame { opacity: .7; }
.ai-layer__particles {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(50vw, 720px);
  max-width: none;
  opacity: .52;
}
.ai-layer__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-top: 161px;
}
.ai-layer__inner > .section-heading {
  width: min(800px, 100%);
  margin-inline: auto;
}
.ai-heading__break--mobile { display: none; }
.ai-cards {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, 590px);
  gap: 20px;
}
.ai-card {
  min-height: 566px;
  padding: 24px;
  background: rgba(24, 24, 27, 0.74);
  border: 1px solid rgba(209, 209, 214, 0.20);
  border-radius: var(--radius-xl);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  backdrop-filter: blur(22px) saturate(120%);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .18),
              inset 1px 1px 0 rgba(255, 255, 255, 0.06),
              inset -1px -1px 0 rgba(0, 0, 0, 0.16);
}
.ai-card__media {
  width: 540px;
  aspect-ratio: 540 / 340;
  border-radius: var(--radius-lg);
  overflow: hidden;
  line-height: 0;
}
.ai-card__media-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.ai-card__base-image {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 320ms cubic-bezier(.16, 1, .3, 1);
}
.ai-card__body { padding-top: 24px; }
.ai-card__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: var(--white);
}
.ai-card__desc {
  margin-top: 8px;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-tertiary);
}
.ai-card__cta {
  margin-top: 24px;
  height: 44px;
  padding: 0 16px;
  font-size: 15px;
  border-radius: var(--radius-sm);
}
.arrow-ext { display: inline-flex; }
.arrow-ext svg { width: 16px; height: 16px; }

/* ---- Your Agentic Twin (Section 4): text left, mascot right (rendered by the
   grid-ribbon canvas on desktop; the .agentic__mascot image is the mobile
   fallback). ---- */
.ai-layer__inner.agentic {
  height: 100%;
  padding-top: 150px;         /* top-align the copy near the top of the section */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}
/* flex-grow so the text column fills the row (like nurai__text), making the card
   grid render the same ~290px cards as the Tools (section 3) grid. */
.agentic__text { flex: 1 1 auto; min-width: 0; }
.agentic__title { text-align: left; }
.agentic__sub {
  margin-top: 16px;
  max-width: 600px;
  font-size: 20px;
  line-height: 28px;
  color: var(--text-tertiary);
}
.agentic__cta {
  margin-top: 24px;
  height: 50px;
  padding: 0 30px;
  font-size: 18px;
  border-radius: var(--radius-sm);
}
.agentic__art {
  flex: 0 0 auto;
  width: 46%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The grid canvas now draws the mascot at every width, so the fallback image
   is hidden throughout (kept in the DOM only as a no-canvas safety net). */
.agentic__mascot { display: none; }
/* Tablet/mobile: stack, centre horizontally, top-align the copy so the grid
   morph (centred lower in the viewport) reads as the visual below it. The
   section stays full-height so the fixed morph has room below the copy. */
@media (max-width: 1023px) {
  .ai-layer.agentic-section .ai-layer__pin {
    min-height: 100vh;
    min-height: 100svh;
  }
  .ai-layer__inner.agentic {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 28px;
    padding-top: 96px;
  }
  /* Full-width copy column so the cards fill the section like the Tools grid
     (Section 3); the subtitle keeps its own max-width for readable line length. */
  .agentic__text { max-width: none; width: 100%; }
  .agentic__title { text-align: center; }
  .agentic__sub { margin-inline: auto; }
  .agentic__art { width: 100%; }
}

/* ---- AI intro: title section before the Agentic Twin (heading left, the AI-Lab
   partners marquee right). Introduces the AI theme. ---- */
.ai-intro {
  position: relative;
  /* hug the content — this title introduces the Agentic Twin + NurAI below it,
     so it sits close to them instead of taking a full viewport. */
  padding-block: 120px;
}
.ai-intro__inner {
  position: relative;
  z-index: 2;
  /* Match the other sections' content edge (1200 box, 24px gutter only when the
     viewport is narrower) so the left-aligned title lines up across the page. */
  width: min(1200px, calc(100% - 48px));
  margin-inline: auto;
  /* title and partners stacked vertically, left-aligned */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 40px;
}
.ai-intro__lead { max-width: 640px; margin: 0; }
.ai-intro__title { text-align: left; }
.ai-intro__partners {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* full-width carousel frame — fills the section's content width (max 1200) */
.ai-intro__partners .partners { width: 100%; max-width: none; }
.ai-intro__partners .partners__label { text-align: left; }
@media (max-width: 1023px) {
  .ai-intro__inner { gap: 32px; }
}

/* ---- NurAI (its own section, same two-column treatment as the Agentic Twin:
   copy left, illustration right) ---- */
.nurai {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-start;      /* top-align the copy in the section */
}
.nurai__inner {
  position: relative;
  z-index: 2;
  /* Match the other sections' content edge so the title lines up across the page. */
  width: min(1200px, calc(100% - 48px));
  margin-inline: auto;
  padding-top: 150px;           /* near the top of the section */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}
.nurai__art {
  flex: 0 0 auto;
  width: 46%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The grid canvas draws the wave logo at every width, so the fallback SVG is
   hidden throughout. */
.nurai__logo { display: none; }
.nurai__text { flex: 1 1 auto; min-width: 0; }
.nurai__title { text-align: left; }
.nurai__sub {
  margin-top: 16px;
  max-width: 600px;
  font-size: 20px;
  line-height: 28px;
  color: var(--text-tertiary);
}
.nurai__cta {
  margin-top: 24px;
  height: 50px;
  padding: 0 30px;
  font-size: 18px;
  border-radius: var(--radius-sm);
}
@media (max-width: 1023px) {
  .nurai__inner {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 28px;
    padding-top: 96px;
    padding-bottom: 96px;
  }
  .nurai__art { width: 100%; max-width: 520px; }
  /* Full-width copy column so the cards fill the section like the Tools grid
     (Section 3); the subtitle keeps its own max-width for readable line length. */
  .nurai__text { flex: 0 0 auto; width: 100%; max-width: none; }
  .nurai__title { text-align: center; }
  .nurai__sub { margin-inline: auto; }
}
/* ---- Selling-point cards under the Agentic Twin + NurAI CTAs. Same glass
   treatment as the Tools cards (Section 3), compact 2-up grid. Visible by
   default (the NurAI section isn't wired to the scroll-reveal observer). ---- */
.sp-grid {
  margin-top: 40px;
  display: grid;
  /* Match the Tools (Section 3) grid: two 290px cards, 20px gutter. minmax
     lets them shrink gracefully when the column is narrower than 600px. */
  grid-template-columns: repeat(2, minmax(0, 290px));
  gap: 20px;
  width: 100%;
}
.sp-card {
  position: relative;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  text-align: left;   /* stay left-aligned even where the section centres its copy (tablet/mobile) */
  background: rgba(24, 24, 27, 0.74);
  border: 1px solid rgba(209, 209, 214, 0.20);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  backdrop-filter: blur(22px) saturate(120%);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.06),
              inset -1px -1px 0 rgba(0, 0, 0, 0.16);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-card__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.10);
  color: var(--white);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  backdrop-filter: blur(4px) saturate(120%);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.18),
              inset -1px -1px 0 rgba(0, 0, 0, 0.12);
  transition: background-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
              color 240ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-card__icon svg { width: 22px; height: 22px; display: block; }
.sp-card__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: var(--white);
}
.sp-card__desc {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-tertiary);
}
@media (hover: hover) and (pointer: fine) {
  .sp-card:hover {
    transform: translateY(-6px);
    background: rgba(30, 30, 35, 0.92);
    border-color: rgba(228, 34, 46, 0.60);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.44),
                0 8px 24px rgba(197, 36, 46, 0.20),
                inset 1px 1px 0 rgba(255, 255, 255, 0.10),
                inset -1px -1px 0 rgba(0, 0, 0, 0.12);
  }
  .sp-card:hover .sp-card__icon {
    background: rgba(197, 36, 46, 0.24);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.22),
                inset -1px -1px 0 rgba(0, 0, 0, 0.10),
                0 6px 16px rgba(197, 36, 46, 0.16);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sp-card, .sp-card__icon { transition: none; }
  .sp-card:hover { transform: none; }
}
@media (max-width: 1023px) {
  /* Fill the column (like the Tools grid) so the cards run full-width on
     tablet, instead of capping at the desktop 290px card size. */
  .sp-grid { margin-inline: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phones: shrink the card type + spacing to match the Tools (Section 3) cards,
   and drop the enlarged AI-section subtitles back to the 16px mobile size. */
@media (max-width: 767px) {
  /* Keep a 2-up grid on phones (like the Tools cards), evenly splitting the
     column, instead of collapsing to a single column. */
  .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sp-card { padding: 14px; gap: 10px; }
  /* Match the Tools (section 3) card text exactly: 16/22 title, 13/17 desc. */
  .sp-card__title { font-size: 16px; line-height: 22px; }
  .sp-card__desc { font-size: 13px; line-height: 17px; }
  .agentic__sub,
  .nurai__sub { font-size: 16px; line-height: 24px; }
  /* Know more buttons step down with the hero "Get Started" on phones. */
  .agentic__cta,
  .nurai__cta {
    height: 44px;
    padding: 0 20px;
    font-size: 16px;
    line-height: 24px;
    border-radius: 10px;
  }
}
@media (max-width: 374px) {
  .sp-grid { grid-template-columns: 1fr; }
}

.ai-card {
  transition: transform 260ms cubic-bezier(.16, 1, .3, 1),
              border-color 260ms ease,
              background-color 260ms ease,
              box-shadow 260ms ease;
}
.ai-layer__inner.is-reveal-ready .ai-card {
  --card-reveal-blur: 6px;
  opacity: 0;
  filter: blur(var(--card-reveal-blur));
  transition: opacity 160ms ease-out,
              filter 160ms ease-out,
              transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 260ms ease,
              background-color 260ms ease,
              box-shadow 260ms ease;
}
/* Entrance rides on opacity + blur (like the Tools cards); transform is kept at a
   snappy 240ms with no delay so the hover lift responds instantly. */
.ai-layer__inner.is-in .ai-card {
  opacity: 1;
  filter: blur(0);
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--tool-card-delay),
              filter 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--tool-card-delay),
              transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 260ms ease,
              background-color 260ms ease,
              box-shadow 260ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .ai-card:hover,
  .ai-layer__inner.is-in .ai-card:hover {
    transform: translateY(-6px);
    background: rgba(28, 28, 32, .88);
    border-color: rgba(228, 34, 46, .54);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .36),
                0 10px 28px rgba(197, 36, 46, .16),
                inset 1px 1px 0 rgba(255, 255, 255, .08);
  }

  .ai-card:hover .ai-card__base-image {
    transform: scale(1.025);
  }
}
.ai-card:focus-within {
  outline: 2px solid rgba(255, 255, 255, .92);
  outline-offset: 3px;
  border-color: rgba(228, 34, 46, .64);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .36),
              0 0 0 4px rgba(197, 36, 46, .18);
}
.ai-card:focus-within .ai-card__base-image {
  transform: scale(1.025);
}
.ai-card__cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.ai-card:hover .arrow-ext,
.ai-card:focus-within .arrow-ext {
  transform: translate(3px, -3px);
}
.ai-card .arrow-ext {
  transition: transform 220ms cubic-bezier(.16, 1, .3, 1);
}

@media (min-width: 900px) and (max-width: 1279px) {
  .ai-layer__inner {
    width: calc(100% - 80px);
    padding-top: 140px;
  }
  .ai-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-card__media { width: 100%; }
}

@media (min-width: 1280px) and (max-height: 899px) {
  .ai-layer__inner {
    position: absolute;
    left: 50%;
    top: 84px;
    width: 1363.636px;
    max-width: none;
    height: 702px;
    padding-top: 0;
    transform: translateX(-50%) scale(.88);
    transform-origin: 50% 0;
  }
  .ai-cards {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ai-card__media {
    width: 100%;
  }
}

@media (min-width: 1280px) and (max-height: 799px) {
  .ai-layer__inner {
    top: 88px;
    width: 1538.462px;
    transform: translateX(-50%) scale(.78);
  }
}

@media (min-width: 1024px) and (max-width: 1279px) and (max-height: 899px) {
  .ai-layer__inner {
    position: absolute;
    left: 50%;
    top: 88px;
    width: min(1421.053px, calc(131.579% - 52.632px));
    max-width: none;
    height: 702px;
    padding-top: 0;
    transform: translateX(-50%) scale(.76);
    transform-origin: 50% 0;
  }

  .ai-cards {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-card__media {
    width: 100%;
  }
}

/* Override the short-desktop scale-to-fit above: let the Agentic inner flow at
   1:1 (like NurAI) so its title, sub and cards render at the same size — no
   downscaling. The pin now uses min-height, so the taller content isn't clipped. */
@media (min-width: 1024px) and (max-height: 899px) {
  .ai-layer.agentic-section .ai-layer__inner.agentic {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    height: auto;
    padding-top: 150px;
    transform: none;
  }
}

@media (max-width: 1023px), (prefers-reduced-motion: reduce) {
  .ai-layer { height: auto; }
  .ai-layer__pin {
    position: relative;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
  }
}

@media (max-width: 899px) {
  .ai-layer__pin {
    min-height: 100vh;
    min-height: 100svh;
    padding: 96px 24px 80px;
  }
  .ai-layer__inner {
    width: 100%;
    max-width: 590px;
    padding-top: 0;
  }
  .ai-cards {
    margin-top: 40px;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ai-card {
    width: 100%;
    min-height: 0;
  }
  .ai-card__media { width: 100%; }
}

@media (max-width: 599px) {
  .ai-layer__pin { padding-inline: 20px; }
  .ai-layer__inner > .section-heading {
    width: calc(100% + 16px);
    margin-inline: -8px;
    font-size: clamp(30px, 9vw, 40px);
    line-height: 1.18;
    white-space: nowrap;
  }
  .ai-heading__break--mobile { display: inline; }
  .ai-heading__break--desktop { display: none; }
  .ai-card { padding: 16px; }
  .ai-card__body { padding-top: 20px; }
  .ai-card__title { font-size: 19px; line-height: 26px; }
  .ai-card__cta { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-layer,
  .ai-layer *,
  .ai-layer *::before,
  .ai-layer *::after {
    animation: none !important;
    transition: none !important;
  }
  .ai-layer .section-heading,
  .ai-layer .ai-card,
  .ai-layer .ai-card:hover,
  .ai-layer .ai-card:focus-within,
  .ai-layer .ai-card__base-image,
  .ai-layer .ai-card .arrow-ext {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* ===================== ROBOTICS ===================== */
.robotics {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
}
.robotics__pin {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}
.robotics__inner {
  position: absolute;
  top: 202px;
  left: 50%;
  width: 1200px;
  height: 620px;
  transform: translateX(-50%);
  transform-origin: 50% 0;
}
.robotics__heading {
  width: 100%;
  max-width: 600px;
  min-height: 120px;   /* was fixed 120px; grow so the narrower wrapping copy isn't clipped */
  margin-inline: 0;
  text-align: left;
}
.robotics__title {
  font-size: 40px;
  line-height: 48px;
  text-align: left;
}
.robotics__subtitle {
  margin-top: 16px;
  margin-inline: 0;
  max-width: 480px;
  font-size: 20px;
  line-height: 28px;
  text-align: left;
}
.robot-cards {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 384px);
  gap: 24px;
}
.robot-card {
  position: relative;
  width: 384px;
  height: 460px;
  border: 1px solid transparent;
  border-radius: 16px;
  overflow: hidden;
  background: #121216;
  box-shadow: none;
  transform: translateY(0) scale(1);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.robotics__inner.is-reveal-ready .robot-card {
  --card-reveal-y: 28px;
  --card-reveal-blur: 6px;
  opacity: 0;
  transform: translateY(var(--card-reveal-y)) scale(.985);
  filter: blur(var(--card-reveal-blur));
  transition: opacity 160ms ease-out,
              transform 160ms ease-out,
              filter 160ms ease-out,
              border-color 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.robotics__inner.is-in .robot-card {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--tool-card-delay),
              transform 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--tool-card-delay),
              filter 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--tool-card-delay),
              border-color 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.robot-card__image {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
  transform-origin: center top;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.robot-card__caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 20px;
  min-height: 144px;
  padding: 16px;
  border: 1px solid rgba(209, 209, 214, 0.2);
  border-radius: 14px;
  background: rgba(24, 24, 27, 0.74);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  backdrop-filter: blur(22px) saturate(120%);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.06),
              inset -1px -1px 0 rgba(0, 0, 0, 0.16);
}
.robot-card__meta {
  height: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-size: 12px;
  line-height: 16px;
  color: var(--white);
}
.robot-card__arrow {
  width: 24px;
  height: 24px;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.robot-card__title {
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: var(--white);
}
.robot-card__desc {
  margin-top: 4px;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-tertiary);
}
.robotics > .fig-note {
  position: absolute;
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  .robot-card:hover,
  .robotics__inner.is-in .robot-card:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: rgba(228, 34, 46, 0.54);
    box-shadow: none;
  }
  .robot-card:hover .robot-card__image {
    transform: scale(1.035);
  }
  .robot-card:hover .robot-card__arrow {
    transform: translate(3px, -3px);
  }
}

@media (min-width: 1280px) and (max-height: 899px) {
  /* Flow at 1:1 (no scale-to-fit) so the title + subtitle render at the same
     size as the Agentic section; the pin grows and scrolls if content is tall. */
  .robotics__pin {
    padding: 120px 0 56px;
  }
  .robotics__inner {
    position: static;
    top: auto;
    left: auto;
    width: min(1200px, calc(100% - 48px));
    height: auto;
    margin-inline: auto;
    transform: none;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) and (max-height: 899px) {
  .robotics__pin {
    padding: 120px 40px 56px;
  }
  .robotics__inner {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    margin-inline: auto;
    transform: none;
  }
  .robot-cards {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .robot-card {
    width: 100%;
  }
}

/* <=1279 (phone through landscape tablet): the robotics cards are a contained,
   centred grid — NOT the >=1280 pinned scrolly deck (which fans cards out beyond
   the section). Keeps the robot images within the section on tablet. */
@media (max-width: 1279px) {
  .robotics__pin {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    overflow: visible;
    padding: 112px 40px 80px;
  }
  .robotics__inner {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    transform: none;
  }
  .robotics__heading {
    width: min(800px, 100%);
    height: auto;
  }
  .robot-cards {
    grid-template-columns: repeat(2, minmax(0, 384px));
    justify-content: center;
  }
  .robot-card {
    width: 100%;
    height: auto;
    aspect-ratio: 384 / 460;
  }
}

@media (max-width: 899px) {
  .ai-layer__inner.is-reveal-ready .ai-card,
  .robotics__inner.is-reveal-ready .robot-card {
    --card-reveal-y: 18px;
    --card-reveal-blur: 4px;
  }
  .robotics__pin {
    padding: 96px 24px 80px;
  }
  .robotics__title {
    font-size: clamp(30px, 7vw, 40px);
    line-height: 1.18;
  }
  .robotics__subtitle {
    font-size: 18px;
    line-height: 26px;
  }
  .robot-cards {
    grid-template-columns: 1fr;
    max-width: 384px;
    margin-inline: auto;
  }
}

@media (max-width: 479px) {
  .robotics__pin {
    padding-inline: 20px;
  }
  .robot-card__caption {
    left: 16px;
    right: 16px;
    bottom: 16px;
    min-height: 0;
    padding: 14px;
  }
  .robot-card__desc {
    font-size: 15px;
    line-height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .robotics *,
  .robotics *::before,
  .robotics *::after {
    animation: none !important;
    transition: none !important;
  }
  .robot-card,
  .robot-card:hover,
  .robot-card__image,
  .robot-card__arrow {
    opacity: 1;
    filter: none;
    transform: none !important;
  }
}

/* ===================== LAYERS / CAROUSEL ===================== */
.layers-cta-handoff {
  position: relative;
  height: 400vh;
  /* Stable small-viewport height (matches every other scroll-jacked section).
     Using dvh here made the container resize as the mobile address bar hid/showed,
     and at 400x that lurch threw the scroll toward the footer. */
  height: 400svh;
}
.layers-track {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  z-index: 1;
  /* opaque page background so the sticky hero (+ its red aurora) doesn't bleed through */
  background: var(--bg);
}
.layers__pin {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.layers__inner {
  position: absolute;
  top: max(128px, calc(50% - 404px));
  left: 50%;
  width: 1200px;
  height: 808px;
  transform: translateX(-50%);
  transform-origin: 50% 0;
  opacity: calc(1 - var(--layers-exit-progress, 0));
  filter: blur(calc(var(--layers-exit-progress, 0) * 12px));
  will-change: opacity, filter;
}
.layers__heading {
  width: 800px;
  margin-inline: auto;
}
.layers__heading .section-heading {
  width: 700px;
  margin-inline: auto;
  font-size: 40px;
  line-height: 48px;
}
.layers__heading .section-sub {
  width: 800px;
  margin-top: 16px;
  font-size: 20px;
  line-height: 28px;
}
.carousel {
  width: 1200px;
  margin-top: 40px;
}
.carousel__stack {
  position: relative;
  width: 840px;
  height: 448px;
  margin-inline: auto;
}
.carousel__card {
  position: absolute;
  top: 48px;
  left: 20px;
  width: 800px;
  height: 400px;
  padding: 16px;
  border: 1px solid rgba(209, 209, 214, 0.20);
  border-radius: 16px;
  background: rgba(24, 24, 27, 0.70);
  transform: translate3d(var(--card-x, 0), var(--card-y, 0), 0) rotate(var(--card-rotate, 0deg)) scale(var(--card-scale, 1));
  opacity: var(--card-opacity, 1);
  z-index: var(--card-z, 1);
  will-change: transform, opacity;
}
.carousel__card img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}
.carousel__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 800px;
  min-height: 80px;
  margin: 24px auto 0;
}
.carousel__text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 480px;
}
.carousel__title {
  font-family: var(--font-body);
  font-weight: 600;
  /* Match the Agentic Twin card text (.sp-card__title): 20/28. Short-desktop
     blocks scale the deck, so they enlarge these to compensate and land back
     on 20/16 rendered. */
  font-size: 20px;
  line-height: 28px;
  color: var(--white);
}
.carousel__desc {
  margin-top: 4px;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-tertiary);
}
.carousel__controls {
  display: flex;
  align-items: center;
  gap: 24px;
}
.carousel__btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(209, 209, 214, 0.20);
  border-radius: 6px;
  color: var(--white);
}
.carousel__btn:hover { background: rgba(255, 255, 255, 0.06); }
.carousel__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.carousel__btn:focus-visible { outline: 2px solid #e4222e; outline-offset: 3px; }
.carousel__btn svg { width: 16px; height: 16px; }
.carousel__progress {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
}
.carousel__progress i {
  width: 2px;
  height: 32px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
  transform: scaleY(.5);
  transition: transform 220ms ease, background-color 220ms ease;
}
.carousel__progress i.is-active {
  transform: scaleY(1);
  background: var(--white);
}

@media (min-width: 1024px) and (max-height: 899px) {
  /* Keep the heading + subtitle at full size (matching the Agentic section);
     scale only the card deck so the pinned single-screen layout still fits. */
  .layers__inner {
    top: 128px;   /* clear gap below the floating nav during the card scroll */
    height: auto;
    transform: translateX(-50%);
  }
  .carousel {
    transform: scale(.66);
    transform-origin: 50% 0;
  }
  /* Enlarge to counter the .66 deck scale so the foot text renders at the
     Agentic card sizes (~20/16) rather than shrinking with the deck. */
  .carousel__title { font-size: 30px; line-height: 42px; }
  .carousel__desc { font-size: 24px; line-height: 36px; }
}

@media (min-width: 1024px) and (max-height: 749px) {
  .layers__inner {
    top: 104px;   /* keep a gap below the nav on short screens too */
  }
  .carousel {
    transform: scale(.56);
  }
  /* Counter the .56 deck scale (see above). */
  .carousel__title { font-size: 36px; line-height: 50px; }
  .carousel__desc { font-size: 29px; line-height: 43px; }
}

/* Narrow screens: shared element sizing. Applies to both the pinned
   scroll-driven layout below and the reduced-motion flow fallback (file end). */
@media (max-width: 1023px), (prefers-reduced-motion: reduce) {
  .layers__heading,
  .layers__heading .section-heading,
  .layers__heading .section-sub,
  .carousel,
  .carousel__foot { width: 100%; }
  .carousel__stack {
    width: 100%;
    height: auto;
    aspect-ratio: 840 / 448;
  }
  .carousel__card {
    top: 10.71%;
    left: 2.38%;
    width: 95.24%;
    height: 89.29%;
    padding: clamp(8px, 1.9vw, 16px);
  }
}

/* Narrow screens keep the desktop pinned + scroll-driven hand-off. The inner is
   centred inside the pinned 100svh frame and sized to fit; the base rule's
   opacity/blur dissolve is preserved so the CTA hand-off still plays. */
@media (max-width: 1023px) {
  .layers__pin { padding-inline: 24px; }
  .layers__inner {
    top: 50%;
    left: 50%;
    width: min(800px, calc(100% - 48px));
    height: auto;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
  }
  .carousel { margin-top: clamp(20px, 6svh, 80px); }
}

@media (max-width: 599px) {
  .layers__heading .section-heading {
    font-size: 32px;
    line-height: 40px;
  }
  .layers__heading .section-sub {
    font-size: 18px;
    line-height: 26px;
  }
  .carousel__foot {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }
  .carousel__text { width: 100%; }
  .carousel__title { font-size: 28px; }
}

.layers__inner.is-reveal-ready .carousel__stack {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}
.layers__inner.is-reveal-ready .carousel__foot {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}
.layers__inner.is-in .carousel__stack {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 900ms cubic-bezier(.16, 1, .3, 1) var(--tool-card-delay),
              transform 900ms cubic-bezier(.16, 1, .3, 1) var(--tool-card-delay);
}
.layers__inner.is-in .carousel__foot {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 900ms cubic-bezier(.16, 1, .3, 1) var(--tool-card-delay),
              transform 900ms cubic-bezier(.16, 1, .3, 1) var(--tool-card-delay);
}

@media (prefers-reduced-motion: reduce) {
  .layers__inner,
  .layers__inner *,
  .layers__inner *::before,
  .layers__inner *::after {
    animation: none !important;
    transition: none !important;
  }
  .layers__inner.is-reveal-ready .carousel__stack,
  .layers__inner.is-reveal-ready .carousel__foot {
    opacity: 1;
    transform: none;
  }
}

/* ===================== CTA ===================== */
.cta {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 40px 0;
  background: var(--bg);
}
.cta::before {
  content: "";
  position: absolute;
  top: -192px;
  left: 0;
  width: 100%;
  height: 192px;
  background: linear-gradient(180deg, rgba(24, 24, 27, 0) 0%, rgba(24, 24, 27, .68) 58%, #18181b 100%);
  pointer-events: none;
}
.cta__panel {
  position: relative;
  width: min(1200px, calc(100vw - 160px));
  height: min(640px, calc(100svh - 260px));
  background: #060608;
  border: 1px solid rgba(209, 209, 214, 0.20);
  border-radius: 28px;
  overflow: hidden;
}
.cta__panel::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .96) 18%, rgba(0, 0, 0, .66) 42%, rgba(0, 0, 0, 0) 56.057%);
  pointer-events: none;
}
.cta__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
.cta__content {
  position: absolute;
  top: 50%;
  left: 80px;
  z-index: 2;
  width: 529px;
  transform: translateY(-50%);
}
.cta__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 48px;
  line-height: 64px;
  letter-spacing: 0;
  color: var(--white);
  white-space: nowrap;
}
.cta__desc {
  margin-top: 8px;
  width: 494px;
  max-width: 100%;
  font-size: 20px;
  line-height: 28px;
  color: var(--text-tertiary);
}
.cta__actions {
  margin-top: 24px;
  display: flex;
  gap: 16px;
}
.cta__btn {
  height: 50px;
  padding: 0 30px;
  font-size: 18px;
  border-radius: var(--radius-sm);
}
.cta__btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}
.btn--outline {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.btn--outline:hover { background: rgba(255, 255, 255, 0.06); }

/* ===== PARTNERS — "Partner of our AI Lab" glass-pill marquee (Figma 453:824) ===== */
.partners {
  width: min(1200px, calc(100vw - 160px));
}
.partners__label {
  margin: 0 0 16px;
  text-align: left;
  font-family: "Titillium Web", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
  color: #fff;
}
.partners__marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.partners__track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: partners-scroll 42s linear infinite;
}
.partners__marquee:hover .partners__track { animation-play-state: paused; }
.partner-pill {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 210px;
  height: 60px;
  padding: 0 16px;
  margin-right: 16px; /* gap baked into each pill so the -50% loop is seamless */
  border: 1px solid rgba(209, 209, 214, .22);
  border-radius: 14px;
  overflow: hidden;
  /* frosted glass: translucent tint + top sheen, so the backdrop blur reads */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .03) 45%, rgba(255, 255, 255, 0) 100%),
    rgba(24, 24, 27, .70);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .20);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
}
.partner-pill img {
  height: 22px;
  width: auto;
  max-width: 168px;
  object-fit: contain;
}
.partner-pill--crest img { height: 40px; }
/* label sits on the section background — flip to dark on the white light theme */
html[data-theme="light"] .partners__label { color: var(--theme-text, #18181b); }
/* light theme: pills match the site's light glass cards (tool/ai cards), logos flip dark */
html[data-theme="light"] .partner-pill {
  background: rgba(255, 255, 255, .78);
  border-color: rgba(209, 209, 214, .9);
  box-shadow: inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(20px) saturate(120%);
          backdrop-filter: blur(20px) saturate(120%);
}
html[data-theme="light"] .partner-pill img {
  filter: brightness(0) saturate(100%);
  opacity: .8;
}
@keyframes partners-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .partners__marquee { -webkit-mask-image: none; mask-image: none; }
  .partners__track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 16px;
  }
  .partner-pill { margin-right: 0; }
  .partner-pill[aria-hidden="true"] { display: none; } /* drop the duplicate set */
}

@media (min-width: 1024px) and (max-height: 899px) {
  .cta__content { left: 48px; }
}

/* CTA mobile visual restyle. Position is handled separately: narrow screens keep
   the pinned hand-off (base absolute); the reduced-motion flow fallback is at the
   end of the file. */
@media (max-width: 1023px), (prefers-reduced-motion: reduce) {
  .cta { padding: 48px 20px; }
  .cta__panel {
    width: 100%;
    min-height: min(760px, calc(100svh - 96px));
    aspect-ratio: auto;
  }
  /* partners strip tracks the card width so they stay aligned */
  .partners { width: 100%; }
  .cta__panel::after {
    background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .95) 40%, rgba(0, 0, 0, .58) 68%, rgba(0, 0, 0, .16) 100%);
  }
  .cta__backdrop { object-position: 68% center; }
  .cta__content {
    left: clamp(24px, 7vw, 56px);
    width: min(529px, calc(100% - 48px));
  }
  .cta__title {
    font-size: clamp(34px, 6vw, 48px);
    line-height: 1.2;
    white-space: normal;
  }
}

@media (max-width: 599px) {
  .cta { padding-inline: 16px; }
  .cta__panel {
    min-height: min(680px, calc(100svh - 64px));
    border-radius: 20px;
  }
  .cta__panel::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, .98) 0%, rgba(0, 0, 0, .91) 58%, rgba(0, 0, 0, .38) 100%);
  }
  .cta__backdrop { object-position: 62% center; }
  .cta__content {
    left: 24px;
    width: calc(100% - 48px);
  }
  .cta__title { font-size: 34px; }
  .cta__desc { font-size: 16px; line-height: 24px; }
  .cta__actions { align-items: stretch; flex-direction: column; }
  .cta__btn { width: 100%; }
  /* compact partner pills on phones */
  .partners__label { font-size: 18px; line-height: 26px; margin-bottom: 14px; }
  .partner-pill {
    width: 160px;
    height: 52px;
    padding: 0 14px;
    margin-right: 12px;
    border-radius: 12px;
  }
  .partner-pill img { height: 19px; max-width: 124px; }
  .partner-pill--crest img { height: 34px; }
}

/* ===================== FOOTER ===================== */
.footer {
  position: relative;
  z-index: 2;
  background: #000;
}
.footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 64px 120px 48px;
}
.footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 300px;
}
.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 163px);
  column-gap: 64px;
  row-gap: 64px;
  width: 617px;
}
.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.footer__head {
  margin: 0;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: var(--white);
}
.footer__col a {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #999;
}
.footer__socials { display: flex; align-items: center; gap: 16px; }
.social {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background-color: rgba(24, 24, 27, .72);
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .12) 0%, rgba(63, 63, 70, .22) 42%, rgba(9, 9, 11, .28) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  backdrop-filter: blur(12px) saturate(135%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(255, 255, 255, .03);
}
.social::before {
  content: '';
  position: absolute;
  inset: -2px;
}
.social img { display: block; width: 20px; height: 20px; object-fit: contain; }
.social[aria-label="Discord"] img { height: 15.547px; }
.social[aria-label="X"] img { width: 19.56px; }
.social[aria-label="TikTok"] img { width: 17.655px; }
.footer__brand { margin-top: 120px; }
.footer__wordmark-art {
  position: relative;
  width: 1200px;
  height: 207px;
  overflow: visible;
}
.footer__wordmark-art img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  transform: scale(.99);
  transform-origin: center;
}
.footer__wordmark-base {
  filter: grayscale(1) brightness(.58);
  opacity: .55;
}
.footer__wordmark-color-trail {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 3%), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 3%), transparent 100%);
  -webkit-mask-size: 0% 100%;
  mask-size: 0% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}
.footer__wordmark-spotlight {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .22) 22%, #000 46%, #000 54%, rgba(0, 0, 0, .22) 78%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .22) 22%, #000 46%, #000 54%, rgba(0, 0, 0, .22) 78%, transparent 100%);
  -webkit-mask-size: 24% 100%;
  mask-size: 24% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: -32% 0;
  mask-position: -32% 0;
  pointer-events: none;
}
.footer__wordmark-art.is-spotlight-active .footer__wordmark-spotlight {
  animation: footer-wordmark-spotlight 2.6s cubic-bezier(.37, 0, .63, 1) 300ms 2 both;
}
.footer__wordmark-art.is-spotlight-active .footer__wordmark-color-trail {
  animation: footer-wordmark-color-trail 2.6s cubic-bezier(.37, 0, .63, 1) 2.9s 1 both;
}
/* theme-aware reveal: light mode inks the ETRIX letters black (Z stays red) */
.footer__wordmark-art .footer__wordmark--light { display: none; }
html[data-theme="light"] .footer__wordmark-art .footer__wordmark--dark { display: none; }
html[data-theme="light"] .footer__wordmark-art .footer__wordmark--light { display: block; }
@keyframes footer-wordmark-spotlight {
  0% {
    -webkit-mask-position: -32% 0;
    mask-position: -32% 0;
  }
  84% {
    -webkit-mask-position: 132% 0;
    mask-position: 132% 0;
  }
  100% {
    -webkit-mask-position: 132% 0;
    mask-position: 132% 0;
  }
}
@keyframes footer-wordmark-color-trail {
  0% {
    -webkit-mask-size: 0% 100%;
    mask-size: 0% 100%;
  }
  84% {
    -webkit-mask-size: 104% 100%;
    mask-size: 104% 100%;
  }
  100% {
    -webkit-mask-size: 104% 100%;
    mask-size: 104% 100%;
  }
}
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
  min-height: 20px;
}
.footer__copy,
.footer__legal a {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #999;
}
.footer__legal { display: flex; align-items: center; gap: 24px; }
.footer a { transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease; }
.footer__col a:hover,
.footer__legal a:hover { color: var(--white); }
.social:hover,
.social:focus-visible {
  border-color: rgba(255, 255, 255, .26);
  background-color: rgba(39, 39, 42, .78);
}
.footer a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

@media (max-width: 1439px) {
  .footer__inner { padding: 56px 48px 40px; }
  .footer__top { flex-wrap: wrap; min-height: auto; gap: 56px; }
  .footer__brand { margin-top: 80px; }
  .footer__wordmark-art {
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 207;
  }
}
@media (max-width: 767px) {
  .footer__inner { padding: 48px 24px 32px; }
  .footer__top { flex-direction: column; gap: 48px; }
  .footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 48px;
    width: 100%;
  }
  .footer__socials { gap: 16px; }
  .footer__brand { margin-top: 72px; }
  .footer__wordmark-spotlight {
    -webkit-mask-size: 34% 100%;
    mask-size: 34% 100%;
  }
}
@media (max-width: 599px) {
  .footer__bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
  }
  .footer__legal { flex-wrap: wrap; row-gap: 12px; }
}
@media (max-width: 359px) {
  .footer__nav { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .footer a { transition: none; }
  .footer__wordmark-color-trail,
  .footer__wordmark-spotlight { display: none; }
}

/* ===================== FIGMA PHONE COMPOSITION ===================== */
.robotics__controls { display: none; }

@media (min-width: 768px) and (max-width: 1023px) {
  .hero__content { padding-inline: 60px; }
  .hero__title {
    font-size: clamp(48px, 7vw, 58px);
    line-height: 1.18;
  }
  .hero__subtitle { max-width: 648px; }

  .ecosystem { padding: 0 60px; }
  .eco-track { height: 280svh; }
  .eco-pin {
    position: sticky;
    top: 0;
    min-height: 100svh;
    display: grid;
    place-items: center;
  }
  .eco-card {
    width: 100%;
    height: calc(100svh - 48px);
    max-height: 900px;
    padding: 56px 36px 36px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: start;
    gap: 32px;
  }
  .eco-card__left {
    width: 100%;
    text-align: center;
  }
  .eco-card__sub { margin-inline: auto; }
  .eco-card__coin {
    left: -280px;
    bottom: -300px;
    width: 820px;
    opacity: .58;
  }
  .eco-stack {
    width: min(100%, 560px);
    height: min(580px, calc(100svh - 280px));
    margin: 0 auto;
    justify-self: center;
    transform: none;
  }

  .tools__pin { padding: 96px 0 80px; }
  .tools__inner { width: calc(100% - 120px); }
  .tools__left {
    width: 100%;
    margin-inline: auto;
    text-align: center;
  }
  .tools__sub { margin-inline: auto; }
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-card { text-align: left; }
  /* Tablet: drop the blockchain cubes/particles and the section frame so only
     the ribbon shows behind this section. */
  .tools__art,
  .tools__section-frame { display: none; }

  .ribbon-flow__visual {
    left: 50%;
    width: 1185.65px;
    margin-left: -506.67px;
    transform: none;
    overflow: visible;
  }
  .ribbon-flow__path { stroke-width: 360px; }

  .ai-layer__pin { padding: 96px 60px 80px; }
  .ai-layer__inner {
    width: 100%;
    max-width: none;
    padding-top: 0;
  }
  .ai-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .ai-card {
    min-width: 0;
    padding: 18px;
  }
  .ai-card__media { width: 100%; }
  .ai-card__body { padding-top: 18px; }
  .ai-card__title {
    font-size: 18px;
    line-height: 25px;
  }
  .ai-card__desc {
    font-size: 15px;
    line-height: 22px;
  }

  .robotics__pin {
    padding: 96px 60px 80px;
    overflow: hidden;
  }
  .robotics__heading {
    width: 100%;
    text-align: center;
  }
  .robot-cards {
    display: flex;
    width: 100%;
    max-width: none;
    margin-top: 40px;
    gap: 20px;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }
  .robot-cards::-webkit-scrollbar { display: none; }
  .robot-card,
  .robotics__inner.is-in .robot-card {
    flex: 0 0 calc(50% - 10px);
    width: calc(50% - 10px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .robotics__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 24px;
  }
  .robotics__btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(209, 209, 214, .20);
    border-radius: 8px;
  }
  .robotics__btn:disabled { opacity: .35; cursor: not-allowed; }
  .robotics__btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
  .robotics__btn svg { width: 18px; height: 18px; }
  .robotics__progress {
    display: flex;
    width: 18px;
    height: 44px;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  .robotics__progress i {
    display: block;
    width: 2px;
    height: 32px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .32);
    transform: scaleY(.5);
    transition: transform 180ms ease, background-color 180ms ease;
  }
  .robotics__progress i.is-active {
    transform: scaleY(1);
    background: #fff;
  }
  .robotics__progress i:nth-child(3) { display: none; }
  .robotics__status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .layers__pin { padding-inline: 60px; }
  .layers__inner { width: calc(100% - 120px); }

  .cta { padding: 48px 60px; }
  .cta__panel {
    min-height: min(760px, calc(100svh - 96px));
    background: #111216;
  }
  .cta__panel::after {
    background: linear-gradient(180deg, #060608 0%, rgba(6, 6, 8, .96) 42%, rgba(6, 6, 8, .38) 72%, rgba(6, 6, 8, .08) 100%);
    -webkit-mask-image: radial-gradient(ellipse 27% 38% at 82% 70%, transparent 0 48%, rgba(0, 0, 0, .28) 62%, #000 82%);
    mask-image: radial-gradient(ellipse 27% 38% at 82% 70%, transparent 0 48%, rgba(0, 0, 0, .28) 62%, #000 82%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .cta__content {
    top: 48px;
    left: 60px;
    width: calc(100% - 120px);
    transform: none;
    text-align: center;
  }
  .cta__actions { justify-content: center; }
  .cta__backdrop {
    inset: auto;
    bottom: 0;
    left: 50%;
    width: min(920px, 132%);
    height: auto;
    max-width: none;
    object-fit: contain;
    transform: translateX(-50%);
  }
}

/* (Tablet ecosystem carousel tuning lives after the <=1279 eco block below, so
   its overrides win — see the "Tablet ecosystem tuning" block.) */

@media (max-width: 767px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .section-heading,
  .robotics__title {
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0;
  }

  .layers__heading .section-heading {
    font-size: 24px;
    line-height: 30px;
  }
  .layers__title-line {
    display: block;
    white-space: nowrap;
  }
  .layers__title-break { display: none; }

  .section-sub,
  .robotics__subtitle,
  .layers__heading .section-sub {
    font-size: 16px;
    line-height: 24px;
  }

  /* Keep the animated scroll-reveal ribbon on phones too (same as tablet and
     web); the static .ribbon-flow__mobile image stays hidden. */

  /* Floating mobile navigation */
  .nav-wrap { top: 16px; }
  .nav {
    width: calc(100% - 32px);
    height: 56px;
    padding: 0 10px 0 16px;
    border-color: #2e2e34;
    border-radius: 12px;
    background: rgba(0, 0, 0, .70);
  }
  .nav__logo img { height: 20px; }
  .nav__cta { display: none; }
  .nav__mobile-toggle {
    width: 32px;
    height: 32px;
    margin-left: 8px;
    border-radius: 6px;
  }
  .nav-dropdown {
    top: 63px;
    max-height: calc(100svh - 96px);
    border-radius: 12px;
  }

  /* Genesis */
  .hero {
    min-height: auto;
    padding: 100px 20px 0;
  }
  .hero__content { position: relative; z-index: 2; }
  .hero__title {
    font-size: 32px;
    line-height: 42px;
    letter-spacing: -.2px;
  }
  .hero__subtitle {
    max-width: 350px;
    margin-top: 16px;
    font-size: 16px;
    line-height: 24px;
  }
  .hero__cta {
    height: 44px;
    margin-top: 24px;
    padding-inline: 20px;
    border-radius: 10px;
    font-size: 16px;
    line-height: 24px;
  }
  .hero__globe {
    width: calc(100% + 40px);
    height: 330px;
    margin: 24px -20px 0;
  }
  .hero__globe canvas {
    width: 100% !important;
    height: 100% !important;
  }

  /* Trust network */
  .ecosystem { padding: 0 16px; }
  .eco-track { height: 300svh; }
  .eco-pin {
    position: sticky;
    top: 0;
    min-height: 100svh;
    display: grid;
    place-items: center;
  }
  .eco-card {
    width: 100%;
    height: auto;
    max-height: calc(100svh - 24px);
    padding: 32px 16px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    gap: 28px;
    border-radius: 24px;
  }
  .eco-card__sub {
    margin-top: 12px;
    font-size: 16px;
    line-height: 24px;
  }
  .eco-card__coin {
    left: -300px;
    bottom: -260px;
    width: 760px;
    opacity: .5;
  }
  /* Anchor the blockchain-cube backdrop to the bottom of the card on phones. */
  .eco-card__bg {
    top: auto;
    bottom: 0;
    width: 150%;
    min-width: 620px;
    transform: translateX(-50%) translate3d(-32px, 36px, 0) scale(1.06);
  }
  .eco-card__bg.is-in {
    transform: translateX(-50%) translate3d(0, 0, 0) scale(1);
  }
  .eco-stack {
    position: relative;
    display: block;
    width: min(100%, 523px);
    height: 436px;
    margin: 0 auto;
    justify-self: center;
  }
  .eco-fcard {
    position: absolute;
    top: 0;
    opacity: 0;
    transform: translateY(120px) scale(.96) rotate(calc(var(--rot) + 4deg));
    border-radius: 16px;
  }
  .eco-fcard.is-shown {
    width: 100%;
    opacity: 1;
    transform: translateY(0) scale(1) rotate(var(--rot));
  }
  .eco-fcard__head { padding: 16px; }
  .eco-fcard__title { font-size: 16px; line-height: 24px; }
  .eco-fcard__desc { font-size: 14px; line-height: 20px; }
  .eco-fcard__panel,
  .eco-fcard.is-phone-collapsed .eco-fcard__panel {
    max-height: 0;
    opacity: 0;
  }
  .eco-fcard.is-shown .eco-fcard__panel {
    max-height: 200px;
    opacity: 1;
  }
  .node-panel {
    min-height: 0;
    margin: 0 16px 16px;
    padding: 14px;
    border-radius: 12px;
  }
  /* Smaller illustration on phones so the panel + its bottom padding fit
     inside the card without being clipped. Center it within the full-width
     <picture> (which would otherwise leave the capped image left-aligned). */
  .node-panel picture { display: flex; justify-content: center; }
  .node-illus { max-width: 210px; margin-inline: auto; }

  /* Tools */
  .tools,
  .tools__pin {
    min-height: 0;
    height: auto;
  }
  .tools__pin {
    padding: 60px 0;
    overflow: hidden;
  }
  .tools__inner { width: calc(100% - 40px); }
  .tools__left { width: 100%; }
  .tools__sub {
    max-width: 350px;
    margin-top: 12px;
    font-size: 16px;
    line-height: 24px;
  }
  .eco-card__left > .section-heading,
  .eco-card__sub,
  .tools__left > .section-heading,
  .tools__sub {
    text-align: center;
  }
  .eco-card__sub,
  .tools__sub {
    margin-inline: auto;
  }
  .tool-grid {
    margin-top: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .tool-card {
    width: 100%;
    height: auto;
    min-height: 136px;
    padding: 14px;
    gap: 12px;
    border-radius: 12px;
  }
  .tool-card__top { min-height: 40px; }
  .tool-card__icon {
    width: 40px;
    height: 40px;
    padding: 10px;
  }
  .tool-card__icon img { width: 20px; height: 20px; }
  .tool-card__arrow { width: 20px; height: 20px; }
  .tool-card__text { gap: 2px; }
  .tool-card__title {
    height: auto;
    font-size: 16px;
    line-height: 22px;
  }
  .tool-card__desc {
    font-size: 13px;
    line-height: 17px;
  }
  /* Mobile: drop the blockchain cubes/particles and the section frame so only
     the ribbon shows behind this section. */
  .tools__art,
  .tools__section-frame { display: none; }

  /* Identity-grounded intelligence */
  .ai-layer,
  .ai-layer__pin { min-height: 0; height: auto; }
  .ai-layer__pin { padding: 60px 20px; }
  .ai-layer__inner { max-width: none; }
  .ai-layer__inner > .section-heading {
    font-size: 24px;
    line-height: 30px;
  }
  .ai-cards { margin-top: 24px; gap: 20px; }
  .ai-card { padding: 16px; border-radius: 16px; }
  .ai-card__media { aspect-ratio: 326 / 200; border-radius: 12px; }
  .ai-card__body { padding-top: 16px; }
  .ai-card__title { font-size: 16px; line-height: 24px; }
  .ai-card__desc { font-size: 14px; line-height: 20px; }
  .ai-card__cta {
    height: 44px;
    margin-top: 16px;
    padding-inline: 16px;
  }

  /* Robotics */
  .robotics,
  .robotics__pin { min-height: 0; height: auto; }
  .robotics__pin { padding: 60px 20px; overflow: hidden; }
  .robotics__heading {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }
  .robotics__subtitle { margin-top: 0; }
  .robot-cards {
    display: flex;
    width: calc(100% + 20px);
    max-width: none;
    margin: 0 -20px 0 0;
    margin-top: 32px;
    padding-right: 20px;
    gap: 12px;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }
  .robot-cards::-webkit-scrollbar { display: none; }
  .robot-card,
  .robotics__inner.is-in .robot-card {
    flex: 0 0 min(350px, calc(100vw - 40px));
    width: min(350px, calc(100vw - 40px));
    height: auto;
    aspect-ratio: 350 / 460;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .robot-card__caption {
    left: 16px;
    right: 16px;
    bottom: 16px;
    min-height: 0;
    padding: 14px;
  }
  .robot-card__title { font-size: 18px; line-height: 24px; }
  .robot-card__desc { font-size: 14px; line-height: 20px; }
  .robotics__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 24px;
  }
  .robotics__btn {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(209, 209, 214, .20);
    border-radius: 6px;
  }
  .robotics__btn:disabled { opacity: .35; cursor: not-allowed; }
  .robotics__btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
  .robotics__btn svg { width: 16px; height: 16px; }
  .robotics__progress {
    display: flex;
    width: 18px;
    height: 36px;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  .robotics__progress i {
    display: block;
    width: 2px;
    height: 32px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .32);
    transform: scaleY(.5);
    transition: transform 180ms ease, background-color 180ms ease;
  }
  .robotics__progress i.is-active {
    transform: scaleY(1);
    background: #fff;
  }
  .robotics__status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .robotics > .fig-note { display: none; }

  /* Connected ecosystem */
  .layers__pin { padding: 60px 20px; }
  .layers__inner {
    top: 80px;
    bottom: 32px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    transform: translateX(-50%);
  }
  .layers__heading .section-sub { margin-top: 12px; }
  .carousel { margin-top: 64px; }
  .carousel__stack {
    width: 350px;
    max-width: 100%;
    height: 168px;
  }
  .carousel__card {
    top: 0;
    left: 0;
    width: 100%;
    height: 168px;
    padding: 8px;
    border-radius: 12px;
  }
  .carousel__card img { border-radius: 8px; }
  .carousel__foot {
    align-items: center;
    gap: 16px;
    margin-top: 12px;
  }
  .carousel__text { text-align: center; }
  .carousel__title { font-size: 24px; line-height: 30px; }
  .carousel__desc { font-size: 15px; line-height: 22px; }
  .carousel__controls { align-self: center; }

  /* #BUIDLREAL */
  .cta {
    min-height: 0;
    padding: 60px 20px;
  }
  /* Stacked layout on phones: text/buttons on top, mascot image below — so the
     mascot can never be covered by the heading or buttons at any screen height. */
  .cta__panel {
    height: auto;
    min-height: 0;
    /* Match the mascot image's backdrop so the card and image blend seamlessly. */
    background: #0e0f13;
    border-radius: 28px;
    display: flex;
    flex-direction: column;
  }
  .cta__panel::after { content: none; }
  .cta__content {
    position: static;
    inset: auto;
    width: 100%;
    transform: none;
    padding: 40px 20px 0;
    text-align: center;
  }
  .cta__backdrop {
    position: static;
    inset: auto;
    order: 2;
    width: 100%;
    height: 320px;
    max-width: none;
    margin-top: 0;
    object-fit: cover;
    object-position: 62% center;
    /* Fade the top of the image into the card background so there's no seam
       (the image's ambient glow makes a flat colour-match insufficient). */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
  }
  .cta__title { font-size: 32px; line-height: 42px; }
  .cta__desc {
    width: 100%;
    margin-top: 10px;
    font-size: 16px;
    line-height: 24px;
  }
  .cta__actions {
    align-items: stretch;
    width: fit-content;
    margin: 24px auto 0;
    gap: 8px;
  }
  .cta__btn {
    width: auto;
    height: 44px;
    padding: 0 20px;
    font-size: 16px;
    line-height: 24px;
  }

  /* Footer */
  .footer__inner { padding: 48px 20px 40px; }
  .footer__top { gap: 40px; }
  .footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 40px;
  }
  .footer__head { font-size: 16px; line-height: 24px; }
  .footer__col a { font-size: 14px; line-height: 20px; }
  .social { width: 32px; height: 32px; }
  .social img { width: 16px; height: 16px; }
  .footer__brand { margin-top: 40px; }
  .footer__bottom { gap: 12px; margin-top: 24px; }
  .footer__copy,
  .footer__legal a { font-size: 12px; line-height: 18px; }
}

@media (max-width: 374px) {
  .tool-grid { grid-template-columns: 1fr; }
  .tool-card { height: auto; min-height: 124px; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .robot-cards { scroll-behavior: auto; }
  .eco-track { height: auto; }
  .eco-pin { position: static; min-height: 844px; }
}

/* ============================= LIGHT THEME ============================= */
html[data-theme="light"] {
  color-scheme: light;
  --theme-bg: #ffffff;
  --theme-surface-primary: #ffffff;
  --theme-surface-secondary: #fafafa;
  --theme-surface-tertiary: #f5f5f6;
  --theme-border: #d1d1d6;
  --theme-text: #18181b;
  --theme-text-secondary: #71717a;
  /* #a1a1aa was ~2.3:1 on the white light-theme ground (fails WCAG AA);
     #6b7280 is ~4.6:1 and passes AA for normal text. */
  --theme-text-tertiary: #6b7280;
  --theme-icon: #3f3f46;
  --theme-glass: rgba(255, 255, 255, .74);
  --theme-glass-strong: rgba(255, 255, 255, .94);
  --theme-shadow: rgba(31, 41, 55, .13);
  --bg: #ffffff;
  --text-tertiary: #71717a;
  --hairline: rgba(24, 24, 27, .1);
}

html[data-theme="light"] body {
  background: var(--theme-bg);
  color: var(--theme-text);
}

html[data-theme="light"] body,
html[data-theme="light"] .nav,
html[data-theme="light"] .nav-dropdown__surface,
html[data-theme="light"] .nav-card,
html[data-theme="light"] .hero,
html[data-theme="light"] .ecosystem,
html[data-theme="light"] .eco-card,
html[data-theme="light"] .eco-fcard,
html[data-theme="light"] .ribbon-story,
html[data-theme="light"] .ribbon-flow,
html[data-theme="light"] .tools,
html[data-theme="light"] .tool-card,
html[data-theme="light"] .ai-layer,
html[data-theme="light"] .ai-card,
html[data-theme="light"] .robotics,
html[data-theme="light"] .robot-card,
html[data-theme="light"] .layers__pin,
html[data-theme="light"] .carousel__card,
html[data-theme="light"] .cta,
html[data-theme="light"] .cta__panel,
html[data-theme="light"] .footer,
html[data-theme="light"] .social,
html[data-theme="light"] .theme-toggle {
  transition-property: color, background-color, border-color, box-shadow, filter, opacity;
  transition-duration: 260ms;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}

/* Light glass navigation */
html[data-theme="light"] .nav {
  color: var(--theme-text);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border-color: rgba(209, 209, 214, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 12px 34px rgba(31, 41, 55, .13);
}
html[data-theme="light"] .nav__logo { position: relative; }
/* Light mode swaps to a dedicated logo variant (red "Z" + dark "ETRIX") via a
   two-image toggle — robust across browsers, unlike content:url() on <img>. The
   dark variant is the default; light mode hides it and shows the light one. */
.nav__logo .nav__logo-mark--light { display: none; }
html[data-theme="light"] .nav__logo .nav__logo-mark--dark { display: none; }
html[data-theme="light"] .nav__logo .nav__logo-mark--light { display: block; }
html[data-theme="light"] .nav__logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/img/logo-zetrix.svg") left center / 100% 100% no-repeat;
  clip-path: inset(0 83% 0 0);
  pointer-events: none;
}
html[data-theme="light"] .nav__link,
html[data-theme="light"] .nav__link:hover,
html[data-theme="light"] .nav-panel__accordion { color: var(--theme-text); }
html[data-theme="light"] .nav__mobile-toggle {
  border-color: rgba(113, 113, 122, .2);
  background: rgba(255, 255, 255, .66);
}
html[data-theme="light"] .nav__mobile-toggle span { background: var(--theme-icon); }
html[data-theme="light"] .nav-dropdown__surface {
  color: var(--theme-text);
  background-color: rgba(255, 255, 255, .94);
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(245, 245, 246, .82) 62%, rgba(215, 217, 220, .24));
  -webkit-backdrop-filter: blur(24px) saturate(115%);
  backdrop-filter: blur(24px) saturate(115%);
  border-color: rgba(209, 209, 214, .95);
  box-shadow: inset 0 1px 0 #fff, 0 24px 64px rgba(31, 41, 55, .16), 0 0 42px rgba(197, 36, 46, .06);
}
html[data-theme="light"] .nav-panel__group + .nav-panel__group { border-color: rgba(24, 24, 27, .08); }
html[data-theme="light"] .nav-card {
  color: var(--theme-text);
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(245, 245, 246, .86));
  border-color: rgba(209, 209, 214, .86);
  box-shadow: inset 0 1px 0 #fff;
}
html[data-theme="light"] .nav-card:hover {
  border-color: rgba(197, 36, 46, .4);
  background-color: rgba(197, 36, 46, .06);
}
html[data-theme="light"] .nav-card__icon {
  border-color: rgba(113, 113, 122, .18);
  background: rgba(245, 245, 246, .9);
  box-shadow: inset 0 1px 0 #fff;
}
html[data-theme="light"] .nav-card__icon img { filter: brightness(0) saturate(100%); opacity: .8; }
html[data-theme="light"] .nav-card__title { color: var(--theme-text); }
html[data-theme="light"] .nav-card__desc { color: var(--theme-text-secondary); }
html[data-theme="light"] .nav-card__arrow img { filter: brightness(0) saturate(100%); }
html[data-theme="light"] .nav__link:focus-visible,
html[data-theme="light"] .theme-toggle:focus-visible,
html[data-theme="light"] .nav__mobile-toggle:focus-visible,
html[data-theme="light"] .nav-panel__accordion:focus-visible,
html[data-theme="light"] .nav-card:focus-visible {
  outline-color: var(--theme-text);
}

/* Orbit light state */
html[data-theme="light"] .theme-toggle {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(209, 209, 214, .92);
  box-shadow: inset 0 1px 0 #fff, 0 10px 30px rgba(31, 41, 55, .13);
}
html[data-theme="light"] .theme-toggle__track {
  background: #e4e4e7;
  border-color: rgba(113, 113, 122, .16);
  box-shadow: inset 0 1px 3px rgba(24, 24, 27, .12);
}
html[data-theme="light"] .theme-toggle__orb {
  transform: translateX(0);
  background: #c5242e;
  box-shadow: 0 0 0 3px rgba(197, 36, 46, .2), 0 2px 5px rgba(140, 26, 33, .24);
}

/* Page surfaces and typography */
html[data-theme="light"] .hero,
html[data-theme="light"] .ecosystem,
html[data-theme="light"] .ribbon-story,
html[data-theme="light"] .layers__pin {
  background-color: var(--theme-bg);
}
/* Sections 3–5 stay transparent in light mode too (as in dark mode), so the
   scroll-driven grid ribbon behind them (z-index 1, inside .ribbon-story)
   shows through the right-edge negative space. .ribbon-story paints the white
   base below the canvas. If these are given the theme bg they become opaque
   and hide the grid. */
html[data-theme="light"] .ribbon-flow,
html[data-theme="light"] .tools,
html[data-theme="light"] .ai-layer,
html[data-theme="light"] .robotics,
html[data-theme="light"] .tools__pin,
html[data-theme="light"] .ai-layer__pin,
html[data-theme="light"] .robotics__pin { background-color: transparent; }
html[data-theme="light"] .layers-track { background-color: var(--theme-bg); }
/* Light mode: the section headings and subtitles that sit over the flowing
   ribbon have transparent backgrounds, so the saturated brand red behind them
   dropped their contrast. Soften the ribbon to a light red tint in light mode
   (kept on-brand — same red gradient, just lower opacity) so dark headings and
   grey subtitles read clearly. Only opacity is touched, so the scroll reveal
   mask and the gradient's end-fades are preserved. */
html[data-theme="light"] .ribbon-flow__path { opacity: .22; }
html[data-theme="light"] .hero__title,
html[data-theme="light"] .section-heading,
html[data-theme="light"] .eco-fcard__title,
html[data-theme="light"] .tool-card__title,
html[data-theme="light"] .ai-card__title,
html[data-theme="light"] .robotics__title,
html[data-theme="light"] .robot-card__title,
html[data-theme="light"] .carousel__title,
html[data-theme="light"] .footer__head { color: var(--theme-text); }
html[data-theme="light"] .hero__subtitle,
html[data-theme="light"] .eco-card__sub,
html[data-theme="light"] .eco-fcard__desc,
html[data-theme="light"] .section-sub,
html[data-theme="light"] .tools__sub,
html[data-theme="light"] .tool-card__desc,
html[data-theme="light"] .ai-card__desc,
html[data-theme="light"] .robotics__subtitle,
html[data-theme="light"] .robot-card__desc,
html[data-theme="light"] .carousel__desc { color: var(--theme-text-secondary); }
/* Light mode: the robotics carousel controls are white by default, which
   disappears on the light background. Give them dark colours so the
   prev/next buttons and progress bars are visible. */
html[data-theme="light"] .robotics__btn {
  color: #18181b;
  border-color: rgba(24, 24, 27, .22);
}
html[data-theme="light"] .robotics__btn:hover { background: rgba(24, 24, 27, .06); }
html[data-theme="light"] .robotics__progress i { background: rgba(24, 24, 27, .30); }
html[data-theme="light"] .robotics__progress i.is-active { background: #18181b; }
html[data-theme="light"] .fig-note { color: var(--theme-text-tertiary); }
html[data-theme="light"] .ecosystem::before,
html[data-theme="light"] .cta::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .72) 58%, #fff 100%);
}

/* Light glass content cards */
html[data-theme="light"] .eco-card {
  background: var(--theme-surface-secondary);
  border-color: var(--theme-border);
  box-shadow: none;
}
/* dark glossy cubes read heavy on a light card — soften to a subtle watermark */
html[data-theme="light"] .eco-card__bg.is-in { opacity: 1; }
html[data-theme="light"] .eco-fcard {
  background: rgba(255, 255, 255, .9);
  border-color: rgba(209, 209, 214, .92);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
  box-shadow: inset 0 1px 0 #fff;
}
html[data-theme="light"] .eco-fcard.is-active { border-color: rgba(113, 113, 122, .3); }
html[data-theme="light"] .eco-fcard__panel { color: var(--theme-text-secondary); }
html[data-theme="light"] .node-panel { background: #f5f5f6; border-color: rgba(24, 24, 27, .1); }
html[data-theme="light"] .tool-card,
html[data-theme="light"] .ai-card,
html[data-theme="light"] .sp-card,
html[data-theme="light"] .carousel__card {
  background: rgba(255, 255, 255, .78);
  border-color: rgba(209, 209, 214, .9);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  backdrop-filter: blur(20px) saturate(120%);
  box-shadow: inset 0 1px 0 #fff;
}
html[data-theme="light"] .sp-card__title { color: var(--theme-text-primary, #18181b); }
html[data-theme="light"] .sp-card__icon {
  background: rgba(245, 245, 246, .9);
  color: rgba(24, 24, 27, .78);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(24, 24, 27, .08);
}
html[data-theme="light"] .sp-card:hover {
  background-color: rgba(255, 255, 255, .94);
  border-color: rgba(197, 36, 46, .34);
  box-shadow: 0 10px 24px rgba(31, 41, 55, .08), inset 0 1px 0 #fff;
}
html[data-theme="light"] .sp-card:hover .sp-card__icon {
  color: rgba(197, 36, 46, .9);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .22), inset -1px -1px 0 rgba(0, 0, 0, .10);
}
html[data-theme="light"] .tool-card__icon {
  background: rgba(245, 245, 246, .9);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(24, 24, 27, .08);
}
html[data-theme="light"] .tool-card__icon img,
html[data-theme="light"] .tool-card__arrow img { filter: brightness(0) saturate(100%); opacity: .78; }
html[data-theme="light"] .tool-card:hover {
  background-color: rgba(255, 255, 255, .94);
  border-color: rgba(197, 36, 46, .34);
  box-shadow: 0 10px 24px rgba(31, 41, 55, .08), inset 0 1px 0 #fff;
}
/* no drop shadow under the icon on hover in light mode — keep only inset hairlines */
html[data-theme="light"] .tool-card:hover .tool-card__icon {
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .22), inset -1px -1px 0 rgba(0, 0, 0, .10);
}
/* 4th-section (AI) cards match the 3rd-section (Tools) hover in light mode.
   The `.ai-layer__inner.is-in` selectors give (0,5,1) specificity so this beats the
   dark base hover `.ai-layer__inner.is-in .ai-card:hover` (0,4,0) after the section reveals. */
html[data-theme="light"] .ai-card:hover,
html[data-theme="light"] .ai-card:focus-within,
html[data-theme="light"] .ai-layer__inner.is-in .ai-card:hover,
html[data-theme="light"] .ai-layer__inner.is-in .ai-card:focus-within {
  background-color: rgba(255, 255, 255, .94);
  border-color: rgba(197, 36, 46, .34);
  box-shadow: 0 10px 24px rgba(31, 41, 55, .08), inset 0 1px 0 #fff;
  transform: translateY(-8px) scale(1.01);
}
html[data-theme="light"] .robot-card {
  background: var(--theme-surface-tertiary);
  border-color: rgba(209, 209, 214, .7);
}
html[data-theme="light"] .robot-card__caption {
  color: var(--theme-text);
  background: rgba(255, 255, 255, .8);
  border-color: rgba(209, 209, 214, .88);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  backdrop-filter: blur(20px) saturate(120%);
  box-shadow: inset 0 1px 0 #fff;
}
html[data-theme="light"] .robot-card__meta { color: var(--theme-text); }
html[data-theme="light"] .robot-card__arrow { filter: brightness(0) saturate(100%); opacity: .78; }
html[data-theme="light"] .carousel__btn {
  color: var(--theme-text);
  border-color: rgba(113, 113, 122, .24);
  background: rgba(255, 255, 255, .72);
}
html[data-theme="light"] .carousel__btn:hover { background: var(--theme-surface-tertiary); }
html[data-theme="light"] .carousel__progress i { background: rgba(113, 113, 122, .28); }
html[data-theme="light"] .carousel__progress i.is-active { background: var(--theme-text); }

/* CTA remains a dark, image-led brand island inside the light page */
html[data-theme="light"] .cta {
  background: var(--theme-bg);
}
html[data-theme="light"] .cta__panel {
  background: #060608;
  border-color: rgba(209, 209, 214, .78);
  box-shadow: 0 30px 80px rgba(31, 41, 55, .18);
}
html[data-theme="light"] .cta__title,
html[data-theme="light"] .cta__btn { color: #fff; }
html[data-theme="light"] .cta__desc { color: #a1a1aa; }

/* Light footer glass */
html[data-theme="light"] .footer {
  color: var(--theme-text);
  background: var(--theme-bg);
  border-top: 1px solid rgba(209, 209, 214, .72);
}
html[data-theme="light"] .footer__col a,
html[data-theme="light"] .footer__copy,
html[data-theme="light"] .footer__legal a { color: var(--theme-text-secondary); }
html[data-theme="light"] .footer__col a:hover,
html[data-theme="light"] .footer__legal a:hover { color: var(--theme-text); }
html[data-theme="light"] .social {
  border-color: rgba(209, 209, 214, .85);
  background-color: rgba(255, 255, 255, .5);
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .95) 0%, rgba(240, 240, 242, .55) 45%, rgba(224, 224, 228, .42) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(24, 24, 27, .06);
}
html[data-theme="light"] .social img { filter: brightness(0) saturate(100%); opacity: .78; }
html[data-theme="light"] .footer__wordmark-base { filter: grayscale(1) brightness(.24); opacity: .38; }
html[data-theme="light"] .footer__bottom { border-color: rgba(24, 24, 27, .1); }
html[data-theme="light"] .social:focus-visible { border-color: rgba(24, 24, 27, .34); background-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] body,
  html[data-theme="light"] .nav,
  html[data-theme="light"] .nav-dropdown__surface,
  html[data-theme="light"] .nav-card,
  html[data-theme="light"] .hero,
  html[data-theme="light"] .ecosystem,
  html[data-theme="light"] .eco-card,
  html[data-theme="light"] .eco-fcard,
  html[data-theme="light"] .ribbon-story,
  html[data-theme="light"] .ribbon-flow,
  html[data-theme="light"] .tools,
  html[data-theme="light"] .tool-card,
  html[data-theme="light"] .ai-layer,
  html[data-theme="light"] .ai-card,
  html[data-theme="light"] .robotics,
  html[data-theme="light"] .robot-card,
  html[data-theme="light"] .layers__pin,
  html[data-theme="light"] .carousel__card,
  html[data-theme="light"] .cta,
  html[data-theme="light"] .cta__panel,
  html[data-theme="light"] .footer,
  html[data-theme="light"] .social,
  html[data-theme="light"] .theme-toggle,
  html[data-theme="light"] .theme-toggle__track,
  html[data-theme="light"] .theme-toggle__orb {
    transition: none !important;
  }
}

/* Reduced motion (or no JS): flatten the pinned layers/CTA hand-off back to
   normal document flow. Placed last so it overrides the pinned rules above at
   every width. Element sizing (widths, fonts, card ratios) still comes from the
   width-based blocks earlier in the file. */
@media (prefers-reduced-motion: reduce) {
  .layers-cta-handoff { height: auto; }
  .layers-track {
    position: relative;
    top: auto;
    height: auto;
    z-index: auto;
  }
  .layers__pin {
    position: relative;
    top: auto;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    overflow: visible;
    padding: 96px 24px 80px;
  }
  .layers__inner {
    position: relative;
    top: auto;
    left: auto;
    width: min(800px, 100%);
    height: auto;
    margin-inline: auto;
    transform: none;
    opacity: 1;
    filter: none;
    will-change: auto;
  }
  .cta {
    position: relative;
    left: auto;
    bottom: auto;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    place-items: center;
    z-index: auto;
  }
  .cta::before { display: none; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .layers__pin { padding: 60px 20px; }
}

/* ============================================================
   Section 2 (ecosystem) — mobile horizontal carousel
   Phones show the eco cards as a horizontal swipe carousel with
   prev/next + progress (like the robotics section) instead of the
   scroll-driven deck. Desktop/tablet keep the deck (cards.js).
   ============================================================ */
.eco-controls { display: none; }
/* Light mode: controls default to white (invisible on the light bg) */
html[data-theme="light"] .eco-btn { color: #18181b; border-color: rgba(24, 24, 27, .22); }
html[data-theme="light"] .eco-btn:hover { background: rgba(24, 24, 27, .06); }
html[data-theme="light"] .eco-progress i { background: rgba(24, 24, 27, .30); }
html[data-theme="light"] .eco-progress i.is-active { background: #18181b; }

/* Phone AND tablet (<=1279px): the ecosystem primitives render as a one-card
   horizontal swipe carousel (like the robotics carousel). The scroll-driven
   deck (cards.js) is disabled at this width; eco-carousel.js drives prev/next. */
@media (max-width: 1279px) {
  /* Outer card (.eco-card) sits inset from the edges like the CTA card — NOT
     full-bleed. The inner animation cards swipe full-width WITHIN it. */
  .ecosystem { padding: 0 20px; }
  .eco-track { height: auto; }
  .eco-pin { position: static; min-height: 0; display: block; padding: 0; }
  .eco-card {
    display: block;
    height: auto;
    max-height: none;
    padding: 24px 16px;
    overflow: hidden;
  }
  .eco-card__left { padding: 0; }
  .eco-card__bg { opacity: 1; transform: translate(-50%, -50%); }

  /* Horizontal swipe track */
  .eco-stack {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 24px 0 0;
    padding: 0;
    gap: 20px;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }
  .eco-stack::-webkit-scrollbar { display: none; }

  /* Each card = one full-width slide (fills the screen, small even gutter) */
  .eco-fcard,
  .eco-fcard.is-shown {
    position: static;
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    opacity: 1;
    transform: none;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* Illustration always visible (no deal-in collapse); animation box keeps its
     inset/web-like look (the earlier .node-panel/.node-illus rules apply). */
  .eco-fcard__panel,
  .eco-fcard.is-shown .eco-fcard__panel {
    max-height: none;
    opacity: 1;
  }

  /* Pagination controls */
  .eco-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 20px;
  }
  .eco-btn {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(209, 209, 214, .20);
    border-radius: 6px;
    background: none;
    color: var(--white);
    cursor: pointer;
  }
  .eco-btn:disabled { opacity: .35; cursor: not-allowed; }
  .eco-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
  .eco-btn svg { width: 16px; height: 16px; }
  .eco-progress { display: flex; align-items: center; justify-content: center; gap: 4px; height: 20px; }
  .eco-progress i {
    display: block;
    width: 2px;
    height: 18px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .32);
    transform: scaleY(.55);
    transition: transform 180ms ease, background-color 180ms ease;
  }
  .eco-progress i.is-active { transform: scaleY(1); background: #fff; }
  /* screen-reader-only status text */
  .eco-status {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* Tablet only (768–1279, NOT phones): the AI + robotics sections are
   content-light, so drop them from a full viewport to ~80vh to cut the empty
   space. min-height (never a fixed height) keeps content from clipping. The
   morph's vertical anchor is pushed lower (grid-ribbon.js) at these widths so it
   still sits below the copy. */
@media (min-width: 768px) and (max-width: 1279px) {
  .ai-layer.agentic-section,
  .ai-layer.agentic-section .ai-layer__pin,
  .nurai {
    min-height: 80vh;
    min-height: 80svh;
  }
}
/* Landscape tablet (1024–1279): the agentic pin uses a fixed height:100vh here
   (unlike the auto height at <=1023), so override it to 80vh too. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .ai-layer.agentic-section .ai-layer__pin {
    height: 80vh;
    height: 80svh;
  }
}
/* Robotics reduces across 768–1279, where it's a contained stacked grid; only at
   >=1280 is it the pinned scroll carousel that needs its full-height pin. */
@media (min-width: 768px) and (max-width: 1279px) {
  .robotics,
  .robotics__pin {
    min-height: 80vh;
    min-height: 80svh;
  }
}

/* Tablet ecosystem tuning (768–1279) — placed after the <=1279 eco carousel so
   it wins. The outer card is full-width within the section; the inner gif card
   keeps its web-view width (523px) centred; content is centre-aligned; padding
   is roomier; and the section gets 32px side gutters. */
@media (min-width: 768px) and (max-width: 1279px) {
  .ecosystem { padding: 0 32px; }
  .eco-card {
    max-width: none;
    margin-inline: 0;
    padding: 48px 40px;
  }
  /* Full-width so the centred title spans the whole card. Without this, at
     1024–1279 the left column keeps its narrow desktop width and sits on the
     left, making the centred title read as left-aligned. */
  .eco-card__left { text-align: center; width: 100%; }
  .eco-card__sub { margin-inline: auto; }
  /* the gif card keeps the web-view width, centred within the full-width card */
  .eco-stack { width: min(523px, 100%); margin-inline: auto; }
  /* centre the content inside the card */
  .eco-fcard__head { text-align: center; }
  .eco-fcard__desc { margin-inline: auto; }
  /* Keep the gif/diagram card inset from the fcard edges (L/R padding) so it
     lines up with the head's 28px padding instead of spanning edge-to-edge.
     `margin-inline: auto` collapsed to 0 here because the panel has no width
     cap, which left the gif card wider than the (inset) title/description. */
  .node-panel { margin-inline: 28px; }
}

/* ── Uniform tablet side gutters ──────────────────────────────────────────────
   Every section's content sits 32px from the screen edges on tablet, matching
   the ecosystem section. Appended last so it wins over the per-section tablet
   paddings above. Only the inline (left/right) padding is touched — vertical
   rhythm is left untouched. The full-bleed grid-ribbon canvas behind the pinned
   sections still spans edge to edge; only the content wrapper is inset.

   Portrait (768–1023): all sections are in their contained/stacked layouts, so
   the 32px gutter applies to every one. */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__content { padding-inline: 32px; }
  .ecosystem { padding-inline: 32px; }
  .tools__pin { padding-inline: 32px; }
  .tools__inner { width: 100%; }
  .ai-intro__inner { padding-inline: 32px; }
  .ai-layer__pin { padding-inline: 32px; }
  /* width:100% drops the base min(1200,100%-48) centering margin so the 32px
     padding is the ONLY gutter — otherwise NurAI double-insets (24px margin +
     32px padding) and its cards sit narrower than Tools/Agentic. */
  .nurai__inner { padding-inline: 32px; width: 100%; }
  .robotics__pin { padding-inline: 32px; }
  /* layers__inner is absolutely positioned (pinned scrolly) so it ignores the
     pin's padding — size it directly: 64px total = 32px each side. The pin
     padding still positions the (static) heading. */
  .layers__pin { padding-inline: 32px; }
  .layers__inner { width: calc(100% - 64px); }
  .cta { padding-inline: 32px; }
}
/* Landscape tablet (1024–1279): tools, agentic and layers are still the desktop
   pinned scrollies (transform-scaled, max-width content), so they keep their
   natural gutters. The normal-flow sections are normalised to the same 32px. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .ecosystem { padding-inline: 32px; }
  .ai-intro__inner { padding-inline: 32px; }
  .nurai__inner { padding-inline: 32px; }
  .robotics__pin { padding-inline: 32px; }
}
/* Phones (<=767): match the tablet gutters — every section's content sits 32px
   from the screen edges. Only inline padding/margins are touched; the gutter is
   applied to whichever element actually carries it on mobile (the section for
   hero/ecosystem/cta, the inner wrapper elsewhere, a width for the absolutely
   positioned layers deck). */
@media (max-width: 767px) {
  /* Consistent 16px left/right gutter across every section on mobile. */
  .hero { padding-inline: 16px; }
  .ecosystem { padding-inline: 16px; }
  .tools__inner { margin-inline: 16px; width: auto; }
  /* ai-intro__inner is centred via width: calc(100% - Npx) + margin:auto, so the
     gutter is (100%-width)/2; use 32px total to land 16px each side, no extra padding. */
  .ai-intro__inner { width: calc(100% - 32px); padding-inline: 0; }
  .ai-layer__pin { padding-inline: 16px; }
  /* Same centred width+margin pattern as ai-intro__inner — 32px total for 16px sides. */
  .nurai__inner { width: calc(100% - 32px); padding-inline: 0; }
  .robotics__pin { padding-inline: 16px; }
  .layers__pin { padding-inline: 16px; }
  .layers__inner { width: calc(100% - 32px); }
  .cta { padding-inline: 16px; }
  .footer__inner { padding-inline: 16px; }
}