/* Xeroverse shared landing — approved dark-navy/graphite/gold system,
   recomposed as an asymmetric, spatial layout (no product CSS imported).
   GPU-light: blurred discs + transform/opacity animation only; every
   decorative animation is disabled under prefers-reduced-motion and the
   hero orbit pauses off-screen (.paused set by IntersectionObserver). */

/* self-hosted variable fonts (SIL OFL 1.1 — licences in /fonts/) */
@font-face {
  font-family: 'Oxanium';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/oxanium-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope-latin-wght-normal.woff2') format('woff2-variations');
}

:root {
  --xl-bg-1: #1a222c;
  --xl-bg-2: #0d1117;
  --xl-gold: #c9a86a;
  --xl-gold-hi: #f6e7bd;
  --xl-ink-bright: #f2f4f8;
  --xl-ink: #c4cbd6;
  --xl-ink-dim: #99a3b4;
  --xl-ink-faint: #626c7d;
  --xl-gold-mute: #93856a;
  --xl-glass: rgba(255, 255, 255, 0.035);
  --xl-glass-2: rgba(255, 255, 255, 0.055);
  --xl-hairline: rgba(255, 255, 255, 0.09);
  --xl-gold-line: rgba(233, 200, 126, 0.28);
  --xl-font: 'Manrope', "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --xl-font-head: 'Oxanium', "Segoe UI", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; }
.xl-body {
  font-family: var(--xl-font);
  color: var(--xl-ink);
  background: var(--xl-bg-2);
  min-height: 100vh;
  overflow-x: hidden;
  animation: xlIn 0.6s ease both;
}
@keyframes xlIn { from { opacity: 0; } }

/* accessible focus + skip link */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--xl-gold);
  outline-offset: 3px;
  border-radius: 6px;
}
.xl-skip {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  padding: 10px 18px; border-radius: 10px;
  background: var(--xl-bg-2); color: var(--xl-gold-hi);
  border: 1px solid var(--xl-gold-line); text-decoration: none; font-size: 13px;
  transition: top 0.2s;
}
.xl-skip:focus { top: 12px; }

/* ---- aurora sky (fixed, behind everything; also carries the base navy
   gradient — body background-attachment:fixed is unreliable on iOS) ---- */
.xl-sky {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 120% at 50% 20%, var(--xl-bg-1) 0%, var(--xl-bg-2) 70%);
}
.xl-sky::before, .xl-sky::after {
  content: ''; position: absolute; border-radius: 50%;
  filter: blur(70px); will-change: transform;
}
.xl-sky::before {
  width: 55vmax; height: 40vmax; left: 38%; top: -18%;
  background: radial-gradient(circle at 40% 40%, rgba(233, 200, 126, 0.15), transparent 62%);
  animation: xlOrbitA 26s ease-in-out infinite;
}
.xl-sky::after {
  width: 48vmax; height: 44vmax; left: -16%; bottom: -22%;
  background: radial-gradient(circle at 55% 45%, rgba(96, 76, 173, 0.2), transparent 62%);
  animation: xlOrbitB 34s ease-in-out infinite;
}
@keyframes xlOrbitA { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-9vmax, 7vmax) scale(1.15); } }
@keyframes xlOrbitB { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(10vmax, -6vmax) scale(0.92); } }

/* ---- top nav: premium brand gateway (≈72px desktop) ---- */
.xl-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 20px;
  min-height: 70px;
  padding: 12px clamp(16px, 4vw, 42px);
  background: rgba(10, 13, 18, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s;
}
.xl-nav.scrolled {
  background: rgba(10, 13, 18, 0.72);
  border-bottom-color: rgba(233, 200, 126, 0.16);
}
.xl-nav-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--xl-ink-bright); }
.xl-nav-brand img { height: 47px; width: auto; display: block; }
.xl-nav-brand span { font-family: var(--xl-font-head); font-weight: 500; font-size: 11.5px; letter-spacing: 2.5px; color: var(--xl-gold-mute); text-transform: uppercase; padding-left: 14px; border-left: 1px solid var(--xl-hairline); }
.xl-nav-links { display: flex; gap: clamp(10px, 1.8vw, 26px); margin-left: auto; }
.xl-nav-links a {
  font-family: var(--xl-font-head); font-weight: 500;
  color: var(--xl-ink); text-decoration: none; font-size: 14px; letter-spacing: 0.4px;
  padding: 8px 2px; border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.xl-nav-links a:hover { color: var(--xl-gold-hi); border-color: rgba(233, 200, 126, 0.45); }
.xl-nav-links a.active { color: var(--xl-gold-hi); border-bottom: 2px solid var(--xl-gold); }
.xl-nav-ws { white-space: nowrap; }
.xl-nav-burger {
  display: none; margin-left: auto; background: none;
  border: 1px solid var(--xl-hairline); color: var(--xl-ink);
  border-radius: 10px; font-size: 18px; padding: 6px 14px; cursor: pointer;
  min-height: 44px; min-width: 44px;
}

/* ---- buttons (gold system, used sparingly) ---- */
.xl-btn {
  display: inline-block; text-decoration: none; text-align: center;
  font-family: var(--xl-font-head);
  padding: 13px 32px; border-radius: 999px; font-weight: 600; font-size: 15px;
  letter-spacing: 0.4px; cursor: pointer; border: 0;
}
.xl-btn.gold {
  color: #221a0c;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 58%), var(--xl-gold);
  box-shadow: 0 6px 18px rgba(201, 168, 106, 0.28);
  position: relative; overflow: hidden;
}
.xl-btn.gold::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.45) 50%, transparent 62%);
  transform: translateX(-140%);
  animation: xlSweep 4.2s 2.6s ease-in-out infinite;
}
@keyframes xlSweep { to { transform: translateX(130%); } }
.xl-btn.gold:hover { filter: brightness(1.06); }
.xl-btn.ghost { color: var(--xl-ink); border: 1px solid var(--xl-hairline); background: var(--xl-glass); }
.xl-btn.ghost:hover { border-color: rgba(233, 200, 126, 0.45); color: var(--xl-gold-hi); }
.xl-btn.small { padding: 10px 24px; font-size: 14px; }

