/* ════════════════════════════════════════════════════════════
   XNEXUS — About Page Design System
   ------------------------------------------------------------
   Phase 21 architectural correction:
   · Platform tokens (--grad, --purple-l, --border, --nav-h,
     etc.) have been migrated to core.css as canonical values.
   · About-specific overrides are now scoped to .about-page.
   · Global class definitions (.eyebrow, .reveal, .btn-*)
     are scoped to prevent cross-page contamination.
   ════════════════════════════════════════════════════════════ */

/* ════ About-page token scope ═════════════════════════════════════════
   Phase 21 isolation: tokens matching core.css are removed (core now
   carries the canonical values). Only About-specific extensions remain.
   ══════════════════════════════════════════════════════════════════ */
.about-page {
  /* ── About-specific surfaces ── */
  --glass:       rgba(17,22,42,0.55);
  --text-faint:  rgba(156,163,175,0.55);

  /* ── About-specific brand aliases ── */
  --violet:      #C93CFF;   /* alias for --purple-l; kept for about.css internal refs */
  --purple-x:    #C4B5FD;   /* light violet tint */
  --blue-dim:    rgba(46,214,255,0.15);
  --purple-dim:  rgba(201,60,255,0.15);
  --glow-blue:   rgba(46,214,255,0.45);
  --glow-violet: rgba(201,60,255,0.45);

  /* ── Cinematic glow system (About-only diffusion presets) ── */
  --glow-primary:   0 0 30px rgba(201,60,255,0.35);
  --glow-secondary: 0 0 50px rgba(46,214,255,0.18);
  --glow-soft:      0 0 24px rgba(201,60,255,0.22);

  /* ── About-only layout tokens ── */
  --subnav-h:    52px;       /* Sub-navigation bar; About page only */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);

  /* ── About-specific font (adds Inter fallback) ── */
  --font:        'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── Base ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* About page sets 15px base for its denser typographic rhythm */
.about-page {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}



/* ── XNEXUS typography system ──────────────────────────────────
   Headlines  : Space Grotesk 700 · -0.02em
   Labels     : 500 · 0.12em · uppercase
   Paragraphs : 400 · line-height 1.7
   Small UI   : Inter (meta, descriptions, nav support)
   ──────────────────────────────────────────────────────────── */
.about-page h1, .about-page h2, .about-page h3,
.about-page h4, .about-page h5, .about-page h6 {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.about-page p { line-height: 1.7; }
.about-page .u-label, .about-page .eyebrow {
  font-family: var(--font);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.u-ui, .meta, .ui-label { font-family: var(--font-ui); }

/* ── Brand glow / surface utilities ── */
.u-glow        { box-shadow: var(--glow-primary); }
.u-glow-blue   { box-shadow: var(--glow-secondary); }
.u-glass {
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
}

/* ── Official XNEXUS logo assets (transparent PNGs, exact brand files) ──
   .brand-logo   → full X+NEXUS lockup   (xnexus-logo-full.png)
   .brand-logo-x → standalone X icon     (xnexus-logo-x.png)
   Colors/gradients/glow are baked into the files — do not restyle.   */
.brand-logo, .brand-logo-x {
  display: block;
  width: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform .5s var(--ease), filter .5s var(--ease);
}
.brand-logo   { height: 40px; }
.brand-logo-x { height: 40px; }

/* ── Container ── */
.about-page .container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .about-page .container { padding: 0 16px; } }

/* ── Atmospheric background canvas ── */
#meshCanvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.atmosphere::before,
.atmosphere::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.4;
}
.atmosphere::before {
  top: -10%; left: -10%;
  width: 50vw; height: 50vh;
  background: radial-gradient(circle, rgba(139,92,246,0.5), transparent 70%);
  animation: float-halo-1 18s ease-in-out infinite;
}
.atmosphere::after {
  top: 30%; right: -15%;
  width: 55vw; height: 55vh;
  background: radial-gradient(circle, rgba(46,214,255,0.4), transparent 70%);
  animation: float-halo-2 22s ease-in-out infinite;
}

@keyframes float-halo-1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(40px, -30px); }
}
@keyframes float-halo-2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-50px, 40px); }
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 30%, var(--bg) 95%);
}

/* ── Top Navbar (matches main site) ── */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  transition: all .3s var(--ease);
  background: rgba(7,7,15,0.4);
  backdrop-filter: blur(0);
}
.topnav.scrolled {
  background: rgba(7,7,15,0.75);
  backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid var(--border);
}
.topnav .container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand:hover .brand-logo,
.brand:hover .brand-logo-x { transform: scale(1.03); }
.nav-logo-full { height: 34px; }
.nav-logo-x    { height: 32px; display: none; }
@media (max-width: 560px) {
  .nav-logo-full { display: none; }
  .nav-logo-x    { display: block; }
}
.brand-mark {
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-name {
  font-weight: 600;
  letter-spacing: 0.18em;
  font-size: 14px;
  color: var(--text);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.main-nav a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  padding: 8px 14px;
  border-radius: 8px;
  transition: all .25s var(--ease);
  position: relative;
}
.main-nav a:hover { color: var(--text); background: rgba(255,255,255,0.03); }
.main-nav a.active {
  color: var(--text);
  background: rgba(139,92,246,0.10);
}
.main-nav a.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  background: var(--grad);
  border-radius: 2px;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--grad);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 8px 24px -8px rgba(139,92,246,.6);
  transition: all .3s var(--ease);
}
.cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -8px rgba(139,92,246,.8);
}

.mobile-toggle {
  display: none;
  width: 36px; height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.mobile-toggle span {
  width: 16px; height: 1.5px;
  background: var(--text);
  position: relative;
}
.mobile-toggle span::before,
.mobile-toggle span::after {
  content: '';
  position: absolute;
  width: 16px; height: 1.5px;
  background: var(--text);
  left: 0;
}
.mobile-toggle span::before { top: -5px; }
.mobile-toggle span::after { top: 5px; }

@media (max-width: 960px) {
  .main-nav, .cta-btn { display: none; }
  .mobile-toggle { display: flex; }
}

/* ── Mobile drawer ── */
.mobile-drawer {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  background: rgba(7,7,15,0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  z-index: 99;
  padding: 20px 24px;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: all .3s var(--ease);
}
.mobile-drawer.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mobile-drawer a {
  display: block;
  padding: 12px 0;
  color: var(--text-dim);
  font-size: 13px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}
.mobile-drawer a:last-of-type { border: 0; }
.mobile-drawer a.active { color: var(--purple-l); }

/* ── Sub-nav (Section pagination 01-06) ── */
.subnav {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  height: var(--subnav-h);
  z-index: 90;
  background: rgba(7,7,15,0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav .container {
  display: flex;
  align-items: center;
  gap: 4px;
}
.subnav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-radius: 8px;
  flex-shrink: 0;
  transition: all .25s var(--ease);
  position: relative;
}
.subnav a .num {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  color: var(--text-faint);
  transition: color .25s var(--ease);
}
.subnav a:hover { color: var(--text-dim); }
.subnav a:hover .num { color: var(--purple-l); }
.subnav a.active {
  color: var(--text);
}
.subnav a.active .num {
  color: var(--purple-l);
}
.subnav a.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 14px; right: 14px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--purple-l), transparent);
}

/* ── Typography ── */
.about-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-l);
}
.about-page .eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--blue-l);
}

.section-num {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.about-page h1, .about-page h2, .about-page h3 { font-weight: 600; letter-spacing: -0.03em; }
.about-page h1 { font-size: clamp(2.5rem, 5.5vw, 4.5rem); line-height: 1.02; letter-spacing: -0.035em; }
.about-page h2 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; }
.about-page h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1.15; }

.about-page .grad-text {
  background: var(--grad-text);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-move 5s linear infinite;
}
/* @keyframes grad-move — canonical definition in core.css */

.lead {
  font-size: clamp(1rem, 1.05vw, 1.125rem);
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 640px;
}

/* ── Sections ── */
.section {
  position: relative;
  z-index: 10;
  padding: 100px 0;
}
@media (max-width: 768px) { .section { padding: 70px 0; } }

.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,0.4), transparent);
  margin-bottom: 80px;
}

.about-page .section-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 60px;
}
.about-page .section-head.center { align-items: center; text-align: center; }
.about-page .section-head .num-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ── Cards ── */
.card {
  position: relative;
  background: rgba(15,15,30,0.55);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
  transition: all .4s var(--ease);
}
.card-hover:hover {
  border-color: rgba(139,92,246,0.35);
  background-color: rgba(15,15,30,0.75);
  box-shadow: 0 0 0 1px rgba(139,92,246,0.15), 0 20px 40px -20px rgba(139,92,246,0.3);
}

.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid rgba(139,92,246,0.2);
  color: var(--purple-l);
  transition: all .35s var(--ease);
}
.card-hover:hover .icon-tile {
  background: rgba(139,92,246,0.18);
  border-color: rgba(139,92,246,0.4);
  box-shadow: 0 0 20px -4px rgba(139,92,246,0.5);
}

/* ── Buttons ── */
.about-page .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  background: var(--grad);
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 8px 24px -8px rgba(139,92,246,.5);
  transition: all .3s var(--ease);
}
.about-page .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -8px rgba(139,92,246,.7);
}
.about-page .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: all .3s var(--ease);
}
.about-page .btn-ghost:hover {
  border-color: rgba(139,92,246,0.5);
  background: rgba(139,92,246,0.08);
}

