/* Xeroverse landing — experimental cinematic layer styles.
   Served ONLY when PLATFORM_LANDING_VARIANT=cinematic; every rule is gated on
   html.xc-on (added by cinematic.js). Without JS the approved landing renders
   untouched. Palette, type and spacing reuse the approved xl- design tokens. */

/* =================== converging header =================== */
/* Fixed positioning + constant body offset = zero layout shift while the
   capsule freely interpolates height/width/radius/blur via --xc-t
   (0 expanded → 1 converged). Expanded ≈ 84px tall, logo ≈ 130px wide;
   converged ≈ 62px capsule, logo ≈ 90px wide (44px+ targets throughout). */
/* body offset is set by cinematic.js from the measured in-flow nav height.
   ZERO-CLS RULE: the nav box never changes size — convergence is done purely
   with opacity (bar ⇄ pill backgrounds) and transforms (content groups slide
   inward, logo scales). Layout is bit-identical at every scroll position. */
.xc-on .xl-nav {
  --pillW: min(920px, 92vw);
  --dx: calc((100vw - var(--pillW)) / 2 + 30px - clamp(28px, 3.4vw, 48px));
  position: fixed; top: 0; left: 0; right: 0;
  min-height: 84px;
  padding-block: 10px;
  padding-inline: clamp(28px, 3.4vw, 48px);
  background: none; border-bottom: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.xc-on .xc-bar, .xc-on .xc-pill { position: absolute; pointer-events: none; }
.xc-on .xc-bar {
  inset: 0;
  background: rgba(10, 13, 18, 0.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(233, 200, 126, 0.1);
  opacity: calc(1 - var(--xc-t, 0));
}
.xc-on .xc-pill {
  left: 50%; top: 11px;
  width: var(--pillW); height: 62px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(10, 13, 18, 0.78);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(233, 200, 126, 0.24);
  box-shadow: 0 14px 34px rgba(4, 6, 10, 0.55);
  opacity: var(--xc-t, 0);
}
.xc-on .xl-nav > :not(.xc-bar):not(.xc-pill) { position: relative; }
.xc-on .xl-nav-brand { transform: translateX(calc(var(--xc-t, 0) * var(--dx))); }
.xc-on .xl-nav-brand img { height: 64px; transform: scale(calc(1 - var(--xc-t, 0) * 0.31)); transform-origin: left center; transition: none; }
.xc-on .xl-nav-links { gap: clamp(18px, 2.1vw, 30px); transform: translateX(calc(var(--xc-t, 0) * -1 * var(--dx))); }
.xc-on .xl-nav-ws { min-height: 48px; padding-inline: 26px; display: inline-flex; align-items: center; transform: translateX(calc(var(--xc-t, 0) * -1 * var(--dx))) scale(calc(1 - var(--xc-t, 0) * 0.06)); transform-origin: right center; }
.xc-on .xl-nav.xc-capsule .xl-nav-links a.active { border-bottom-color: transparent; color: var(--xl-gold-hi); }
@media (max-width: 880px) {
  /* mobile: only a light condensed state — no capsule, no horizontal motion */
  .xc-on .xl-nav { --dx: 0px; min-height: 70px; padding-inline: clamp(16px, 4vw, 42px); }
  .xc-on .xc-pill { display: none; }
  .xc-on .xc-bar { opacity: 1; }
  .xc-on .xl-nav-brand img { height: 52px; transform: scale(calc(1 - var(--xc-t, 0) * 0.14)); }
  .xc-on .xl-nav-ws { transform: none; }
}

/* =================== shared cinematic vocabulary =================== */
.xc-on .xc-head .xl-kicker { letter-spacing: 3.4px; }
.xc-dio .ln { fill: none; stroke: rgba(223, 229, 238, 0.6); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.xc-dio .lng { fill: none; stroke: rgba(233, 200, 126, 0.88); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.xc-dio .fill-dark { fill: rgba(10, 13, 18, 0.85); }
.xc-dio .fill-glass { fill: rgba(223, 229, 238, 0.06); }
.xc-dio .fill-gold { fill: var(--xl-gold, #c9a86a); }
.xc-dio .person { fill: #161b23; stroke: rgba(233, 200, 126, 0.55); stroke-width: 0.9; }
.xc-dio .person path, .xc-dio .person circle { fill: #161b23; stroke: rgba(233, 200, 126, 0.55); stroke-width: 0.9; }
.xc-dio .person .fill-gold, .xc-dio .person rect { fill: var(--xl-gold); stroke: none; }
.xc-dio .coord { font: 10px var(--xl-font-head, monospace); letter-spacing: 2.2px; fill: var(--xl-ink-faint, #626c7d); }
.xc-dio .shadow { fill: rgba(0, 0, 0, 0.35); }
.xc-dio .win { fill: none; stroke: rgba(233, 200, 126, 0.65); stroke-width: 2.4; stroke-linecap: butt; }
.xc-dio .ghost { stroke: rgba(223, 229, 238, 0.18); stroke-width: 1; stroke-dasharray: 3 5; }
.xc-stage-art .ln, .xc-pillar-ic .ln { fill: none; stroke: rgba(223, 229, 238, 0.45); stroke-width: 1.3; stroke-linecap: round; }
.xc-stage-art .lng, .xc-pillar-ic .lng { fill: none; stroke: rgba(233, 200, 126, 0.75); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.xc-stage-art .fill-dark { fill: rgba(10, 13, 18, 0.85); }
.xc-stage-art .fill-gold, .xc-pillar-ic .fill-gold { fill: var(--xl-gold); }

/* =================== three immersive worlds =================== */
.xc-on .xc-worlds { margin-top: 34px; }
.xc-on .xc-dio { display: block; width: 100%; height: auto; }
.xc-on .xc-zones {
  display: grid; grid-template-columns: 1fr 1.08fr 1fr;
  gap: clamp(18px, 3vw, 44px);
  margin-top: 6px;
}
.xc-on .xc-zone {
  position: relative; padding: 14px 6px 10px;
  transition: transform 0.35s cubic-bezier(0.16, 0.84, 0.28, 1), opacity 0.35s ease;
}
.xc-on .xc-zone::before { /* connecting stem up into the diorama */
  content: ''; position: absolute; left: 50%; top: -12px; width: 1px; height: 14px;
  background: linear-gradient(to bottom, transparent, var(--xl-gold-line));
}
.xc-on .xc-zone h3 { font-family: var(--xl-font-head); font-weight: 600; font-size: 21px; letter-spacing: 0.4px; color: var(--xl-ink-bright); }
.xc-on .xc-zone p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--xl-ink); max-width: 34ch; }
.xc-on .xc-zone.im { text-align: center; }
.xc-on .xc-zone.im p { margin-inline: auto; }
.xc-on .xc-zone.sf { text-align: right; }
.xc-on .xc-zone.sf p { margin-left: auto; }
.xc-on .xc-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  min-height: 44px; align-content: center;
  font-family: var(--xl-font-head); font-weight: 500; font-size: 14px; letter-spacing: 0.5px;
  color: var(--xl-gold); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.xc-on .xc-cta:hover, .xc-on .xc-cta:focus-visible { color: var(--xl-gold-hi); border-bottom-color: rgba(233, 200, 126, 0.5); }
.xc-on .xc-cta i { font-style: normal; transition: transform 0.25s ease; }
.xc-on .xc-zone:is(:hover, :focus-within) .xc-cta i { transform: translateX(5px); }
/* step-flow chips: each world explains its journey at a glance */
.xc-on .xc-flow { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding: 0; }
.xc-on .xc-zone.sf .xc-flow { justify-content: flex-end; }
.xc-on .xc-flow li {
  padding: 5px 10px; border-radius: 9px;
  font-family: var(--xl-font-head); font-weight: 500; font-size: 11px; letter-spacing: 0.5px;
  color: var(--xl-ink); background: rgba(17, 22, 30, 0.8); border: 1px solid var(--xl-hairline);
}
.xc-on .xc-flow li:last-of-type { color: var(--xl-gold-hi); border-color: var(--xl-gold-line); }
.xc-on .xc-flow li.sep { padding: 0; border: 0; background: none; color: var(--xl-gold-mute); font-size: 11px; }
.xc-on .xc-mapnodes { list-style: none; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; padding: 0; }
.xc-on .xc-mapnodes li {
  padding: 7px 12px; border-radius: 11px;
  background: rgba(17, 22, 30, 0.8); border: 1px solid var(--xl-hairline);
  font-size: 11px; line-height: 1.4;
}
.xc-on .xc-mapnodes b { display: block; font-family: var(--xl-font-head); font-weight: 600; font-size: 11.5px; color: var(--xl-gold-hi); letter-spacing: 0.4px; }
.xc-on .xc-mapnodes span { color: var(--xl-ink-dim); }

/* diorama hover regions (thirds over the artwork) */
.xc-on .xc-dio-wrap { position: relative; }
.xc-on .xc-hit { position: absolute; top: 0; bottom: 0; }
.xc-on .xc-hit.vw { left: 0; width: 31%; }
.xc-on .xc-hit.im { left: 34%; width: 32%; }
.xc-on .xc-hit.sf { right: 0; width: 31%; }
/* artwork-hover states mirror the zone-hover states exactly */
.xc-on .xc-worlds.f-vw .xc-zone:not(.vw), .xc-on .xc-worlds.f-im .xc-zone:not(.im), .xc-on .xc-worlds.f-sf .xc-zone:not(.sf) { opacity: 0.55; }
.xc-on .xc-worlds.f-vw .xc-zone.vw, .xc-on .xc-worlds.f-im .xc-zone.im, .xc-on .xc-worlds.f-sf .xc-zone.sf { opacity: 1; }
.xc-on .xc-worlds.f-vw .xc-dio :is(.dz-im, .dz-sf),
.xc-on .xc-worlds.f-im .xc-dio :is(.dz-vw, .dz-sf),
.xc-on .xc-worlds.f-sf .xc-dio :is(.dz-vw, .dz-im) { opacity: 0.45; }
.xc-on .xc-worlds.f-vw .xc-dio .dz-vw, .xc-on .xc-worlds.f-im .xc-dio .dz-im, .xc-on .xc-worlds.f-sf .xc-dio .dz-sf { transform: scale(1.03); }
.xc-on .xc-worlds.f-vw .portal .lng { stroke: var(--xl-gold-hi); filter: drop-shadow(0 0 6px rgba(233, 200, 126, 0.6)); }
.xc-on .xc-worlds.f-vw .dz-vw .hs circle:first-child { animation: xcPulse 1.6s ease-in-out infinite; }
.xc-on .xc-worlds.f-im .dz-core .pin { animation: xcPinNudge 1.4s ease-in-out infinite; }
.xc-on .xc-worlds.f-im .dz-im .beam { opacity: 1; }
.xc-on .xc-worlds.f-sf .dz-sf .p4 { transform: translateY(-5px); }
.xc-on .xc-worlds.f-sf .dz-sf .p1 { transform: translateY(4px); }

/* ---- world focus interaction (hover AND keyboard, via :has) ---- */
.xc-on .xc-zone:is(:hover, :focus-within) { transform: translateY(-4px); }
.xc-on .xc-worlds:has(.xc-zone.vw:is(:hover, :focus-within)) .xc-zone:not(.vw),
.xc-on .xc-worlds:has(.xc-zone.im:is(:hover, :focus-within)) .xc-zone:not(.im),
.xc-on .xc-worlds:has(.xc-zone.sf:is(:hover, :focus-within)) .xc-zone:not(.sf) { opacity: 0.55; }
.xc-on .xc-dio .dz-vw, .xc-on .xc-dio .dz-im, .xc-on .xc-dio .dz-sf { transition: opacity 0.35s ease, transform 0.35s ease; transform-box: fill-box; transform-origin: center; }
.xc-on .xc-worlds:has(.xc-zone.vw:is(:hover, :focus-within)) .xc-dio :is(.dz-im, .dz-sf),
.xc-on .xc-worlds:has(.xc-zone.im:is(:hover, :focus-within)) .xc-dio :is(.dz-vw, .dz-sf),
.xc-on .xc-worlds:has(.xc-zone.sf:is(:hover, :focus-within)) .xc-dio :is(.dz-vw, .dz-im) { opacity: 0.45; }
.xc-on .xc-worlds:has(.xc-zone.vw:is(:hover, :focus-within)) .xc-dio .dz-vw,
.xc-on .xc-worlds:has(.xc-zone.im:is(:hover, :focus-within)) .xc-dio .dz-im,
.xc-on .xc-worlds:has(.xc-zone.sf:is(:hover, :focus-within)) .xc-dio .dz-sf { transform: scale(1.03); }
/* focus-specific activations */
.xc-on .xc-dio .portal .lng { transition: stroke 0.3s, filter 0.3s; }
.xc-on .xc-worlds:has(.xc-zone.vw:is(:hover, :focus-within)) .portal .lng { stroke: var(--xl-gold-hi); filter: drop-shadow(0 0 6px rgba(233, 200, 126, 0.6)); }
.xc-on .xc-worlds:has(.xc-zone.vw:is(:hover, :focus-within)) .dz-vw .hs circle:first-child { animation: xcPulse 1.6s ease-in-out infinite; }
.xc-on .xc-worlds:has(.xc-zone.im:is(:hover, :focus-within)) .dz-core .pin { animation: xcPinNudge 1.4s ease-in-out infinite; }
.xc-on .xc-worlds:has(.xc-zone.im:is(:hover, :focus-within)) .dz-im .beam { opacity: 1; }
.xc-on .xc-worlds:has(.xc-zone.sf:is(:hover, :focus-within)) .dz-sf .p4 { transform: translateY(-5px); }
.xc-on .xc-worlds:has(.xc-zone.sf:is(:hover, :focus-within)) .dz-sf .p1 { transform: translateY(4px); }
.xc-on .xc-dio .dz-sf .plate { transition: transform 0.35s ease; transform-box: fill-box; }
@keyframes xcPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes xcPinNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.xc-on .xc-dio .pin { transform-box: fill-box; }

/* ---- scroll reveal (normal scrolling; --xcw 0→1 set by JS) ----
   0–20% shared foundation · 20–45% VisionWalk · 45–70% Maps · 70–90% SpaceFlow
   · 90–100% connections + CTAs. Reduced motion pins --xcw at 1. */
.xc-on .xc-dio .dz-shared { opacity: clamp(0.3, calc(var(--xcw, 1) * 5), 1); }
.xc-on .xc-dio .dz-core { opacity: clamp(0.25, calc(var(--xcw, 1) * 4.2), 1); }
.xc-on .xc-dio .dz-vw { opacity: clamp(0.3, calc((var(--xcw, 1) - 0.2) * 4), 1); }
.xc-on .xc-dio .dz-vw .vring { stroke-dasharray: 1; stroke-dashoffset: clamp(0, calc(1 - (var(--xcw, 1) - 0.26) * 4), 1); }
.xc-on .xc-dio .dz-im { opacity: clamp(0.3, calc((var(--xcw, 1) - 0.45) * 4), 1); }
.xc-on .xc-dio .dz-im .rt { stroke-dasharray: 1; stroke-dashoffset: clamp(0, calc(1 - (var(--xcw, 1) - 0.48) * 3.4), 1); }
.xc-on .xc-dio .dz-sf { opacity: clamp(0.3, calc((var(--xcw, 1) - 0.7) * 4.5), 1); }
.xc-on .xc-dio .dz-links .branch { stroke-dasharray: 1; stroke-dashoffset: clamp(0, calc(1 - (var(--xcw, 1) - 0.86) * 7), 1); opacity: clamp(0, calc((var(--xcw, 1) - 0.82) * 5), 1); }
.xc-on .xc-zone { opacity: clamp(0.45, calc((var(--xcw, 1) - var(--zd, 0.24)) * 4), 1); }
.xc-on .xc-zone.vw { --zd: 0.24; }
.xc-on .xc-zone.im { --zd: 0.48; }
.xc-on .xc-zone.sf { --zd: 0.7; }
/* focus dimming must still win over the reveal floor — and the focused world
   always rises to full presence, whatever the reveal progress */
.xc-on .xc-worlds:has(.xc-zone:is(:hover, :focus-within)) .xc-zone:not(:is(:hover, :focus-within)) { opacity: 0.55; }
.xc-on .xc-worlds .xc-zone:is(:hover, :focus-within) { opacity: 1; }

/* =================== experience journey =================== */
/* Desktop with motion: the section HOLDS (sticky inner block) while ~130vh of
   scrolling drives the progression, then releases naturally. Mobile and
   reduced motion never pin. */
@media (min-width: 1061px) {
  html.xc-on:not(.xc-rm) .xc-journey { height: 235vh; height: 235svh; padding-block: 0; }
  html.xc-on:not(.xc-rm) .xc-journey .xc-jsticky {
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    display: flex; align-items: center;
    overflow: clip;
    padding-inline: clamp(16px, 5vw, 48px);
  }
  html.xc-on:not(.xc-rm) .xc-journey .xc-jsticky .xl-wide { width: 100%; }
}
.xc-on .xc-rail { position: relative; height: 2px; margin: 44px 4px 0; }
.xc-on .xc-rail i { position: absolute; inset: 0; border-radius: 2px; }
.xc-on .xc-rail-track { background: rgba(255, 255, 255, 0.1); }
.xc-on .xc-rail-fill {
  background: linear-gradient(to right, var(--xl-gold), var(--xl-gold-hi));
  transform-origin: left center;
  transform: scaleX(var(--xcj, 1));
  box-shadow: 0 0 12px rgba(233, 200, 126, 0.35);
}
.xc-on .xc-stages {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 1.6vw, 20px);
  margin-top: 26px;
}
.xc-on .xc-stage {
  position: relative;
  border-radius: 16px; padding: 14px 14px 16px;
  background: linear-gradient(165deg, rgba(20, 25, 34, 0.9), rgba(13, 17, 23, 0.86));
  border: 1px solid var(--xl-hairline);
  opacity: 0.45;
  transition: opacity 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
}
.xc-on .xc-stage::before { /* node on the rail */
  content: ''; position: absolute; top: -32px; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--xl-bg-2); border: 1.5px solid rgba(255, 255, 255, 0.25);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
/* inactive stages sit slightly back; activation "assembles" them forward */
.xc-on .xc-stage:not(.on) { --popY: 10px; --popS: 0.97; }
.xc-on .xc-stage.on { opacity: 0.85; border-color: rgba(233, 200, 126, 0.24); }
html.xc-rm .xc-stage { --popY: 0px; --popS: 1; }
.xc-on .xc-stage.on::before { background: var(--xl-gold); border-color: var(--xl-gold-hi); box-shadow: 0 0 10px rgba(233, 200, 126, 0.5); }
.xc-on .xc-stage.now {
  opacity: 1;
  border-color: rgba(233, 200, 126, 0.65);
  box-shadow:
    0 18px 44px rgba(6, 8, 12, 0.55),
    0 0 30px rgba(233, 200, 126, 0.16),
    0 0 0 1px rgba(233, 200, 126, 0.35) inset;
}
.xc-on .xc-stage.now h3 { color: var(--xl-gold-hi); }
.xc-on .xc-stage-art { display: block; width: 100%; aspect-ratio: 160 / 120; opacity: 0.5; transition: opacity 0.4s ease; }
.xc-on .xc-stage.on .xc-stage-art { opacity: 1; }
.xc-on .xc-stage .xc-idx {
  position: absolute; top: 10px; right: 12px;
  font-family: var(--xl-font-head); font-size: 11px; letter-spacing: 1.5px; color: var(--xl-ink-faint);
}
.xc-on .xc-stage.on .xc-idx { color: var(--xl-gold-mute); }
.xc-on .xc-stage h3 { font-family: var(--xl-font-head); font-weight: 600; font-size: 15.5px; color: var(--xl-ink-bright); margin-top: 6px; }
.xc-on .xc-stage p { margin-top: 6px; font-size: 12.5px; line-height: 1.55; color: var(--xl-ink-dim); }
.xc-on .xc-stage.now p { color: var(--xl-ink); }
.xc-on .xc-stage:focus-visible { outline: 2px solid var(--xl-gold); outline-offset: 3px; }
.xc-on .s-engage .pulse { animation: xcRing 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.xc-on .xc-stage:not(.now) .pulse { animation: none; }
@keyframes xcRing { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }

/* =================== ecosystem: hold + connect one by one ===================
   Desktop with motion: #ecosystem pins and scroll steps e1→e4 activate the
   foundation card, then draw each connector string to its product in turn.
   Mobile/reduced keep the approved section behaviour untouched. */
@media (min-width: 1061px) {
  html.xc-on:not(.xc-rm) #ecosystem { height: 220vh; height: 220svh; padding-block: 0; }
  html.xc-on:not(.xc-rm) #ecosystem .xc-esticky {
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    display: flex; align-items: center;
    overflow: clip;
    padding-inline: clamp(16px, 5vw, 48px);
  }
  html.xc-on:not(.xc-rm) #ecosystem .xc-esticky .xl-wide { width: 100%; }

  /* step-driven states replace the one-shot choreography */
  html.xc-on:not(.xc-rm) .xl-eco .xl-sec-head[data-reveal],
  html.xc-on:not(.xc-rm) .xl-eco .xl-eco-mantra span { opacity: 1; animation: none !important; transform: none; }
  html.xc-on:not(.xc-rm) .xl-eco .xl-eco-profile[data-reveal] {
    animation: none !important;
    opacity: 0; transform: translateX(-28px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 0.84, 0.28, 1);
  }
  html.xc-on:not(.xc-rm) .xl-eco .xl-eco-profile li {
    animation: none !important;
    opacity: 0; transform: translateX(-12px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  html.xc-on:not(.xc-rm) .xl-eco.e1 .xl-eco-profile[data-reveal] { opacity: 1; transform: none; }
  html.xc-on:not(.xc-rm) .xl-eco.e1 .xl-eco-profile li { opacity: 1; transform: none; }
  html.xc-on:not(.xc-rm) .xl-eco.e1 .xl-eco-profile li:nth-child(2) { transition-delay: 0.08s; }
  html.xc-on:not(.xc-rm) .xl-eco.e1 .xl-eco-profile li:nth-child(3) { transition-delay: 0.16s; }
  html.xc-on:not(.xc-rm) .xl-eco.e1 .xl-eco-profile li:nth-child(4) { transition-delay: 0.24s; }
  html.xc-on:not(.xc-rm) .xl-eco .xl-eco-links path {
    stroke-dasharray: 260; stroke-dashoffset: 260;
    transition: stroke-dashoffset 0.9s ease;
  }
  html.xc-on:not(.xc-rm) .xl-eco.e2 .xl-eco-links path:nth-of-type(1),
  html.xc-on:not(.xc-rm) .xl-eco.e3 .xl-eco-links path:nth-of-type(2),
  html.xc-on:not(.xc-rm) .xl-eco.e4 .xl-eco-links path:nth-of-type(3) { stroke-dashoffset: 0; }
  html.xc-on:not(.xc-rm) .xl-eco .xl-eco-products li {
    animation: none !important;
    opacity: 0; transform: translateX(28px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 0.84, 0.28, 1), border-color 0.2s;
  }
  html.xc-on:not(.xc-rm) .xl-eco.e2 .xl-eco-products li:nth-child(1),
  html.xc-on:not(.xc-rm) .xl-eco.e3 .xl-eco-products li:nth-child(2),
  html.xc-on:not(.xc-rm) .xl-eco.e4 .xl-eco-products li:nth-child(3) { opacity: 1; transform: none; }
  html.xc-on:not(.xc-rm) .xl-eco .xl-eco-products li:hover { transform: translateX(4px); }
}

/* =================== platform proof =================== */
.xc-on .xc-proofstage { position: relative; margin-top: 40px; }
.xc-on .xc-proofmark { display: flex; flex-direction: column; align-items: center; margin-bottom: 30px; }
.xc-on .xc-proofmark img { position: relative; z-index: 1; }
.xc-on .xc-proofrings { position: relative; width: 0; height: 0; }
.xc-on .xc-proofrings i {
  position: absolute; left: 50%; top: 26px; transform: translate(-50%, -50%);
  border: 1px solid rgba(233, 200, 126, 0.22); border-radius: 50%;
}
.xc-on .xc-proofrings i:nth-child(1) { width: 170px; height: 170px; }
.xc-on .xc-proofrings i:nth-child(2) { width: 250px; height: 250px; border-style: dashed; opacity: 0.6; }
.xc-on .xc-proofgrid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.8vw, 22px);
}
.xc-on .xc-proofpanel {
  position: relative; /* no overflow:hidden — the connecting stem sits above the panel */
  border-radius: 16px; padding: 20px 18px 16px;
  background: linear-gradient(165deg, rgba(20, 25, 34, 0.92), rgba(13, 17, 23, 0.88));
  border: 1px solid var(--xl-hairline);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  opacity: clamp(0.3, calc(var(--xcp, 1) * 2.4), 1);
}
.xc-on .xc-proofpanel::before { /* gold accent line, brightens on focus */
  content: ''; position: absolute; top: 0; left: 18px; right: 18px; height: 1px;
  background: linear-gradient(to right, transparent, rgba(233, 200, 126, 0.4), transparent);
  transition: opacity 0.3s ease; opacity: 0.5;
}
.xc-on .xc-proofpanel:is(:hover, :focus-visible)::before { opacity: 1; }
.xc-on .xc-proofpanel .xc-idx {
  position: absolute; top: 14px; right: 16px;
  font-family: var(--xl-font-head); font-size: 11px; letter-spacing: 1.5px; color: var(--xl-ink-faint);
}
.xc-on .xc-proof-ic { width: 34px; height: 34px; display: block; margin-bottom: 12px; }
.xc-on .xc-proof-ic .lng { fill: none; stroke: rgba(233, 200, 126, 0.8); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.xc-on .xc-proof-ic .fill-gold { fill: var(--xl-gold); }
.xc-on .xc-prooflink {
  position: absolute; top: -30px; left: 50%; width: 1px; height: 30px;
  background: linear-gradient(to bottom, transparent, rgba(233, 200, 126, calc(0.45 * var(--xcp, 1))));
}
.xc-on .xc-proofpanel:is(:hover, :focus-visible) { border-color: rgba(233, 200, 126, 0.45); box-shadow: 0 16px 38px rgba(6, 8, 12, 0.5); }
.xc-on .xc-proofpanel:focus-visible { outline: 2px solid var(--xl-gold); outline-offset: 3px; }
.xc-on .xc-proofpanel h3 { font-family: var(--xl-font-head); font-weight: 600; font-size: 15px; letter-spacing: 0.4px; color: var(--xl-gold-hi); }
.xc-on .xc-proofpanel ul { list-style: none; padding: 0; margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.xc-on .xc-proofpanel li {
  position: relative; padding-left: 16px;
  font-size: 13px; color: var(--xl-ink);
}
.xc-on .xc-proofpanel li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px;
  border-radius: 2px; background: rgba(233, 200, 126, 0.35);
}
/* proof drawer: the supporting line unfolds on hover/keyboard focus
   (always open on touch devices and under reduced motion) */
.xc-on .xc-proofnote {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--xl-hairline);
  font-size: 12px; line-height: 1.55; color: var(--xl-gold-hi);
}
@media (hover: hover) and (pointer: fine) {
  .xc-on .xc-proofnote {
    max-height: 0; margin-top: 0; padding-top: 0; border-top-color: transparent;
    opacity: 0; overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.35s ease, margin-top 0.4s ease, padding-top 0.4s ease, border-top-color 0.3s ease;
  }
  .xc-on .xc-proofpanel:is(:hover, :focus-visible, :focus-within) .xc-proofnote {
    max-height: 70px; margin-top: 12px; padding-top: 10px; border-top-color: var(--xl-hairline); opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .xc-on .xc-proofnote { max-height: none; margin-top: 12px; padding-top: 10px; border-top-color: var(--xl-hairline); opacity: 1; transition: none; }
}

/* =================== why xeroverse =================== */
.xc-on .xc-whygrid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 4vw, 56px); margin-top: 38px; align-items: start; }
.xc-on .xc-why .xl-brandstory { grid-template-columns: 1fr; gap: 18px; margin-top: 0; }
.xc-on .xc-why .xl-brand-connector { display: none; }
.xc-on .xc-caps { list-style: none; padding: 0; margin-top: 20px; display: flex; flex-wrap: wrap; gap: 9px; }
.xc-on .xc-caps li {
  padding: 8px 14px; border-radius: 999px;
  font-family: var(--xl-font-head); font-weight: 500; font-size: 12px; letter-spacing: 0.6px;
  color: var(--xl-gold-hi);
  background: rgba(233, 200, 126, 0.07); border: 1px solid var(--xl-gold-line);
}
.xc-on .xc-pillars { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: pillar; }
.xc-on .xc-pillar {
  position: relative;
  display: flex; gap: 16px; align-items: center;
  padding: 16px 18px;
  border-radius: 15px;
  background: var(--xl-glass-2); border: 1px solid var(--xl-hairline);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.xc-on .xc-pillar::before { /* connecting line between rows */
  content: ''; position: absolute; left: 33px; top: 100%; width: 1px; height: 12px;
  background: var(--xl-gold-line);
}
.xc-on .xc-pillar:last-child::before { display: none; }
.xc-on .xc-pillar:is(:hover, :focus-visible) { border-color: rgba(233, 200, 126, 0.4); }
.xc-on .xc-pillar:focus-visible { outline: 2px solid var(--xl-gold); outline-offset: 3px; }
.xc-on .xc-pillar-ic { width: 34px; height: 34px; flex: none; }
.xc-on .xc-pillar h3 { font-family: var(--xl-font-head); font-weight: 600; font-size: 16px; color: var(--xl-ink-bright); }
.xc-on .xc-pillar p { margin-top: 4px; font-size: 13px; color: var(--xl-ink-dim); line-height: 1.5; }
.xc-on .xc-pillar .xc-idx { margin-left: auto; font-family: var(--xl-font-head); font-size: 12px; letter-spacing: 1.5px; color: var(--xl-gold-mute); }

/* =================== VisionWalk 360° preview =================== */
.xc-on .xc-panohost { overflow: hidden; }
.xc-on .xc-panohost .xl-vw-chip { z-index: 3; pointer-events: none; }
/* the neighbouring collage cards keep floating ABOVE the 360 box */
.xc-on .xl-vw-stage .xl-vw-card, .xc-on .xl-vw-stage .xl-vw-plan, .xc-on .xl-vw-stage .xl-vw-lead { z-index: 3; }
@media (max-width: 900px) {
  /* the teaser stage stacks and the scene loses its absolute box — give the
     pano an anchored, sized host */
  .xc-on .xc-panohost { position: relative; min-height: 220px; }
}
.xc-on .xc-pano {
  position: absolute; inset: 0; z-index: 2; /* above the scene's ::after overlay */
  overflow: hidden; cursor: grab;
  touch-action: pan-y; /* horizontal drags look around; vertical still scrolls */
  border-radius: inherit;
}
.xc-on .xc-pano.grabbing { cursor: grabbing; }
.xc-on .xc-pano:focus-visible { outline: 2px solid var(--xl-gold); outline-offset: -2px; }
.xc-on .xc-pano-strip { display: flex; height: 100%; width: max-content; will-change: transform; }
.xc-on .xc-pano-strip svg { height: 100%; width: auto; aspect-ratio: 1200 / 320; flex: none; display: block; }
.xc-on .xc-pano-strip img { height: 100%; width: auto; flex: none; display: block; pointer-events: none; user-select: none; }
/* live embed: the scene box takes the whole stage (decorative collage cards
   would fight the real app), and the app renders at 2.4x virtual width scaled
   down — it lays out as the structured DESKTOP experience, not cramped mobile */
.xc-on .xc-embed-on .xl-vw-scene { inset: 0; width: 100%; height: 100%; transform: none; }
.xc-on .xc-embed-on :is(.xl-vw-card, .xl-vw-plan, .xl-vw-lead) { display: none; }
.xc-on .xc-embed {
  position: absolute; inset: 0; z-index: 2; border: 0; background: #0d1117;
  width: 240%; height: 240%;
  transform: scale(0.4167);
  transform-origin: top left;
  border-radius: 24px;
}
.xc-on .xc-pano-hs circle:first-child { animation: xcPulse 2s ease-in-out infinite; }
.xc-on .xc-pano-hint {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  padding: 7px 14px; border-radius: 999px;
  font-family: var(--xl-font-head); font-size: 10.5px; letter-spacing: 2px;
  color: var(--xl-gold-hi); background: rgba(10, 13, 18, 0.72);
  border: 1px solid var(--xl-gold-line); pointer-events: none;
  transition: opacity 0.5s ease;
}
.xc-on .xc-pano-used .xc-pano-hint { opacity: 0; }
.xc-on .xc-pano-compass {
  position: absolute; right: 12px; top: 12px; width: 30px; height: 30px;
  border-radius: 50%; border: 1px solid var(--xl-gold-line);
  background: rgba(10, 13, 18, 0.72); pointer-events: none;
}
.xc-on .xc-pano-compass i {
  position: absolute; left: 50%; top: 50%; width: 2px; height: 11px;
  margin: -11px 0 0 -1px; border-radius: 2px;
  background: var(--xl-gold); transform-origin: 50% 100%;
}

/* =================== maps teaser spatial layer =================== */
.xc-on .xc-mapx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.xc-on .xc-mapx .ring { fill: none; stroke: rgba(233, 200, 126, 0.22); stroke-dasharray: 3 6; }
.xc-on .xc-mapx .ring.r2 { stroke: rgba(233, 200, 126, 0.15); }
.xc-on .xc-mapx .ring.r3 { stroke: rgba(233, 200, 126, 0.09); }
.xc-on .xc-mapx .am circle { fill: rgba(17, 22, 30, 0.9); stroke: rgba(233, 200, 126, 0.6); }
.xc-on .xc-mapx .am .ic { stroke: rgba(233, 200, 126, 0.85); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.xc-on .xc-mapx .am .icr { fill: none; stroke: rgba(233, 200, 126, 0.85); stroke-width: 1.4; }
.xc-on .xc-mapx .am.sm circle { stroke: rgba(223, 229, 238, 0.35); }
.xc-on .xc-mapx .mk circle { fill: rgba(150, 130, 220, 0.7); }
.xc-on .xc-mapx .mk .halo { fill: none; stroke: rgba(150, 130, 220, 0.35); }
/* rings + nodes fade in with the section's existing draw trigger */
.xc-on .xc-mapx .ring, .xc-on .xc-mapx .am, .xc-on .xc-mapx .mk { opacity: 0; transition: opacity 0.9s ease 0.2s; }
.xc-on #mapsStage.draw .xc-mapx .ring, .xc-on #mapsStage.draw .xc-mapx .am, .xc-on #mapsStage.draw .xc-mapx .mk { opacity: 1; }
/* the existing dashed route lines gain a slow flow while on screen */
.xc-on #mapsStage.draw .xl-maps-routes path { stroke-dasharray: 4 7; animation: xcRouteFlow 2.6s linear infinite; }
@keyframes xcRouteFlow { to { stroke-dashoffset: -22; } }
.xc-on .xl-map-panel { transition: transform 0.3s ease, border-color 0.3s ease; }
.xc-on .xl-map-panel:hover { transform: translateY(-4px); border-color: rgba(233, 200, 126, 0.45); }
@media (max-width: 900px) { .xc-on .xc-mapx { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .xc-on .xc-pano-hs circle:first-child { animation: none; }
  .xc-on #mapsStage.draw .xl-maps-routes path { animation: none; stroke-dashoffset: 0; }
  .xc-on .xc-mapx .ring, .xc-on .xc-mapx .am, .xc-on .xc-mapx .mk { opacity: 1; transition: none; }
}

/* =================== restrained pointer tilt =================== */
.xc-on .xc-tilt {
  transform: perspective(950px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--popY, 0px)) scale(var(--popS, 1));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.xc-on .xc-tilt.tilting { transition: transform 0.12s ease-out; transform: perspective(950px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(10px) translateY(var(--popY, 0px)) scale(var(--popS, 1)); }
.xc-on .xc-tilt.tilting::after { /* pointer-following border light */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(220px 80px at var(--lx, 50%) 0%, rgba(233, 200, 126, 0.1), transparent 70%);
}

/* =================== section transitions (shared gold trace) =================== */
.xc-on .xc-worlds-sec, .xc-on .xc-journey, .xc-on .xc-proof { position: relative; }
.xc-on :is(.xc-journey, .xc-proof)::before {
  content: ''; position: absolute; left: 50%; top: -34px; width: 1px; height: 68px;
  background: linear-gradient(to bottom, transparent, var(--xl-gold-line) 50%, transparent);
}

/* =================== tablet =================== */
@media (max-width: 1024px) {
  .xc-on .xc-stages { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .xc-on .xc-proofgrid { grid-template-columns: repeat(2, 1fr); }
  .xc-on .xc-whygrid { grid-template-columns: 1fr; }
}

/* =================== mobile: connected vertical journey =================== */
@media (max-width: 760px) {
  .xc-on .xc-zones { grid-template-columns: 1fr; gap: 26px; }
  .xc-on .xc-zone.im, .xc-on .xc-zone.sf { text-align: left; }
  .xc-on .xc-zone.im p, .xc-on .xc-zone.sf p { margin-left: 0; }
  .xc-on .xc-mapnodes { justify-content: flex-start; }
  .xc-on .xc-zone { padding-left: 18px; border-left: 1px solid var(--xl-gold-line); }
  .xc-on .xc-zone::before { display: none; }
  .xc-on .xc-stages { grid-template-columns: 1fr; row-gap: 14px; margin-top: 10px; }
  .xc-on .xc-rail { display: none; }
  .xc-on .xc-stage { margin-left: 18px; opacity: 0.9; }
  .xc-on .xc-stage::before { top: 50%; left: -22px; transform: translateY(-50%); }
  .xc-on .xc-stage::after { /* continuous connecting line */
    content: ''; position: absolute; left: -18px; top: calc(50% + 8px); bottom: -18px; width: 1px;
    background: var(--xl-gold-line);
  }
  .xc-on .xc-stages li:last-child::after { display: none; }
  .xc-on .xc-proofgrid { grid-template-columns: 1fr; }
  .xc-on .xc-proofrings i:nth-child(2) { display: none; }
  .xc-on .xc-tilt, .xc-on .xc-tilt.tilting { transform: none; transition: none; }
  .xc-on .xc-tilt.tilting::after { display: none; }
}

/* =================== reduced motion =================== */
@media (prefers-reduced-motion: reduce) {
  .xc-on .xl-nav { transition: none; }
  .xc-on .xc-zone, .xc-on .xc-stage, .xc-on .xc-tilt, .xc-on .xc-tilt.tilting { transition: none; transform: none; }
  .xc-on .xc-tilt.tilting::after { display: none; }
  .xc-on .xc-dio .dz-vw .vring, .xc-on .xc-dio .dz-im .rt, .xc-on .xc-dio .dz-links .branch { stroke-dashoffset: 0; }
  .xc-on .s-engage .pulse,
  .xc-on .xc-worlds:has(.xc-zone.vw:is(:hover, :focus-within)) .dz-vw .hs circle:first-child,
  .xc-on .xc-worlds:has(.xc-zone.im:is(:hover, :focus-within)) .dz-core .pin { animation: none; }
  .xc-on .xc-rail-fill { transform: scaleX(1); }
  .xc-on .xc-stage { opacity: 1; }
}

/* =================== forced colours =================== */
@media (forced-colors: active) {
  .xc-on .xc-stage, .xc-on .xc-proofpanel, .xc-on .xc-pillar, .xc-on .xc-mapnodes li { border: 1px solid CanvasText; }
  .xc-on .xc-rail-track { background: CanvasText; }
  .xc-on .xc-rail-fill { background: Highlight; box-shadow: none; }
  .xc-on .xc-stage::before { background: Canvas; border-color: CanvasText; }
  .xc-on .xc-stage.on::before { background: Highlight; }
  .xc-on .xc-cta { color: LinkText; }
}