/* ---- shared section scaffolding ---- */
.xl-wide { max-width: 1180px; margin: 0 auto; }
.xl-sec { position: relative; z-index: 1; padding: clamp(56px, 9vh, 104px) clamp(16px, 5vw, 48px); }
.xl-sec.alt { background: rgba(10, 13, 18, 0.4); border-top: 1px solid rgba(233, 200, 126, 0.1); border-bottom: 1px solid rgba(233, 200, 126, 0.1); }
.xl-sec-head { text-align: center; max-width: 760px; margin: 0 auto; }
.xl-sec-head.left { text-align: left; margin: 0; max-width: 640px; }
.xl-kicker { font-family: var(--xl-font-head); font-weight: 500; font-size: 12px; letter-spacing: 3px; color: var(--xl-gold-mute); }
.xl-sec h2 { font-family: var(--xl-font-head); font-size: clamp(28px, 3.4vw, 44px); font-weight: 500; letter-spacing: 0.4px; color: var(--xl-ink-bright); margin-top: 12px; line-height: 1.18; }
.xl-sec h2 b { font-weight: 600; color: var(--xl-gold); }
.xl-lede { margin-top: 16px; line-height: 1.68; font-size: 16px; max-width: 56ch; }
.xl-lede.dim { color: var(--xl-ink-dim); font-size: 14px; }
.xl-sec-head:not(.left) .xl-lede { margin-left: auto; margin-right: auto; }
.xl-center { text-align: center; }

/* reveal-on-view (JS adds .in; without JS everything stays visible) */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease var(--rd, 0s), transform 0.7s cubic-bezier(0.16, 0.84, 0.28, 1) var(--rd, 0s); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* =================== HERO =================== */
.xl-hero { position: relative; z-index: 1; padding: clamp(28px, 6vh, 64px) clamp(16px, 5vw, 48px) clamp(40px, 7vh, 72px); overflow-x: clip; }
.xl-hero-grid {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
  min-height: min(78vh, 720px);
}
.xl-hero-copy > * { animation: xlRise 0.85s cubic-bezier(0.16, 0.84, 0.28, 1) both; }
@keyframes xlRise {
  from { opacity: 0; transform: translateY(26px); filter: blur(7px); }
  to { opacity: 1; transform: none; filter: none; }
}
.xl-eyebrow { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; animation-delay: 0.08s !important; }
.xl-word { font-family: var(--xl-font-head); font-size: 21px; font-weight: 500; letter-spacing: 4px; color: var(--xl-ink-bright); }
.xl-word b {
  font-weight: 700;
  background: linear-gradient(110deg, var(--xl-gold) 20%, var(--xl-gold-hi) 42%, var(--xl-gold) 64%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: xlShimmer 4.5s 1.8s ease-in-out infinite;
}
@keyframes xlShimmer { 0%, 100% { background-position: 110% 0; } 50% { background-position: -10% 0; } }
.xl-eyebrow-sub { font-family: var(--xl-font-head); font-weight: 500; font-size: 11px; letter-spacing: 3.5px; text-transform: uppercase; color: var(--xl-gold-mute); }
.xl-headline {
  margin-top: 20px;
  font-family: var(--xl-font-head);
  font-size: clamp(38px, 4.6vw, 66px); line-height: 1.08;
  font-weight: 550; letter-spacing: 0.2px; color: var(--xl-ink-bright);
  max-width: 15ch;
  animation-delay: 0.2s !important;
}
.xl-headline b { font-weight: 600; color: var(--xl-gold); }
.xl-tag { font-size: clamp(15px, 1.7vw, 17px); color: var(--xl-ink); max-width: 48ch; margin-top: 20px; line-height: 1.68; animation-delay: 0.34s !important; }
.xl-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; animation-delay: 0.48s !important; }
.xl-cta .xl-btn.gold { animation: xlBreath 3.6s 2s ease-in-out infinite; }
@keyframes xlBreath {
  0%, 100% { box-shadow: 0 10px 30px rgba(201, 168, 106, 0.26); transform: scale(1); }
  50% { box-shadow: 0 14px 44px rgba(233, 200, 126, 0.46); transform: scale(1.02); }
}
.xl-note { font-size: 12px; color: var(--xl-ink-dim); margin-top: 18px; animation-delay: 0.6s !important; }

/* --- orbital ecosystem stage --- */
.xl-stage {
  position: relative; aspect-ratio: 1 / 1;
  max-width: min(600px, 47vw); width: 100%; margin-left: auto;
  animation: xlIn 1s 0.25s ease both;
}
.xl-stage-rings { position: absolute; inset: 0; }
.xl-stage-rings i {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  border: 1px solid rgba(233, 200, 126, 0.16);
  transform: translate(-50%, -50%);
}
.xl-stage-rings i:nth-child(1) { width: 62%; height: 62%; border-color: rgba(233, 200, 126, 0.24); box-shadow: 0 0 46px rgba(233, 200, 126, 0.07) inset; }
.xl-stage-rings i:nth-child(2) { width: 84%; height: 84%; border-color: rgba(233, 200, 126, 0.12); border-style: dashed; }
.xl-stage-rings i:nth-child(3) { width: 100%; height: 100%; border-color: rgba(255, 255, 255, 0.05); }
.xl-stage-glow {
  position: absolute; inset: 12%;
  background: radial-gradient(circle at 50% 46%, rgba(233, 200, 126, 0.12), rgba(96, 76, 173, 0.08) 46%, transparent 68%);
  border-radius: 50%;
}
.xl-stage-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 48%; aspect-ratio: 1 / 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015) 60%);
  border: 1px solid var(--xl-gold-line);
  box-shadow: 0 0 60px rgba(233, 200, 126, 0.1), inset 0 0 34px rgba(13, 17, 23, 0.6);
  animation: xlCoreBreath 6s 1.4s ease-in-out infinite;
}
@keyframes xlCoreBreath {
  0%, 100% { box-shadow: 0 0 46px rgba(233, 200, 126, 0.08), inset 0 0 34px rgba(13, 17, 23, 0.6); }
  50% { box-shadow: 0 0 78px rgba(233, 200, 126, 0.18), inset 0 0 34px rgba(13, 17, 23, 0.6); }
}
.xl-stage-core img { width: 80%; height: auto; }
/* zero-size point rotator: rotating it never inflates the page's scroll area */
.xl-orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: xlSpin 70s linear infinite; }
@keyframes xlSpin { to { transform: rotate(360deg); } }
.xl-spoke {
  position: absolute; left: 0; top: 0; width: 1px; height: 27cqw;
  transform-origin: 0 0; transform: rotate(calc(var(--a) + 90deg)) translateX(-0.5px);
  background: linear-gradient(to bottom, rgba(233, 200, 126, 0.02) 55%, rgba(233, 200, 126, 0.3));
}
.xl-node {
  position: absolute; left: 0; top: 0; text-decoration: none;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(-42cqw);
}
.xl-stage { container-type: inline-size; }
.xl-node-in {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 13px 19px; border-radius: 15px;
  background: rgba(17, 22, 30, 0.93);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: 0 10px 30px rgba(6, 8, 12, 0.55);
  transition: border-color 0.2s, box-shadow 0.2s;
  transform: rotate(calc(-1 * var(--a)));
  animation: xlNodeUpright 70s linear infinite;
  min-width: 132px;
}
@keyframes xlNodeUpright {
  from { transform: rotate(calc(-1 * var(--a))); }
  to { transform: rotate(calc(-360deg - var(--a))); }
}
.xl-node:hover .xl-node-in, .xl-node:focus-visible .xl-node-in { border-color: rgba(233, 200, 126, 0.5); box-shadow: 0 8px 30px rgba(201, 168, 106, 0.18); }
.xl-node-in i { font-style: normal; color: var(--xl-gold); font-size: 18px; }
.xl-node-in b { font-family: var(--xl-font-head); font-weight: 600; color: var(--xl-ink-bright); font-size: 15.5px; white-space: nowrap; }
.xl-node-in span { color: var(--xl-ink-dim); font-size: 12.5px; white-space: nowrap; }
/* pause everything decorative when the stage is off-screen */
.paused .xl-orbit, .paused .xl-node-in, .paused .xl-stage-core { animation-play-state: paused; }
.xl-body.sky-paused .xl-sky::before, .xl-body.sky-paused .xl-sky::after { animation-play-state: paused; }