/* ── Pill / Badge ── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.pill-dot {
  width: 6px; height: 6px;
  background: var(--purple-l);
  border-radius: 50%;
  position: relative;
}
.pill-dot::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--purple-l);
  opacity: 0.5;
  animation: pulse-ring 1.6s ease-out infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(2); opacity: 0; }
}

/* ── Image Placeholder (the swap-ready system) ── */
.media-frame {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(139,92,246,0.18);
  background: linear-gradient(135deg, rgba(139,92,246,0.06), rgba(96,165,250,0.04));
}
.media-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(139,92,246,0.45), rgba(96,165,250,0.3), rgba(34,211,238,0.2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
}
.media-frame.aspect-video { aspect-ratio: 16/9; }
.media-frame.aspect-square { aspect-ratio: 1/1; }
.media-frame.aspect-portrait { aspect-ratio: 3/4; }
.media-frame.aspect-ultrawide { aspect-ratio: 21/9; }

.media-inner {
  position: absolute;
  inset: 0;
  background: var(--bg-card);
  overflow: hidden;
  border-radius: inherit;
}
/* Real hero image — fills frame with cinematic blend + slow zoom */
.hero-media-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: saturate(1.1) contrast(1.04);
  transition: transform 1.4s var(--ease-out), filter .6s var(--ease);
  z-index: 0;
  animation: hero-img-float 14s ease-in-out infinite;
}
.hero-media-wrap:hover .hero-media-img { transform: scale(1.05); filter: saturate(1.2) contrast(1.06); }
@keyframes hero-img-float { 0%,100%{transform:scale(1.02);} 50%{transform:scale(1.06);} }
.hero-media-tint {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%, transparent 50%, rgba(5,8,22,0.45) 100%),
    linear-gradient(180deg, rgba(5,8,22,0.20) 0%, transparent 35%, rgba(5,8,22,0.30) 100%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(201,60,255,0.08), transparent 65%);
  mix-blend-mode: normal;
}
.media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-placeholder .ph-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 50% 45%, rgba(139,92,246,0.18), transparent 65%),
    linear-gradient(to bottom right, rgba(139,92,246,0.10), var(--bg-card), rgba(46,214,255,0.10));
}
.media-placeholder .ph-grid {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(139,92,246,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,0.07) 1px, transparent 1px);
  background-size: 32px 32px;
}
.media-placeholder .ph-content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.media-placeholder .ph-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(139,92,246,0.25);
  background: rgba(139,92,246,0.05);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(201,60,255,0.75);
}
.media-placeholder .ph-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(196,181,253,0.8);
}
.media-placeholder .ph-tag {
  font-family: ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
}
.media-placeholder .ph-bracket {
  position: absolute;
  width: 14px; height: 14px;
  color: rgba(139,92,246,0.45);
}
.media-placeholder .ph-bracket.tl { top: 12px; left: 12px; }
.media-placeholder .ph-bracket.tr { top: 12px; right: 12px; transform: rotate(90deg); }
.media-placeholder .ph-bracket.bl { bottom: 12px; left: 12px; transform: rotate(-90deg); }
.media-placeholder .ph-bracket.br { bottom: 12px; right: 12px; transform: rotate(180deg); }
.media-placeholder .ph-scan {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,0.7), transparent);
  animation: scan-line 4s ease-in-out infinite;
}
@keyframes scan-line {
  0%, 100% { transform: translateY(0); opacity: 0; }
  50% { transform: translateY(100%); opacity: 1; }
}

.media-caption {
  position: absolute;
  left: 12px; right: 12px;
  bottom: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(7,7,15,0.65);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.media-caption .tag-end {
  font-family: ui-monospace, monospace;
  color: var(--text-faint);
}

/* ── Reveal animation ── */
.about-page .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.about-page .reveal.in { opacity: 1; transform: translateY(0); }
.about-page .reveal[data-delay="1"] { transition-delay: .08s; }
.about-page .reveal[data-delay="2"] { transition-delay: .16s; }
.about-page .reveal[data-delay="3"] { transition-delay: .24s; }
.about-page .reveal[data-delay="4"] { transition-delay: .32s; }
.about-page .reveal[data-delay="5"] { transition-delay: .40s; }
.about-page .reveal[data-delay="6"] { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.2s !important;
  }
  .about-page .reveal { opacity: 1; transform: none; }
}

/* ════════════════════════════════════════════════════════════
   HERO SECTION
   ════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  z-index: 10;
  padding-top: calc(var(--nav-h) + var(--subnav-h) + 60px);
  padding-bottom: 80px;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .hero { padding-top: calc(var(--nav-h) + var(--subnav-h) + 40px); }
}
.hero-copy { display: flex; flex-direction: column; gap: 28px; }
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.hero-stats > div { display: flex; align-items: baseline; gap: 8px; }
.hero-stats .v { font-size: 20px; font-weight: 600; color: var(--text); }
.hero-stats .l { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-media-wrap { position: relative; }
.hero-floating-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(15,15,30,0.85);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 30px -10px rgba(139,92,246,0.4);
}
.hero-floating-card .fc-logo-x {
  height: 30px;
  flex-shrink: 0;
}
.hero-floating-card .small-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}
.hero-floating-card .big-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}
.hero-fc-1 { bottom: -16px; left: -16px; }
.hero-fc-2 {
  top: 30px; right: -16px;
  padding: 6px 14px;
  border-radius: 999px;
}
.hero-fc-2 .small-label { color: var(--text-dim); font-size: 10px; }
.hero-fc-2 .dot {
  width: 6px; height: 6px;
  background: #34D399;
  border-radius: 50%;
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.scroll-indicator {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.scroll-indicator svg { animation: bob 2s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
@media (max-width: 768px) { .hero-floating-card { display: none; } }

/* ════════════════════════════════════════════════════════════
   01 — COMPANY  ·  Cinematic Alliance Composition
   ════════════════════════════════════════════════════════════ */
#company { position: relative; isolation: isolate; overflow: hidden; }

/* Ambient background: dotted world map + glow field */
.company-atmos {
  position: absolute; inset: -40px 0;
  z-index: 0; pointer-events: none; overflow: hidden;
}
.company-atmos .ca-map {
  position: absolute; inset: 0;
  background: url('images/company-background.webp') center top / cover no-repeat;
  opacity: 0.22;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 35%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 35%, #000 30%, transparent 80%);
}
.company-atmos .ca-glow {
  position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform;
}
.company-atmos .ca-glow.violet {
  width: 720px; height: 720px; left: 50%; top: 28%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(201,60,255,0.30), transparent 65%);
  animation: ca-pulse 9s ease-in-out infinite;
}
.company-atmos .ca-glow.blue {
  width: 600px; height: 600px; right: -160px; top: 8%;
  background: radial-gradient(circle, rgba(46,214,255,0.18), transparent 65%);
  animation: ca-pulse 11s ease-in-out infinite 1s;
}
@keyframes ca-pulse { 0%,100%{opacity:.7;} 50%{opacity:1;} }

#company .container { position: relative; z-index: 1; }

/* ── Header (left) ── */
.company-head { max-width: 760px; margin: 0 auto 8px; text-align: center; }
.company-head .eyebrow { color: var(--blue); margin-bottom: 16px; }
.company-head h2 { font-size: clamp(30px, 4vw, 50px); line-height: 1.05; margin-bottom: 18px; }
.company-head .lead { font-size: 15px; line-height: 1.75; color: var(--text-dim); max-width: 600px; margin: 0 auto; }

/* ════ Triangle alliance system ════ */
.alliance {
  position: relative;
  max-width: 1180px;
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 28px 34px;
  align-items: stretch;
}
/* glowing triangle SVG sits behind, spanning the whole grid */
.alliance-lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  overflow: visible;
}

/* central core badge — absolutely centered over the grid */
.alliance-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: clamp(190px, 22vw, 250px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  background: radial-gradient(circle at 50% 40%, rgba(20,16,40,0.92), rgba(8,8,22,0.96));
  border: 1px solid rgba(201,60,255,0.45);
  box-shadow:
    0 0 0 6px rgba(201,60,255,0.04),
    0 0 50px -6px rgba(201,60,255,0.55),
    0 0 110px -20px rgba(46,214,255,0.40),
    inset 0 0 40px -10px rgba(201,60,255,0.30);
  backdrop-filter: blur(14px);
  animation: core-breathe 5s ease-in-out infinite;
}
@keyframes core-breathe {
  0%,100% { box-shadow: 0 0 0 6px rgba(201,60,255,0.04), 0 0 50px -6px rgba(201,60,255,0.50), 0 0 110px -20px rgba(46,214,255,0.35), inset 0 0 40px -10px rgba(201,60,255,0.28); }
  50%     { box-shadow: 0 0 0 8px rgba(201,60,255,0.07), 0 0 70px -4px rgba(201,60,255,0.70), 0 0 140px -16px rgba(46,214,255,0.50), inset 0 0 50px -8px rgba(201,60,255,0.40); }
}
.alliance-core .core-x { height: clamp(38px, 4.4vw, 52px); width: auto; margin-bottom: 8px; }
.alliance-core .core-name {
  font-family: var(--font); font-weight: 700;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: 0.16em; color: #fff; line-height: 1;
  text-shadow: 0 0 18px rgba(201,60,255,0.45);
  margin-bottom: 8px;
}
.alliance-core .core-tag {
  font-family: var(--font-ui); font-size: clamp(8px, 0.85vw, 9.5px);
  letter-spacing: 0.14em; line-height: 1.7; text-transform: uppercase;
  color: var(--text-dim);
}
.alliance-core .core-tag .em {
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
  color: transparent; font-weight: 700;
}
@media (max-width: 880px) { .alliance-core { position: static; transform: none; margin: 4px auto 8px; } }