/* =================== EXPERIENCE PORTALS =================== */
.xl-portals-sec { padding-top: clamp(30px, 5vh, 56px); }
.xl-portals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.xl-portal {
  position: relative; display: flex; flex-direction: column;
  min-height: 400px; border-radius: 22px; overflow: hidden;
  text-decoration: none;
  background: rgba(19, 24, 32, 0.55);
  border: 1px solid var(--xl-hairline);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.xl-portal:hover, .xl-portal:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(233, 200, 126, 0.45);
  box-shadow: 0 26px 60px rgba(6, 8, 12, 0.55), 0 0 0 1px rgba(233, 200, 126, 0.12);
}
.xl-portal::after { /* one-pass light sweep on hover */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(246, 231, 189, 0.07) 50%, transparent 58%);
  transform: translateX(-130%);
}
.xl-portal:hover::after, .xl-portal:focus-visible::after { transition: transform 0.9s ease; transform: translateX(130%); }
.xl-portal-visual { position: relative; flex: 1; min-height: 210px; overflow: hidden; }
.xl-portal.vw .xl-portal-visual {
  background:
    radial-gradient(130% 90% at 72% 0%, rgba(233, 200, 126, 0.2), transparent 55%),
    linear-gradient(to bottom, #1d2734 0%, #172230 46%, #2b2620 60%, #10151d 100%);
}
.xl-portal-horizon { position: absolute; left: 0; right: 0; top: 52%; height: 14%; background: linear-gradient(to bottom, transparent, rgba(233, 200, 126, 0.13) 50%, transparent); }
.xl-portal.vw .xl-portal-visual::before { /* next-scene sliver: guided movement cue */
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 9%;
  background: linear-gradient(to right, transparent, rgba(246, 231, 189, 0.09));
  border-left: 1px solid rgba(233, 200, 126, 0.22);
}
.xl-portal.vw .xl-portal-visual::after { /* scene-transition chevron */
  content: '❯'; position: absolute; right: 4.5%; top: 50%; transform: translate(50%, -50%);
  color: var(--xl-gold); font-size: 17px; opacity: 0.85;
  transition: transform 0.25s ease;
}
.xl-portal.vw:hover .xl-portal-visual::after { transform: translate(50%, -50%) translateX(3px); }
.xl-portal.maps .xl-portal-visual {
  background:
    repeating-radial-gradient(circle at 46% 42%, transparent 0 34px, rgba(233, 200, 126, 0.05) 34px 35px),
    radial-gradient(70% 70% at 50% 45%, rgba(255, 255, 255, 0.035), transparent 75%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 42px),
    #131922;
}
.xl-portal-dot {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(246, 231, 189, 0.75);
  box-shadow: 0 0 0 4px rgba(233, 200, 126, 0.12);
}
.xl-portal-pin {
  position: absolute; left: 46%; top: 42%;
  width: 16px; height: 16px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--xl-gold); box-shadow: 0 0 0 6px rgba(201, 168, 106, 0.15), 0 0 26px rgba(233, 200, 126, 0.5);
}
.xl-portal.maps svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.xl-portal.maps svg path { fill: none; stroke: rgba(233, 200, 126, 0.5); stroke-width: 1.6; stroke-dasharray: 4 7; }
.xl-portal.sf .xl-portal-visual { background: linear-gradient(150deg, #1b2530 0%, #121822 70%); }
.xl-portal-frame {
  position: absolute; border-radius: 12px;
  border: 1px solid rgba(233, 200, 126, 0.35);
  background: rgba(255, 255, 255, 0.025);
  transition: transform 0.35s ease;
}
.xl-portal-frame.f1 { left: 12%; top: 14%; width: 62%; height: 56%; opacity: 0.55; }
.xl-portal-frame.f2 { left: 24%; top: 26%; width: 52%; height: 50%; opacity: 0.8; }
.xl-portal-frame.f3 { left: 38%; top: 40%; width: 44%; height: 44%; border-color: rgba(233, 200, 126, 0.65); background: linear-gradient(140deg, rgba(233, 200, 126, 0.1), rgba(255, 255, 255, 0.02)); }
.xl-portal.sf:hover .xl-portal-frame.f1 { transform: translate(-4px, -4px); }
.xl-portal.sf:hover .xl-portal-frame.f3 { transform: translate(5px, 5px) scale(1.03); }
.xl-portal-copy { padding: 20px 24px 24px; }
.xl-portal-copy h2 { font-family: var(--xl-font-head); font-weight: 600; font-size: 23px; color: var(--xl-ink-bright); letter-spacing: 0.4px; }
.xl-portal-copy p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--xl-ink); max-width: 30ch; }
.xl-portal-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-family: var(--xl-font-head); font-weight: 500; font-size: 14px; letter-spacing: 0.5px;
  color: var(--xl-gold);
}
.xl-portal-cta i { font-style: normal; transition: transform 0.25s ease; }
.xl-portal:hover .xl-portal-cta i, .xl-portal:focus-visible .xl-portal-cta i { transform: translateX(5px); }