/* ── Strength cards (image blended into content) ── */
.strength-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-card);
  min-height: 300px;
  isolation: isolate;
  display: flex; flex-direction: column;
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.strength-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201,60,255,0.40);
  box-shadow: 0 0 40px -10px rgba(201,60,255,0.40);
}
/* image fills the card, content sits over a gradient that fades the photo */
.strength-card .sc-photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: saturate(1.08) contrast(1.04) brightness(0.92);
  transition: transform 1.1s var(--ease-out), filter .6s var(--ease);
}
.strength-card:hover .sc-photo { transform: scale(1.06); filter: saturate(1.18) contrast(1.06) brightness(1); }
.strength-card .sc-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,8,22,0.30) 0%, rgba(5,8,22,0.78) 55%, rgba(5,8,22,0.95) 100%),
    linear-gradient(100deg, rgba(11,16,32,0.92) 0%, rgba(11,16,32,0.55) 42%, transparent 78%);
}
.strength-card .sc-tone { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; }
.strength-card.cv-tech  .sc-tone { background: radial-gradient(ellipse 70% 60% at 80% 25%, rgba(46,214,255,0.18), transparent 70%); }
.strength-card.cv-ind   .sc-tone { background: radial-gradient(ellipse 70% 60% at 80% 25%, rgba(201,60,255,0.18), transparent 70%); }
.strength-card.cv-trade .sc-tone { background: radial-gradient(ellipse 70% 60% at 80% 25%, rgba(46,214,255,0.18), transparent 70%); }
.strength-card .sc-body {
  position: relative; z-index: 2;
  margin-top: auto;
  padding: 22px 22px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.strength-card .sc-top { display: flex; align-items: center; gap: 10px; }
.strength-card .sc-num {
  font-family: ui-monospace, monospace; font-size: 13px; font-weight: 700;
  width: 30px; height: 30px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(201,60,255,0.28), rgba(46,214,255,0.12));
  border: 1px solid rgba(201,60,255,0.42); color: #fff;
}
.strength-card .sc-kicker {
  font-family: var(--font); font-size: 10px; font-weight: 600;
  letter-spacing: 0.20em; text-transform: uppercase; color: var(--blue);
}
.strength-card.cv-ind .sc-kicker { color: var(--purple-l); }
.strength-card .sc-title {
  font-family: var(--font); font-size: 15px; font-weight: 700;
  line-height: 1.25; color: #fff; letter-spacing: -0.01em;
}
.strength-card .sc-list { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.strength-card .sc-list li {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-ui); font-size: 11.5px; line-height: 1.4; color: var(--text-dim);
}
.strength-card .sc-list li svg { width: 13px; height: 13px; color: var(--purple-l); flex-shrink: 0; }
.strength-card.cv-tech .sc-list li svg, .strength-card.cv-trade .sc-list li svg { color: var(--blue); }
.strength-card .sc-flag {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  font-family: var(--font-ui); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim);
}
.strength-card .sc-flag .flag-img { width: 22px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,0.12); }

/* vertex icon badge floating on the triangle node */
.alliance-node {
  position: absolute; z-index: 5;
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,8,22,0.85); backdrop-filter: blur(8px);
  border: 1px solid rgba(201,60,255,0.45);
  box-shadow: 0 0 30px -6px rgba(201,60,255,0.6);
}
.alliance-node img { width: 30px; height: 30px; object-fit: contain; }
.alliance-node.n-top   { top: -30px; left: 50%; transform: translateX(-50%); }
.alliance-node.n-left  { bottom: 84px; left: -30px; }
.alliance-node.n-right { bottom: 84px; right: -30px; }
@media (max-width: 880px) { .alliance-node { display: none; } }

/* grid placement: card1 top-center spanning, cards 2&3 bottom row */
.alliance { grid-template-columns: 1fr 1fr; }
.sc-pos-1 { grid-column: 1 / 3; max-width: 560px; justify-self: center; width: 100%; }
.sc-pos-2 { grid-column: 1 / 2; }
.sc-pos-3 { grid-column: 2 / 3; }
@media (max-width: 880px) {
  .alliance { grid-template-columns: 1fr; }
  .sc-pos-1, .sc-pos-2, .sc-pos-3 { grid-column: 1 / 2; max-width: 100%; }
  .alliance-lines { display: none; }
}

/* ── Connector line under triangle (united by purpose) ── */
.alliance-motto {
  text-align: center; margin: 40px auto 0; max-width: 820px;
}
.alliance-motto .motto-label {
  font-family: var(--font); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue);
  margin-bottom: 10px;
}
.alliance-motto .motto-label .em { color: var(--purple-l); }
.alliance-motto p { font-size: 14px; line-height: 1.7; color: var(--text-dim); }

/* ── Floating tech visual (smart engineering) ── */
.company-techviz {
  position: relative; max-width: 900px; margin: 56px auto 0;
  aspect-ratio: 3 / 1.4; border-radius: var(--radius-lg);
  overflow: hidden; isolation: isolate;
}
.company-techviz img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: saturate(1.1) contrast(1.05) brightness(0.85);
  animation: techviz-float 12s ease-in-out infinite;
}
@keyframes techviz-float { 0%,100%{transform:scale(1.02) translateY(0);} 50%{transform:scale(1.05) translateY(-8px);} }
.company-techviz .tv-mask {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 70% at 50% 50%, transparent 30%, rgba(5,8,22,0.85) 100%),
    linear-gradient(180deg, rgba(5,8,22,0.5), transparent 25%, transparent 70%, rgba(5,8,22,0.7)),
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(46,214,255,0.12), transparent 60%);
  mix-blend-mode: normal;
}
.company-techviz .tv-glow {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse 50% 60% at 50% 45%, rgba(201,60,255,0.16), transparent 65%);
}
.company-techviz .tv-cap {
  position: absolute; left: 22px; bottom: 18px; z-index: 3;
  font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-dim);
  display: flex; align-items: center; gap: 8px;
}
.company-techviz .tv-cap .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px var(--blue); animation: blink 1.4s ease-in-out infinite; }

/* ── Bottom feature bar (5 columns) ── */
.feature-bar {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 14px; margin-top: 56px;
}
.feature-cell {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding: 26px 18px;
  border-radius: var(--radius);
  background: rgba(17,22,42,0.55);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.feature-cell:hover {
  transform: translateY(-4px);
  border-color: rgba(201,60,255,0.40);
  box-shadow: 0 0 34px -10px rgba(201,60,255,0.45);
}
.feature-cell .fc-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
}
.feature-cell .fc-icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 12px rgba(201,60,255,0.45)); }
.feature-cell .fc-icon svg { width: 40px; height: 40px; color: var(--purple-l); filter: drop-shadow(0 0 10px rgba(201,60,255,0.5)); }
.feature-cell h4 {
  font-family: var(--font); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: #fff; line-height: 1.3;
}
.feature-cell p { font-family: var(--font-ui); font-size: 11px; line-height: 1.55; color: var(--text-muted); }
@media (max-width: 980px) { .feature-bar { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .feature-bar { grid-template-columns: repeat(2, 1fr); } }


/* ════════════════════════════════════════════════════════════
   02 — LEADERSHIP
   ════════════════════════════════════════════════════════════ */
.leadership-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 960px) { .leadership-grid { grid-template-columns: 1fr; } }

.principles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 32px;
}
.principle { padding: 16px; }
.principle .icon-tile { width: 64px; height: 64px; border-radius: 14px; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; }
.principle .icon-tile img { width: 56px; height: 56px; object-fit: contain; display: block; }
.principle h4 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 6px;
}
.principle p { font-size: 10.5px; line-height: 1.5; color: var(--text-muted); }
@media (max-width: 768px) { .principles-grid { grid-template-columns: repeat(2, 1fr); } }

.founder-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  margin-top: 32px;
  padding: 20px;
}
.founder-portrait { aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; position: relative; }
.founder-portrait .media-frame { border-radius: 12px; }
.founder-info .sub {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple-l);
  margin-bottom: 4px;
}
.founder-info .name {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.15;
}
.founder-info .role { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.founder-info .bio { font-size: 12px; line-height: 1.55; color: var(--text-dim); margin-top: 10px; }

.quote-card {
  padding: 24px;
  margin-top: 20px;
  position: relative;
}
.quote-card .quote-icon {
  position: absolute;
  top: 16px; right: 16px;
  color: rgba(139,92,246,0.35);
}
.quote-card .quote-lines {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.quote-card .quote-lines > div + div { margin-top: 2px; }
.quote-card .quote-foot {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin-top: 16px;
  max-width: 440px;
}

.journey-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.journey-head h3 {
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
}
.journey-head .line {
  flex: 1;
  max-width: 360px;
  height: 1px;
  background: linear-gradient(90deg, rgba(139,92,246,0.4), transparent);
}

.timeline {
  position: relative;
}
.timeline-line {
  position: absolute;
  left: 0; right: 0; top: 22px;
  height: 1px;
  background: linear-gradient(90deg, var(--purple-l), var(--blue-l), var(--purple-l));
  opacity: 0.5;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.8s var(--ease-out);
}
.timeline.in .timeline-line { transform: scaleX(1); }

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
@media (max-width: 960px) { .timeline-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 12px; } }
@media (max-width: 640px) { .timeline-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 12px; } }

.timeline-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.timeline-dot {
  position: relative;
  margin-bottom: 16px;
}
.timeline-dot::before {
  content: '';
  position: absolute;
  left: -8px; top: -8px;
  width: 36px; height: 36px;
  background: rgba(139,92,246,0.2);
  border-radius: 50%;
  filter: blur(8px);
}
.timeline-dot .dot {
  position: relative;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--purple-l);
  background: var(--bg);
  box-shadow: 0 0 20px -4px rgba(139,92,246,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.timeline-dot .dot::after {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--purple-l);
}
.timeline-year { font-size: 14px; font-weight: 600; color: var(--purple-l); margin-bottom: 4px; }
.timeline-title { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text); margin-bottom: 6px; line-height: 1.2; }
.timeline-desc { font-size: 11px; line-height: 1.55; color: var(--text-muted); max-width: 180px; }

.expertise-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.expertise { padding: 16px; }
.expertise .icon-tile { width: 60px; height: 60px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; border-radius: 14px; }
.expertise .icon-tile img { width: 52px; height: 52px; object-fit: contain; display: block; }
.expertise h4 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 6px;
}
.expertise p { font-size: 11px; line-height: 1.55; color: var(--text-muted); }
@media (max-width: 960px) { .expertise-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .expertise-grid { grid-template-columns: repeat(2, 1fr); } }

.kpi-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  margin-top: 40px;
}
.kpi-strip-left { display: flex; align-items: center; gap: 14px; }
.kpi-strip-left .icon-tile { width: 40px; height: 40px; }
.kpi-strip-left .label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple-l);
  font-weight: 600;
}
.kpi-strip-left .sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.kpi-strip-right { display: flex; flex-wrap: wrap; gap: 24px; }
.kpi-strip-right .item { display: flex; align-items: baseline; gap: 6px; }
.kpi-strip-right .v { font-size: 14px; font-weight: 600; color: var(--text); }
.kpi-strip-right .l { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }

/* ════════════════════════════════════════════════════════════
   02b — LEADERSHIP · PHASE 01 — OUR JOURNEY TO XNEXUS
   Premium horizontal corporate timeline (6 cols, glow arrow)
   ════════════════════════════════════════════════════════════ */
.journey-v2 {
  max-width: 1400px;
  margin: 80px auto 0;
  padding: 0 24px;
}
.journey-v2 .j-header {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.6em;
  text-transform: uppercase;
  color: #FFFFFF;
  opacity: 0.92;
  margin-bottom: 18px;
}
.journey-v2 .j-arrow {
  position: relative;
  height: 2px;
  margin-bottom: 56px;
  background: linear-gradient(90deg, #36CFFF 0%, #B04DFF 100%);
  box-shadow: 0 0 10px rgba(54,207,255,0.65), 0 0 18px rgba(176,77,255,0.55);
  border-radius: 2px;
}
.journey-v2 .j-arrow::after {
  content: '';
  position: absolute;
  right: -2px; top: 50%; transform: translateY(-50%) rotate(45deg);
  width: 10px; height: 10px;
  border-top: 2px solid #B04DFF;
  border-right: 2px solid #B04DFF;
  box-shadow: 0 0 12px rgba(176,77,255,0.85);
}
.journey-v2 .j-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  position: relative;
  align-items: stretch;
}
/* ONE continuous horizontal glowing rail at the vertical center of the node row */
.journey-v2 .j-grid::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  /* sits exactly on node center (node-row top + 11px = half of 22px) */
  top: 159px;
  height: 2px;
  background: linear-gradient(90deg, #36CFFF 0%, #B04DFF 100%);
  box-shadow: 0 0 10px rgba(54,207,255,0.80), 0 0 18px rgba(176,77,255,0.60);
  border-radius: 2px;
  z-index: 0;
}
.journey-v2 .j-col {
  position: relative;
  padding: 0 14px;
  min-height: 360px;
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
}
.journey-v2 .j-col + .j-col::before {
  content: '';
  position: absolute;
  left: 0; top: 14px;
  width: 1px; height: 290px;
  background: rgba(255,255,255,0.10);
}
/* Icon area — fixed slot above the rail */
.journey-v2 .j-icon-wrap {
  width: 100%;
  height: 148px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0;
}
.journey-v2 .j-icon-wrap img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(176,77,255,0.45));
}
/* Per-icon sizing — uploaded icons have different intrinsic aspects */
.journey-v2 .j-col[data-icon="2013"]    .j-icon-wrap img,
.journey-v2 .j-col[data-icon="daii"]    .j-icon-wrap img { max-height: 86px; }
.journey-v2 .j-col[data-icon="plastic"] .j-icon-wrap img,
.journey-v2 .j-col[data-icon="light"]   .j-icon-wrap img { max-height: 130px; }
.journey-v2 .j-col[data-icon="exp"]     .j-icon-wrap img,
.journey-v2 .j-col[data-icon="xnx"]     .j-icon-wrap img { max-height: 92px; }
/* Node — perfectly centered on the rail, dead-center of the column */
.journey-v2 .j-node {
  position: relative;
  width: 100%;
  height: 22px;
  margin: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.journey-v2 .j-node .dot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid rgba(180,210,255,0.9);
  box-shadow: 0 0 12px rgba(54,207,255,0.80), 0 0 24px rgba(176,77,255,0.60);
}
.journey-v2 .j-node .dot::after {
  content: ''; position: absolute; inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(168,191,255,0.4);
  animation: j-pulse 3s ease-in-out infinite;
}
@keyframes j-pulse { 0%,100%{transform:scale(1);opacity:0.4;} 50%{transform:scale(1.4);opacity:0;} }
.journey-v2 .j-desc {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.75);
  max-width: 180px;
  margin-top: 22px;
}
@media (max-width: 1080px) {
  .journey-v2 .j-grid { grid-template-columns: repeat(3, 1fr); }
  .journey-v2 .j-grid::before { display: none; }
  .journey-v2 .j-col { min-height: 280px; padding: 24px 16px; border-top: 1px solid rgba(255,255,255,0.08); }
  .journey-v2 .j-col + .j-col::before { display: none; }
}
@media (max-width: 640px) {
  .journey-v2 .j-grid { grid-template-columns: 1fr 1fr; }
}

/* ════════════════════════════════════════════════════════════
   02c — LEADERSHIP · PHASE 02 — STORYTELLING FEATURE PANELS
   Full-cover image background, text floating above.
   ════════════════════════════════════════════════════════════ */