/* =================== ECOSYSTEM =================== */
.xl-eco-mantra { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.xl-eco-mantra span {
  font-family: var(--xl-font-head); font-weight: 500; font-size: 13.5px; letter-spacing: 0.6px;
  color: var(--xl-gold-hi); padding: 8px 16px; border-radius: 999px;
  background: rgba(233, 200, 126, 0.07); border: 1px solid var(--xl-gold-line);
}
.xl-eco-flow {
  display: grid; grid-template-columns: minmax(240px, 340px) minmax(70px, 120px) minmax(280px, 1fr);
  align-items: center; margin-top: 40px;
}
.xl-eco-profile {
  border-radius: 20px; padding: 28px 30px;
  background: linear-gradient(160deg, rgba(233, 200, 126, 0.09), var(--xl-glass) 45%);
  border: 1px solid rgba(233, 200, 126, 0.4);
  box-shadow: 0 18px 48px rgba(6, 8, 12, 0.4);
}
.xl-eco-profile h3 { font-family: var(--xl-font-head); font-weight: 600; color: var(--xl-gold-hi); font-size: 18px; letter-spacing: 0.5px; margin-bottom: 16px; }
.xl-eco-profile ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.xl-eco-profile li {
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; font-weight: 500; color: var(--xl-ink-bright);
  padding: 12px 16px; border-radius: 11px;
  background: rgba(13, 17, 23, 0.6); border: 1px solid rgba(255, 255, 255, 0.11);
}
.xl-eco-profile li i { font-style: normal; color: var(--xl-gold); font-size: 14px; }
.xl-eco-links { width: 100%; height: 300px; }
.xl-eco-links path { fill: none; stroke: rgba(233, 200, 126, 0.45); stroke-width: 2; }
.js .xl-eco-links path { stroke-dasharray: 260; stroke-dashoffset: 260; }
.js .xl-eco.play .xl-eco-links path { stroke-dashoffset: 0; transition: stroke-dashoffset 1s ease 0.55s; }
.xl-eco-products { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.xl-eco-products li {
  display: flex; gap: 15px; align-items: center;
  padding: 17px 20px; border-radius: 15px;
  background: var(--xl-glass-2); border: 1px solid rgba(255, 255, 255, 0.11);
  transition: border-color 0.2s, transform 0.2s;
}
.xl-eco-products li:hover { border-color: rgba(233, 200, 126, 0.4); transform: translateX(4px); }
.xl-eco-products i {
  font-style: normal; color: var(--xl-gold); font-size: 18px;
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(233, 200, 126, 0.09); border: 1px solid var(--xl-gold-line);
}
.xl-eco-products b { display: block; font-family: var(--xl-font-head); font-weight: 600; color: var(--xl-ink-bright); font-size: 16px; }
.xl-eco-products span { color: var(--xl-ink-dim); font-size: 14px; }

/* Choreographed section reveal: landing.js adds .play on #ecosystem when the
   section scrolls into focus and removes it once the section fully leaves the
   viewport, so the sequence replays on every visit. Keyframes (not transitions)
   so hover transforms stay live and re-entry restarts cleanly. Hidden states
   are .js-gated — without JS everything stays visible. */
.js .xl-eco [data-reveal] { transform: none; transition: none; }
.js .xl-eco .xl-sec-head[data-reveal],
.js .xl-eco .xl-eco-mantra span,
.js .xl-eco .xl-eco-profile[data-reveal],
.js .xl-eco .xl-eco-profile li,
.js .xl-eco .xl-eco-products li[data-reveal] { opacity: 0; }
.js .xl-eco.play .xl-sec-head[data-reveal] { opacity: 1; animation: xlEcoRise 0.6s cubic-bezier(0.16, 0.84, 0.28, 1) both; }
.js .xl-eco.play .xl-eco-mantra span { opacity: 1; animation: xlEcoRise 0.5s cubic-bezier(0.16, 0.84, 0.28, 1) both; }
.js .xl-eco.play .xl-eco-mantra span:nth-child(1) { animation-delay: 0.3s; }
.js .xl-eco.play .xl-eco-mantra span:nth-child(2) { animation-delay: 0.42s; }
.js .xl-eco.play .xl-eco-mantra span:nth-child(3) { animation-delay: 0.54s; }
.js .xl-eco.play .xl-eco-profile[data-reveal] { opacity: 1; animation: xlEcoLeft 0.6s cubic-bezier(0.16, 0.84, 0.28, 1) 0.12s both; }
.js .xl-eco.play .xl-eco-profile li { opacity: 1; animation: xlEcoLeft 0.45s ease both; }
.js .xl-eco.play .xl-eco-profile li:nth-child(1) { animation-delay: 0.3s; }
.js .xl-eco.play .xl-eco-profile li:nth-child(2) { animation-delay: 0.38s; }
.js .xl-eco.play .xl-eco-profile li:nth-child(3) { animation-delay: 0.46s; }
.js .xl-eco.play .xl-eco-profile li:nth-child(4) { animation-delay: 0.54s; }
.js .xl-eco.play .xl-eco-products li[data-reveal] { opacity: 1; animation: xlEcoRight 0.6s cubic-bezier(0.16, 0.84, 0.28, 1) both; }
.js .xl-eco.play .xl-eco-products li:nth-child(1) { animation-delay: 0.65s; }
.js .xl-eco.play .xl-eco-products li:nth-child(2) { animation-delay: 0.82s; }
.js .xl-eco.play .xl-eco-products li:nth-child(3) { animation-delay: 0.99s; }
/* the [data-reveal] neutralizer above out-specifies the card hover nudge — restore it */
.js .xl-eco .xl-eco-products li[data-reveal] { transition: border-color 0.2s, transform 0.2s; }
.js .xl-eco .xl-eco-products li[data-reveal]:hover { transform: translateX(4px); }
@keyframes xlEcoRise { from { opacity: 0; transform: translateY(24px); } }
@keyframes xlEcoLeft { from { opacity: 0; transform: translateX(-30px); } }
@keyframes xlEcoRight { from { opacity: 0; transform: translateX(30px); } }

/* =================== SPLIT SECTIONS =================== */
.xl-split { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.xl-split.rev { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
.xl-split.rev .xl-split-copy { order: 2; }
.xl-split-copy .xl-btn.gold { margin-top: 26px; }

/* --- VisionWalk layered stage --- */
.xl-vw-stage { position: relative; min-height: 430px; }
.xl-vw-scene {
  position: absolute; left: 0; top: 6%; width: 76%; aspect-ratio: 16 / 10.5;
  border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background:
    /* architectural silhouettes on the horizon */
    linear-gradient(to top, rgba(13, 17, 23, 0.85) 0 6%, transparent 6%) no-repeat 0 100% / 100% 100%,
    linear-gradient(#151d28, #151d28) no-repeat 8% 100% / 10% 52%,
    linear-gradient(#18212d, #18212d) no-repeat 22% 100% / 8% 44%,
    linear-gradient(#141c27, #141c27) no-repeat 84% 100% / 12% 48%,
    radial-gradient(120% 80% at 70% 0%, rgba(233, 200, 126, 0.22), transparent 55%),
    linear-gradient(to bottom, #243141 0%, #1c2836 44%, #383225 58%, #131a24 100%);
  box-shadow: 0 24px 60px rgba(6, 8, 12, 0.55);
}
.xl-vw-scene::after { /* horizon haze */
  content: ''; position: absolute; left: 0; right: 0; top: 48%; height: 16%;
  background: linear-gradient(to bottom, transparent, rgba(233, 200, 126, 0.14) 50%, transparent);
}
.xl-vw-chip {
  position: absolute; left: 14px; top: 12px; z-index: 2;
  font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--xl-gold-hi); padding: 5px 11px; border-radius: 999px;
  background: rgba(13, 17, 23, 0.65); border: 1px solid var(--xl-gold-line);
}
.xl-hs { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--xl-gold-hi); box-shadow: 0 0 0 3px rgba(13, 17, 23, 0.45); }
.xl-hs::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid rgba(233, 200, 126, 0.65);
  animation: xlPing 2.6s ease-out infinite;
}
.xl-hs:nth-of-type(3)::after { animation-delay: 0.9s; }
.xl-hs:nth-of-type(4)::after { animation-delay: 1.7s; }
@keyframes xlPing { 0% { transform: scale(0.55); opacity: 1; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.xl-vw-strip { position: absolute; left: 14px; bottom: 12px; display: flex; gap: 7px; }
.xl-vw-strip i {
  width: 42px; height: 28px; border-radius: 7px;
  border: 1px solid var(--xl-hairline);
  background: linear-gradient(135deg, rgba(233, 200, 126, 0.22), rgba(255, 255, 255, 0.05) 60%);
}
.xl-vw-strip i:nth-child(2) { background: linear-gradient(135deg, rgba(96, 76, 173, 0.3), rgba(255, 255, 255, 0.05) 60%); }
.xl-vw-strip i:nth-child(3) { background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 60%); }
.xl-vw-strip i:nth-child(4) { background: linear-gradient(135deg, rgba(233, 200, 126, 0.12), rgba(96, 76, 173, 0.16) 60%); }
.xl-vw-card {
  position: absolute; right: 0; top: 0; width: 44%; min-width: 210px;
  border-radius: 16px; padding: 16px 18px;
  background: rgba(19, 24, 32, 0.88); border: 1px solid var(--xl-gold-line);
  box-shadow: 0 18px 48px rgba(6, 8, 12, 0.55);
}
.xl-vw-card b { font-family: var(--xl-font-head); font-weight: 600; color: var(--xl-ink-bright); font-size: 14px; letter-spacing: 0.3px; }
.xl-vw-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.xl-vw-row span { width: 9px; height: 9px; border-radius: 50%; background: var(--xl-ink-faint); flex: none; }
.xl-vw-row span.on { background: var(--xl-gold); box-shadow: 0 0 8px rgba(201, 168, 106, 0.6); }
.xl-vw-row i { height: 8px; border-radius: 4px; width: var(--w, 50%); background: linear-gradient(90deg, rgba(233, 200, 126, 0.4), rgba(255, 255, 255, 0.08)); }
.xl-vw-plan { /* subtle floor-plan preview */
  position: absolute; right: 4%; bottom: 26%;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(19, 24, 32, 0.9); border: 1px solid var(--xl-hairline);
  box-shadow: 0 12px 30px rgba(6, 8, 12, 0.5);
}
.xl-vw-plan i {
  width: 34px; height: 26px; border-radius: 5px;
  border: 1px solid rgba(233, 200, 126, 0.4);
  background:
    linear-gradient(rgba(233, 200, 126, 0.35), rgba(233, 200, 126, 0.35)) no-repeat 55% 0 / 1px 100%,
    linear-gradient(rgba(233, 200, 126, 0.35), rgba(233, 200, 126, 0.35)) no-repeat 0 58% / 100% 1px,
    rgba(255, 255, 255, 0.04);
}
.xl-vw-plan b { font-family: var(--xl-font-head); font-weight: 500; font-size: 12.5px; color: var(--xl-ink); letter-spacing: 0.4px; }
.xl-vw-lead {
  position: absolute; right: 6%; bottom: 8%;
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: var(--xl-ink-bright);
  padding: 10px 16px; border-radius: 999px;
  background: rgba(19, 24, 32, 0.88); border: 1px solid var(--xl-hairline);
  box-shadow: 0 12px 30px rgba(6, 8, 12, 0.5);
}
.xl-vw-lead span { width: 8px; height: 8px; border-radius: 50%; background: var(--xl-gold); animation: xlBlink 2.2s ease-in-out infinite; }
@keyframes xlBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* =================== IMMERSIVE MAPS =================== */
.xl-maps-stage {
  position: relative; margin-top: 44px; min-height: 440px;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 64px, rgba(233, 200, 126, 0.045) 64px 65px),
    radial-gradient(65% 70% at 50% 50%, rgba(255, 255, 255, 0.028), transparent 75%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 56px);
  border-radius: 24px;
  -webkit-mask-image: radial-gradient(78% 90% at 50% 50%, #000 55%, transparent 98%);
  mask-image: radial-gradient(78% 90% at 50% 50%, #000 55%, transparent 98%);
}
.xl-maps-routes { position: absolute; inset: 0; width: 100%; height: 100%; }
.xl-maps-routes path {
  fill: none; stroke: rgba(233, 200, 126, 0.62); stroke-width: 2;
  stroke-dasharray: 4 7 260 0; stroke-dashoffset: 271;
  transition: stroke-dashoffset 1.3s ease-in-out;
}
.xl-maps-stage.draw .xl-maps-routes path { stroke-dashoffset: 0; stroke-dasharray: 4 7; }
.xl-maps-pin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.xl-pin-dot {
  position: relative;
  width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: linear-gradient(135deg, var(--xl-gold-hi), var(--xl-gold) 65%);
  box-shadow: 0 0 0 9px rgba(201, 168, 106, 0.16), 0 0 42px rgba(233, 200, 126, 0.55);
}
.xl-pin-dot::after { /* branded core */
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 10px; height: 10px; border-radius: 50%; background: #16120a;
}
.xl-maps-pin b { font-family: var(--xl-font-head); font-weight: 600; font-size: 12.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--xl-gold-hi); background: rgba(13, 17, 23, 0.7); padding: 6px 14px; border-radius: 999px; border: 1px solid var(--xl-gold-line); }
.xl-pin-sub { font-size: 12px; color: var(--xl-ink-dim); background: rgba(13, 17, 23, 0.6); padding: 4px 12px; border-radius: 999px; }
.xl-map-panel {
  position: absolute; width: min(280px, 30%);
  padding: 18px 20px; border-radius: 16px;
  background: rgba(19, 24, 32, 0.85); border: 1px solid var(--xl-hairline);
  box-shadow: 0 16px 44px rgba(6, 8, 12, 0.5);
  transition: border-color 0.2s;
}
.xl-map-panel:hover { border-color: rgba(233, 200, 126, 0.4); }
.xl-map-panel.tl { left: 2%; top: 4%; }
.xl-map-panel.tr { right: 2%; top: 4%; }
.xl-map-panel.bc { left: 50%; bottom: 2%; transform: translateX(-50%); }
.js .xl-map-panel.bc[data-reveal] { transform: translateX(-50%) translateY(26px); }
.js .xl-map-panel.bc[data-reveal].in { transform: translateX(-50%); }
.xl-map-ico { font-style: normal; color: var(--xl-gold); font-size: 20px; display: block; margin-bottom: 8px; }
.xl-map-panel h3 { font-family: var(--xl-font-head); font-weight: 600; color: var(--xl-ink-bright); font-size: 17px; letter-spacing: 0.3px; }
.xl-map-q { color: var(--xl-ink-dim); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; margin-top: 6px; font-weight: 600; }
.xl-maps .xl-btn.gold { margin-top: 34px; }

/* =================== SPACEFLOW JOURNEY =================== */
.xl-flow { position: relative; display: flex; flex-direction: column; gap: 0; padding-left: 34px; }
.xl-flow-rail {
  position: absolute; left: 12px; top: 22px; bottom: 22px; width: 2px;
  background: linear-gradient(to bottom, rgba(233, 200, 126, 0.12), rgba(233, 200, 126, 0.42) 30%, rgba(233, 200, 126, 0.12));
}
.xl-step {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; border-radius: 14px; margin-top: 10px;
  background: var(--xl-glass); border: 1px solid var(--xl-hairline);
  margin-left: calc(var(--i) * 32px);
  transition: border-color 0.45s, background 0.45s, box-shadow 0.45s, transform 0.45s;
}
.xl-step::before { /* connector to the rail */
  content: ''; position: absolute; left: calc(-22px - var(--i) * 32px); top: 50%; height: 1px;
  width: calc(22px + var(--i) * 32px);
  background: linear-gradient(to right, rgba(233, 200, 126, 0.42), rgba(233, 200, 126, 0.1));
}
.xl-step::after { /* one-pass light sweep as the step activates */
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 40%, rgba(246, 231, 189, 0.12) 50%, transparent 60%) no-repeat;
  background-size: 260% 100%; background-position: 150% 0;
}
.xl-step.active::after { transition: background-position 0.8s ease 0.1s; background-position: -150% 0; }
.xl-step i { font-style: normal; font-size: 18px; color: var(--xl-ink-dim); width: 28px; text-align: center; transition: color 0.45s; }
.xl-step b { font-family: var(--xl-font-head); font-weight: 600; color: var(--xl-ink-bright); font-size: 16px; white-space: nowrap; }
.xl-step > span { color: var(--xl-ink-dim); font-size: 13px; margin-left: auto; white-space: nowrap; }
.xl-step.active {
  border-color: rgba(233, 200, 126, 0.5);
  background: linear-gradient(120deg, rgba(233, 200, 126, 0.09), var(--xl-glass) 55%);
  box-shadow: 0 10px 30px rgba(6, 8, 12, 0.4);
  transform: translateX(6px);
}
.xl-step.active i { color: var(--xl-gold); }
.xl-step.gold.active {
  border-color: rgba(233, 200, 126, 0.8);
  background: linear-gradient(120deg, rgba(233, 200, 126, 0.16), var(--xl-glass) 60%);
  box-shadow: 0 12px 40px rgba(201, 168, 106, 0.28);
  transform: translateX(8px) scale(1.02);
}
.xl-step.gold.active b { color: var(--xl-gold-hi); }

/* =================== DEMO THEATRE =================== */
.xl-theatre { margin-top: 36px; }
.xl-theatre-tabs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.xl-tab {
  font-family: var(--xl-font-head); font-weight: 500; font-size: 15px; letter-spacing: 0.5px;
  color: var(--xl-ink); background: var(--xl-glass-2);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px;
  padding: 12px 26px; cursor: pointer; min-height: 46px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.xl-tab:hover { color: var(--xl-gold-hi); border-color: rgba(233, 200, 126, 0.4); }
.xl-tab[aria-selected="true"] { color: var(--xl-gold-hi); border-color: rgba(233, 200, 126, 0.6); background: rgba(233, 200, 126, 0.08); }
.xl-tab.preview { color: var(--xl-ink-dim); }
.xl-screen {
  position: relative; overflow: hidden;
  min-height: 430px; margin-top: 20px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(90% 90% at 50% 8%, rgba(233, 200, 126, 0.09), transparent 55%),
    rgba(19, 24, 32, 0.55);
  border: 1px solid var(--xl-gold-line);
  box-shadow: 0 30px 70px rgba(6, 8, 12, 0.45);
}
.xl-screen::before { /* soft central spotlight */
  content: ''; position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: 68%; height: 78%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(246, 231, 189, 0.1), rgba(233, 200, 126, 0.04) 55%, transparent 75%);
}
.xl-demo-floor { /* receding spatial grid floor */
  position: absolute; left: -18%; right: -18%; bottom: -12%; height: 58%;
  background:
    repeating-linear-gradient(0deg, rgba(233, 200, 126, 0.09) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(233, 200, 126, 0.09) 0 1px, transparent 1px 44px);
  transform: perspective(420px) rotateX(58deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 20%, transparent 90%);
  mask-image: linear-gradient(to top, #000 20%, transparent 90%);
  pointer-events: none;
}
.xl-screen-sil { /* layered blurred product silhouettes */
  position: absolute; border-radius: 14px; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(233, 200, 126, 0.03) 70%);
  filter: blur(1.5px);
}
.xl-screen-sil.s1 { left: 6%; top: 12%; width: 24%; height: 56%; transform: rotate(-4deg); }
.xl-screen-sil.s2 { right: 6%; top: 16%; width: 24%; height: 52%; transform: rotate(4deg); }
.xl-screen-sil.s3 { right: 22%; bottom: 8%; width: 18%; height: 30%; transform: rotate(-2deg); opacity: 0.7; }
.xl-screen-body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 56px 24px; text-align: center;
}
.xl-screen-body img { opacity: 0.97; }
.xl-screen-body b { font-family: var(--xl-font-head); font-weight: 600; color: var(--xl-ink-bright); font-size: 22px; margin-top: 8px; }
.xl-screen-body > span { color: var(--xl-ink-dim); font-size: 15.5px; max-width: 52ch; line-height: 1.6; }
.xl-screen-body .xl-svc { font-family: var(--xl-font-head); font-size: 11.5px; letter-spacing: 2px; color: var(--xl-gold-mute); text-transform: uppercase; }
.xl-screen-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }

/* =================== ABOUT / BRAND STORY =================== */
.xl-brandstory {
  display: grid; grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 0.75fr);
  gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: 44px;
}
.xl-brand-primary {
  padding: 30px 32px; border-radius: 20px;
  background: linear-gradient(150deg, rgba(233, 200, 126, 0.06), var(--xl-glass) 50%);
  border: 1px solid var(--xl-gold-line);
}
.xl-brand-primary img { height: 68px; width: auto; }
.xl-brand-primary p { margin-top: 18px; line-height: 1.65; font-size: 17px; color: var(--xl-ink); max-width: 42ch; }
.xl-brand-connector { width: 1px; height: 120px; background: linear-gradient(to bottom, transparent, var(--xl-gold-line), transparent); position: relative; }
.xl-brand-connector::after {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg);
  width: 7px; height: 7px; background: var(--xl-gold); box-shadow: 0 0 12px rgba(233, 200, 126, 0.6);
}
.xl-brand-parent {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 24px 26px; border-radius: 18px;
  background: var(--xl-glass); border: 1px solid var(--xl-hairline);
}
.xl-brand-parent img { height: 74px; width: auto; opacity: 0.94; }
.xl-brand-parent b { font-family: var(--xl-font-head); font-weight: 600; color: var(--xl-ink-bright); font-size: 15px; margin-top: 8px; }
.xl-brand-parent span { color: var(--xl-ink-dim); font-size: 13.5px; line-height: 1.55; }

/* =================== FOOTER =================== */
.xl-corp {
  position: relative; z-index: 1;
  padding: 58px clamp(16px, 5vw, 48px) calc(26px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(233, 200, 126, 0.16);
  background: rgba(10, 13, 18, 0.55);
}
.xl-foot-grid {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px;
}
.xl-foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.xl-foot-brand img { height: 46px; width: auto; opacity: 0.92; }
.xl-foot-brand span { font-family: var(--xl-font-head); font-weight: 500; font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--xl-gold-mute); }
.xl-foot-brand p { font-size: 14.5px; color: var(--xl-ink-dim); max-width: 30ch; line-height: 1.6; }
.xl-foot-col { display: flex; flex-direction: column; gap: 12px; }
.xl-foot-col b { font-family: var(--xl-font-head); font-weight: 600; color: var(--xl-ink-bright); font-size: 13.5px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; }
.xl-foot-col a { color: var(--xl-ink-dim); text-decoration: none; font-size: 15px; line-height: 1.5; width: fit-content; }
.xl-foot-col a:hover { color: var(--xl-gold-hi); }
.xl-foot-line {
  max-width: 1180px; margin: 40px auto 0;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-top: 22px; border-top: 1px solid var(--xl-hairline);
}
.xl-foot-line img { height: 24px; width: auto; opacity: 0.8; }
.xl-foot-line span { font-size: 13px; color: var(--xl-ink-dim); }
.xl-foot-line a { margin-left: auto; color: var(--xl-gold-mute); text-decoration: none; font-size: 13px; }
.xl-foot-line a:hover { color: var(--xl-gold-hi); }

/* =================== RESPONSIVE =================== */
@media (max-width: 1060px) {
  .xl-hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .xl-stage { max-width: min(420px, 78vw); margin: 26px auto 0; }
  .xl-vw-stage { min-height: 400px; }
}
@media (max-width: 1000px) {
  .xl-portals { grid-template-columns: 1fr; }
  .xl-portal { min-height: 0; flex-direction: row; }
  .xl-portal-visual { min-height: 170px; flex: 0 0 42%; }
  .xl-portal-copy { flex: 1; align-self: center; }
}
@media (max-width: 560px) {
  .xl-portal { flex-direction: column; }
  .xl-portal-visual { flex: none; width: 100%; min-height: 150px; }
}
@media (max-width: 900px) {
  .xl-split, .xl-split.rev { grid-template-columns: 1fr; }
  .xl-split.rev .xl-split-copy { order: 0; }
  .xl-vw-stage { min-height: 0; height: auto; display: flex; flex-direction: column; gap: 14px; }
  .xl-vw-scene, .xl-vw-card, .xl-vw-lead, .xl-vw-plan { position: static; width: 100%; transform: none; }
  .xl-vw-lead, .xl-vw-plan { align-self: flex-end; width: auto; }
  .xl-eco-flow { grid-template-columns: 1fr; gap: 0; }
  .xl-eco-links { display: none; }
  .xl-eco-profile { max-width: 460px; }
  .xl-eco-products { margin-top: 26px; padding-left: 18px; border-left: 1px solid var(--xl-gold-line); }
  .xl-maps-stage { min-height: 0; background: none; -webkit-mask-image: none; mask-image: none; margin-top: 30px; }
  .xl-maps-routes { display: none; }
  .xl-maps-pin { position: static; transform: none; margin-bottom: 18px; }
  .xl-map-panel, .xl-map-panel.tl, .xl-map-panel.tr, .xl-map-panel.bc { position: static; width: 100%; max-width: 520px; margin: 12px auto 0; transform: none; }
  .js .xl-map-panel.bc[data-reveal] { transform: translateY(26px); }
  .js .xl-map-panel.bc[data-reveal].in { transform: none; }
  .xl-brandstory { grid-template-columns: 1fr; }
  .xl-brand-connector { width: 120px; height: 1px; background: linear-gradient(to right, transparent, var(--xl-gold-line), transparent); margin: 0 auto; }
}
@media (max-width: 880px) {
  .xl-nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: rgba(10, 13, 18, 0.96);
    border-bottom: 1px solid rgba(233, 200, 126, 0.14); padding: 8px 0;
  }
  .xl-nav-links.open { display: flex; }
  .xl-nav-links a { padding: 13px 24px; min-height: 44px; }
  .xl-nav-burger { display: block; }
}
@media (max-width: 760px) {
  .xl-nav-ws { display: none; }
  .xl-nav-brand span { display: none; }
  .xl-headline { max-width: none; }
  .xl-cta .xl-btn { flex: 1 1 auto; min-height: 44px; }
  .xl-step { margin-left: calc(var(--i) * 10px); }
  .xl-step::before { left: calc(-22px - var(--i) * 10px); width: calc(22px + var(--i) * 10px); }
  .xl-step > span { display: none; }
  .xl-foot-grid { grid-template-columns: 1fr; gap: 22px; }
  .xl-foot-line a { margin-left: 0; }
}
@media (max-width: 480px) {
  .xl-stage { max-width: 86vw; }
  .xl-node-in { min-width: 100px; padding: 10px 13px; }
  .xl-node-in b { font-size: 13.5px; }
  .xl-node-in span { display: none; }
  .xl-node { transform: translate(-50%, -50%) rotate(var(--a)) translateY(-40cqw); }
}