.story-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 72px;
}
.story-panel {
  position: relative;
  min-height: 340px;
  border-radius: 24px;
  overflow: hidden;
  background: transparent;
  border: 1px solid rgba(120,140,255,0.18);
  box-shadow: 0 0 20px rgba(120,100,255,0.12), 0 18px 50px -22px rgba(0,0,0,0.55);
  isolation: isolate;
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.story-panel:hover {
  transform: translateY(-3px);
  border-color: rgba(176,77,255,0.35);
  box-shadow: 0 0 28px rgba(176,77,255,0.25), 0 22px 60px -20px rgba(0,0,0,0.65);
}
.story-panel .sp-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: saturate(1.08) contrast(1.04);
  transition: transform 1.3s var(--ease-out);
}
.story-panel:hover .sp-bg { transform: scale(1.05); }
.story-panel .sp-veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(3,7,20,0.20) 0%, rgba(3,7,20,0.85) 100%);
  pointer-events: none;
}
.story-panel .sp-tone {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse 60% 70% at 20% 30%, rgba(176,77,255,0.16), transparent 65%);
}
.story-panel .sp-content {
  position: relative; z-index: 2;
  padding: 42px 38px;
  display: flex; flex-direction: column;
  gap: 16px;
  height: 100%;
  justify-content: flex-end;
}
.story-panel .sp-title {
  font-family: var(--font);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-shadow: 0 2px 24px rgba(0,0,0,0.55);
}
.story-panel .sp-title .em { color: #B04DFF; text-shadow: 0 0 24px rgba(176,77,255,0.55); }
.story-panel .sp-body {
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(255,255,255,0.85);
  max-width: 420px;
  text-shadow: 0 1px 16px rgba(0,0,0,0.5);
}
@media (max-width: 880px) { .story-panels { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════
   02d — LEADERSHIP · PHASE 03 — EXECUTIVE ACHIEVEMENTS BAR
   Final element of the chapter. Premium summary strip.
   ════════════════════════════════════════════════════════════ */
.exec-bar {
  width: 100%;
  margin-top: 72px;
  background: transparent;
  border: 1px solid rgba(120,140,255,0.18);
  border-radius: 22px;
  padding: 32px 36px;
  display: grid;
  grid-template-columns: 2.4fr 1fr 1fr 1fr 1fr;
  align-items: center;
  gap: 28px;
  position: relative;
}
.exec-bar .eb-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 80px;
}
.exec-bar .eb-cell + .eb-cell::before {
  content: '';
  position: absolute;
  left: -14px; top: 15%;
  width: 1px; height: 70%;
  background: rgba(255,255,255,0.12);
}
.exec-bar .eb-icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
}
.exec-bar .eb-icon svg { width: 100%; height: 100%; color: #B04DFF; filter: drop-shadow(0 0 12px rgba(176,77,255,0.45)); }
.exec-bar .eb-icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 10px rgba(176,77,255,0.40)); }
.exec-bar .eb-headline {
  font-family: var(--font);
  font-size: clamp(18px, 1.9vw, 24px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.25;
  color: #FFFFFF;
}
.exec-bar .eb-headline .em { color: #B04DFF; }
.exec-bar .eb-desc {
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255,255,255,0.80);
  margin-top: 8px;
  max-width: 480px;
}
.exec-bar .eb-value {
  font-family: var(--font);
  font-size: clamp(38px, 3.6vw, 54px);
  font-weight: 700;
  line-height: 1;
  color: #B04DFF;
  text-shadow: 0 0 28px rgba(176,77,255,0.45);
}
.exec-bar .eb-label {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}
.exec-bar .eb-text {
  display: flex; flex-direction: column;
}
@media (max-width: 1080px) {
  .exec-bar { grid-template-columns: 1fr 1fr; padding: 26px 22px; gap: 22px; }
  .exec-bar .eb-cell:first-child { grid-column: 1 / -1; }
  .exec-bar .eb-cell + .eb-cell::before { display: none; }
  .exec-bar .eb-cell { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 16px; }
  .exec-bar .eb-cell:first-child { border-top: 0; padding-top: 0; }
}
@media (max-width: 520px) {
  .exec-bar { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   03 — VISION  ·  Cinematic Dashboard Composition
   One unified command-center interface. Not a card gallery.
   ════════════════════════════════════════════════════════════ */

/* ── Composition shell + ambient atmosphere ─────────────────── */
#vision { position: relative; isolation: isolate; overflow: hidden; }

.vision-atmos {
  position: absolute;
  inset: -60px 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.vision-atmos .v-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}
.vision-atmos .v-glow.purple {
  width: 760px; height: 760px;
  left: -220px; top: -120px;
  background: radial-gradient(circle, rgba(139,92,246,0.55), transparent 65%);
  opacity: 0.65;
  animation: v-float-a 26s ease-in-out infinite;
}
.vision-atmos .v-glow.blue {
  width: 680px; height: 680px;
  right: -200px; top: 28%;
  background: radial-gradient(circle, rgba(46,214,255,0.50), transparent 65%);
  opacity: 0.55;
  animation: v-float-b 32s ease-in-out infinite;
}
.vision-atmos .v-glow.magenta {
  width: 720px; height: 720px;
  left: 38%; bottom: -240px;
  background: radial-gradient(circle, rgba(217,70,239,0.38), transparent 65%);
  opacity: 0.5;
  animation: v-float-c 28s ease-in-out infinite;
}
.vision-atmos .v-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(139,92,246,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at center, #000, transparent 90%);
          mask-image: radial-gradient(ellipse 85% 70% at center, #000, transparent 90%);
}
.vision-atmos .v-particles {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(201,60,255,0.55), transparent),
    radial-gradient(1px 1px at 28% 68%, rgba(96,165,250,0.50), transparent),
    radial-gradient(1px 1px at 56% 18%, rgba(217,70,239,0.40), transparent),
    radial-gradient(1px 1px at 74% 78%, rgba(201,60,255,0.50), transparent),
    radial-gradient(1px 1px at 88% 36%, rgba(96,165,250,0.45), transparent),
    radial-gradient(1px 1px at 42% 88%, rgba(201,60,255,0.40), transparent),
    radial-gradient(1px 1px at 8% 52%, rgba(96,165,250,0.40), transparent);
  opacity: 0.85;
}
@keyframes v-float-a { 50% { transform: translate(50px, 40px); } }
@keyframes v-float-b { 50% { transform: translate(-40px, 60px); } }
@keyframes v-float-c { 50% { transform: translate(60px, -50px); } }

/* ── Composition canvas ─────────────────────────────────────── */
.vision-canvas {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Brand mark  ·  official X+NEXUS logo ──────────────────── */
.v-brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  user-select: none;
  position: relative;
}
.v-brand-mark .v-brand-logo { height: 40px; }
.v-brand-mark:hover .v-brand-logo,
.v-finale-panel:hover .v-finale-left .v-finale-x { transform: scale(1.04); }

/* Shared panel base — translucent glass over the atmosphere */
.v-panel {
  position: relative;
  border-radius: 24px;
  border: 1px solid rgba(139,92,246,0.18);
  background:
    linear-gradient(180deg, rgba(15,15,30,0.72) 0%, rgba(12,12,28,0.55) 100%);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 30px 80px -40px rgba(139,92,246,0.45),
    0 0 0 1px rgba(139,92,246,0.04);
  isolation: isolate;
  overflow: hidden;
}
.v-panel::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(139,92,246,0.55) 0%,
    rgba(46,214,255,0.30) 45%,
    rgba(34,211,238,0.18) 75%,
    rgba(217,70,239,0.35) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 8;
}

/* ── HERO PANEL  ·  text + globe in one integrated frame ─────── */
.v-hero-panel {
  display: grid;
  grid-template-rows: auto 1fr;
}
.v-hero-topbar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 22px 30px;
  border-bottom: 1px solid rgba(139,92,246,0.12);
  background:
    linear-gradient(180deg, rgba(139,92,246,0.06), rgba(139,92,246,0)) ,
    radial-gradient(ellipse 55% 200% at 50% 100%, rgba(139,92,246,0.18), transparent 70%);
}
.v-eyebrow-set { display: inline-flex; align-items: center; gap: 14px; }
.v-hero-topbar .v-eyebrow-set { justify-self: start; }
.v-hero-topbar .v-brand-mark { justify-self: center; }
.v-hero-topbar .v-brand-mark .v-brand-logo { height: 46px; }
.v-hero-topbar .v-hud-tag {
  justify-self: end;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 11px;
  font-family: ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(7,7,15,0.55);
  backdrop-filter: blur(10px);
  border-radius: 6px;
  border: 1px solid rgba(139,92,246,0.30);
}
.v-hero-topbar .v-hud-tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--purple-l);
  box-shadow: 0 0 8px rgba(201,60,255,0.85);
  animation: blink 1.4s ease-in-out infinite;
}
.v-hero-body {
  display: grid;
  grid-template-columns: 0.85fr 1.25fr;
  min-height: 460px;
}

.v-hero-left {
  position: relative;
  padding: 42px 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 3;
}
.v-hero-left .v-eyebrow-row {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 4px;
}
.v-hero-left .v-section-num {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(139,92,246,0.30), rgba(139,92,246,0.10));
  border: 1px solid rgba(139,92,246,0.42);
  font-family: ui-monospace, monospace;
  font-size: 14px; font-weight: 700;
  color: var(--purple-l);
  box-shadow: 0 0 24px -4px rgba(139,92,246,0.55);
}
.v-hero-left .v-eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--purple-l);
  font-weight: 600;
}
.v-hero-left h2 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--text);
}
.v-hero-left .v-lead {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 480px;
}
.v-hero-bullets {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v-hero-bullets li {
  list-style: none;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-dim);
}
.v-hero-bullets li .v-bul-icon {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(139,92,246,0.10);
  border: 1px solid rgba(139,92,246,0.22);
  color: var(--purple-l);
  flex-shrink: 0;
  transition: all .3s var(--ease);
}
.v-hero-bullets li:hover .v-bul-icon {
  background: rgba(139,92,246,0.20);
  border-color: rgba(139,92,246,0.45);
  box-shadow: 0 0 18px -4px rgba(139,92,246,0.6);
}
.v-egypt-chip {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(139,92,246,0.14), rgba(46,214,255,0.06));
  border: 1px solid rgba(139,92,246,0.30);
  align-self: flex-start;
  position: relative;
  overflow: hidden;
}
.v-egypt-chip::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(201,60,255,0.18), transparent);
  transform: translateX(-100%);
  animation: v-chip-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes v-chip-shimmer {
  0%, 100% { transform: translateX(-100%); }
  50%      { transform: translateX(100%); }
}
.v-egypt-chip .chip-icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(139,92,246,0.22);
  border: 1px solid rgba(139,92,246,0.45);
  color: var(--purple-l);
}
.v-egypt-chip .chip-text .t {
  font-size: 12px; font-weight: 600; color: var(--text);
  letter-spacing: 0.01em;
}
.v-egypt-chip .chip-text .s {
  font-size: 10px; color: var(--text-muted);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-top: 2px;
}

/* Image side — full composition revealed, soft edge integration */
.v-hero-right {
  position: relative;
  min-height: 460px;
  overflow: hidden;
}
.v-hero-right .v-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: saturate(1.10) contrast(1.04) brightness(1.02);
  transition: transform 1.4s var(--ease-out), filter .6s var(--ease-out);
  /* Soft left-edge bleed only — keeps the full composition visible */
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 4%, #000 9%);
          mask-image: linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 4%, #000 9%);
  z-index: 1;
}
.v-hero-panel:hover .v-hero-img {
  transform: scale(1.04);
  filter: saturate(1.15) contrast(1.05);
}
.v-hero-right .v-hero-tint {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 70% 40%, rgba(139,92,246,0.16), transparent 70%),
    radial-gradient(ellipse 40% 60% at 18% 60%, rgba(46,214,255,0.14), transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
}
.v-hero-right .v-hero-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 110% 110% at 60% 50%, transparent 55%, rgba(7,7,15,0.35) 100%);
  pointer-events: none;
  z-index: 3;
}
.v-hero-right .v-scan {
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,60,255,0.85), transparent);
  animation: scan-line 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 4;
}
.v-hero-right .v-hud-tag {
  position: absolute;
  top: 22px; right: 22px;
  z-index: 5;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 11px;
  font-family: ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(7,7,15,0.55);
  backdrop-filter: blur(10px);
  border-radius: 6px;
  border: 1px solid rgba(139,92,246,0.30);
}
.v-hero-right .v-hud-tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--purple-l);
  box-shadow: 0 0 8px rgba(201,60,255,0.85);
  animation: blink 1.4s ease-in-out infinite;
}
.v-hero-right .v-hud-coords {
  position: absolute;
  left: 22px; bottom: 22px;
  z-index: 5;
  font-family: ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: flex; flex-direction: column; gap: 4px;
}
.v-hero-right .v-hud-coords span { display: block; }
.v-hero-right .v-hud-coords .em { color: var(--purple-l); }

/* Corner brackets (HUD-style) */
.v-hero-right .v-corner {
  position: absolute;
  width: 16px; height: 16px;
  color: rgba(201,60,255,0.55);
  z-index: 5;
}
.v-hero-right .v-corner.tl { top: 14px; left: 14px; }
.v-hero-right .v-corner.bl { bottom: 14px; left: 14px; transform: rotate(-90deg); }
.v-hero-right .v-corner.br { bottom: 14px; right: 14px; transform: rotate(180deg); }

/* ── DASHBOARD PANEL  ·  4 fused regions, no gaps ────────────── */
.v-dashboard-panel {
  display: grid;
  grid-template-rows: auto auto;
}
.v-dash-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}
/* The bridge label running across the top of the dashboard */
.v-dash-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(139,92,246,0.14);
  background: linear-gradient(180deg, rgba(139,92,246,0.04), transparent);
}
.v-dash-header .label {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.v-dash-header .label .em { color: var(--purple-l); }
.v-dash-header .indicators {
  display: flex; gap: 18px;
  font-family: ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.v-dash-header .indicators span {
  display: inline-flex; align-items: center; gap: 6px;
}
.v-dash-header .indicators .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--purple-l);
  box-shadow: 0 0 6px rgba(201,60,255,0.85);
  animation: blink 1.4s ease-in-out infinite;
}

.v-dash-region {
  position: relative;
  min-height: 360px;
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
}
.v-dash-region + .v-dash-region::before {
  content: '';
  position: absolute;
  left: 0; top: 24px; bottom: 24px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(139,92,246,0.10) 18%,
    rgba(139,92,246,0.32) 50%,
    rgba(139,92,246,0.10) 82%,
    transparent 100%);
  z-index: 6;
}

/* Numbered marker */
.v-dash-region .v-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(139,92,246,0.28), rgba(139,92,246,0.08));
  border: 1px solid rgba(139,92,246,0.40);
  color: var(--purple-l);
  font-family: ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 0 22px -5px rgba(139,92,246,0.55);
  margin-bottom: 14px;
  z-index: 4;
  transition: all .35s var(--ease);
}
.v-dash-region:hover .v-num {
  background: linear-gradient(135deg, rgba(139,92,246,0.42), rgba(139,92,246,0.16));
  border-color: rgba(201,60,255,0.65);
  box-shadow: 0 0 32px -4px rgba(201,60,255,0.75);
}
.v-dash-region h4 {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 6px;
  z-index: 4;
  position: relative;
}
.v-dash-region p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 220px;
  z-index: 4;
  position: relative;
}

/* Image embedded into the lower half, fades upward into the panel */
.v-dash-region .v-dash-image {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 56%;
  overflow: hidden;
  z-index: 1;
}
.v-dash-region .v-dash-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.94) saturate(1.10) contrast(1.04);
  transition: transform 1.2s var(--ease-out), filter .6s var(--ease-out);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 14%, #000 34%);
          mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 14%, #000 34%);
}
.v-dash-region:hover .v-dash-image img {
  transform: scale(1.08);
  filter: brightness(1.04) saturate(1.18) contrast(1.06);
}
/* Color tint per region — ambient color story */
.v-dash-region .v-dash-image::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
}
.v-dash-region[data-tone="ai"] .v-dash-image::after {
  background:
    radial-gradient(ellipse at center, rgba(96,165,250,0.12), transparent 70%),
    linear-gradient(180deg, transparent 40%, rgba(7,7,15,0.40) 100%);
  mix-blend-mode: screen;
}
.v-dash-region[data-tone="transfer"] .v-dash-image::after {
  background:
    radial-gradient(ellipse at center, rgba(217,70,239,0.14), transparent 70%),
    linear-gradient(180deg, transparent 40%, rgba(7,7,15,0.40) 100%);
  mix-blend-mode: screen;
}
.v-dash-region[data-tone="local"] .v-dash-image::after {
  background:
    radial-gradient(ellipse at center, rgba(139,92,246,0.14), transparent 70%),
    linear-gradient(180deg, transparent 40%, rgba(7,7,15,0.40) 100%);
  mix-blend-mode: screen;
}
.v-dash-region[data-tone="ops"] .v-dash-image::after {
  background:
    radial-gradient(ellipse at center, rgba(201,60,255,0.14), transparent 70%),
    linear-gradient(180deg, transparent 40%, rgba(7,7,15,0.40) 100%);
  mix-blend-mode: screen;
}
/* Final dark bleed below image (joins with finale below) */
.v-dash-region .v-dash-image::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 50%;
  background: linear-gradient(180deg, transparent, rgba(7,7,15,0.85));
  pointer-events: none;
  z-index: 3;
}
/* HUD overlay on each region image */
.v-dash-region .v-region-hud {
  position: absolute;
  bottom: 14px; left: 22px; right: 22px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.v-dash-region .v-region-hud .h-tag {
  color: var(--purple-l);
  display: inline-flex; align-items: center; gap: 6px;
}
.v-dash-region .v-region-hud .h-tag .pulse {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--purple-l);
  box-shadow: 0 0 6px rgba(201,60,255,0.85);
  animation: blink 1.4s ease-in-out infinite;
}
.v-dash-region .v-region-hud .h-status { color: var(--text-faint); }

/* Sector status bar — runs across bottom of dashboard panel */
.v-sectors-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 14px 24px;
  padding: 18px 28px;
  border-top: 1px solid rgba(139,92,246,0.14);
  background: linear-gradient(180deg, transparent, rgba(139,92,246,0.04));
}
.v-sectors-bar .sector {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}
.v-sectors-bar .sector .ico {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: rgba(139,92,246,0.10);
  border: 1px solid rgba(139,92,246,0.25);
  color: var(--purple-l);
  transition: all .3s var(--ease);
}
.v-sectors-bar .sector:hover .ico {
  background: rgba(139,92,246,0.22);
  border-color: rgba(201,60,255,0.55);
  box-shadow: 0 0 16px -4px rgba(139,92,246,0.65);
}

/* ── FINALE STRIP  ·  X-logo · tagline · city skyline ────────── */
.v-finale-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 0.55fr) 1.6fr minmax(240px, 0.95fr);
  align-items: stretch;
  min-height: 220px;
  background:
    linear-gradient(135deg, rgba(15,15,30,0.72) 0%, rgba(12,12,28,0.55) 50%, rgba(15,15,30,0.40) 100%);
}
/* Soft purple light pool across the whole strip */
.v-finale-panel::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 140% at 18% 60%, rgba(139,92,246,0.20), transparent 65%),
    radial-gradient(ellipse 55% 140% at 82% 50%, rgba(46,214,255,0.16), transparent 65%);
  pointer-events: none;
  z-index: 1;
}
.v-finale-panel .v-finale-scan {
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,60,255,0.7), transparent);
  animation: scan-line 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

/* LEFT — large glowing X */
.v-finale-left {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px 24px 28px;
}
.v-finale-left .v-finale-x {
  height: clamp(64px, 8vw, 104px);
}
.v-finale-left::after {
  content: '';
  position: absolute;
  right: 0; top: 18%; bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(139,92,246,0.30) 30%, rgba(139,92,246,0.30) 70%, transparent);
}

/* CENTER — tagline and values */
.v-finale-center {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 36px 24px;
  text-align: center;
}
.v-finale-center .v-finale-tagline {
  font-size: clamp(18px, 1.95vw, 26px);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.35;
  color: #fff;
  max-width: 760px;
}
.v-finale-center .v-finale-tagline em {
  font-style: normal;
  background: linear-gradient(90deg, #C4B5FD 0%, #C93CFF 45%, #D946EF 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: grad-move 6s linear infinite;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.v-finale-center .v-finale-values {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.v-finale-center .v-finale-values span {
  display: inline-flex; align-items: center; gap: 8px;
}
.v-finale-center .v-finale-values svg {
  width: 14px; height: 14px;
  color: var(--purple-l);
  flex-shrink: 0;
}

/* RIGHT — city skyline, edge-faded into the strip */
.v-finale-right {
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.v-finale-right::before {
  content: '';
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(139,92,246,0.30) 30%, rgba(139,92,246,0.30) 70%, transparent);
  z-index: 5;
}
.v-finale-right .v-finale-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  filter: brightness(0.95) saturate(1.15) contrast(1.05);
  transition: transform 1.6s var(--ease-out), filter .6s var(--ease-out);
  /* Left edge fades into the strip; right stays visible */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 6%, #000 16%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 6%, #000 16%);
}
.v-finale-panel:hover .v-finale-right .v-finale-img { transform: scale(1.05); filter: brightness(1.02) saturate(1.22) contrast(1.06); }
.v-finale-right::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7,7,15,0.45) 0%, transparent 20%),
    radial-gradient(ellipse 80% 100% at 60% 60%, rgba(139,92,246,0.16), transparent 65%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 3;
}