/* ---- reduced motion: all decorative animation off, everything visible ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .xl-body, .xl-sky::before, .xl-sky::after, .xl-hero-copy > *, .xl-word b,
  .xl-cta .xl-btn.gold, .xl-btn.gold::after, .xl-stage, .xl-stage-core,
  .xl-orbit, .xl-node-in, .xl-hs::after, .xl-vw-lead span {
    animation: none !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js .xl-map-panel.bc[data-reveal] { transform: translateX(-50%); }
  .js .xl-eco .xl-sec-head[data-reveal],
  .js .xl-eco .xl-eco-mantra span,
  .js .xl-eco .xl-eco-profile[data-reveal],
  .js .xl-eco .xl-eco-profile li,
  .js .xl-eco .xl-eco-products li[data-reveal] { opacity: 1; animation: none !important; }
  .xl-eco-links path, .js .xl-eco-links path, .xl-maps-routes path { transition: none; stroke-dashoffset: 0; }
  .xl-maps-routes path { stroke-dasharray: 4 7; }
  .xl-step, .xl-nav { transition: none; }
  .xl-step::after, .xl-portal::after { transition: none; content: none; }
  .xl-portal, .xl-portal-frame, .xl-portal-cta i { transition: none; }
  .xl-portal:hover, .xl-portal:focus-visible { transform: none; }
  @media (max-width: 900px) {
    .js .xl-map-panel.bc[data-reveal] { transform: none; }
  }
}

/* ================= UX-C: blueprint-to-experience layer =================
   Architectural intelligence cues on the approved hero — coordinates, survey
   ticks and a faint plan grid behind the orbital stage. CSS-only: structure,
   copy and measured behaviour of the approved landing are unchanged. */