/* ── Responsive scaling — composition feel preserved ────────── */
@media (max-width: 1080px) {
  .v-hero-body { grid-template-columns: 1fr 1.05fr; }
  .v-hero-left  { padding: 36px 32px 32px; }
  .v-hero-topbar .v-brand-mark .v-brand-logo { height: 40px; }
  .v-finale-panel { grid-template-columns: minmax(140px, 0.5fr) 1.5fr minmax(200px, 0.85fr); }
}
@media (max-width: 880px) {
  /* Hero: stack vertically — image on top, then content */
  .v-hero-body { grid-template-columns: 1fr; min-height: 0; }
  .v-hero-right { min-height: 320px; aspect-ratio: 16/9; order: -1; }
  .v-hero-right .v-hero-img {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0,0,0,0.55) 92%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0,0,0,0.55) 92%, transparent 100%);
  }
  .v-hero-left { padding: 0 28px 36px; margin-top: -24px; position: relative; z-index: 4; }
  .v-hero-topbar { padding: 16px 22px; gap: 12px; grid-template-columns: auto 1fr auto; }
  .v-hero-topbar .v-brand-mark { margin-left: 0; justify-self: center; }
  .v-hero-topbar .v-brand-mark .v-brand-logo { height: 34px; }

  /* Dashboard: 2x2 */
  .v-dash-row { grid-template-columns: repeat(2, 1fr); }
  .v-dash-region:nth-child(3),
  .v-dash-region:nth-child(4) { border-top: 1px solid rgba(139,92,246,0.14); }
  .v-dash-region:nth-child(odd)::before { display: none !important; }
  .v-dash-region:nth-child(even)::before { display: block !important; }

  /* Finale: still 3-col but tighter */
  .v-finale-panel { grid-template-columns: minmax(110px, 0.45fr) 1.4fr minmax(170px, 0.75fr); min-height: 200px; }
  .v-finale-left .v-finale-x { height: 62px; }
  .v-finale-center { padding: 28px 16px; gap: 14px; }
}
@media (max-width: 640px) {
  .v-hero-left { padding: 0 20px 32px; gap: 14px; }
  .v-hero-topbar .v-section-num { width: 36px; height: 36px; font-size: 12px; }
  .v-hero-right { min-height: 260px; }
  .v-dash-region { min-height: 260px; padding: 20px 18px 18px; }
  .v-dash-region .v-num { width: 34px; height: 34px; font-size: 12px; }
  .v-dash-region h4 { font-size: 13px; }
  .v-dash-region p { font-size: 11.5px; }
  .v-dash-header { padding: 14px 18px; flex-wrap: wrap; gap: 8px; }
  .v-dash-header .indicators { gap: 12px; }
  .v-sectors-bar { padding: 14px 18px; gap: 10px 16px; }
  .v-sectors-bar .sector { font-size: 9.5px; gap: 8px; }
  .v-sectors-bar .sector .ico { width: 24px; height: 24px; }
  /* Finale collapses to stacked: X above tagline, city below */
  .v-finale-panel { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: 0; }
  .v-finale-left { padding: 24px 0 6px; }
  .v-finale-left::after { display: none; }
  .v-finale-center { padding: 12px 20px 24px; }
  .v-finale-right { min-height: 160px; }
  .v-finale-right::before { display: none; }
  .v-finale-right .v-finale-img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.55) 10%, #000 22%);
            mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.55) 10%, #000 22%);
  }
  .v-finale-center .v-finale-tagline { font-size: 17px; }
  .v-finale-center .v-finale-values { gap: 8px 16px; font-size: 9.5px; }
}
@media (max-width: 440px) {
  .v-dash-row { grid-template-columns: 1fr; }
  .v-dash-region:nth-child(even)::before { display: none !important; }
  .v-dash-region + .v-dash-region { border-top: 1px solid rgba(139,92,246,0.14); }
}

/* ════════════════════════════════════════════════════════════
   04 — INNOVATION
   ════════════════════════════════════════════════════════════ */
.dashboard-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(139,92,246,0.18);
  background: var(--bg-card);
  margin-top: 50px;
}
.dashboard-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(139,92,246,0.6), rgba(96,165,250,0.4), rgba(34,211,238,0.2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
}
.dashboard-chrome {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(7,7,15,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.dashboard-chrome .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.dashboard-chrome .dot.r { background: rgba(217,70,239,0.6); }
.dashboard-chrome .dot.y { background: rgba(251,191,36,0.6); }
.dashboard-chrome .dot.g { background: rgba(52,211,153,0.6); }
.dashboard-chrome .url-pill {
  margin-left: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  border-radius: 6px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--text-muted);
}
.dashboard-chrome .url-pill .prefix { color: var(--purple-l); }

.dashboard-body {
  position: absolute;
  inset: 36px 0 0 0;
  display: flex;
  padding: 16px;
  gap: 12px;
}
.dash-sidebar {
  width: 130px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-sidebar .brand {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.dash-sidebar .brand .dash-logo-full {
  height: 20px;
  flex-shrink: 0;
}
.dash-sidebar .brand span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}
.dash-sidebar .item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px;
  color: var(--text-muted);
}
.dash-sidebar .item.active {
  background: rgba(139,92,246,0.15);
  border: 1px solid rgba(139,92,246,0.25);
  color: var(--purple-l);
}
.dash-sidebar .item .bullet {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}
@media (max-width: 768px) { .dash-sidebar { display: none; } }

.dash-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.dash-kpi {
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 8px;
}
.dash-kpi .label { font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.dash-kpi .val { font-size: 12px; font-weight: 600; color: var(--text); margin-top: 4px; }
.dash-kpi .delta { font-size: 8.5px; color: #34D399; margin-top: 2px; }

.dash-row {
  flex: 1;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 10px;
  min-height: 0;
}
.dash-card {
  padding: 12px;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
.dash-card .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.dash-card .head .l1 { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.dash-card .head .l2 { font-family: ui-monospace, monospace; font-size: 8.5px; color: var(--text-faint); }
.dash-card .head .live {
  display: flex; align-items: center; gap: 4px;
  font-family: ui-monospace, monospace; font-size: 8.5px;
  color: #34D399;
}
.dash-card .head .live .d {
  width: 4px; height: 4px; border-radius: 50%;
  background: #34D399; animation: blink 1.4s ease-in-out infinite;
}
.dash-chart { flex: 1; position: relative; }
.dash-monitor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.dash-monitor-tile {
  aspect-ratio: 16/9;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(139,92,246,0.25), rgba(46,214,255,0.15));
  display: flex;
  align-items: flex-end;
  padding: 6px;
  font-size: 8.5px;
  color: var(--text-dim);
}

.innovation-bottom-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px;
  margin-top: 60px;
  align-items: start;
}
@media (max-width: 960px) { .innovation-bottom-grid { grid-template-columns: 1fr; } }

.innovation-tagline {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 16px;
}
.innovation-window-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  color: var(--purple-l);
}
.innovation-window-line span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.innovation-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 32px;
}
.innovation-kpi {
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.innovation-kpi svg { color: var(--purple-l); flex-shrink: 0; }
.innovation-kpi span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
@media (max-width: 768px) { .innovation-kpi-strip { grid-template-columns: repeat(2, 1fr); } }

.innovation-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.innovation-feature {
  display: flex;
  gap: 14px;
  padding: 16px;
  align-items: flex-start;
}
.innovation-feature .icon-tile { width: 36px; height: 36px; flex-shrink: 0; }
.innovation-feature h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.innovation-feature p { font-size: 12px; line-height: 1.55; color: var(--text-muted); }

/* ════════════════════════════════════════════════════════════
   05 — TRUST
   ════════════════════════════════════════════════════════════ */
.trust-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 960px) { .trust-grid { grid-template-columns: 1fr; } }

.trust-pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 40px;
}
.trust-pillar {
  display: flex;
  gap: 12px;
  padding: 16px;
  align-items: flex-start;
}
.trust-pillar .icon-tile { width: 36px; height: 36px; flex-shrink: 0; }
.trust-pillar h4 {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 4px;
}
.trust-pillar p { font-size: 11.5px; line-height: 1.55; color: var(--text-muted); }
@media (max-width: 640px) { .trust-pillars { grid-template-columns: 1fr; } }

.stats-panel {
  margin-top: 80px;
  padding: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(15,15,30,0.7), rgba(15,15,30,0.3));
  backdrop-filter: blur(8px);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stat-item { text-align: center; }
.stat-item .v {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}
.stat-item .l {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
@media (max-width: 640px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 12px; } }

.certs-strip { margin-top: 50px; }
.certs-strip .head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.certs-strip .head svg { color: var(--purple-l); }
.certs-strip .head .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
}
.certs-strip .head .line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(139,92,246,0.3), transparent);
}
.certs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.cert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
}
.cert .check {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(139,92,246,0.2);
  background: rgba(139,92,246,0.05);
  color: var(--purple-l);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cert .code { font-size: 12px; font-weight: 600; color: var(--text); }
.cert .desc { font-size: 10.5px; color: var(--text-muted); margin-top: 1px; }
@media (max-width: 768px) { .certs-grid { grid-template-columns: repeat(2, 1fr); } }

.partners {
  margin-top: 50px;
  padding: 24px;
}
.partners .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.partners .head .l1 {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.partners .head .l2 {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--text-faint);
}
.partners-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.partner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 8px;
  border: 1px solid var(--border);
  background: rgba(12,12,24,0.4);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  transition: all .3s var(--ease);
}
.partner:hover {
  color: var(--text);
  border-color: rgba(139,92,246,0.3);
}
@media (max-width: 768px) { .partners-grid { grid-template-columns: repeat(3, 1fr); } }

/* ════════════════════════════════════════════════════════════
   06 — FUTURE
   ════════════════════════════════════════════════════════════ */
.future-layers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 60px;
}
.future-layer {
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.future-layer::before {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(139,92,246,0.15);
  filter: blur(40px);
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.future-layer:hover::before { opacity: 1; }
.future-layer .icon-tile { width: 44px; height: 44px; margin-bottom: 16px; border-radius: 12px; }
.future-layer h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.future-layer p { font-size: 12px; line-height: 1.55; color: var(--text-muted); }
@media (max-width: 768px) { .future-layers { grid-template-columns: repeat(2, 1fr); } }

.cta-panel {
  position: relative;
  margin-top: 80px;
  padding: 60px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(15,15,30,0.8), rgba(139,92,246,0.06), rgba(15,15,30,0.8));
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.cta-panel::before {
  content: '';
  position: absolute;
  top: -100px; left: -100px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: rgba(139,92,246,0.15);
  filter: blur(80px);
}
.cta-panel::after {
  content: '';
  position: absolute;
  bottom: -120px; right: -100px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: rgba(46,214,255,0.15);
  filter: blur(80px);
}
.cta-grid {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 768px) {
  .cta-panel { padding: 36px 24px; }
  .cta-grid { grid-template-columns: 1fr; gap: 32px; }
}
.cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(139,92,246,0.3);
  background: rgba(139,92,246,0.1);
  border-radius: 999px;
  margin-bottom: 20px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple-l);
}
.cta-badge .d {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--purple-l);
  animation: blink 1.4s ease-in-out infinite;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.future-badge-wrap {
  position: relative;
  width: 224px;
  height: 224px;
  margin: 0 auto;
}
.orbit-ring {
  position: absolute;
  border-radius: 50%;
}
.orbit-ring .planet {
  position: absolute;
  border-radius: 50%;
}
.ring-1 { inset: 0; border: 1px solid rgba(139,92,246,0.25); animation: spin-cw 32s linear infinite; }
.ring-1 .planet { top: -6px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: var(--purple-l); box-shadow: 0 0 16px var(--purple-l); }
.ring-2 { inset: 16px; border: 1px solid rgba(96,165,250,0.25); animation: spin-ccw 42s linear infinite; }
.ring-2 .planet { top: 50%; right: -4px; transform: translateY(-50%); width: 10px; height: 10px; background: var(--blue-l); box-shadow: 0 0 14px var(--blue-l); }
.ring-3 { inset: 36px; border: 1px solid rgba(34,211,238,0.25); animation: spin-cw 52s linear infinite; }
.ring-3 .planet { bottom: -4px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
@keyframes spin-cw { to { transform: rotate(360deg); } }
@keyframes spin-ccw { to { transform: rotate(-360deg); } }

.future-badge-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.future-badge-center .core {
  width: 96px; height: 96px;
  border-radius: 50%;
  border: 1px solid rgba(139,92,246,0.4);
  background: rgba(15,15,30,0.85);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 50px -10px rgba(139,92,246,0.6);
}

/* ── Footer ── */
.footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 0;
  margin-top: 50px;
  border-top: 1px solid var(--border);
}
.footer-bar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-logo { height: 30px; opacity: 0.95; }
.footer-bar .brand:hover .footer-logo { transform: scale(1.03); opacity: 1; }
.footer-bar .copy { font-size: 11px; color: var(--text-muted); }

/* ── Inline 'sparkle' eyebrow row ── */
.sparkle-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding: 8px 14px;
  border: 1px solid rgba(139,92,246,0.25);
  background: rgba(139,92,246,0.05);
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple-l);
}


/* ══════════════════════ INNOVATION SECTION NEW ══════════════════════════════ */
#innovation { position:relative; overflow:hidden; background:var(--bg); padding:0 !important; }
#innovation > .container { display:none; }

/* ambient glows */
.inno-glow-1{position:absolute;top:-200px;left:-200px;width:800px;height:800px;background:radial-gradient(circle,rgba(176,77,255,.07) 0%,transparent 70%);pointer-events:none;z-index:0;}
.inno-glow-2{position:absolute;bottom:0;right:-100px;width:600px;height:600px;background:radial-gradient(circle,rgba(54,207,255,.05) 0%,transparent 70%);pointer-events:none;z-index:0;}

/* HEADER BAR */
.inno-header{position:relative;z-index:10;height:110px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:0 60px;border-bottom:1px solid rgba(255,255,255,.12);background:rgba(5,8,20,.9);backdrop-filter:blur(16px);}
.inno-header-left{display:flex;align-items:center;gap:16px;}
.inno-num-box{width:44px;height:44px;border-radius:10px;background:linear-gradient(180deg,#B04DFF,#7B49FF);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:#fff;box-shadow:0 0 20px rgba(176,77,255,.4);flex-shrink:0;}
.inno-eyebrow-lbl{font-size:11px;font-weight:700;letter-spacing:4px;color:#B04DFF;text-transform:uppercase;}
.inno-header-center{display:flex;flex-direction:column;align-items:center;gap:6px;}
.inno-header-center img{height:72px;width:auto;object-fit:contain;filter:drop-shadow(0 0 18px rgba(176,77,255,.6)) drop-shadow(0 0 8px rgba(54,207,255,.3)) brightness(1.1);}
.inno-tagline-hdr{font-size:9px;font-weight:600;letter-spacing:6px;color:rgba(255,255,255,.7);text-transform:uppercase;}
.inno-header-right{text-align:right;}
.inno-header-right .ln1{font-size:15px;font-weight:700;color:#fff;letter-spacing:.5px;}
.inno-header-right .ln2{font-size:15px;font-weight:700;color:#B04DFF;letter-spacing:.5px;}

/* HERO */
.inno-hero{position:relative;min-height:900px;display:flex;align-items:center;overflow:hidden;z-index:1;}
.inno-hero-image{position:absolute;top:0;right:0;width:75%;height:100%;object-fit:cover;object-position:center center;z-index:1;mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.5) 18%,#000 32%,#000 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.5) 18%,#000 32%,#000 100%);}
.inno-hero-veil{position:absolute;top:0;left:0;width:55%;height:100%;background:linear-gradient(to right,rgba(5,8,20,0.5) 30%,transparent 100%);z-index:2;pointer-events:none;}
.inno-hero-content{position:relative;z-index:3;padding:80px 60px;width:42%;min-width:420px;}
.inno-hero-headline{font-size:62px;font-weight:800;line-height:1.0;letter-spacing:-2px;color:#fff;margin-bottom:24px;}
.inno-hero-headline .inno-em{color:#B04DFF;}
.inno-hero-arabic{font-size:17px;line-height:1.9;color:rgba(255,255,255,.88);margin-bottom:14px;direction:rtl;text-align:right;font-weight:400;}
.inno-hero-en{font-size:16px;line-height:1.8;color:rgba(255,255,255,.72);margin-bottom:40px;}
.inno-hero-en .inno-em{color:#B04DFF;font-weight:600;}
.inno-icon-stack{display:flex;flex-direction:column;gap:24px;margin-bottom:40px;}
.inno-icon-block{display:flex;align-items:flex-start;gap:16px;}
.inno-icon-block img{width:52px;height:52px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 0 8px rgba(176,77,255,.5));}
.inno-icon-block-title{font-size:14px;font-weight:700;color:#fff;letter-spacing:.5px;margin-bottom:4px;text-transform:uppercase;}
.inno-icon-block-desc{font-size:13px;color:rgba(255,255,255,.6);line-height:1.6;}
.inno-signature img{height:28px;width:auto;object-fit:contain;opacity:.9;}

/* FEATURE CARDS */
.inno-features-wrap{position:relative;z-index:5;padding:0 60px 80px;}
.inno-features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.inno-feat-card{background:rgba(10,15,35,.7);border:1px solid rgba(120,140,255,.15);border-radius:20px;overflow:hidden;transition:border-color .3s,box-shadow .3s;}
.inno-feat-card:hover{border-color:rgba(176,77,255,.35);box-shadow:0 0 30px rgba(176,77,255,.12);}
.inno-feat-card-img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.inno-feat-card-body{padding:22px 20px 26px;}
.inno-feat-card-title{font-size:15px;font-weight:700;color:#fff;letter-spacing:.3px;margin-bottom:8px;}
.inno-feat-card-desc{font-size:13px;color:rgba(255,255,255,.6);line-height:1.7;}

/* VALUE STRIP */
.inno-value-strip{position:relative;z-index:5;border-top:1px solid rgba(255,255,255,.12);background:rgba(8,10,28,.6);backdrop-filter:blur(10px);padding:50px 60px;}
.inno-value-grid{display:grid;grid-template-columns:repeat(5,1fr);}
.inno-value-col{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 24px;gap:14px;}
.inno-value-col:not(:last-child){border-right:1px solid rgba(255,255,255,.12);}
.inno-value-col img{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(176,77,255,.45));}
.inno-value-col-title{font-size:13px;font-weight:700;color:#fff;letter-spacing:.5px;text-transform:uppercase;line-height:1.4;}

@media(max-width:1200px){.inno-features-grid{grid-template-columns:repeat(2,1fr);}.inno-value-grid{grid-template-columns:repeat(3,1fr);row-gap:32px;}}
@media(max-width:900px){.inno-header{grid-template-columns:1fr 1fr;padding:0 24px;}.inno-header-center{display:none;}.inno-hero-content{width:90%;padding:60px 24px;}.inno-hero-image{width:100%;opacity:.25;}.inno-hero-headline{font-size:42px;}.inno-features-wrap{padding:0 24px 60px;}.inno-features-grid{grid-template-columns:1fr;}.inno-value-strip{padding:40px 24px;}.inno-value-grid{grid-template-columns:repeat(2,1fr);}}



/* Innovation hero image RTL mirror */
[dir="rtl"] .inno-hero-image {
  left: 0;
  right: auto;
  transform: scaleX(-1);
  mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,.5) 18%, #000 32%, #000 100%);
  -webkit-mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,.5) 18%, #000 32%, #000 100%);
}
[dir="rtl"] .inno-hero-content {
  margin-left: auto;
  margin-right: 0;
}


/* ── End of about.css ── */