.xl-stage::before { /* survey coordinates */
  content: '13.0358° N · 77.5970° E';
  position: absolute; top: -6px; right: 4%;
  font-family: var(--xl-font-head); font-size: 10px; letter-spacing: 2.4px;
  color: var(--xl-ink-faint);
}
.xl-stage::after { /* blueprint corner ticks */
  content: ''; position: absolute; inset: -2%;
  background:
    linear-gradient(var(--xl-gold-line), var(--xl-gold-line)) no-repeat 0 0 / 14px 1px,
    linear-gradient(var(--xl-gold-line), var(--xl-gold-line)) no-repeat 0 0 / 1px 14px,
    linear-gradient(var(--xl-gold-line), var(--xl-gold-line)) no-repeat 100% 100% / 14px 1px,
    linear-gradient(var(--xl-gold-line), var(--xl-gold-line)) no-repeat 100% 100% / 1px 14px;
  opacity: .6; pointer-events: none;
}
.xl-stage-glow {
  background:
    repeating-linear-gradient(0deg, rgba(233, 200, 126, .04) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(233, 200, 126, .04) 0 1px, transparent 1px 34px),
    radial-gradient(circle at 50% 46%, rgba(233, 200, 126, 0.12), rgba(96, 76, 173, 0.08) 46%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 72%);
  border-radius: 0;
}

/* ================= UX-C: portal micro-interactions (§6) ================= */
/* VisionWalk: horizon expands, hotspots activate, scene depth shifts */
.xl-portal .xl-portal-visual { transition: transform 0.4s ease; }
.xl-portal.vw .xl-portal-horizon { transition: transform 0.45s ease, opacity 0.45s ease; }
.xl-portal.vw:hover .xl-portal-horizon, .xl-portal.vw:focus-visible .xl-portal-horizon { transform: scaleX(1.18); opacity: 1.4; }
.xl-portal.vw .xl-hs { opacity: .55; transition: opacity 0.3s ease; }
.xl-portal.vw:hover .xl-hs, .xl-portal.vw:focus-visible .xl-hs { opacity: 1; }
.xl-portal.vw:hover .xl-portal-visual { transform: scale(1.03); }

/* Immersive Maps: pin activates, route traces outward, nodes appear */
.xl-portal.maps svg path { stroke-dasharray: 4 7; stroke-dashoffset: 0; transition: opacity .3s; opacity: .55; }
.xl-portal.maps:hover svg path, .xl-portal.maps:focus-visible svg path { opacity: 1; animation: xlRouteFlow 1.2s linear infinite; }
@keyframes xlRouteFlow { to { stroke-dashoffset: -22; } }
.xl-portal.maps .xl-portal-pin { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.xl-portal.maps:hover .xl-portal-pin, .xl-portal.maps:focus-visible .xl-portal-pin {
  transform: rotate(-45deg) scale(1.25);
  box-shadow: 0 0 0 9px rgba(201, 168, 106, 0.2), 0 0 34px rgba(233, 200, 126, 0.65);
}
.xl-portal.maps .xl-portal-dot { opacity: .35; transition: opacity 0.35s ease, transform 0.35s ease; }
.xl-portal.maps:hover .xl-portal-dot, .xl-portal.maps:focus-visible .xl-portal-dot { opacity: 1; transform: scale(1.25); }

/* SpaceFlow: layers separate, the interior frame appears */
.xl-portal.sf .xl-portal-frame { transition: transform 0.4s ease, background 0.4s ease, border-color 0.4s ease; }
.xl-portal.sf:hover .xl-portal-frame.f2, .xl-portal.sf:focus-visible .xl-portal-frame.f2 { transform: translate(1px, 1px); }
.xl-portal.sf:hover .xl-portal-frame.f3, .xl-portal.sf:focus-visible .xl-portal-frame.f3 {
  background: linear-gradient(140deg, rgba(233, 200, 126, 0.2), rgba(255, 255, 255, 0.04));
  border-color: rgba(246, 231, 189, 0.85);
}

@media (prefers-reduced-motion: reduce) {
  .xl-portal .xl-portal-visual, .xl-portal.vw .xl-portal-horizon, .xl-portal.maps .xl-portal-pin,
  .xl-portal.maps .xl-portal-dot, .xl-portal.sf .xl-portal-frame { transition: none; }
  .xl-portal.maps:hover svg path { animation: none; }
  .xl-portal.vw:hover .xl-portal-visual, .xl-portal.maps:hover .xl-portal-pin { transform: none; }
  .xl-portal.vw .xl-hs, .xl-portal.maps .xl-portal-dot, .xl-portal.maps svg path { opacity: 1; }
}