/* SensiBallVR - Global Styles */
/* Dark Sports-Tech Design: Navy / Purple / Cyan */

:root {
  --navy-deep: #050a1a;
  --navy-dark: #0a1628;
  --navy-mid: #0d1f3c;
  --navy-light: #1a3056;
  --purple-dark: #1e0a4a;
  --purple-mid: #4a1e9e;
  --purple-bright: #7c3aed;
  --purple-glow: #9d5cf5;
  --cyan-dark: #0891b2;
  --cyan-mid: #06b6d4;
  --cyan-bright: #22d3ee;
  --cyan-glow: #67e8f9;
  --white: #ffffff;
  --white-80: rgba(255, 255, 255, 0.8);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-10: rgba(255, 255, 255, 0.08);
  --gradient-brand: linear-gradient(135deg, #4a1e9e 0%, #0891b2 100%);
  --gradient-hero: linear-gradient(135deg, #050a1a 0%, #1e0a4a 50%, #050a1a 100%);
  --gradient-card: linear-gradient(135deg, rgba(74, 30, 158, 0.15) 0%, rgba(8, 145, 178, 0.15) 100%);
  --font-main: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter', system-ui, sans-serif;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-glow: 0 0 40px rgba(124, 58, 237, 0.3);
  --shadow-cyan: 0 0 40px rgba(6, 182, 212, 0.25);
  --border-subtle: 1px solid rgba(255, 255, 255, 0.08);
  --border-glow: 1px solid rgba(124, 58, 237, 0.4);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
}

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

html { scroll-behavior: smooth; font-size: 16px; }

body {
  background-color: var(--navy-deep);
  color: var(--white);
  font-family: var(--font-main);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--navy-dark); }
::-webkit-scrollbar-thumb { background: var(--purple-mid); border-radius: 3px; }

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
h4 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
p { color: var(--white-80); font-size: 1rem; line-height: 1.7; }
a { text-decoration: none; color: inherit; transition: var(--transition); }
img { max-width: 100%; display: block; }

/* === UTILITY === */
.container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; }
.container-sm { max-width: 900px; margin: 0 auto; padding: 0 2rem; }
.text-gradient { background: var(--gradient-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.text-cyan { color: var(--cyan-bright); }
.text-purple { color: var(--purple-glow); }
.text-muted { color: var(--white-60); }
.tag { display: inline-block; padding: 0.3rem 0.9rem; border-radius: 100px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid rgba(6, 182, 212, 0.4); color: var(--cyan-bright); background: rgba(6, 182, 212, 0.08); }

/* === BUTTONS === */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 2rem; border-radius: var(--radius-md); font-weight: 600; font-size: 0.95rem; cursor: pointer; border: none; transition: var(--transition); letter-spacing: 0.01em; }
.btn-primary { background: var(--gradient-brand); color: white; box-shadow: var(--shadow-glow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 60px rgba(124, 58, 237, 0.5); }
.btn-outline { background: transparent; color: var(--cyan-bright); border: 1px solid var(--cyan-mid); }
.btn-outline:hover { background: rgba(6, 182, 212, 0.1); transform: translateY(-2px); }
.btn-ghost { background: var(--white-10); color: var(--white); border: var(--border-subtle); }
.btn-ghost:hover { background: var(--white-20); }

/* === LEGACY NAV REMOVED — see navbar.css === */
/* Footer logo */
.footer-logo-link { display: inline-block; margin-bottom: 1rem; }
.footer-logo-img {
  height: 52px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(74, 30, 158, 0.2));
  transition: opacity 0.2s ease;
}
.footer-logo-link:hover .footer-logo-img { opacity: 0.85; }

/* === FULL-SCREEN HERO (bleed under transparent navbar) === */
.hero-full {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* Changed from overflow:hidden → overflow:clip so the section still
     clips bg elements but does NOT create a stacking context that could
     trap hero children and let them paint over the fixed navbar. */
  overflow: clip;
  background: linear-gradient(135deg, #050a1a 0%, #1e0a4a 50%, #050a1a 100%);
  /* Extend up behind the fixed transparent navbar */
  margin-top: calc(-1 * var(--snb-height, 76px));
  padding-top: var(--snb-height, 76px);
  /* Explicit low z-index keeps the whole hero section below the navbar */
  z-index: 0;
}

/* ── Hero background video ───────────────────────────────────────
   Served from /static/ → excluded from _worker.js bundle by _routes.json
   preload="none" → no blocking on page load
   ─────────────────────────────────────────────────────────────── */
.hero-bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-bg-video__el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.20;
  filter: blur(1.5px) saturate(0.65);
  transform: scale(1.04); /* hide blur edges */
  will-change: opacity;
}
.hero-bg-video__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(5,10,26,0.60) 0%,
      rgba(5,10,26,0.20) 45%,
      rgba(5,10,26,0.72) 100%),
    linear-gradient(90deg,
      rgba(5,10,26,0.55) 0%,
      transparent 55%);
  pointer-events: none;
}
/* Accessibility: respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-video__el { display: none; }
}

/* === PAGE HERO === */
.page-hero {
  min-height: 60vh;
  display: flex; align-items: center;
  padding: 8rem 2rem 4rem;
  position: relative; overflow: hidden;
  background: var(--gradient-hero);
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(74, 30, 158, 0.25) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero-content { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; width: 100%; }
.page-hero h1 { margin-bottom: 1rem; }
.page-hero p { font-size: 1.1rem; max-width: 600px; color: var(--white-80); margin-bottom: 2rem; }

/* === SECTION STYLES === */
.section { padding: 6rem 2rem; position: relative; }
.section-dark { background: var(--navy-deep); }
.section-mid { background: var(--navy-dark); }
.section-accent { background: linear-gradient(135deg, var(--navy-dark) 0%, rgba(30, 10, 74, 0.4) 100%); }
.section-header { text-align: center; margin-bottom: 4rem; }
.section-header h2 { margin-bottom: 1rem; }
.section-header p { max-width: 600px; margin: 0 auto; color: var(--white-60); font-size: 1.05rem; }
.section-divider { width: 60px; height: 3px; background: var(--gradient-brand); border-radius: 2px; margin: 1.5rem auto; }

/* === GRID LAYOUTS === */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }

/* === CARDS === */
.card {
  background: var(--gradient-card);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: var(--transition);
  position: relative; overflow: hidden;
}
.card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--gradient-brand); opacity: 0; transition: var(--transition); }
.card:hover { border-color: rgba(124, 58, 237, 0.4); transform: translateY(-4px); box-shadow: var(--shadow-glow); }
.card .card-icon { width: 52px; height: 52px; border-radius: var(--radius-sm); background: var(--gradient-brand); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1.25rem; }
.card h3 { font-size: 1.2rem; margin-bottom: 0.75rem; }
.card p { font-size: 0.9rem; color: var(--white-60); line-height: 1.6; }

/* === MEDIA PLACEHOLDER === */
.media-placeholder {
  width: 100%; aspect-ratio: 16/9;
  background: linear-gradient(135deg, rgba(74, 30, 158, 0.2) 0%, rgba(8, 145, 178, 0.2) 100%);
  border: var(--border-subtle); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.75rem; color: var(--white-60); position: relative; overflow: hidden;
}
.media-placeholder::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(255,255,255,0.02) 40px, rgba(255,255,255,0.02) 80px);
}
.media-placeholder .placeholder-icon { font-size: 3rem; opacity: 0.4; position: relative; z-index: 1; }
.media-placeholder .placeholder-text { font-size: 0.85rem; font-weight: 500; opacity: 0.5; position: relative; z-index: 1; }
.media-placeholder .upload-hint { font-size: 0.75rem; opacity: 0.35; position: relative; z-index: 1; }
.media-placeholder img, .media-placeholder video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); z-index: 2; }

/* === BREADCRUMB === */
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--white-60); margin-bottom: 1.5rem; }
.breadcrumb a { color: var(--cyan-bright); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { opacity: 0.4; }

/* === FOOTER === */
.footer { background: var(--navy-dark); border-top: var(--border-subtle); padding: 4rem 2rem 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 3rem; max-width: 1400px; margin: 0 auto; padding-bottom: 3rem; border-bottom: var(--border-subtle); }
.footer-brand h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: 0.75rem; }
.footer-brand p { font-size: 0.875rem; color: var(--white-60); max-width: 240px; line-height: 1.6; }
.footer-social { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.footer-social a { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--white-10); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: var(--white-80); transition: var(--transition); border: var(--border-subtle); }
.footer-social a:hover { background: var(--gradient-brand); color: white; border-color: transparent; }
.footer-col h4 { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white-60); margin-bottom: 1.25rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col ul a { font-size: 0.875rem; color: var(--white-60); transition: var(--transition); }
.footer-col ul a:hover { color: var(--cyan-bright); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 2rem; max-width: 1400px; margin: 0 auto; }
.footer-bottom p { font-size: 0.8rem; color: var(--white-60); }
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-bottom-links a { font-size: 0.8rem; color: var(--white-60); transition: var(--transition); }
.footer-bottom-links a:hover { color: var(--cyan-bright); }

/* === TWO-COLUMN CONTENT BLOCK === */
.content-split { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; max-width: 1400px; margin: 0 auto; }
.content-split.reverse { direction: rtl; }
.content-split.reverse > * { direction: ltr; }
.content-split-text { }
.content-split-text .tag { margin-bottom: 1.25rem; }
.content-split-text h2 { margin-bottom: 1rem; }
.content-split-text p { margin-bottom: 2rem; color: var(--white-60); }
.content-split-visual { }

/* === NUMBER STATS === */
.stat-block { text-align: center; padding: 1.5rem; }
.stat-block .stat-num { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; background: var(--gradient-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
.stat-block .stat-label { font-size: 0.85rem; color: var(--white-60); margin-top: 0.5rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }

/* === GLOWING LINES === */
.glow-line { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--purple-glow), var(--cyan-bright), transparent); opacity: 0.3; margin: 2rem 0; }

/* === ALERT/PLACEHOLDER BOXES === */
.placeholder-section {
  min-height: 300px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px dashed rgba(255,255,255,0.15); border-radius: var(--radius-lg);
  text-align: center; padding: 3rem;
  background: rgba(255,255,255,0.02);
}
.placeholder-section .ps-icon { font-size: 2.5rem; opacity: 0.3; margin-bottom: 1rem; }
.placeholder-section h3 { font-size: 1rem; font-weight: 500; color: var(--white-60); }
.placeholder-section p { font-size: 0.8rem; color: var(--white-40, rgba(255,255,255,0.4)); margin-top: 0.5rem; }

/* === OLD MOBILE MENU REMOVED — see navbar.css === */

/* === PAGE TRANSITIONS === */
.page-transition { animation: fadeSlideIn 0.4s ease; }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.85); } }

/* === RESPONSIVE === */
@media (max-width: 1200px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 900px) {
  .grid-2, .grid-3, .content-split { grid-template-columns: 1fr; }
  .content-split { gap: 3rem; }
  .content-split.reverse { direction: ltr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1/-1; }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
}
@media (max-width: 600px) {
  .section { padding: 4rem 1.25rem; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.8rem; }
}

/* ============================================================
   SCROLL REVEAL SYSTEM
   Base + variants — premium cubic-bezier easing
   ============================================================ */

/* Base: fade + slide up */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity  0.70s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.70s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variant: slide from left */
.reveal--left {
  transform: translateX(-28px) translateY(0);
}
.reveal--left.visible {
  transform: translateX(0) translateY(0);
}

/* Variant: slide from right */
.reveal--right {
  transform: translateX(28px) translateY(0);
}
.reveal--right.visible {
  transform: translateX(0) translateY(0);
}

/* Variant: scale up (for badges, icons, pills) */
.reveal--scale {
  transform: scale(0.90) translateY(10px);
}
.reveal--scale.visible {
  transform: scale(1) translateY(0);
}

/* Slightly faster for small UI chips */
.reveal--fast {
  transition-duration: 0.50s;
}

/* Reduce motion — respect system preference */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale {
    transition-duration: 0.01ms !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* === ADMIN BADGE === */
.admin-edit-badge {
  position: absolute; top: 8px; right: 8px;
  background: var(--gradient-brand); color: white;
  font-size: 0.65rem; padding: 0.2rem 0.6rem; border-radius: 100px;
  font-weight: 700; letter-spacing: 0.05em; cursor: pointer;
  z-index: 10; opacity: 0; transition: var(--transition);
}
.admin-mode .card:hover .admin-edit-badge,
.admin-mode .section:hover .admin-edit-badge { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE HERO  — premium split layout
   .hero-split  /  .hero-text  /  .hero-visual  /  .hv-*
═══════════════════════════════════════════════════════════════ */

/* ── Split layout override on .hero-full ──────────────────────── */
.hero-split {
  /* Override the centred flex from .hero-full */
  align-items: stretch;
  justify-content: flex-start;
  padding-bottom: 0;
}

/* Subtle dot-grid background */
.hero-bg-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 80%);
  will-change: transform;
}

/* Radial purple glow behind content */
.hero-bg-radial {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  will-change: transform;
  background:
    radial-gradient(ellipse 70% 90% at 30% 60%, rgba(74,30,158,0.28) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 75% 40%, rgba(8,145,178,0.14) 0%, transparent 65%);
}

/* Side ambient glows */
.hero-bg-glow-left {
  position: absolute; left: -200px; top: 50%; transform: translateY(-50%);
  width: 500px; height: 500px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(155,61,232,0.12) 0%, transparent 70%);
  filter: blur(40px);
  will-change: transform;
}
.hero-bg-glow-right {
  position: absolute; right: -150px; bottom: 0;
  width: 600px; height: 600px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(0,200,232,0.09) 0%, transparent 70%);
  filter: blur(50px);
  will-change: transform;
}


/* ── Inner wrapper ────────────────────────────────────────────── */
.hero-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  width: 100%;
  padding-top: 3rem;
  padding-bottom: 4rem;
  /* Ensure hero content never climbs above the fixed navbar (z-index 9000) */
  isolation: auto;
}

/* ── LEFT: text block ─────────────────────────────────────────── */
.hero-text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 580px;
}

/* Eyebrow */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 1rem;
  border-radius: 100px;
  background: rgba(0, 200, 232, 0.07);
  border: 1px solid rgba(0, 200, 232, 0.3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00c8e8;
  width: fit-content;
}
.hero-eyebrow__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #00c8e8;
  box-shadow: 0 0 8px rgba(0,200,232,0.8);
  animation: heroPulse 2.2s ease infinite;
}
@keyframes heroPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.5); opacity: 0.5; }
}

/* Headline */
.hero-headline {
  font-size: clamp(2.4rem, 3.8vw, 3.8rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
}
.hero-headline__gradient {
  background: linear-gradient(135deg, #9b3de8 0%, #00c8e8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  margin-top: 0.15em;
}

/* Sub-headline */
.hero-subheadline {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Body copy */
.hero-body {
  font-size: 0.975rem;
  color: rgba(255,255,255,0.52);
  line-height: 1.72;
  max-width: 500px;
  margin: 0;
  font-weight: 400;
}

/* CTAs */
.hero-ctas {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.hero-btn-primary {
  padding: 0.9rem 2rem;
  font-size: 0.925rem;
  gap: 0.6rem;
  letter-spacing: 0.005em;
  box-shadow: 0 0 32px rgba(74,30,158,0.45), 0 4px 16px rgba(0,0,0,0.3);
}
.hero-btn-primary:hover {
  box-shadow: 0 0 52px rgba(155,61,232,0.55), 0 6px 24px rgba(0,0,0,0.35);
}
.hero-btn-primary svg { transition: transform 0.25s ease; }
.hero-btn-primary:hover svg { transform: translateX(4px); }

.hero-btn-outline {
  padding: 0.9rem 2rem;
  font-size: 0.925rem;
  letter-spacing: 0.005em;
  border-color: rgba(0,200,232,0.45);
  color: rgba(255,255,255,0.82);
}
.hero-btn-outline:hover {
  background: rgba(0,200,232,0.08);
  border-color: rgba(0,200,232,0.7);
  color: #fff;
}

/* Trust micro-row */
.hero-trust {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: 0.25rem;
}
.hero-trust__item { display: flex; flex-direction: column; gap: 0.2rem; }
.hero-trust__val {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #9b3de8 0%, #00c8e8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.hero-trust__label {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
}
.hero-trust__sep {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}

/* ── RIGHT: visual panel ──────────────────────────────────────── */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Allow floating badge children to overflow visually without
     creating a new stacking context that escapes the hero layer */
  overflow: visible;
  /* Clamp visual column so it never reaches the navbar height area */
  max-height: calc(100vh - var(--snb-height, 76px) - 2rem);
}

/* Outer card frame */
.hv-card {
  width: 100%;
  max-width: 460px;
  background: rgba(10, 14, 35, 0.82);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  /* overflow:visible so floating badges (.hv-badge--tr/bl) are not clipped,
     but the card itself keeps z-index low — always below navbar */
  overflow: visible;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 0 0 1px rgba(0,200,232,0.08),
    0 24px 80px rgba(0,0,0,0.55),
    0 0 60px rgba(74,30,158,0.15);
  position: relative;
  z-index: 1;
  /* Entrance animation */
  animation: hvCardIn 0.9s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay: 0.35s;
}
@keyframes hvCardIn {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Top accent line */
.hv-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(155,61,232,0.7) 35%, rgba(0,200,232,0.7) 65%, transparent 100%);
}

/* Card header */
.hv-card__header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.hv-card__dots {
  display: flex; gap: 5px; margin-right: 0.25rem;
}
.hv-card__dots span {
  width: 8px; height: 8px; border-radius: 50%;
}
.hv-card__dots span:nth-child(1) { background: rgba(255,90,90,0.6); }
.hv-card__dots span:nth-child(2) { background: rgba(255,195,0,0.6); }
.hv-card__dots span:nth-child(3) { background: rgba(0,200,100,0.6); }

.hv-card__title {
  flex: 1;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.hv-card__live {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: #00c8e8;
}
.hv-card__live-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #00c8e8;
  box-shadow: 0 0 6px rgba(0,200,232,0.9);
  animation: heroPulse 1.8s ease infinite;
}

/* ── Card header subtitle ───────────────────────────────────── */
.hv-card__title-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.hv-card__subtitle {
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
}

/* ── Radar chart wrapper ─────────────────────────────────────── */
.hv-radar-wrap {
  padding: 0.25rem 0.75rem 0;
  display: flex; justify-content: center;
}
.hv-radar {
  width: 100%; max-width: 340px; height: auto;
  overflow: visible;
}

/* Radar data polygon — JS animates opacity from 0→1 */
#hv-data-poly {
  transition: opacity 0.6s ease;
}
#hv-data-poly.is-drawn {
  opacity: 1 !important;
  animation: radarPulse 5s ease-in-out 0.8s infinite;
}
@keyframes radarPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.8; }
}

/* Label groups — JS fades in after draw */
.hv-radar__label-g { transition: opacity 0.4s ease; }
.hv-radar__label-g.is-visible { opacity: 1 !important; }

/* Score tick dots */
.hv-tick { opacity: 0; transition: opacity 0.3s ease; }
.hv-tick.is-visible { opacity: 1; }

/* Radar data nodes — JS drives opacity + continuous pulse after */
.hv-radar__node {
  transition: opacity 0.3s ease;
}
.hv-radar__node.is-visible {
  opacity: 1 !important;
  animation: nodePulse 3s ease-in-out infinite;
}
@keyframes nodePulse {
  0%, 100% { opacity: 1;   r: 3.5; }
  50%       { opacity: 0.6; r: 4.8; }
}

/* ── Progress bars ───────────────────────────────────────────── */
.hv-bars {
  padding: 0 1.1rem 0.75rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.hv-bar {}
.hv-bar__meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 0.28rem;
}
.hv-bar__label {
  font-size: 0.72rem; font-weight: 500;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
}
.hv-bar__val {
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}
.hv-bar__pct { font-size: 0.6rem; opacity: 0.7; }

.hv-bar__track {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.hv-bar__fill {
  height: 100%;
  border-radius: 2px;
  width: 0; /* animated in by JS */
  transition: width 1.2s cubic-bezier(0.22,1,0.36,1);
}

/* ── Status row ──────────────────────────────────────────────── */
.hv-status {
  display: flex; gap: 0; border-top: 1px solid rgba(255,255,255,0.06);
}
.hv-status__item {
  flex: 1;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  font-size: 0.68rem; font-weight: 500;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.03em;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.hv-status__item:last-child { border-right: none; }
.hv-status__icon { font-size: 0.85rem; }

/* ── Floating badges ─────────────────────────────────────────── */
.hv-badge {
  position: absolute;
  background: rgba(8, 12, 30, 0.92);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 0.65rem 0.9rem;
  display: flex; align-items: center; gap: 0.55rem;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  font-size: 0.68rem; font-weight: 600;
  color: rgba(255,255,255,0.75);
  line-height: 1.35;
  white-space: nowrap;
  animation: hvBadgeIn 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
.hv-badge i { font-size: 1rem; }

.hv-badge--tr {
  top: -16px; right: -20px;
  border-color: rgba(155,61,232,0.3);
  box-shadow: 0 0 20px rgba(155,61,232,0.2), 0 8px 32px rgba(0,0,0,0.4);
  animation-delay: 0.7s;
}
.hv-badge--tr i { color: #9b3de8; }

.hv-badge--bl {
  bottom: 10px; left: -20px;
  border-color: rgba(0,200,232,0.3);
  box-shadow: 0 0 20px rgba(0,200,232,0.18), 0 8px 32px rgba(0,0,0,0.4);
  animation-delay: 0.85s;
}
.hv-badge--bl i { color: #00c8e8; }

@keyframes hvBadgeIn {
  from { opacity: 0; transform: translateY(12px) scale(0.93); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Badge float animation */
.hv-badge--tr { animation: hvBadgeIn 0.7s cubic-bezier(0.22,1,0.36,1) 0.7s both, hvFloat 5s ease-in-out 1.5s infinite; }
.hv-badge--bl { animation: hvBadgeIn 0.7s cubic-bezier(0.22,1,0.36,1) 0.85s both, hvFloat 5.5s ease-in-out 1.8s infinite alternate; }
@keyframes hvFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* ── Scroll hint ─────────────────────────────────────────────── */
.hero-scroll-hint {
  position: absolute; bottom: 1.75rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  opacity: 0;
  animation: hintIn 0.6s ease 1.6s forwards;
}
@keyframes hintIn { to { opacity: 1; } }
.hero-scroll-hint__line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, rgba(0,200,232,0.6), transparent);
  animation: scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}
.hero-scroll-hint span {
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: rgba(255,255,255,0.25);
}

/* ── Hero text entrance animations ──────────────────────────── */
.hero-eyebrow,
.hero-headline,
.hero-subheadline,
.hero-body,
.hero-ctas,
.hero-trust {
  opacity: 0;
  transform: translateY(22px);
  animation: heroTextIn 0.65s cubic-bezier(0.22,1,0.36,1) both;
}
.hero-eyebrow     { animation-delay: 0.05s; }
.hero-headline    { animation-delay: 0.15s; }
.hero-subheadline { animation-delay: 0.25s; }
.hero-body        { animation-delay: 0.32s; }
.hero-ctas        { animation-delay: 0.42s; }
.hero-trust       { animation-delay: 0.52s; }

@keyframes heroTextIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero-inner { gap: 3rem; }
  .hv-badge--tr { right: -10px; }
  .hv-badge--bl { left: -10px; }
}

@media (max-width: 900px) {
  .hero-split { align-items: center; }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-bottom: 5rem;
  }
  .hero-text { max-width: 100%; }
  .hero-visual { justify-content: center; }
  .hv-card { max-width: 420px; }
  .hv-badge--tr { top: -12px; right: 0; }
  .hv-badge--bl { bottom: -8px; left: 0; }
}

@media (max-width: 600px) {
  .hero-inner { padding-top: 2rem; padding-bottom: 4rem; }
  .hero-headline { font-size: 2.2rem; }
  .hero-ctas { flex-direction: column; align-items: flex-start; }
  .hero-btn-primary, .hero-btn-outline { width: 100%; justify-content: center; }
  .hero-trust { flex-wrap: wrap; gap: 1rem; }
  .hero-trust__sep { display: none; }
  .hv-badge { display: none; }
  .hv-bars { gap: 0.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   FEATURE HIGHLIGHTS STRIP  —  three pillars below the hero
   .hero-highlights  /  .hh-grid  /  .hh-item
═══════════════════════════════════════════════════════════════ */
.hero-highlights {
  background: rgba(10, 16, 34, 0.95);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0;
  position: relative;
  z-index: 2;
  /* Subtle gradient line at top */
}
.hero-highlights::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(155,61,232,0.5) 30%,
    rgba(0,200,232,0.5) 70%,
    transparent 100%);
}

.hh-grid {
  display: flex;
  align-items: stretch;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Separator between items */
.hh-sep {
  width: 1px;
  background: rgba(255,255,255,0.07);
  align-self: stretch;
  flex-shrink: 0;
  margin: 0;
}

/* Each highlight item */
.hh-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 2rem;
  position: relative;
  cursor: default;
  transition: background 0.25s ease;
}
.hh-item:hover {
  background: rgba(255,255,255,0.025);
}
.hh-item:hover .hh-icon {
  color: #00c8e8;
  filter: drop-shadow(0 0 8px rgba(0,200,232,0.55));
}

/* Stagger delays for hero-highlights items */
.hh-item:nth-child(1) { transition-delay: 0.00s; }
.hh-item:nth-child(3) { transition-delay: 0.12s; }
.hh-item:nth-child(5) { transition-delay: 0.24s; }

/* Icon */
.hh-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(0,200,232,0.75);
  transition: color 0.25s ease, filter 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.hh-item:hover .hh-icon {
  background: rgba(0,200,232,0.06);
  border-color: rgba(0,200,232,0.25);
}

/* Text */
.hh-text { display: flex; flex-direction: column; gap: 0.2rem; }

.hh-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255,255,255,0.80);
  letter-spacing: -0.01em;
  line-height: 1.3;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 900px) {
  .hh-grid { flex-direction: column; }
  .hh-sep { width: auto; height: 1px; margin: 0; align-self: auto; }
  .hh-item { padding: 1.1rem 1.5rem; }
  .hh-label { white-space: normal; }
}
@media (max-width: 600px) {
  .hh-grid { padding: 0 1.25rem; }
  .hh-item { padding: 1rem 0.5rem; gap: 0.75rem; }
  .hh-icon { width: 34px; height: 34px; }
  .hh-label { font-size: 0.82rem; }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION — Football is a Game of Milliseconds
   .ms-section / .ms-stage / .ms-flow / .ms-callout
═══════════════════════════════════════════════════════════════ */

/* ── Section shell ───────────────────────────────────────────── */
.ms-section {
  position: relative;
  padding: 7rem 2rem 6rem;
  background: #050a1a;
  overflow: hidden;
}

/* Subtle dot-grid overlay */
.ms-bg-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 100% 80% at 50% 50%, black 20%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 50%, black 20%, transparent 85%);
}

/* Deep purple ambient glow */
.ms-bg-glow {
  position: absolute;
  top: -100px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 500px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(74,30,158,0.18) 0%, transparent 70%);
  pointer-events: none; z-index: 0; filter: blur(30px);
}

/* ── Section header ──────────────────────────────────────────── */
.ms-header {
  position: relative; z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 5rem;
}
.ms-tag { margin-bottom: 1.5rem; }

.ms-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 1.25rem;
  color: #fff;
}
.ms-title__accent {
  background: linear-gradient(135deg, #9b3de8 0%, #00c8e8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ms-subtitle {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  font-weight: 400;
  max-width: 540px;
  margin: 0 auto;
}

/* ── Three-stage flow row ────────────────────────────────────── */
.ms-flow {
  position: relative; z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 0;
  max-width: 1100px;
  margin: 0 auto 3.5rem;
}

/* Connector arrows */
.ms-connector {
  flex-shrink: 0;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 3.8rem; /* align with stage content */
  opacity: 0.7;
}
.ms-connector__svg {
  width: 60px;
  height: 24px;
  overflow: visible;
}

/* ── Single stage card ───────────────────────────────────────── */
.ms-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: rgba(10, 14, 35, 0.7);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  padding: 1.75rem 1.75rem 1.9rem;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.ms-stage::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ms-stage[data-stage="1"]::before { background: linear-gradient(90deg, transparent, #9b3de8, transparent); }
.ms-stage[data-stage="2"]::before { background: linear-gradient(90deg, transparent, #6b5bf0, transparent); }
.ms-stage[data-stage="3"]::before { background: linear-gradient(90deg, transparent, #00c8e8, transparent); }

.ms-stage:hover {
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,200,232,0.08);
  transform: translateY(-4px);
}
.ms-stage:hover::before { opacity: 1; }

/* Stage head: number + icon row */
.ms-stage__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.ms-stage__num {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.2);
  text-transform: uppercase;
  font-family: 'Inter', monospace;
}

/* Stage icon circle */
.ms-stage__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(155,61,232,0.1);
  border: 1px solid rgba(155,61,232,0.2);
  color: #9b3de8;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  flex-shrink: 0;
}
.ms-stage__icon--decision {
  background: rgba(107,91,240,0.1);
  border-color: rgba(107,91,240,0.2);
  color: #7c6ff0;
}
.ms-stage__icon--motor {
  background: rgba(0,200,232,0.08);
  border-color: rgba(0,200,232,0.2);
  color: #00c8e8;
}
.ms-stage:hover .ms-stage__icon     { background: rgba(155,61,232,0.18); border-color: rgba(155,61,232,0.4); }
.ms-stage:hover .ms-stage__icon--decision { background: rgba(107,91,240,0.18); border-color: rgba(107,91,240,0.4); }
.ms-stage:hover .ms-stage__icon--motor  { background: rgba(0,200,232,0.15); border-color: rgba(0,200,232,0.4); }

/* Stage name */
.ms-stage__name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
}

/* Time display */
.ms-stage__time {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}
.ms-stage__ms {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(135deg, #9b3de8, #00c8e8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ms-stage[data-stage="2"] .ms-stage__ms {
  background: linear-gradient(135deg, #7c6ff0, #00c8e8);
  -webkit-background-clip: text;
  background-clip: text;
}
.ms-stage[data-stage="3"] .ms-stage__ms {
  background: linear-gradient(135deg, #00c8e8, #67e8f9);
  -webkit-background-clip: text;
  background-clip: text;
}
.ms-stage__unit {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Animated duration bar */
.ms-stage__bar-wrap {
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  margin-bottom: 1.1rem;
  overflow: hidden;
}
.ms-stage__bar {
  height: 100%;
  width: 0;
  border-radius: 2px;
  transition: width 1.1s cubic-bezier(0.22,1,0.36,1);
}
.ms-stage__bar--1 { background: linear-gradient(90deg, #9b3de8aa, #9b3de8); }
.ms-stage__bar--2 { background: linear-gradient(90deg, #7c6ff0aa, #7c6ff0); }
.ms-stage__bar--3 { background: linear-gradient(90deg, #00c8e8aa, #00c8e8); }

/* Stage description */
.ms-stage__desc {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.48);
  line-height: 1.65;
  font-weight: 400;
  margin: 0;
}

/* ── Total timeline bar ──────────────────────────────────────── */
.ms-timeline {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto 4rem;
  padding: 0 0.25rem;
}
.ms-timeline__label {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  width: 120px;
  line-height: 1.4;
}
.ms-timeline__track {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  gap: 2px;
}
.ms-timeline__seg {
  height: 100%;
  width: 0;
  border-radius: 2px;
  transition: width 1.2s cubic-bezier(0.22,1,0.36,1);
}
.ms-timeline__seg--1 { background: #9b3de8; }
.ms-timeline__seg--2 { background: #7c6ff0; }
.ms-timeline__seg--3 { background: #00c8e8; }
.ms-timeline__total {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.02em;
}

/* ── Bottom callout statement ────────────────────────────────── */
.ms-callout {
  position: relative; z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
}
.ms-callout__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.6rem 2rem;
  background: rgba(10, 14, 35, 0.8);
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 3px solid;
  border-image: linear-gradient(180deg, #9b3de8, #00c8e8) 1;
  border-radius: 0 14px 14px 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}
.ms-callout__inner::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(155,61,232,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.ms-callout__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(155,61,232,0.12);
  border: 1px solid rgba(155,61,232,0.25);
  display: flex; align-items: center; justify-content: center;
  color: #9b3de8;
}
.ms-callout__text {
  font-size: 1rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.65;
  font-weight: 400;
  margin: 0;
}
.ms-callout__highlight {
  font-weight: 700;
  font-style: normal;
  background: linear-gradient(135deg, #9b3de8, #00c8e8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 960px) {
  .ms-flow { flex-direction: column; align-items: stretch; }
  .ms-connector {
    width: auto; padding-top: 0;
    transform: rotate(90deg);
    height: 40px; align-self: center;
  }
  .ms-timeline { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .ms-timeline__label { width: auto; }
  .ms-timeline__track { width: 100%; }
  .ms-callout__inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
}
@media (max-width: 640px) {
  .ms-section { padding: 5rem 1.25rem 4.5rem; }
  .ms-header  { margin-bottom: 3.5rem; }
  .ms-stage__ms { font-size: 1.5rem; }
  .ms-callout__inner { padding: 1.25rem; }
  .ms-callout__text { font-size: 0.925rem; }
}

/* ── Milliseconds section: staggered card reveal ───────────── */
/* Stage cards start invisible (handled by base .reveal class)  */
/* Add per-card transition delay so they animate in sequence    */
.ms-stage[data-stage="1"].reveal { transition-delay: 0s; }
.ms-stage[data-stage="2"].reveal { transition-delay: 0.13s; }
.ms-stage[data-stage="3"].reveal { transition-delay: 0.26s; }

/* Slightly tighter gap between connector and stages on large screens */
@media (min-width: 961px) {
  .ms-flow { gap: 0; }
  .ms-connector { min-width: 48px; max-width: 60px; }
}

/* Timeline label uppercase treatment */
.ms-timeline__label {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,0.3);
}

/* Callout: stronger left border glow */
.ms-callout__inner {
  box-shadow: inset 3px 0 0 rgba(155,61,232,0.45),
              0 4px 32px rgba(0,0,0,0.3);
}

/* Separator glow-line between hero-highlights and ms-section */
.hero-highlights + .ms-section::before {
  content: '';
  display: block;
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: min(600px, 80%);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(155,61,232,0.35) 30%,
    rgba(0,200,232,0.35) 70%,
    transparent 100%
  );
}

/* ============================================================
   MS-SECTION VIDEO ROW  —  .ms-video-*
   Scanning drill side-by-side: text left, video right
   ============================================================ */
.ms-video-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-top: 3.5rem;
  padding: 2.5rem 2rem;
  background: rgba(7,12,28,0.6);
  border: 1px solid rgba(96,165,250,0.12);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.ms-video-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 70% 50%, rgba(96,165,250,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.ms-video-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #60a5fa;
  margin-bottom: 0.6rem;
}
.ms-video-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 0.85rem;
  letter-spacing: -0.02em;
}
.ms-video-desc {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.52);
  line-height: 1.7;
  margin-bottom: 1.2rem;
}
.ms-video-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.ms-video-tag {
  font-size: 0.72rem;
  font-weight: 600;
  color: #60a5fa;
  background: rgba(96,165,250,0.08);
  border: 1px solid rgba(96,165,250,0.2);
  border-radius: 20px;
  padding: 0.25rem 0.7rem;
  letter-spacing: 0.02em;
}

/* Video frame */
.ms-video-frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(96,165,250,0.22);
  box-shadow: 0 0 40px rgba(96,165,250,0.12), 0 16px 48px rgba(0,0,0,0.5);
}
.ms-video-player {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 14px;
}
.ms-video-glow {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(96,165,250,0.15) 0%, transparent 70%);
}
.ms-video-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #60a5fa;
  background: rgba(7,12,28,0.82);
  border: 1px solid rgba(96,165,250,0.3);
  border-radius: 20px;
  padding: 0.3rem 0.7rem;
  backdrop-filter: blur(8px);
}
.ms-video-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #60a5fa;
  box-shadow: 0 0 6px #60a5fa;
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Responsive */
@media (max-width: 860px) {
  .ms-video-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.75rem 1.25rem;
    margin-top: 2.5rem;
  }
  .ms-video-title { font-size: 1.3rem; }
}
@media (max-width: 560px) {
  .ms-video-row { padding: 1.25rem 1rem; margin-top: 2rem; }
  .ms-video-title { font-size: 1.15rem; }
}

/* ── Scanning drill block (centered, full-width 16:9 embed) ── */
.ms-drill-block {
  margin-top: 3.5rem;
  padding: 2.5rem 2rem 2.75rem;
  background: rgba(7,12,28,0.6);
  border: 1px solid rgba(96,165,250,0.15);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}
.ms-drill-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(96,165,250,0.07) 0%, transparent 70%);
  pointer-events: none;
}

/* Header */
.ms-drill-header {
  text-align: center;
}
.ms-drill-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-top: 0.5rem;
}

/* 16:9 iframe wrapper — fills block width, max 900px */
.ms-drill-frame {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(96,165,250,0.30);
  box-shadow:
    0 0 50px rgba(96,165,250,0.18),
    0 0 18px rgba(96,165,250,0.12),
    0 20px 56px rgba(0,0,0,0.55);
}
.ms-drill-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 14px;
  display: block;
}
.ms-drill-glow {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse 90% 50% at 50% 100%,
    rgba(96,165,250,0.20) 0%, transparent 70%);
}
.ms-drill-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #60a5fa;
  background: rgba(7,12,28,0.82);
  border: 1px solid rgba(96,165,250,0.3);
  border-radius: 20px;
  padding: 0.3rem 0.7rem;
  backdrop-filter: blur(8px);
}
.ms-drill-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #60a5fa;
  box-shadow: 0 0 8px rgba(96,165,250,1), 0 0 16px rgba(96,165,250,0.60);
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Description + tags */
.ms-drill-body {
  text-align: center;
  max-width: 700px;
}
.ms-video-tags--center {
  justify-content: center;
}

/* Responsive */
@media (max-width: 860px) {
  .ms-drill-block { padding: 1.75rem 1.25rem 2rem; gap: 1.25rem; margin-top: 2.5rem; }
  .ms-drill-title { font-size: 1.4rem; }
}
@media (max-width: 560px) {
  .ms-drill-block { padding: 1.25rem 1rem 1.5rem; margin-top: 2rem; }
  .ms-drill-title { font-size: 1.2rem; }
}

/* ============================================================
   PLATFORM OVERVIEW SECTION  —  .plat-*
   Three large cards: Cognitive Testing / Training / Development
   ============================================================ */

/* ── Section shell ───────────────────────────────────────── */
.plat-section {
  position: relative;
  padding: 7rem 2rem 6rem;
  background: #0a1628;           /* slightly lighter than hero */
  overflow: hidden;
}

/* Dot-grid overlay */
.plat-bg-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 10%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 10%, transparent 90%);
}

/* Top centre glow */
.plat-bg-glow {
  position: absolute;
  top: -120px; left: 50%; transform: translateX(-50%);
  width: 1000px; height: 500px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(74,30,158,0.14) 0%, transparent 70%);
  pointer-events: none; z-index: 0; filter: blur(40px);
}

/* ── Section header ──────────────────────────────────────── */
.plat-header {
  position: relative; z-index: 1;
  text-align: center;
  max-width: 680px;
  margin: 0 auto 4.5rem;
}
.plat-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 1rem 0 1.25rem;
  color: #fff;
}
.plat-title__accent {
  background: linear-gradient(135deg, #9b3de8 0%, #00c8e8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.plat-subtitle {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.48);
  line-height: 1.65;
  max-width: 520px;
  margin: 0 auto;
}

/* ── Three-card grid ─────────────────────────────────────── */
.plat-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto 4rem;
}

/* ── Single card ─────────────────────────────────────────── */
.plat-card {
  display: flex;
  flex-direction: column;
  background: rgba(8, 12, 30, 0.72);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition:
    border-color 0.35s ease,
    box-shadow   0.35s ease,
    transform    0.35s cubic-bezier(0.22,1,0.36,1);
  cursor: pointer;
}

/* Top accent line */
.plat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.plat-card[data-card="1"]::before { background: linear-gradient(90deg, transparent, #9b3de8, transparent); }
.plat-card[data-card="2"]::before { background: linear-gradient(90deg, transparent, #7c3aed, transparent); }
.plat-card[data-card="3"]::before { background: linear-gradient(90deg, transparent, #00c8e8, transparent); }

/* Hover state */
.plat-card:hover {
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-6px);
}
.plat-card[data-card="1"]:hover { box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(155,61,232,0.12), 0 0 50px rgba(155,61,232,0.07); }
.plat-card[data-card="2"]:hover { box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(124,58,237,0.12), 0 0 50px rgba(124,58,237,0.07); }
.plat-card[data-card="3"]:hover { box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,200,232,0.12), 0 0 50px rgba(0,200,232,0.07); }
.plat-card:hover::before { opacity: 1; }

/* ── Card visual area ────────────────────────────────────── */
.plat-card__visual {
  position: relative;
  width: 100%;
  background: rgba(5, 10, 26, 0.7);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
  transition: background 0.35s ease;
}
.plat-card__visual--testing  { background: rgba(30, 10, 74, 0.35); }
.plat-card__visual--training { background: rgba(13, 31, 60, 0.45); }
.plat-card__visual--analytics{ background: rgba(8, 20, 48, 0.4);  }

.plat-card:hover .plat-card__visual--testing   { background: rgba(40, 14, 90, 0.5); }
.plat-card:hover .plat-card__visual--training  { background: rgba(18, 40, 75, 0.6); }
.plat-card:hover .plat-card__visual--analytics { background: rgba(12, 28, 58, 0.55); }

/* SVG fills the visual block */
.plat-vis {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Animated SVG elements ───────────────────────────────── */

/* Radar polygon: breathe */
.plat-vis__poly {
  animation: platPolyPulse 4s ease-in-out infinite;
}
@keyframes platPolyPulse {
  0%, 100% { opacity: 0.85; }
  50%       { opacity: 1;    }
}

/* Radar nodes: staggered glow */
.plat-vis__node {
  animation: platNodeGlow 3s ease-in-out infinite;
}
.plat-vis__node:nth-child(2)  { animation-delay: -0.4s; }
.plat-vis__node:nth-child(3)  { animation-delay: -0.8s; }
.plat-vis__node:nth-child(4)  { animation-delay: -1.2s; }
.plat-vis__node:nth-child(5)  { animation-delay: -1.6s; }
.plat-vis__node:nth-child(6)  { animation-delay: -2.0s; }
.plat-vis__node:nth-child(7)  { animation-delay: -2.4s; }
.plat-vis__node:nth-child(8)  { animation-delay: -2.8s; }
@keyframes platNodeGlow {
  0%, 100% { r: 3.5; opacity: 0.8; }
  50%       { r: 4.5; opacity: 1;   }
}

/* VR floating dots: float up/down */
.plat-vis__vr-dot {
  animation: vrDotFloat 3s ease-in-out infinite;
}
.plat-vis__vr-dot:nth-child(1) { animation-delay: 0s;    }
.plat-vis__vr-dot:nth-child(2) { animation-delay: -0.6s; }
.plat-vis__vr-dot:nth-child(3) { animation-delay: -1.2s; }
.plat-vis__vr-dot:nth-child(4) { animation-delay: -1.8s; }
.plat-vis__vr-dot:nth-child(5) { animation-delay: -2.4s; }
@keyframes vrDotFloat {
  0%, 100% { transform: translateY(0);   opacity: 0.7; }
  50%       { transform: translateY(-4px); opacity: 1; }
}

/* Analytics line dots */
.plat-vis__dot-line {
  animation: platDotPulse 3.5s ease-in-out infinite;
}
.plat-vis__dot-line:nth-child(2) { animation-delay: -0.5s; }
.plat-vis__dot-line:nth-child(3) { animation-delay: -1.0s; }
.plat-vis__dot-line:nth-child(4) { animation-delay: -1.5s; }
.plat-vis__dot-line:nth-child(5) { animation-delay: -2.0s; }
@keyframes platDotPulse {
  0%, 100% { opacity: 0.75; }
  50%       { opacity: 1;    }
}

/* Analytics primary line: subtle draw-in shimmer on hover */
.plat-card:hover .plat-vis__line {
  stroke-width: 2.5;
  filter: drop-shadow(0 0 4px rgba(0,200,232,0.5));
}

/* ── Card body (content) ─────────────────────────────────── */
.plat-card__body {
  padding: 1.6rem 1.75rem 1.9rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Numbered badge */
.plat-card__num {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.18);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

/* Icon */
.plat-card__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  flex-shrink: 0;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.plat-card__icon--1 {
  background: rgba(155,61,232,0.1);
  border: 1px solid rgba(155,61,232,0.22);
  color: #9b3de8;
}
.plat-card__icon--2 {
  background: rgba(124,58,237,0.1);
  border: 1px solid rgba(124,58,237,0.22);
  color: #7c3aed;
}
.plat-card__icon--3 {
  background: rgba(0,200,232,0.08);
  border: 1px solid rgba(0,200,232,0.2);
  color: #00c8e8;
}
.plat-card:hover .plat-card__icon--1 { background: rgba(155,61,232,0.18); border-color: rgba(155,61,232,0.4); box-shadow: 0 0 16px rgba(155,61,232,0.2); }
.plat-card:hover .plat-card__icon--2 { background: rgba(124,58,237,0.18); border-color: rgba(124,58,237,0.4); box-shadow: 0 0 16px rgba(124,58,237,0.2); }
.plat-card:hover .plat-card__icon--3 { background: rgba(0,200,232,0.14);  border-color: rgba(0,200,232,0.4);  box-shadow: 0 0 16px rgba(0,200,232,0.18); }

/* Title */
.plat-card__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 0.75rem;
}

/* Description */
.plat-card__desc {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.7;
  margin: 0 0 1.5rem;
  flex: 1;
}

/* CTA link */
.plat-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.35);
  transition: color 0.25s ease, gap 0.25s ease;
  margin-top: auto;
}
.plat-card[data-card="1"]:hover .plat-card__cta { color: #c084fc; gap: 0.65rem; }
.plat-card[data-card="2"]:hover .plat-card__cta { color: #a78bfa; gap: 0.65rem; }
.plat-card[data-card="3"]:hover .plat-card__cta { color: #22d3ee; gap: 0.65rem; }

/* ── Bottom callout ──────────────────────────────────────── */
.plat-callout {
  position: relative; z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2rem 2.5rem;
  background: rgba(8, 12, 30, 0.65);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.plat-callout__line {
  flex-shrink: 0;
  width: 3px;
  height: 48px;
  border-radius: 2px;
  background: linear-gradient(180deg, #9b3de8, #00c8e8);
  box-shadow: 0 0 10px rgba(155,61,232,0.5);
}
.plat-callout__text {
  flex: 1;
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  line-height: 1.55;
  margin: 0;
  min-width: 200px;
}
.plat-callout__accent {
  font-weight: 700;
  background: linear-gradient(135deg, #c084fc 0%, #00c8e8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.plat-callout__btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Staggered reveal delays for cards ───────────────────── */
.plat-card[data-card="1"].reveal { transition-delay: 0.00s; }
.plat-card[data-card="2"].reveal { transition-delay: 0.09s; }
.plat-card[data-card="3"].reveal { transition-delay: 0.18s; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .plat-grid { grid-template-columns: 1fr; max-width: 560px; }
  .plat-card[data-card="2"].reveal,
  .plat-card[data-card="3"].reveal { transition-delay: 0s; }
  .plat-callout { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .plat-callout__line { width: 48px; height: 3px; }
}
@media (max-width: 640px) {
  .plat-section { padding: 5rem 1.25rem 4.5rem; }
  .plat-header  { margin-bottom: 3rem; }
  .plat-card__body { padding: 1.25rem 1.25rem 1.5rem; }
  .plat-callout { padding: 1.5rem 1.25rem; }
}

/* ============================================================
   COGNITIVE ABILITIES SECTION  —  .cog-*
   11-card performance interface grid
   ============================================================ */

/* ── Section shell ───────────────────────────────────────── */
.cog-section {
  position: relative;
  padding: 7rem 2rem 6rem;
  background: #050a1a;
  overflow: hidden;
}
.cog-bg-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 100% 85% at 50% 50%, black 15%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse 100% 85% at 50% 50%, black 15%, transparent 88%);
}
.cog-bg-glow {
  position: absolute;
  top: -80px; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 600px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(74,30,158,0.16) 0%, rgba(8,145,178,0.08) 50%, transparent 75%);
  pointer-events: none; z-index: 0; filter: blur(50px);
}

/* ── Section header ──────────────────────────────────────── */
.cog-header {
  position: relative; z-index: 1;
  text-align: center;
  max-width: 740px;
  margin: 0 auto 3rem;
}
.cog-title {
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 1rem 0 1.2rem;
  color: #fff;
}
.cog-title__accent {
  background: linear-gradient(135deg, #9b3de8 0%, #00c8e8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cog-subtitle {
  font-size: 1rem;
  color: rgba(255,255,255,0.46);
  line-height: 1.65;
  max-width: 520px;
  margin: 0 auto;
}

/* ── HUD bar ─────────────────────────────────────────────── */
.cog-hud {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto 2.5rem;
  padding: 0.6rem 1.25rem;
  background: rgba(8,12,30,0.7);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  gap: 1rem;
  flex-wrap: wrap;
}
.cog-hud__left {
  display: flex; align-items: center; gap: 0.55rem; flex-shrink: 0;
}
.cog-hud__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #9b3de8; box-shadow: 0 0 8px #9b3de8;
  animation: cogHudPulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes cogHudPulse {
  0%,100% { opacity:1; box-shadow:0 0 6px #9b3de8; }
  50%      { opacity:.45; box-shadow:0 0 14px #9b3de8; }
}
.cog-hud__label {
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}
.cog-hud__center {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: center;
}
.cog-hud__chip {
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 0.18rem 0.65rem; border-radius: 100px;
  background: rgba(155,61,232,0.1);
  border: 1px solid rgba(155,61,232,0.22);
  color: rgba(155,61,232,0.85);
}
.cog-hud__chip--cyan {
  background: rgba(0,200,232,0.08);
  border-color: rgba(0,200,232,0.22);
  color: rgba(0,200,232,0.85);
}
.cog-hud__sep { color: rgba(255,255,255,0.18); font-size: 0.75rem; }
.cog-hud__right { flex-shrink: 0; }
.cog-hud__status {
  font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #00c8e8; padding: 0.15rem 0.55rem;
  border-radius: 4px;
  background: rgba(0,200,232,0.08);
  border: 1px solid rgba(0,200,232,0.2);
}

/* ── Card grid — 4 col desktop, 3 mid, 2 tablet, 1 mobile ── */
.cog-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  max-width: 1100px;
  margin: 0 auto 3.5rem;
}

/* ── Single ability card ─────────────────────────────────── */
.cog-card {
  position: relative;
  padding: 1.35rem 1.3rem 1.25rem;
  background: rgba(8,12,30,0.7);
  border: 1px solid rgba(255,255,255,0.065);
  border-radius: 16px;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 0;
  transition:
    border-color 0.25s cubic-bezier(0.22,1,0.36,1),
    transform    0.25s cubic-bezier(0.22,1,0.36,1),
    box-shadow   0.25s cubic-bezier(0.22,1,0.36,1);
  cursor: default;
}

/* Top accent hairline — appears on hover */
.cog-card__accent {
  position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Colour themes */
.cog-card[data-ability="1"]  .cog-card__accent,
.cog-card[data-ability="4"]  .cog-card__accent,
.cog-card[data-ability="8"]  .cog-card__accent { color: #9b3de8; }
.cog-card[data-ability="2"]  .cog-card__accent,
.cog-card[data-ability="7"]  .cog-card__accent { color: #818cf8; }
.cog-card[data-ability="3"]  .cog-card__accent,
.cog-card[data-ability="9"]  .cog-card__accent { color: #a78bfa; }
.cog-card[data-ability="5"]  .cog-card__accent,
.cog-card[data-ability="6"]  .cog-card__accent,
.cog-card[data-ability="10"] .cog-card__accent { color: #00c8e8; }
.cog-card[data-ability="11"] .cog-card__accent { color: #c084fc; }

.cog-card:hover {
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-4px);
}
.cog-card:hover .cog-card__accent { opacity: 1; }

/* Per-card shadow tints */
.cog-card[data-ability="1"]:hover,
.cog-card[data-ability="4"]:hover,
.cog-card[data-ability="8"]:hover  { box-shadow: 0 14px 40px rgba(0,0,0,0.4), 0 0 30px rgba(155,61,232,0.08); }
.cog-card[data-ability="2"]:hover,
.cog-card[data-ability="7"]:hover  { box-shadow: 0 14px 40px rgba(0,0,0,0.4), 0 0 30px rgba(129,140,248,0.08); }
.cog-card[data-ability="3"]:hover,
.cog-card[data-ability="9"]:hover  { box-shadow: 0 14px 40px rgba(0,0,0,0.4), 0 0 30px rgba(167,139,250,0.08); }
.cog-card[data-ability="5"]:hover,
.cog-card[data-ability="6"]:hover,
.cog-card[data-ability="10"]:hover { box-shadow: 0 14px 40px rgba(0,0,0,0.4), 0 0 30px rgba(0,200,232,0.08); }
.cog-card[data-ability="11"]:hover { box-shadow: 0 18px 50px rgba(0,0,0,0.5), 0 0 40px rgba(155,61,232,0.14); }

/* Featured card (11 — MeMOT) */
.cog-card--featured {
  background: linear-gradient(135deg,
    rgba(30,10,74,0.65) 0%,
    rgba(8,12,30,0.8)   60%,
    rgba(8,28,50,0.65) 100%);
  border-color: rgba(155,61,232,0.2);
}
.cog-card--featured:hover { border-color: rgba(155,61,232,0.38); }

/* ── Card inner elements ──────────────────────────────────── */
.cog-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

/* Icon square */
.cog-card__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.cog-card__icon--purple  { background: rgba(155,61,232,0.1);  border: 1px solid rgba(155,61,232,0.2);  color: #9b3de8; }
.cog-card__icon--indigo  { background: rgba(129,140,248,0.1); border: 1px solid rgba(129,140,248,0.2); color: #818cf8; }
.cog-card__icon--violet  { background: rgba(167,139,250,0.1); border: 1px solid rgba(167,139,250,0.2); color: #a78bfa; }
.cog-card__icon--cyan    { background: rgba(0,200,232,0.08);  border: 1px solid rgba(0,200,232,0.2);   color: #00c8e8; }
.cog-card__icon--gradient{
  background: linear-gradient(135deg, rgba(155,61,232,0.12), rgba(0,200,232,0.1));
  border: 1px solid rgba(155,61,232,0.25);
}

.cog-card:hover .cog-card__icon--purple  { box-shadow: 0 0 14px rgba(155,61,232,0.25); background: rgba(155,61,232,0.18); }
.cog-card:hover .cog-card__icon--indigo  { box-shadow: 0 0 14px rgba(129,140,248,0.2); background: rgba(129,140,248,0.18); }
.cog-card:hover .cog-card__icon--violet  { box-shadow: 0 0 14px rgba(167,139,250,0.2); background: rgba(167,139,250,0.18); }
.cog-card:hover .cog-card__icon--cyan    { box-shadow: 0 0 14px rgba(0,200,232,0.2);   background: rgba(0,200,232,0.14); }
.cog-card:hover .cog-card__icon--gradient{ box-shadow: 0 0 18px rgba(155,61,232,0.3); }

/* Card number */
.cog-card__num {
  font-size: 0.58rem; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.16);
}
.cog-card__num--featured {
  color: rgba(155,61,232,0.55);
}

/* Ability name */
.cog-card__name {
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}
.cog-card--featured .cog-card__name { color: #fff; }

/* Description */
.cog-card__desc {
  font-size: 0.775rem;
  color: rgba(255,255,255,0.42);
  line-height: 1.62;
  margin: 0 0 1rem;
  flex: 1;
}
.cog-card--featured .cog-card__desc { color: rgba(255,255,255,0.5); }

/* Score bar */
.cog-card__bar {
  height: 2px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-top: auto;
}
.cog-card__bar-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #7c3aed, #9b3de8);
  transition: width 1.2s cubic-bezier(0.22,1,0.36,1);
  width: 0;          /* animated in by JS */
}
.cog-card__bar-fill--cyan {
  background: linear-gradient(90deg, #0891b2, #00c8e8);
}
.cog-card__bar-fill--gradient {
  background: linear-gradient(90deg, #9b3de8, #7c6ff0, #00c8e8);
}

/* Featured badge */
.cog-card__badge {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: 100px;
  background: linear-gradient(135deg, rgba(155,61,232,0.2), rgba(0,200,232,0.15));
  border: 1px solid rgba(155,61,232,0.3);
  color: rgba(192,132,252,0.9);
}

/* ── Staggered reveal delays (row-aware, 90ms step) ────────── */
.cog-card[data-ability="1"]  { transition-delay: 0.00s; }
.cog-card[data-ability="2"]  { transition-delay: 0.09s; }
.cog-card[data-ability="3"]  { transition-delay: 0.18s; }
.cog-card[data-ability="4"]  { transition-delay: 0.27s; }
.cog-card[data-ability="5"]  { transition-delay: 0.09s; }
.cog-card[data-ability="6"]  { transition-delay: 0.18s; }
.cog-card[data-ability="7"]  { transition-delay: 0.27s; }
.cog-card[data-ability="8"]  { transition-delay: 0.36s; }
.cog-card[data-ability="9"]  { transition-delay: 0.18s; }
.cog-card[data-ability="10"] { transition-delay: 0.27s; }
.cog-card[data-ability="11"] { transition-delay: 0.36s; }

/* ── Bottom CTA bar ──────────────────────────────────────── */
.cog-cta {
  position: relative; z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem;
  padding: 1.75rem 2.25rem;
  background: rgba(8,12,30,0.7);
  border: 1px solid rgba(255,255,255,0.06);
  border-top: 1px solid rgba(155,61,232,0.2);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.cog-cta__text {
  display: flex; align-items: baseline; gap: 0.65rem;
}
.cog-cta__count {
  font-size: 2.2rem; font-weight: 800;
  letter-spacing: -0.04em; line-height: 1;
  background: linear-gradient(135deg, #9b3de8, #00c8e8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cog-cta__label {
  font-size: 0.95rem; color: rgba(255,255,255,0.5);
  font-weight: 400; max-width: 360px; line-height: 1.4;
}
.cog-cta__btn { flex-shrink: 0; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .cog-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .cog-grid { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
  .cog-hud__right { display: none; }
}
@media (max-width: 500px) {
  .cog-section { padding: 5rem 1.25rem 4.5rem; }
  .cog-grid { grid-template-columns: 1fr; gap: 0.8rem; }
  .cog-hud { display: none; }
  .cog-cta { flex-direction: column; align-items: flex-start; padding: 1.25rem; }
  .cog-cta__count { font-size: 1.8rem; }
}

/* ============================================================
   TRAINING SYSTEM — Horizontal Progression Timeline  .tl-*
   ============================================================ */

/* ── Section wrapper ── */
.tl-section {
  position: relative;
  padding: 5rem 0 4.5rem;
  background: #060b1a;
  overflow: hidden;
}
.tl-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

/* Dot-grid background */
.tl-bg-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 30px 30px;
}
.tl-bg-glow1 {
  position: absolute;
  top: -180px; left: -60px;
  width: 650px; height: 650px;
  background: radial-gradient(circle, rgba(124,58,237,0.1) 0%, transparent 65%);
  z-index: 0; pointer-events: none;
}
.tl-bg-glow2 {
  position: absolute;
  bottom: -140px; right: -80px;
  width: 580px; height: 580px;
  background: radial-gradient(circle, rgba(249,115,22,0.07) 0%, transparent 65%);
  z-index: 0; pointer-events: none;
}

/* ── Header ── */
.tl-header {
  position: relative; z-index: 1;
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3.5rem;
}
.tl-title {
  font-size: clamp(1.8rem, 3.5vw, 2.7rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0.5rem 0 0.75rem;
}
.tl-subtitle {
  font-size: 0.97rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════════
   TIMELINE WRAP — positions cards, track, nodes together
   ══════════════════════════════════════════════════════ */
.tl-wrap {
  position: relative;
  z-index: 1;
  /* vertical space: cards above + track + labels below */
  padding: 160px 0 100px;
  margin-bottom: 2rem;
}

/* ── Cards (absolutely positioned above the track) ── */
.tl-cards {
  position: absolute;
  top: 0;
  left: 0; right: 0;
  /* Cards sit in the top padding area */
}
.tl-card {
  position: absolute;
  top: 0;
  /* left/width come from inline style */
  transform: translateX(-50%);
  /* center the card over its segment midpoint */
  /* But cards have a set width — we keep the midpoint as left anchor */
  background: rgba(8,15,32,0.85);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(-8px) translateX(0);
  transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.2s;
  min-width: 150px;
}
.tl-card.tl-visible {
  opacity: 1;
  transform: translateY(0) translateX(0);
}
.tl-card:hover {
  transform: translateY(-3px);
}
.tl-card--cyan:hover  { box-shadow: 0 8px 32px rgba(34,211,238,0.15); }
.tl-card--purple:hover{ box-shadow: 0 8px 32px rgba(168,85,247,0.15); }
.tl-card--yellow:hover{ box-shadow: 0 8px 32px rgba(234,179,8,0.15); }
.tl-card--orange:hover{ box-shadow: 0 8px 32px rgba(249,115,22,0.15); }

/* Colored top bar */
.tl-card__bar {
  height: 3px;
  border-radius: 0;
}
.tl-card__bar--cyan   { background: linear-gradient(90deg,#22d3ee,#0e7490); }
.tl-card__bar--purple { background: linear-gradient(90deg,#a855f7,#7c3aed); }
.tl-card__bar--yellow { background: linear-gradient(90deg,#eab308,#ca8a04); }
.tl-card__bar--orange { background: linear-gradient(90deg,#f97316,#ea580c); }

.tl-card__inner {
  padding: 0.75rem 1rem 0.85rem;
}
.tl-card__tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 100px;
  margin-bottom: 0.3rem;
}
.tl-card__tag--cyan   { color: #22d3ee; background: rgba(34,211,238,0.1); border: 1px solid rgba(34,211,238,0.2); }
.tl-card__tag--purple { color: #a855f7; background: rgba(168,85,247,0.1); border: 1px solid rgba(168,85,247,0.2); }
.tl-card__tag--yellow { color: #eab308; background: rgba(234,179,8,0.1);  border: 1px solid rgba(234,179,8,0.2); }
.tl-card__tag--orange { color: #f97316; background: rgba(249,115,22,0.1); border: 1px solid rgba(249,115,22,0.2); }

.tl-card__name {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  line-height: 1.25;
  margin: 0;
}

/* Dashed vertical stem connecting card bottom to track */
.tl-card__stem {
  position: absolute;
  bottom: -38px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 36px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.18) 0px,
    rgba(255,255,255,0.18) 4px,
    transparent 4px,
    transparent 8px
  );
}

/* ── Track ── */
.tl-track {
  position: absolute;
  left: 0; right: 0;
  top: calc(160px - 5px); /* vertically centered in padding */
  height: 10px;
}
.tl-track__base {
  position: absolute;
  inset: 0;
  border-radius: 100px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
}
.tl-track__fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  border-radius: 100px;
  background: linear-gradient(
    90deg,
    #22d3ee  0%,
    #22d3ee 22%,
    #a855f7 22%,
    #a855f7 44%,
    #eab308 44%,
    #eab308 66%,
    #f97316 66%,
    #f97316 89%,
    #fbbf24 89%,
    #fbbf24 100%
  );
  box-shadow:
    0 0 12px rgba(34,211,238,0.35),
    0 0 24px rgba(168,85,247,0.2),
    0 0 8px rgba(249,115,22,0.25);
  transition: width 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.tl-track__fill.tl-animated {
  width: 100%;
}

/* ── Nodes ── */
.tl-nodes {
  position: absolute;
  left: 0; right: 0;
  /* vertically: center on the track bar */
  top: calc(160px - 22px); /* track top - (node size - track)/2 */
}
.tl-node {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tl-node.tl-visible {
  opacity: 1;
}

/* Node circles */
.tl-node__circle {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #060b1a;
  border: 2px solid;
  position: relative; z-index: 2;
  flex-shrink: 0;
}
.tl-node__circle--cyan   { border-color: #22d3ee; box-shadow: 0 0 0 4px rgba(34,211,238,0.12), 0 0 16px rgba(34,211,238,0.3); }
.tl-node__circle--purple { border-color: #a855f7; box-shadow: 0 0 0 4px rgba(168,85,247,0.12), 0 0 16px rgba(168,85,247,0.3); }
.tl-node__circle--yellow { border-color: #eab308; box-shadow: 0 0 0 4px rgba(234,179,8,0.12),  0 0 16px rgba(234,179,8,0.3); }
.tl-node__circle--orange { border-color: #f97316; box-shadow: 0 0 0 4px rgba(249,115,22,0.12), 0 0 16px rgba(249,115,22,0.3); }

/* Test node circles — slightly smaller */
.tl-node__circle--test {
  width: 38px; height: 38px;
}

/* Final node — bigger */
.tl-node__circle--final {
  width: 52px; height: 52px;
  border-width: 2.5px;
}

/* Halo rings */
.tl-node__halo {
  position: absolute;
  top: 50%; left: 50%;
  width: 60px; height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  border: 1px solid;
  z-index: 1;
}
.tl-node__halo--cyan   { border-color: rgba(34,211,238,0.25); }
.tl-node__halo--purple { border-color: rgba(168,85,247,0.25); }
.tl-node__halo--yellow { border-color: rgba(234,179,8,0.25);  }
.tl-node__halo--orange { border-color: rgba(249,115,22,0.25); }

@keyframes tlHaloPulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { transform: scale(1.7); opacity: 0;   }
  100% { transform: scale(1.7); opacity: 0;   }
}
.tl-node__halo--pulse {
  width: 70px; height: 70px;
  margin: -35px 0 0 -35px;
  animation: tlHaloPulse 2.8s ease-out infinite;
}
.tl-node__halo--pulse-slow {
  width: 85px; height: 85px;
  margin: -42.5px 0 0 -42.5px;
  animation-duration: 3.4s;
  animation-delay: 0.9s;
}

/* Labels */
.tl-node__label {
  position: absolute;
  white-space: nowrap;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.15rem;
  pointer-events: none;
}
.tl-node__label--top {
  bottom: calc(100% + 10px);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.tl-node__label--bottom {
  top: calc(100% + 10px);
}
.tl-node__label-title {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tl-node__label-title--cyan   { color: #22d3ee; }
.tl-node__label-title--purple { color: #a855f7; }
.tl-node__label-title--yellow { color: #eab308; }
.tl-node__label-title--orange { color: #f97316; }
.tl-node__label-sub {
  font-size: 0.6rem;
  font-weight: 500;
  color: rgba(255,255,255,0.32);
  text-align: center;
}

/* Node pop-in animation */
@keyframes tlNodeIn {
  from { opacity: 0; transform: translateX(-50%) scale(0.4); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}
.tl-node.tl-animated {
  animation: tlNodeIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Card slide-down animation */
@keyframes tlCardIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tl-card.tl-animated {
  animation: tlCardIn 0.4s ease forwards;
}

/* ── Caption ── */
.tl-caption {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  text-align: center;
  font-size: 0.8rem; font-weight: 500;
  color: rgba(255,255,255,0.32);
  margin: 0 auto 1.75rem;
  max-width: 600px;
  line-height: 1.65;
}
.tl-caption__dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 8px rgba(34,211,238,0.6);
  flex-shrink: 0;
}

/* ── Legend ── */
.tl-legend {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding: 1rem 2rem;
  max-width: 860px;
  margin: 0 auto;
  background: rgba(6,11,26,0.7);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 100px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.tl-legend__item {
  display: flex; align-items: center; gap: 0.45rem;
}
.tl-legend__dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.tl-legend__label {
  font-size: 0.72rem; font-weight: 500;
  color: rgba(255,255,255,0.38);
  white-space: nowrap;
}
.tl-legend__sep {
  width: 1px; height: 12px;
  background: rgba(255,255,255,0.08);
}
.tl-legend__link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.75rem; font-weight: 600;
  color: #22d3ee;
  text-decoration: none;
  transition: color 0.2s, gap 0.2s;
  white-space: nowrap;
}
.tl-legend__link:hover { color: #fff; gap: 0.55rem; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .tl-card__name { font-size: 0.75rem; }
  .tl-card__inner { padding: 0.65rem 0.85rem 0.75rem; }
}
@media (max-width: 860px) {
  .tl-wrap { padding: 140px 0 90px; }
  .tl-node__circle { width: 36px; height: 36px; }
  .tl-node__circle--test { width: 32px; height: 32px; }
  .tl-node__circle--final { width: 44px; height: 44px; }
  .tl-card { min-width: 120px; }
  .tl-card__name { font-size: 0.7rem; }
}
@media (max-width: 640px) {
  .tl-section { padding: 4rem 0 3.5rem; }
  .tl-container { padding: 0 1.25rem; }
  .tl-wrap { padding: 120px 0 80px; }
  .tl-node__label-sub { display: none; }
  .tl-legend { border-radius: 14px; padding: 0.85rem 1.25rem; }
  .tl-legend__sep { display: none; }
  .tl-card__inner { padding: 0.55rem 0.7rem 0.65rem; }
  .tl-card__tag { display: none; }
  .tl-card__name { font-size: 0.65rem; }
}


/* ============================================================
   SCIENTIFIC PERFORMANCE IMPACT  .sci-*
   ============================================================ */

/* ── Section wrapper ── */
.sci-section {
  position: relative;
  padding: 5.5rem 0 5rem;
  background: #05091a;
  overflow: hidden;
}
.sci-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

/* Dot-grid */
.sci-bg-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 28px 28px;
}
.sci-bg-glow1 {
  position: absolute;
  top: -160px; left: -100px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(99,102,241,0.09) 0%, transparent 65%);
  z-index: 0; pointer-events: none;
}
.sci-bg-glow2 {
  position: absolute;
  bottom: -120px; right: -60px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(34,211,238,0.07) 0%, transparent 65%);
  z-index: 0; pointer-events: none;
}

/* ── Header ── */
.sci-header {
  position: relative; z-index: 1;
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3.5rem;
}
.sci-title {
  font-size: clamp(1.85rem, 3.5vw, 2.75rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0.55rem 0 0.8rem;
}
.sci-subtitle {
  font-size: 0.97rem;
  color: rgba(255,255,255,0.38);
  line-height: 1.7;
  margin: 0 auto;
  max-width: 520px;
}
.sci-br { display: block; }

/* ── Cards grid ── */
.sci-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 3rem;
}

/* ── Single card ── */
.sci-card {
  position: relative;
  background: rgba(8, 14, 32, 0.82);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  padding: 1.6rem 1.5rem 1.5rem;
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s cubic-bezier(0.22,1,0.36,1), border-color 0.25s cubic-bezier(0.22,1,0.36,1);
}
.sci-card:hover { transform: translateY(-5px); }
.sci-card--1:hover { border-color: rgba(59,130,246,0.35);  box-shadow: 0 16px 48px rgba(59,130,246,0.12); }
.sci-card--2:hover { border-color: rgba(168,85,247,0.35);  box-shadow: 0 16px 48px rgba(168,85,247,0.12); }
.sci-card--3:hover { border-color: rgba(34,211,238,0.35);  box-shadow: 0 16px 48px rgba(34,211,238,0.12); }
.sci-card--4:hover { border-color: rgba(99,102,241,0.35);  box-shadow: 0 16px 48px rgba(99,102,241,0.12); }

/* Ambient glow blob inside card */
.sci-card__glow {
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.35;
}
.sci-card--1 .sci-card__glow { background: radial-gradient(circle, rgba(59,130,246,0.4) 0%, transparent 70%); }
.sci-card--2 .sci-card__glow { background: radial-gradient(circle, rgba(168,85,247,0.4) 0%, transparent 70%); }
.sci-card--3 .sci-card__glow { background: radial-gradient(circle, rgba(34,211,238,0.35) 0%, transparent 70%); }
.sci-card--4 .sci-card__glow { background: radial-gradient(circle, rgba(99,102,241,0.4) 0%, transparent 70%); }

/* Top row: icon + badge */
.sci-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}
.sci-card__icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.sci-card__icon--blue   { background: rgba(59,130,246,0.12);  color: #60a5fa; border: 1px solid rgba(59,130,246,0.2); }
.sci-card__icon--purple { background: rgba(168,85,247,0.12); color: #c084fc; border: 1px solid rgba(168,85,247,0.2); }
.sci-card__icon--cyan   { background: rgba(34,211,238,0.1);  color: #22d3ee; border: 1px solid rgba(34,211,238,0.2); }
.sci-card__icon--indigo { background: rgba(99,102,241,0.12); color: #818cf8; border: 1px solid rgba(99,102,241,0.2); }

.sci-card__badge {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  border-radius: 100px;
}
.sci-card__badge--blue   { color: #60a5fa; background: rgba(59,130,246,0.1);  border: 1px solid rgba(59,130,246,0.2); }
.sci-card__badge--purple { color: #c084fc; background: rgba(168,85,247,0.1); border: 1px solid rgba(168,85,247,0.2); }
.sci-card__badge--cyan   { color: #22d3ee; background: rgba(34,211,238,0.1); border: 1px solid rgba(34,211,238,0.2); }
.sci-card__badge--indigo { color: #818cf8; background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.2); }

/* Percentage value */
.sci-card__value-row {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  margin-bottom: 0.85rem;
  line-height: 1;
}
.sci-card__num {
  font-size: clamp(2.8rem, 4.5vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.sci-card__num--blue   { color: #60a5fa; text-shadow: 0 0 28px rgba(59,130,246,0.55), 0 0 8px rgba(59,130,246,0.4); }
.sci-card__num--purple { color: #c084fc; text-shadow: 0 0 28px rgba(168,85,247,0.55), 0 0 8px rgba(168,85,247,0.4); }
.sci-card__num--cyan   { color: #22d3ee; text-shadow: 0 0 28px rgba(34,211,238,0.55), 0 0 8px rgba(34,211,238,0.4); }
.sci-card__num--indigo { color: #818cf8; text-shadow: 0 0 28px rgba(99,102,241,0.55), 0 0 8px rgba(99,102,241,0.4); }

.sci-card__pct {
  font-size: 1.4rem;
  font-weight: 800;
  opacity: 0.7;
}
.sci-card__pct--blue   { color: #60a5fa; }
.sci-card__pct--purple { color: #c084fc; }
.sci-card__pct--cyan   { color: #22d3ee; }
.sci-card__pct--indigo { color: #818cf8; }

/* Progress bar */
.sci-card__bar-wrap {
  margin-bottom: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.sci-card__bar-track {
  height: 4px;
  border-radius: 100px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.sci-card__bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 100px;
  transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.sci-card__bar-fill--blue   { background: linear-gradient(90deg, #3b82f6, #60a5fa); box-shadow: 0 0 8px rgba(59,130,246,0.6); }
.sci-card__bar-fill--purple { background: linear-gradient(90deg, #9333ea, #c084fc); box-shadow: 0 0 8px rgba(168,85,247,0.6); }
.sci-card__bar-fill--cyan   { background: linear-gradient(90deg, #0891b2, #22d3ee); box-shadow: 0 0 8px rgba(34,211,238,0.6); }
.sci-card__bar-fill--indigo { background: linear-gradient(90deg, #4f46e5, #818cf8); box-shadow: 0 0 8px rgba(99,102,241,0.6); }

.sci-card__bar-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
}

/* Card name + description */
.sci-card__name {
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin: 0 0 0.55rem;
  line-height: 1.2;
}
.sci-card__desc {
  font-size: 0.8rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.35);
  margin: 0;
}

/* Staggered reveal delays */
.sci-card--1.reveal { transition-delay: 0.00s; }
.sci-card--2.reveal { transition-delay: 0.09s; }
.sci-card--3.reveal { transition-delay: 0.18s; }
.sci-card--4.reveal { transition-delay: 0.27s; }

/* ── Closing statement ── */
.sci-closing {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}
.sci-closing__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,0.3), transparent);
}
.sci-closing__text {
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255,255,255,0.35);
  text-align: center;
  white-space: nowrap;
  margin: 0;
  padding: 0 0.5rem;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .sci-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .sci-card--3.reveal, .sci-card--4.reveal { transition-delay: 0s; }
}
@media (max-width: 640px) {
  .sci-section { padding: 4rem 0 3.5rem; }
  .sci-container { padding: 0 1.25rem; }
  .sci-grid { grid-template-columns: 1fr; gap: 0.9rem; }
  .sci-card { padding: 1.3rem 1.2rem 1.2rem; }
  .sci-card--2.reveal, .sci-card--3.reveal, .sci-card--4.reveal { transition-delay: 0s; }
  .sci-closing__line { display: none; }
  .sci-closing__text { white-space: normal; font-size: 0.83rem; }
  .sci-br { display: none; }
}

/* ============================================================
   COMPLETE PLATFORM  .cp-*
   ============================================================ */

/* ── Section ── */
.cp-section {
  position: relative;
  padding: 6rem 0 5.5rem;
  background: #040817;
  overflow: hidden;
}
.cp-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

/* Backgrounds */
.cp-bg-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 32px 32px;
}
.cp-bg-glow1 {
  position: absolute; top: -200px; left: -120px;
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, transparent 65%);
  z-index: 0; pointer-events: none;
}
.cp-bg-glow2 {
  position: absolute; top: 30%; right: -100px;
  width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(168,85,247,0.07) 0%, transparent 65%);
  z-index: 0; pointer-events: none;
}
.cp-bg-glow3 {
  position: absolute; bottom: -180px; left: 40%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(34,211,238,0.06) 0%, transparent 65%);
  z-index: 0; pointer-events: none;
}

/* ── Header ── */
.cp-header {
  position: relative; z-index: 1;
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
}
.cp-title {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0.55rem 0 0.9rem;
}
.cp-subtitle {
  font-size: 1rem;
  color: rgba(255,255,255,0.38);
  line-height: 1.72;
  max-width: 580px;
  margin: 0 auto;
}
.cp-br { display: block; }

/* ── Cards grid ── */
.cp-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
  margin-bottom: 0;
}

/* Wide card: card-1 spans all 3 columns */
.cp-card--wide {
  grid-column: 1 / -1;
  padding: 0 !important;
  overflow: hidden;
}

/* Two-column split inside wide card */
.cp-card__split {
  display: grid;
  grid-template-columns: 1fr auto;
  min-height: 0;
  align-items: center;
}

/* Left: text column */
.cp-card__split-text {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.8rem 1.8rem 2rem;
}
.cp-card__head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

/* Right: image column — contained, not stretched */
.cp-card__split-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.6rem 1.8rem 1.2rem 1rem;
  border-left: 1px solid rgba(96,165,250,0.08);
  gap: 0.65rem;
}

/* Frame: wraps image + overlays, sized by image */
.cp-card__img-frame {
  position: relative;
  display: inline-flex;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(96,165,250,0.14),
    0 8px 32px rgba(0,0,0,0.55),
    0 2px 12px rgba(96,165,250,0.1);
}

/* The photo itself — constrained size, natural ratio */
.cp-card__img {
  display: block;
  width: auto;
  max-height: 460px;
  max-width: 100%;
  object-fit: cover;
  object-position: 55% 8%;   /* focus: headset + upper body */
  border-radius: 12px;
  filter: brightness(0.80) contrast(1.08) saturate(0.88);
  transition: transform 0.5s ease, filter 0.4s ease;
}
.cp-card--wide:hover .cp-card__img {
  transform: scale(1.025);
  filter: brightness(0.86) contrast(1.06) saturate(0.92);
}

/* Vignette removed — not needed with border-radius containment */

/* Blue atmospheric glow overlay — inside the frame */
.cp-card__img-glow {
  position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(ellipse 70% 60% at 75% 30%, rgba(59,130,246,0.13) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 30% 85%, rgba(99,102,241,0.08) 0%, transparent 60%);
  pointer-events: none;
  border-radius: 12px;
  mix-blend-mode: screen;
}

/* Scanline texture */
.cp-card__img-scanline {
  position: absolute; inset: 0; z-index: 3;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,0,0,0.055) 3px, rgba(0,0,0,0.055) 4px
  );
  pointer-events: none;
  border-radius: 12px;
  opacity: 0.45;
}

/* LIVE TRAINING badge */
.cp-card__img-badge {
  position: absolute; top: 0.75rem; right: 0.75rem; z-index: 5;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em;
  color: rgba(96,165,250,0.9);
  background: rgba(7,12,28,0.7);
  border: 1px solid rgba(96,165,250,0.25);
  border-radius: 20px; padding: 0.28rem 0.65rem;
  backdrop-filter: blur(8px);
}
.cp-card__img-badge-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #60a5fa;
  box-shadow: 0 0 6px 2px rgba(96,165,250,0.7);
  animation: cp-badge-pulse 2s ease-in-out infinite;
}
@keyframes cp-badge-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* Caption under photo */
.cp-card__img-caption {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.3);
  font-style: italic;
  letter-spacing: 0.01em;
  text-align: center;
  margin: 0;
  max-width: 260px;
  line-height: 1.45;
}

/* ── Analytics wide card (video left, text right) ── */
.cp-card__split--analytics {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.cp-av-frame {
  position: relative;
  overflow: hidden;
  border-radius: 20px 0 0 20px;
  flex: 1;
  display: flex;
  align-items: stretch;
  border-right: 1px solid rgba(34,211,238,0.1);
  min-height: 340px;
}
.cp-av-player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: brightness(0.75) contrast(1.1) saturate(0.85);
  transition: filter 0.4s ease;
}
.cp-card--3:hover .cp-av-player {
  filter: brightness(0.85) contrast(1.06) saturate(0.92);
}
.cp-av-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(7,12,28,0.28) 0%, rgba(7,12,28,0.08) 45%, rgba(7,12,28,0.82) 100%),
    linear-gradient(to top,   rgba(7,12,28,0.55) 0%, transparent 40%),
    linear-gradient(to bottom,rgba(7,12,28,0.35) 0%, transparent 30%);
}
.cp-av-glow {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 30% 50%, rgba(34,211,238,0.1) 0%, transparent 65%);
  mix-blend-mode: screen;
}
.cp-av-badge {
  position: absolute; top: 12px; left: 12px; z-index: 5;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #22d3ee;
  background: rgba(7,12,28,0.78);
  border: 1px solid rgba(34,211,238,0.28);
  border-radius: 20px; padding: 0.28rem 0.65rem;
  backdrop-filter: blur(8px);
}
.cp-av-badge__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 7px #22d3ee;
  animation: pulse-dot 2s ease-in-out infinite;
}
.cp-card__split-text--analytics {
  padding: 2rem 1.8rem 1.8rem;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Responsive analytics wide card */
@media (max-width: 860px) {
  .cp-card__split--analytics {
    grid-template-columns: 1fr;
  }
  .cp-av-frame {
    min-height: 260px;
    border-radius: 20px 20px 0 0;
    border-right: none;
    border-bottom: 1px solid rgba(34,211,238,0.1);
  }
}
@media (max-width: 560px) {
  .cp-av-frame { min-height: 200px; }
}

/* ── Single card ── */
.cp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(7, 12, 28, 0.88);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 2rem 1.85rem 1.75rem;
  overflow: hidden;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s cubic-bezier(0.22,1,0.36,1), border-color 0.25s cubic-bezier(0.22,1,0.36,1);
}
.cp-card:hover { transform: translateY(-6px); }
.cp-card--1:hover { border-color: rgba(59,130,246,0.3);  box-shadow: 0 20px 60px rgba(59,130,246,0.1); }
.cp-card--2:hover { border-color: rgba(168,85,247,0.3);  box-shadow: 0 20px 60px rgba(168,85,247,0.1); }
.cp-card--3:hover { border-color: rgba(34,211,238,0.3);  box-shadow: 0 20px 60px rgba(34,211,238,0.1); }

/* Stagger reveal */
.cp-card--1.reveal { transition-delay: 0.00s; }
.cp-card--2.reveal { transition-delay: 0.09s; }
.cp-card--3.reveal { transition-delay: 0.18s; }

/* Top accent bar */
.cp-card__accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 20px 20px 0 0;
}
.cp-card__accent--blue   { background: linear-gradient(90deg, transparent 0%, #3b82f6 40%, #60a5fa 60%, transparent 100%); }
.cp-card__accent--purple { background: linear-gradient(90deg, transparent 0%, #9333ea 40%, #c084fc 60%, transparent 100%); }
.cp-card__accent--cyan   { background: linear-gradient(90deg, transparent 0%, #0891b2 40%, #22d3ee 60%, transparent 100%); }

/* Corner glow */
.cp-card__corner-glow {
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.28;
}
.cp-card__corner-glow--blue   { background: radial-gradient(circle, rgba(59,130,246,0.5) 0%, transparent 70%); }
.cp-card__corner-glow--purple { background: radial-gradient(circle, rgba(168,85,247,0.5) 0%, transparent 70%); }
.cp-card__corner-glow--cyan   { background: radial-gradient(circle, rgba(34,211,238,0.45) 0%, transparent 70%); }

/* Icon */
.cp-card__icon-wrap {
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
  position: relative;
}
.cp-card__icon-wrap--blue   { background: rgba(59,130,246,0.1);  color: #60a5fa;  border: 1px solid rgba(59,130,246,0.2); }
.cp-card__icon-wrap--purple { background: rgba(168,85,247,0.1); color: #c084fc; border: 1px solid rgba(168,85,247,0.2); }
.cp-card__icon-wrap--cyan   { background: rgba(34,211,238,0.1);  color: #22d3ee;  border: 1px solid rgba(34,211,238,0.2); }

/* Glow pulse on icon */
@keyframes cpIconPulse {
  0%,100% { box-shadow: 0 0 0 0 transparent; }
  50%      { box-shadow: 0 0 0 6px rgba(255,255,255,0.04); }
}
.cp-card:hover .cp-card__icon-wrap { transform: scale(1.15); }

/* Card number badge */
.cp-card__num {
  position: absolute;
  top: 1.6rem; right: 1.75rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  opacity: 0.35;
}
.cp-card__num--blue   { color: #60a5fa; }
.cp-card__num--purple { color: #c084fc; }
.cp-card__num--cyan   { color: #22d3ee; }

/* Body */
.cp-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cp-card__title {
  font-size: 1.08rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  margin: 0 0 0.7rem;
  letter-spacing: -0.01em;
}
.cp-card__desc {
  font-size: 0.84rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.38);
  margin: 0 0 1.3rem;
}

/* Feature list */
.cp-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: auto;
  padding-top: 0.2rem;
}
.cp-card__list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  line-height: 1.45;
}
.cp-card__list-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-top: 0.38em;
  flex-shrink: 0;
}
.cp-card__list-dot--blue   { background: #3b82f6; box-shadow: 0 0 6px rgba(59,130,246,0.7); }
.cp-card__list-dot--cyan   { background: #22d3ee; box-shadow: 0 0 6px rgba(34,211,238,0.7); }

/* Ability chips (card 2) */
.cp-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 0.2rem;
}
.cp-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.28rem 0.7rem;
  border-radius: 100px;
}
.cp-chip--purple {
  color: #c084fc;
  background: rgba(168,85,247,0.1);
  border: 1px solid rgba(168,85,247,0.22);
}

/* Card footer */
.cp-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.cp-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: gap 0.2s ease, opacity 0.2s ease;
}
.cp-card__link--blue   { color: #60a5fa; }
.cp-card__link--purple { color: #c084fc; }
.cp-card__link--cyan   { color: #22d3ee; }
.cp-card__link:hover { gap: 0.55rem; opacity: 1; }

.cp-card__tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
}
.cp-card__tag--blue   { color: #60a5fa; background: rgba(59,130,246,0.1);  border: 1px solid rgba(59,130,246,0.18); }
.cp-card__tag--purple { color: #c084fc; background: rgba(168,85,247,0.1); border: 1px solid rgba(168,85,247,0.18); }
.cp-card__tag--cyan   { color: #22d3ee; background: rgba(34,211,238,0.1);  border: 1px solid rgba(34,211,238,0.18); }

/* ── Connector row between cards (decorative) ── */
.cp-connectors {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* sits on top of the cards row visually — use negative margin */
  margin-top: -1px;
  /* hide on smaller screens */
  pointer-events: none;
}
.cp-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  /* push to the right edge of each card */
  grid-column: span 1;
}
/* Show only in the gap columns: 1st after card1, 2nd after card2 */
.cp-connectors .cp-connector:nth-child(1) {
  grid-column: 1;
  transform: translateX(100%);
  margin-top: -30px;
}
.cp-connectors .cp-connector:nth-child(2) {
  grid-column: 2;
  transform: translateX(100%);
  margin-top: -30px;
}
.cp-connector__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  max-width: 20px;
}
.cp-connector__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  flex-shrink: 0;
}

/* ── Closing statement ── */
.cp-statement {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255,255,255,0.3);
  text-align: center;
  margin: 3rem auto 0;
  max-width: 480px;
  line-height: 1.6;
}
.cp-statement__dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cp-statement__dot--blue   { background: #3b82f6; box-shadow: 0 0 6px rgba(59,130,246,0.7); }
.cp-statement__dot--purple { background: #a855f7; box-shadow: 0 0 6px rgba(168,85,247,0.7); }
.cp-statement__dot--cyan   { background: #22d3ee; box-shadow: 0 0 6px rgba(34,211,238,0.7); }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .cp-grid { gap: 1.1rem; }
  .cp-card { padding: 1.75rem 1.5rem 1.5rem; }
  .cp-card__split { grid-template-columns: 1fr auto; }
  .cp-card__split-text { padding: 1.8rem 1.5rem 1.5rem 1.8rem; }
  .cp-card__img { max-height: 380px; }
}
@media (max-width: 860px) {
  .cp-grid { grid-template-columns: 1fr; gap: 1rem; max-width: 540px; margin: 0 auto; }
  .cp-card--2.reveal, .cp-card--3.reveal { transition-delay: 0s; }
  .cp-connectors { display: none; }
  .cp-br { display: none; }
  .cp-card__split { grid-template-columns: 1fr; }
  .cp-card__split-img { border-left: none; border-top: 1px solid rgba(96,165,250,0.08); padding: 1.2rem 1.5rem 1.4rem; }
  .cp-card__img { max-height: 300px; width: 100%; }
}
@media (max-width: 640px) {
  .cp-section { padding: 4.5rem 0 4rem; }
  .cp-container { padding: 0 1.25rem; }
  .cp-grid { max-width: 100%; }
  .cp-card { padding: 1.5rem 1.3rem 1.35rem; border-radius: 16px; }
  .cp-title { font-size: 1.75rem; }
  .cp-statement { font-size: 0.78rem; }
  .cp-card__split-text { padding: 1.5rem 1.3rem 1.3rem; }
  .cp-card__img { max-height: 240px; }
}

/* ============================================================
   INSIDE THE TRAINING EXPERIENCE  .ite-*
   Three horizontal looping video cards
   ============================================================ */

.ite-section {
  position: relative;
  padding: 5.5rem 0 5rem;
  overflow: hidden;
  background: #05070d;
}

/* Background layers */
.ite-bg-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%);
}
.ite-bg-glow1 {
  position: absolute; top: -120px; left: 10%; pointer-events: none; z-index: 0;
  width: 500px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(96,165,250,0.07) 0%, transparent 70%);
  filter: blur(60px);
}
.ite-bg-glow2 {
  position: absolute; bottom: -100px; right: 8%; pointer-events: none; z-index: 0;
  width: 450px; height: 350px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,0.07) 0%, transparent 70%);
  filter: blur(60px);
}

.ite-container {
  position: relative; z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Header */
.ite-header {
  text-align: center;
  margin-bottom: 3rem;
}
.ite-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.18;
  letter-spacing: -0.025em;
  margin: 0.5rem 0 1rem;
}
.ite-title__accent {
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #22d3ee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ite-subtitle {
  font-size: 1rem;
  color: rgba(255,255,255,0.48);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Grid — three equal columns */
.ite-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-bottom: 2.5rem;
}

/* Card */
.ite-card {
  display: flex;
  flex-direction: column;
  background: rgba(7,12,28,0.82);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s cubic-bezier(0.22,1,0.36,1), border-color 0.25s cubic-bezier(0.22,1,0.36,1);
}
.ite-card:hover { transform: translateY(-6px); }
#ite-card-1:hover { border-color: rgba(96,165,250,0.3);  box-shadow: 0 20px 50px rgba(96,165,250,0.12); }
#ite-card-2:hover { border-color: rgba(139,92,246,0.3);  box-shadow: 0 20px 50px rgba(139,92,246,0.12); }
#ite-card-3:hover { border-color: rgba(34,211,238,0.3);  box-shadow: 0 20px 50px rgba(34,211,238,0.12); }

/* Video frame */
.ite-card__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.ite-card__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: brightness(0.78) contrast(1.08) saturate(0.88);
  transition: filter 0.4s ease, transform 0.5s ease;
}
.ite-card:hover .ite-card__video {
  filter: brightness(0.90) contrast(1.04) saturate(0.94);
  transform: scale(1.03);
}

/* Dark gradient overlay at bottom */
.ite-card__overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right,  rgba(7,12,28,0.55) 0%, rgba(7,12,28,0.12) 50%, rgba(7,12,28,0.08) 100%),
    linear-gradient(to bottom, rgba(7,12,28,0.18) 0%, transparent 35%, rgba(7,12,28,0.72) 100%);
}

/* Atmospheric color glows */
.ite-card__glow {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}
.ite-card__glow--blue   { background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(96,165,250,0.12) 0%, transparent 70%); }
.ite-card__glow--violet { background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(139,92,246,0.12) 0%, transparent 70%); }
.ite-card__glow--cyan   { background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(34,211,238,0.12) 0%, transparent 70%); }

/* Badge */
.ite-card__badge {
  position: absolute; top: 10px; left: 10px; z-index: 5;
  display: inline-flex; align-items: center; gap: 0.38rem;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(7,12,28,0.78);
  border-radius: 20px; padding: 0.25rem 0.6rem;
  backdrop-filter: blur(8px);
}
.ite-card__badge--blue   { color: #60a5fa; border: 1px solid rgba(96,165,250,0.28); }
.ite-card__badge--violet { color: #a78bfa; border: 1px solid rgba(167,139,250,0.28); }
.ite-card__badge--cyan   { color: #22d3ee; border: 1px solid rgba(34,211,238,0.28); }

.ite-badge__dot {
  width: 5px; height: 5px; border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}
.ite-badge__dot--blue   { background: #60a5fa; box-shadow: 0 0 6px #60a5fa; }
.ite-badge__dot--violet { background: #a78bfa; box-shadow: 0 0 6px #a78bfa; }
.ite-badge__dot--cyan   { background: #22d3ee; box-shadow: 0 0 6px #22d3ee; }

/* Card info */
.ite-card__info {
  padding: 1.1rem 1.25rem 1.25rem;
  flex: 1;
}
.ite-card__title {
  font-size: 0.98rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}
.ite-card__desc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.46);
  line-height: 1.6;
  margin: 0;
}

/* Caption */
.ite-caption {
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.35);
  font-style: italic;
  letter-spacing: 0.01em;
  margin-top: 0.5rem;
}

/* Stagger reveals */
#ite-card-1.reveal { transition-delay: 0.00s; }
#ite-card-2.reveal { transition-delay: 0.09s; }
#ite-card-3.reveal { transition-delay: 0.18s; }

/* Responsive */
@media (max-width: 900px) {
  .ite-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
  }
  #ite-card-3 { grid-column: 1 / -1; max-width: 520px; margin: 0 auto; width: 100%; }
}
@media (max-width: 560px) {
  .ite-section { padding: 4rem 0 3.5rem; }
  .ite-container { padding: 0 1.25rem; }
  .ite-grid { grid-template-columns: 1fr; gap: 1rem; }
  #ite-card-3 { grid-column: auto; max-width: 100%; }
  .ite-title { font-size: 1.7rem; }
}

/* ============================================================
   WHO USES THE PLATFORM  .whu-*
   ============================================================ */

/* ── Section ── */
.whu-section {
  position: relative;
  padding: 6rem 0 5.5rem;
  background: #050919;
  overflow: hidden;
}
.whu-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

/* Backgrounds */
.whu-bg-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 30px 30px;
}
.whu-bg-glow1 {
  position: absolute; top: -160px; left: -80px;
  width: 660px; height: 660px;
  background: radial-gradient(circle, rgba(59,130,246,0.07) 0%, transparent 65%);
  z-index: 0; pointer-events: none;
}
.whu-bg-glow2 {
  position: absolute; bottom: -140px; right: -60px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(139,92,246,0.07) 0%, transparent 65%);
  z-index: 0; pointer-events: none;
}
.whu-bg-glow3 {
  position: absolute; top: 40%; left: 40%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(16,185,129,0.04) 0%, transparent 65%);
  z-index: 0; pointer-events: none;
}

/* ── Header ── */
.whu-header {
  position: relative; z-index: 1;
  text-align: center;
  max-width: 680px;
  margin: 0 auto 4rem;
}
.whu-title {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0.55rem 0 0.9rem;
}
.whu-subtitle {
  font-size: 0.98rem;
  color: rgba(255,255,255,0.38);
  line-height: 1.72;
  max-width: 560px;
  margin: 0 auto;
}
.whu-br { display: block; }

/* ── 5-card grid: 3 + 2 layout ── */
.whu-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 3rem;
}
/* All 5 cards flow naturally — no overrides needed */
.whu-card--3 { grid-column: auto; grid-row: auto; }
.whu-card--4 { grid-column: auto; grid-row: auto; }
.whu-card--5 { grid-column: auto; grid-row: auto; }

/* Wide card — no default padding, split handles spacing */
.whu-card--wide {
  padding: 0 !important;
  overflow: hidden;
}
/* Re-apply inner padding scoped to the split text column */
.whu-card--wide .whu-card__head   { padding: 1.6rem 1.2rem 0 1.6rem; }
.whu-card--wide .whu-card__body   { padding: 0.9rem 1.2rem 0 1.6rem; }
.whu-card--wide .whu-card__footer { padding: 1.2rem 1.6rem 1.6rem 1.2rem; }
/* Reversed layout: text is on the RIGHT — flip padding */
.whu-card--wide .whu-split--reverse .whu-split__text--right .whu-card__head   { padding: 1.6rem 1.6rem 0 1.2rem; }
.whu-card--wide .whu-split--reverse .whu-split__text--right .whu-card__body   { padding: 0.9rem 1.6rem 0 1.2rem; }
.whu-card--wide .whu-split--reverse .whu-split__text--right .whu-card__footer { padding: 1.2rem 1.6rem 1.6rem 1.2rem; }

/* ── Two-column split: image RIGHT (default) ── */
.whu-split {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 0;
}

/* ── Two-column split: image LEFT (reversed) ── */
.whu-split--reverse {
  grid-template-columns: auto 1fr;
}

/* Text column — default (right side) */
.whu-split__text {
  display: flex;
  flex-direction: column;
  padding: 0 1.6rem 1.5rem 0;
}
/* Text column — right side in reversed layout */
.whu-split__text--right {
  padding: 0 1.6rem 1.5rem 0;
}

/* Image column — right position (default: emerald) */
.whu-split__img {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.4rem 1.6rem 1.2rem 0.8rem;
  border-left: 1px solid rgba(16,185,129,0.1);
}
/* Image column — left position */
.whu-split__img--left {
  padding: 1.4rem 0.8rem 1.2rem 1.6rem;
  border-left: none;
  border-right: 1px solid rgba(251,191,36,0.1);
  order: -1;
}

/* Frame: sizes to image */
.whu-split__img-frame {
  position: relative;
  display: inline-flex;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(16,185,129,0.16),
    0 8px 32px rgba(0,0,0,0.6),
    0 2px 16px rgba(16,185,129,0.1);
}

/* Photo */
.whu-split__img-photo {
  display: block;
  width: auto;
  max-height: 420px;
  max-width: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 12px;
  filter: brightness(0.82) contrast(1.09) saturate(0.9);
  transition: transform 0.55s ease, filter 0.4s ease;
}
.whu-card--wide:hover .whu-split__img-photo {
  transform: scale(1.025);
  filter: brightness(0.88) contrast(1.07) saturate(0.94);
}

/* Rehab photo crop: focus on player+coach upper body, cut tablet/floor */
.whu-split__img--left .whu-split__img-photo {
  object-position: 50% 18%;
}

/* Left-edge fade (default — for image on right) */
.whu-split__img-fade {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to right, rgba(6,10,24,0.75) 0%, rgba(6,10,24,0.2) 22%, transparent 42%);
  pointer-events: none;
  border-radius: 12px;
}
/* Right-edge fade (for image on left — blends into text side) */
.whu-split__img-fade--right {
  background: linear-gradient(to left, rgba(6,10,24,0.75) 0%, rgba(6,10,24,0.2) 22%, transparent 42%);
}

/* Emerald glow (default) */
.whu-split__img-glow {
  position: absolute; inset: 0; z-index: 3;
  background:
    radial-gradient(ellipse 55% 65% at 75% 25%, rgba(16,185,129,0.1) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 25% 80%, rgba(16,185,129,0.06) 0%, transparent 60%);
  pointer-events: none;
  border-radius: 12px;
  mix-blend-mode: screen;
}
/* Amber glow variant */
.whu-split__img-glow--amber {
  background:
    radial-gradient(ellipse 55% 65% at 30% 25%, rgba(251,191,36,0.1) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 75% 80%, rgba(217,119,6,0.07) 0%, transparent 60%);
}

/* Scanlines */
.whu-split__img-scan {
  position: absolute; inset: 0; z-index: 4;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,0,0,0.05) 3px, rgba(0,0,0,0.05) 4px
  );
  pointer-events: none;
  border-radius: 12px;
  opacity: 0.4;
}

/* Badge — default (emerald) */
.whu-split__img-badge {
  position: absolute; top: 0.75rem; right: 0.75rem; z-index: 5;
  display: inline-flex; align-items: center; gap: 0.38rem;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.13em;
  color: rgba(52,211,153,0.92);
  background: rgba(6,10,24,0.72);
  border: 1px solid rgba(52,211,153,0.22);
  border-radius: 20px; padding: 0.26rem 0.6rem;
  backdrop-filter: blur(8px);
}
/* Badge — amber variant (left-side image: badge on left) */
.whu-split__img-badge--amber {
  right: auto;
  left: 0.75rem;
  color: rgba(251,191,36,0.92);
  border-color: rgba(251,191,36,0.22);
}

/* Badge dot — default (emerald) */
.whu-split__img-badge-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 6px 2px rgba(52,211,153,0.65);
  animation: whu-badge-pulse 2.2s ease-in-out infinite;
}
/* Badge dot — amber */
.whu-split__img-badge-dot--amber {
  background: #fbbf24;
  box-shadow: 0 0 6px 2px rgba(251,191,36,0.65);
}
@keyframes whu-badge-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* Caption */
.whu-split__img-caption {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.28);
  font-style: italic;
  letter-spacing: 0.01em;
  text-align: center;
  margin: 0;
  max-width: 240px;
  line-height: 1.45;
}

/* ── Card base ── */
.whu-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(6, 10, 24, 0.92);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  padding: 0 0 1.5rem;
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s cubic-bezier(0.22,1,0.36,1), border-color 0.25s cubic-bezier(0.22,1,0.36,1);
}
.whu-card:hover { transform: translateY(-5px); }

/* Per-color hover states */
.whu-card--1:hover { border-color: rgba(59,130,246,0.28);  box-shadow: 0 18px 50px rgba(59,130,246,0.1); }
.whu-card--2:hover { border-color: rgba(139,92,246,0.28);  box-shadow: 0 18px 50px rgba(139,92,246,0.1); }
.whu-card--3:hover { border-color: rgba(16,185,129,0.28);  box-shadow: 0 18px 50px rgba(16,185,129,0.1); }
.whu-card--4:hover { border-color: rgba(34,211,238,0.28);  box-shadow: 0 18px 50px rgba(34,211,238,0.1); }
.whu-card--5:hover { border-color: rgba(251,191,36,0.28);  box-shadow: 0 18px 50px rgba(251,191,36,0.08); }

/* Staggered reveal */
.whu-card--1.reveal { transition-delay: 0.00s; }
.whu-card--2.reveal { transition-delay: 0.09s; }
.whu-card--3.reveal { transition-delay: 0.18s; }
.whu-card--4.reveal { transition-delay: 0.27s; }
.whu-card--5.reveal { transition-delay: 0.36s; }

/* Top gradient bar */
.whu-card__bar {
  height: 2.5px;
  width: 100%;
  flex-shrink: 0;
}
.whu-card__bar--blue    { background: linear-gradient(90deg, transparent, #3b82f6 35%, #60a5fa 65%, transparent); }
.whu-card__bar--violet  { background: linear-gradient(90deg, transparent, #7c3aed 35%, #a78bfa 65%, transparent); }
.whu-card__bar--emerald { background: linear-gradient(90deg, transparent, #059669 35%, #34d399 65%, transparent); }
.whu-card__bar--cyan    { background: linear-gradient(90deg, transparent, #0891b2 35%, #22d3ee 65%, transparent); }
.whu-card__bar--amber   { background: linear-gradient(90deg, transparent, #d97706 35%, #fbbf24 65%, transparent); }

/* Corner glow */
.whu-card__glow {
  position: absolute;
  top: -45px; right: -45px;
  width: 190px; height: 190px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.2;
}
.whu-card__glow--blue    { background: radial-gradient(circle, rgba(59,130,246,0.7)  0%, transparent 70%); }
.whu-card__glow--violet  { background: radial-gradient(circle, rgba(139,92,246,0.7)  0%, transparent 70%); }
.whu-card__glow--emerald { background: radial-gradient(circle, rgba(16,185,129,0.7)  0%, transparent 70%); }
.whu-card__glow--cyan    { background: radial-gradient(circle, rgba(34,211,238,0.65) 0%, transparent 70%); }
.whu-card__glow--amber   { background: radial-gradient(circle, rgba(251,191,36,0.6)  0%, transparent 70%); }

/* ── Card head: icon + number ── */
.whu-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 1.6rem 0;
}
.whu-card__icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s cubic-bezier(0.22,1,0.36,1), background 0.25s ease, border-color 0.25s ease;
}
.whu-card__icon--blue    { color: #60a5fa; background: rgba(59,130,246,0.1);  border: 1px solid rgba(59,130,246,0.18); }
.whu-card__icon--violet  { color: #a78bfa; background: rgba(139,92,246,0.1);  border: 1px solid rgba(139,92,246,0.18); }
.whu-card__icon--emerald { color: #34d399; background: rgba(16,185,129,0.1);  border: 1px solid rgba(16,185,129,0.18); }
.whu-card__icon--cyan    { color: #22d3ee; background: rgba(34,211,238,0.1);  border: 1px solid rgba(34,211,238,0.18); }
.whu-card__icon--amber   { color: #fbbf24; background: rgba(251,191,36,0.1);  border: 1px solid rgba(251,191,36,0.18); }

.whu-card--1:hover .whu-card__icon { box-shadow: 0 0 16px rgba(59,130,246,0.25); }
.whu-card--2:hover .whu-card__icon { box-shadow: 0 0 16px rgba(139,92,246,0.25); }
.whu-card--3:hover .whu-card__icon { box-shadow: 0 0 16px rgba(16,185,129,0.25); }
.whu-card--4:hover .whu-card__icon { box-shadow: 0 0 16px rgba(34,211,238,0.25); }
.whu-card--5:hover .whu-card__icon { box-shadow: 0 0 16px rgba(251,191,36,0.2); }

.whu-card__num {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  opacity: 0.28;
  color: rgba(255,255,255,0.9);
}

/* ── Body ── */
.whu-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.6rem 0;
}
.whu-card__title {
  font-size: 1rem;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
  line-height: 1.28;
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}
.whu-card__divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin-bottom: 1rem;
}

/* ── List ── */
.whu-card__list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 0.52rem;
  margin-top: auto;
}
.whu-card__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255,255,255,0.48);
  line-height: 1.4;
}
.whu-item__icon {
  flex-shrink: 0;
  width: 12px; height: 12px;
}
/* Check icon color per variant */
.whu-card__item--blue    .whu-item__icon { color: #60a5fa; }
.whu-card__item--violet  .whu-item__icon { color: #a78bfa; }
.whu-card__item--emerald .whu-item__icon { color: #34d399; }
.whu-card__item--cyan    .whu-item__icon { color: #22d3ee; }
.whu-card__item--amber   .whu-item__icon { color: #fbbf24; }

/* ── Footer ── */
.whu-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.6rem 0;
  margin-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.whu-card__pill {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.58rem;
  border-radius: 100px;
}
.whu-card__pill--blue    { color: #60a5fa; background: rgba(59,130,246,0.1);  border: 1px solid rgba(59,130,246,0.2); }
.whu-card__pill--violet  { color: #a78bfa; background: rgba(139,92,246,0.1);  border: 1px solid rgba(139,92,246,0.2); }
.whu-card__pill--emerald { color: #34d399; background: rgba(16,185,129,0.1);  border: 1px solid rgba(16,185,129,0.2); }
.whu-card__pill--cyan    { color: #22d3ee; background: rgba(34,211,238,0.1);  border: 1px solid rgba(34,211,238,0.2); }
.whu-card__pill--amber   { color: #fbbf24; background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.18); }

.whu-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
  transition: gap 0.2s ease, opacity 0.2s;
  opacity: 0.85;
}
.whu-card__link--blue    { color: #60a5fa; }
.whu-card__link--violet  { color: #a78bfa; }
.whu-card__link--emerald { color: #34d399; }
.whu-card__link--cyan    { color: #22d3ee; }
.whu-card__link--amber   { color: #fbbf24; }
.whu-card__link:hover { gap: 0.5rem; opacity: 1; }

/* ── Closing statement ── */
.whu-closing {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  max-width: 820px;
  margin: 0 auto;
}
.whu-closing__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,0.28), transparent);
}
.whu-closing__text {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255,255,255,0.28);
  text-align: center;
  white-space: nowrap;
  margin: 0;
  padding: 0 0.5rem;
  font-style: italic;
  letter-spacing: 0.01em;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .whu-grid { gap: 1rem; }
  .whu-card__head { padding: 1.4rem 1.4rem 0; }
  .whu-card__body { padding: 0.9rem 1.4rem 0; }
  .whu-card__footer { padding: 1rem 1.4rem 0; }
  .whu-split__img-photo { max-height: 360px; }
}
@media (max-width: 820px) {
  .whu-grid { grid-template-columns: repeat(2, 1fr); }
  /* Keep wide cards spanning full width */
  .whu-card--3 { grid-column: 1 / -1; }
  .whu-card--5 { grid-column: 1 / -1; }
  /* Card 4 flows normally */
  .whu-card--4 { grid-column: auto; grid-row: auto; }
  .whu-card--3.reveal,
  .whu-card--4.reveal,
  .whu-card--5.reveal { transition-delay: 0s; }
  .whu-closing__rule { display: none; }
  .whu-closing__text { white-space: normal; }
  .whu-br { display: none; }
  /* Split stacks vertically — image on top, text below */
  .whu-split        { grid-template-columns: 1fr; }
  .whu-split--reverse { grid-template-columns: 1fr; }
  .whu-split__text  { padding: 0 0 1.2rem 0; }
  .whu-split__text--right { padding: 0 0 1.2rem 0; order: 1; }
  .whu-split__img   { border-left: none; border-top: 1px solid rgba(16,185,129,0.1);  padding: 1.2rem 1.4rem; }
  .whu-split__img--left { order: 0; border-right: none; border-top: 1px solid rgba(251,191,36,0.1); padding: 1.2rem 1.4rem; }
  .whu-split__img-photo { max-height: 280px; width: 100%; }
}
@media (max-width: 560px) {
  .whu-section { padding: 4.5rem 0 4rem; }
  .whu-container { padding: 0 1.25rem; }
  .whu-grid { grid-template-columns: 1fr; gap: 0.9rem; }
  .whu-card--3, .whu-card--5 { grid-column: 1 / -1; }
  .whu-card__head { padding: 1.25rem 1.3rem 0; }
  .whu-card__body { padding: 0.85rem 1.3rem 0; }
  .whu-card__footer { padding: 0.95rem 1.3rem 0; }
  .whu-title { font-size: 1.72rem; }
  .whu-closing__text { font-size: 0.79rem; }
  .whu-split__img-photo { max-height: 220px; }
}


/* ============================================================
   SCIENTIFIC PERFORMANCE IMPACT  .sci-*
   ============================================================ */

/* ── Section wrapper ── */
.sci-section {
  position: relative;
  padding: 5.5rem 0 5rem;
  background: #05091a;
  overflow: hidden;
}
.sci-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

/* Dot-grid */
.sci-bg-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 28px 28px;
}
.sci-bg-glow1 {
  position: absolute;
  top: -160px; left: -100px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(99,102,241,0.09) 0%, transparent 65%);
  z-index: 0; pointer-events: none;
}
.sci-bg-glow2 {
  position: absolute;
  bottom: -120px; right: -60px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(34,211,238,0.07) 0%, transparent 65%);
  z-index: 0; pointer-events: none;
}

/* ── Header ── */
.sci-header {
  position: relative; z-index: 1;
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3.5rem;
}
.sci-title {
  font-size: clamp(1.85rem, 3.5vw, 2.75rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0.55rem 0 0.8rem;
}
.sci-subtitle {
  font-size: 0.97rem;
  color: rgba(255,255,255,0.38);
  line-height: 1.7;
  margin: 0 auto;
  max-width: 520px;
}
.sci-br { display: block; }

/* ── Cards grid ── */
.sci-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 3rem;
}

/* ── Single card ── */
.sci-card {
  position: relative;
  background: rgba(8, 14, 32, 0.82);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  padding: 1.6rem 1.5rem 1.5rem;
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s cubic-bezier(0.22,1,0.36,1), border-color 0.25s cubic-bezier(0.22,1,0.36,1);
}
.sci-card:hover { transform: translateY(-5px); }
.sci-card--1:hover { border-color: rgba(59,130,246,0.35);  box-shadow: 0 16px 48px rgba(59,130,246,0.12); }
.sci-card--2:hover { border-color: rgba(168,85,247,0.35);  box-shadow: 0 16px 48px rgba(168,85,247,0.12); }
.sci-card--3:hover { border-color: rgba(34,211,238,0.35);  box-shadow: 0 16px 48px rgba(34,211,238,0.12); }
.sci-card--4:hover { border-color: rgba(99,102,241,0.35);  box-shadow: 0 16px 48px rgba(99,102,241,0.12); }

/* Ambient glow blob inside card */
.sci-card__glow {
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.35;
}
.sci-card--1 .sci-card__glow { background: radial-gradient(circle, rgba(59,130,246,0.4) 0%, transparent 70%); }
.sci-card--2 .sci-card__glow { background: radial-gradient(circle, rgba(168,85,247,0.4) 0%, transparent 70%); }
.sci-card--3 .sci-card__glow { background: radial-gradient(circle, rgba(34,211,238,0.35) 0%, transparent 70%); }
.sci-card--4 .sci-card__glow { background: radial-gradient(circle, rgba(99,102,241,0.4) 0%, transparent 70%); }

/* Top row: icon + badge */
.sci-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}
.sci-card__icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.sci-card__icon--blue   { background: rgba(59,130,246,0.12);  color: #60a5fa; border: 1px solid rgba(59,130,246,0.2); }
.sci-card__icon--purple { background: rgba(168,85,247,0.12); color: #c084fc; border: 1px solid rgba(168,85,247,0.2); }
.sci-card__icon--cyan   { background: rgba(34,211,238,0.1);  color: #22d3ee; border: 1px solid rgba(34,211,238,0.2); }
.sci-card__icon--indigo { background: rgba(99,102,241,0.12); color: #818cf8; border: 1px solid rgba(99,102,241,0.2); }

.sci-card__badge {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  border-radius: 100px;
}
.sci-card__badge--blue   { color: #60a5fa; background: rgba(59,130,246,0.1);  border: 1px solid rgba(59,130,246,0.2); }
.sci-card__badge--purple { color: #c084fc; background: rgba(168,85,247,0.1); border: 1px solid rgba(168,85,247,0.2); }
.sci-card__badge--cyan   { color: #22d3ee; background: rgba(34,211,238,0.1); border: 1px solid rgba(34,211,238,0.2); }
.sci-card__badge--indigo { color: #818cf8; background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.2); }

/* Percentage value */
.sci-card__value-row {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  margin-bottom: 0.85rem;
  line-height: 1;
}
.sci-card__num {
  font-size: clamp(2.8rem, 4.5vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.sci-card__num--blue   { color: #60a5fa; text-shadow: 0 0 28px rgba(59,130,246,0.55), 0 0 8px rgba(59,130,246,0.4); }
.sci-card__num--purple { color: #c084fc; text-shadow: 0 0 28px rgba(168,85,247,0.55), 0 0 8px rgba(168,85,247,0.4); }
.sci-card__num--cyan   { color: #22d3ee; text-shadow: 0 0 28px rgba(34,211,238,0.55), 0 0 8px rgba(34,211,238,0.4); }
.sci-card__num--indigo { color: #818cf8; text-shadow: 0 0 28px rgba(99,102,241,0.55), 0 0 8px rgba(99,102,241,0.4); }

.sci-card__pct {
  font-size: 1.4rem;
  font-weight: 800;
  opacity: 0.7;
}
.sci-card__pct--blue   { color: #60a5fa; }
.sci-card__pct--purple { color: #c084fc; }
.sci-card__pct--cyan   { color: #22d3ee; }
.sci-card__pct--indigo { color: #818cf8; }

/* Progress bar */
.sci-card__bar-wrap {
  margin-bottom: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.sci-card__bar-track {
  height: 4px;
  border-radius: 100px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.sci-card__bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 100px;
  transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.sci-card__bar-fill--blue   { background: linear-gradient(90deg, #3b82f6, #60a5fa); box-shadow: 0 0 8px rgba(59,130,246,0.6); }
.sci-card__bar-fill--purple { background: linear-gradient(90deg, #9333ea, #c084fc); box-shadow: 0 0 8px rgba(168,85,247,0.6); }
.sci-card__bar-fill--cyan   { background: linear-gradient(90deg, #0891b2, #22d3ee); box-shadow: 0 0 8px rgba(34,211,238,0.6); }
.sci-card__bar-fill--indigo { background: linear-gradient(90deg, #4f46e5, #818cf8); box-shadow: 0 0 8px rgba(99,102,241,0.6); }

.sci-card__bar-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
}

/* Card name + description */
.sci-card__name {
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin: 0 0 0.55rem;
  line-height: 1.2;
}
.sci-card__desc {
  font-size: 0.8rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.35);
  margin: 0;
}

/* Staggered reveal delays */
.sci-card--1.reveal { transition-delay: 0.00s; }
.sci-card--2.reveal { transition-delay: 0.09s; }
.sci-card--3.reveal { transition-delay: 0.18s; }
.sci-card--4.reveal { transition-delay: 0.27s; }

/* ── Closing statement ── */
.sci-closing {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}
.sci-closing__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,0.3), transparent);
}
.sci-closing__text {
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255,255,255,0.35);
  text-align: center;
  white-space: nowrap;
  margin: 0;
  padding: 0 0.5rem;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .sci-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .sci-card--3.reveal, .sci-card--4.reveal { transition-delay: 0s; }
}
@media (max-width: 640px) {
  .sci-section { padding: 4rem 0 3.5rem; }
  .sci-container { padding: 0 1.25rem; }
  .sci-grid { grid-template-columns: 1fr; gap: 0.9rem; }
  .sci-card { padding: 1.3rem 1.2rem 1.2rem; }
  .sci-card--2.reveal, .sci-card--3.reveal, .sci-card--4.reveal { transition-delay: 0s; }
  .sci-closing__line { display: none; }
  .sci-closing__text { white-space: normal; font-size: 0.83rem; }
  .sci-br { display: none; }
}

/* ============================================================
   COMPLETE PLATFORM  .cp-*
   ============================================================ */

/* ── Section ── */
.cp-section {
  position: relative;
  padding: 6rem 0 5.5rem;
  background: #040817;
  overflow: hidden;
}
.cp-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

/* Backgrounds */
.cp-bg-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 32px 32px;
}
.cp-bg-glow1 {
  position: absolute; top: -200px; left: -120px;
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, transparent 65%);
  z-index: 0; pointer-events: none;
}
.cp-bg-glow2 {
  position: absolute; top: 30%; right: -100px;
  width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(168,85,247,0.07) 0%, transparent 65%);
  z-index: 0; pointer-events: none;
}
.cp-bg-glow3 {
  position: absolute; bottom: -180px; left: 40%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(34,211,238,0.06) 0%, transparent 65%);
  z-index: 0; pointer-events: none;
}

/* ── Header ── */
.cp-header {
  position: relative; z-index: 1;
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
}
.cp-title {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0.55rem 0 0.9rem;
}
.cp-subtitle {
  font-size: 1rem;
  color: rgba(255,255,255,0.38);
  line-height: 1.72;
  max-width: 580px;
  margin: 0 auto;
}
.cp-br { display: block; }

/* ── Cards grid ── */
.cp-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
  margin-bottom: 0;
}

/* ── Single card ── */
.cp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(7, 12, 28, 0.88);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 2rem 1.85rem 1.75rem;
  overflow: hidden;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s cubic-bezier(0.22,1,0.36,1), border-color 0.25s cubic-bezier(0.22,1,0.36,1);
}
.cp-card:hover { transform: translateY(-6px); }
.cp-card--1:hover { border-color: rgba(59,130,246,0.3);  box-shadow: 0 20px 60px rgba(59,130,246,0.1); }
.cp-card--2:hover { border-color: rgba(168,85,247,0.3);  box-shadow: 0 20px 60px rgba(168,85,247,0.1); }
.cp-card--3:hover { border-color: rgba(34,211,238,0.3);  box-shadow: 0 20px 60px rgba(34,211,238,0.1); }

/* Stagger reveal */
.cp-card--1.reveal { transition-delay: 0.00s; }
.cp-card--2.reveal { transition-delay: 0.09s; }
.cp-card--3.reveal { transition-delay: 0.18s; }

/* Top accent bar */
.cp-card__accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 20px 20px 0 0;
}
.cp-card__accent--blue   { background: linear-gradient(90deg, transparent 0%, #3b82f6 40%, #60a5fa 60%, transparent 100%); }
.cp-card__accent--purple { background: linear-gradient(90deg, transparent 0%, #9333ea 40%, #c084fc 60%, transparent 100%); }
.cp-card__accent--cyan   { background: linear-gradient(90deg, transparent 0%, #0891b2 40%, #22d3ee 60%, transparent 100%); }

/* Corner glow */
.cp-card__corner-glow {
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.28;
}
.cp-card__corner-glow--blue   { background: radial-gradient(circle, rgba(59,130,246,0.5) 0%, transparent 70%); }
.cp-card__corner-glow--purple { background: radial-gradient(circle, rgba(168,85,247,0.5) 0%, transparent 70%); }
.cp-card__corner-glow--cyan   { background: radial-gradient(circle, rgba(34,211,238,0.45) 0%, transparent 70%); }

/* Icon */
.cp-card__icon-wrap {
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
  position: relative;
}
.cp-card__icon-wrap--blue   { background: rgba(59,130,246,0.1);  color: #60a5fa;  border: 1px solid rgba(59,130,246,0.2); }
.cp-card__icon-wrap--purple { background: rgba(168,85,247,0.1); color: #c084fc; border: 1px solid rgba(168,85,247,0.2); }
.cp-card__icon-wrap--cyan   { background: rgba(34,211,238,0.1);  color: #22d3ee;  border: 1px solid rgba(34,211,238,0.2); }

/* Glow pulse on icon */
@keyframes cpIconPulse {
  0%,100% { box-shadow: 0 0 0 0 transparent; }
  50%      { box-shadow: 0 0 0 6px rgba(255,255,255,0.04); }
}
.cp-card:hover .cp-card__icon-wrap { transform: scale(1.15); }

/* Card number badge */
.cp-card__num {
  position: absolute;
  top: 1.6rem; right: 1.75rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  opacity: 0.35;
}
.cp-card__num--blue   { color: #60a5fa; }
.cp-card__num--purple { color: #c084fc; }
.cp-card__num--cyan   { color: #22d3ee; }

/* Body */
.cp-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cp-card__title {
  font-size: 1.08rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  margin: 0 0 0.7rem;
  letter-spacing: -0.01em;
}
.cp-card__desc {
  font-size: 0.84rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.38);
  margin: 0 0 1.3rem;
}

/* Feature list */
.cp-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: auto;
  padding-top: 0.2rem;
}
.cp-card__list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  line-height: 1.45;
}
.cp-card__list-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-top: 0.38em;
  flex-shrink: 0;
}
.cp-card__list-dot--blue   { background: #3b82f6; box-shadow: 0 0 6px rgba(59,130,246,0.7); }
.cp-card__list-dot--cyan   { background: #22d3ee; box-shadow: 0 0 6px rgba(34,211,238,0.7); }

/* Ability chips (card 2) */
.cp-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 0.2rem;
}
.cp-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.28rem 0.7rem;
  border-radius: 100px;
}
.cp-chip--purple {
  color: #c084fc;
  background: rgba(168,85,247,0.1);
  border: 1px solid rgba(168,85,247,0.22);
}

/* Card footer */
.cp-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.cp-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: gap 0.2s ease, opacity 0.2s ease;
}
.cp-card__link--blue   { color: #60a5fa; }
.cp-card__link--purple { color: #c084fc; }
.cp-card__link--cyan   { color: #22d3ee; }
.cp-card__link:hover { gap: 0.55rem; opacity: 1; }

.cp-card__tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
}
.cp-card__tag--blue   { color: #60a5fa; background: rgba(59,130,246,0.1);  border: 1px solid rgba(59,130,246,0.18); }
.cp-card__tag--purple { color: #c084fc; background: rgba(168,85,247,0.1); border: 1px solid rgba(168,85,247,0.18); }
.cp-card__tag--cyan   { color: #22d3ee; background: rgba(34,211,238,0.1);  border: 1px solid rgba(34,211,238,0.18); }

/* ── Connector row between cards (decorative) ── */
.cp-connectors {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* sits on top of the cards row visually — use negative margin */
  margin-top: -1px;
  /* hide on smaller screens */
  pointer-events: none;
}
.cp-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  /* push to the right edge of each card */
  grid-column: span 1;
}
/* Show only in the gap columns: 1st after card1, 2nd after card2 */
.cp-connectors .cp-connector:nth-child(1) {
  grid-column: 1;
  transform: translateX(100%);
  margin-top: -30px;
}
.cp-connectors .cp-connector:nth-child(2) {
  grid-column: 2;
  transform: translateX(100%);
  margin-top: -30px;
}
.cp-connector__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  max-width: 20px;
}
.cp-connector__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  flex-shrink: 0;
}

/* ── Closing statement ── */
.cp-statement {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255,255,255,0.3);
  text-align: center;
  margin: 3rem auto 0;
  max-width: 480px;
  line-height: 1.6;
}
.cp-statement__dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cp-statement__dot--blue   { background: #3b82f6; box-shadow: 0 0 6px rgba(59,130,246,0.7); }
.cp-statement__dot--purple { background: #a855f7; box-shadow: 0 0 6px rgba(168,85,247,0.7); }
.cp-statement__dot--cyan   { background: #22d3ee; box-shadow: 0 0 6px rgba(34,211,238,0.7); }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .cp-grid { gap: 1.1rem; }
  .cp-card { padding: 1.75rem 1.5rem 1.5rem; }
}
@media (max-width: 860px) {
  .cp-grid { grid-template-columns: 1fr; gap: 1rem; max-width: 540px; margin: 0 auto; }
  .cp-card--2.reveal, .cp-card--3.reveal { transition-delay: 0s; }
  .cp-connectors { display: none; }
  .cp-br { display: none; }
}
@media (max-width: 640px) {
  .cp-section { padding: 4.5rem 0 4rem; }
  .cp-container { padding: 0 1.25rem; }
  .cp-grid { max-width: 100%; }
  .cp-card { padding: 1.5rem 1.3rem 1.35rem; border-radius: 16px; }
  .cp-title { font-size: 1.75rem; }
  .cp-statement { font-size: 0.78rem; }
}

/* ============================================================
   DESIGNED FOR EVERY LEVEL  .fl-*
   ============================================================ */

/* ── Section ── */
.fl-section {
  position: relative;
  padding: 6rem 0 5.5rem;
  background: #060a1c;
  overflow: hidden;
}
.fl-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

/* Backgrounds */
.fl-bg-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.024) 1px, transparent 1px);
  background-size: 30px 30px;
}
.fl-bg-glow1 {
  position: absolute;
  top: -180px; left: -80px;
  width: 680px; height: 680px;
  background: radial-gradient(circle, rgba(16,185,129,0.07) 0%, transparent 65%);
  z-index: 0; pointer-events: none;
}
.fl-bg-glow2 {
  position: absolute;
  bottom: -160px; right: -60px;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(139,92,246,0.07) 0%, transparent 65%);
  z-index: 0; pointer-events: none;
}

/* ── Header ── */
.fl-header {
  position: relative; z-index: 1;
  text-align: center;
  max-width: 660px;
  margin: 0 auto 4rem;
}
.fl-title {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0.55rem 0 0.9rem;
}
.fl-subtitle {
  font-size: 0.98rem;
  color: rgba(255,255,255,0.38);
  line-height: 1.72;
  max-width: 560px;
  margin: 0 auto;
}
.fl-br { display: block; }

/* ── Grid ── */
.fl-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
  margin-bottom: 3rem;
}

/* ── Card base ── */
.fl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(7, 11, 26, 0.9);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 0 0 1.75rem;
  overflow: hidden;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s cubic-bezier(0.22,1,0.36,1), border-color 0.25s cubic-bezier(0.22,1,0.36,1);
}
.fl-card:hover { transform: translateY(-6px); }
.fl-card--1:hover { border-color: rgba(16,185,129,0.3);  box-shadow: 0 20px 56px rgba(16,185,129,0.1); }
.fl-card--2:hover { border-color: rgba(59,130,246,0.3);  box-shadow: 0 20px 56px rgba(59,130,246,0.1); }
.fl-card--3:hover { border-color: rgba(139,92,246,0.3);  box-shadow: 0 20px 56px rgba(139,92,246,0.1); }

/* Staggered reveal */
.fl-card--1.reveal { transition-delay: 0s; }
.fl-card--2.reveal { transition-delay: 0.11s; }
.fl-card--3.reveal { transition-delay: 0.22s; }

/* ── Top color bar (full width, sits at very top) ── */
.fl-card__top-bar {
  height: 3px;
  width: 100%;
  flex-shrink: 0;
}
.fl-card__top-bar--emerald { background: linear-gradient(90deg, transparent, #10b981 30%, #34d399 70%, transparent); }
.fl-card__top-bar--blue    { background: linear-gradient(90deg, transparent, #3b82f6 30%, #60a5fa 70%, transparent); }
.fl-card__top-bar--violet  { background: linear-gradient(90deg, transparent, #7c3aed 30%, #a78bfa 70%, transparent); }

/* ── Corner ambient glow ── */
.fl-card__bg-glow {
  position: absolute;
  top: -50px; right: -50px;
  width: 220px; height: 220px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.22;
}
.fl-card__bg-glow--emerald { background: radial-gradient(circle, rgba(16,185,129,0.6) 0%, transparent 70%); }
.fl-card__bg-glow--blue    { background: radial-gradient(circle, rgba(59,130,246,0.6) 0%, transparent 70%); }
.fl-card__bg-glow--violet  { background: radial-gradient(circle, rgba(139,92,246,0.6) 0%, transparent 70%); }

/* ── Icon ── */
.fl-card__icon {
  width: 50px; height: 50px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin: 1.85rem 1.85rem 0;
  flex-shrink: 0;
  transition: box-shadow 0.25s ease;
}
.fl-card__icon--emerald {
  color: #34d399;
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.2);
}
.fl-card__icon--blue {
  color: #60a5fa;
  background: rgba(59,130,246,0.1);
  border: 1px solid rgba(59,130,246,0.2);
}
.fl-card__icon--violet {
  color: #a78bfa;
  background: rgba(139,92,246,0.1);
  border: 1px solid rgba(139,92,246,0.2);
}
.fl-card:hover .fl-card__icon--emerald { box-shadow: 0 0 18px rgba(16,185,129,0.25); }
.fl-card:hover .fl-card__icon--blue    { box-shadow: 0 0 18px rgba(59,130,246,0.25); }
.fl-card:hover .fl-card__icon--violet  { box-shadow: 0 0 18px rgba(139,92,246,0.25); }

/* ── Number badge ── */
.fl-card__num {
  position: absolute;
  top: 1.5rem; right: 1.75rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  opacity: 0.3;
}
.fl-card__num--emerald { color: #34d399; }
.fl-card__num--blue    { color: #60a5fa; }
.fl-card__num--violet  { color: #a78bfa; }

/* ── Body ── */
.fl-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.85rem 0;
}
.fl-card__title {
  font-size: 1.07rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  margin: 0 0 0.65rem;
  letter-spacing: -0.01em;
}
.fl-card__desc {
  font-size: 0.83rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.37);
  margin: 0 0 1.25rem;
}

/* ── Feature list ── */
.fl-card__list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 0.6rem;
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 1.1rem;
}
.fl-card__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.81rem;
  font-weight: 500;
  color: rgba(255,255,255,0.52);
  line-height: 1.45;
}
.fl-card__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-top: 0.4em;
  flex-shrink: 0;
}
.fl-card__dot--emerald { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,0.7); }
.fl-card__dot--blue    { background: #3b82f6; box-shadow: 0 0 6px rgba(59,130,246,0.7); }
.fl-card__dot--violet  { background: #7c3aed; box-shadow: 0 0 6px rgba(139,92,246,0.7); }

/* ── Footer ── */
.fl-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.85rem 0;
  margin-top: 1.35rem;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.fl-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: gap 0.2s ease;
}
.fl-card__link--emerald { color: #34d399; }
.fl-card__link--blue    { color: #60a5fa; }
.fl-card__link--violet  { color: #a78bfa; }
.fl-card__link:hover { gap: 0.52rem; }

.fl-card__pill {
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.58rem;
  border-radius: 100px;
}
.fl-card__pill--emerald { color: #34d399; background: rgba(16,185,129,0.1);  border: 1px solid rgba(16,185,129,0.2); }
.fl-card__pill--blue    { color: #60a5fa; background: rgba(59,130,246,0.1);  border: 1px solid rgba(59,130,246,0.2); }
.fl-card__pill--violet  { color: #a78bfa; background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.2); }

/* ── Closing statement ── */
.fl-statement {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  max-width: 780px;
  margin: 0 auto;
}
.fl-statement__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,0.25), transparent);
}
.fl-statement__text {
  font-size: 0.86rem;
  font-weight: 500;
  color: rgba(255,255,255,0.3);
  text-align: center;
  white-space: nowrap;
  margin: 0;
  padding: 0 0.5rem;
  font-style: italic;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .fl-grid { gap: 1.1rem; }
  .fl-card__body  { padding: 1rem 1.5rem 0; }
  .fl-card__footer { padding: 1.1rem 1.5rem 0; }
  .fl-card__icon  { margin: 1.5rem 1.5rem 0; }
}
@media (max-width: 820px) {
  .fl-grid { grid-template-columns: 1fr; gap: 1rem; max-width: 520px; margin: 0 auto 3rem; }
  .fl-card--2.reveal, .fl-card--3.reveal { transition-delay: 0s; }
  .fl-statement__rule { display: none; }
  .fl-statement__text { white-space: normal; }
  .fl-br { display: none; }
}
@media (max-width: 580px) {
  .fl-section { padding: 4.5rem 0 4rem; }
  .fl-container { padding: 0 1.25rem; }
  .fl-grid { max-width: 100%; }
  .fl-card__body  { padding: 0.9rem 1.3rem 0; }
  .fl-card__footer { padding: 1rem 1.3rem 0; }
  .fl-card__icon  { margin: 1.5rem 1.3rem 0; }
  .fl-title { font-size: 1.75rem; }
  .fl-statement__text { font-size: 0.8rem; }
}

/* ============================================================
   FINAL CTA  .fcta-*
   ============================================================ */

.fcta-section {
  position: relative;
  padding: 7rem 0 6rem;
  background: #05070d;
  overflow: hidden;
  isolation: isolate;
}

.fcta-container {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}

/* ── background layers ── */
.fcta-bg-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(96,165,250,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

.fcta-bg-glow1 {
  position: absolute; z-index: 0;
  width: 600px; height: 600px;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(96,165,250,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.fcta-bg-glow2 {
  position: absolute; z-index: 0;
  width: 400px; height: 400px;
  bottom: -80px; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(168,85,247,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.fcta-orb {
  position: absolute; z-index: 0;
  width: 260px; height: 260px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.35;
}
.fcta-orb--left  { left: -80px;  top: 40%;  background: rgba(96,165,250,0.18); }
.fcta-orb--right { right: -80px; bottom: 20%; background: rgba(168,85,247,0.18); }

/* ── eyebrow ── */
.fcta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(96,165,250,0.85);
  margin-bottom: 1.6rem;
}
.fcta-eyebrow__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #60a5fa;
  box-shadow: 0 0 8px 2px rgba(96,165,250,0.7);
  animation: fcta-dot-pulse 2.4s ease-in-out infinite;
}
.fcta-eyebrow__dot:last-child { animation-delay: 1.2s; }
@keyframes fcta-dot-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.6); }
}

/* ── title ── */
.fcta-title {
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 1.4rem;
}

/* ── subtitle ── */
.fcta-subtitle {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.52);
  max-width: 560px;
  margin: 0 auto 3rem;
}

/* ── PRIMARY BUTTON ── */
.fcta-primary { margin-bottom: 1.8rem; }

.fcta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 2.4rem;
  border-radius: 50px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #0a0f1e;
  background: linear-gradient(135deg, #60a5fa 0%, #818cf8 55%, #a78bfa 100%);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  box-shadow:
    0 0 0 1px rgba(96,165,250,0.35),
    0 4px 24px rgba(96,165,250,0.3),
    0 8px 40px rgba(96,165,250,0.18);
}
.fcta-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(96,165,250,0.5),
    0 8px 32px rgba(96,165,250,0.45),
    0 16px 56px rgba(96,165,250,0.28);
}
.fcta-btn:active { transform: translateY(-1px) scale(1); }

.fcta-btn__text { position: relative; z-index: 1; }
.fcta-btn__icon {
  position: relative; z-index: 1;
  display: flex; align-items: center;
  transition: transform 0.22s ease;
}
.fcta-btn:hover .fcta-btn__icon { transform: translateX(4px); }

.fcta-btn__glow {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 60%);
  pointer-events: none;
}

/* ── SECONDARY LINKS ── */
/* ── SECONDARY CARDS ── */
.fcta-secondary {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3.5rem;
}

.fcta-sec-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.95rem 1.4rem 0.95rem 1.1rem;
  border-radius: 14px;
  text-decoration: none;
  min-width: 240px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.fcta-sec-card:hover {
  transform: translateY(-3px);
}

/* violet variant — Become a Partner */
.fcta-sec-card--violet {
  border-color: rgba(167,139,250,0.25);
}
.fcta-sec-card--violet:hover {
  border-color: rgba(167,139,250,0.55);
  box-shadow: 0 4px 24px rgba(167,139,250,0.18), 0 1px 0 rgba(167,139,250,0.12) inset;
}
.fcta-sec-card--violet .fcta-sec-card__icon { color: #a78bfa; background: rgba(167,139,250,0.1); border-color: rgba(167,139,250,0.2); }
.fcta-sec-card--violet .fcta-sec-card__label { color: #a78bfa; }
.fcta-sec-card--violet .fcta-sec-card__arrow { color: #a78bfa; }
.fcta-sec-card--violet .fcta-sec-card__glow  { background: radial-gradient(circle at 0% 50%, rgba(167,139,250,0.12) 0%, transparent 70%); }

/* cyan variant — Distributor */
.fcta-sec-card--cyan {
  border-color: rgba(34,211,238,0.22);
}
.fcta-sec-card--cyan:hover {
  border-color: rgba(34,211,238,0.5);
  box-shadow: 0 4px 24px rgba(34,211,238,0.16), 0 1px 0 rgba(34,211,238,0.1) inset;
}
.fcta-sec-card--cyan .fcta-sec-card__icon { color: #22d3ee; background: rgba(34,211,238,0.08); border-color: rgba(34,211,238,0.18); }
.fcta-sec-card--cyan .fcta-sec-card__label { color: #22d3ee; }
.fcta-sec-card--cyan .fcta-sec-card__arrow { color: #22d3ee; }
.fcta-sec-card--cyan .fcta-sec-card__glow  { background: radial-gradient(circle at 0% 50%, rgba(34,211,238,0.10) 0%, transparent 70%); }

/* shared inner elements */
.fcta-sec-card__glow {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
.fcta-sec-card__icon {
  position: relative; z-index: 1;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: transform 0.2s ease;
}
.fcta-sec-card:hover .fcta-sec-card__icon { transform: scale(1.1); }

.fcta-sec-card__body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 0.18rem;
  flex: 1;
  text-align: left;
}
.fcta-sec-card__label {
  font-size: 0.93rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.fcta-sec-card__sub {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.38);
  font-weight: 400;
  letter-spacing: 0.01em;
}
.fcta-sec-card__arrow {
  position: relative; z-index: 1;
  flex-shrink: 0;
  display: flex; align-items: center;
  opacity: 0.5;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.fcta-sec-card:hover .fcta-sec-card__arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* ── divider ── */
.fcta-divider {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 2.2rem;
}
.fcta-divider__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(96,165,250,0.2), rgba(168,85,247,0.2), transparent);
}
.fcta-divider__diamond {
  width: 7px; height: 7px;
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(96,165,250,0.6);
  flex-shrink: 0;
}

/* ── closing tagline ── */
.fcta-tagline {
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  font-style: italic;
  font-weight: 500;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.01em;
  margin: 0;
}
.fcta-tagline__accent {
  font-weight: 700;
  font-style: normal;
  background: linear-gradient(90deg, #60a5fa, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── responsive ── */
.fcta-br { display: block; }
@media (max-width: 640px) {
  .fcta-section   { padding: 5rem 0 4.5rem; }
  .fcta-title     { font-size: 1.85rem; }
  .fcta-subtitle  { font-size: 0.95rem; }
  .fcta-btn       { padding: 0.9rem 2rem; font-size: 0.97rem; }
  .fcta-br        { display: none; }
  .fcta-secondary { flex-direction: column; align-items: center; gap: 0.75rem; }
  .fcta-sec-card  { width: 100%; max-width: 340px; min-width: unset; }
}

/* ============================================================
   CARD MICRO-INTERACTIONS — v2
   Hover: lift · glow border · icon scale · inner accent
   Duration: 0.25s | easing: cubic-bezier(0.22,1,0.36,1)
   ============================================================ */

/* ── Shared icon scale helper ─────────────────────────────
   Applied to every icon element inside a card on hover.
   Each card family targets its own icon selector below.
   Scale 1.15 = subtle but clearly perceptible.
─────────────────────────────────────────────────────────── */

/* ── sci-card ─────────────────────────────────────────── */
.sci-card:hover { transform: translateY(-6px); }

.sci-card--1:hover {
  border-color: rgba(59,130,246,0.55);
  box-shadow:
    0 20px 56px rgba(59,130,246,0.18),
    0 0 0 1px rgba(59,130,246,0.18) inset;
}
.sci-card--2:hover {
  border-color: rgba(168,85,247,0.55);
  box-shadow:
    0 20px 56px rgba(168,85,247,0.18),
    0 0 0 1px rgba(168,85,247,0.18) inset;
}
.sci-card--3:hover {
  border-color: rgba(34,211,238,0.55);
  box-shadow:
    0 20px 56px rgba(34,211,238,0.18),
    0 0 0 1px rgba(34,211,238,0.18) inset;
}
.sci-card--4:hover {
  border-color: rgba(99,102,241,0.55);
  box-shadow:
    0 20px 56px rgba(99,102,241,0.18),
    0 0 0 1px rgba(99,102,241,0.18) inset;
}

/* Icon scale + glow intensify */
.sci-card:hover .sci-card__icon { transform: scale(1.15); }
.sci-card--1:hover .sci-card__icon--blue   { background: rgba(59,130,246,0.22);  border-color: rgba(59,130,246,0.45);  box-shadow: 0 0 18px rgba(59,130,246,0.35); }
.sci-card--2:hover .sci-card__icon--purple { background: rgba(168,85,247,0.22);  border-color: rgba(168,85,247,0.45);  box-shadow: 0 0 18px rgba(168,85,247,0.35); }
.sci-card--3:hover .sci-card__icon--cyan   { background: rgba(34,211,238,0.18);  border-color: rgba(34,211,238,0.45);  box-shadow: 0 0 18px rgba(34,211,238,0.30); }
.sci-card--4:hover .sci-card__icon--indigo { background: rgba(99,102,241,0.22);  border-color: rgba(99,102,241,0.45);  box-shadow: 0 0 18px rgba(99,102,241,0.30); }

/* ── cp-card ──────────────────────────────────────────── */
.cp-card:hover { transform: translateY(-7px); }

.cp-card--1:hover {
  border-color: rgba(59,130,246,0.50);
  box-shadow:
    0 24px 64px rgba(59,130,246,0.16),
    0 0 0 1px rgba(59,130,246,0.16) inset;
}
.cp-card--2:hover {
  border-color: rgba(168,85,247,0.50);
  box-shadow:
    0 24px 64px rgba(168,85,247,0.16),
    0 0 0 1px rgba(168,85,247,0.16) inset;
}
.cp-card--3:hover {
  border-color: rgba(34,211,238,0.50);
  box-shadow:
    0 24px 64px rgba(34,211,238,0.16),
    0 0 0 1px rgba(34,211,238,0.16) inset;
}

/* Icon — scale replaces the old cpIconPulse animation */
.cp-card--1:hover .cp-card__icon-wrap { transform: scale(1.15); background: rgba(59,130,246,0.18);  border-color: rgba(59,130,246,0.45);  box-shadow: 0 0 20px rgba(59,130,246,0.30); }
.cp-card--2:hover .cp-card__icon-wrap { transform: scale(1.15); background: rgba(168,85,247,0.18); border-color: rgba(168,85,247,0.45); box-shadow: 0 0 20px rgba(168,85,247,0.30); }
.cp-card--3:hover .cp-card__icon-wrap { transform: scale(1.15); background: rgba(34,211,238,0.18);  border-color: rgba(34,211,238,0.45);  box-shadow: 0 0 20px rgba(34,211,238,0.28); }

/* ── whu-card ─────────────────────────────────────────── */
.whu-card:hover { transform: translateY(-6px); }

.whu-card--1:hover { border-color: rgba(59,130,246,0.50);  box-shadow: 0 20px 54px rgba(59,130,246,0.16),  0 0 0 1px rgba(59,130,246,0.14) inset; }
.whu-card--2:hover { border-color: rgba(139,92,246,0.50);  box-shadow: 0 20px 54px rgba(139,92,246,0.16),  0 0 0 1px rgba(139,92,246,0.14) inset; }
.whu-card--3:hover { border-color: rgba(16,185,129,0.50);  box-shadow: 0 20px 54px rgba(16,185,129,0.16),  0 0 0 1px rgba(16,185,129,0.14) inset; }
.whu-card--4:hover { border-color: rgba(34,211,238,0.50);  box-shadow: 0 20px 54px rgba(34,211,238,0.16),  0 0 0 1px rgba(34,211,238,0.14) inset; }
.whu-card--5:hover { border-color: rgba(251,191,36,0.50);   box-shadow: 0 20px 54px rgba(251,191,36,0.16),   0 0 0 1px rgba(251,191,36,0.14) inset; }

/* Icon scale + glow intensify */
.whu-card:hover .whu-card__icon { transform: scale(1.15); }
.whu-card--1:hover .whu-card__icon { background: rgba(59,130,246,0.20);  border-color: rgba(59,130,246,0.42);  box-shadow: 0 0 18px rgba(59,130,246,0.30); }
.whu-card--2:hover .whu-card__icon { background: rgba(139,92,246,0.20);  border-color: rgba(139,92,246,0.42);  box-shadow: 0 0 18px rgba(139,92,246,0.30); }
.whu-card--3:hover .whu-card__icon { background: rgba(16,185,129,0.20);  border-color: rgba(16,185,129,0.42);  box-shadow: 0 0 18px rgba(16,185,129,0.28); }
.whu-card--4:hover .whu-card__icon { background: rgba(34,211,238,0.18);  border-color: rgba(34,211,238,0.42);  box-shadow: 0 0 18px rgba(34,211,238,0.28); }
.whu-card--5:hover .whu-card__icon { background: rgba(251,191,36,0.18);   border-color: rgba(251,191,36,0.42);   box-shadow: 0 0 18px rgba(251,191,36,0.28); }

/* ── ite-card ─────────────────────────────────────────── */
.ite-card:hover { transform: translateY(-7px); }

#ite-card-1:hover { border-color: rgba(96,165,250,0.55);  box-shadow: 0 22px 56px rgba(96,165,250,0.18),  0 0 0 1px rgba(96,165,250,0.14) inset; }
#ite-card-2:hover { border-color: rgba(139,92,246,0.55);  box-shadow: 0 22px 56px rgba(139,92,246,0.18),  0 0 0 1px rgba(139,92,246,0.14) inset; }
#ite-card-3:hover { border-color: rgba(34,211,238,0.55);  box-shadow: 0 22px 56px rgba(34,211,238,0.18),  0 0 0 1px rgba(34,211,238,0.14) inset; }

/* ── cog-card ─────────────────────────────────────────── */
.cog-card:hover { transform: translateY(-5px); }

/* Lift accent hairline immediately */
.cog-card:hover .cog-card__accent { opacity: 1; height: 2px; }

/* Icon scale — selector targets the .cog-card__icon wrapper */
.cog-card:hover .cog-card__icon { transform: scale(1.15); }

/* Per-colour icon intensify */
.cog-card:hover .cog-card__icon--purple  { background: rgba(155,61,232,0.22);  border-color: rgba(155,61,232,0.45);  box-shadow: 0 0 18px rgba(155,61,232,0.30); }
.cog-card:hover .cog-card__icon--indigo  { background: rgba(129,140,248,0.22); border-color: rgba(129,140,248,0.45); box-shadow: 0 0 18px rgba(129,140,248,0.28); }
.cog-card:hover .cog-card__icon--violet  { background: rgba(167,139,250,0.22); border-color: rgba(167,139,250,0.45); box-shadow: 0 0 18px rgba(167,139,250,0.28); }
.cog-card:hover .cog-card__icon--cyan    { background: rgba(0,200,232,0.18);   border-color: rgba(0,200,232,0.45);   box-shadow: 0 0 18px rgba(0,200,232,0.26); }
.cog-card:hover .cog-card__icon--gradient{ box-shadow: 0 0 22px rgba(155,61,232,0.38); }

/* Featured cog-card gets stronger lift */
.cog-card--featured:hover { transform: translateY(-7px); border-color: rgba(155,61,232,0.45); }

/* ── plat-card (already detailed — add icon scale) ────── */
.plat-card:hover .plat-card__icon--1,
.plat-card:hover .plat-card__icon--2,
.plat-card:hover .plat-card__icon--3 { transform: scale(1.12); }

/* ── cog-card icon transition (missing from base) ────── */
.cog-card__icon {
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.25s ease,
              background 0.25s ease,
              border-color 0.25s ease;
}

/* ── plat-card icon transition ───────────────────────── */
.plat-card__icon--1,
.plat-card__icon--2,
.plat-card__icon--3 {
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.25s ease,
              background 0.25s ease,
              border-color 0.25s ease;
}

/* ── Reduce motion override ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sci-card:hover,
  .cp-card:hover,
  .whu-card:hover,
  .ite-card:hover,
  .cog-card:hover { transform: none !important; }
  .sci-card:hover .sci-card__icon,
  .cp-card:hover  .cp-card__icon-wrap,
  .whu-card:hover .whu-card__icon,
  .cog-card:hover .cog-card__icon { transform: none !important; }
}

/* ============================================================
   NEON GLOW ACCENT SYSTEM — v1
   Subtle blue · purple · cyan radiance
   Targets: buttons · section highlights · key numbers · VR visuals
   Philosophy: additive, never distracting — ~15–30% opacity max
   ============================================================ */

/* ── 1. CSS VARIABLE UPGRADES ─────────────────────────────────
   Richer glow tokens used throughout this block             */
:root {
  --glow-blue:   rgba(59,130,246,0.55);
  --glow-purple: rgba(155,61,232,0.55);
  --glow-cyan:   rgba(0,200,232,0.55);
  --glow-blue-sm:   0 0 18px rgba(59,130,246,0.40), 0 0 6px rgba(59,130,246,0.28);
  --glow-purple-sm: 0 0 18px rgba(155,61,232,0.40), 0 0 6px rgba(155,61,232,0.28);
  --glow-cyan-sm:   0 0 18px rgba(0,200,232,0.40),  0 0 6px rgba(0,200,232,0.28);
  --glow-blue-md:   0 0 36px rgba(59,130,246,0.35), 0 0 12px rgba(59,130,246,0.22);
  --glow-purple-md: 0 0 40px rgba(155,61,232,0.38), 0 0 14px rgba(155,61,232,0.24);
  --glow-cyan-md:   0 0 36px rgba(0,200,232,0.35),  0 0 12px rgba(0,200,232,0.22);
}

/* ══════════════════════════════════════════════════════════════
   2. BUTTONS — hero + global btn-primary / btn-outline
   ══════════════════════════════════════════════════════════════ */

/* Global primary button — richer purple glow at rest, blooms on hover */
.btn-primary {
  box-shadow:
    0 0 28px rgba(124,58,237,0.32),
    0 0 8px  rgba(124,58,237,0.20),
    0 4px 16px rgba(0,0,0,0.30);
  transition:
    transform 0.25s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.25s cubic-bezier(0.22,1,0.36,1);
}
.btn-primary:hover {
  box-shadow:
    0 0 52px rgba(155,61,232,0.52),
    0 0 18px rgba(155,61,232,0.32),
    0 0 60px rgba(74,30,158,0.28),
    0 6px 24px rgba(0,0,0,0.35);
}

/* Global outline button — cyan glow at rest, brightens on hover */
.btn-outline {
  box-shadow:
    0 0 18px rgba(0,200,232,0.16),
    0 0 0 1px rgba(0,200,232,0.10) inset;
  transition:
    transform 0.25s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.25s cubic-bezier(0.22,1,0.36,1),
    background 0.25s ease,
    border-color 0.25s ease;
}
.btn-outline:hover {
  box-shadow:
    0 0 32px rgba(0,200,232,0.36),
    0 0 10px rgba(0,200,232,0.22),
    0 0 0 1px rgba(0,200,232,0.18) inset;
}

/* Hero primary button — purple-to-cyan bloom */
.hero-btn-primary {
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 36px rgba(74,30,158,0.50),
    0 0 14px rgba(155,61,232,0.30),
    0 4px 20px rgba(0,0,0,0.32);
  transition:
    transform 0.25s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.25s cubic-bezier(0.22,1,0.36,1);
}
/* Subtle shimmer layer inside */
.hero-btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.04) 45%,
    transparent 100%);
  pointer-events: none;
}
.hero-btn-primary:hover {
  box-shadow:
    0 0 60px rgba(155,61,232,0.60),
    0 0 24px rgba(155,61,232,0.38),
    0 0 80px rgba(74,30,158,0.32),
    0 6px 28px rgba(0,0,0,0.38);
}

/* Hero outline button — cyan glow */
.hero-btn-outline {
  box-shadow:
    0 0 20px rgba(0,200,232,0.18),
    0 0 0 1px rgba(0,200,232,0.08) inset;
  transition:
    transform 0.25s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.25s cubic-bezier(0.22,1,0.36,1),
    background 0.25s ease,
    border-color 0.25s ease;
}
.hero-btn-outline:hover {
  box-shadow:
    0 0 38px rgba(0,200,232,0.40),
    0 0 14px rgba(0,200,232,0.26),
    0 0 0 1px rgba(0,200,232,0.20) inset;
  border-color: rgba(0,200,232,0.75);
}

/* Final CTA button (fcta-btn) — strong purple bloom */
.fcta-btn {
  box-shadow:
    0 0 40px rgba(155,61,232,0.42),
    0 0 16px rgba(155,61,232,0.26),
    0 8px 32px rgba(0,0,0,0.40);
  transition:
    transform 0.25s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.25s cubic-bezier(0.22,1,0.36,1);
}
.fcta-btn:hover {
  box-shadow:
    0 0 70px rgba(155,61,232,0.65),
    0 0 28px rgba(155,61,232,0.42),
    0 0 90px rgba(74,30,158,0.35),
    0 10px 40px rgba(0,0,0,0.45);
}

/* ══════════════════════════════════════════════════════════════
   3. SECTION HIGHLIGHTS — eyebrows, tags, title accents, dividers
   ══════════════════════════════════════════════════════════════ */

/* Hero eyebrow pill — stronger cyan glow */
.hero-eyebrow {
  box-shadow:
    0 0 18px rgba(0,200,232,0.24),
    0 0 0 1px rgba(0,200,232,0.12) inset;
}
/* Eyebrow live dot — more intense pulse shadow */
.hero-eyebrow__dot {
  box-shadow: 0 0 12px rgba(0,200,232,0.90), 0 0 4px rgba(0,200,232,1);
}

/* Global .tag utility — glowing border */
.tag {
  box-shadow: 0 0 14px rgba(0,200,232,0.18), 0 0 0 1px rgba(0,200,232,0.08) inset;
}

/* Section title accent words — add a text-shadow halo */
.ms-title__accent {
  filter: drop-shadow(0 0 14px rgba(155,61,232,0.45)) drop-shadow(0 0 6px rgba(0,200,232,0.30));
}
.hero-title__accent,
.plat-title__gradient,
.cp-title .text-gradient,
.sci-title .text-gradient,
.whu-title .text-gradient {
  filter: drop-shadow(0 0 12px rgba(155,61,232,0.40)) drop-shadow(0 0 5px rgba(0,200,232,0.25));
}

/* Hero highlights bar items — faint cyan glow on icon */
.hh-item:hover .hh-icon {
  filter: drop-shadow(0 0 10px rgba(0,200,232,0.60));
}

/* cp-card tags — brighter glow on the coloured tags */
.cp-card__tag--blue   { box-shadow: 0 0 12px rgba(59,130,246,0.22);  }
.cp-card__tag--purple { box-shadow: 0 0 12px rgba(168,85,247,0.22);  }
.cp-card__tag--cyan   { box-shadow: 0 0 12px rgba(0,200,232,0.22);   }

/* cog-hud status chip — tighter cyan glow */
.cog-hud__status {
  box-shadow: 0 0 14px rgba(0,200,232,0.28), 0 0 4px rgba(0,200,232,0.18) inset;
}

/* ms-stage top accent line — expand glow */
.ms-stage::before {
  filter: blur(1px);
  opacity: 0.85;
}

/* whu-section title accent dot spans */
.whu-title__dot--blue   { filter: drop-shadow(0 0 6px rgba(59,130,246,0.80)); }
.whu-title__dot--purple { filter: drop-shadow(0 0 6px rgba(155,61,232,0.80)); }
.whu-title__dot--cyan   { filter: drop-shadow(0 0 6px rgba(0,200,232,0.80)); }

/* sci-section eyebrow tag */
.sci-tag,
.ms-tag,
.cp-tag,
.ite-tag,
.whu-tag {
  box-shadow: 0 0 14px rgba(0,200,232,0.18), 0 0 0 1px rgba(0,200,232,0.08) inset;
}

/* ══════════════════════════════════════════════════════════════
   4. IMPORTANT NUMBERS — counter stats + millisecond values
   ══════════════════════════════════════════════════════════════ */

/* sci-card percentage numbers — lift existing text-shadow */
.sci-card__num--blue {
  text-shadow:
    0 0 40px rgba(59,130,246,0.70),
    0 0 16px rgba(59,130,246,0.50),
    0 0 5px  rgba(59,130,246,0.40);
}
.sci-card__num--purple {
  text-shadow:
    0 0 40px rgba(168,85,247,0.70),
    0 0 16px rgba(168,85,247,0.50),
    0 0 5px  rgba(168,85,247,0.40);
}
.sci-card__num--cyan {
  text-shadow:
    0 0 40px rgba(34,211,238,0.70),
    0 0 16px rgba(34,211,238,0.50),
    0 0 5px  rgba(34,211,238,0.40);
}
.sci-card__num--indigo {
  text-shadow:
    0 0 40px rgba(99,102,241,0.70),
    0 0 16px rgba(99,102,241,0.50),
    0 0 5px  rgba(99,102,241,0.40);
}

/* ms-stage millisecond values — glowing gradient text */
.ms-stage__ms {
  filter:
    drop-shadow(0 0 16px rgba(155,61,232,0.55))
    drop-shadow(0 0 6px  rgba(0,200,232,0.40));
}

/* ms-stage stage number badges */
.ms-stage__num {
  text-shadow:
    0 0 20px rgba(155,61,232,0.70),
    0 0 8px  rgba(155,61,232,0.50);
}
.ms-stage[data-stage="3"] .ms-stage__num {
  text-shadow:
    0 0 20px rgba(0,200,232,0.70),
    0 0 8px  rgba(0,200,232,0.50);
}

/* hh-label stat text glow — very subtle */
.hh-label {
  text-shadow: 0 0 20px rgba(255,255,255,0.12);
}

/* Progress bar fills — add glow matching their colour */
.sci-card__bar-fill--blue   { box-shadow: 0 0 10px rgba(59,130,246,0.60),  0 0 4px rgba(59,130,246,0.40); }
.sci-card__bar-fill--purple { box-shadow: 0 0 10px rgba(168,85,247,0.60),  0 0 4px rgba(168,85,247,0.40); }
.sci-card__bar-fill--cyan   { box-shadow: 0 0 10px rgba(34,211,238,0.60),  0 0 4px rgba(34,211,238,0.40); }
.sci-card__bar-fill--indigo { box-shadow: 0 0 10px rgba(99,102,241,0.60),  0 0 4px rgba(99,102,241,0.40); }

/* ms-stage duration bars — glowing fills */
.ms-stage__bar--1 { box-shadow: 0 0 10px rgba(155,61,232,0.50); }
.ms-stage__bar--2 { box-shadow: 0 0 10px rgba(124,111,240,0.50); }
.ms-stage__bar--3 { box-shadow: 0 0 10px rgba(0,200,232,0.50); }

/* ══════════════════════════════════════════════════════════════
   5. VR-RELATED VISUALS — hero card, video frames, cog-hud, ite-cards
   ══════════════════════════════════════════════════════════════ */

/* Hero VR analysis card — stronger resting glow */
.hv-card {
  box-shadow:
    0 0 0 1px rgba(0,200,232,0.12),
    0 0 50px rgba(0,200,232,0.12),
    0 0 80px rgba(74,30,158,0.22),
    0 24px 80px rgba(0,0,0,0.55);
}

/* Hero card top accent line — brighter gradient */
.hv-card::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(155,61,232,0.85) 30%,
    rgba(0,200,232,0.85) 70%,
    transparent 100%);
  filter: blur(0.5px);
}

/* Live dot glow — more intense */
.hv-card__live-dot {
  box-shadow:
    0 0 10px rgba(0,200,232,1),
    0 0 20px rgba(0,200,232,0.60);
}

/* Radar node glows on the SVG */
.hv-radar__node.is-visible {
  filter: drop-shadow(0 0 4px rgba(0,200,232,0.80));
}

/* Scanning drill video frame — blue neon border glow */
.ms-video-frame {
  border-color: rgba(96,165,250,0.38);
  box-shadow:
    0 0 50px rgba(96,165,250,0.22),
    0 0 18px rgba(96,165,250,0.14),
    0 16px 48px rgba(0,0,0,0.50);
}

/* Bottom radial glow inside video frame — brighter */
.ms-video-glow {
  background: radial-gradient(ellipse 90% 70% at 50% 100%,
    rgba(96,165,250,0.28) 0%,
    transparent 70%);
}

/* Video badge neon dot */
.ms-video-badge__dot {
  box-shadow: 0 0 8px rgba(96,165,250,1), 0 0 16px rgba(96,165,250,0.60);
}

/* Analytics wide card video frame — cyan glow */
.cp-av-frame {
  box-shadow:
    0 0 50px rgba(0,200,232,0.22),
    0 0 18px rgba(0,200,232,0.14),
    0 16px 40px rgba(0,0,0,0.45);
  border-color: rgba(0,200,232,0.30) !important;
}

/* ITE video cards — per-colour atmospheric glow intensify */
.ite-card__glow--blue   {
  background: radial-gradient(ellipse 80% 70% at 50% 50%,
    rgba(96,165,250,0.20) 0%, transparent 70%);
}
.ite-card__glow--violet {
  background: radial-gradient(ellipse 80% 70% at 50% 50%,
    rgba(139,92,246,0.20) 0%, transparent 70%);
}
.ite-card__glow--cyan {
  background: radial-gradient(ellipse 80% 70% at 50% 50%,
    rgba(34,211,238,0.20) 0%, transparent 70%);
}

/* ITE card borders — neon tint at rest */
#ite-card-1 { border-color: rgba(96,165,250,0.18); box-shadow: 0 0 30px rgba(96,165,250,0.08),  0 8px 32px rgba(0,0,0,0.45); }
#ite-card-2 { border-color: rgba(139,92,246,0.18); box-shadow: 0 0 30px rgba(139,92,246,0.08), 0 8px 32px rgba(0,0,0,0.45); }
#ite-card-3 { border-color: rgba(34,211,238,0.18); box-shadow: 0 0 30px rgba(34,211,238,0.08),  0 8px 32px rgba(0,0,0,0.45); }

/* cog-hud bar — subtle purple ambient light */
.cog-hud {
  box-shadow:
    0 0 30px rgba(155,61,232,0.10),
    0 0 0 1px rgba(155,61,232,0.06) inset;
}

/* cog-hud purple dot — stronger pulse */
.cog-hud__dot {
  box-shadow: 0 0 12px rgba(155,61,232,0.90), 0 0 4px rgba(155,61,232,1);
}
@keyframes cogHudPulse {
  0%,100% { opacity:1; box-shadow:0 0 8px rgba(155,61,232,0.90), 0 0 18px rgba(155,61,232,0.50); }
  50%      { opacity:.55; box-shadow:0 0 18px rgba(155,61,232,0.65), 0 0 32px rgba(155,61,232,0.30); }
}

/* ── Reduced motion override ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-btn-primary::after,
  .btn-primary, .btn-outline,
  .hero-btn-primary, .hero-btn-outline,
  .fcta-btn {
    transition: none !important;
  }
}

/* ============================================================
   VIDEO OVERLAY SYSTEM — gradient polish pass
   Left-to-right soft black gradient on every background video.
   Each context gets a context-aware multi-layer stack:
     Layer 1 (primary): L→R darkening — left edge darkest
     Layer 2 (support): top/bottom vignette for depth
   Opacity values keep footage clearly visible at all widths.
   ============================================================ */

/* ── Scanning Drill video — new overlay div ────────────────── */
.ms-video-overlay {
  position: absolute;
  inset: 0;
  border-radius: 14px;         /* match .ms-video-frame radius */
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(to right,  rgba(5,7,13,0.62) 0%, rgba(5,7,13,0.22) 48%, rgba(5,7,13,0.06) 100%),
    linear-gradient(to bottom, rgba(5,7,13,0.30) 0%, transparent 40%, rgba(5,7,13,0.50) 100%);
}

/* Push badge above the new overlay */
.ms-video-badge { z-index: 2; }


/* ── Analytics card (cp-av) — ensure overlay stacks correctly ─ */
/* video z:0  → glow z:2 → overlay z:3 → badge z:5  */
.cp-av-overlay { z-index: 3; }

/* ── ITE cards — overlay z ordering ───────────────────────── */
/* video → glow(z:1) → overlay(z:2) → badge(z:3) → info(z:4)  */
.ite-card__overlay { z-index: 2; }

/* ============================================================
   SECTION TRANSITION SYSTEM
   Smooth gradient bleeds between every section — no hard edges.
   Strategy: each section gets a ::before (top fade-in) and
   ::after (bottom fade-out) pseudo-element that bleeds into the
   adjacent section's background colour, plus a mid-section
   ambient radial glow for depth and lighting continuity.

   Colour tokens used:
     --s-hero   #050a1a   hero / ms / cog baseline
     --s-plat   #0a1628   platform (lighter)
     --s-dark   #040817   cp / deepest sections
     --s-black  #05070d   ite / fcta near-black
     --s-tl     #060b1a   training timeline
     --s-sci    #05091a   science / who-uses

   Bleed height: 120px top + 120px bottom — tall enough to look
   continuous at all viewport sizes, short enough never to eat
   into section content (sections have ≥ 5rem padding).
   ============================================================ */

/* ── Shared pseudo-element base ────────────────────────────── */
.ms-section::before,   .ms-section::after,
.plat-section::before, .plat-section::after,
.cog-section::before,  .cog-section::after,
.tl-section::before,   .tl-section::after,
.cp-section::before,   .cp-section::after,
.ite-section::before,  .ite-section::after,
.whu-section::before,  .whu-section::after,
.sci-section::before,  .sci-section::after,
.fcta-section::before, .fcta-section::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 130px;
  pointer-events: none;
  z-index: 1;
}

/* ── hero-highlights → ms-section ────────────────────────────
   Both are near-#050a1a so transition is gentle; keep the
   existing hairline separator but add a 130 px colour bleed.    */
/* Override the existing narrow separator with a full bleed */
.hero-highlights + .ms-section::before {
  top: 0; left: 0; right: 0;
  width: 100%; height: 130px;
  transform: none;
  background: linear-gradient(to bottom,
    rgba(8,12,26,0.90) 0%,
    rgba(5,10,26,0.40) 50%,
    transparent 100%);
}

/* ms-section bottom → plat-section (#0a1628 is lighter) */
.ms-section::after {
  bottom: 0;
  background: linear-gradient(to top,
    rgba(10,22,40,0.85) 0%,
    rgba(10,22,40,0.35) 55%,
    transparent 100%);
}

/* ── plat-section (#0a1628) ────────────────────────────────── */
/* Top: blends from ms-section's near-black */
.plat-section::before {
  top: 0;
  background: linear-gradient(to bottom,
    rgba(5,10,26,0.80) 0%,
    rgba(8,16,32,0.30) 55%,
    transparent 100%);
}
/* Bottom → cog-section (#050a1a darker) */
.plat-section::after {
  bottom: 0;
  background: linear-gradient(to top,
    rgba(5,10,26,0.88) 0%,
    rgba(5,10,26,0.35) 55%,
    transparent 100%);
}

/* ── cog-section (#050a1a) ─────────────────────────────────── */
.cog-section::before {
  top: 0;
  background: linear-gradient(to bottom,
    rgba(10,22,40,0.75) 0%,
    rgba(6,12,26,0.28) 55%,
    transparent 100%);
}
/* Bottom → tl-section (#060b1a) — almost identical, keep subtle */
.cog-section::after {
  bottom: 0;
  background: linear-gradient(to top,
    rgba(6,11,26,0.82) 0%,
    rgba(6,11,26,0.30) 55%,
    transparent 100%);
}

/* ── tl-section (#060b1a) ──────────────────────────────────── */
.tl-section::before {
  top: 0;
  background: linear-gradient(to bottom,
    rgba(5,10,26,0.80) 0%,
    rgba(6,10,24,0.28) 55%,
    transparent 100%);
}
/* Bottom → sci-section (#05091a) */
.tl-section::after {
  bottom: 0;
  background: linear-gradient(to top,
    rgba(5,9,26,0.85) 0%,
    rgba(5,9,26,0.32) 55%,
    transparent 100%);
}

/* ── sci-section (#05091a) ─────────────────────────────────── */
.sci-section::before {
  top: 0;
  background: linear-gradient(to bottom,
    rgba(6,11,26,0.82) 0%,
    rgba(5,9,26,0.30) 55%,
    transparent 100%);
}
/* Bottom → cp-section (#040817 — darkest) */
.sci-section::after {
  bottom: 0;
  background: linear-gradient(to top,
    rgba(4,8,23,0.90) 0%,
    rgba(4,8,23,0.38) 55%,
    transparent 100%);
}

/* ── cp-section (#040817) ──────────────────────────────────── */
.cp-section::before {
  top: 0;
  background: linear-gradient(to bottom,
    rgba(5,9,26,0.85) 0%,
    rgba(4,8,20,0.30) 55%,
    transparent 100%);
}
/* Bottom → ite-section (#05070d) */
.cp-section::after {
  bottom: 0;
  background: linear-gradient(to top,
    rgba(5,7,13,0.92) 0%,
    rgba(5,7,13,0.38) 55%,
    transparent 100%);
}

/* ── ite-section (#05070d) ─────────────────────────────────── */
.ite-section::before {
  top: 0;
  background: linear-gradient(to bottom,
    rgba(4,8,23,0.88) 0%,
    rgba(5,7,13,0.32) 55%,
    transparent 100%);
}
/* Bottom → whu-section (#050919) */
.ite-section::after {
  bottom: 0;
  background: linear-gradient(to top,
    rgba(5,9,25,0.88) 0%,
    rgba(5,9,25,0.35) 55%,
    transparent 100%);
}

/* ── whu-section (#050919) ─────────────────────────────────── */
.whu-section::before {
  top: 0;
  background: linear-gradient(to bottom,
    rgba(5,7,13,0.85) 0%,
    rgba(5,9,22,0.30) 55%,
    transparent 100%);
}
/* Bottom → sci-section (2nd instance) */
.whu-section::after {
  bottom: 0;
  background: linear-gradient(to top,
    rgba(5,9,26,0.88) 0%,
    rgba(5,9,26,0.35) 55%,
    transparent 100%);
}

/* ── fcta-section (#05070d) ────────────────────────────────── */
.fcta-section::before {
  top: 0;
  background: linear-gradient(to bottom,
    rgba(5,9,26,0.88) 0%,
    rgba(5,7,13,0.32) 55%,
    transparent 100%);
}
/* No ::after needed — this is the last section */

/* ══════════════════════════════════════════════════════════════
   INTER-SECTION AMBIENT LIGHTING
   Each section gets a mid-section radial glow that aligns with
   its colour theme — creates subtle "light source" continuity
   as the user scrolls through sections.
   ══════════════════════════════════════════════════════════════ */

/* ms-section — purple ambient centre */
.ms-section::before {
  /* Combined: top-bleed gradient + ambient are both handled here;
     ambient is layered via a separate bg element in HTML (.ms-bg-radial)
     so ::before stays as the bleed only. */
}

/* Inject ambient glow into sections that lack a dedicated bg radial */
.tl-section,
.whu-section {
  background-image:
    radial-gradient(ellipse 70% 50% at 20% 50%, rgba(74,30,158,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 80% 50%, rgba(0,200,232,0.05) 0%, transparent 65%);
}

.cp-section {
  background-image:
    radial-gradient(ellipse 60% 55% at 15% 60%, rgba(0,200,232,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 40%, rgba(155,61,232,0.07) 0%, transparent 60%);
}

.fcta-section {
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(155,61,232,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 50% 90%, rgba(0,200,232,0.06) 0%, transparent 60%);
}

/* ══════════════════════════════════════════════════════════════
   NEON HAIRLINE SEPARATORS
   1 px gradient lines at section joins — visible only where the
   bleed colour delta is large enough to need a crisp marker.
   Uses a separate technique: box-shadow on the section's first
   child .container element isn't reliable, so we use a thin
   inset on the section itself via outline.
   ══════════════════════════════════════════════════════════════ */

/* Hairlines sit between the dark-jump boundaries */
.plat-section,
.tl-section,
.fcta-section {
  border-top: 1px solid rgba(255,255,255,0.035);
}

/* Purple-to-cyan neon hairline for the most dramatic jumps */
.cp-section {
  border-top: 1px solid transparent;
  border-image:
    linear-gradient(90deg,
      transparent 0%,
      rgba(155,61,232,0.22) 25%,
      rgba(0,200,232,0.22) 75%,
      transparent 100%) 1;
}

.fcta-section {
  border-top: 1px solid transparent;
  border-image:
    linear-gradient(90deg,
      transparent 0%,
      rgba(155,61,232,0.28) 30%,
      rgba(0,200,232,0.28) 70%,
      transparent 100%) 1;
}

/* ── z-index: keep pseudo-elements behind section content ───── */
.ms-section,
.plat-section,
.cog-section,
.tl-section,
.sci-section,
.cp-section,
.ite-section,
.whu-section,
.fcta-section {
  isolation: isolate;
}

/* ============================================================
   RADAR NODE METRIC TOOLTIP  —  .hv-tooltip / .hvt-*
   Fixed 4-metric layout: Cognitive group + Eye Tracking group
   + large prominent SensiScore footer.
   ============================================================ */

/* ── Wrap position context ──────────────────────────────────── */
.hv-radar-wrap {
  position: relative; /* tooltip is absolutely positioned inside */
}

/* ── Invisible hit targets (larger than visual nodes) ──────── */
.hv-radar__node-hit {
  cursor: pointer;
  outline: none;
  transition: r 0.18s ease;
}
.hv-radar__node-hit:hover ~ .hv-radar__node,
.hv-radar__node-hit:focus ~ .hv-radar__node {
  r: 5.5;
}

/* ── Tooltip card ───────────────────────────────────────────── */
.hv-tooltip {
  position: absolute;
  width: 252px;
  background: rgba(5, 8, 20, 0.98);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  padding: 0;
  pointer-events: auto;
  /* z-index kept below navbar (9000) but above other hero elements */
  z-index: 50;
  overflow: hidden;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow:
    0 0 0 1px rgba(0,200,232,0.07),
    0 24px 64px rgba(0,0,0,0.75),
    0 0 50px rgba(74,30,158,0.16);
  /* Start hidden */
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition:
    opacity  0.22s cubic-bezier(0.22,1,0.36,1),
    transform 0.22s cubic-bezier(0.22,1,0.36,1);
  will-change: opacity, transform;
}
.hv-tooltip.hvt-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Top neon accent line */
.hv-tooltip::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(155,61,232,0.85) 30%,
    rgba(0,200,232,0.85) 70%,
    transparent 100%);
  pointer-events: none;
}

/* ── Header row ─────────────────────────────────────────────── */
.hvt-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.055);
  background: rgba(255,255,255,0.018);
}
.hvt-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hvt-title {
  flex: 1;
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  line-height: 1.2;
}
.hvt-score-badge {
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.14rem 0.48rem;
  border-radius: 100px;
  border: 1px solid;
  background: rgba(255,255,255,0.04);
  white-space: nowrap;
}

/* ── Metric groups ───────────────────────────────────────────── */
.hvt-group {
  padding: 0.55rem 0.85rem 0.45rem;
  border-bottom: 1px solid rgba(255,255,255,0.045);
}
.hvt-group--b {
  border-bottom: none;
  padding-bottom: 0.3rem;
}
.hvt-group__label {
  display: block;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  margin-bottom: 0.5rem;
}

/* ── 2-column metric row ─────────────────────────────────────── */
.hvt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

/* ── Single metric cell ──────────────────────────────────────── */
.hvt-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hvt-cell__name {
  font-size: 0.585rem;
  font-weight: 500;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hvt-cell__val-row {
  display: flex;
  align-items: baseline;
  gap: 0.22rem;
  line-height: 1;
}
.hvt-cell__val {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hvt-cell__unit {
  font-size: 0.58rem;
  font-weight: 500;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.02em;
  margin-bottom: 1px;
  white-space: nowrap;
}
/* Mini inline fill bar */
.hvt-cell__track {
  height: 3px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}
.hvt-cell__fill {
  height: 100%;
  border-radius: 2px;
  background: var(--bar-color, #00c8e8);
  box-shadow: 0 0 6px var(--bar-color, #00c8e8);
  width: 0%;
  transition: width 0.50s cubic-bezier(0.22,1,0.36,1);
}

/* ── SensiScore block ────────────────────────────────────────── */
.hvt-sensiscore {
  padding: 0 0.85rem 0.7rem;
}
/* Prominent divider above score */
.hvt-sensiscore__divider {
  height: 1px;
  margin: 0 0 0.65rem;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.10) 20%,
    rgba(255,255,255,0.10) 80%,
    transparent 100%);
}
.hvt-sensiscore__body {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.hvt-sensiscore__label {
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  white-space: nowrap;
  flex-shrink: 0;
}
.hvt-sensiscore__right {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
/* THE number — large, bold, most prominent element */
.hvt-sensiscore__num {
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  flex-shrink: 0;
}
.hvt-sensiscore__track {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.07);
  border-radius: 3px;
  overflow: hidden;
}
.hvt-sensiscore__fill {
  height: 100%;
  border-radius: 3px;
  background: var(--bar-color, #9b3de8);
  box-shadow: 0 0 10px var(--bar-color, #9b3de8);
  width: 0%;
  transition: width 0.65s cubic-bezier(0.22,1,0.36,1) 0.12s;
}

/* ── Science caption below the card ────────────────────────── */
.hv-caption {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem 0.7rem;
  border-top: 1px solid rgba(255,255,255,0.055);
  background: rgba(255,255,255,0.015);
}
.hv-caption__dot {
  font-size: 0.40rem;
  color: #00c8e8;
  filter: drop-shadow(0 0 4px rgba(0,200,232,0.90));
  animation: heroPulse 2.5s ease-in-out infinite;
  flex-shrink: 0;
}
.hv-caption span {
  font-size: 0.62rem;
  font-weight: 500;
  color: rgba(255,255,255,0.32);
  letter-spacing: 0.02em;
  line-height: 1.5;
  font-style: italic;
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hv-tooltip {
    transition: opacity 0.15s ease;
    transform: none !important;
  }
  .hvt-cell__fill,
  .hvt-sensiscore__fill { transition: none; }
}

/* ============================================================
   NEXT GENERATION TRAINING TECHNOLOGY  —  .nxt-*
   Two future-tech cards before the final CTA.
   Palette: cyan (AI Vision) · purple (Haptic Shoes)
   ============================================================ */

/* ── Section shell ──────────────────────────────────────────── */
.nxt-section {
  position: relative;
  padding: 7rem 0 6.5rem;
  background: #050817;
  overflow: hidden;
  isolation: isolate;
}

/* ── Background layers ──────────────────────────────────────── */
.nxt-bg-grid {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.038) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 20%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 20%, transparent 82%);
}

.nxt-bg-glow {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 20% 50%, rgba(74,30,158,0.11) 0%, transparent 65%),
    radial-gradient(ellipse 50% 55% at 80% 45%, rgba(0,200,232,0.09) 0%, transparent 65%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(155,61,232,0.06) 0%, transparent 60%);
}

/* ── Layout container ───────────────────────────────────────── */
.nxt-container {
  position: relative; z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ── Header ─────────────────────────────────────────────────── */
.nxt-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.nxt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 1rem;
  border-radius: 100px;
  background: rgba(155,61,232,0.08);
  border: 1px solid rgba(155,61,232,0.28);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(192,132,252,0.90);
  margin-bottom: 1.4rem;
  box-shadow: 0 0 18px rgba(155,61,232,0.18), 0 0 0 1px rgba(155,61,232,0.08) inset;
}
.nxt-eyebrow__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #9b3de8;
  box-shadow: 0 0 10px rgba(155,61,232,0.90), 0 0 4px rgba(155,61,232,1);
  animation: heroPulse 2.2s ease infinite;
}

.nxt-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
}
.nxt-title__accent {
  background: linear-gradient(135deg, #9b3de8 0%, #00c8e8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 14px rgba(155,61,232,0.45))
          drop-shadow(0 0 6px  rgba(0,200,232,0.30));
}

.nxt-subtitle {
  font-size: 1rem;
  color: rgba(255,255,255,0.42);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto;
}

/* ── Cards grid ─────────────────────────────────────────────── */
.nxt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

/* ── Base card ──────────────────────────────────────────────── */
.nxt-card {
  position: relative;
  padding: 2rem 1.8rem 1.6rem;
  background: rgba(8,12,30,0.80);
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  gap: 0;
  transition:
    transform    0.28s cubic-bezier(0.22,1,0.36,1),
    box-shadow   0.28s cubic-bezier(0.22,1,0.36,1),
    border-color 0.28s cubic-bezier(0.22,1,0.36,1);
}

/* Hover lift */
.nxt-card--1:hover { transform: translateY(-7px); border-color: rgba(0,200,232,0.38); box-shadow: 0 24px 64px rgba(0,200,232,0.14), 0 0 0 1px rgba(0,200,232,0.12) inset; }
.nxt-card--2:hover { transform: translateY(-7px); border-color: rgba(155,61,232,0.42); box-shadow: 0 24px 64px rgba(155,61,232,0.14), 0 0 0 1px rgba(155,61,232,0.12) inset; }

/* ── Corner radial glow (inside card, top-right) ────────────── */
.nxt-card__corner-glow {
  position: absolute; top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.28s ease;
}
.nxt-card__corner-glow--cyan   { background: radial-gradient(circle, rgba(0,200,232,0.14) 0%, transparent 70%); }
.nxt-card__corner-glow--purple { background: radial-gradient(circle, rgba(155,61,232,0.16) 0%, transparent 70%); }
.nxt-card--1:hover .nxt-card__corner-glow--cyan   { opacity: 1.6; }
.nxt-card--2:hover .nxt-card__corner-glow--purple { opacity: 1.6; }

/* ── Top accent hairline ─────────────────────────────────────── */
.nxt-card__accent {
  position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  pointer-events: none; z-index: 1;
  transition: opacity 0.28s ease;
}
.nxt-card__accent--cyan   { background: linear-gradient(90deg, transparent, rgba(0,200,232,0.80), transparent); opacity: 0.55; }
.nxt-card__accent--purple { background: linear-gradient(90deg, transparent, rgba(155,61,232,0.80), transparent); opacity: 0.55; }
.nxt-card--1:hover .nxt-card__accent--cyan   { opacity: 1; }
.nxt-card--2:hover .nxt-card__accent--purple { opacity: 1; }

/* ── Badges ──────────────────────────────────────────────────── */
.nxt-card__badge-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
  position: relative; z-index: 1;
}
.nxt-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.28rem 0.75rem;
  border-radius: 100px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  position: relative; z-index: 1;
}
/* When badge is alone it has margin-bottom; in a row, row provides spacing */
.nxt-card__badge-row .nxt-card__badge {
  margin-bottom: 0;
}
.nxt-card__badge--cyan {
  color: #22d3ee;
  background: rgba(0,200,232,0.09);
  border: 1px solid rgba(0,200,232,0.30);
  box-shadow: 0 0 12px rgba(0,200,232,0.18);
}
.nxt-card__badge--purple {
  color: #c084fc;
  background: rgba(155,61,232,0.10);
  border: 1px solid rgba(155,61,232,0.32);
  box-shadow: 0 0 12px rgba(155,61,232,0.20);
}
.nxt-card__badge--outline {
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
}
.nxt-card__badge-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 8px rgba(0,200,232,0.90);
  animation: heroPulse 2s ease infinite;
}
.nxt-card__badge-dot--purple {
  background: #c084fc;
  box-shadow: 0 0 8px rgba(192,132,252,0.90);
}

/* ── Icon wrapper ────────────────────────────────────────────── */
.nxt-card__icon-wrap {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.2rem;
  position: relative; z-index: 1;
  transition:
    transform    0.25s cubic-bezier(0.22,1,0.36,1),
    box-shadow   0.25s ease,
    background   0.25s ease,
    border-color 0.25s ease;
}
.nxt-card__icon-wrap--cyan {
  background: rgba(0,200,232,0.10);
  border: 1px solid rgba(0,200,232,0.22);
  box-shadow: 0 0 18px rgba(0,200,232,0.14);
}
.nxt-card__icon-wrap--purple {
  background: rgba(155,61,232,0.10);
  border: 1px solid rgba(155,61,232,0.22);
  box-shadow: 0 0 18px rgba(155,61,232,0.14);
}
.nxt-card--1:hover .nxt-card__icon-wrap--cyan {
  transform: scale(1.12);
  background: rgba(0,200,232,0.18);
  border-color: rgba(0,200,232,0.45);
  box-shadow: 0 0 26px rgba(0,200,232,0.34);
}
.nxt-card--2:hover .nxt-card__icon-wrap--purple {
  transform: scale(1.12);
  background: rgba(155,61,232,0.18);
  border-color: rgba(155,61,232,0.45);
  box-shadow: 0 0 26px rgba(155,61,232,0.34);
}

/* ── Card number ─────────────────────────────────────────────── */
.nxt-card__num {
  position: absolute;
  top: 1.6rem; right: 1.8rem;
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1;
  color: rgba(255,255,255,0.04);
  font-variant-numeric: tabular-nums;
  user-select: none;
  pointer-events: none;
}

/* Colored ghost number per card */
.nxt-card--1 .nxt-card__num {
  color: transparent;
  background: linear-gradient(135deg, rgba(0,200,232,0.11) 0%, rgba(0,200,232,0.04) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.nxt-card--2 .nxt-card__num {
  color: transparent;
  background: linear-gradient(135deg, rgba(155,61,232,0.12) 0%, rgba(155,61,232,0.04) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ── Typography ──────────────────────────────────────────────── */
.nxt-card__title {
  font-size: 1.22rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
  position: relative; z-index: 1;
}
.nxt-card__desc {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.48);
  line-height: 1.68;
  margin-bottom: 1.25rem;
  position: relative; z-index: 1;
}

/* ── Capability chips ────────────────────────────────────────── */
.nxt-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.4rem;
  position: relative; z-index: 1;
}
.nxt-card__chip {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.2rem 0.65rem;
  border-radius: 100px;
}
.nxt-card__chip--cyan {
  color: rgba(0,200,232,0.85);
  background: rgba(0,200,232,0.08);
  border: 1px solid rgba(0,200,232,0.20);
}

/* ── Benefit list (haptic card) ──────────────────────────────── */
.nxt-card__benefits {
  list-style: none;
  padding: 0; margin: 0 0 1.4rem;
  display: flex; flex-direction: column; gap: 0.55rem;
  position: relative; z-index: 1;
}
.nxt-card__benefit {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
}
.nxt-card__benefit-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9b3de8, #c084fc);
  box-shadow: 0 0 6px rgba(155,61,232,0.70);
  flex-shrink: 0;
}

/* ── Footer status ───────────────────────────────────────────── */
.nxt-card__footer {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  position: relative; z-index: 1;
}
.nxt-card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(0,200,232,0.70);
}
.nxt-card__status i { font-size: 0.75rem; }
.nxt-card__status--purple {
  color: rgba(192,132,252,0.75);
}
.nxt-card__status--purple i { color: rgba(192,132,252,0.75); }

/* ── Bottom scientific caption ───────────────────────────────── */
.nxt-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 3rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.02em;
  text-align: center;
}
.nxt-caption__dot {
  font-size: 0.55rem;
  color: rgba(155,61,232,0.55);
  flex-shrink: 0;
}

/* ── Stagger reveal delays ───────────────────────────────────── */
.nxt-card--1.reveal { transition-delay: 0s;    }
.nxt-card--2.reveal { transition-delay: 0.09s; }

/* ── Section transition bleeds ──────────────────────────────── */
.nxt-section,
.nxt-section::before,
.nxt-section::after {
  position: relative;
}
.nxt-section::before,
.nxt-section::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 130px;
  pointer-events: none;
  z-index: 1;
}
.nxt-section::before {
  top: 0;
  background: linear-gradient(to bottom,
    rgba(5,9,26,0.88) 0%,
    rgba(5,8,18,0.32) 55%,
    transparent 100%);
}
.nxt-section::after {
  bottom: 0;
  background: linear-gradient(to top,
    rgba(5,7,13,0.90) 0%,
    rgba(5,8,18,0.35) 55%,
    transparent 100%);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 720px) {
  .nxt-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .nxt-section { padding: 5rem 0 5rem; }
  .nxt-card__num { font-size: 2rem; }
}
@media (max-width: 480px) {
  .nxt-section { padding: 4rem 0 4rem; }
  .nxt-container { padding: 0 1.25rem; }
  .nxt-card { padding: 1.6rem 1.4rem 1.4rem; }
}

/* ── Reduce motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nxt-card:hover { transform: none !important; }
  .nxt-card__icon-wrap { transition: none !important; }
}

/* ============================================================
   TRUSTED-BY MARQUEE  —  .tbm-*
   Horizontal infinite-scroll logo band.
   Technique: two identical .tbm-track lists side-by-side,
   both shifted left by 100% of one set width via keyframes.
   Pause on hover via animation-play-state.
   ============================================================ */

/* ── Section shell ──────────────────────────────────────────── */
.tbm-section {
  position: relative;
  padding: 3.5rem 0 2.8rem;
  background: rgba(7, 11, 26, 0.98);
  border-top:    1px solid rgba(255,255,255,0.055);
  border-bottom: 1px solid rgba(255,255,255,0.055);
  overflow: hidden;
}

/* ── Header block ───────────────────────────────────────────── */
.tbm-header {
  text-align: center;
  margin-bottom: 2.4rem;
  padding: 0 2rem;
}
.tbm-title {
  font-size: clamp(0.95rem, 2vw, 1.08rem);
  font-weight: 700;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.01em;
  margin: 0 0 0.55rem;
}
.tbm-subtitle {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.30);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto;
}

/* ── Outer viewport — clips overflow ───────────────────────── */
.tbm-outer {
  position: relative;
  overflow: hidden;
  /* Pause entire marquee on hover */
}
.tbm-outer:hover .tbm-track {
  animation-play-state: paused;
}

/* ── Edge fade masks ────────────────────────────────────────── */
.tbm-fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  pointer-events: none;
  z-index: 2;
}
.tbm-fade--left {
  left: 0;
  background: linear-gradient(to right,
    rgba(7,11,26,1) 0%,
    rgba(7,11,26,0.85) 40%,
    transparent 100%);
}
.tbm-fade--right {
  right: 0;
  background: linear-gradient(to left,
    rgba(7,11,26,1) 0%,
    rgba(7,11,26,0.85) 40%,
    transparent 100%);
}

/* ── Track wrapper — holds two lists side by side ───────────── */
.tbm-track-wrap {
  display: flex;
  width: max-content;          /* shrink-wraps both lists */
}

/* ── Scrolling list ─────────────────────────────────────────── */
.tbm-track {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0; padding: 0;
  /* Animation — translate by exactly one full list width (50% of wrap) */
  animation: tbmScroll 28s linear infinite;
  will-change: transform;
}

@keyframes tbmScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ── Individual item ────────────────────────────────────────── */
.tbm-item {
  flex-shrink: 0;
  padding: 0 2.4rem;
  /* Separator: right border */
  border-right: 1px solid rgba(255,255,255,0.06);
}
.tbm-item:last-child {
  border-right: none;
}

/* ── Logo tile ──────────────────────────────────────────────── */
.tbm-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 52px;
  padding: 0 0.3rem;
  color: rgba(255,255,255,0.32);
  transition:
    color      0.25s ease,
    filter     0.25s ease;
  cursor: default;
  white-space: nowrap;
}

/* Hover: brighten + subtle cyan glow */
.tbm-item:hover .tbm-logo {
  color: rgba(255,255,255,0.82);
  filter: drop-shadow(0 0 10px rgba(0,200,232,0.45));
}

/* SVG icon */
.tbm-logo__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  opacity: 0.70;
  transition: opacity 0.25s ease;
}
.tbm-item:hover .tbm-logo__icon {
  opacity: 1;
}

/* Text name */
.tbm-logo__name {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

/* ── Bottom caption ─────────────────────────────────────────── */
.tbm-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2.2rem;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.22);
  letter-spacing: 0.025em;
  font-style: italic;
  padding: 0 2rem;
}
.tbm-caption__dot {
  font-size: 0.42rem;
  color: rgba(0,200,232,0.55);
  filter: drop-shadow(0 0 4px rgba(0,200,232,0.70));
  animation: heroPulse 2.8s ease-in-out infinite;
  flex-shrink: 0;
}

/* ── Section transition bleeds ──────────────────────────────── */
.tbm-section::before,
.tbm-section::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 80px;
  pointer-events: none;
  z-index: 1;
}
.tbm-section::before {
  top: 0;
  background: linear-gradient(to bottom,
    rgba(5,9,26,0.70) 0%,
    transparent 100%);
}
.tbm-section::after {
  bottom: 0;
  background: linear-gradient(to top,
    rgba(5,9,26,0.70) 0%,
    transparent 100%);
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tbm-track {
    animation: none;
  }
  .tbm-track-wrap {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }
  .tbm-track + .tbm-track {
    display: none; /* hide duplicate set */
  }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .tbm-section { padding: 2.8rem 0 2.2rem; }
  .tbm-fade    { width: 60px; }
  .tbm-item    { padding: 0 1.6rem; }
  .tbm-logo__name { font-size: 0.75rem; }
}


/* ============================================================
   FINAL-CTA PLATFORM ACCESS PANEL  —  .fcta-platform*
   "Start Using the Platform" — Player Sign Up · Club Reg · Login
   ============================================================ */

.fcta-platform {
  margin: 2rem auto 0;
  max-width: 680px;
  padding: 1.5rem 1.75rem;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 0 0 1px rgba(155,61,232,0.08),
    0 12px 40px rgba(0,0,0,0.35);
  /* Subtle top accent */
  position: relative;
  overflow: hidden;
}
.fcta-platform::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(155,61,232,0.55) 35%,
    rgba(0,200,232,0.55) 65%,
    transparent);
  pointer-events: none;
}

/* ── "Start Using the Platform" label ─────────────────────── */
.fcta-platform__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  margin-bottom: 1.1rem;
}
.fcta-platform__dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #9b3de8;
  box-shadow: 0 0 8px rgba(155,61,232,0.90);
  animation: heroPulse 2.2s ease-in-out infinite;
}

/* ── Button row ───────────────────────────────────────────── */
.fcta-platform__btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ── Text links (Player Sign Up, Club Registration) ────────── */
.fcta-platform__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.62rem 1.1rem;
  border-radius: 9px;
  font-size: 0.865rem;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  white-space: nowrap;
  transition:
    color       0.22s ease,
    background  0.22s ease,
    border-color 0.22s ease,
    box-shadow  0.22s ease;
}
.fcta-platform__link-icon {
  flex-shrink: 0;
  opacity: 0.60;
  transition: opacity 0.22s ease;
}
.fcta-platform__link-text { line-height: 1; }
.fcta-platform__link-arrow {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  flex-shrink: 0;
}
.fcta-platform__link:hover {
  color: rgba(255,255,255,0.90);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
}
.fcta-platform__link:hover .fcta-platform__link-icon { opacity: 1; }
.fcta-platform__link:hover .fcta-platform__link-arrow {
  opacity: 0.65;
  transform: translateX(0);
}

/* Player — cyan accent on hover */
.fcta-platform__link--player:hover {
  border-color: rgba(0,200,232,0.28);
  box-shadow: 0 0 14px rgba(0,200,232,0.10);
  color: rgba(0,200,232,0.92);
}
.fcta-platform__link--player:hover .fcta-platform__link-icon { color: #00c8e8; }

/* Club — blue accent on hover */
.fcta-platform__link--club:hover {
  border-color: rgba(96,165,250,0.30);
  box-shadow: 0 0 14px rgba(96,165,250,0.10);
  color: rgba(96,165,250,0.92);
}
.fcta-platform__link--club:hover .fcta-platform__link-icon { color: #60a5fa; }

/* ── Platform Login — primary button ─────────────────────── */
.fcta-platform__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.68rem 1.4rem;
  border-radius: 9px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(155,61,232,0.70) 0%, rgba(100,40,200,0.75) 100%);
  border: 1px solid rgba(155,61,232,0.60);
  box-shadow:
    0 0 24px rgba(155,61,232,0.35),
    0 4px 16px rgba(0,0,0,0.30);
  transition:
    box-shadow  0.25s ease,
    border-color 0.25s ease,
    transform   0.25s cubic-bezier(0.22,1,0.36,1);
}
.fcta-platform__btn:hover {
  border-color: rgba(155,61,232,0.85);
  box-shadow:
    0 0 40px rgba(155,61,232,0.55),
    0 6px 24px rgba(0,0,0,0.35);
  transform: translateY(-2px);
}
.fcta-platform__btn:active { transform: translateY(0); }
.fcta-platform__btn-glow {
  position: absolute; inset: 0;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255,255,255,0.12) 50%,
    transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  pointer-events: none;
}
.fcta-platform__btn:hover .fcta-platform__btn-glow {
  transform: translateX(100%);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 600px) {
  .fcta-platform { padding: 1.25rem 1.1rem; }
  .fcta-platform__btns { flex-direction: column; align-items: stretch; }
  .fcta-platform__link,
  .fcta-platform__btn { justify-content: center; }
}


/* ============================================================
   PREMIUM LOADER  — snb-loader
   Dark sports-tech overlay; logo fades in with glow, then
   the whole overlay fades out into the page.
   ============================================================ */

/* Lock scroll while loader is visible */
body.snb-loading {
  overflow: hidden;
}

/* Overlay — full viewport, sits above everything */
.snb-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #04061a;            /* near-black navy */
  opacity: 1;
  /* fade-OUT transition (triggered by .is-hiding class) */
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: all;
  will-change: opacity;
}

/* Hidden state — added by JS when exit starts */
.snb-loader.is-hiding {
  opacity: 0;
  pointer-events: none;
}

/* Completely removed from layout — added by JS after transition ends */
.snb-loader.is-gone {
  display: none;
}

/* ── Ambient glow layers ──────────────────────────────────── */
.snb-loader__glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  pointer-events: none;
}

.snb-loader__glow--left {
  left: -180px;
  top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(
    circle at center,
    rgba(155, 61, 232, 0.18) 0%,
    transparent 70%
  );
  animation: loaderGlowPulse 2.4s ease-in-out infinite alternate;
}

.snb-loader__glow--right {
  right: -180px;
  top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(
    circle at center,
    rgba(0, 200, 232, 0.14) 0%,
    transparent 70%
  );
  animation: loaderGlowPulse 2.4s ease-in-out 0.6s infinite alternate;
}

/* ── Logo wrapper — centres and runs the appear animation ─── */
.snb-loader__logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* enter: starts invisible, slides up 8px, scales 0.94× */
  opacity: 0;
  transform: translateY(8px) scale(0.94);
  animation: loaderLogoIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
  /* subtle white glow that intensifies after fade-in */
  filter: drop-shadow(0 0 0px rgba(255,255,255,0));
  transition: filter 0.4s ease 0.9s;
}

/* After logo has appeared, add the neon glow */
.snb-loader__logo-wrap.is-glowing {
  filter: drop-shadow(0 0 22px rgba(130, 80, 220, 0.55))
          drop-shadow(0 0 40px rgba(0, 200, 232, 0.22));
}

.snb-loader__logo {
  width: 200px;
  height: auto;
  display: block;
  /* keep white / light versions visible on dark bg */
  user-select: none;
}

/* ── Keyframes ───────────────────────────────────────────── */
@keyframes loaderLogoIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes loaderGlowPulse {
  from { opacity: 0.6; transform: translateY(-50%) scale(0.92); }
  to   { opacity: 1;   transform: translateY(-50%) scale(1.06); }
}

/* ── Reduced-motion override ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .snb-loader {
    transition: opacity 0.25s linear;
  }
  .snb-loader__logo-wrap {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .snb-loader__glow {
    animation: none;
  }
}

/* ============================================================
   NAVBAR / HERO Z-INDEX FIX
   Ensures the fixed navbar always renders above all hero
   graphics, dashboard panels, radar nodes and tooltip cards.
   ============================================================ */

/* ── Hero section: explicit stacking root below navbar ───────── */
.hero-full,
.hero-split {
  z-index: 0;      /* hero layer sits below navbar (z-index: 9000) */
}

/* ── Hero inner grid: stay inside hero layer ─────────────────── */
.hero-inner {
  z-index: 1;      /* relative to hero section only */
  /* Safe top gap so content never reaches the navbar bar */
  padding-top: max(3rem, calc(var(--snb-height, 76px) + 1.5rem));
}

/* ── Dashboard / radar card: low z-index, bounded to hero ────── */
.hero-visual {
  z-index: 1;      /* same layer as hero-text, never above navbar */
  overflow: visible;
}

.hv-card {
  position: relative;
  z-index: 1;      /* well below navbar z-9000 */
  overflow: visible;  /* let badges float out without clipping */
}

/* Clip the card content INSIDE (header, bars, radar) without
   creating a new stacking context on the card itself */
.hv-card__header,
.hv-card__body-clip {
  overflow: hidden;
}

/* ── Floating badge chips: cap their vertical reach ──────────── */
.hv-badge {
  z-index: 2;      /* above the card content, below tooltip, below navbar */
  /* Prevent the top badge from drifting into the navbar zone */
  max-height: calc(100% + 60px);  /* visual guard */
}

/* ── Tooltip: high within hero but always below navbar ───────── */
.hv-tooltip {
  z-index: 50;     /* above all hero elements, but navbar is 9000 */
}

/* ── Parallax layers: explicitly below hero content ──────────── */
.hero-bg-grid,
.hero-bg-radial,
.hero-bg-glow-left,
.hero-bg-glow-right,


/* ── Extra top padding on the hero container (large screens) ─── */
@media (min-width: 1024px) {
  .hero-inner {
    padding-top: max(3.5rem, calc(var(--snb-height, 76px) + 2rem));
  }

  /* On very wide screens align the visual panel top so it stays
     well within the viewport and can't reach the navbar bar */
  .hero-visual {
    align-self: center;
    padding-top: 0;
  }
}

/* ============================================================
   COGNITIVE ASSESSMENT PAGE  — /platform/cognitive-assessment
   Prefix: ca-
   ============================================================ */

/* ── Shared container & section header ──────────────────────── */
.ca-page { background: var(--navy-deep); }

.ca-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3rem;
}

.ca-section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.ca-section-title {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0.75rem 0 1rem;
}

.ca-title-gradient {
  background: linear-gradient(135deg, #9b3de8 0%, #00c8e8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ca-section-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.52);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Shared eyebrow */
.ca-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.9rem;
  border-radius: 100px;
  background: rgba(0,200,232,0.07);
  border: 1px solid rgba(0,200,232,0.25);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00c8e8;
}

.ca-eyebrow__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #00c8e8;
  box-shadow: 0 0 6px rgba(0,200,232,0.9);
  animation: heroPulse 2.2s ease infinite;
}

/* ── Breadcrumb ──────────────────────────────────────────────── */
.ca-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  margin-bottom: 1.5rem;
}
.ca-breadcrumb a { color: rgba(255,255,255,0.45); text-decoration: none; }
.ca-breadcrumb a:hover { color: #00c8e8; }
.ca-breadcrumb span:last-child { color: rgba(255,255,255,0.65); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 1 — HERO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ca-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--snb-height, 76px);
  overflow: clip;
  background: #050a1a;
}

.ca-hero__bg-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 80%);
}

.ca-hero__bg-radial {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 65% 80% at 25% 60%, rgba(74,30,158,0.22) 0%, transparent 70%),
    radial-gradient(ellipse 55% 60% at 80% 35%, rgba(0,200,232,0.10) 0%, transparent 65%);
}

.ca-hero__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 5rem;
  align-items: center;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 5rem 3rem 5rem;
}

.ca-hero__text { display: flex; flex-direction: column; gap: 1.25rem; }

.ca-hero__title {
  font-size: clamp(2.8rem, 4.5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
}
.ca-hero__title-gradient {
  background: linear-gradient(135deg, #9b3de8 0%, #00c8e8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ca-hero__subtitle {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.58);
  line-height: 1.72;
  max-width: 500px;
  margin: 0;
}

.ca-hero__stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: 0.25rem;
}
.ca-hero__stat { display: flex; flex-direction: column; gap: 0.2rem; }
.ca-hero__stat-val {
  font-size: 1.4rem; font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, #9b3de8 0%, #00c8e8 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ca-hero__stat-label {
  font-size: 0.68rem; font-weight: 500;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.ca-hero__stat-sep { width: 1px; height: 28px; background: rgba(255,255,255,0.1); flex-shrink: 0; }

.ca-hero__ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Hero radar card */
.ca-hero__visual { display: flex; justify-content: center; align-items: center; }

.ca-hero__radar-card {
  background: rgba(8,12,30,0.82);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  padding: 1.4rem 1.4rem 1.1rem;
  backdrop-filter: blur(20px);
  box-shadow: 0 0 0 1px rgba(0,200,232,0.07), 0 24px 80px rgba(0,0,0,0.5), 0 0 60px rgba(74,30,158,0.12);
  width: 100%;
  max-width: 440px;
  animation: hvCardIn 0.9s cubic-bezier(0.22,1,0.36,1) 0.3s both;
}

.ca-hero__radar-header {
  display: flex; align-items: center; gap: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 0.25rem;
}
.ca-hero__radar-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #00c8e8;
  box-shadow: 0 0 8px rgba(0,200,232,0.9);
  animation: heroPulse 2s ease infinite;
}
.ca-hero__radar-label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.45);
}
.ca-hero__radar-badge {
  margin-left: auto;
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem; border-radius: 100px;
  background: rgba(155,61,232,0.15);
  border: 1px solid rgba(155,61,232,0.35);
  color: rgba(155,61,232,0.9);
}

.ca-hero__radar-svg { width: 100%; height: auto; display: block; }

.ca-hero__radar-caption {
  text-align: center;
  font-size: 0.65rem;
  font-weight: 500;
  color: rgba(255,255,255,0.32);
  letter-spacing: 0.05em;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 0.5rem;
  display: flex; align-items: center; gap: 0.4rem; justify-content: center;
}
.ca-hero__radar-caption i { color: #00c8e8; font-size: 0.6rem; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 2 — COGNITIVE FOOTBALL MODEL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ca-model {
  position: relative;
  padding: 7rem 0 6rem;
  background: #070c1e;
}
.ca-model__bg-glow {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 800px; height: 400px;
  background: radial-gradient(ellipse at center, rgba(74,30,158,0.13) 0%, transparent 70%);
  pointer-events: none;
}

/* Chain diagram */
.ca-chain {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin: 0 auto 4rem;
  max-width: 1200px;
  padding: 0 1rem;
  flex-wrap: nowrap;
}

.ca-chain__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  flex: 1;
  min-width: 0;
}

.ca-chain__icon-wrap {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--step-color, rgba(0,200,232,0.3));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  color: var(--step-color, #00c8e8);
  box-shadow: 0 0 20px rgba(0,0,0,0.3), 0 0 12px color-mix(in srgb, var(--step-color) 20%, transparent);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.ca-chain__step:hover .ca-chain__icon-wrap {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 20px color-mix(in srgb, var(--step-color) 30%, transparent);
}

.ca-chain__label {
  font-size: 0.8rem; font-weight: 700;
  color: var(--step-color, #00c8e8);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ca-chain__desc {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.35);
  line-height: 1.4;
  max-width: 90px;
}

.ca-chain__arrow {
  display: flex; align-items: center;
  padding: 0 0.2rem;
  margin-top: 1.4rem; /* align with icon centre */
  flex-shrink: 0;
}
.ca-chain__arrow svg { width: 32px; height: 16px; }

/* Model grid cards */
.ca-model__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
}

.ca-model__card {
  background: rgba(10,14,35,0.65);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  backdrop-filter: blur(12px);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.ca-model__card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.14); }

.ca-model__card-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid color-mix(in srgb, var(--mc-color) 30%, transparent);
  display: flex; align-items: center; justify-content: center;
  color: var(--mc-color, #00c8e8);
  font-size: 1rem;
  margin-bottom: 1rem;
}

.ca-model__card h3 {
  font-size: 0.95rem; font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
.ca-model__card p {
  font-size: 0.82rem; color: rgba(255,255,255,0.45); line-height: 1.65;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 3 — PERCEPTION → DECISION → EXECUTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ca-process {
  padding: 7rem 0 6rem;
  background: #050a1a;
}

.ca-process__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.ca-proc-card {
  position: relative;
  background: rgba(8,12,30,0.80);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 2rem 1.75rem 1.75rem;
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), border-color 0.28s ease, box-shadow 0.28s ease;
}
.ca-proc-card:hover {
  transform: translateY(-7px);
}

.ca-proc-card__accent {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  border-radius: 2px 2px 0 0;
}
.ca-proc-card--cyan .ca-proc-card__accent   { background: linear-gradient(90deg, transparent, #00c8e8, transparent); }
.ca-proc-card--purple .ca-proc-card__accent { background: linear-gradient(90deg, transparent, #9b3de8, transparent); }
.ca-proc-card--blue .ca-proc-card__accent   { background: linear-gradient(90deg, transparent, #38bdf8, transparent); }

.ca-proc-card--cyan:hover   { border-color: rgba(0,200,232,0.3);   box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 30px rgba(0,200,232,0.12); }
.ca-proc-card--purple:hover { border-color: rgba(155,61,232,0.3);  box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 30px rgba(155,61,232,0.12); }
.ca-proc-card--blue:hover   { border-color: rgba(56,189,248,0.3);  box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 30px rgba(56,189,248,0.12); }

.ca-proc-card__num {
  font-size: 2.8rem; font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  opacity: 0.08;
  position: absolute; top: 1.2rem; right: 1.4rem;
  background: linear-gradient(135deg, #fff 0%, transparent 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.ca-proc-card__icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
}
.ca-proc-card--cyan   .ca-proc-card__icon { background: rgba(0,200,232,0.1);   border: 1px solid rgba(0,200,232,0.25);   color: #00c8e8; }
.ca-proc-card--purple .ca-proc-card__icon { background: rgba(155,61,232,0.1);  border: 1px solid rgba(155,61,232,0.25);  color: #9b3de8; }
.ca-proc-card--blue   .ca-proc-card__icon { background: rgba(56,189,248,0.1);  border: 1px solid rgba(56,189,248,0.25);  color: #38bdf8; }

.ca-proc-card__title {
  font-size: 1.3rem; font-weight: 800;
  letter-spacing: -0.02em; color: #fff;
  margin-bottom: 0.75rem;
}

.ca-proc-card__desc {
  font-size: 0.85rem; color: rgba(255,255,255,0.5);
  line-height: 1.7; margin-bottom: 1.25rem;
}

.ca-proc-card__list {
  list-style: none; display: flex; flex-direction: column; gap: 0.4rem;
  margin-bottom: 1.5rem;
}
.ca-proc-card__list li {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.78rem; color: rgba(255,255,255,0.55);
}

.ca-proc-card__dot {
  width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0;
}
.ca-proc-card--cyan   .ca-proc-card__dot { background: #00c8e8; }
.ca-proc-card--purple .ca-proc-card__dot { background: #9b3de8; }
.ca-proc-card--blue   .ca-proc-card__dot { background: #38bdf8; }

.ca-proc-card__metric {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.ca-proc-card__metric-label { font-size: 0.65rem; font-weight: 600; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.08em; }
.ca-proc-card__metric-val   { font-size: 0.8rem; font-weight: 700; }
.ca-proc-card--cyan   .ca-proc-card__metric-val { color: #00c8e8; }
.ca-proc-card--purple .ca-proc-card__metric-val { color: #9b3de8; }
.ca-proc-card--blue   .ca-proc-card__metric-val { color: #38bdf8; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 4 — 11 ABILITIES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ca-abilities {
  position: relative;
  padding: 7rem 0 6rem;
  background: #07101f;
}

.ca-abilities__bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.8;
}

.ca-abilities__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.ca-ab-card {
  position: relative;
  background: rgba(8,12,30,0.78);
  border: 1px solid rgba(255,255,255,0.065);
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}
.ca-ab-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--ab-color) 30%, transparent);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 0 20px color-mix(in srgb, var(--ab-color) 12%, transparent);
}
.ca-ab-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
  background: var(--ab-color, #00c8e8);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.ca-ab-card:hover::before { opacity: 0.7; }

.ca-ab-card__top {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.ca-ab-card__num {
  font-size: 0.62rem; font-weight: 800;
  color: var(--ab-color, #00c8e8);
  letter-spacing: 0.1em; opacity: 0.75;
}

.ca-ab-card__icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: color-mix(in srgb, var(--ab-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ab-color) 25%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  color: var(--ab-color, #00c8e8);
}

.ca-ab-card__name {
  font-size: 0.88rem; font-weight: 700;
  color: rgba(255,255,255,0.9);
  letter-spacing: -0.01em;
  margin-bottom: 0.45rem;
}

.ca-ab-card__desc {
  font-size: 0.75rem; color: rgba(255,255,255,0.4);
  line-height: 1.6; margin-bottom: 1rem;
}

.ca-ab-card__bar-wrap {
  height: 2px; background: rgba(255,255,255,0.06);
  border-radius: 2px; overflow: hidden; margin-bottom: 0.6rem;
}
.ca-ab-card__bar {
  height: 100%;
  background: var(--ab-color, #00c8e8);
  border-radius: 2px;
  opacity: 0.7;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.ca-ab-card.is-visible .ca-ab-card__bar { transform: scaleX(1); }

.ca-ab-card__score {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.65rem; color: rgba(255,255,255,0.3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.ca-ab-card__score-val {
  font-size: 0.82rem; font-weight: 800;
  color: var(--ab-color, #00c8e8);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 5 — INTERACTIVE RADAR PROFILE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ca-profile {
  position: relative;
  padding: 7rem 0 6rem;
  background: #050a1a;
}
.ca-profile__bg-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 30% 50%, rgba(74,30,158,0.15) 0%, transparent 70%);
}

.ca-profile__layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 3.5rem;
  align-items: start;
}

.ca-profile__radar-wrap {
  position: relative;
}
.ca-profile__radar-svg {
  width: 100%; max-width: 520px;
  height: auto; display: block; margin: 0 auto;
}

/* Ability label groups */
.ca-radar__label-g { opacity: 0; transition: opacity 0.4s ease; }
.ca-radar__label-g.is-visible { opacity: 1 !important; }

/* Tick dots */
.ca-radar__tick { opacity: 0; transition: opacity 0.3s ease; }
.ca-radar__tick.is-visible { opacity: 1; }

/* Node groups */
.ca-radar__node-g:hover .ca-radar__node,
.ca-radar__node-g:focus .ca-radar__node { r: 6; }

.ca-radar__node {
  transition: opacity 0.3s ease;
  cursor: pointer;
}
.ca-radar__node.is-visible {
  opacity: 1 !important;
  animation: caNodePulse 3s ease-in-out infinite;
}
@keyframes caNodePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

/* Data polygon fade-in */
#ca-data-poly { transition: opacity 0.6s ease; }
#ca-data-poly.is-drawn { opacity: 1 !important; }

/* Right panel */
.ca-profile__panel {
  background: rgba(8,12,30,0.80);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 1.75rem 1.5rem;
  backdrop-filter: blur(16px);
  position: sticky;
  top: calc(var(--snb-height, 76px) + 1rem);
}

.ca-profile__panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 1.25rem;
}
.ca-profile__panel-badge {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  color: #00c8e8;
  background: rgba(0,200,232,0.1);
  border: 1px solid rgba(0,200,232,0.22);
  padding: 0.25rem 0.65rem; border-radius: 100px;
}
.ca-profile__panel-date {
  font-size: 0.65rem; color: rgba(255,255,255,0.28);
}

.ca-profile__bars { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1.5rem; }

.ca-profile__bar-row { display: flex; align-items: center; gap: 0.6rem; }
.ca-profile__bar-label {
  font-size: 0.68rem; color: rgba(255,255,255,0.45);
  width: 52px; flex-shrink: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ca-profile__bar-track {
  flex: 1; height: 5px;
  background: rgba(255,255,255,0.07); border-radius: 3px; overflow: hidden;
}
.ca-profile__bar-fill {
  height: 100%; border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.22,1,0.36,1);
  opacity: 0.8;
}
.ca-profile__bar-val {
  font-size: 0.72rem; font-weight: 700; width: 24px; text-align: right; flex-shrink: 0;
}

.ca-profile__overall {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  background: rgba(155,61,232,0.08);
  border: 1px solid rgba(155,61,232,0.22);
  border-radius: 12px;
  margin-bottom: 1rem;
}
.ca-profile__overall-label {
  font-size: 0.72rem; font-weight: 600;
  color: rgba(255,255,255,0.55);
}
.ca-profile__overall-val {
  font-size: 1.8rem; font-weight: 900;
  background: linear-gradient(135deg, #9b3de8 0%, #00c8e8 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1;
}

.ca-profile__hint {
  font-size: 0.68rem; color: rgba(255,255,255,0.22);
  text-align: center; display: flex; align-items: center; justify-content: center; gap: 0.4rem;
}
.ca-profile__hint i { color: rgba(0,200,232,0.5); }

/* ── Tooltip (reuses hvt structure from homepage) ── */
.ca-tooltip {
  position: absolute;
  width: 252px;
  background: rgba(5,8,20,0.98);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  padding: 0;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
  backdrop-filter: blur(28px);
  box-shadow: 0 0 0 1px rgba(0,200,232,0.07), 0 24px 64px rgba(0,0,0,0.75), 0 0 50px rgba(74,30,158,0.16);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.22s cubic-bezier(0.22,1,0.36,1), transform 0.22s cubic-bezier(0.22,1,0.36,1);
}
.ca-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.ca-tooltip::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(155,61,232,0.85) 30%, rgba(0,200,232,0.85) 70%, transparent 100%);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 6 — HOW PERFORMANCE IS MEASURED
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ca-metrics {
  padding: 7rem 0 6rem;
  background: #07101f;
}

.ca-metrics__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.ca-met-card {
  position: relative;
  background: rgba(8,12,30,0.78);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 2rem 1.75rem;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.ca-met-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--met-color) 30%, transparent);
}

.ca-met-card__accent {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--met-color, #00c8e8);
  opacity: 0.6;
}

.ca-met-card__header {
  display: flex; align-items: flex-start; gap: 1rem;
  margin-bottom: 1rem;
}

.ca-met-card__icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: color-mix(in srgb, var(--met-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--met-color) 25%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  color: var(--met-color, #00c8e8);
}

.ca-met-card__title {
  font-size: 1.05rem; font-weight: 800;
  color: #fff; letter-spacing: -0.02em;
  margin-bottom: 0.2rem;
}
.ca-met-card__unit {
  font-size: 0.65rem; font-weight: 600;
  color: var(--met-color, #00c8e8);
  text-transform: uppercase; letter-spacing: 0.08em;
  opacity: 0.7;
}

.ca-met-card__desc {
  font-size: 0.85rem; color: rgba(255,255,255,0.48);
  line-height: 1.7; margin-bottom: 1.25rem;
}

.ca-met-card__example {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 0.9rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  margin-bottom: 0.85rem;
}
.ca-met-card__eg-label { font-size: 0.65rem; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.07em; }
.ca-met-card__eg-val   { font-size: 0.8rem; font-weight: 700; color: var(--met-color, #00c8e8); }

.ca-met-card__bar-wrap {
  height: 4px; background: rgba(255,255,255,0.07);
  border-radius: 4px; overflow: hidden;
}
.ca-met-card__bar {
  height: 100%;
  background: var(--met-color, #00c8e8);
  border-radius: 4px; opacity: 0.75;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
.ca-met-card.is-visible .ca-met-card__bar { transform: scaleX(1); }

/* SensiScore special card */
.ca-met-card--sensi .ca-met-card__sensiscore-display {
  display: flex; align-items: baseline; gap: 0.6rem; margin-top: 1.25rem;
}
.ca-met-card__sensiscore-num {
  font-size: 3.2rem; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, #c084fc 0%, #9b3de8 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 12px rgba(155,61,232,0.45));
}
.ca-met-card__sensiscore-label {
  font-size: 0.72rem; color: rgba(255,255,255,0.35);
  text-transform: uppercase; letter-spacing: 0.07em;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 7 — EXAMPLE SCENARIO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ca-scenario {
  position: relative;
  padding: 7rem 0 6rem;
  background: #050a1a;
}
.ca-scenario__bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 36px 36px; opacity: 0.6;
}
.ca-scenario__bg-glow {
  position: absolute; bottom: 0; right: 0;
  width: 600px; height: 400px;
  background: radial-gradient(ellipse at right bottom, rgba(74,30,158,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.ca-scenario__layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 3.5rem;
  align-items: start;
}

/* Step timeline */
.ca-scenario__steps { display: flex; flex-direction: column; gap: 0; }

.ca-scen-step {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  position: relative;
  padding-bottom: 2rem;
}
.ca-scen-step:last-child { padding-bottom: 0; }

.ca-scen-step__connector {
  position: absolute;
  top: 44px; left: 21px;
  bottom: 0; width: 2px;
  background: linear-gradient(to bottom, var(--scen-color, #00c8e8), rgba(255,255,255,0.04));
  opacity: 0.25;
}
.ca-scen-step:last-child .ca-scen-step__connector { display: none; }

.ca-scen-step__icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: color-mix(in srgb, var(--scen-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--scen-color) 28%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  color: var(--scen-color, #00c8e8);
  position: relative; z-index: 1;
}

.ca-scen-step__body { padding-top: 0.2rem; }

.ca-scen-step__header { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.45rem; }
.ca-scen-step__num {
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--scen-color, #00c8e8); opacity: 0.7;
  padding: 0.15rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--scen-color) 30%, transparent);
  border-radius: 100px;
}
.ca-scen-step__title {
  font-size: 1rem; font-weight: 700;
  color: rgba(255,255,255,0.9);
  letter-spacing: -0.01em;
}
.ca-scen-step__desc {
  font-size: 0.83rem; color: rgba(255,255,255,0.45); line-height: 1.68;
}

/* Metrics readout panel */
.ca-scen-readout {
  background: rgba(8,12,30,0.88);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 1.5rem;
  backdrop-filter: blur(20px);
  box-shadow: 0 0 0 1px rgba(0,200,232,0.06), 0 24px 64px rgba(0,0,0,0.5);
  margin-bottom: 1.25rem;
}

.ca-scen-readout__head {
  display: flex; align-items: center; gap: 0.5rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 1.25rem;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
}
.ca-scen-readout__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px rgba(52,211,153,0.9);
  animation: heroPulse 1.8s ease infinite;
}

.ca-scen-readout__rows { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.25rem; }

.ca-scen-readout__row-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.3rem;
}
.ca-scen-readout__metric { font-size: 0.72rem; color: rgba(255,255,255,0.45); }
.ca-scen-readout__val    { font-size: 0.78rem; font-weight: 700; }
.ca-scen-readout__track  { height: 4px; background: rgba(255,255,255,0.07); border-radius: 4px; overflow: hidden; }
.ca-scen-readout__fill   { height: 100%; border-radius: 4px; opacity: 0.8;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s cubic-bezier(0.22,1,0.36,1) 0.3s;
}
.ca-scen-readout.is-visible .ca-scen-readout__fill { transform: scaleX(1); }

.ca-scen-readout__sensiscore {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.1rem;
  background: rgba(155,61,232,0.08);
  border: 1px solid rgba(155,61,232,0.22);
  border-radius: 12px;
}
.ca-scen-readout__ss-label {
  font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.45);
}
.ca-scen-readout__ss-val {
  font-size: 2rem; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, #9b3de8 0%, #00c8e8 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Abilities chips */
.ca-scen-tested {
  background: rgba(8,12,30,0.7);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px; padding: 1.25rem;
}
.ca-scen-tested__head {
  font-size: 0.65rem; font-weight: 600;
  color: rgba(255,255,255,0.32);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 0.75rem; display: block;
}
.ca-scen-tested__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ca-scen-tested__chip {
  font-size: 0.65rem; font-weight: 600;
  padding: 0.22rem 0.6rem; border-radius: 100px;
  background: rgba(0,200,232,0.08);
  border: 1px solid rgba(0,200,232,0.22);
  color: rgba(0,200,232,0.75);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FINAL CTA
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ca-cta {
  position: relative;
  padding: 7rem 0;
  background: #07101f;
  text-align: center;
}
.ca-cta__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(74,30,158,0.18) 0%, transparent 70%);
}
.ca-cta__inner { position: relative; z-index: 1; }
.ca-cta__title {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 800; letter-spacing: -0.03em;
  color: #fff; margin: 0.75rem 0 1rem;
}
.ca-cta__sub {
  font-size: 1rem; color: rgba(255,255,255,0.5);
  max-width: 480px; margin: 0 auto 2rem;
  line-height: 1.65;
}
.ca-cta__btns { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1024px) {
  .ca-hero__inner         { grid-template-columns: 1fr; gap: 3rem; padding-top: 4rem; }
  .ca-hero__visual        { justify-content: center; }
  .ca-hero__radar-card    { max-width: 460px; }
  .ca-abilities__grid     { grid-template-columns: repeat(3, 1fr); }
  .ca-profile__layout     { grid-template-columns: 1fr; }
  .ca-profile__panel      { position: static; }
  .ca-scenario__layout    { grid-template-columns: 1fr; }
  .ca-container           { padding: 0 2rem; }
}

@media (max-width: 768px) {
  .ca-chain               { flex-wrap: wrap; gap: 1rem; justify-content: center; }
  .ca-chain__arrow        { display: none; }
  .ca-chain__step         { flex: 0 1 calc(50% - 1rem); }
  .ca-process__grid       { grid-template-columns: 1fr; }
  .ca-abilities__grid     { grid-template-columns: repeat(2, 1fr); }
  .ca-metrics__grid       { grid-template-columns: 1fr; }
  .ca-model__grid         { grid-template-columns: 1fr; }
  .ca-hero__stats         { gap: 1rem; }
  .ca-container           { padding: 0 1.25rem; }
}

@media (max-width: 480px) {
  .ca-abilities__grid     { grid-template-columns: 1fr; }
  .ca-hero__title         { font-size: 2.4rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ca-ab-card__bar, .ca-met-card__bar,
  .ca-scen-readout__fill  { transition: none; transform: scaleX(1); }
  .ca-chain__step:hover .ca-chain__icon-wrap,
  .ca-proc-card:hover, .ca-ab-card:hover { transform: none; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HOW COGNITIVE ASSESSMENT WORKS  — section styles
   .ca-how  ·  .ca-how__steps  ·  .ca-how__card
   .ca-how__metrics  ·  .ca-how__metric
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Section shell ──────────────────────────────────────────── */
.ca-how {
  position: relative;
  padding: 8rem 0 7rem;
  background: #070c1e;
  overflow: hidden;
}

/* Dot-grid background */
.ca-how__bg-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 80%);
}

/* Ambient glow – purple left, cyan right */
.ca-how__bg-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 55% 70% at 10% 50%, rgba(74,30,158,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 45% 60% at 90% 40%, rgba(0,200,232,0.10) 0%, transparent 65%);
}

/* ── 3-step grid ────────────────────────────────────────────── */
.ca-how__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 4rem;
  z-index: 1;
}

/* Horizontal connector line running behind the cards */
.ca-how__connector {
  position: absolute;
  top: 46px;           /* align with badge centre */
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 1px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.ca-how__connector-line {
  width: 100%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,200,232,0.35) 15%,
    rgba(155,61,232,0.55) 50%,
    rgba(34,211,238,0.35) 85%,
    transparent 100%
  );
  animation: caHowLineGlow 3s ease-in-out infinite alternate;
}
@keyframes caHowLineGlow {
  0%   { opacity: 0.5; }
  100% { opacity: 1; }
}

/* ── Step card ──────────────────────────────────────────────── */
.ca-how__card {
  position: relative;
  background: rgba(8,12,30,0.80);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 2rem 1.75rem 1.75rem;
  overflow: hidden;
  z-index: 1;
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1),
              border-color 0.28s ease,
              box-shadow  0.28s ease;
  /* entrance: handled by .reveal + delay */
  transition-delay: var(--hw-delay, 0s);
}
.ca-how__card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--hw-color) 35%, transparent);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.45),
    0 0 40px color-mix(in srgb, var(--hw-color) 14%, transparent);
}

/* Top colour accent line */
.ca-how__card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--hw-color, #00c8e8) 40%,
    color-mix(in srgb, var(--hw-color) 50%, #9b3de8) 100%
  );
  opacity: 0.75;
}

/* Right-side glow wash */
.ca-how__card::after {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hw-color) 18%, transparent) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Card top row: badge + icon */
.ca-how__card-top {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.4rem;
  position: relative; z-index: 1;
}

/* Step number badge */
.ca-how__step-badge {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: color-mix(in srgb, var(--hw-color) 10%, rgba(8,12,30,0.9));
  border: 1px solid color-mix(in srgb, var(--hw-color) 30%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.ca-how__step-num {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em;
  color: var(--hw-color, #00c8e8);
  font-variant-numeric: tabular-nums;
}

/* Icon ring */
.ca-how__icon-ring {
  width: 52px; height: 52px; border-radius: 14px;
  background: color-mix(in srgb, var(--hw-color) 8%, rgba(6,10,28,0.95));
  border: 1px solid color-mix(in srgb, var(--hw-color) 22%, transparent);
  display: flex; align-items: center; justify-content: center;
  color: var(--hw-color, #00c8e8);
  box-shadow:
    inset 0 0 18px color-mix(in srgb, var(--hw-color) 8%, transparent),
    0 0 16px color-mix(in srgb, var(--hw-color) 12%, transparent);
  transition: box-shadow 0.28s ease, background 0.28s ease;
}
.ca-how__card:hover .ca-how__icon-ring {
  background: color-mix(in srgb, var(--hw-color) 14%, rgba(6,10,28,0.95));
  box-shadow:
    inset 0 0 24px color-mix(in srgb, var(--hw-color) 14%, transparent),
    0 0 28px color-mix(in srgb, var(--hw-color) 22%, transparent);
}

/* Card body */
.ca-how__card-body { position: relative; z-index: 1; }

.ca-how__card-title {
  font-size: 1.18rem; font-weight: 800;
  letter-spacing: -0.025em; color: #fff;
  margin-bottom: 0.65rem;
  line-height: 1.2;
}

.ca-how__card-desc {
  font-size: 0.855rem;
  color: rgba(255,255,255,0.48);
  line-height: 1.72;
  margin-bottom: 1.25rem;
}

/* Tag chips */
.ca-how__card-tags {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.ca-how__tag {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.055em;
  text-transform: uppercase;
  padding: 0.22rem 0.65rem; border-radius: 100px;
  background: color-mix(in srgb, var(--hw-color) 8%, rgba(8,12,30,0.6));
  border: 1px solid color-mix(in srgb, var(--hw-color) 22%, transparent);
  color: color-mix(in srgb, var(--hw-color) 90%, #fff);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ca-how__card:hover .ca-how__tag {
  background: color-mix(in srgb, var(--hw-color) 14%, rgba(8,12,30,0.6));
  border-color: color-mix(in srgb, var(--hw-color) 35%, transparent);
}

/* Large ghost step number */
.ca-how__card-num-bg {
  position: absolute; bottom: 0.5rem; right: 1rem;
  font-size: 5.5rem; font-weight: 900; line-height: 1;
  letter-spacing: -0.06em;
  color: var(--hw-color, #00c8e8);
  opacity: 0.045;
  pointer-events: none; user-select: none;
  font-variant-numeric: tabular-nums;
  z-index: 0;
}

/* ── Metrics row ────────────────────────────────────────────── */
.ca-how__metrics {
  position: relative; z-index: 1;
}

.ca-how__metrics-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.28);
  margin-bottom: 1.1rem;
  text-align: center;
}

.ca-how__metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

/* Single metric tile */
.ca-how__metric {
  background: rgba(8,12,30,0.75);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 1.25rem 1.2rem 1rem;
  display: flex; flex-direction: column; gap: 0.9rem;
  position: relative; overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.ca-how__metric:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--hm-color) 35%, transparent);
}

/* top accent line */
.ca-how__metric::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
  background: var(--hm-color, #00c8e8);
  opacity: 0.6;
}

/* right corner glow */
.ca-how__metric::after {
  content: '';
  position: absolute; top: -30px; right: -30px;
  width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hm-color) 15%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

/* Icon */
.ca-how__metric-icon {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  background: color-mix(in srgb, var(--hm-color) 10%, rgba(6,10,28,0.95));
  border: 1px solid color-mix(in srgb, var(--hm-color) 22%, transparent);
  display: flex; align-items: center; justify-content: center;
  color: var(--hm-color, #00c8e8);
}

/* Text */
.ca-how__metric-body {
  display: flex; flex-direction: column; gap: 0.15rem;
}
.ca-how__metric-name {
  font-size: 0.88rem; font-weight: 700;
  color: #fff; letter-spacing: -0.01em;
}
.ca-how__metric-unit {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hm-color, #00c8e8);
  opacity: 0.7;
}

/* Progress bar */
.ca-how__metric-bar {
  height: 3px; background: rgba(255,255,255,0.07);
  border-radius: 3px; overflow: hidden;
}
.ca-how__metric-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--hm-color) 60%, transparent),
    var(--hm-color, #00c8e8)
  );
  width: 0%;
  transition: width 1s cubic-bezier(0.22,1,0.36,1);
}

/* SensiScore special tile */
.ca-how__metric--sensi .ca-how__metric-sensi-display {
  display: flex; align-items: baseline; gap: 0.35rem;
  margin-top: auto;
}
.ca-how__metric-sensi-num {
  font-size: 2.4rem; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, #c084fc 0%, #9b3de8 50%, #00c8e8 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  letter-spacing: -0.04em;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ca-how__steps           { grid-template-columns: 1fr; gap: 1.25rem; }
  .ca-how__connector       { display: none; }
  .ca-how__metrics-row     { grid-template-columns: repeat(2, 1fr); }
  .ca-how__card            { max-width: 520px; margin: 0 auto; width: 100%; }
}

@media (max-width: 600px) {
  .ca-how__metrics-row     { grid-template-columns: 1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ca-how__connector-line  { animation: none; }
  .ca-how__card:hover,
  .ca-how__metric:hover    { transform: none; }
  .ca-how__metric-fill     { transition: none; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COGNITIVE TRAINING PAGE — HERO  (ct-hero)
   Split layout: text left · video-player card right
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Section shell ──────────────────────────────────────────── */
.ct-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: clip;
  background: linear-gradient(160deg, #050a1a 0%, #110630 45%, #050a1a 100%);
  /* Bleed under the fixed transparent navbar */
  margin-top: calc(-1 * var(--snb-height, 76px));
  padding-top: var(--snb-height, 76px);
  z-index: 0;
}

/* ── Background layers ──────────────────────────────────────── */
.ct-hero__bg-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 25%, transparent 75%);
}
.ct-hero__bg-radial {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 65% 85% at 20% 55%, rgba(74,30,158,0.26) 0%, transparent 68%),
    radial-gradient(ellipse 50% 60% at 80% 35%, rgba(0,200,232,0.10) 0%, transparent 62%);
}
.ct-hero__bg-glow-left {
  position: absolute; left: -180px; top: 50%; transform: translateY(-50%);
  width: 520px; height: 520px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(155,61,232,0.14) 0%, transparent 70%);
  filter: blur(48px);
}
.ct-hero__bg-glow-right {
  position: absolute; right: -140px; bottom: -60px;
  width: 580px; height: 580px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(0,200,232,0.08) 0%, transparent 70%);
  filter: blur(56px);
}

/* ── Inner grid ─────────────────────────────────────────────── */
.ct-hero__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 52fr 48fr;
  gap: 5rem;
  align-items: center;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 5rem 3rem 5.5rem;
}

/* ── LEFT — text block ──────────────────────────────────────── */
.ct-hero__text {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* Headline */
.ct-hero__title {
  font-size: clamp(2.8rem, 4.2vw, 4rem);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
}
.ct-hero__title-gradient {
  background: linear-gradient(135deg, #9b3de8 0%, #00c8e8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subtitle */
.ct-hero__subtitle {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.72;
  max-width: 520px;
  margin: 0;
}

/* Stats strip */
.ct-hero__stats {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ct-hero__stat {
  display: flex; flex-direction: column; gap: 0.2rem;
}
.ct-hero__stat-val {
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #9b3de8 0%, #00c8e8 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1;
}
.ct-hero__stat-label {
  font-size: 0.68rem; font-weight: 600;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.ct-hero__stat-sep {
  width: 1px; height: 28px; flex-shrink: 0;
  background: rgba(255,255,255,0.1);
}

/* CTAs */
.ct-hero__ctas {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}

/* Primary button (override) */
.ct-btn-primary {
  padding: 0.9rem 1.9rem;
  font-size: 0.92rem;
  gap: 0.6rem;
  box-shadow: 0 0 36px rgba(74,30,158,0.42), 0 4px 16px rgba(0,0,0,0.3);
}
.ct-btn-primary:hover { box-shadow: 0 0 56px rgba(155,61,232,0.52), 0 6px 24px rgba(0,0,0,0.35); }
.ct-btn-primary svg { transition: transform 0.25s ease; }
.ct-btn-primary:hover svg { transform: translateX(4px); }

/* Watch Demo button */
.ct-btn-watch {
  padding: 0.9rem 1.75rem;
  font-size: 0.92rem;
  display: inline-flex; align-items: center; gap: 0.7rem;
  border-color: rgba(155,61,232,0.45);
  color: rgba(255,255,255,0.82);
}
.ct-btn-watch:hover {
  background: rgba(155,61,232,0.1);
  border-color: rgba(155,61,232,0.7);
  color: #fff;
}
.ct-btn-watch__icon {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: rgba(155,61,232,0.18);
  border: 1px solid rgba(155,61,232,0.4);
  display: flex; align-items: center; justify-content: center;
  color: #c084fc;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ct-btn-watch:hover .ct-btn-watch__icon {
  background: rgba(155,61,232,0.28);
  border-color: rgba(192,132,252,0.6);
}

/* Feature pills row */
.ct-hero__pills {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: 0.25rem;
}
.ct-hero__pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.3rem 0.85rem; border-radius: 100px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em;
  color: rgba(255,255,255,0.52);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.ct-hero__pill:hover {
  background: rgba(155,61,232,0.1);
  border-color: rgba(155,61,232,0.3);
  color: rgba(255,255,255,0.82);
}
.ct-hero__pill i { font-size: 0.65rem; color: #9b3de8; }

/* ── RIGHT — video card ─────────────────────────────────────── */
.ct-hero__visual {
  position: relative;
  display: flex; justify-content: center; align-items: center;
}

/* ── Video card shell ───────────────────────────────────────── */
.ct-video-card {
  width: 100%;
  background: rgba(8,12,30,0.82);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  overflow: hidden;
  backdrop-filter: blur(24px);
  box-shadow:
    0 0 0 1px rgba(155,61,232,0.08),
    0 32px 90px rgba(0,0,0,0.55),
    0 0 80px rgba(74,30,158,0.14);
  animation: ctCardIn 0.9s cubic-bezier(0.22,1,0.36,1) 0.25s both;
}
@keyframes ctCardIn {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Card header bar */
.ct-video-card__header {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  background: rgba(5,8,20,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ct-video-card__dots {
  display: flex; gap: 5px;
}
.ct-video-card__dots span {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
}
.ct-video-card__dots span:nth-child(1) { background: rgba(255,95,87,0.55); }
.ct-video-card__dots span:nth-child(2) { background: rgba(255,189,68,0.55); }
.ct-video-card__dots span:nth-child(3) { background: rgba(40,201,64,0.45); }

.ct-video-card__title {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.38);
  display: flex; align-items: center; gap: 0.45rem;
}
.ct-video-card__live-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #9b3de8;
  box-shadow: 0 0 7px rgba(155,61,232,0.9);
  animation: heroPulse 2.2s ease infinite;
}
.ct-video-card__badge {
  margin-left: auto;
  font-size: 0.56rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem; border-radius: 100px;
  background: rgba(155,61,232,0.15);
  border: 1px solid rgba(155,61,232,0.4);
  color: rgba(192,132,252,0.9);
}

/* Screen area */
.ct-video-card__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #040810;
  overflow: hidden;
}
.ct-video-card__screen-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(155,61,232,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 50% 50%,  rgba(0,200,232,0.06) 0%, transparent 60%);
}

/* Actual <video> */
.ct-video-card__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.ct-video-card__video.is-playing { opacity: 1; }

/* ── YouTube embed inside screen ───────────────────────────── */
.ct-yt-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: #000;
}
.ct-yt-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
}

/* ── Play overlay ───────────────────────────────────────────── */
.ct-video-play-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer;
  transition: opacity 0.4s ease;
}
.ct-video-play-overlay.is-hidden { opacity: 0; pointer-events: none; }

.ct-video-play-overlay__bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(4,8,16,0.3) 0%, rgba(4,8,16,0.55) 100%);
}

/* Pulsing rings */
.ct-play-ring {
  position: absolute;
  width: 90px; height: 90px; border-radius: 50%;
  border: 1px solid rgba(155,61,232,0.35);
  animation: ctRingPulse 2.4s ease-out infinite;
  pointer-events: none;
  z-index: 1;
}
.ct-play-ring--outer {
  width: 120px; height: 120px;
  border-color: rgba(155,61,232,0.18);
  animation-delay: 0.6s;
}
@keyframes ctRingPulse {
  0%   { transform: scale(0.88); opacity: 0.7; }
  70%  { transform: scale(1.12); opacity: 0;   }
  100% { transform: scale(1.12); opacity: 0;   }
}

/* Play button */
.ct-play-btn {
  width: 66px; height: 66px; border-radius: 50%;
  background: rgba(155,61,232,0.82);
  border: 1.5px solid rgba(192,132,252,0.5);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 0 0 8px rgba(155,61,232,0.12),
    0 0 40px rgba(155,61,232,0.45),
    0 8px 24px rgba(0,0,0,0.5);
  position: relative; z-index: 2;
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1), box-shadow 0.22s ease, background 0.22s ease;
}
.ct-video-play-overlay:hover .ct-play-btn {
  transform: scale(1.1);
  background: rgba(155,61,232,0.96);
  box-shadow: 0 0 0 10px rgba(155,61,232,0.15), 0 0 60px rgba(155,61,232,0.6), 0 8px 28px rgba(0,0,0,0.5);
}
.ct-video-play-overlay:focus-visible { outline: 2px solid #9b3de8; outline-offset: 4px; }

/* Scanlines overlay */
.ct-video-scanlines {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.06) 2px,
    rgba(0,0,0,0.06) 4px
  );
}

/* Scene label */
.ct-video-scene-label {
  position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%);
  z-index: 3;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.38);
  display: flex; align-items: center; gap: 0.4rem;
  white-space: nowrap;
}
.ct-video-scene-label i { color: #9b3de8; font-size: 0.7rem; }

/* ── HUD row ────────────────────────────────────────────────── */
.ct-video-card__hud {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(5,8,20,0.7);
  border-top: 1px solid rgba(255,255,255,0.05);
}
.ct-hud-item {
  padding: 0.7rem 0.8rem;
  display: flex; flex-direction: column; gap: 0.18rem;
  border-right: 1px solid rgba(255,255,255,0.05);
  text-align: center;
}
.ct-hud-item:last-child { border-right: none; }
.ct-hud-item__label {
  font-size: 0.55rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: rgba(255,255,255,0.25);
}
.ct-hud-item__val {
  font-size: 0.88rem; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1;
}

/* ── Floating badges ────────────────────────────────────────── */
.ct-hero__badge {
  position: absolute;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  background: rgba(8,12,30,0.90);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  font-size: 0.7rem; color: rgba(255,255,255,0.82);
  pointer-events: none;
}
.ct-hero__badge i {
  font-size: 0.9rem; color: #9b3de8;
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(155,61,232,0.12);
  border: 1px solid rgba(155,61,232,0.25);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ct-hero__badge-text { display: flex; flex-direction: column; gap: 0.08rem; }
.ct-hero__badge-val   { font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.ct-hero__badge-label { font-size: 0.6rem; font-weight: 500; color: rgba(255,255,255,0.38); white-space: nowrap; }

/* Badge positions */
.ct-hero__badge--tl {
  top: -14px; left: -18px;
  border-color: rgba(155,61,232,0.25);
  animation: ctBadgeFloat 5s ease-in-out infinite;
}
.ct-hero__badge--br {
  bottom: -14px; right: -18px;
  border-color: rgba(0,200,232,0.22);
  animation: ctBadgeFloat 5.5s ease-in-out infinite 0.4s reverse;
}
.ct-hero__badge--br i { color: #00c8e8; background: rgba(0,200,232,0.12); border-color: rgba(0,200,232,0.25); }
@keyframes ctBadgeFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ct-hero__inner {
    grid-template-columns: 1fr;
    gap: 3.5rem;
    padding-top: calc(var(--snb-height, 76px) + 2rem);
    padding-bottom: 4rem;
  }
  .ct-hero__visual  { justify-content: center; }
  .ct-video-card    { max-width: 580px; margin: 0 auto; }
  .ct-hero__badge--tl { top: -12px; left: 0; }
  .ct-hero__badge--br { bottom: -12px; right: 0; }
}

@media (max-width: 640px) {
  .ct-hero__inner       { padding: calc(var(--snb-height,76px) + 1.5rem) 1.25rem 3rem; }
  .ct-hero__title       { font-size: 2.5rem; }
  .ct-hero__stats       { gap: 1rem; }
  .ct-video-card__hud   { grid-template-columns: repeat(2, 1fr); }
  .ct-hud-item:nth-child(2) { border-right: none; }
  .ct-hero__badge       { display: none; }
  .ct-hero__pills       { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ct-play-ring         { animation: none; }
  .ct-hero__badge--tl,
  .ct-hero__badge--br   { animation: none; }
  .ct-video-card        { animation: none; }
}

/* ──────────────────────────────────────────────────────────────
   VR TRAINING ENVIRONMENT MOCKUP  (ct-vr-mockup)
   Visual placeholder inside the video card when no video loaded
────────────────────────────────────────────────────────────── */

/* Container fills the screen area */
.ct-vr-mockup {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #030711 0%, #080e22 60%, #0a1030 100%);
}

/* Perspective grid floor */
.ct-vr-mockup__floor {
  position: absolute;
  bottom: 0; left: -20%; right: -20%;
  height: 55%;
  background-image:
    linear-gradient(to right, rgba(0,200,232,0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,200,232,0.10) 1px, transparent 1px);
  background-size: 12% 14%;
  transform: perspective(320px) rotateX(52deg);
  transform-origin: 50% 0%;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 80%);
}

/* Horizon glow */
.ct-vr-mockup__horizon {
  position: absolute;
  left: 0; right: 0;
  bottom: 45%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,200,232,0.35) 30%, rgba(155,61,232,0.45) 50%, rgba(0,200,232,0.35) 70%, transparent 100%);
  filter: blur(1px);
}
.ct-vr-mockup__horizon::before {
  content: '';
  position: absolute; inset: -12px 5% -12px 5%;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,200,232,0.08) 0%, transparent 70%);
  filter: blur(8px);
}

/* Side ambient glows */
.ct-vr-mockup__glow-l {
  position: absolute; left: -60px; top: 50%; transform: translateY(-50%);
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(155,61,232,0.22) 0%, transparent 65%);
  filter: blur(28px);
}
.ct-vr-mockup__glow-r {
  position: absolute; right: -40px; top: 40%;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,200,232,0.18) 0%, transparent 65%);
  filter: blur(24px);
}

/* Floating target markers */
.ct-vr-target {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.ct-vr-target--1 {
  top: 22%; left: 52%;
  animation: ctTargetFloat 3.8s ease-in-out infinite;
}
.ct-vr-target--2 {
  top: 36%; left: 20%;
  animation: ctTargetFloat 4.4s ease-in-out infinite 0.6s;
}
.ct-vr-target--3 {
  top: 18%; right: 22%;
  animation: ctTargetFloat 3.5s ease-in-out infinite 1.1s;
}
@keyframes ctTargetFloat {
  0%, 100% { transform: translateY(0);   opacity: 1;   }
  50%       { transform: translateY(-7px); opacity: 0.7; }
}
.ct-vr-target__label {
  font-size: 0.5rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(0,200,232,0.75);
  white-space: nowrap;
}

/* Decision timer */
.ct-vr-timer {
  position: absolute;
  top: 10px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: rgba(5,8,20,0.72);
  border: 1px solid rgba(155,61,232,0.3);
  border-radius: 8px;
  padding: 6px 14px;
  backdrop-filter: blur(8px);
  min-width: 110px;
}
.ct-vr-timer__label {
  font-size: 0.45rem; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
}
.ct-vr-timer__val {
  font-size: 1.1rem; font-weight: 900; letter-spacing: -0.03em;
  color: #c084fc; line-height: 1;
}
.ct-vr-timer__bar {
  width: 100%; height: 3px; border-radius: 100px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.ct-vr-timer__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #9b3de8, #c084fc);
  border-radius: 100px;
  animation: ctTimerBar 1.8s ease-in-out infinite alternate;
}
@keyframes ctTimerBar {
  from { width: 100%; }
  to   { width: 20%; }
}

/* Gaze reticle */
.ct-vr-reticle {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: ctReticleMove 4s ease-in-out infinite;
}
@keyframes ctReticleMove {
  0%   { transform: translate(-50%, -50%); }
  25%  { transform: translate(calc(-50% + 40px), calc(-50% - 20px)); }
  60%  { transform: translate(calc(-50% - 55px), calc(-50% + 10px)); }
  80%  { transform: translate(calc(-50% + 30px), calc(-50% + 18px)); }
  100% { transform: translate(-50%, -50%); }
}

/* Corner brackets */
.ct-vr-corner {
  position: absolute;
  width: 18px; height: 18px;
  border-color: rgba(0,200,232,0.4);
  border-style: solid;
  border-width: 0;
}
.ct-vr-corner--tl { top: 8px;  left: 8px;  border-top-width: 2px; border-left-width: 2px; }
.ct-vr-corner--tr { top: 8px;  right: 8px; border-top-width: 2px; border-right-width: 2px; }
.ct-vr-corner--bl { bottom: 8px; left: 8px;  border-bottom-width: 2px; border-left-width: 2px; }
.ct-vr-corner--br { bottom: 8px; right: 8px; border-bottom-width: 2px; border-right-width: 2px; }

/* Play overlay sits on top of mockup at reduced opacity (shows mockup through) */
.ct-video-play-overlay__bg {
  background: linear-gradient(180deg, rgba(4,8,16,0.25) 0%, rgba(4,8,16,0.45) 100%);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ct-vr-target, .ct-vr-reticle, .ct-vr-timer__bar-fill { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   COGNITIVE TRAINING PAGE — SKILL CARDS + DRILL VIDEO SECTION
   .ct-skills  ·  .ct-skill-card  ·  .ct-drill-panel
   .ct-drill-video-card  ·  .ct-drill-screen  ·  .ct-scan-target
══════════════════════════════════════════════════════════════ */

/* ── Section shell ──────────────────────────────────────────── */
.ct-skills {
  position: relative;
  padding: 6rem 0 7rem;
  overflow: hidden;
  background: #070c1e;
}
.ct-skills__bg-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 90% 75% at 50% 50%, black 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 50%, black 20%, transparent 72%);
}
.ct-skills__bg-glow {
  position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
  width: 700px; height: 500px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0,200,232,0.07) 0%, transparent 65%);
  filter: blur(48px);
}
.ct-skills__container {
  position: relative; z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3rem;
}

/* ── Section header ─────────────────────────────────────────── */
.ct-skills__header {
  text-align: center;
  margin-bottom: 4rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
}
.ct-skills__title {
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
}
.ct-skills__title-grad {
  background: linear-gradient(135deg, #00c8e8 0%, #9b3de8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ct-skills__subtitle {
  font-size: 1.02rem;
  color: rgba(255,255,255,0.5);
  max-width: 580px;
  line-height: 1.72;
  margin: 0;
}

/* ── Skill cards grid ───────────────────────────────────────── */
.ct-skills__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 4rem;
}

/* ── Individual skill card ──────────────────────────────────── */
.ct-skill-card {
  position: relative;
  background: rgba(8,12,30,0.75);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 2rem 1.75rem 1.75rem;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 1.25rem;
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1),
              border-color 0.28s ease,
              box-shadow 0.28s ease;
}
.ct-skill-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 64px rgba(0,0,0,0.45);
}

/* Colour themes */
.ct-skill-card--cyan:hover   { border-color: rgba(0,200,232,0.28); box-shadow: 0 24px 64px rgba(0,0,0,0.45), 0 0 40px rgba(0,200,232,0.1); }
.ct-skill-card--purple:hover { border-color: rgba(155,61,232,0.28); box-shadow: 0 24px 64px rgba(0,0,0,0.45), 0 0 40px rgba(155,61,232,0.1); }
.ct-skill-card--teal:hover   { border-color: rgba(34,211,238,0.28); box-shadow: 0 24px 64px rgba(0,0,0,0.45), 0 0 40px rgba(34,211,238,0.1); }

/* Top accent line */
.ct-skill-card__accent {
  position: absolute; top: 0; left: 10%; right: 10%; height: 2px;
  border-radius: 0 0 100px 100px;
  transition: opacity 0.3s ease;
  opacity: 0.65;
}
.ct-skill-card--cyan   .ct-skill-card__accent { background: linear-gradient(90deg, transparent, #00c8e8, transparent); }
.ct-skill-card--purple .ct-skill-card__accent { background: linear-gradient(90deg, transparent, #9b3de8, transparent); }
.ct-skill-card--teal   .ct-skill-card__accent { background: linear-gradient(90deg, transparent, #22d3ee, transparent); }
.ct-skill-card:hover   .ct-skill-card__accent { opacity: 1; }

/* Ghost step number watermark */
.ct-skill-card__num {
  position: absolute; top: 1.1rem; right: 1.4rem;
  font-size: 4rem; font-weight: 900; letter-spacing: -0.05em;
  line-height: 1; pointer-events: none;
  color: rgba(255,255,255,0.03);
  transition: color 0.3s ease;
}
.ct-skill-card:hover .ct-skill-card__num { color: rgba(255,255,255,0.055); }

/* Icon wrap */
.ct-skill-card__icon-wrap {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s ease;
}
.ct-skill-card--cyan   .ct-skill-card__icon-wrap { background: rgba(0,200,232,0.1);  border: 1px solid rgba(0,200,232,0.25);  color: #00c8e8; }
.ct-skill-card--purple .ct-skill-card__icon-wrap { background: rgba(155,61,232,0.1); border: 1px solid rgba(155,61,232,0.25); color: #c084fc; }
.ct-skill-card--teal   .ct-skill-card__icon-wrap { background: rgba(34,211,238,0.1); border: 1px solid rgba(34,211,238,0.25); color: #22d3ee; }
.ct-skill-card--cyan:hover   .ct-skill-card__icon-wrap { transform: scale(1.08); box-shadow: 0 0 22px rgba(0,200,232,0.25); }
.ct-skill-card--purple:hover .ct-skill-card__icon-wrap { transform: scale(1.08); box-shadow: 0 0 22px rgba(155,61,232,0.25); }
.ct-skill-card--teal:hover   .ct-skill-card__icon-wrap { transform: scale(1.08); box-shadow: 0 0 22px rgba(34,211,238,0.25); }

/* Card body */
.ct-skill-card__body { flex: 1; display: flex; flex-direction: column; gap: 0.7rem; }
.ct-skill-card__title {
  font-size: 1.12rem; font-weight: 700;
  color: #fff; margin: 0; letter-spacing: -0.01em;
}
.ct-skill-card__desc {
  font-size: 0.88rem; color: rgba(255,255,255,0.5);
  line-height: 1.68; margin: 0;
}

/* Bullet list */
.ct-skill-card__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.45rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.ct-skill-card__list li {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; font-weight: 500;
  color: rgba(255,255,255,0.42);
}
.ct-skill-card__dot {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
}
.ct-skill-card--cyan   .ct-skill-card__dot { background: #00c8e8; box-shadow: 0 0 5px rgba(0,200,232,0.6); }
.ct-skill-card--purple .ct-skill-card__dot { background: #c084fc; box-shadow: 0 0 5px rgba(192,132,252,0.6); }
.ct-skill-card--teal   .ct-skill-card__dot { background: #22d3ee; box-shadow: 0 0 5px rgba(34,211,238,0.6); }

/* Bottom metric badge */
.ct-skill-card__metric {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.ct-skill-card__metric-val {
  font-size: 1.55rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1;
}
.ct-skill-card__metric-label {
  font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em;
  color: rgba(255,255,255,0.3);
}

/* ── Drill panel (2-col layout) ──────────────────────────────── */
.ct-drill-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  background: rgba(5,9,20,0.6);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 24px;
  padding: 3rem;
  position: relative;
  overflow: hidden;
}
/* subtle top-left accent */
.ct-drill-panel::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,200,232,0.3), rgba(155,61,232,0.3), transparent);
}

/* Left — text ──────────────────────────────────────────────── */
.ct-drill-tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0.85rem; border-radius: 100px;
  background: rgba(0,200,232,0.07);
  border: 1px solid rgba(0,200,232,0.2);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #00c8e8;
}
.ct-drill-tag__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #00c8e8;
  box-shadow: 0 0 6px rgba(0,200,232,0.9);
  animation: heroPulse 2.2s ease infinite;
}
.ct-drill-panel__title {
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  font-weight: 800; line-height: 1.15;
  letter-spacing: -0.02em; color: #fff;
  margin: 0.75rem 0 0.85rem;
}
.ct-drill-panel__title-grad {
  background: linear-gradient(135deg, #00c8e8 0%, #9b3de8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ct-drill-panel__desc {
  font-size: 0.92rem; color: rgba(255,255,255,0.5);
  line-height: 1.75; margin: 0 0 1.5rem;
}

/* Drill steps list */
.ct-drill-steps {
  list-style: none; padding: 0; margin: 0 0 1.5rem;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.ct-drill-step {
  display: flex; align-items: center; gap: 0.8rem;
  font-size: 0.85rem; color: rgba(255,255,255,0.62);
  font-weight: 500;
}
.ct-drill-step__num {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0;
  border: 1px solid;
}
.ct-drill-step__label { flex: 1; }

/* Ability chips row */
.ct-drill-chips {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.ct-drill-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.8rem; border-radius: 100px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em;
  border: 1px solid;
}
.ct-drill-chip i { font-size: 0.62rem; }
.ct-drill-chip--cyan   { background: rgba(0,200,232,0.08);  border-color: rgba(0,200,232,0.25);  color: #00c8e8; }
.ct-drill-chip--purple { background: rgba(155,61,232,0.08); border-color: rgba(155,61,232,0.25); color: #c084fc; }
.ct-drill-chip--teal   { background: rgba(34,211,238,0.08); border-color: rgba(34,211,238,0.25); color: #22d3ee; }

/* ── Right — drill video card ───────────────────────────────── */
.ct-drill-panel__visual {
  position: relative;
}
.ct-drill-video-card {
  width: 100%;
  background: rgba(4,8,20,0.9);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,200,232,0.06),
    0 28px 72px rgba(0,0,0,0.5),
    0 0 60px rgba(0,200,232,0.08);
  animation: ctCardIn 0.9s cubic-bezier(0.22,1,0.36,1) 0.3s both;
}

/* Card header bar */
.ct-drill-video-card__header {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.8rem 1rem;
  background: rgba(5,8,20,0.7);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ct-drill-video-card__label {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
  display: flex; align-items: center; gap: 0.4rem;
  flex: 1;
}
.ct-drill-video-card__live-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #00c8e8;
  box-shadow: 0 0 7px rgba(0,200,232,0.9);
  animation: heroPulse 2.2s ease infinite;
}
.ct-drill-video-card__badge {
  font-size: 0.52rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem; border-radius: 100px;
  background: rgba(0,200,232,0.12);
  border: 1px solid rgba(0,200,232,0.35);
  color: rgba(0,200,232,0.9);
}

/* ── Drill screen ────────────────────────────────────────────── */
.ct-drill-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(175deg, #030810 0%, #080d20 55%, #0a1128 100%);
  overflow: hidden;
}

/* Perspective pitch grid */
.ct-drill-screen__pitch {
  position: absolute;
  bottom: 0; left: -15%; right: -15%;
  height: 58%;
  background-image:
    linear-gradient(to right, rgba(34,211,238,0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(34,211,238,0.07) 1px, transparent 1px);
  background-size: 11% 13%;
  transform: perspective(300px) rotateX(50deg);
  transform-origin: 50% 0%;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 80%);
}
/* Horizon glow */
.ct-drill-screen__horizon {
  position: absolute; left: 0; right: 0; bottom: 42%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,0.3) 30%, rgba(0,200,232,0.45) 50%, rgba(34,211,238,0.3) 70%, transparent);
  filter: blur(1px);
}
/* Ambient glow */
.ct-drill-screen__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 50% 90%, rgba(0,200,232,0.14) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 80% 30%, rgba(155,61,232,0.1) 0%, transparent 60%);
}

/* ── Scanning targets ────────────────────────────────────────── */
.ct-scan-target {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
}
.ct-scan-target--a { top: 18%; left: 18%;  animation: ctTargetFloat 3.6s ease-in-out infinite; }
.ct-scan-target--b { top: 22%; right: 18%; animation: ctTargetFloat 4.2s ease-in-out infinite 0.7s; }
.ct-scan-target--c { top: 42%; left: 44%;  animation: ctTargetFloat 3.9s ease-in-out infinite 1.3s; }

.ct-scan-target__ring {
  position: absolute;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid rgba(0,200,232,0.5);
  animation: ctScanRingPulse 2s ease-out infinite;
}
.ct-scan-target__ring--outer {
  width: 56px; height: 56px;
  border-color: rgba(0,200,232,0.22);
  animation-delay: 0.5s;
}
@keyframes ctScanRingPulse {
  0%   { transform: scale(0.85); opacity: 0.8; }
  65%  { transform: scale(1.1);  opacity: 0;   }
  100% { transform: scale(1.1);  opacity: 0;   }
}
.ct-scan-target--b .ct-scan-target__ring,
.ct-scan-target--b .ct-scan-target__ring--outer { border-color: rgba(155,61,232,0.5); }
.ct-scan-target--b .ct-scan-target__ring--outer { border-color: rgba(155,61,232,0.2); }
.ct-scan-target--c .ct-scan-target__ring,
.ct-scan-target--c .ct-scan-target__ring--outer { border-color: rgba(34,211,238,0.45); }
.ct-scan-target--c .ct-scan-target__ring--outer { border-color: rgba(34,211,238,0.18); }

.ct-scan-target__dot {
  width: 10px; height: 10px; border-radius: 50%; position: relative; z-index: 1;
}
.ct-scan-target--a .ct-scan-target__dot { background: #00c8e8; box-shadow: 0 0 10px rgba(0,200,232,0.85); }
.ct-scan-target--b .ct-scan-target__dot { background: #c084fc; box-shadow: 0 0 10px rgba(192,132,252,0.85); }
.ct-scan-target--c .ct-scan-target__dot { background: #22d3ee; box-shadow: 0 0 10px rgba(34,211,238,0.85); }

.ct-scan-target__lbl {
  position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
  font-size: 0.48rem; font-weight: 800; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55); white-space: nowrap;
}
.ct-scan-target--b .ct-scan-target__lbl { color: rgba(192,132,252,0.7); }
.ct-scan-target--c .ct-scan-target__lbl { color: rgba(34,211,238,0.7); }

/* Moving ball */
.ct-drill-ball {
  position: absolute;
  top: 58%; left: 8%;
  animation: ctBallMove 4.5s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.35));
}
@keyframes ctBallMove {
  0%   { transform: translate(0,    0); }
  30%  { transform: translate(80px, -30px); }
  60%  { transform: translate(200px,-20px); }
  80%  { transform: translate(250px, 10px); }
  100% { transform: translate(0,    0); }
}

/* Gaze path SVG */
.ct-drill-gaze-path {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.ct-gaze-line {
  stroke-dashoffset: 200;
  animation: ctGazeDash 3s linear infinite;
}
@keyframes ctGazeDash {
  to { stroke-dashoffset: -200; }
}

/* Reticle */
.ct-drill-reticle {
  position: absolute;
  top: 50%; left: 50%;
  animation: ctDrillReticle 5s ease-in-out infinite;
}
@keyframes ctDrillReticle {
  0%   { transform: translate(-50%, -50%); }
  20%  { transform: translate(calc(-50% - 80px), calc(-50% - 28px)); }
  45%  { transform: translate(calc(-50% + 90px), calc(-50% - 22px)); }
  70%  { transform: translate(calc(-50% + 50px),  calc(-50% + 20px)); }
  100% { transform: translate(-50%, -50%); }
}

/* HUD row at bottom of drill card */
.ct-drill-hud {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(3,6,18,0.8);
  border-top: 1px solid rgba(255,255,255,0.05);
}
.ct-drill-hud__item {
  padding: 0.65rem 0.75rem;
  display: flex; flex-direction: column; gap: 0.15rem;
  border-right: 1px solid rgba(255,255,255,0.05);
  text-align: center;
}
.ct-drill-hud__item:last-child { border-right: none; }
.ct-drill-hud__label {
  font-size: 0.52rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.22);
}
.ct-drill-hud__val {
  font-size: 0.85rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ct-skills__container { padding: 0 2rem; }
  .ct-drill-panel { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 860px) {
  .ct-skills__cards { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .ct-drill-panel { padding: 2rem; }
}
@media (max-width: 640px) {
  .ct-skills { padding: 4rem 0 5rem; }
  .ct-skills__container { padding: 0 1.25rem; }
  .ct-drill-hud { grid-template-columns: repeat(2, 1fr); }
  .ct-drill-hud__item:nth-child(2) { border-right: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ct-skill-card          { transition: none; }
  .ct-scan-target         { animation: none; }
  .ct-scan-target__ring   { animation: none; }
  .ct-drill-ball          { animation: none; }
  .ct-drill-reticle       { animation: none; }
  .ct-gaze-line           { animation: none; }
  .ct-drill-tag__dot      { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   COGNITIVE TRAINING PAGE — TRAINING IN REAL MATCH SITUATIONS
   .ct-match  ·  .ct-match-card  ·  .ct-match-video
   .ct-match-screen  ·  .ct-ms-player  ·  .ct-ms-ball
══════════════════════════════════════════════════════════════ */

/* ── Section shell ──────────────────────────────────────────── */
.ct-match {
  position: relative;
  padding: 7rem 0 8rem;
  overflow: hidden;
  background: #050a1a;
}
.ct-match__bg-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.042) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 95% 80% at 50% 50%, black 15%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 95% 80% at 50% 50%, black 15%, transparent 70%);
}
.ct-match__bg-radial {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 55% 60% at 8%  40%, rgba(155,61,232,0.11) 0%, transparent 65%),
    radial-gradient(ellipse 45% 50% at 92% 60%, rgba(0,200,232,0.09) 0%, transparent 65%);
}

/* ── Container ───────────────────────────────────────────────── */
.ct-match__container {
  position: relative; z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3rem;
}

/* ── Section header ─────────────────────────────────────────── */
.ct-match__header {
  text-align: center;
  margin-bottom: 4.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
}
.ct-match__title {
  font-size: clamp(2.1rem, 3.4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
}
.ct-match__title-grad {
  background: linear-gradient(135deg, #9b3de8 0%, #00c8e8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ct-match__subtitle {
  font-size: 1.02rem;
  color: rgba(255,255,255,0.5);
  max-width: 620px;
  line-height: 1.74;
  margin: 0;
}

/* ── Intro row: text left + scenario cards right ────────────── */
.ct-match__intro-row {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 4.5rem;
  align-items: start;
  margin-bottom: 4.5rem;
}

/* Left — copy */
.ct-match__intro-text {
  display: flex; flex-direction: column; gap: 1.25rem;
}
.ct-match__intro-body {
  font-size: 0.96rem;
  color: rgba(255,255,255,0.52);
  line-height: 1.78;
  margin: 0;
}
.ct-match__intro-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.85rem; font-weight: 600;
  color: #9b3de8;
  text-decoration: none;
  margin-top: 0.5rem;
  transition: color 0.2s ease, gap 0.2s ease;
}
.ct-match__intro-link:hover {
  color: #c084fc;
  gap: 0.65rem;
}
.ct-match__intro-link svg { transition: transform 0.2s ease; }
.ct-match__intro-link:hover svg { transform: translateX(3px); }

/* ── Scenario cards (right column) ─────────────────────────── */
.ct-match__scenarios {
  display: flex; flex-direction: column; gap: 0.75rem;
}

.ct-match-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0;
  background: rgba(8,12,30,0.7);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.26s cubic-bezier(0.22,1,0.36,1),
              border-color 0.26s ease,
              box-shadow 0.26s ease;
}
.ct-match-card:hover {
  transform: translateX(5px);
  border-color: rgba(255,255,255,0.13);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}

/* Left icon column */
.ct-match-card__left {
  display: flex; flex-direction: column; align-items: center;
  padding: 1.25rem 0 1.25rem;
  border-right: 1px solid rgba(255,255,255,0.06);
  background: rgba(4,7,18,0.5);
}
.ct-match-card__icon {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid;
  transition: box-shadow 0.26s ease, transform 0.26s ease;
}
.ct-match-card:hover .ct-match-card__icon { transform: scale(1.1); }
.ct-match-card__connector {
  flex: 1; width: 1px; margin-top: 8px;
  background: rgba(255,255,255,0.05);
}
.ct-match-card:last-child .ct-match-card__connector { display: none; }

/* Right body */
.ct-match-card__body {
  padding: 1.1rem 1.35rem;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.ct-match-card__top {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.15rem;
}
.ct-match-card__num {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.09em;
  color: rgba(255,255,255,0.2);
  text-transform: uppercase;
}
.ct-match-card__tag {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.18rem 0.6rem; border-radius: 100px;
  border: 1px solid;
}
.ct-match-card__title {
  font-size: 0.95rem; font-weight: 700;
  color: #fff; margin: 0; letter-spacing: -0.01em;
  line-height: 1.3;
}
.ct-match-card__desc {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.42);
  line-height: 1.65;
  margin: 0;
}

/* ── Video block ─────────────────────────────────────────────── */
.ct-match-video {
  position: relative;
}
.ct-match-video__glow {
  position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 400px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse 55% 55% at 50% 50%,
    rgba(155,61,232,0.1) 0%, transparent 65%);
  filter: blur(60px);
}
.ct-match-video__card {
  position: relative; z-index: 1;
  background: rgba(4,7,18,0.92);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(155,61,232,0.08),
    0 40px 120px rgba(0,0,0,0.6),
    0 0 100px rgba(74,30,158,0.15);
  animation: ctCardIn 0.9s cubic-bezier(0.22,1,0.36,1) 0.2s both;
}

/* Card header */
.ct-match-video__header {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.9rem 1.2rem;
  background: rgba(3,6,16,0.7);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ct-match-video__header-label {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: rgba(255,255,255,0.32);
  display: flex; align-items: center; gap: 0.45rem;
  flex: 1;
}
.ct-match-video__live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #9b3de8;
  box-shadow: 0 0 8px rgba(155,61,232,1);
  animation: heroPulse 2.2s ease infinite;
}
.ct-match-video__header-badges {
  display: flex; align-items: center; gap: 0.5rem;
}
.ct-match-video__badge {
  font-size: 0.52rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem; border-radius: 100px;
  background: rgba(155,61,232,0.12);
  border: 1px solid rgba(155,61,232,0.3);
  color: rgba(192,132,252,0.9);
}
.ct-match-video__badge--green {
  background: rgba(34,197,94,0.1);
  border-color: rgba(34,197,94,0.3);
  color: rgba(74,222,128,0.9);
  animation: heroPulse 2.2s ease infinite;
}

/* ── Match screen ────────────────────────────────────────────── */
.ct-match-screen {
  position: relative;
  aspect-ratio: 21 / 9;          /* ultrawide cinematic feel */
  overflow: hidden;
}
.ct-match-screen__bg {
  position: absolute; inset: 0;
  background: linear-gradient(170deg, #030810 0%, #060d1e 50%, #091228 100%);
}

/* Pitch perspective grid */
.ct-match-screen__pitch {
  position: absolute;
  bottom: 0; left: -10%; right: -10%;
  height: 60%;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 8% 12%;
  transform: perspective(380px) rotateX(48deg);
  transform-origin: 50% 0%;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 82%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 82%);
}
/* Green pitch tint overlay */
.ct-match-screen__pitch::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(22,163,74,0.05);
}

/* Horizon glow */
.ct-match-screen__horizon {
  position: absolute; left: 0; right: 0; bottom: 40%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(155,61,232,0.35) 25%,
    rgba(0,200,232,0.45) 50%,
    rgba(155,61,232,0.35) 75%,
    transparent 100%);
  filter: blur(1px);
}
.ct-match-screen__horizon::after {
  content: '';
  position: absolute; inset: -14px 8% -14px 8%;
  background: radial-gradient(ellipse 70% 55% at 50% 50%,
    rgba(0,200,232,0.06) 0%, transparent 70%);
  filter: blur(10px);
}

/* Side glows */
.ct-match-screen__glow-l {
  position: absolute; left: -80px; top: 30%;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(155,61,232,0.18) 0%, transparent 65%);
  filter: blur(40px); pointer-events: none;
}
.ct-match-screen__glow-r {
  position: absolute; right: -60px; top: 25%;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,200,232,0.14) 0%, transparent 65%);
  filter: blur(36px); pointer-events: none;
}

/* ── Player silhouettes ──────────────────────────────────────── */
.ct-ms-player {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ct-ms-player--1 { bottom: 28%; left: 20%; animation: ctMsPlayerFloat 4.2s ease-in-out infinite; }
.ct-ms-player--2 { bottom: 30%; left: 50%; animation: ctMsPlayerFloat 4.8s ease-in-out infinite 0.5s; }
.ct-ms-player--3 { bottom: 32%; right: 22%; animation: ctMsPlayerFloat 4.5s ease-in-out infinite 1s; }
@keyframes ctMsPlayerFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

/* Glow halo on correct-target player */
.ct-ms-player__halo {
  position: absolute; inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,200,232,0.28) 0%, transparent 65%);
  filter: blur(8px);
  animation: heroPulse 2.5s ease infinite;
}

/* Status labels */
.ct-ms-player__label {
  font-size: 0.48rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem; border-radius: 100px;
  display: flex; align-items: center; gap: 0.3rem;
  white-space: nowrap;
}
.ct-ms-player__label--correct {
  background: rgba(0,200,232,0.15);
  border: 1px solid rgba(0,200,232,0.4);
  color: #00c8e8;
}
.ct-ms-player__label--blocked {
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.35);
  color: #ef4444;
}

/* ── Moving ball ─────────────────────────────────────────────── */
.ct-ms-ball {
  position: absolute;
  bottom: 18%; left: 40%;
  animation: ctMsBallArc 4s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.4));
}
@keyframes ctMsBallArc {
  0%   { transform: translate(0,      0); }
  25%  { transform: translate(-80px, -40px); }
  50%  { transform: translate(-160px,-20px); }
  75%  { transform: translate(-80px,  -5px); }
  100% { transform: translate(0,      0); }
}
.ct-ms-ball__trail {
  position: absolute; top: 50%; left: 50%;
  width: 80px; height: 4px;
  transform: translate(-90%, -50%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18));
  border-radius: 100px;
  filter: blur(2px);
  pointer-events: none;
}

/* ── Decision timer ──────────────────────────────────────────── */
.ct-ms-timer {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: rgba(4,7,18,0.78);
  border: 1px solid rgba(155,61,232,0.35);
  border-radius: 10px;
  padding: 8px 18px;
  backdrop-filter: blur(10px);
  min-width: 130px;
}
.ct-ms-timer__label {
  font-size: 0.45rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.32);
}
.ct-ms-timer__val {
  font-size: 1.25rem; font-weight: 900; letter-spacing: -0.03em;
  color: #c084fc; line-height: 1;
}
.ct-ms-timer__track {
  width: 100%; height: 3px; border-radius: 100px;
  background: rgba(255,255,255,0.07); overflow: hidden;
}
.ct-ms-timer__fill {
  height: 100%;
  background: linear-gradient(90deg, #9b3de8, #c084fc);
  border-radius: 100px;
  animation: ctTimerBar 2.2s ease-in-out infinite alternate;
}

/* ── Gaze path SVG ───────────────────────────────────────────── */
.ct-ms-gaze-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.ct-ms-gaze-line {
  stroke-dashoffset: 0;
  animation: ctGazeDash 3.5s linear infinite;
}
.ct-ms-gaze-line--2 { animation-delay: 0.8s; animation-duration: 4s; }

/* ── Reticle ─────────────────────────────────────────────────── */
.ct-ms-reticle {
  position: absolute; top: 50%; left: 50%;
  animation: ctMsReticle 5s ease-in-out infinite;
}
@keyframes ctMsReticle {
  0%   { transform: translate(-50%,-50%); }
  20%  { transform: translate(calc(-50% - 150px), calc(-50% - 30px)); }
  50%  { transform: translate(calc(-50% + 160px), calc(-50% - 25px)); }
  75%  { transform: translate(calc(-50% - 30px),  calc(-50% + 20px)); }
  100% { transform: translate(-50%,-50%); }
}

/* Scene label */
.ct-ms-scene-label {
  position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.32);
  display: flex; align-items: center; gap: 0.45rem;
  white-space: nowrap; z-index: 3;
}
.ct-ms-scene-label i { color: #9b3de8; font-size: 0.65rem; }

/* ── HUD metrics footer ──────────────────────────────────────── */
.ct-match-video__hud {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(3,5,14,0.85);
  border-top: 1px solid rgba(255,255,255,0.05);
}
.ct-match-hud-item {
  padding: 0.75rem 0.9rem;
  display: flex; flex-direction: column; gap: 0.15rem;
  border-right: 1px solid rgba(255,255,255,0.05);
  text-align: center;
}
.ct-match-hud-item:last-child { border-right: none; }
.ct-match-hud-item__label {
  font-size: 0.52rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.22);
}
.ct-match-hud-item__val {
  font-size: 0.95rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1;
}

/* ── Caption row below video card ───────────────────────────── */
.ct-match-video__caption {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 0.25rem 0;
  flex-wrap: wrap;
}
.ct-match-video__caption-chips {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.ct-match-video__cap-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.85rem; border-radius: 100px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em;
  border: 1px solid;
  transition: opacity 0.2s ease;
}
.ct-match-video__cap-chip i { font-size: 0.6rem; }
.ct-match-video__cap-text {
  font-size: 0.72rem; color: rgba(255,255,255,0.28);
  margin: 0; white-space: nowrap;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ct-match__container { padding: 0 2rem; }
  .ct-match__intro-row { grid-template-columns: 1fr; gap: 2.5rem; }
  .ct-match-screen { aspect-ratio: 16 / 9; }
  .ct-match-video__hud { grid-template-columns: repeat(3, 1fr); }
  .ct-match-hud-item:nth-child(3) { border-right: none; }
  .ct-match-video__caption { flex-direction: column; align-items: flex-start; }
  .ct-match-video__cap-text { white-space: normal; }
}
@media (max-width: 768px) {
  .ct-match { padding: 5rem 0 6rem; }
  .ct-match__container { padding: 0 1.5rem; }
  .ct-match-screen { aspect-ratio: 16 / 9; }
  .ct-ms-player--3 { display: none; }
  .ct-match-video__hud { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .ct-match__container { padding: 0 1.25rem; }
  .ct-match-video__hud { grid-template-columns: repeat(2, 1fr); }
  .ct-match-hud-item:nth-child(2) { border-right: none; }
  .ct-match-hud-item:nth-child(5) { grid-column: span 2; border-right: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ct-ms-player      { animation: none; }
  .ct-ms-ball        { animation: none; }
  .ct-ms-reticle     { animation: none; }
  .ct-ms-gaze-line   { animation: none; }
  .ct-ms-timer__fill { animation: none; width: 60%; }
  .ct-match-video__card { animation: none; }
  .ct-match-card     { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   COGNITIVE TRAINING PAGE — PROGRESSIVE TRAINING SYSTEM
   .ct-prog  ·  .ct-prog__timeline  ·  .ct-prog__spine-svg
   .ct-prog-node  ·  .ct-prog-card  ·  .ct-prog__ramp
══════════════════════════════════════════════════════════════ */

/* ── Section shell ──────────────────────────────────────────── */
.ct-prog {
  position: relative;
  padding: 7rem 0 6rem;
  overflow: hidden;
  background: #070c1e;
}
.ct-prog__bg-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 15%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 15%, transparent 70%);
}
.ct-prog__bg-radial {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 50%, rgba(0,200,232,0.08)  0%, transparent 65%),
    radial-gradient(ellipse 50% 45% at 85% 50%, rgba(155,61,232,0.09) 0%, transparent 65%);
}

/* ── Container ───────────────────────────────────────────────── */
.ct-prog__container {
  position: relative; z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3rem;
}

/* ── Header ──────────────────────────────────────────────────── */
.ct-prog__header {
  text-align: center;
  margin-bottom: 3rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
}
.ct-prog__title {
  font-size: clamp(2.1rem, 3.4vw, 3.1rem);
  font-weight: 800; line-height: 1.08;
  letter-spacing: -0.03em; color: #fff; margin: 0;
}
.ct-prog__title-grad {
  background: linear-gradient(135deg, #22d3ee 0%, #9b3de8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ct-prog__subtitle {
  font-size: 1rem; color: rgba(255,255,255,0.5);
  max-width: 600px; line-height: 1.74; margin: 0;
}

/* ── Stats strip ─────────────────────────────────────────────── */
.ct-prog__stats {
  display: flex; justify-content: center; gap: 0;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  background: rgba(8,12,30,0.6);
  overflow: hidden;
  margin-bottom: 4rem;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: 4rem;
}
.ct-prog__stat {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 0.2rem; padding: 1.1rem 1rem;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.ct-prog__stat:last-child { border-right: none; }
.ct-prog__stat-val {
  font-size: 1.6rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1;
}
.ct-prog__stat-label {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════
   TIMELINE INFOGRAPHIC
══════════════════════════════════════════════════════════════ */
.ct-prog__timeline {
  position: relative;
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── SVG spine ───────────────────────────────────────────────── */
.ct-prog__spine-wrap {
  position: relative;
  width: 100%;
  height: 80px;           /* decorative band between the two rows */
  pointer-events: none;
  overflow: visible;
}
.ct-prog__spine-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}

/* Animated glow on spine */
.ct-spine-glow   { opacity: 0.25; }
.ct-spine-main   { opacity: 0.85; }
.ct-spine-dash   {
  stroke-dashoffset: 0;
  animation: ctSpineDash 4s linear infinite;
}
@keyframes ctSpineDash { to { stroke-dashoffset: -96; } }

/* Node circles */
.ct-spine-node {
  transition: r 0.3s ease;
}
.ct-spine-node--cp { /* checkpoints are larger */ }
.ct-spine-node--elite { }

/* Pulsing ring on elite node */
.ct-spine-pulse {
  animation: ctSpinePulse 2.4s ease-out infinite;
}
@keyframes ctSpinePulse {
  0%   { r: 10; opacity: 0.55; }
  100% { r: 18; opacity: 0; }
}

/* ── Two-row flow layout (replaces absolute positioning) ─────── */
/*
  Modules row sits above the SVG spine (flex, 4 columns).
  Checkpoints row sits below (flex, 3 columns, centred).
  SVG spine is purely decorative between the two rows.
  No absolute positioning → zero overlap at any screen size.
*/

/* ── Modules row — above the spine ──────────────────────────── */
.ct-prog__row {
  display: flex;
  gap: 1.5rem;
  padding: 0 0.25rem;
}
.ct-prog__row--modules {
  justify-content: space-between;
  align-items: flex-end;          /* cards bottom-align to meet the spine */
  margin-bottom: 0;               /* spine sits directly below */
}
.ct-prog__row--checkpoints {
  justify-content: space-around;
  align-items: flex-start;        /* stems drop down from spine line */
  margin-top: 0;
}

/* ── Generic node wrapper ────────────────────────────────────── */
.ct-prog-node {
  flex: 1;
  min-width: 0;                   /* allow flex shrink */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
/* Module nodes: card on top, stem below pointing down to spine */
.ct-prog__row--modules .ct-prog-node {
  flex-direction: column;
  align-items: stretch;
}
/* Checkpoint nodes: stem on top pointing down from spine, card below */
.ct-prog__row--checkpoints .ct-prog-node {
  flex-direction: column;
  align-items: stretch;
}

/* Stem connecting card to spine */
.ct-prog-node__stem {
  width: 1px; height: 28px; flex-shrink: 0;
  align-self: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06), transparent);
}

/* ── Card base styles ────────────────────────────────────────── */
.ct-prog-card {
  width: 100%;                    /* fill the flex column */
  background: rgba(8,12,30,0.88);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: 0.45rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.26s cubic-bezier(0.22,1,0.36,1),
              border-color 0.26s ease, box-shadow 0.26s ease;
  cursor: default;
}
.ct-prog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}

/* Badge */
.ct-prog-card__badge {
  font-size: 0.52rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.28);
}

/* Icon */
.ct-prog-card__icon {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Title & desc */
.ct-prog-card__title {
  font-size: 0.82rem; font-weight: 700; color: #fff; margin: 0;
  line-height: 1.25; letter-spacing: -0.01em;
}
.ct-prog-card__desc {
  font-size: 0.72rem; color: rgba(255,255,255,0.55);
  line-height: 1.58; margin: 0;
}

/* Footer: weeks + level */
.ct-prog-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 0.2rem;
}
.ct-prog-card__weeks {
  font-size: 0.6rem; font-weight: 600;
  color: rgba(255,255,255,0.28); letter-spacing: 0.04em;
}
.ct-prog-card__level {
  font-size: 0.55rem; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ── Module colour themes ────────────────────────────────────── */
.ct-prog-card--cyan {
  border-color: rgba(0,200,232,0.18);
  box-shadow: 0 0 0 1px rgba(0,200,232,0.06), 0 8px 24px rgba(0,0,0,0.35);
}
.ct-prog-card--cyan .ct-prog-card__icon {
  background: rgba(0,200,232,0.1); border: 1px solid rgba(0,200,232,0.25); color: #00c8e8;
}
.ct-prog-card--cyan:hover { border-color: rgba(0,200,232,0.32); box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 24px rgba(0,200,232,0.1); }

.ct-prog-card--teal {
  border-color: rgba(34,211,238,0.16);
  box-shadow: 0 0 0 1px rgba(34,211,238,0.05), 0 8px 24px rgba(0,0,0,0.35);
}
.ct-prog-card--teal .ct-prog-card__icon {
  background: rgba(34,211,238,0.1); border: 1px solid rgba(34,211,238,0.25); color: #22d3ee;
}
.ct-prog-card--teal:hover { border-color: rgba(34,211,238,0.3); box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 24px rgba(34,211,238,0.1); }

.ct-prog-card--purple {
  border-color: rgba(155,61,232,0.18);
  box-shadow: 0 0 0 1px rgba(155,61,232,0.07), 0 8px 24px rgba(0,0,0,0.35);
}
.ct-prog-card--purple .ct-prog-card__icon {
  background: rgba(155,61,232,0.1); border: 1px solid rgba(155,61,232,0.25); color: #c084fc;
}
.ct-prog-card--purple:hover { border-color: rgba(155,61,232,0.32); box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 24px rgba(155,61,232,0.1); }

/* ── Checkpoint cards ────────────────────────────────────────── */
.ct-prog-card--checkpoint {
  border-color: rgba(155,61,232,0.3);
  background: rgba(74,30,158,0.18);
  box-shadow: 0 0 0 1px rgba(155,61,232,0.1), 0 0 30px rgba(155,61,232,0.1), 0 8px 24px rgba(0,0,0,0.4);
}
.ct-prog-card--checkpoint:hover {
  border-color: rgba(155,61,232,0.48);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 40px rgba(155,61,232,0.18);
}
.ct-prog-card__badge--cp {
  display: flex; align-items: center; gap: 0.3rem;
  color: #c084fc !important;
}
.ct-prog-card__cp-metrics {
  display: flex; gap: 0.4rem; padding-top: 0.45rem;
  border-top: 1px solid rgba(155,61,232,0.15);
  margin-top: 0.1rem;
}
.ct-prog-card__cp-metrics span {
  font-size: 0.5rem; font-weight: 800; letter-spacing: 0.1em;
  padding: 0.15rem 0.45rem; border-radius: 100px;
  background: rgba(155,61,232,0.12);
  border: 1px solid rgba(155,61,232,0.25);
  color: rgba(192,132,252,0.75);
}

/* ── Elite final checkpoint card ────────────────────────────── */
.ct-prog-card--checkpoint--elite {
  border-color: rgba(192,132,252,0.35);
  background: rgba(100,30,200,0.2);
  box-shadow:
    0 0 0 1px rgba(192,132,252,0.12),
    0 0 50px rgba(155,61,232,0.18),
    0 12px 40px rgba(0,0,0,0.5);
}
.ct-prog-card--checkpoint--elite:hover {
  border-color: rgba(192,132,252,0.55);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 60px rgba(155,61,232,0.25);
}
.ct-prog-card__badge--elite {
  display: flex; align-items: center; gap: 0.3rem;
  color: #f59e0b !important;
}
.ct-prog-card__sensiscore {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(192,132,252,0.2);
  margin-top: 0.15rem;
}
.ct-prog-card__ss-label {
  font-size: 0.48rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
}
.ct-prog-card__ss-val {
  font-size: 1.4rem; font-weight: 900; letter-spacing: -0.03em;
  background: linear-gradient(135deg, #c084fc 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

/* ── Difficulty ramp bar ─────────────────────────────────────── */
.ct-prog__ramp {
  margin-top: 2rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.ct-prog__ramp-bar {
  width: 100%; height: 6px; border-radius: 100px;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
}
.ct-prog__ramp-fill {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg,
    #00c8e8 0%,
    #22d3ee 25%,
    #9b3de8 55%,
    #c084fc 78%,
    #f59e0b 100%);
  width: 0;
  transition: width 1.4s cubic-bezier(0.22,1,0.36,1);
}
.ct-prog__ramp-fill.is-visible { width: 100%; }

.ct-prog__ramp-labels {
  display: flex; justify-content: space-between;
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: rgba(255,255,255,0.22);
}
.ct-prog__ramp-arrow {
  display: flex; justify-content: flex-end;
  margin-top: -0.2rem;
}

/* ── CTA row ─────────────────────────────────────────────────── */
.ct-prog__cta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  padding: 2rem 2.5rem;
  background: rgba(8,12,30,0.6);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  margin-top: 0.5rem;
}
.ct-prog__cta-text {
  font-size: 0.9rem; color: rgba(255,255,255,0.48);
  line-height: 1.68; margin: 0; max-width: 560px;
}
.ct-prog__cta-btns {
  display: flex; gap: 0.9rem; flex-wrap: wrap; flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */

/* ── Tablet: 2-column rows ───────────────────────────────────── */
@media (max-width: 1080px) {
  .ct-prog__container { padding: 0 2rem; }
  .ct-prog__spine-wrap { height: 60px; }

  /* Modules: 2×2 grid */
  .ct-prog__row--modules {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    align-items: stretch;
  }
  /* Checkpoints: single row of 3, or wrap */
  .ct-prog__row--checkpoints {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    align-items: stretch;
  }
  .ct-prog-node { align-items: stretch; }
  .ct-prog-node__stem { display: none; }
}

/* ── Mobile: single column ───────────────────────────────────── */
@media (max-width: 640px) {
  .ct-prog { padding: 5rem 0 5rem; }
  .ct-prog__container { padding: 0 1.25rem; }
  .ct-prog__spine-wrap { display: none; }
  .ct-prog__row--modules,
  .ct-prog__row--checkpoints {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .ct-prog__stats { flex-wrap: wrap; }
  .ct-prog__stat { min-width: 40%; }
  .ct-prog__cta-row { flex-direction: column; align-items: flex-start; }
  .ct-prog__ramp-labels { font-size: 0.5rem; gap: 0.2rem; }
  .ct-prog-node__stem { display: none; }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ct-spine-dash       { animation: none; }
  .ct-spine-pulse      { animation: none; }
  .ct-prog-card        { transition: none; }
  .ct-prog__ramp-fill  { transition: none; width: 100%; }
}

/* ============================================================
   CTR-ROADMAP  —  Zigzag SVG roadmap (Diagram 1)
   ============================================================ */

.ctr-roadmap {
  width: 100%;
  margin: 3rem 0 3.5rem;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 1.2rem;
  overflow: hidden;
  padding: 2rem 1.5rem 1rem;
}
.ctr-roadmap__svg {
  width: 100%;
  height: auto;
  display: block;
  min-height: 320px;
}

/* ============================================================
   CTR-SUMMARY  —  Programme summary cards (Diagram 2)
   ============================================================ */

.ctr-summary {
  width: 100%;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 1.2rem;
  padding: 2rem 2rem 1.5rem;
  margin-bottom: 3rem;
}

/* header row */
.ctr-summary__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.75rem;
}
.ctr-summary__title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  margin: 0 0 0.3rem;
}
.ctr-summary__sub {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  margin: 0;
}
.ctr-summary__brand {
  font-size: 1.05rem;
  font-weight: 800;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ctr-summary__brand span {
  color: #f97316;
}

/* 4-column grid */
.ctr-summary__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

/* individual module card */
.ctr-mod-card {
  border-radius: 0.85rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
}

/* coloured header */
.ctr-mod-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.1rem 1rem;
  border-radius: 0.75rem 0.75rem 0 0;
}
.ctr-mod-card__head--cyan   { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.ctr-mod-card__head--purple { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.ctr-mod-card__head--amber  { background: linear-gradient(135deg, #d97706, #b45309); }
.ctr-mod-card__head--orange { background: linear-gradient(135deg, #ea580c, #c2410c); }

.ctr-mod-card__num {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.02em;
  margin-bottom: 0.2rem;
}
.ctr-mod-card__days {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.75);
  font-weight: 500;
}
.ctr-mod-card__icon {
  opacity: 0.7;
  flex-shrink: 0;
}

/* card body */
.ctr-mod-card__body {
  padding: 1rem 1.1rem 1.1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* badge pill */
.ctr-mod-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.28rem 0.7rem;
  border-radius: 100px;
  border: 1px solid;
  width: fit-content;
}
.ctr-mod-card__badge--cyan   { color:#06b6d4; border-color:rgba(6,182,212,0.3);  background:rgba(6,182,212,0.08); }
.ctr-mod-card__badge--purple { color:#a78bfa; border-color:rgba(167,139,250,0.3); background:rgba(167,139,250,0.08); }
.ctr-mod-card__badge--amber  { color:#fbbf24; border-color:rgba(251,191,36,0.3);  background:rgba(251,191,36,0.08); }
.ctr-mod-card__badge--orange { color:#fb923c; border-color:rgba(249,115,22,0.3);  background:rgba(249,115,22,0.08); }

/* what we learn */
.ctr-mod-card__learn-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  margin-top: 0.2rem;
}
.ctr-mod-card__learn {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

/* test badges */
.ctr-mod-card__tests {
  margin-top: auto;
  padding-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.ctr-mod-card__test {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.35rem 0.7rem;
  border-radius: 0.45rem;
  border: 1px solid;
  width: fit-content;
}
.ctr-mod-card__test--cyan   { color:#06b6d4; border-color:rgba(6,182,212,0.25);  background:rgba(6,182,212,0.06); }
.ctr-mod-card__test--purple { color:#a78bfa; border-color:rgba(167,139,250,0.25); background:rgba(167,139,250,0.06); }
.ctr-mod-card__test--amber  { color:#fbbf24; border-color:rgba(251,191,36,0.25);  background:rgba(251,191,36,0.06); }
.ctr-mod-card__test--orange { color:#fb923c; border-color:rgba(249,115,22,0.25);  background:rgba(249,115,22,0.06); }

.ctr-mod-card__test-label {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.3);
  padding-left: 0.1rem;
}

/* footer */
.ctr-summary__footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 1rem;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .ctr-summary__grid { grid-template-columns: repeat(2, 1fr); }
  .ctr-roadmap__svg  { min-height: 260px; }
}
@media (max-width: 560px) {
  .ctr-summary__grid   { grid-template-columns: 1fr; }
  .ctr-summary__header { flex-direction: column; gap: 0.5rem; }
  .ctr-roadmap         { padding: 1rem 0.5rem 0.5rem; }
  .ctr-summary         { padding: 1.25rem 1rem 1rem; }
  .ctr-summary__title  { font-size: 1.2rem; }
}

/* ============================================================
   CT-FINAL-CTA  —  Start Training Football Intelligence
   ============================================================ */

.ct-final-cta {
  position: relative;
  overflow: hidden;
  padding: 9rem 2rem 8rem;
  background: #020711;
  text-align: center;
  isolation: isolate;
}

/* ── dot-grid background ── */
.ct-final-cta__bg-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── deep radial vignette ── */
.ct-final-cta__bg-radial {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%,
      rgba(5,10,26,0) 0%, #020711 85%);
}

/* ── large side glows ── */
.ct-final-cta__glow-left {
  position: absolute; z-index: 0;
  width: 560px; height: 560px;
  left: -180px; top: 50%; transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155,61,232,0.18) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}
.ct-final-cta__glow-right {
  position: absolute; z-index: 0;
  width: 480px; height: 480px;
  right: -160px; top: 50%; transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,200,232,0.15) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}

/* ── small floating orbs ── */
@keyframes ct-orb-float {
  0%,100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-18px) scale(1.06); }
}
.ct-final-cta__orb {
  position: absolute; z-index: 0; border-radius: 50%;
  pointer-events: none;
  animation: ct-orb-float 6s ease-in-out infinite;
}
.ct-final-cta__orb--a {
  width: 220px; height: 220px;
  top: 12%; left: 8%;
  background: radial-gradient(circle, rgba(0,200,232,0.09) 0%, transparent 70%);
  animation-duration: 7.2s;
}
.ct-final-cta__orb--b {
  width: 180px; height: 180px;
  bottom: 14%; right: 9%;
  background: radial-gradient(circle, rgba(155,61,232,0.11) 0%, transparent 70%);
  animation-duration: 9s; animation-delay: -2s;
}
.ct-final-cta__orb--c {
  width: 130px; height: 130px;
  top: 55%; left: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(192,132,252,0.07) 0%, transparent 70%);
  animation-duration: 11s; animation-delay: -4s;
}

/* ── top accent line ── */
.ct-final-cta__top-line {
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px; z-index: 1;
  overflow: hidden;
}
@keyframes ct-cta-line-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.ct-final-cta__top-line-fill {
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%, rgba(0,200,232,0.5) 25%,
    rgba(155,61,232,0.8) 50%, rgba(192,132,252,0.5) 75%,
    transparent 100%);
  transform-origin: center;
  animation: ct-cta-line-in 1.4s cubic-bezier(0.22,1,0.36,1) both;
}

/* ── inner content container ── */
.ct-final-cta__inner {
  position: relative; z-index: 2;
  max-width: 780px;
  margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}

/* ── eyebrow ── */
.ct-final-cta__eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
  margin-bottom: 1.6rem;
}
.ct-final-cta__eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #00c8e8;
  box-shadow: 0 0 8px rgba(0,200,232,0.9);
  flex-shrink: 0;
}

/* ── headline ── */
.ct-final-cta__title {
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 800; line-height: 1.1;
  color: #fff; letter-spacing: -0.02em;
  margin: 0 0 1.6rem;
}
.ct-final-cta__title-grad {
  background: linear-gradient(120deg, #00c8e8 0%, #9b3de8 55%, #c084fc 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* ── subtitle ── */
.ct-final-cta__sub {
  font-size: 1.1rem; line-height: 1.7;
  color: rgba(255,255,255,0.55);
  max-width: 600px; margin: 0 auto 2.6rem;
}

/* ── stat chips ── */
.ct-final-cta__chips {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 0.65rem;
  margin-bottom: 3rem;
}
.ct-final-cta__chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.42rem 0.95rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em;
  color: rgba(255,255,255,0.65);
  transition: background 0.22s, border-color 0.22s, color 0.22s;
}
.ct-final-cta__chip:hover {
  background: rgba(0,200,232,0.08);
  border-color: rgba(0,200,232,0.25);
  color: rgba(255,255,255,0.85);
}
.ct-final-cta__chip-icon {
  font-size: 0.7rem; opacity: 0.7;
  color: #00c8e8;
}

/* ── CTA buttons ── */
.ct-final-cta__btns {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 1rem;
  margin-bottom: 2.8rem;
}

/* Primary button */
.ct-final-cta__btn-primary {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 1rem 2.2rem;
  border-radius: 10px;
  font-size: 1rem; font-weight: 700; letter-spacing: 0.02em;
  color: #fff; text-decoration: none;
  background: linear-gradient(135deg, #0099c4 0%, #7922c4 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 6px 28px rgba(0,150,200,0.35),
    0 2px 8px rgba(0,0,0,0.4);
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}
.ct-final-cta__btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.12),
    0 12px 40px rgba(0,150,200,0.45),
    0 4px 12px rgba(0,0,0,0.5);
  filter: brightness(1.1);
}
/* animated shimmer on hover */
.ct-final-cta__btn-bg {
  position: absolute; inset: 0;
  background: linear-gradient(105deg,
    transparent 35%, rgba(255,255,255,0.15) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform 0.55s;
  pointer-events: none;
}
.ct-final-cta__btn-primary:hover .ct-final-cta__btn-bg {
  transform: translateX(100%);
}
.ct-final-cta__btn-arrow {
  transition: transform 0.2s;
  flex-shrink: 0;
}
.ct-final-cta__btn-primary:hover .ct-final-cta__btn-arrow {
  transform: translateX(3px);
}

/* Outline button */
.ct-final-cta__btn-outline {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 1rem 2.2rem;
  border-radius: 10px;
  font-size: 1rem; font-weight: 700; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.14);
  text-decoration: none;
  transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.2s;
}
.ct-final-cta__btn-outline:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.28);
  color: #fff;
  transform: translateY(-2px);
}

/* ── trust badges ── */
.ct-final-cta__trust {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center; gap: 0.5rem 1rem;
}
.ct-final-cta__trust-item {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: rgba(255,255,255,0.32);
}
.ct-final-cta__trust-item .fas {
  font-size: 0.68rem; color: rgba(0,200,232,0.5);
}
.ct-final-cta__trust-sep {
  color: rgba(255,255,255,0.15);
  font-size: 1rem; line-height: 1;
}

/* ── bottom fade ── */
.ct-final-cta__bottom-fade {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 120px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(2,7,17,0.9));
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .ct-final-cta { padding: 6rem 1.25rem 5.5rem; }
  .ct-final-cta__sub { font-size: 0.95rem; }
  .ct-final-cta__btns { flex-direction: column; align-items: center; }
  .ct-final-cta__btn-primary,
  .ct-final-cta__btn-outline { width: 100%; max-width: 320px; justify-content: center; }
  .ct-final-cta__chips { gap: 0.5rem; }
  .ct-final-cta__trust { gap: 0.4rem 0.7rem; }
  .ct-final-cta__trust-sep { display: none; }
}

/* ── reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .ct-final-cta__orb           { animation: none; }
  .ct-final-cta__top-line-fill { animation: none; transform: scaleX(1); }
  .ct-final-cta__btn-primary   { transition: none; }
  .ct-final-cta__btn-outline   { transition: none; }
}

/* ============================================================
   PERFORMANCE ANALYTICS PAGE  (pa-)
   ============================================================ */

/* ── shared tokens ── */
.pa-page { font-family: var(--font-sans, 'Inter', sans-serif); }

.pa-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* eyebrow badge */
.pa-eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: rgba(255,255,255,0.48);
  margin-bottom: 1.2rem;
}
.pa-eyebrow__dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}

/* gradient text helpers */
.pa-grad--cyan {
  background: linear-gradient(120deg, #00c8e8 0%, #22d3ee 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; display: inline-block;
}
.pa-grad--teal {
  background: linear-gradient(120deg, #22d3ee 0%, #00c8e8 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; display: inline-block;
}
.pa-grad--purple {
  background: linear-gradient(120deg, #9b3de8 0%, #c084fc 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; display: inline-block;
}
.pa-grad--violet {
  background: linear-gradient(120deg, #c084fc 0%, #9b3de8 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; display: inline-block;
}

/* shared buttons */
.pa-btn-primary {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.9rem; border-radius: 9px;
  font-size: 0.92rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #0099c4 0%, #7922c4 100%);
  box-shadow: 0 6px 24px rgba(0,150,200,0.3), 0 2px 6px rgba(0,0,0,0.35);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}
.pa-btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.1);
  box-shadow: 0 10px 32px rgba(0,150,200,0.4), 0 4px 10px rgba(0,0,0,0.45);
}
.pa-btn-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.9rem; border-radius: 9px;
  font-size: 0.92rem; font-weight: 700;
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.13);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.pa-btn-ghost:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.25);
  color: #fff; transform: translateY(-2px);
}

/* legend dots */
.pa-legend-dot {
  display: inline-block; width: 10px; height: 3px;
  border-radius: 2px; margin-right: 5px; vertical-align: middle;
}
.pa-legend-dot--dash {
  background: repeating-linear-gradient(
    90deg, currentColor 0, currentColor 4px, transparent 4px, transparent 7px
  ) !important;
}

/* ── section wrappers ── */
.pa-section {
  position: relative; overflow: hidden;
  padding: 7rem 0 7rem;
}
.pa-section--dark  { background: #050a1a; }
.pa-section--mid   { background: #080f20; }

.pa-section__bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
}

.pa-section__header {
  text-align: center;
  max-width: 640px; margin: 0 auto 4rem;
}
.pa-section__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800; line-height: 1.15;
  color: #fff; letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.pa-section__sub {
  font-size: 1rem; line-height: 1.75;
  color: rgba(255,255,255,0.5);
  margin: 0;
}

/* ════════════════════════════════════════
   SECTION 1 — HERO
════════════════════════════════════════ */
.pa-hero {
  position: relative; overflow: hidden;
  min-height: 100vh;
  padding: calc(var(--nav-height, 80px) + 4rem) 2rem 5rem;
  background: #020711;
  display: flex; align-items: center;
}
.pa-hero__bg-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.033) 1px, transparent 1px);
  background-size: 32px 32px;
}
.pa-hero__bg-radial {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(5,10,26,0) 0%, #020711 80%);
}
.pa-hero__glow-l {
  position: absolute; z-index: 0; pointer-events: none;
  width: 600px; height: 600px; left: -200px; top: 20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155,61,232,0.15) 0%, transparent 70%);
  filter: blur(70px);
}
.pa-hero__glow-r {
  position: absolute; z-index: 0; pointer-events: none;
  width: 500px; height: 500px; right: -150px; top: 30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,200,232,0.12) 0%, transparent 70%);
  filter: blur(70px);
}

.pa-hero__inner {
  position: relative; z-index: 2;
  max-width: 1320px; margin: 0 auto; width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* breadcrumb */
.pa-breadcrumb {
  display: flex; align-items: center; gap: 0.4rem;
  margin-bottom: 1.8rem;
}
.pa-breadcrumb__item {
  font-size: 0.78rem; font-weight: 500;
  color: rgba(255,255,255,0.38);
  text-decoration: none;
  transition: color 0.18s;
}
.pa-breadcrumb__item:hover { color: rgba(255,255,255,0.7); }
.pa-breadcrumb__item--current { color: rgba(255,255,255,0.6); pointer-events: none; }
.pa-breadcrumb__sep { color: rgba(255,255,255,0.22); font-size: 0.75rem; }

.pa-hero__title {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 800; line-height: 1.1;
  color: #fff; letter-spacing: -0.025em;
  margin: 0 0 1.4rem;
}
.pa-hero__title-grad {
  background: linear-gradient(120deg, #00c8e8 0%, #9b3de8 55%, #c084fc 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; display: inline-block;
}
.pa-hero__subtitle {
  font-size: 1.05rem; line-height: 1.75;
  color: rgba(255,255,255,0.52);
  margin: 0 0 2.2rem;
  max-width: 520px;
}

/* hero stats */
.pa-hero__stats {
  display: flex; gap: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 2.2rem;
}
.pa-hero__stat {
  flex: 1; padding: 1rem 0;
  display: flex; flex-direction: column; gap: 0.3rem;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.pa-hero__stat:last-child { border-right: none; }
.pa-hero__stat:first-child { padding-left: 0; }
.pa-hero__stat-val {
  font-size: 1.6rem; font-weight: 800; line-height: 1;
}
.pa-hero__stat-label {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.38);
}

.pa-hero__ctas {
  display: flex; gap: 0.9rem; flex-wrap: wrap;
}

/* ── hero dashboard card ── */
.pa-hero__visual { display: flex; justify-content: flex-end; }

.pa-dash-card {
  width: 100%; max-width: 560px;
  background: rgba(10,16,40,0.85);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
  overflow: hidden;
}

.pa-dash-card__header {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.pa-dash-card__dots {
  display: flex; gap: 5px;
}
.pa-dash-card__dots span {
  width: 11px; height: 11px; border-radius: 50%;
}
.pa-dash-card__title {
  flex: 1; font-size: 0.75rem; font-weight: 600;
  color: rgba(255,255,255,0.5); letter-spacing: 0.04em;
}
.pa-dash-card__badge {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.2rem 0.6rem;
  border-radius: 100px;
  background: rgba(0,200,232,0.12);
  color: #00c8e8; border: 1px solid rgba(0,200,232,0.3);
}

/* metric tiles */
.pa-dash-card__metrics {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.pa-metric-tile {
  padding: 0.9rem 0.75rem;
  border-right: 1px solid rgba(255,255,255,0.07);
  display: flex; flex-direction: column; gap: 0.25rem;
}
.pa-metric-tile:last-child { border-right: none; }
.pa-metric-tile__label {
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
}
.pa-metric-tile__val {
  font-size: 1.2rem; font-weight: 800; line-height: 1;
}
.pa-metric-tile__unit { font-size: 0.65rem; font-weight: 600; margin-left: 1px; }
.pa-metric-tile__delta {
  font-size: 0.62rem; font-weight: 600;
  color: rgba(34,211,238,0.7);
}

/* chart area */
.pa-dash-card__chart-area {
  padding: 1rem 1rem 0.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.pa-dash-chart { display: block; width: 100%; height: 80px; }
.pa-dash-chart__legend {
  display: flex; gap: 1.2rem;
  margin-top: 0.5rem; padding-bottom: 0.6rem;
}
.pa-dash-chart__legend span {
  display: flex; align-items: center;
  font-size: 0.65rem; font-weight: 600;
  color: rgba(255,255,255,0.38); letter-spacing: 0.04em;
}

/* player rows */
.pa-dash-card__players {
  padding: 0.8rem 1rem;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.pa-player-row {
  display: flex; align-items: center; gap: 0.7rem;
}
.pa-player-row__avatar {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid; flex-shrink: 0;
  background: rgba(255,255,255,0.05);
  font-size: 0.6rem; font-weight: 700;
  color: rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0.02em;
}
.pa-player-row__name {
  font-size: 0.72rem; font-weight: 600;
  color: rgba(255,255,255,0.65); min-width: 70px;
}
.pa-player-row__bar-wrap { flex: 1; }
.pa-player-row__bar {
  position: relative; height: 5px; border-radius: 3px;
  border: 1px solid; overflow: hidden;
  background: rgba(255,255,255,0.06);
}
.pa-player-row__bar-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  border-radius: 3px; opacity: 0.85;
}
.pa-player-row__score {
  font-size: 0.72rem; font-weight: 800;
  min-width: 22px; text-align: right;
}

/* ════════════════════════════════════════
   SECTION 2 — PLAYER PROFILE
════════════════════════════════════════ */
.pa-profile-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 3rem;
  align-items: start;
}

.pa-profile__metrics {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

.pa-metric-card {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 1.4rem 1.2rem 1.2rem;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.pa-metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}
.pa-metric-card__accent {
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px; opacity: 0.7;
}
.pa-metric-card__icon {
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid; display: flex; align-items: center;
  justify-content: center; font-size: 0.95rem;
  margin-bottom: 1rem;
}
.pa-metric-card__label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.38);
  margin-bottom: 0.35rem;
}
.pa-metric-card__val {
  font-size: 1.55rem; font-weight: 800; line-height: 1;
  margin-bottom: 0.3rem;
}
.pa-metric-card__delta {
  font-size: 0.7rem; font-weight: 600;
  color: rgba(34,211,238,0.75);
  margin-bottom: 0.65rem;
}
.pa-metric-card__desc {
  font-size: 0.8rem; line-height: 1.6;
  color: rgba(255,255,255,0.42); margin: 0;
}

/* radar card */
.pa-radar-card {
  background: rgba(10,16,40,0.8);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.pa-radar-card__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
}
.pa-radar-card__name {
  font-size: 0.75rem; font-weight: 600;
  color: rgba(255,255,255,0.55);
}
.pa-radar-card__badge {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em;
  padding: 0.18rem 0.55rem; border-radius: 100px;
  background: rgba(155,61,232,0.15);
  border: 1px solid rgba(155,61,232,0.35);
  color: #c084fc;
}
.pa-radar-svg { display: block; width: 100%; padding: 0.5rem 0; }
.pa-radar-card__legend {
  display: flex; justify-content: center; gap: 1.4rem;
  padding: 0 1rem 0.75rem;
}
.pa-radar-card__legend span {
  display: flex; align-items: center;
  font-size: 0.67rem; font-weight: 600;
  color: rgba(255,255,255,0.38);
}
.pa-radar-card__scores {
  display: grid; grid-template-columns: repeat(3,1fr);
  border-top: 1px solid rgba(255,255,255,0.07);
}
.pa-radar-score-tile {
  padding: 0.85rem 0.6rem;
  border-right: 1px solid rgba(255,255,255,0.07);
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
}
.pa-radar-score-tile:last-child { border-right: none; }
.pa-radar-score-tile__val {
  font-size: 1rem; font-weight: 800; line-height: 1;
}
.pa-radar-score-tile__label {
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: rgba(255,255,255,0.32);
}

/* ══════════════════════════════════════════════════════════════
   PA-RADAR11  —  11-axis "LIVE ASSESSMENT" radar card
   (Player Cognitive Profile section, right panel)
══════════════════════════════════════════════════════════════ */
.pa-radar11-card {
  background: rgba(8,12,32,0.88);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 0 0 1px rgba(0,200,232,0.06),
    0 24px 80px rgba(0,0,0,0.55),
    0 0 60px rgba(74,30,158,0.10);
  overflow: hidden;
  width: 100%;
}

/* header */
.pa-radar11-header {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.025);
}
.pa-radar11-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: #00c8e8;
  box-shadow: 0 0 8px rgba(0,200,232,0.9);
  animation: heroPulse 2s ease infinite;
}
.pa-radar11-label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.48);
}
.pa-radar11-badge {
  margin-left: auto;
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.2rem 0.65rem; border-radius: 100px;
  background: rgba(155,61,232,0.15);
  border: 1px solid rgba(155,61,232,0.40);
  color: rgba(192,132,252,0.90);
}

/* SVG */
.pa-radar11-svg {
  display: block; width: 100%; height: auto;
  padding: 0.75rem 0.5rem 0.25rem;
}

/* divider */
.pa-radar11-divider {
  height: 1px; margin: 0 1.2rem;
  background: rgba(255,255,255,0.06);
}

/* footer */
.pa-radar11-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1.2rem;
  gap: 0.8rem; flex-wrap: wrap;
}
.pa-radar11-caption {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.65rem; font-weight: 500; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.38);
}
.pa-radar11-caption i { color: #00c8e8; font-size: 0.58rem; }

/* legend */
.pa-radar11-legend {
  display: flex; align-items: center; gap: 0.45rem;
  flex-shrink: 0;
}
.pa-radar11-legend-item {
  display: inline-block; height: 2px; width: 18px; border-radius: 2px;
}
.pa-radar11-legend-item--cyan {
  background: rgba(0,200,232,0.80);
}
.pa-radar11-legend-item--dash {
  background: none;
  border-top: 2px dashed rgba(0,200,232,0.45);
}
.pa-radar11-legend-txt {
  font-size: 0.62rem; font-weight: 600;
  color: rgba(255,255,255,0.38);
}

/* ════════════════════════════════════════
   SECTION 3 — TRACKING
════════════════════════════════════════ */
.pa-track-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.pa-track-card__header {
  padding: 1rem 1.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
}
.pa-track-card__title-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
}
.pa-track-card__label {
  font-size: 0.78rem; font-weight: 700;
  color: rgba(255,255,255,0.55); letter-spacing: 0.04em;
}
.pa-track-card__tabs {
  display: flex; gap: 0.3rem;
}
.pa-track-tab {
  padding: 0.35rem 0.85rem; border-radius: 6px;
  font-size: 0.72rem; font-weight: 600;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.38);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.pa-track-tab--active,
.pa-track-tab:hover {
  background: rgba(34,211,238,0.1);
  border-color: rgba(34,211,238,0.35);
  color: #22d3ee;
}

.pa-track-card__body {
  display: flex; gap: 0;
  padding: 1.4rem 1.4rem 0;
}
.pa-track-chart__y-axis {
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding-bottom: 1.6rem;
  margin-right: 0.8rem;
}
.pa-track-chart__y-axis span {
  font-size: 0.6rem; color: rgba(255,255,255,0.2);
  font-weight: 600; line-height: 1;
}
.pa-track-chart__wrap { flex: 1; overflow: hidden; }
.pa-track-chart {
  display: block; width: 100%; height: 160px;
}
.pa-track-chart__x-axis {
  display: flex; justify-content: space-between;
  padding-top: 0.4rem; padding-bottom: 1rem;
}
.pa-track-chart__x-axis span {
  font-size: 0.6rem; color: rgba(255,255,255,0.2); font-weight: 600;
}

.pa-track-card__trends {
  display: flex; gap: 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.pa-trend-chip {
  flex: 1; display: flex; align-items: center; gap: 0.7rem;
  padding: 1rem 1.2rem;
  border-right: 1px solid rgba(255,255,255,0.07);
}
.pa-trend-chip:last-child { border-right: none; }
.pa-trend-chip__icon { font-size: 1rem; flex-shrink: 0; }
.pa-trend-chip__text {
  display: flex; flex-direction: column; gap: 0.15rem;
}
.pa-trend-chip__label {
  font-size: 0.63rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: rgba(255,255,255,0.32);
}
.pa-trend-chip__val {
  font-size: 1rem; font-weight: 800; line-height: 1;
}

/* ════════════════════════════════════════
   SECTION 4 — TEAM DASHBOARD
════════════════════════════════════════ */
.pa-team-dash {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.pa-team-dash__header {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 0.8rem;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
}
.pa-team-dash__label {
  font-size: 0.78rem; font-weight: 700;
  color: rgba(255,255,255,0.55);
}
.pa-team-dash__avg-badges {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.pa-team-avg-badge {
  font-size: 0.65rem; font-weight: 600;
  padding: 0.28rem 0.75rem; border-radius: 100px;
  border: 1px solid; background: transparent;
}
.pa-team-avg-badge strong { font-weight: 800; }

/* comparison table */
.pa-team-table {
  width: 100%; overflow-x: auto;
}
.pa-team-table__head,
.pa-team-table__row {
  display: grid;
  grid-template-columns: 2fr 0.7fr 2fr 1.2fr 1fr 0.8fr;
  align-items: center;
  padding: 0.7rem 1.4rem;
}
.pa-team-table__head {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: rgba(255,255,255,0.28);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.pa-team-table__row {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.18s;
}
.pa-team-table__row:last-child { border-bottom: none; }
.pa-team-table__row:hover { background: rgba(255,255,255,0.025); }

.pa-team-table__player {
  display: flex; align-items: center; gap: 0.65rem;
  font-size: 0.82rem; font-weight: 600;
  color: rgba(255,255,255,0.75);
}
.pa-team-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid; flex-shrink: 0;
  background: rgba(255,255,255,0.05);
  font-size: 0.6rem; font-weight: 700;
  color: rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
}
.pa-team-table__pos {
  font-size: 0.72rem; font-weight: 700;
  color: rgba(255,255,255,0.38); letter-spacing: 0.05em;
}
.pa-team-table__score {
  display: flex; align-items: center; gap: 0.6rem;
}
.pa-team-table__score-bar {
  flex: 1; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.06); overflow: hidden;
  max-width: 80px;
}
.pa-team-table__score-bar span {
  display: block; height: 100%; border-radius: 2px; opacity: 0.8;
}
.pa-team-table__rt,
.pa-team-table__acc {
  font-size: 0.78rem; font-weight: 600;
  color: rgba(255,255,255,0.5);
}
.pa-team-table__trend {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.75rem; font-weight: 700;
}
.pa-team-table__trend--up { color: #22d3ee; }
.pa-team-table__trend--dn { color: rgba(255,100,100,0.8); }

/* team avg bars */
.pa-team-bars {
  padding: 1.2rem 1.4rem 1.4rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex; flex-direction: column; gap: 0.75rem;
}
.pa-team-bar-row {
  display: flex; align-items: center; gap: 0.9rem;
}
.pa-team-bar-row__label {
  font-size: 0.7rem; font-weight: 600;
  color: rgba(255,255,255,0.4); min-width: 130px;
}
.pa-team-bar-row__track {
  flex: 1; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,0.06); overflow: hidden;
}
.pa-team-bar-row__fill {
  height: 100%; border-radius: 3px;
  opacity: 0.75;
  transition: width 1s cubic-bezier(0.22,1,0.36,1);
}
.pa-team-bar-row__val {
  font-size: 0.75rem; font-weight: 800; min-width: 24px; text-align: right;
}

/* ════════════════════════════════════════
   SECTION 5 — BENCHMARK
════════════════════════════════════════ */
.pa-bench-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 3rem; align-items: start;
}

.pa-bench-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

.pa-bench-card {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 1.5rem 1.3rem;
  transition: transform 0.25s, box-shadow 0.25s;
}
.pa-bench-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.4);
}
.pa-bench-card__icon-wrap {
  width: 40px; height: 40px; border-radius: 11px;
  border: 1px solid; display: flex; align-items: center;
  justify-content: center; font-size: 1rem;
  margin-bottom: 1rem;
}
.pa-bench-card__title {
  font-size: 0.95rem; font-weight: 700;
  color: #fff; margin: 0 0 0.5rem;
}
.pa-bench-card__desc {
  font-size: 0.82rem; line-height: 1.65;
  color: rgba(255,255,255,0.45); margin: 0 0 1rem;
}
.pa-bench-card__stat {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.3rem 0.8rem; border-radius: 100px;
  border: 1px solid;
  background: transparent;
}
.pa-bench-card__glow {
  position: absolute; bottom: -40px; right: -40px;
  width: 100px; height: 100px; border-radius: 50%;
  opacity: 0.06; filter: blur(20px);
  pointer-events: none;
}

/* comparison bar chart card */
.pa-bench-visual {}
.pa-bench-chart-card {
  background: rgba(10,16,40,0.8);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 1.5rem;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  backdrop-filter: blur(16px);
}
.pa-bench-chart-card__label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(255,255,255,0.38);
  margin-bottom: 1.5rem;
}
.pa-bench-bars {
  display: flex; flex-direction: column; gap: 1rem;
}
.pa-bench-bar-row {
  display: flex; align-items: center; gap: 0.8rem;
}
.pa-bench-bar-row__label {
  font-size: 0.72rem; font-weight: 600;
  color: rgba(255,255,255,0.45); min-width: 110px;
}
.pa-bench-bar-row__track {
  flex: 1; height: 8px; border-radius: 4px;
  background: rgba(255,255,255,0.06); overflow: hidden;
}
.pa-bench-bar-row__fill {
  height: 100%; border-radius: 4px;
  opacity: 0.8;
}
.pa-bench-bar-row__val {
  font-size: 0.78rem; font-weight: 800; min-width: 24px; text-align: right;
}

/* ════════════════════════════════════════
   SECTION 6 — ROLE-BASED INSIGHTS  (pa-rbi-*)
════════════════════════════════════════ */

/* ── Section shell ───────────────────────────────────────────── */
.pa-section--rbi { padding-bottom: 0; overflow: hidden; }

/* ── Ambient glows ───────────────────────────────────────────── */
.pa-rbi__glow {
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: 50%; filter: blur(80px);
}
.pa-rbi__glow--cyan {
  width: 500px; height: 340px;
  top: 5%; left: -8%;
  background: radial-gradient(ellipse, rgba(0,200,232,0.09) 0%, transparent 70%);
}
.pa-rbi__glow--violet {
  width: 560px; height: 380px;
  top: 12%; right: -6%;
  background: radial-gradient(ellipse, rgba(155,61,232,0.11) 0%, transparent 70%);
}

/* ── Access level progress bar ───────────────────────────────── */
.pa-rbi__access-bar {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0 0 3.5rem;
}
.pa-rbi__access-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}
.pa-rbi__access-track {
  display: flex;
  gap: 3px;
  height: 36px;
  border-radius: 10px;
  overflow: hidden;
}
.pa-rbi__access-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0 1rem;
  transition: filter 0.2s;
}
.pa-rbi__access-seg--1 {
  flex: 1;
  background: rgba(0,200,232,0.15);
  border: 1px solid rgba(0,200,232,0.28);
  color: #00c8e8;
  border-radius: 9px 0 0 9px;
}
.pa-rbi__access-seg--2 {
  flex: 1.5;
  background: rgba(192,132,252,0.12);
  border: 1px solid rgba(192,132,252,0.25);
  color: #c084fc;
}
.pa-rbi__access-seg--3 {
  flex: 2;
  background: rgba(167,139,250,0.1);
  border: 1px solid rgba(167,139,250,0.22);
  color: #a78bfa;
  border-radius: 0 9px 9px 0;
}
.pa-rbi__access-note {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.22);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ── 3-column card grid ──────────────────────────────────────── */
.pa-rbi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  position: relative; z-index: 1;
  align-items: start;
}

/* ── Individual role card ────────────────────────────────────── */
.pa-rbi-card {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 0 0 1.8rem;
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.28s cubic-bezier(0.22,1,0.36,1),
              border-color 0.28s;
  display: flex;
  flex-direction: column;
}
.pa-rbi-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(0,0,0,0.5);
}
.pa-rbi-card--player:hover  { border-color: rgba(0,200,232,0.25); }
.pa-rbi-card--coach:hover   { border-color: rgba(192,132,252,0.3); }
.pa-rbi-card--club:hover    { border-color: rgba(167,139,250,0.25); }

/* featured coach card */
.pa-rbi-card--featured {
  border-color: rgba(192,132,252,0.22);
  background: linear-gradient(160deg, rgba(155,61,232,0.07) 0%, rgba(8,12,30,0.4) 100%);
  box-shadow: 0 0 0 1px rgba(192,132,252,0.12), 0 20px 50px rgba(0,0,0,0.35);
}

/* ── Card header ─────────────────────────────────────────────── */
.pa-rbi-card__header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem 1.4rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 1rem;
}
.pa-rbi-card__icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  border: 1px solid;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.pa-rbi-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.pa-rbi-card__role-tag {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  border: 1px solid;
  width: fit-content;
}
.pa-rbi-card__title {
  font-size: 0.98rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

/* ── Featured "Most Used" badge ──────────────────────────────── */
.pa-rbi-card__featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c084fc;
  background: rgba(192,132,252,0.1);
  border: 1px solid rgba(192,132,252,0.25);
  border-radius: 100px;
  padding: 0.22rem 0.65rem;
  margin: -0.25rem 1.4rem 0.85rem;
  width: fit-content;
}
.pa-rbi-card__featured-badge i { font-size: 0.5rem; }

/* ── Value line ──────────────────────────────────────────────── */
.pa-rbi-card__value-line {
  font-size: 0.8rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.42);
  font-style: italic;
  margin: 0 0 1.1rem;
  padding: 0 1.4rem;
}

/* ── Feature list ────────────────────────────────────────────── */
.pa-rbi-card__list {
  list-style: none;
  margin: 0;
  padding: 0 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}
.pa-rbi-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.045);
}
.pa-rbi-card__list li:last-child { border-bottom: none; }

.pa-rbi-card__list-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.pa-rbi-card__list li > div {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.pa-rbi-card__list li strong {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  line-height: 1.3;
}
.pa-rbi-card__list li span {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.38);
  line-height: 1.5;
}

/* ── Top accent bar ──────────────────────────────────────────── */
.pa-rbi-card__accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2.5px;
  opacity: 0.7;
}

/* ── Intelligence tagline banner ─────────────────────────────── */
.pa-rbi__tagline {
  margin: 0.5rem 0 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.025);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.pa-rbi__tagline-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.4rem 2rem;
  flex-wrap: wrap;
}
.pa-rbi__tagline-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(155,61,232,0.12);
  border: 1px solid rgba(155,61,232,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  color: #9b3de8;
  flex-shrink: 0;
}
.pa-rbi__tagline-text {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.pa-rbi__tagline-text strong {
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
}
.pa-rbi__tagline-text span {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.38);
}
.pa-rbi__tagline-badges {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.pa-rbi__tagline-badges span {
  font-size: 0.72rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.pa-rbi__tagline-badges i { font-size: 0.68rem; }
.pa-rbi__tagline-sep {
  color: rgba(255,255,255,0.18) !important;
  font-size: 0.9rem !important;
}

/* ── CTA strip (reused) ──────────────────────────────────────── */
.pa-roles__cta {
  text-align: center; padding: 4rem 0 5rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  position: relative; z-index: 1;
}
.pa-roles__cta-text {
  font-size: 1.1rem; font-weight: 500;
  color: rgba(255,255,255,0.5);
  margin: 0 0 2rem;
}
.pa-roles__cta-btns {
  display: flex; justify-content: center;
  gap: 0.9rem; flex-wrap: wrap;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .pa-rbi-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .pa-rbi__access-seg { justify-content: flex-start; padding: 0 0.75rem; }
}
@media (max-width: 900px) {
  .pa-rbi__tagline-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
}
@media (max-width: 640px) {
  .pa-rbi__access-track { height: 30px; }
  .pa-rbi__access-seg { font-size: 0.58rem; }
  .pa-rbi-card__header { padding: 1.1rem 1.1rem 1rem; }
  .pa-rbi-card__value-line,
  .pa-rbi-card__list { padding: 0 1.1rem; }
  .pa-rbi-card__featured-badge { margin-left: 1.1rem; }
  .pa-rbi-card { padding-bottom: 1.4rem; }
  .pa-rbi__tagline-inner { padding: 1.1rem 1.2rem; }
}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 1100px) {
  .pa-hero__inner { grid-template-columns: 1fr; gap: 3rem; }
  .pa-hero__visual { justify-content: center; }
  .pa-dash-card { max-width: 100%; }
  .pa-profile-layout { grid-template-columns: 1fr; }
  .pa-bench-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .pa-section { padding: 5rem 0; }
  .pa-profile__metrics { grid-template-columns: 1fr; }
  .pa-bench-cards { grid-template-columns: 1fr; }
  .pa-dash-card__metrics { grid-template-columns: repeat(2,1fr); }
  .pa-team-table__head,
  .pa-team-table__row {
    grid-template-columns: 2fr 0.7fr 1.5fr 1fr;
  }
  .pa-team-table__rt,
  .pa-team-table__trend { display: none; }
  .pa-track-card__title-row { flex-direction: column; align-items: flex-start; }
  .pa-trend-chip { padding: 0.8rem; }
  .pa-team-bar-row__label { min-width: 90px; }
}

@media (max-width: 480px) {
  .pa-hero { padding-top: calc(var(--nav-height, 80px) + 2rem); }
  .pa-dash-card__metrics { grid-template-columns: repeat(2,1fr); }
  .pa-hero__stats { flex-direction: column; border: none; gap: 0.5rem; }
  .pa-hero__stat { border: none; padding: 0.4rem 0; }
  .pa-track-card__tabs { flex-wrap: wrap; }
  .pa-trend-chip { flex: 0 0 50%; }
}

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .pa-rbi-card,
  .pa-bench-card,
  .pa-metric-card { transition: none; }
  .pa-team-bar-row__fill { transition: none; }
  .pa-rbi__glow { filter: none; }
}

/* ============================================================
   TRAINING JOURNEY PAGE  (tj-)
   ============================================================ */

.tj-page { font-family: var(--font-sans,'Inter',sans-serif); }

.tj-container { max-width:1320px; margin:0 auto; padding:0 2rem; }

/* ── eyebrow ── */
.tj-eyebrow {
  display:inline-flex; align-items:center; gap:0.55rem;
  font-size:0.7rem; font-weight:700; letter-spacing:0.13em;
  text-transform:uppercase; color:rgba(255,255,255,0.48);
  margin-bottom:1.2rem;
}
.tj-eyebrow__dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }

/* ── gradient helpers ── */
.tj-grad--cyan   { background:linear-gradient(120deg,#00c8e8 0%,#22d3ee 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block; }
.tj-grad--teal   { background:linear-gradient(120deg,#22d3ee 0%,#00c8e8 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block; }
.tj-grad--purple { background:linear-gradient(120deg,#9b3de8 0%,#c084fc 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block; }
.tj-grad--violet { background:linear-gradient(120deg,#c084fc 0%,#9b3de8 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block; }

/* ── shared buttons ── */
.tj-btn-primary {
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:0.55rem;
  padding:0.85rem 1.9rem; border-radius:9px;
  font-size:0.92rem; font-weight:700; color:#fff; text-decoration:none;
  background:linear-gradient(135deg,#0099c4 0%,#7922c4 100%);
  box-shadow:0 6px 24px rgba(0,150,200,0.3),0 2px 6px rgba(0,0,0,0.35);
  transition:transform 0.2s,box-shadow 0.2s,filter 0.2s;
}
.tj-btn-primary--large { padding:1rem 2.2rem; font-size:1rem; }
.tj-btn-primary:hover { transform:translateY(-2px) scale(1.02); filter:brightness(1.1);
  box-shadow:0 10px 32px rgba(0,150,200,0.4),0 4px 10px rgba(0,0,0,0.45); }
.tj-btn-primary__shimmer {
  position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,0.15) 50%,transparent 65%);
  transform:translateX(-100%); transition:transform 0.55s; pointer-events:none;
}
.tj-btn-primary:hover .tj-btn-primary__shimmer { transform:translateX(100%); }

.tj-btn-ghost {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.85rem 1.9rem; border-radius:9px;
  font-size:0.92rem; font-weight:700;
  color:rgba(255,255,255,0.75); background:rgba(255,255,255,0.05);
  border:1.5px solid rgba(255,255,255,0.13); text-decoration:none;
  transition:background 0.2s,border-color 0.2s,color 0.2s,transform 0.2s;
}
.tj-btn-ghost--large { padding:1rem 2.2rem; font-size:1rem; }
.tj-btn-ghost:hover { background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.25);
  color:#fff; transform:translateY(-2px); }

/* ── section wrappers ── */
.tj-section { position:relative; overflow:hidden; padding:7rem 0; }
.tj-section--dark { background:#050a1a; }
.tj-section--mid  { background:#080f20; }
.tj-section__bg-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,0.03) 1px,transparent 1px);
  background-size:32px 32px;
}
.tj-section__header { text-align:center; max-width:660px; margin:0 auto 4rem; }
.tj-section__title {
  font-size:clamp(2rem,4vw,3rem); font-weight:800; line-height:1.15;
  color:#fff; letter-spacing:-0.02em; margin:0 0 1rem;
}
.tj-section__sub {
  font-size:1rem; line-height:1.75; color:rgba(255,255,255,0.5); margin:0;
}

/* ══════════════════════════════════════
   SECTION 1 — HERO
══════════════════════════════════════ */
.tj-hero {
  position:relative; overflow:hidden;
  min-height:100vh;
  padding:calc(var(--nav-height,80px) + 4rem) 2rem 5rem;
  background:#020711;
  display:flex; align-items:center;
}
.tj-hero__bg-grid {
  position:absolute; inset:0; z-index:0;
  background-image:radial-gradient(circle,rgba(255,255,255,0.033) 1px,transparent 1px);
  background-size:32px 32px;
}
.tj-hero__bg-radial {
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse 80% 70% at 50% 50%,rgba(5,10,26,0) 0%,#020711 80%);
}
.tj-hero__glow-l {
  position:absolute; z-index:0; pointer-events:none;
  width:600px; height:600px; left:-200px; top:20%; border-radius:50%;
  background:radial-gradient(circle,rgba(155,61,232,0.15) 0%,transparent 70%);
  filter:blur(70px);
}
.tj-hero__glow-r {
  position:absolute; z-index:0; pointer-events:none;
  width:500px; height:500px; right:-150px; top:30%; border-radius:50%;
  background:radial-gradient(circle,rgba(0,200,232,0.12) 0%,transparent 70%);
  filter:blur(70px);
}
.tj-hero__inner {
  position:relative; z-index:2;
  max-width:1320px; margin:0 auto; width:100%;
  display:grid; grid-template-columns:1fr 1fr;
  gap:5rem; align-items:start;
}

/* breadcrumb */
.tj-breadcrumb { display:flex; align-items:center; gap:0.4rem; margin-bottom:1.8rem; }
.tj-breadcrumb__item {
  font-size:0.78rem; font-weight:500; color:rgba(255,255,255,0.38);
  text-decoration:none; transition:color 0.18s;
}
.tj-breadcrumb__item:hover { color:rgba(255,255,255,0.7); }
.tj-breadcrumb__item--current { color:rgba(255,255,255,0.6); pointer-events:none; }
.tj-breadcrumb__sep { color:rgba(255,255,255,0.22); font-size:0.75rem; }

.tj-hero__title {
  font-size:clamp(2.4rem,4.5vw,3.8rem); font-weight:800; line-height:1.1;
  color:#fff; letter-spacing:-0.025em; margin:0 0 1.4rem;
}
.tj-hero__title-grad {
  background:linear-gradient(120deg,#00c8e8 0%,#9b3de8 55%,#c084fc 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; display:inline-block;
}
.tj-hero__subtitle {
  font-size:1.05rem; line-height:1.75; color:rgba(255,255,255,0.52);
  margin:0 0 2.2rem; max-width:520px;
}

/* stats strip */
.tj-hero__stats {
  display:flex; gap:0;
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
  margin-bottom:2.2rem;
}
.tj-hero__stat {
  flex:1; padding:1rem 0;
  display:flex; flex-direction:column; gap:0.3rem;
  border-right:1px solid rgba(255,255,255,0.08);
}
.tj-hero__stat:last-child { border-right:none; }
.tj-hero__stat-val { font-size:1.5rem; font-weight:800; line-height:1; }
.tj-hero__stat-label {
  font-size:0.65rem; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:rgba(255,255,255,0.35);
}
.tj-hero__ctas { display:flex; gap:0.9rem; flex-wrap:wrap; padding-top:0.5rem; }

/* ── Timeline card ── */
.tj-hero__visual {
  display:flex; justify-content:flex-end;
  padding-top:1rem;
  max-height:80vh;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(155,61,232,0.3) transparent;
}
.tj-hero__visual::-webkit-scrollbar { width:4px; }
.tj-hero__visual::-webkit-scrollbar-thumb {
  background:rgba(155,61,232,0.3); border-radius:2px;
}

.tj-timeline-card {
  width:100%; max-width:480px;
  background:rgba(10,16,40,0.85);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:16px;
  backdrop-filter:blur(20px);
  box-shadow:0 32px 80px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.05);
  overflow:hidden;
}
.tj-timeline-card__header {
  display:flex; align-items:center; gap:0.75rem;
  padding:0.75rem 1rem;
  background:rgba(255,255,255,0.04);
  border-bottom:1px solid rgba(255,255,255,0.07);
  position:sticky; top:0; z-index:2;
}
.tj-timeline-card__dots { display:flex; gap:5px; }
.tj-timeline-card__dots span { width:11px; height:11px; border-radius:50%; }
.tj-timeline-card__label {
  font-size:0.72rem; font-weight:600;
  color:rgba(255,255,255,0.45); letter-spacing:0.04em;
}
.tj-timeline-card__body {
  position:relative; padding:1.5rem 1.2rem 1.5rem 1rem;
  display:flex; flex-direction:column; gap:0;
}

/* spine */
.tj-tl-spine {
  position:absolute; top:0; bottom:0;
  left:2.05rem; width:2px;
  background:linear-gradient(180deg,
    #00c8e8 0%, #22d3ee 25%, #9b3de8 55%, #c084fc 85%, #c084fc 100%);
  opacity:0.35; z-index:0;
}

/* nodes */
.tj-tl-node {
  position:relative; z-index:1;
  display:flex; align-items:flex-start; gap:0.8rem;
  margin-bottom:0.9rem;
}
.tj-tl-node:last-child { margin-bottom:0; }

.tj-tl-node__dot-wrap {
  flex-shrink:0; width:36px;
  display:flex; justify-content:center; align-items:center;
  padding-top:0.15rem;
}
.tj-tl-node__dot {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.65rem; flex-shrink:0;
  position:relative; z-index:1;
}
.tj-tl-node--checkpoint .tj-tl-node__dot,
.tj-tl-node--elite .tj-tl-node__dot {
  width:32px; height:32px; border-radius:8px; font-size:0.7rem;
}
.tj-tl-node--start .tj-tl-node__dot {
  width:30px; height:30px;
}

.tj-tl-node__card {
  flex:1; padding:0.75rem 0.9rem;
  background:rgba(255,255,255,0.04);
  border:1px solid;
  border-radius:10px;
  transition:background 0.2s;
}
.tj-tl-node--checkpoint .tj-tl-node__card,
.tj-tl-node--elite .tj-tl-node__card {
  background:rgba(155,61,232,0.07);
}
.tj-tl-node--elite .tj-tl-node__card {
  background:rgba(192,132,252,0.1);
}

.tj-tl-node__badge {
  display:inline-block;
  font-size:0.55rem; font-weight:800; letter-spacing:0.1em;
  text-transform:uppercase; padding:0.15rem 0.5rem;
  border-radius:100px; border:1px solid;
  margin-bottom:0.35rem;
}
.tj-tl-node__title {
  font-size:0.82rem; font-weight:700; color:#fff;
  margin-bottom:0.2rem; line-height:1.3;
}
.tj-tl-node__sub {
  font-size:0.7rem; line-height:1.5; color:rgba(255,255,255,0.42);
  margin-bottom:0.35rem;
}
.tj-tl-node__week {
  font-size:0.62rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
}

/* ══════════════════════════════════════
   SECTION 2 — COGNITIVE CARDS
══════════════════════════════════════ */
.tj-cog-cards {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.tj-cog-card {
  position:relative; overflow:hidden;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px; padding:1.6rem 1.4rem 1.4rem;
  transition:transform 0.25s, box-shadow 0.25s;
}
.tj-cog-card:hover { transform:translateY(-5px);
  box-shadow:0 20px 50px rgba(0,0,0,0.45); }
.tj-cog-card__accent {
  position:absolute; top:0; left:0; right:0; height:2px; opacity:0.7;
}
.tj-cog-card__num {
  position:absolute; top:1.2rem; right:1.2rem;
  font-size:3.5rem; font-weight:800; line-height:1;
  color:rgba(255,255,255,0.04); pointer-events:none; user-select:none;
}
.tj-cog-card__icon-wrap {
  width:42px; height:42px; border-radius:12px; border:1px solid;
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; margin-bottom:1.1rem;
}
.tj-cog-card__title {
  font-size:1.05rem; font-weight:700; color:#fff; margin:0 0 0.6rem;
}
.tj-cog-card__desc {
  font-size:0.83rem; line-height:1.7; color:rgba(255,255,255,0.45);
  margin:0 0 1rem;
}
.tj-cog-card__bullets {
  list-style:none; margin:0 0 1.2rem; padding:0;
  display:flex; flex-direction:column; gap:0.45rem;
}
.tj-cog-card__bullets li {
  display:flex; align-items:center; gap:0.55rem;
  font-size:0.8rem; color:rgba(255,255,255,0.55);
}
.tj-cog-card__bullet-dot {
  width:6px; height:6px; border-radius:50%; flex-shrink:0; opacity:0.85;
}
.tj-cog-card__metric-badge {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.4rem 0.85rem; border-radius:8px; border:1px solid;
}
.tj-cog-card__metric-val {
  font-size:1.05rem; font-weight:800; line-height:1;
}
.tj-cog-card__metric-label {
  font-size:0.65rem; font-weight:600; letter-spacing:0.05em;
  text-transform:uppercase; color:rgba(255,255,255,0.38);
}

/* ══════════════════════════════════════
   SECTION 3 — MODULES GRID
══════════════════════════════════════ */
.tj-modules-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.3rem;
}
.tj-module-card {
  position:relative; overflow:hidden;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px; padding:1.3rem 1.2rem;
  transition:transform 0.25s, box-shadow 0.25s;
}
.tj-module-card:hover { transform:translateY(-4px);
  box-shadow:0 18px 45px rgba(0,0,0,0.4); }
.tj-module-card__accent {
  position:absolute; top:0; left:0; right:0; height:2px; opacity:0.7;
}
.tj-module-card__top {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1rem;
}
.tj-module-card__num-wrap { display:flex; align-items:center; gap:0.5rem; }
.tj-module-card__num {
  font-size:0.65rem; font-weight:800; letter-spacing:0.08em;
  padding:0.22rem 0.6rem; border-radius:6px; border:1px solid;
}
.tj-module-card__badge {
  font-size:0.55rem; font-weight:800; letter-spacing:0.1em;
  text-transform:uppercase; padding:0.18rem 0.55rem;
  border-radius:100px; border:1px solid;
}
.tj-module-card__weeks {
  font-size:0.65rem; font-weight:600; color:rgba(255,255,255,0.3);
  letter-spacing:0.04em;
}
.tj-module-card__title {
  font-size:0.95rem; font-weight:700; color:#fff; margin:0 0 0.5rem;
}
.tj-module-card__desc {
  font-size:0.79rem; line-height:1.65; color:rgba(255,255,255,0.43);
  margin:0 0 1rem;
}
.tj-module-card__tags {
  display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:1rem;
}
.tj-module-card__tag {
  font-size:0.63rem; font-weight:600; padding:0.2rem 0.6rem;
  border-radius:100px; border:1px solid;
}
.tj-module-card__footer {
  display:flex; gap:1rem; flex-wrap:wrap;
  padding-top:0.75rem;
  border-top:1px solid rgba(255,255,255,0.07);
}
.tj-module-card__stat {
  display:flex; align-items:center; gap:0.35rem;
  font-size:0.68rem; font-weight:600; color:rgba(255,255,255,0.38);
}
.tj-module-card__stat .fas { font-size:0.65rem; }

/* ══════════════════════════════════════
   SECTION 4 — TESTING
══════════════════════════════════════ */
.tj-testing-layout {
  display:grid; grid-template-columns:1fr 360px;
  gap:3rem; align-items:start;
}
.tj-checkpoints {
  display:flex; flex-direction:column; gap:0;
}
.tj-checkpoint-card {
  display:flex; align-items:stretch; gap:0;
}
.tj-checkpoint-card__left {
  display:flex; flex-direction:column; align-items:center;
  width:52px; flex-shrink:0;
}
.tj-checkpoint-card__icon {
  width:40px; height:40px; border-radius:12px; border:1px solid;
  display:flex; align-items:center; justify-content:center;
  font-size:0.95rem; flex-shrink:0; z-index:1;
}
.tj-checkpoint-card__connector {
  width:2px; flex:1; min-height:16px;
}
.tj-checkpoint-card:last-child .tj-checkpoint-card__connector { display:none; }

.tj-checkpoint-card__body {
  flex:1; padding:0 0 1.6rem 0.8rem;
}
.tj-checkpoint-card__head {
  display:flex; align-items:center; flex-wrap:wrap; gap:0.5rem;
  margin-bottom:0.6rem; margin-top:0.1rem;
}
.tj-checkpoint-card__badge {
  font-size:0.58rem; font-weight:800; letter-spacing:0.1em;
  padding:0.18rem 0.6rem; border-radius:100px; border:1px solid;
}
.tj-checkpoint-card__label {
  font-size:0.88rem; font-weight:700; color:#fff;
}
.tj-checkpoint-card__week {
  margin-left:auto; font-size:0.68rem; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase;
}
.tj-checkpoint-card__desc {
  font-size:0.82rem; line-height:1.7; color:rgba(255,255,255,0.45);
  margin:0 0 0.8rem;
}
.tj-checkpoint-card__metrics {
  display:flex; flex-wrap:wrap; gap:0.45rem;
}
.tj-checkpoint-card__metric {
  display:inline-flex; align-items:center; gap:0.4rem;
  font-size:0.7rem; font-weight:600; padding:0.25rem 0.7rem;
  border-radius:100px; border:1px solid;
}
.tj-checkpoint-card__metric .fas { font-size:0.6rem; }

/* progress chart card */
.tj-progress-card {
  background:rgba(10,16,40,0.85);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:16px; overflow:hidden;
  backdrop-filter:blur(16px);
  box-shadow:0 20px 50px rgba(0,0,0,0.5);
}
.tj-progress-card__header {
  display:flex; align-items:center; justify-content:space-between;
  padding:0.85rem 1.1rem;
  border-bottom:1px solid rgba(255,255,255,0.07);
  background:rgba(255,255,255,0.03);
}
.tj-progress-card__label {
  font-size:0.72rem; font-weight:700; color:rgba(255,255,255,0.5);
  letter-spacing:0.04em;
}
.tj-progress-card__badge {
  font-size:0.55rem; font-weight:800; letter-spacing:0.1em;
  padding:0.18rem 0.55rem; border-radius:100px;
  background:rgba(192,132,252,0.15); border:1px solid rgba(192,132,252,0.35);
  color:#c084fc;
}
.tj-progress-card__chart { padding:1rem; }
.tj-progress-svg { display:block; width:100%; }
.tj-progress-card__deltas {
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,0.07);
}
.tj-progress-delta {
  padding:0.75rem 0.5rem;
  display:flex; flex-direction:column; align-items:center; gap:0.2rem;
  border-right:1px solid rgba(255,255,255,0.07);
}
.tj-progress-delta:last-child { border-right:none; }
.tj-progress-delta__val { font-size:1.1rem; font-weight:800; line-height:1; }
.tj-progress-delta__change {
  font-size:0.62rem; font-weight:700; color:rgba(34,211,238,0.8);
}
.tj-progress-delta__label {
  font-size:0.6rem; font-weight:600; letter-spacing:0.05em;
  text-transform:uppercase; color:rgba(255,255,255,0.3);
}

/* ══════════════════════════════════════
   SECTION 5 — DEV PATH
══════════════════════════════════════ */
.tj-devpath__glow {
  position:absolute; z-index:0; pointer-events:none;
  width:600px; height:400px; top:10%; left:50%; transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(192,132,252,0.1) 0%,transparent 70%);
  filter:blur(60px);
}
.tj-devpath-layout {
  display:grid; grid-template-columns:1fr 420px;
  gap:3rem; align-items:start;
  position:relative; z-index:1;
}
.tj-devpath__streams {
  display:flex; flex-direction:column; gap:1.2rem;
}
.tj-stream-card {
  display:flex; align-items:flex-start; gap:1rem;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px; padding:1.3rem;
  transition:transform 0.25s, box-shadow 0.25s;
}
.tj-stream-card:hover { transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,0.4); }
.tj-stream-card__icon {
  width:42px; height:42px; border-radius:12px; border:1px solid;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; flex-shrink:0;
}
.tj-stream-card__body { flex:1; }
.tj-stream-card__title {
  font-size:0.95rem; font-weight:700; color:#fff; margin:0 0 0.4rem;
}
.tj-stream-card__desc {
  font-size:0.82rem; line-height:1.7; color:rgba(255,255,255,0.44);
  margin:0 0 0.8rem;
}
.tj-stream-card__kpis {
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:0.35rem;
}
.tj-stream-card__kpis li {
  display:flex; align-items:center; gap:0.5rem;
  font-size:0.78rem; color:rgba(255,255,255,0.55);
}
.tj-stream-card__kpis .fas { font-size:0.6rem; flex-shrink:0; }

/* analytics mini dash */
.tj-dev-dash {
  background:rgba(10,16,40,0.85);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:16px; overflow:hidden;
  backdrop-filter:blur(16px);
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
}
.tj-dev-dash__header {
  display:flex; align-items:center; gap:0.75rem;
  padding:0.75rem 1rem;
  background:rgba(255,255,255,0.04);
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.tj-dev-dash__dots { display:flex; gap:5px; }
.tj-dev-dash__dots span { width:11px; height:11px; border-radius:50%; }
.tj-dev-dash__title {
  font-size:0.72rem; font-weight:600;
  color:rgba(255,255,255,0.45); letter-spacing:0.04em;
}
.tj-dev-dash__abilities { padding:1rem 1rem 0.5rem; }
.tj-dev-dash__abilities-label {
  font-size:0.62rem; font-weight:700; letter-spacing:0.07em;
  text-transform:uppercase; color:rgba(255,255,255,0.3);
  margin-bottom:1rem;
}
.tj-ability-row {
  display:flex; align-items:center; gap:0.7rem;
  margin-bottom:0.75rem;
}
.tj-ability-row__label {
  font-size:0.68rem; font-weight:600; color:rgba(255,255,255,0.42);
  min-width:110px;
}
.tj-ability-row__bars { flex:1; display:flex; align-items:center; gap:0.5rem; }
.tj-ability-row__track {
  flex:1; height:6px; border-radius:3px;
  background:rgba(255,255,255,0.06); overflow:hidden;
  position:relative;
}
.tj-ability-row__before {
  position:absolute; top:0; left:0; height:100%;
  background:rgba(255,255,255,0.12); border-radius:3px;
}
.tj-ability-row__after {
  position:absolute; top:0; left:0; height:100%;
  border-radius:3px; opacity:0.8;
}
.tj-ability-row__delta {
  font-size:0.68rem; font-weight:800; min-width:26px; text-align:right;
}
.tj-dev-dash__banner {
  display:flex; align-items:center; flex-wrap:wrap; gap:0.5rem;
  padding:0.9rem 1rem;
  border-top:1px solid rgba(255,255,255,0.07);
  background:rgba(192,132,252,0.06);
}
.tj-dev-dash__banner-left,
.tj-dev-dash__banner-right {
  display:flex; flex-direction:column; gap:0.15rem; flex:1;
}
.tj-dev-dash__banner-label {
  font-size:0.6rem; font-weight:600; letter-spacing:0.07em;
  text-transform:uppercase; color:rgba(255,255,255,0.3);
}
.tj-dev-dash__banner-val {
  font-size:1.6rem; font-weight:800; line-height:1;
}
.tj-dev-dash__banner-improvement {
  font-size:1.1rem; font-weight:800; color:#22d3ee;
}
.tj-dev-dash__banner-chip {
  font-size:0.62rem; font-weight:700; letter-spacing:0.07em;
  text-transform:uppercase; padding:0.25rem 0.7rem; border-radius:100px;
  background:rgba(192,132,252,0.15); border:1px solid rgba(192,132,252,0.35);
  color:#c084fc;
}
.tj-dev-dash__footer {
  padding:0.75rem 1rem;
  border-top:1px solid rgba(255,255,255,0.07);
}
.tj-dev-dash__link {
  display:inline-flex; align-items:center; gap:0.5rem;
  font-size:0.78rem; font-weight:600; color:rgba(255,255,255,0.45);
  text-decoration:none; transition:color 0.18s;
}
.tj-dev-dash__link:hover { color:rgba(255,255,255,0.75); }
.tj-dev-dash__link .fas { font-size:0.68rem; }

/* ══════════════════════════════════════
   SECTION 6 — CTA
══════════════════════════════════════ */
.tj-cta {
  position:relative; overflow:hidden;
  padding:9rem 2rem 8rem;
  background:#020711; text-align:center;
  isolation:isolate;
}
.tj-cta__bg-grid {
  position:absolute; inset:0; z-index:0;
  background-image:radial-gradient(circle,rgba(255,255,255,0.033) 1px,transparent 1px);
  background-size:32px 32px;
}
.tj-cta__bg-radial {
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(5,10,26,0) 0%,#020711 85%);
}
.tj-cta__glow-l {
  position:absolute; z-index:0; pointer-events:none;
  width:520px; height:520px; left:-160px; top:50%; transform:translateY(-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(155,61,232,0.18) 0%,transparent 70%);
  filter:blur(60px);
}
.tj-cta__glow-r {
  position:absolute; z-index:0; pointer-events:none;
  width:460px; height:460px; right:-140px; top:50%; transform:translateY(-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,200,232,0.14) 0%,transparent 70%);
  filter:blur(60px);
}
.tj-cta__top-line {
  position:absolute; top:0; left:0; right:0; height:1px; z-index:1; overflow:hidden;
}
.tj-cta__top-line-fill {
  height:100%;
  background:linear-gradient(90deg,transparent 0%,rgba(0,200,232,0.5) 25%,
    rgba(155,61,232,0.8) 50%,rgba(192,132,252,0.5) 75%,transparent 100%);
}
.tj-cta__inner {
  position:relative; z-index:2;
  max-width:760px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:0;
}
.tj-cta__title {
  font-size:clamp(2.8rem,6vw,5rem); font-weight:800; line-height:1.1;
  color:#fff; letter-spacing:-0.02em; margin:0 0 1.4rem;
}
.tj-cta__title-grad {
  background:linear-gradient(120deg,#00c8e8 0%,#9b3de8 55%,#c084fc 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; display:inline-block;
}
.tj-cta__sub {
  font-size:1.1rem; line-height:1.7; color:rgba(255,255,255,0.52);
  max-width:560px; margin:0 auto 2.4rem;
}
.tj-cta__chips {
  display:flex; flex-wrap:wrap; justify-content:center; gap:0.6rem;
  margin-bottom:2.8rem;
}
.tj-cta__chip {
  display:inline-flex; align-items:center; gap:0.45rem;
  padding:0.4rem 0.9rem; border-radius:100px;
  font-size:0.78rem; font-weight:600;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.62);
  transition:background 0.2s,border-color 0.2s;
}
.tj-cta__chip:hover { background:rgba(0,200,232,0.08); border-color:rgba(0,200,232,0.25); }
.tj-cta__chip .fas { font-size:0.7rem; color:#00c8e8; opacity:0.8; }
.tj-cta__btns {
  display:flex; flex-wrap:wrap; justify-content:center; gap:1rem;
  margin-bottom:2.6rem;
}
.tj-cta__trust {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:0.5rem 1rem;
}
.tj-cta__trust-item {
  display:inline-flex; align-items:center; gap:0.4rem;
  font-size:0.72rem; font-weight:600; letter-spacing:0.05em;
  text-transform:uppercase; color:rgba(255,255,255,0.28);
}
.tj-cta__trust-item .fas { font-size:0.65rem; color:rgba(0,200,232,0.5); }
.tj-cta__trust-sep { color:rgba(255,255,255,0.12); font-size:1rem; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width:1100px) {
  .tj-hero__inner    { grid-template-columns:1fr; gap:3rem; }
  .tj-hero__visual   { justify-content:center; max-height:none; }
  .tj-timeline-card  { max-width:100%; }
  .tj-cog-cards      { grid-template-columns:1fr 1fr; }
  .tj-modules-grid   { grid-template-columns:1fr 1fr; }
  .tj-testing-layout { grid-template-columns:1fr; }
  .tj-devpath-layout { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .tj-section        { padding:5rem 0; }
  .tj-cog-cards      { grid-template-columns:1fr; }
  .tj-modules-grid   { grid-template-columns:1fr; }
  .tj-hero__stats    { flex-wrap:wrap; }
  .tj-hero__stat     { min-width:40%; }
}
@media (max-width:480px) {
  .tj-cta          { padding:6rem 1.25rem 5rem; }
  .tj-cta__btns    { flex-direction:column; align-items:center; }
  .tj-btn-primary--large,
  .tj-btn-ghost--large { width:100%; max-width:300px; justify-content:center; }
  .tj-cta__trust-sep { display:none; }
  .tj-hero__stats  { flex-direction:column; border:none; gap:0.5rem; }
  .tj-hero__stat   { border:none; padding:0.3rem 0; }
}
@media (prefers-reduced-motion:reduce) {
  .tj-cog-card,.tj-module-card,.tj-stream-card,.tj-bench-card { transition:none; }
  .tj-btn-primary__shimmer { display:none; }
}

/* ============================================================
   SCIENCE PAGE  —  sc-* components
   ============================================================ */

/* ── tokens ── */
:root {
  --sc-bg:        #020711;
  --sc-mid:       #060d1e;
  --sc-pub-bg:    #040a18;
  --sc-border:    rgba(255,255,255,0.07);
  --sc-text:      rgba(255,255,255,0.82);
  --sc-muted:     rgba(255,255,255,0.45);
  --sc-cyan:      #00c8e8;
  --sc-teal:      #22d3ee;
  --sc-purple:    #9b3de8;
  --sc-violet:    #c084fc;
}

/* ── page wrapper ── */
.sc-page { background: var(--sc-bg); color: var(--sc-text); }

/* ── shared container ── */
.sc-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ── shared eyebrow ── */
.sc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sc-muted);
  margin-bottom: 1rem;
}
.sc-eyebrow__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sc-cyan);
  box-shadow: 0 0 8px rgba(0,200,232,0.9);
  flex-shrink: 0;
}

/* ── shared gradient text ── */
.sc-grad--cyan   { background: linear-gradient(90deg,#00c8e8,#22d3ee); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.sc-grad--teal   { background: linear-gradient(90deg,#22d3ee,#00c8e8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.sc-grad--purple { background: linear-gradient(90deg,#9b3de8,#c084fc); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.sc-grad--violet { background: linear-gradient(90deg,#c084fc,#9b3de8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ── shared section wrapper ── */
.sc-section {
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
}
.sc-section--mid  { background: var(--sc-mid); }
.sc-section--dark { background: var(--sc-bg);  }
.sc-section--pub  { background: var(--sc-pub-bg); }

.sc-section__bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,200,232,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,232,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ── shared section header ── */
.sc-section__header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
}
.sc-section__title {
  font-size: clamp(1.9rem, 3.5vw, 2.9rem);
  font-weight: 800;
  line-height: 1.18;
  color: #fff;
  margin: 0 0 1rem;
}
.sc-section__sub {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--sc-muted);
  margin: 0;
}

/* ── shared buttons ── */
.sc-btn-primary {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.72rem 1.6rem;
  border-radius: 8px;
  font-size: 0.88rem; font-weight: 700;
  background: linear-gradient(135deg,#0099c4,#7922c4);
  color: #fff;
  text-decoration: none;
  border: none; cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}
.sc-btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }

.sc-btn-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.72rem 1.6rem;
  border-radius: 8px;
  font-size: 0.88rem; font-weight: 700;
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.14);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
  background: transparent;
}
.sc-btn-ghost:hover { border-color: var(--sc-cyan); color: var(--sc-cyan); }

/* ════════════════════════════════════════════════════════════
   SECTION 1 — HERO
   ════════════════════════════════════════════════════════════ */
.sc-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  background: var(--sc-bg);
  overflow: hidden;
  padding: 7rem 2rem;
}

.sc-hero__bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,200,232,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,232,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}
.sc-hero__bg-radial {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(10,22,48,0.0) 0%, #020711 70%);
}
.sc-hero__glow-l {
  position: absolute; left: -200px; top: 20%; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(155,61,232,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.sc-hero__glow-r {
  position: absolute; right: -200px; top: 30%; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(0,200,232,0.14) 0%, transparent 70%);
  pointer-events: none;
}

/* floating particles */
.sc-hero__particle {
  position: absolute; border-radius: 50%; pointer-events: none;
  animation: scParticleFloat 8s ease-in-out infinite;
}
.sc-hero__particle--a {
  width: 4px; height: 4px; background: rgba(0,200,232,0.6);
  top: 20%; left: 15%; animation-delay: 0s;
}
.sc-hero__particle--b {
  width: 3px; height: 3px; background: rgba(155,61,232,0.5);
  top: 60%; left: 80%; animation-delay: 2.5s;
}
.sc-hero__particle--c {
  width: 5px; height: 5px; background: rgba(34,211,238,0.4);
  top: 80%; left: 40%; animation-delay: 5s;
}
@keyframes scParticleFloat {
  0%,100% { transform: translateY(0) scale(1); opacity: 0.6; }
  50%      { transform: translateY(-20px) scale(1.3); opacity: 1; }
}

.sc-hero__inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative; z-index: 1;
}

/* breadcrumb */
.sc-breadcrumb { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 1.5rem; }
.sc-breadcrumb__item { font-size: 0.75rem; color: var(--sc-muted); text-decoration: none; }
.sc-breadcrumb__item:hover { color: var(--sc-cyan); }
.sc-breadcrumb__item--current { color: var(--sc-cyan); }
.sc-breadcrumb__sep { color: var(--sc-muted); font-size: 0.75rem; }

/* hero text */
.sc-hero__title {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 900;
  line-height: 1.12;
  color: #fff;
  margin: 0 0 1.2rem;
}
.sc-hero__title-grad {
  background: linear-gradient(90deg,#00c8e8,#9b3de8,#c084fc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sc-hero__subtitle {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--sc-muted);
  margin: 0 0 2rem;
  max-width: 480px;
}

/* discipline pillars */
.sc-hero__pillars {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  margin-bottom: 2.2rem;
}
.sc-hero__pillar {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.9rem;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  font-size: 0.78rem; font-weight: 600;
  color: rgba(255,255,255,0.7);
}
.sc-hero__pillar i { font-size: 0.85rem; }

.sc-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ── HERO: brain diagram ── */
.sc-hero__visual {
  display: flex; align-items: center; justify-content: center;
}

.sc-brain-diagram {
  position: relative;
  width: 320px; height: 320px;
  flex-shrink: 0;
}

.sc-brain-diagram__ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  border: 1px solid;
  pointer-events: none;
}
.sc-brain-diagram__ring--outer {
  width: 300px; height: 300px;
  border-color: rgba(0,200,232,0.12);
  animation: scRingRotate 40s linear infinite;
}
.sc-brain-diagram__ring--mid {
  width: 230px; height: 230px;
  border-color: rgba(155,61,232,0.1);
  border-style: dashed;
  animation: scRingRotate 25s linear infinite reverse;
}
@keyframes scRingRotate { to { transform: translate(-50%,-50%) rotate(360deg); } }

.sc-brain-diagram__ring-label {
  position: absolute;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0,200,232,0.5);
  left: 50%; transform: translateX(-50%);
  white-space: nowrap;
}
.sc-brain-diagram__ring-label--top    { top: -14px; }
.sc-brain-diagram__ring-label--bottom { bottom: -14px; }

/* core circle */
.sc-brain-diagram__core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 2px solid rgba(0,200,232,0.3);
  background: radial-gradient(circle, rgba(0,200,232,0.12) 0%, rgba(10,22,48,0.9) 70%);
  box-shadow: 0 0 30px rgba(0,200,232,0.2), inset 0 0 20px rgba(155,61,232,0.1);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  z-index: 2;
}
.sc-brain-diagram__core-icon {
  font-size: 1.6rem;
  background: linear-gradient(135deg,#00c8e8,#9b3de8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sc-brain-diagram__core-label {
  font-size: 0.55rem; font-weight: 800;
  text-align: center; line-height: 1.3;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* orbital nodes */
.sc-brain-diagram__node {
  position: absolute;
  top: 50%; left: 50%;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  z-index: 3;
}
.sc-brain-diagram__node-inner {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  transition: transform 0.3s;
}
.sc-brain-diagram__node-inner:hover { transform: scale(1.2); }
.sc-brain-diagram__node-label {
  font-size: 0.52rem; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* SVG lines */
.sc-brain-diagram__lines {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}

/* ════════════════════════════════════════════════════════════
   SECTION 2 — COGNITIVE TRIAD CARDS
   ════════════════════════════════════════════════════════════ */
.sc-triad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.sc-triad-card {
  position: relative;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--sc-border);
  border-radius: 16px;
  padding: 2rem 1.6rem 1.6rem;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.sc-triad-card:hover {
  transform: translateY(-4px);
  border-color: var(--card-color, rgba(0,200,232,0.3));
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 20px color-mix(in srgb, var(--card-color,#00c8e8) 20%, transparent);
}
.sc-triad-card__glow {
  position: absolute; inset: 0; border-radius: 16px;
  pointer-events: none; opacity: 0;
  transition: opacity 0.3s;
}
.sc-triad-card:hover .sc-triad-card__glow { opacity: 1; }
.sc-triad-card__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 1rem;
}
.sc-triad-card__num {
  font-size: 2.4rem; font-weight: 900; line-height: 1;
  color: rgba(255,255,255,0.06);
  user-select: none;
}
.sc-triad-card__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  border: 1px solid;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.sc-triad-card__title {
  font-size: 1.35rem; font-weight: 800;
  color: #fff; margin: 0 0 0.7rem;
}
.sc-triad-card__desc {
  font-size: 0.9rem; line-height: 1.65;
  color: var(--sc-muted); margin: 0 0 1rem;
}
.sc-triad-card__points {
  list-style: none; padding: 0; margin: 0 0 1.2rem;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.sc-triad-card__points li {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.82rem; color: rgba(255,255,255,0.6);
}
.sc-triad-card__dot {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
}
.sc-triad-card__stat {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  border: 1px solid;
  background: transparent;
}
.sc-triad-card__stat-val {
  font-size: 1.3rem; font-weight: 900; line-height: 1;
}
.sc-triad-card__stat-label {
  font-size: 0.72rem; color: rgba(255,255,255,0.45);
}

/* ════════════════════════════════════════════════════════════
   SECTION 3 — P–D–A MODEL
   ════════════════════════════════════════════════════════════ */
.sc-model-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: flex-start;
}

/* flow steps */
.sc-flow-item {
  display: flex;
  gap: 1.2rem;
  margin-bottom: 0;
}
.sc-flow-item__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.sc-flow-item__node {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2px solid;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  z-index: 1;
}
.sc-flow-item__node-inner {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.sc-flow-item__connector {
  flex: 1;
  width: 2px;
  min-height: 48px;
  position: relative;
  margin: 2px 0;
}
.sc-flow-item__connector-arrow {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid;
}
.sc-flow-item__body {
  padding: 0 0 2.5rem;
  flex: 1;
}
.sc-flow-item__badge {
  display: inline-flex;
  padding: 0.28rem 0.75rem;
  border-radius: 20px;
  border: 1px solid;
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.sc-flow-item__title {
  font-size: 1.05rem; font-weight: 800; color: #fff;
  margin: 0 0 0.5rem;
}
.sc-flow-item__desc {
  font-size: 0.88rem; line-height: 1.65; color: var(--sc-muted);
  margin: 0 0 0.8rem;
}
.sc-flow-item__metric {
  display: inline-flex; align-items: baseline; gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.sc-flow-item__metric-val { font-size: 0.95rem; font-weight: 800; }
.sc-flow-item__metric-label { font-size: 0.7rem; color: var(--sc-muted); }

/* model panel */
.sc-model-panel__card {
  background: rgba(255,255,255,0.028);
  border: 1px solid var(--sc-border);
  border-radius: 16px;
  overflow: hidden;
}
.sc-model-panel__header {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.9rem 1.2rem;
  background: rgba(255,255,255,0.025);
  border-bottom: 1px solid var(--sc-border);
}
.sc-model-panel__dots { display: flex; gap: 5px; }
.sc-model-panel__dots span {
  width: 10px; height: 10px; border-radius: 50;
}
.sc-model-panel__label {
  font-size: 0.72rem; font-weight: 700;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.06em;
}

.sc-model-panel__cycle {
  padding: 1.2rem 1.2rem 0;
}
.sc-model-panel__cycle-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sc-muted); margin-bottom: 0.6rem;
}
.sc-model-panel__cycle-bar {
  display: flex; border-radius: 6px; overflow: hidden; height: 28px;
  margin-bottom: 0.5rem;
}
.sc-model-panel__cycle-seg {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.58rem; font-weight: 800;
  color: rgba(0,0,0,0.7);
  letter-spacing: 0.05em;
}
.sc-model-panel__cycle-total {
  font-size: 0.72rem; color: var(--sc-muted); margin-bottom: 1rem;
}
.sc-model-panel__section-label {
  padding: 0.5rem 1.2rem 0.3rem;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  border-top: 1px solid var(--sc-border);
  margin-top: 0.5rem;
}
.sc-model-panel__bar-row {
  padding: 0.6rem 1.2rem 0;
}
.sc-model-panel__bar-row:last-of-type { padding-bottom: 1rem; }
.sc-model-panel__bar-head {
  display: flex; justify-content: space-between;
  margin-bottom: 0.3rem;
}
.sc-model-panel__bar-label { font-size: 0.78rem; color: rgba(255,255,255,0.65); }
.sc-model-panel__bar-pct   { font-size: 0.78rem; font-weight: 800; }
.sc-model-panel__track {
  height: 5px; border-radius: 3px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.sc-model-panel__fill {
  height: 100%; border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}
.sc-model-panel__footnote {
  padding: 0.8rem 1.2rem;
  font-size: 0.7rem; color: rgba(255,255,255,0.28);
  border-top: 1px solid var(--sc-border);
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════
   SECTION 4 — SCIENTIFIC VALIDATION
   ════════════════════════════════════════════════════════════ */
.sc-validation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2rem;
}
.sc-val-group {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--sc-border);
  border-radius: 16px;
  padding: 2rem;
}
.sc-val-group__header {
  display: flex; align-items: center; gap: 0.7rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--sc-border);
}
.sc-val-group__icon { font-size: 1.1rem; }
.sc-val-group__title {
  font-size: 0.82rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.sc-val-metrics { display: flex; flex-direction: column; gap: 1.2rem; }
.sc-val-metric__top {
  display: flex; align-items: baseline; gap: 0.75rem;
  margin-bottom: 0.45rem;
}
.sc-val-metric__pct {
  font-size: 1.4rem; font-weight: 900; line-height: 1;
  flex-shrink: 0;
}
.sc-val-metric__label {
  font-size: 0.83rem; color: rgba(255,255,255,0.6);
  line-height: 1.3;
}
.sc-val-metric__track {
  height: 5px; border-radius: 3px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
}
.sc-val-metric__fill {
  height: 100%; border-radius: 3px;
  transition: width 0.9s cubic-bezier(0.25,0.46,0.45,0.94) 0.2s;
}

/* source note */
.sc-validation__source {
  text-align: center;
  font-size: 0.8rem;
  color: var(--sc-muted);
  margin-top: 1.5rem;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.sc-validation__source i { color: var(--sc-teal); }
.sc-validation__source-link {
  color: var(--sc-cyan);
  text-decoration: none;
  font-weight: 700;
}
.sc-validation__source-link:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════
   SECTION 5 — PROVEN IMPROVEMENTS
   ════════════════════════════════════════════════════════════ */
.sc-proven-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.sc-proven-nums {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.sc-proven-num {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--sc-border);
  border-radius: 14px;
  padding: 1.4rem;
  display: flex; flex-direction: column; gap: 0.8rem;
  transition: transform 0.2s, border-color 0.2s;
}
.sc-proven-num:hover {
  transform: translateY(-3px);
  border-color: rgba(0,200,232,0.25);
}
.sc-proven-num__icon-wrap {
  width: 42px; height: 42px;
  border-radius: 10px;
  border: 1px solid;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.sc-proven-num__val {
  font-size: 1.8rem; font-weight: 900; line-height: 1;
}
.sc-proven-num__label {
  font-size: 0.85rem; font-weight: 700; color: #fff;
}
.sc-proven-num__sub {
  font-size: 0.75rem; color: var(--sc-muted); line-height: 1.4;
}

/* chart card */
.sc-chart-card {
  background: rgba(255,255,255,0.028);
  border: 1px solid var(--sc-border);
  border-radius: 16px;
  overflow: hidden;
}
.sc-chart-card__header {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.9rem 1.2rem;
  background: rgba(255,255,255,0.025);
  border-bottom: 1px solid var(--sc-border);
}
.sc-chart-card__dots { display: flex; gap: 5px; }
.sc-chart-card__dots span { width: 10px; height: 10px; border-radius: 50%; }
.sc-chart-card__label {
  font-size: 0.72rem; font-weight: 700;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.06em;
}
.sc-chart-card__legend {
  display: flex; gap: 1.5rem;
  padding: 0.8rem 1.2rem 0;
}
.sc-chart-card__legend-item {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.75rem; color: var(--sc-muted);
}
.sc-chart-card__legend-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.sc-radar-svg {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
}
.sc-chart-card__footer {
  padding: 0.7rem 1.2rem;
  border-top: 1px solid var(--sc-border);
}
.sc-chart-card__footer-item {
  font-size: 0.78rem; font-weight: 700;
  display: flex; align-items: center; gap: 0.45rem;
}
.sc-chart-card__footer-item i { font-size: 0.7rem; }

/* ════════════════════════════════════════════════════════════
   SECTION 6 — RESEARCH & PUBLICATIONS
   ════════════════════════════════════════════════════════════ */
.sc-pub__glow-l {
  position: absolute; left: -200px; top: 30%; width: 450px; height: 450px;
  background: radial-gradient(circle, rgba(155,61,232,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.sc-pub__glow-r {
  position: absolute; right: -200px; top: 40%; width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,200,232,0.1) 0%, transparent 70%);
  pointer-events: none;
}

/* featured paper card */
.sc-pub-card {
  position: relative;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(155,61,232,0.25);
  border-radius: 20px;
  padding: 2.5rem;
  max-width: 860px;
  margin: 0 auto 2.5rem;
  overflow: hidden;
  transition: box-shadow 0.3s;
}
.sc-pub-card:hover {
  box-shadow: 0 0 50px rgba(155,61,232,0.15), 0 20px 60px rgba(0,0,0,0.5);
}
.sc-pub-card__accent {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #00c8e8, #9b3de8, #c084fc);
  border-radius: 20px 20px 0 0;
}

.sc-pub-card__meta {
  display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.sc-pub-card__tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  background: rgba(155,61,232,0.15);
  border: 1px solid rgba(155,61,232,0.35);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #c084fc;
}
.sc-pub-card__journal {
  font-size: 0.8rem; color: rgba(255,255,255,0.4);
  font-style: italic;
}

.sc-pub-card__title {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 800; line-height: 1.35;
  color: #fff; margin: 0 0 1rem;
}

.sc-pub-card__abstract {
  font-size: 0.92rem; line-height: 1.7;
  color: var(--sc-muted);
  margin: 0 0 1.8rem;
}

.sc-pub-card__highlights {
  display: flex; flex-wrap: wrap; gap: 1rem;
  margin-bottom: 2rem;
}
.sc-pub-card__highlight {
  flex: 1; min-width: 110px;
  border: 1px solid;
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
}
.sc-pub-card__highlight-val {
  display: block;
  font-size: 1.4rem; font-weight: 900; line-height: 1;
  margin-bottom: 0.3rem;
}
.sc-pub-card__highlight-label {
  font-size: 0.72rem; color: var(--sc-muted);
  font-weight: 600; letter-spacing: 0.05em;
}

.sc-pub-card__footer {
  display: flex; flex-wrap: wrap; gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sc-border);
}

/* pub buttons */
.sc-pub-btn-primary {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.82rem 1.8rem;
  border-radius: 10px;
  font-size: 0.9rem; font-weight: 700;
  background: linear-gradient(135deg, #0099c4, #7922c4);
  color: #fff;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
}
.sc-pub-btn-primary:hover { opacity: 0.88; transform: translateY(-2px); }

.sc-pub-btn-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.82rem 1.8rem;
  border-radius: 10px;
  font-size: 0.9rem; font-weight: 700;
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.14);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.sc-pub-btn-ghost:hover { border-color: var(--sc-cyan); color: var(--sc-cyan); }

/* trust row */
.sc-pub-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem;
  padding-top: 0.5rem;
}
.sc-pub-trust__item {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.8rem; color: rgba(255,255,255,0.45);
  font-weight: 600;
}
.sc-pub-trust__item i { font-size: 0.85rem; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .sc-hero__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .sc-hero__visual { justify-content: center; }
  .sc-model-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .sc-proven-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
@media (max-width: 860px) {
  .sc-triad { grid-template-columns: 1fr; }
  .sc-validation-grid { grid-template-columns: 1fr; }
  .sc-proven-nums { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .sc-hero { padding: 5rem 1.2rem; }
  .sc-section { padding: 4.5rem 0; }
  .sc-container { padding: 0 1.2rem; }
  .sc-hero__title { font-size: 2rem; }
  .sc-brain-diagram { width: 260px; height: 260px; }
  .sc-brain-diagram__ring--outer { width: 240px; height: 240px; }
  .sc-brain-diagram__ring--mid   { width: 180px; height: 180px; }
  .sc-proven-nums { grid-template-columns: 1fr; }
  .sc-pub-card { padding: 1.5rem; }
  .sc-pub-card__highlights { gap: 0.6rem; }
  .sc-pub-trust { gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-brain-diagram__ring--outer,
  .sc-brain-diagram__ring--mid,
  .sc-hero__particle { animation: none; }
  .sc-triad-card,
  .sc-proven-num,
  .sc-pub-card { transition: none; }
  .sc-model-panel__fill,
  .sc-val-metric__fill { transition: none; width: 100% !important; }
}

/* ============================================================
   SOLUTIONS PAGE  —  sol-* components
   ============================================================ */

/* ── tokens ── */
:root {
  --sol-bg:     #020711;
  --sol-mid:    #060d1e;
  --sol-border: rgba(255,255,255,0.07);
  --sol-text:   rgba(255,255,255,0.82);
  --sol-muted:  rgba(255,255,255,0.45);
  --sol-cyan:   #00c8e8;
  --sol-teal:   #22d3ee;
  --sol-purple: #9b3de8;
  --sol-violet: #c084fc;
}

/* ── page wrapper ── */
.sol-page { background: var(--sol-bg); color: var(--sol-text); }

/* ── shared container ── */
.sol-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ── shared eyebrow ── */
.sol-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sol-muted);
}
.sol-eyebrow__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sol-cyan);
  box-shadow: 0 0 8px rgba(0,200,232,0.9);
  flex-shrink: 0;
}

/* ── shared gradient text ── */
.sol-grad--cyan   { background: linear-gradient(90deg,#00c8e8,#22d3ee); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.sol-grad--teal   { background: linear-gradient(90deg,#22d3ee,#0891b2); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.sol-grad--purple { background: linear-gradient(90deg,#9b3de8,#c084fc); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.sol-grad--violet { background: linear-gradient(90deg,#c084fc,#9b3de8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ── shared buttons ── */
.sol-btn-primary {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.78rem 1.7rem;
  border-radius: 9px;
  font-size: 0.9rem; font-weight: 700;
  background: linear-gradient(135deg,#0099c4,#7922c4);
  color: #fff;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
  white-space: nowrap;
}
.sol-btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }

.sol-btn-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.78rem 1.7rem;
  border-radius: 9px;
  font-size: 0.9rem; font-weight: 700;
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.14);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.sol-btn-ghost:hover { border-color: var(--sol-cyan); color: var(--sol-cyan); }

/* ════════════════════════════════════════════════════════════
   SECTION 1 — HERO
   ════════════════════════════════════════════════════════════ */
.sol-hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  background: var(--sol-bg);
  overflow: hidden;
  padding: 7rem 2rem;
}

.sol-hero__bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,200,232,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,232,0.04) 1px, transparent 1px);
  background-size: 52px 52px;
}
.sol-hero__bg-radial {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 55% 50%, rgba(10,22,48,0) 0%, #020711 70%);
}
.sol-hero__glow-l {
  position: absolute; left: -200px; top: 15%; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(155,61,232,0.16) 0%, transparent 70%);
  pointer-events: none;
}
.sol-hero__glow-r {
  position: absolute; right: -150px; top: 25%; width: 450px; height: 450px;
  background: radial-gradient(circle, rgba(0,200,232,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.sol-hero__inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative; z-index: 1;
}

/* breadcrumb */
.sol-breadcrumb { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 1.5rem; }
.sol-breadcrumb__item { font-size: 0.75rem; color: var(--sol-muted); text-decoration: none; }
.sol-breadcrumb__item:hover { color: var(--sol-cyan); }
.sol-breadcrumb__item--current { color: var(--sol-cyan); }
.sol-breadcrumb__sep { color: var(--sol-muted); font-size: 0.75rem; }

/* hero text */
.sol-hero__title {
  font-size: clamp(2.4rem, 4.2vw, 3.8rem);
  font-weight: 900;
  line-height: 1.12;
  color: #fff;
  margin: 1rem 0 1.2rem;
}
.sol-hero__title-grad {
  background: linear-gradient(90deg,#00c8e8,#9b3de8,#c084fc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sol-hero__subtitle {
  font-size: 1.05rem; line-height: 1.7;
  color: var(--sol-muted); margin: 0 0 2rem;
  max-width: 480px;
}

/* audience tags */
.sol-hero__tags {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-bottom: 2.2rem;
}
.sol-hero__tag {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.38rem 0.85rem;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  font-size: 0.77rem; font-weight: 600;
  color: rgba(255,255,255,0.65);
}
.sol-hero__tag i { font-size: 0.8rem; color: var(--sol-cyan); }
.sol-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ── hero env card ── */
.sol-hero__visual {
  display: flex; align-items: center; justify-content: center;
}
.sol-hero__env-card {
  background: rgba(8,15,32,0.9);
  border: 1px solid rgba(0,200,232,0.18);
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(0,200,232,0.06);
}
.sol-hero__env-header {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(0,200,232,0.1);
}
.sol-hero__env-dots { display: flex; gap: 5px; }
.sol-hero__env-dots span { width: 10px; height: 10px; border-radius: 50%; }
.sol-hero__env-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.4); flex: 1;
}
.sol-hero__env-live {
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em;
  color: #28c840; animation: solLivePulse 1.8s ease-in-out infinite;
}
@keyframes solLivePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* pitch field */
.sol-hero__env-field {
  position: relative;
  height: 220px;
  background: linear-gradient(160deg, rgba(0,200,232,0.04) 0%, rgba(155,61,232,0.04) 100%);
  overflow: hidden;
}

/* pitch lines */
.sol-env__pitch {
  position: absolute; inset: 10px;
  pointer-events: none;
}
.sol-env__pitch-outline {
  position: absolute; inset: 0;
  border: 1px solid rgba(0,200,232,0.15);
  border-radius: 3px;
}
.sol-env__pitch-half {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background: rgba(0,200,232,0.1);
}
.sol-env__pitch-centre {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 1px solid rgba(0,200,232,0.12);
}
.sol-env__pitch-centre-spot {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(0,200,232,0.3);
}
.sol-env__pitch-box {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 55px; height: 90px;
  border: 1px solid rgba(0,200,232,0.1);
}
.sol-env__pitch-box--left  { left: 0; }
.sol-env__pitch-box--right { right: 0; }

/* player markers */
.sol-env__marker {
  position: absolute;
  transform: translate(-50%,-50%);
  z-index: 2;
}
.sol-env__marker-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 900;
}
.sol-env__marker-dot--pulse {
  animation: solMarkerPulse 2s ease-in-out infinite;
}
.sol-env__marker-ring {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 36px; height: 36px;
  border-radius: 50%; border: 1.5px solid;
  animation: solRingExpand 2s ease-out infinite;
  pointer-events: none;
}
@keyframes solMarkerPulse {
  0%,100% { transform: scale(1); } 50% { transform: scale(1.12); }
}
@keyframes solRingExpand {
  0%   { transform: translate(-50%,-50%) scale(1);   opacity: 0.6; }
  100% { transform: translate(-50%,-50%) scale(1.8); opacity: 0; }
}

/* scanning SVG */
.sol-env__scan-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* HUD strip */
.sol-hero__env-hud {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 0;
  border-top: 1px solid rgba(0,200,232,0.1);
  background: rgba(255,255,255,0.02);
}
.sol-hero__hud-item {
  display: flex; flex-direction: column; align-items: center;
  padding: 0.6rem 0.4rem;
  border-right: 1px solid rgba(0,200,232,0.08);
}
.sol-hero__hud-item:last-child { border-right: none; }
.sol-hero__hud-label {
  font-size: 0.55rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
  margin-bottom: 2px;
}
.sol-hero__hud-val {
  font-size: 0.88rem; font-weight: 900; line-height: 1;
}

/* ════════════════════════════════════════════════════════════
   SECTIONS 2–6 — SOLUTION SEGMENTS
   ════════════════════════════════════════════════════════════ */
.sol-segment {
  position: relative;
  padding: 6rem 0;
  overflow: hidden;
}
.sol-segment--mid  { background: var(--sol-mid); }
.sol-segment--dark { background: var(--sol-bg); }
.sol-segment--last { padding-bottom: 7rem; }

.sol-segment__bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,200,232,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,232,0.03) 1px, transparent 1px);
  background-size: 52px 52px;
}

/* inner two-col grid */
.sol-segment__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.sol-segment__inner--ltr { direction: ltr; }
.sol-segment__inner--rtl { direction: rtl; }
.sol-segment__inner--rtl > * { direction: ltr; }

/* segment text side */
.sol-segment__eyebrow {
  display: flex; align-items: center; gap: 0.85rem;
  margin-bottom: 0.75rem;
}
.sol-segment__eyebrow-num {
  font-size: 2.8rem; font-weight: 900; line-height: 1;
  opacity: 0.25; user-select: none;
}
.sol-segment__title {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 900; line-height: 1.12;
  color: #fff; margin: 0 0 1.2rem;
}
.sol-segment__desc {
  font-size: 1rem; line-height: 1.7;
  color: var(--sol-muted); margin: 0 0 1.8rem;
  max-width: 450px;
}

/* benefit list */
.sol-segment__benefits {
  list-style: none; padding: 0;
  display: flex; flex-direction: column; gap: 0.85rem;
  margin: 0 0 2rem;
}
.sol-segment__benefit {
  display: flex; align-items: center; gap: 0.9rem;
  font-size: 0.92rem; font-weight: 600;
  color: rgba(255,255,255,0.78);
}
.sol-segment__benefit-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 9px;
  border: 1px solid;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
}

/* ── feature panel (right/left card) ── */
.sol-feat-panel {
  background: rgba(255,255,255,0.026);
  border: 1px solid var(--sol-border);
  border-radius: 18px;
  overflow: hidden;
}
.sol-feat-panel--cyan   { border-color: rgba(0,200,232,0.18); }
.sol-feat-panel--emerald{ border-color: rgba(34,211,238,0.18); }
.sol-feat-panel--purple { border-color: rgba(155,61,232,0.18); }

.sol-feat-panel__badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin: 1.4rem 1.4rem 1rem;
  padding: 0.32rem 0.8rem;
  border-radius: 20px;
  background: rgba(0,200,232,0.12);
  border: 1px solid rgba(0,200,232,0.3);
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sol-cyan);
}

.sol-feat-panel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.sol-feat-item {
  display: flex; gap: 0.8rem;
  padding: 1rem 1.2rem;
  border-top: 1px solid var(--sol-border);
  border-right: 1px solid var(--sol-border);
  transition: background 0.2s;
}
.sol-feat-item:hover { background: rgba(255,255,255,0.02); }
.sol-feat-item:nth-child(2n) { border-right: none; }

.sol-feat-item__icon {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  margin-top: 1px;
}
.sol-feat-item__title {
  font-size: 0.82rem; font-weight: 800;
  color: #fff; margin-bottom: 0.2rem;
}
.sol-feat-item__desc {
  font-size: 0.75rem; color: var(--sol-muted);
  line-height: 1.5;
}

/* ── rehab stages ── */
.sol-rehab-stages {
  padding: 0 1.4rem 1.4rem;
}
.sol-rehab-stage {
  display: flex; gap: 1rem;
}
.sol-rehab-stage__left {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0;
  padding-top: 0.2rem;
}
.sol-rehab-stage__node {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  z-index: 1;
}
.sol-rehab-stage__line {
  flex: 1; width: 2px; min-height: 32px;
  margin: 3px 0;
}
.sol-rehab-stage__body {
  padding-bottom: 1.4rem;
  flex: 1;
}
.sol-rehab-stage__badge {
  display: inline-flex;
  padding: 0.2rem 0.6rem;
  border-radius: 12px; border: 1px solid;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.sol-rehab-stage__title {
  font-size: 0.9rem; font-weight: 800; color: #fff;
  margin-bottom: 0.25rem;
}
.sol-rehab-stage__desc {
  font-size: 0.78rem; color: var(--sol-muted); line-height: 1.55;
}

/* ════════════════════════════════════════════════════════════
   FINAL CTA STRIP
   ════════════════════════════════════════════════════════════ */
.sol-cta {
  position: relative;
  background: linear-gradient(135deg, #040a18 0%, #080f22 100%);
  border-top: 1px solid rgba(0,200,232,0.1);
  padding: 5rem 2rem;
  overflow: hidden;
}
.sol-cta__glow-l {
  position: absolute; left: -150px; top: 50%; transform: translateY(-50%);
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(155,61,232,0.14) 0%, transparent 70%);
  pointer-events: none;
}
.sol-cta__glow-r {
  position: absolute; right: -150px; top: 50%; transform: translateY(-50%);
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,200,232,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.sol-cta__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  position: relative; z-index: 1;
}
.sol-cta__title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800; line-height: 1.2;
  color: #fff; margin: 0 0 0.6rem;
}
.sol-cta__sub {
  font-size: 0.95rem; color: var(--sol-muted); margin: 0;
}
.sol-cta__btns {
  display: flex; gap: 1rem; flex-shrink: 0; flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .sol-hero__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .sol-hero__visual { justify-content: center; }
  .sol-segment__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .sol-segment__inner--rtl { direction: ltr; }
  .sol-cta__inner {
    flex-direction: column;
    text-align: center;
  }
}
@media (max-width: 768px) {
  .sol-feat-panel__grid { grid-template-columns: 1fr; }
  .sol-feat-item { border-right: none; }
  .sol-hero__env-hud { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .sol-hero { padding: 5rem 1.2rem; }
  .sol-segment { padding: 4rem 0; }
  .sol-container { padding: 0 1.2rem; }
  .sol-hero__title { font-size: 2rem; }
  .sol-segment__title { font-size: 1.8rem; }
  .sol-segment__eyebrow-num { font-size: 2rem; }
  .sol-hero__env-hud { grid-template-columns: repeat(2,1fr); }
  .sol-cta { padding: 3.5rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sol-hero__env-live,
  .sol-env__marker-dot--pulse,
  .sol-env__marker-ring { animation: none; }
  .sol-btn-primary,
  .sol-btn-ghost,
  .sol-feat-item { transition: none; }
}

/* ============================================================
   TECHNOLOGY PAGE  —  tech-* components
   ============================================================ */

:root {
  --tech-bg:    #020711;
  --tech-mid:   #060d1e;
  --tech-border:rgba(255,255,255,0.07);
  --tech-text:  rgba(255,255,255,0.82);
  --tech-muted: rgba(255,255,255,0.45);
  --tech-cyan:  #00c8e8;
  --tech-teal:  #22d3ee;
  --tech-purple:#9b3de8;
  --tech-violet:#c084fc;
}

.tech-page { background: var(--tech-bg); color: var(--tech-text); }

.tech-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* eyebrow */
.tech-eyebrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tech-muted); margin-bottom: 0.6rem;
}
.tech-eyebrow__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tech-cyan); box-shadow: 0 0 8px rgba(0,200,232,0.9); flex-shrink: 0;
}

/* gradient text */
.tech-grad--cyan   { background:linear-gradient(90deg,#00c8e8,#22d3ee); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.tech-grad--teal   { background:linear-gradient(90deg,#22d3ee,#0891b2); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.tech-grad--purple { background:linear-gradient(90deg,#9b3de8,#c084fc); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.tech-grad--violet { background:linear-gradient(90deg,#c084fc,#9b3de8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* buttons */
.tech-btn-primary {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.75rem 1.7rem; border-radius:9px;
  font-size:.9rem; font-weight:700;
  background:linear-gradient(135deg,#0099c4,#7922c4);
  color:#fff; text-decoration:none;
  transition:opacity .2s,transform .2s;
}
.tech-btn-primary:hover { opacity:.88; transform:translateY(-1px); }
.tech-btn-ghost {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.7rem; border-radius:9px;
  font-size:.9rem; font-weight:700;
  color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.14);
  text-decoration:none; background:transparent;
  transition:border-color .2s,color .2s;
}
.tech-btn-ghost:hover { border-color:var(--tech-cyan); color:var(--tech-cyan); }

/* ════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════ */
.tech-hero {
  position:relative; min-height:88vh;
  display:flex; align-items:center;
  background:var(--tech-bg); overflow:hidden; padding:7rem 2rem;
}
.tech-hero__bg-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,200,232,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,200,232,.04) 1px,transparent 1px);
  background-size:52px 52px;
}
.tech-hero__bg-radial {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 55% 50%,rgba(10,22,48,0) 0%,#020711 70%);
}
.tech-hero__glow-l { position:absolute; left:-200px; top:20%; width:500px; height:500px; background:radial-gradient(circle,rgba(155,61,232,.16) 0%,transparent 70%); pointer-events:none; }
.tech-hero__glow-r { position:absolute; right:-150px; top:30%; width:450px; height:450px; background:radial-gradient(circle,rgba(0,200,232,.12) 0%,transparent 70%); pointer-events:none; }
.tech-hero__scan-line {
  position:absolute; top:0; left:-100%; width:200%; height:2px;
  background:linear-gradient(90deg,transparent,rgba(0,200,232,.4),transparent);
  animation:techScanLine 6s linear infinite;
  pointer-events:none;
}
@keyframes techScanLine { to { transform:translateY(100vh); } }

.tech-hero__inner {
  max-width:1200px; width:100%; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center;
  position:relative; z-index:1;
}

.tech-breadcrumb { display:flex; align-items:center; gap:.4rem; margin-bottom:1.4rem; }
.tech-breadcrumb__item { font-size:.75rem; color:var(--tech-muted); text-decoration:none; }
.tech-breadcrumb__item:hover { color:var(--tech-cyan); }
.tech-breadcrumb__item--current { color:var(--tech-cyan); }
.tech-breadcrumb__sep { color:var(--tech-muted); font-size:.75rem; }

.tech-hero__title {
  font-size:clamp(2.2rem,4vw,3.6rem); font-weight:900; line-height:1.12;
  color:#fff; margin:.8rem 0 1.2rem;
}
.tech-hero__title-grad {
  background:linear-gradient(90deg,#00c8e8,#9b3de8,#c084fc);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.tech-hero__subtitle {
  font-size:1.03rem; line-height:1.7; color:var(--tech-muted);
  margin:0 0 1.8rem; max-width:460px;
}

/* tech layer pills */
.tech-hero__layers { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2rem; }
.tech-hero__layer {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.38rem .85rem; border-radius:20px; border:1px solid;
  font-size:.76rem; font-weight:700;
}
.tech-hero__layer i { font-size:.8rem; }
.tech-hero__ctas { display:flex; flex-wrap:wrap; gap:.9rem; }

/* VR card */
.tech-hero__visual { display:flex; align-items:center; justify-content:center; }
.tech-vr-card {
  background:rgba(8,15,32,.95); border:1px solid rgba(0,200,232,.2);
  border-radius:16px; overflow:hidden; width:100%; max-width:520px;
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px rgba(0,200,232,.06);
}
.tech-vr-card__header {
  display:flex; align-items:center; gap:.6rem;
  padding:.72rem 1rem; background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(0,200,232,.1);
}
.tech-vr-card__dots { display:flex; gap:5px; }
.tech-vr-card__dots span { width:10px; height:10px; border-radius:50%; }
.tech-vr-card__label { font-size:.7rem; font-weight:700; letter-spacing:.06em; color:rgba(255,255,255,.4); flex:1; }
.tech-vr-card__rec { font-size:.65rem; font-weight:800; letter-spacing:.1em; color:#ff5f57; animation:techRecPulse 1.5s ease-in-out infinite; }
@keyframes techRecPulse { 0%,100%{opacity:1} 50%{opacity:.35} }

.tech-vr-card__viewport {
  position:relative; height:240px;
  background:linear-gradient(160deg,rgba(0,200,232,.03) 0%,rgba(155,61,232,.04) 100%);
  overflow:hidden;
}
.tech-vr__scan-h {
  position:absolute; top:50%; left:0; right:0; height:1px;
  background:rgba(0,200,232,.1); transform:translateY(-50%);
}
.tech-vr__scan-v {
  position:absolute; left:50%; top:0; bottom:0; width:1px;
  background:rgba(0,200,232,.1); transform:translateX(-50%);
}
/* corner brackets */
.tech-vr__corner {
  position:absolute; width:16px; height:16px;
  border-color:rgba(0,200,232,.5); border-style:solid;
}
.tech-vr__corner--tl { top:8px; left:8px; border-width:2px 0 0 2px; }
.tech-vr__corner--tr { top:8px; right:8px; border-width:2px 2px 0 0; }
.tech-vr__corner--bl { bottom:8px; left:8px; border-width:0 0 2px 2px; }
.tech-vr__corner--br { bottom:8px; right:8px; border-width:0 2px 2px 0; }

/* field lines */
.tech-vr__field { position:absolute; inset:14px; pointer-events:none; }
.tech-vr__field-line--h {
  position:absolute; top:50%; left:0; right:0;
  height:1px; background:rgba(0,200,232,.08);
}
.tech-vr__field-line--circle {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%;
  border:1px solid rgba(0,200,232,.1);
}
.tech-vr__field-goal {
  position:absolute; top:50%; transform:translateY(-50%);
  width:28px; height:52px; border:1px solid rgba(0,200,232,.1);
}
.tech-vr__field-goal--left  { left:0; }
.tech-vr__field-goal--right { right:0; }

/* player */
.tech-vr__player {
  position:absolute; bottom:40%; left:50%; transform:translateX(-50%);
  font-size:1.4rem; color:rgba(0,200,232,.7);
  text-shadow:0 0 12px rgba(0,200,232,.6);
  animation:techPlayerBob .8s ease-in-out infinite alternate;
}
@keyframes techPlayerBob { to { transform:translateX(-50%) translateY(-4px); } }

/* targets */
.tech-vr__target { position:absolute; transform:translate(-50%,-50%); z-index:3; }
.tech-vr__target-dot {
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  animation:techTargetPulse 1.5s ease-in-out infinite;
}
@keyframes techTargetPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
.tech-vr__target-ring {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:38px; height:38px; border-radius:50%; border:1.5px solid;
  animation:techRingExpand 2s ease-out infinite; pointer-events:none;
}
@keyframes techRingExpand {
  0%  {transform:translate(-50%,-50%) scale(1);opacity:.6}
  100%{transform:translate(-50%,-50%) scale(1.9);opacity:0}
}

/* reticle */
.tech-vr__reticle {
  position:absolute; top:38%; left:42%;
  width:28px; height:28px;
  transform:translate(-50%,-50%);
}
.tech-vr__reticle-inner {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:10px; height:10px; border-radius:50%;
  border:1.5px solid rgba(0,200,232,.7);
}
.tech-vr__reticle-cross {
  position:absolute; background:rgba(0,200,232,.4);
}
.tech-vr__reticle-cross--h { top:50%; left:0; right:0; height:1px; }
.tech-vr__reticle-cross--v { left:50%; top:0; bottom:0; width:1px; }

/* HUD labels */
.tech-vr__hud-tl { position:absolute; top:8px; left:8px; }
.tech-vr__hud-tr { position:absolute; top:8px; right:8px; }
.tech-vr__hud-tag {
  font-size:.58rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(0,0,0,.4); padding:.2rem .45rem; border-radius:4px;
}

/* data bar */
.tech-vr__data-bar {
  position:absolute; bottom:0; left:0; right:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:rgba(8,15,32,.85); border-top:1px solid rgba(0,200,232,.1);
}
.tech-vr__data-item { display:flex; flex-direction:column; align-items:center; padding:.5rem .3rem; }
.tech-vr__data-label { font-size:.52rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.28); margin-bottom:1px; }
.tech-vr__data-val { font-size:.85rem; font-weight:900; line-height:1; }

/* ════════════════════════════════════════════
   SHARED SECTION STRUCTURE
   ════════════════════════════════════════════ */
.tech-section { position:relative; padding:6.5rem 0; overflow:hidden; }
.tech-section--mid  { background:var(--tech-mid); }
.tech-section--dark { background:var(--tech-bg); }
.tech-section--future { background:linear-gradient(160deg,#040a18 0%,#080f22 100%); }

.tech-section__bg-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,200,232,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,200,232,.03) 1px,transparent 1px);
  background-size:52px 52px;
}

/* centred header */
.tech-section__header { text-align:center; max-width:680px; margin:0 auto 4rem; }
.tech-section__title {
  font-size:clamp(1.9rem,3.5vw,2.9rem); font-weight:800; line-height:1.15;
  color:#fff; margin:.3rem 0 1rem;
}
.tech-section__title--center { text-align:center; }
.tech-section__sub { font-size:1rem; line-height:1.7; color:var(--tech-muted); margin:0; }

/* big number */
.tech-section__num {
  font-size:5rem; font-weight:900; line-height:1;
  color:rgba(255,255,255,.04); user-select:none;
  margin-bottom:-.8rem;
}
.tech-section__num--center { text-align:center; }

/* two-col inner */
.tech-section__inner {
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center;
}
.tech-section__inner--ltr { direction:ltr; }
.tech-section__inner--rtl { direction:rtl; }
.tech-section__inner--rtl > * { direction:ltr; }

.tech-section__text {}
.tech-section__desc { font-size:1rem; line-height:1.7; color:var(--tech-muted); margin:0 0 1.8rem; }

/* benefit rows */
.tech-section__benefits { display:flex; flex-direction:column; gap:.85rem; }
.tech-benefit {
  display:flex; align-items:center; gap:.9rem;
  font-size:.92rem; font-weight:600; color:rgba(255,255,255,.75);
}
.tech-benefit__icon {
  width:36px; height:36px; flex-shrink:0;
  border-radius:9px; border:1px solid;
  display:flex; align-items:center; justify-content:center; font-size:.9rem;
}

/* ── feature card (secs 2 and 3) ── */
.tech-feat-card {
  background:rgba(255,255,255,.026);
  border:1px solid var(--tech-border); border-radius:16px; overflow:hidden;
}
.tech-feat-card--cyan { border-color:rgba(0,200,232,.18); }
.tech-feat-card__badge {
  display:inline-flex; align-items:center; gap:.45rem;
  margin:1.2rem 1.2rem .8rem;
  padding:.3rem .75rem; border-radius:20px;
  background:rgba(0,200,232,.1); border:1px solid rgba(0,200,232,.3);
  font-size:.67rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.tech-feat-card__item {
  display:flex; gap:.8rem; padding:.95rem 1.2rem;
  border-top:1px solid var(--tech-border);
  transition:background .2s;
}
.tech-feat-card__item:hover { background:rgba(255,255,255,.02); }
.tech-feat-card__item-icon {
  width:32px; height:32px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
}
.tech-feat-card__item-title { font-size:.82rem; font-weight:800; color:#fff; margin-bottom:.15rem; }
.tech-feat-card__item-desc  { font-size:.75rem; color:var(--tech-muted); line-height:1.5; }

/* ── hardware specs ── */
.tech-hw-specs { display:flex; flex-direction:column; gap:1rem; }
.tech-hw-spec {
  display:flex; align-items:flex-start; gap:.9rem;
  padding:1rem 1.2rem;
  background:rgba(255,255,255,.024);
  border:1px solid var(--tech-border); border-radius:12px;
  transition:border-color .2s;
}
.tech-hw-spec:hover { border-color:rgba(0,200,232,.25); }
.tech-hw-spec__icon {
  width:40px; height:40px; flex-shrink:0; border-radius:10px; border:1px solid;
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.tech-hw-spec__label { font-size:.88rem; font-weight:800; color:#fff; margin-bottom:.2rem; }
.tech-hw-spec__desc  { font-size:.78rem; color:var(--tech-muted); line-height:1.5; }

/* ── sensor card ── */
.tech-sensor-card {
  background:rgba(8,15,32,.95); border:1px solid rgba(0,200,232,.18);
  border-radius:16px; overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.4),0 0 30px rgba(0,200,232,.05);
}
.tech-sensor-card__header {
  display:flex; align-items:center; gap:.6rem;
  padding:.75rem 1rem; background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(0,200,232,.1);
}
.tech-sensor-card__dots { display:flex; gap:5px; }
.tech-sensor-card__dots span { width:10px; height:10px; border-radius:50%; }
.tech-sensor-card__label { font-size:.7rem; font-weight:700; letter-spacing:.06em; color:rgba(255,255,255,.4); flex:1; }
.tech-sensor-card__status { font-size:.65rem; font-weight:800; letter-spacing:.1em; }

.tech-sensor-channels { padding:.8rem .6rem; display:flex; flex-direction:column; gap:.5rem; }
.tech-sensor-ch {
  display:grid; grid-template-columns:32px 1fr 120px; gap:.7rem; align-items:center;
  padding:.55rem .6rem; border-radius:8px; background:rgba(255,255,255,.02);
}
.tech-sensor-ch__id { font-size:.95rem; display:flex; align-items:center; justify-content:center; }
.tech-sensor-ch__label { font-size:.78rem; font-weight:700; color:rgba(255,255,255,.75); }
.tech-sensor-ch__freq  { font-size:.65rem; color:rgba(255,255,255,.3); margin-top:1px; }
.tech-sensor-ch__bar-wrap { display:flex; align-items:center; gap:.5rem; }
.tech-sensor-ch__bar { flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.07); overflow:hidden; }
.tech-sensor-ch__fill { height:100%; border-radius:3px; }
.tech-sensor-ch__val  { font-size:.72rem; font-weight:800; width:28px; text-align:right; }

.tech-sensor-card__footer {
  padding:.65rem 1rem; border-top:1px solid rgba(0,200,232,.08);
  background:rgba(255,255,255,.02);
}

/* ════════════════════════════════════════════
   SECTION 4 — DATA ENGINE GRID
   ════════════════════════════════════════════ */
.tech-data-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem;
}
.tech-data-card {
  background:rgba(255,255,255,.026);
  border:1px solid var(--tech-border); border-radius:16px; padding:1.8rem 1.4rem;
  position:relative; overflow:hidden;
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.tech-data-card:hover {
  transform:translateY(-4px);
  border-color:var(--dc-color,rgba(0,200,232,.3));
  box-shadow:0 12px 35px rgba(0,0,0,.4);
}
.tech-data-card__top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.9rem; }
.tech-data-card__num { font-size:2.4rem; font-weight:900; line-height:1; color:rgba(255,255,255,.05); user-select:none; }
.tech-data-card__icon {
  width:44px; height:44px; border-radius:11px; border:1px solid;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.tech-data-card__title { font-size:1.05rem; font-weight:800; color:#fff; margin:0 0 .6rem; }
.tech-data-card__desc  { font-size:.85rem; line-height:1.65; color:var(--tech-muted); margin:0 0 .9rem; }
.tech-data-card__detail {
  display:flex; align-items:flex-start; gap:.5rem;
  padding:.5rem .7rem; border-radius:7px; border:1px solid;
  font-size:.75rem; color:rgba(255,255,255,.5); line-height:1.5; margin-bottom:.9rem;
}
.tech-data-card__detail i { flex-shrink:0; margin-top:.15rem; font-size:.7rem; }
.tech-data-card__metric {
  display:flex; align-items:baseline; gap:.5rem;
  padding:.5rem .8rem; border-radius:8px; border:1px solid;
}
.tech-data-card__metric-val   { font-size:1.15rem; font-weight:900; }
.tech-data-card__metric-label { font-size:.7rem; color:rgba(255,255,255,.4); }

/* ════════════════════════════════════════════
   SECTION 5 — ARCHITECTURE PIPELINE
   ════════════════════════════════════════════ */
.tech-arch-pipeline {
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  position:relative;
}
.tech-arch-stage {
  display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:0 1rem;
  position:relative;
}
.tech-arch-stage__top { display:flex; align-items:center; width:100%; margin-bottom:1.2rem; }
.tech-arch-stage__icon-wrap {
  width:70px; height:70px; border-radius:50%; border:2px solid;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:#080f20;
}
.tech-arch-stage__icon-inner {
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}
.tech-arch-stage__arrow {
  flex:1; display:flex; align-items:center; position:relative; height:2px; margin:0 2px;
}
.tech-arch-stage__arrow-line { flex:1; height:2px; }
.tech-arch-stage__arrow-head {
  width:0; height:0;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:7px solid;
  flex-shrink:0;
}
.tech-arch-stage__badge {
  display:inline-flex; padding:.25rem .7rem; border-radius:20px; border:1px solid;
  font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:.7rem;
}
.tech-arch-stage__title { font-size:.95rem; font-weight:800; color:#fff; margin:0 0 .5rem; }
.tech-arch-stage__desc  { font-size:.8rem; line-height:1.6; color:var(--tech-muted); margin:0 0 1rem; }
.tech-arch-stage__outputs { display:flex; flex-direction:column; gap:.4rem; width:100%; }
.tech-arch-stage__output {
  display:flex; align-items:center; gap:.45rem; justify-content:center;
  padding:.28rem .6rem; border-radius:6px; border:1px solid;
  font-size:.72rem; font-weight:600;
}

/* ════════════════════════════════════════════
   SECTION 6 — FUTURE TECHNOLOGY
   ════════════════════════════════════════════ */
.tech-future__glow-l { position:absolute; left:-150px; top:30%; width:450px; height:450px; background:radial-gradient(circle,rgba(155,61,232,.14) 0%,transparent 70%); pointer-events:none; }
.tech-future__glow-r { position:absolute; right:-150px; top:40%; width:400px; height:400px; background:radial-gradient(circle,rgba(0,200,232,.1) 0%,transparent 70%); pointer-events:none; }

.tech-future-cards {
  display:grid; grid-template-columns:1fr 1fr; gap:2rem;
  max-width:900px; margin:0 auto;
}
.tech-future-card {
  background:rgba(255,255,255,.026);
  border:1px solid var(--tech-border); border-radius:20px; padding:2rem;
  position:relative; overflow:hidden;
  transition:box-shadow .3s,transform .25s;
}
.tech-future-card:hover { transform:translateY(-4px); box-shadow:0 20px 50px rgba(0,0,0,.5); }
.tech-future-card__coming-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.28rem .7rem; border-radius:20px;
  background:rgba(0,200,232,.1); border:1px solid rgba(0,200,232,.3);
  font-size:.65rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tech-cyan); margin-bottom:1.2rem;
}
.tech-future-card__icon-wrap {
  width:72px; height:72px; border-radius:50%; border:2px solid;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.2rem;
}
.tech-future-card__icon-inner {
  width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.tech-future-card__tag {
  display:inline-flex; padding:.25rem .7rem; border-radius:20px; border:1px solid;
  font-size:.65rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:.8rem;
}
.tech-future-card__title { font-size:1.15rem; font-weight:800; color:#fff; margin:0 0 .7rem; }
.tech-future-card__desc  { font-size:.88rem; line-height:1.7; color:var(--tech-muted); margin:0 0 1.2rem; }
.tech-future-card__features { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.4rem; }
.tech-future-card__feature {
  display:flex; align-items:center; gap:.55rem;
  font-size:.82rem; color:rgba(255,255,255,.65);
}
.tech-future-card__feature i { font-size:.7rem; flex-shrink:0; }
.tech-future-card__status { display:flex; flex-direction:column; gap:.4rem; }
.tech-future-card__status-bar { height:5px; border-radius:3px; background:rgba(255,255,255,.07); overflow:hidden; }
.tech-future-card__status-fill { height:100%; border-radius:3px; transition:width 1s ease; }
/* ── slim variant (no description / bullet / status bar) ── */
.tech-future-cards--minimal { max-width:760px; }
.tech-future-card--slim {
  display:flex; flex-direction:column; align-items:flex-start;
  padding:2.2rem 2rem 2rem;
}
.tech-future-card--slim .tech-future-card__title { font-size:1.25rem; margin:0; }

/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media (max-width:1200px) {
  .tech-data-grid { grid-template-columns:repeat(2,1fr); }
  .tech-arch-pipeline { grid-template-columns:repeat(2,1fr); gap:2rem; }
  .tech-arch-stage__arrow { display:none; }
}
@media (max-width:1100px) {
  .tech-hero__inner { grid-template-columns:1fr; gap:3rem; }
  .tech-hero__visual { justify-content:center; }
  .tech-section__inner { grid-template-columns:1fr; gap:2.5rem; }
  .tech-section__inner--rtl { direction:ltr; }
}
@media (max-width:768px) {
  .tech-data-grid { grid-template-columns:1fr; }
  .tech-arch-pipeline { grid-template-columns:1fr; }
  .tech-future-cards { grid-template-columns:1fr; }
  .tech-sensor-ch { grid-template-columns:32px 1fr 80px; }
}
@media (max-width:640px) {
  .tech-hero { padding:5rem 1.2rem; }
  .tech-section { padding:4.5rem 0; }
  .tech-container { padding:0 1.2rem; }
  .tech-hero__title { font-size:1.9rem; }
}
@media (prefers-reduced-motion:reduce) {
  .tech-hero__scan-line,
  .tech-vr-card__rec,
  .tech-vr__target-dot,
  .tech-vr__target-ring,
  .tech-vr__player { animation:none; }
  .tech-data-card,
  .tech-future-card,
  .tech-hw-spec,
  .tech-btn-primary { transition:none; }
  .tech-future-card__status-fill { transition:none; }
}

/* ============================================================
   VR TRAINING ENVIRONMENT PAGE  (/technology/vr-environment)
   ============================================================ */

/* ── Shared tokens ── */
.vre-page { background:var(--navy-deep); color:#fff; }
.vre-container { max-width:1200px; margin:0 auto; padding:0 2rem; }

/* ── Buttons ── */
.vre-btn-primary {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.85rem 1.8rem; border-radius:50px; font-weight:700; font-size:.9rem;
  background:linear-gradient(135deg,#6b21e8,#9b3de8);
  color:#fff; text-decoration:none; position:relative; overflow:hidden;
  box-shadow:0 4px 20px rgba(107,33,232,.4); transition:transform .2s,box-shadow .2s;
}
.vre-btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(107,33,232,.55); }
.vre-btn-primary__shimmer {
  position:absolute; inset:0; background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.15) 50%,transparent 70%);
  transform:translateX(-100%); transition:transform .6s;
}
.vre-btn-primary:hover .vre-btn-primary__shimmer { transform:translateX(100%); }
.vre-btn-ghost {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.6rem; border-radius:50px; font-weight:600; font-size:.88rem;
  border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.75);
  text-decoration:none; transition:border-color .2s,color .2s,background .2s;
}
.vre-btn-ghost:hover { border-color:rgba(255,255,255,.4); color:#fff; background:rgba(255,255,255,.06); }
.vre-btn-ghost--inline { margin-top:1.5rem; }

/* ── Badges ── */
.vre-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.28rem .8rem; border-radius:20px; border:1px solid;
  font-size:.65rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
.vre-badge--cyan   { color:#00c8e8; background:rgba(0,200,232,.1); border-color:rgba(0,200,232,.3); }
.vre-badge--purple { color:#a78bfa; background:rgba(167,139,250,.1); border-color:rgba(167,139,250,.3); }
.vre-badge--teal   { color:#34d399; background:rgba(52,211,153,.1); border-color:rgba(52,211,153,.3); }

/* ── Gradient text ── */
.vre-grad { background:linear-gradient(135deg,#00c8e8,#9b3de8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ── Shared section styles ── */
.vre-section { padding:6rem 0; }
.vre-section--mid  { background:rgba(255,255,255,.018); }
.vre-section--dark { background:var(--navy-deep); }
.vre-section__header { text-align:center; margin-bottom:3.5rem; display:flex; flex-direction:column; align-items:center; gap:.75rem; }
.vre-section__title { font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:800; line-height:1.15; margin:0; }
.vre-section__title--center { text-align:center; }
.vre-section__sub { font-size:.97rem; color:rgba(255,255,255,.55); max-width:600px; line-height:1.7; margin:0; text-align:center; }
.vre-body { font-size:.95rem; line-height:1.8; color:rgba(255,255,255,.72); margin:0 0 1.2rem; }

/* ─────────────────────────────────────────────
   §1  HERO
   ───────────────────────────────────────────── */
.vre-hero {
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,#0a0a1a 0%,#0d0b1e 50%,#070714 100%);
  padding:7rem 0 6rem;
}
.vre-hero__grid-bg {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(155,61,232,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(155,61,232,.07) 1px,transparent 1px);
  background-size:40px 40px; pointer-events:none;
}
.vre-hero__glow-l {
  position:absolute; top:-10%; left:-10%; width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle,rgba(107,33,232,.25) 0%,transparent 70%); pointer-events:none;
}
.vre-hero__glow-r {
  position:absolute; bottom:-10%; right:-5%; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,200,232,.18) 0%,transparent 70%); pointer-events:none;
}
.vre-breadcrumb { display:flex; align-items:center; gap:.5rem; margin-bottom:2rem; flex-wrap:wrap; }
.vre-breadcrumb__item { font-size:.8rem; color:rgba(255,255,255,.45); text-decoration:none; transition:color .2s; }
.vre-breadcrumb__item:hover { color:rgba(255,255,255,.8); }
.vre-breadcrumb__sep  { font-size:.75rem; color:rgba(255,255,255,.25); }
.vre-breadcrumb__cur  { font-size:.8rem; color:rgba(255,255,255,.65); }
.vre-hero__eyebrow {
  display:flex; align-items:center; gap:.55rem; margin-bottom:1.2rem;
  font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.vre-hero__dot {
  width:8px; height:8px; border-radius:50%;
  background:#9b3de8; box-shadow:0 0 10px rgba(155,61,232,.9);
  animation:vre-pulse 2s ease-in-out infinite;
}
@keyframes vre-pulse {
  0%,100% { opacity:1; box-shadow:0 0 10px rgba(155,61,232,.9); }
  50%      { opacity:.6; box-shadow:0 0 18px rgba(155,61,232,.6); }
}
.vre-hero__title {
  font-size:clamp(2.4rem,5.5vw,4rem); font-weight:900; line-height:1.1;
  margin-bottom:1.2rem; letter-spacing:-.02em;
}
.vre-hero__grad {
  background:linear-gradient(135deg,#00c8e8 0%,#9b3de8 60%,#c084fc 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.vre-hero__subtitle { font-size:1.15rem; color:#00c8e8; font-weight:600; margin-bottom:1rem; }
.vre-hero__desc { font-size:.97rem; line-height:1.75; color:rgba(255,255,255,.65); max-width:580px; margin-bottom:2rem; }
.vre-hero__pills { display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:2rem; }
.vre-hero__pill {
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:12px; padding:.65rem 1.1rem;
}
.vre-hero__pill-val   { font-size:1.25rem; font-weight:800; color:#00c8e8; line-height:1; }
.vre-hero__pill-label { font-size:.68rem; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.07em; margin-top:.25rem; }
.vre-hero__ctas { display:flex; flex-wrap:wrap; gap:1rem; }

/* ─────────────────────────────────────────────
   §2  CORE EXPLANATION
   ───────────────────────────────────────────── */
.vre-core-split {
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center;
}
.vre-core-split__text { display:flex; flex-direction:column; gap:.8rem; }
.vre-core-callout {
  display:flex; align-items:flex-start; gap:1rem;
  background:rgba(107,33,232,.12); border:1px solid rgba(155,61,232,.25);
  border-radius:12px; padding:1.1rem 1.3rem; margin-top:.5rem;
}
.vre-core-callout i { color:#9b3de8; font-size:1.1rem; flex-shrink:0; margin-top:.1rem; }
.vre-core-callout span { font-size:.88rem; color:rgba(255,255,255,.65); line-height:1.6; }
.vre-core-callout strong { color:#fff; }

/* Active training visual card */
.vre-active-card {
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.09);
  border-radius:18px; padding:1.8rem; position:relative; overflow:hidden;
}
.vre-active-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,#9b3de8,#00c8e8,#9b3de8);
}
.vre-active-card__label {
  display:flex; align-items:center; gap:.5rem; margin-bottom:.6rem;
  font-size:.65rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.vre-active-card__dot {
  width:7px; height:7px; border-radius:50%; background:#34d399;
  box-shadow:0 0 8px rgba(52,211,153,.8); animation:vre-pulse 1.5s ease-in-out infinite;
}
.vre-active-card__title { font-size:1rem; font-weight:700; color:#fff; margin-bottom:1.2rem; }
.vre-active-rows { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.2rem; }
.vre-active-row {
  display:flex; align-items:center; gap:.8rem;
  background:rgba(255,255,255,.04); border-radius:8px; padding:.55rem .8rem;
}
.vre-active-row__icon {
  width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; flex-shrink:0;
}
.vre-active-row__label { font-size:.82rem; color:rgba(255,255,255,.65); flex:1; }
.vre-active-row__val   { font-size:.75rem; font-weight:700; }
.vre-active-card__footer {
  display:flex; align-items:center; gap:.5rem;
  font-size:.75rem; color:rgba(255,255,255,.4);
  border-top:1px solid rgba(255,255,255,.08); padding-top:.9rem;
}
.vre-active-card__footer i { color:#00c8e8; }

/* ─────────────────────────────────────────────
   §3  TRAINING LOOP
   ───────────────────────────────────────────── */
.vre-loop {
  display:flex; align-items:flex-start; gap:0; justify-content:center;
  flex-wrap:wrap; margin-bottom:2.5rem;
}
.vre-loop__item { display:flex; align-items:center; }
.vre-loop__card {
  width:220px; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:1.8rem 1.5rem;
  position:relative; overflow:hidden; text-align:center;
  transition:transform .25s,box-shadow .25s;
}
.vre-loop__card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.45); }
.vre-loop__card::before {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--lc),transparent);
}
.vre-loop__step-num { font-size:.65rem; font-weight:900; letter-spacing:.12em; margin-bottom:.9rem; }
.vre-loop__icon-wrap {
  width:62px; height:62px; border-radius:50%; border:2px solid;
  display:flex; align-items:center; justify-content:center; margin:0 auto 1rem;
  font-size:1.4rem;
}
.vre-loop__phase {
  display:inline-block; padding:.22rem .65rem; border-radius:20px;
  border:1px solid; font-size:.6rem; font-weight:900; letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:.8rem;
}
.vre-loop__title { font-size:.95rem; font-weight:800; color:#fff; margin-bottom:.6rem; }
.vre-loop__desc  { font-size:.78rem; line-height:1.65; color:rgba(255,255,255,.5); margin:0; }
.vre-loop__arrow {
  display:flex; align-items:center; padding:0 .3rem; flex-shrink:0;
}
.vre-loop__arrow-line { width:40px; height:2px; border-radius:2px; }
.vre-loop__arrow-head {
  width:0; height:0;
  border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:8px solid;
}
.vre-loop__note {
  display:flex; align-items:center; gap:.8rem; justify-content:center;
  background:rgba(155,61,232,.1); border:1px solid rgba(155,61,232,.2);
  border-radius:12px; padding:1rem 1.5rem;
  font-size:.85rem; color:rgba(255,255,255,.6); text-align:center; max-width:700px; margin:0 auto;
}
.vre-loop__note i { color:#9b3de8; font-size:1rem; flex-shrink:0; }

/* ─────────────────────────────────────────────
   §4  KEY FEATURES GRID
   ───────────────────────────────────────────── */
.vre-features-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
}
.vre-feature-card {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:16px; padding:1.6rem; position:relative; overflow:hidden;
  transition:transform .25s,box-shadow .25s;
}
.vre-feature-card:hover { transform:translateY(-3px); box-shadow:0 14px 35px rgba(0,0,0,.4); }
.vre-feature-card__bar {
  position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--fc),transparent);
}
.vre-feature-card__header { display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; }
.vre-feature-card__num { font-size:.6rem; font-weight:900; color:rgba(255,255,255,.3); letter-spacing:.1em; }
.vre-feature-card__icon {
  width:38px; height:38px; border-radius:10px;
  background:var(--fc); display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.9rem; opacity:.9;
}
.vre-feature-card__tag {
  font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  color:var(--fc); margin-left:auto;
}
.vre-feature-card__title { font-size:1rem; font-weight:800; color:#fff; margin-bottom:.55rem; }
.vre-feature-card__desc  { font-size:.82rem; line-height:1.65; color:rgba(255,255,255,.55); margin:0; }

/* ─────────────────────────────────────────────
   §5  WHY IT MATTERS
   ───────────────────────────────────────────── */
.vre-why-split {
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center;
}
.vre-why-split__cards { display:flex; flex-direction:column; gap:1.2rem; }
.vre-why-card {
  display:flex; align-items:flex-start; gap:1rem;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:14px; padding:1.3rem; border-left:3px solid var(--wc);
  transition:transform .2s;
}
.vre-why-card:hover { transform:translateX(4px); }
.vre-why-card__icon {
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; flex-shrink:0;
}
.vre-why-card__title { font-size:.92rem; font-weight:800; color:#fff; margin-bottom:.35rem; }
.vre-why-card__desc  { font-size:.82rem; line-height:1.6; color:rgba(255,255,255,.55); margin:0; }
.vre-why-highlight {
  display:flex; align-items:flex-start; gap:1rem;
  background:rgba(107,33,232,.12); border:1px solid rgba(155,61,232,.25);
  border-radius:12px; padding:1.2rem 1.4rem; margin-top:1.2rem;
}
.vre-why-highlight i { color:#9b3de8; font-size:1.2rem; flex-shrink:0; margin-top:.1rem; }
.vre-why-highlight p { font-size:.9rem; line-height:1.65; color:rgba(255,255,255,.7); margin:0; }
.vre-why-highlight strong { color:#fff; }

/* ─────────────────────────────────────────────
   §6  PERFORMANCE IMPACT
   ───────────────────────────────────────────── */
.vre-section--impact { position:relative; overflow:hidden; padding:6rem 0; background:var(--navy-deep); }
.vre-impact__bg-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(0,200,232,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,200,232,.05) 1px,transparent 1px);
  background-size:48px 48px; pointer-events:none;
}
.vre-impact__glow {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:700px; height:400px; border-radius:50%;
  background:radial-gradient(ellipse,rgba(107,33,232,.15) 0%,transparent 70%); pointer-events:none;
}
.vre-impact-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.vre-impact-card {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:16px; padding:1.6rem; position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:.4rem;
  transition:transform .25s,box-shadow .25s;
}
.vre-impact-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.vre-impact-card__bar {
  position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--ic),transparent); margin-top:auto;
}
.vre-impact-card__icon {
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:.95rem; margin-bottom:.4rem;
}
.vre-impact-card__stat { font-size:2rem; font-weight:900; color:var(--ic); line-height:1; }
.vre-impact-card__stat-label { font-size:.75rem; font-weight:700; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.07em; }
.vre-impact-card__tag {
  display:inline-block; padding:.18rem .55rem; border-radius:20px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em;
  color:rgba(255,255,255,.45); margin:.3rem 0;
}
.vre-impact-card__desc { font-size:.8rem; line-height:1.65; color:rgba(255,255,255,.5); margin:0; }

/* ─────────────────────────────────────────────
   §7  CLOSING CTA
   ───────────────────────────────────────────── */
.vre-section--close { position:relative; overflow:hidden; padding:7rem 0; background:linear-gradient(160deg,#07071a 0%,#0d0b24 100%); }
.vre-close__bg-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(155,61,232,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(155,61,232,.06) 1px,transparent 1px);
  background-size:40px 40px; pointer-events:none;
}
.vre-close__glow-l {
  position:absolute; top:-20%; left:-10%; width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle,rgba(107,33,232,.2) 0%,transparent 70%); pointer-events:none;
}
.vre-close__glow-r {
  position:absolute; bottom:-20%; right:-5%; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,200,232,.15) 0%,transparent 70%); pointer-events:none;
}
.vre-close-inner { max-width:800px; margin:0 auto; text-align:center; }
.vre-close-inner__icon {
  width:72px; height:72px; border-radius:50%; margin:0 auto 1.8rem;
  background:rgba(155,61,232,.15); border:2px solid rgba(155,61,232,.35);
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; color:#9b3de8;
}
.vre-close-inner__title { font-size:clamp(1.6rem,3.2vw,2.4rem); font-weight:900; line-height:1.2; margin-bottom:1.2rem; }
.vre-close-inner__sub { font-size:.97rem; line-height:1.75; color:rgba(255,255,255,.55); max-width:580px; margin:0 auto 2.5rem; }
.vre-close-inner__btns { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }

/* ── Responsive ── */
@media (max-width:1100px) {
  .vre-core-split  { grid-template-columns:1fr; gap:2.5rem; }
  .vre-why-split   { grid-template-columns:1fr; gap:2.5rem; }
  .vre-features-grid { grid-template-columns:repeat(2,1fr); }
  .vre-impact-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px) {
  .vre-loop { flex-direction:column; align-items:center; gap:0; }
  .vre-loop__item { flex-direction:column; align-items:center; }
  .vre-loop__card { width:100%; max-width:400px; }
  .vre-loop__arrow { transform:rotate(90deg); padding:.3rem 0; }
}
@media (max-width:640px) {
  .vre-hero { padding:5rem 0 4rem; }
  .vre-section { padding:4rem 0; }
  .vre-container { padding:0 1.2rem; }
  .vre-hero__title { font-size:2rem; }
  .vre-features-grid { grid-template-columns:1fr; }
  .vre-impact-grid   { grid-template-columns:1fr; }
}

/* ============================================================
   CONTACT FORM PAGE  (/contact-form)
   ============================================================ */

/* Section wrapper */
.cf-section {
  min-height: 100vh;
  background: var(--bg-primary, #050a1a);
  display: flex;
  align-items: center;
  padding: 6rem 1.5rem 4rem;
}

.cf-container {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

/* Header */
.cf-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.cf-badge {
  display: inline-block;
  background: rgba(34,211,238,.12);
  color: #22d3ee;
  border: 1px solid rgba(34,211,238,.3);
  border-radius: 999px;
  padding: .3rem 1rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.cf-title {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 .75rem;
}

.cf-sub {
  color: rgba(255,255,255,.55);
  font-size: .95rem;
  line-height: 1.6;
  margin: 0;
}

/* Card */
.cf-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1.25rem;
  padding: 2.5rem 2rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 40px rgba(0,0,0,.4);
}

/* Form fields */
.cf-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cf-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.cf-label {
  font-size: .8rem;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cf-input {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .6rem;
  color: #fff;
  font-size: .95rem;
  font-family: inherit;
  padding: .75rem 1rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
  box-sizing: border-box;
}

.cf-input::placeholder { color: rgba(255,255,255,.3); }

.cf-input:focus {
  border-color: #22d3ee;
  box-shadow: 0 0 0 3px rgba(34,211,238,.15);
}

.cf-textarea {
  resize: vertical;
  min-height: 130px;
}

/* Error */
.cf-error {
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.3);
  color: #fca5a5;
  border-radius: .5rem;
  padding: .6rem .9rem;
  font-size: .85rem;
  margin: 0;
}

/* Submit button */
.cf-submit {
  background: linear-gradient(135deg, #0891b2, #4a1e9e);
  border: none;
  border-radius: .6rem;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  padding: .85rem 1rem;
  transition: opacity .2s, transform .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: .25rem;
}

.cf-submit:hover { opacity: .88; transform: translateY(-1px); }
.cf-submit:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Spinner */
.cf-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cf-spin .7s linear infinite;
  display: inline-block;
}

@keyframes cf-spin { to { transform: rotate(360deg); } }

/* Thank-you state */
.cf-thanks {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 0;
  gap: .75rem;
}

.cf-thanks__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0891b2, #4a1e9e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #fff;
  margin: 0 auto .5rem;
}

.cf-thanks__title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.cf-thanks__sub {
  color: rgba(255,255,255,.55);
  font-size: .95rem;
  line-height: 1.6;
  margin: 0;
}

.cf-thanks__link {
  color: #22d3ee;
  font-size: .9rem;
  text-decoration: none;
  font-weight: 600;
  margin-top: .5rem;
}

.cf-thanks__link:hover { text-decoration: underline; }

/* Site footer (minimal reuse) */
.site-footer {
  background: #020611;
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 1.5rem;
  text-align: center;
}

.footer-copy {
  color: rgba(255,255,255,.35);
  font-size: .8rem;
  margin: 0;
}


/* ============================================================
   BUSINESS PAGE v2  (/business)
   ============================================================ */

/* ── Hero ── */
.biz2-hero {
  background: #050a1a;
  padding: 7rem 1.5rem 4rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.biz2-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.biz2-breadcrumb { display:flex; gap:.4rem; align-items:center; margin-bottom:1.25rem; font-size:.8rem; }
.biz2-breadcrumb__item { color:rgba(255,255,255,.4); text-decoration:none; }
.biz2-breadcrumb__item--cur { color:rgba(255,255,255,.7); }
.biz2-breadcrumb__sep { color:rgba(255,255,255,.25); }
.biz2-badge {
  display:inline-block;
  background:rgba(34,211,238,.1);
  color:#22d3ee;
  border:1px solid rgba(34,211,238,.25);
  border-radius:999px;
  padding:.3rem 1rem;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:1.25rem;
}
.biz2-badge--purple { background:rgba(167,139,250,.1); color:#a78bfa; border-color:rgba(167,139,250,.25); }
.biz2-badge--teal   { background:rgba(52,211,153,.1);  color:#34d399; border-color:rgba(52,211,153,.25); }
.biz2-hero__headline {
  font-size: clamp(1.9rem,3.5vw,2.8rem);
  font-weight:800;
  color:#fff;
  line-height:1.18;
  margin:0 0 1rem;
}
.biz2-hero__grad {
  background: linear-gradient(135deg,#22d3ee,#a78bfa);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.biz2-hero__sub { color:rgba(255,255,255,.6); font-size:1rem; line-height:1.7; margin:0 0 1.5rem; max-width:480px; }
.biz2-hero__chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.75rem; }
.biz2-hero__chip {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  color:rgba(255,255,255,.7);
  font-size:.75rem;
  padding:.25rem .8rem;
}
.biz2-hero__btns { display:flex; gap:1rem; flex-wrap:wrap; }
.biz2-btn-primary {
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#0891b2,#4a1e9e);
  color:#fff;
  font-weight:700;
  font-size:.9rem;
  padding:.75rem 1.6rem;
  border-radius:.6rem;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  transition:opacity .2s,transform .15s;
}
.biz2-btn-primary:hover { opacity:.88; transform:translateY(-2px); }
.biz2-btn-primary--lg { padding:.9rem 2rem; font-size:1rem; }
.biz2-btn-primary__shimmer {
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.15) 50%,transparent 60%);
  animation:biz2-shimmer 2.5s infinite;
}
@keyframes biz2-shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(200%)} }
.biz2-btn-ghost {
  background:transparent;
  color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.2);
  font-weight:600;
  font-size:.9rem;
  padding:.75rem 1.6rem;
  border-radius:.6rem;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  transition:border-color .2s,color .2s,transform .15s;
}
.biz2-btn-ghost:hover { border-color:#22d3ee; color:#22d3ee; transform:translateY(-2px); }
.biz2-btn-ghost--lg { padding:.9rem 2rem; font-size:1rem; }

/* Hero – image placeholder (right side) */
.biz2-hero__visual { display:flex; align-items:center; justify-content:center; }
.biz2-hero__img-wrap {
  position:relative;
  width:100%;
  border-radius:1.25rem;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  aspect-ratio:16/10;
  background:#0d1424;
}
.biz2-hero__img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.biz2-hero__img-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,rgba(5,10,26,.35) 0%,transparent 60%);
  pointer-events:none;
}
.biz2-hero__hud {
  position:absolute;
  bottom:1rem;
  left:1rem;
  background:rgba(5,10,26,.8);
  backdrop-filter:blur(8px);
  border:1px solid rgba(34,211,238,.3);
  border-radius:.5rem;
  padding:.45rem .85rem;
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.75rem;
  color:#fff;
}
.biz2-hud__dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#22d3ee;
  animation:biz2-pulse 1.5s ease-in-out infinite;
}
@keyframes biz2-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }
.biz2-hud__label { color:rgba(255,255,255,.8); }

/* ── Shared section shell ── */
.biz2-section { padding:5rem 1.5rem; }
.biz2-container { max-width:1200px; margin:0 auto; }
.biz2-section__header { text-align:center; max-width:680px; margin:0 auto 3.5rem; }
.biz2-section__badge { margin-bottom:1rem; }
.biz2-section__title {
  font-size:clamp(1.6rem,2.8vw,2.2rem);
  font-weight:800;
  color:#fff;
  line-height:1.2;
  margin:0 0 1rem;
}
.biz2-section__sub { color:rgba(255,255,255,.55); font-size:.95rem; line-height:1.7; margin:0; }

/* ── §2 Partner grid ── */
.biz2-section--partners { background:#070d1f; }
.biz2-partner-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.5rem;
}
.biz2-partner-card {
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-top:3px solid var(--accent,#22d3ee);
  border-radius:1rem;
  padding:1.75rem;
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.biz2-partner-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.35); border-color:var(--accent,#22d3ee); }
.biz2-partner-card__icon {
  width:44px;
  height:44px;
  border-radius:.5rem;
  background:rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  color:var(--accent,#22d3ee);
  margin-bottom:1rem;
}
.biz2-partner-card__title { font-size:1rem; font-weight:700; color:#fff; margin:0 0 .6rem; }
.biz2-partner-card__desc  { font-size:.85rem; color:rgba(255,255,255,.55); line-height:1.6; margin:0 0 1rem; }
.biz2-partner-card__link  { font-size:.8rem; font-weight:600; color:var(--accent,#22d3ee); text-decoration:none; }
.biz2-partner-card__link:hover { text-decoration:underline; }

/* ── §3 Distributor – split layout ── */
.biz2-section--distributor { background:#050a1a; }
.biz2-split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
}
.biz2-split--rev { direction:rtl; }
.biz2-split--rev > * { direction:ltr; }
.biz2-benefit-list { list-style:none; padding:0; margin:1.5rem 0 0; display:flex; flex-direction:column; gap:.85rem; }
.biz2-benefit-list__item { display:flex; align-items:flex-start; gap:.75rem; color:rgba(255,255,255,.7); font-size:.9rem; line-height:1.5; }
.biz2-benefit-list__icon {
  width:28px;
  height:28px;
  min-width:28px;
  border-radius:.35rem;
  background:rgba(167,139,250,.12);
  color:#a78bfa;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.75rem;
  margin-top:.1rem;
}
.biz2-split__cards {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.biz2-metric-card {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:.9rem;
  padding:1.5rem 1.25rem;
  text-align:center;
  transition:border-color .2s,transform .2s;
}
.biz2-metric-card:hover { border-color:#a78bfa; transform:translateY(-3px); }
.biz2-metric-card__icon { font-size:1.4rem; color:#a78bfa; margin-bottom:.6rem; }
.biz2-metric-card__val  { font-size:1.15rem; font-weight:800; color:#fff; margin-bottom:.25rem; }
.biz2-metric-card__label{ font-size:.75rem; color:rgba(255,255,255,.45); }

/* ── §4 Revenue cards ── */
.biz2-section--revenue { background:#080f22; }
.biz2-revenue-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.5rem;
}
.biz2-revenue-card {
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:1rem;
  padding:1.75rem;
  transition:transform .2s,box-shadow .2s;
}
.biz2-revenue-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.3); }
.biz2-revenue-card__top { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.25rem; }
.biz2-revenue-card__num  { font-size:2rem; font-weight:900; color:rgba(255,255,255,.07); line-height:1; }
.biz2-revenue-card__tag  {
  background:rgba(52,211,153,.1);
  color:#34d399;
  border:1px solid rgba(52,211,153,.2);
  border-radius:999px;
  font-size:.68rem;
  font-weight:700;
  padding:.2rem .7rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.biz2-revenue-card__icon { font-size:1.5rem; color:#34d399; margin-bottom:.75rem; }
.biz2-revenue-card__title{ font-size:1.05rem; font-weight:700; color:#fff; margin:0 0 .6rem; }
.biz2-revenue-card__desc { font-size:.85rem; color:rgba(255,255,255,.5); line-height:1.6; margin:0; }

/* ── §5 Globe visual ── */
.biz2-section--global { background:#050a1a; }
.biz2-globe-visual { display:flex; align-items:center; justify-content:center; }
.biz2-globe {
  position:relative;
  width:320px;
  height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.biz2-globe__ring {
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(34,211,238,.15);
  animation:biz2-spin-slow linear infinite;
}
.biz2-globe__ring--1 { width:100%; height:100%; animation-duration:20s; }
.biz2-globe__ring--2 { width:72%;  height:72%;  animation-duration:15s; animation-direction:reverse; }
.biz2-globe__ring--3 { width:44%;  height:44%;  animation-duration:10s; }
@keyframes biz2-spin-slow { to { transform:rotate(360deg); } }
.biz2-globe__core {
  position:relative;
  z-index:2;
  font-size:3rem;
  color:#22d3ee;
  filter:drop-shadow(0 0 16px rgba(34,211,238,.5));
}
.biz2-globe__node {
  position:absolute;
  transform:translate(-50%,-50%);
  z-index:3;
}
.biz2-globe__node-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:#22d3ee;
  box-shadow:0 0 8px #22d3ee;
}
.biz2-globe__node-ring {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid rgba(34,211,238,.4);
  animation:biz2-pulse 2s ease-in-out infinite;
}
.biz2-globe__node-label {
  position:absolute;
  top:-22px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:.65rem;
  font-weight:600;
  color:#22d3ee;
  background:rgba(5,10,26,.85);
  padding:.15rem .45rem;
  border-radius:.3rem;
}
.biz2-region-tiles { display:flex; flex-direction:column; gap:.75rem; margin-top:1.75rem; }
.biz2-region-tile {
  display:flex;
  align-items:center;
  gap:1rem;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:.7rem;
  padding:.85rem 1rem;
}
.biz2-region-tile__flag  { font-size:1.5rem; }
.biz2-region-tile__name  { font-size:.9rem; font-weight:600; color:#fff; margin-bottom:.15rem; }
.biz2-region-tile__status{ font-size:.75rem; font-weight:600; }

/* ============================================================
   GEX — GLOBAL EXPANSION EXPLORER  (/business §5)
   ============================================================ */

/* ── Section shell ── */
.gex-section {
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#050a1a 0%,#070d1f 100%);
  padding:6rem 0 5rem;
}
.gex-section__bg-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(0,200,232,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,200,232,.04) 1px,transparent 1px);
  background-size:44px 44px; pointer-events:none;
}
.gex-section__glow-l {
  position:absolute; top:-5%; left:-8%; width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle,rgba(107,33,232,.18) 0%,transparent 68%); pointer-events:none;
}
.gex-section__glow-r {
  position:absolute; bottom:-5%; right:-5%; width:450px; height:450px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,200,232,.13) 0%,transparent 68%); pointer-events:none;
}
.gex-container { max-width:1240px; margin:0 auto; padding:0 2rem; }

/* ── Header ── */
.gex-header { text-align:center; margin-bottom:2.5rem; }
.gex-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.26rem .8rem; border-radius:20px; margin-bottom:1rem;
  background:rgba(0,200,232,.1); border:1px solid rgba(0,200,232,.3);
  color:#00c8e8; font-size:.65rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
.gex-header__title {
  font-size:clamp(2rem,4vw,3rem); font-weight:900; line-height:1.15; margin-bottom:.8rem;
}
.gex-grad {
  background:linear-gradient(135deg,#00c8e8,#9b3de8);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.gex-header__sub   { font-size:1.05rem; color:#00c8e8; font-weight:500; margin-bottom:.7rem; }
.gex-header__intro { font-size:.9rem; line-height:1.75; color:rgba(255,255,255,.55); max-width:660px; margin:0 auto; }

/* ── Summary stats strip ── */
.gex-stats {
  display:flex; justify-content:center; gap:0; margin-bottom:2.5rem;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:16px;
  overflow:hidden; max-width:600px; margin-left:auto; margin-right:auto;
}
.gex-stat {
  flex:1; padding:1.2rem 1.5rem; text-align:center;
}
.gex-stat--mid {
  border-left:1px solid rgba(255,255,255,.07);
  border-right:1px solid rgba(255,255,255,.07);
}
.gex-stat__val   { display:block; font-size:1.7rem; font-weight:900; color:#00c8e8; line-height:1; }
.gex-stat__label { display:block; font-size:.7rem; color:rgba(255,255,255,.45); text-transform:uppercase; letter-spacing:.08em; margin-top:.3rem; }

/* ── Explorer shell (map + info panel) ── */
.gex-explorer {
  display:grid; grid-template-columns:1fr 340px; gap:1.5rem; align-items:start;
}

/* ── Map panel ── */
.gex-map-panel {
  background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.08);
  border-radius:20px; overflow:hidden;
}
.gex-map-tabs {
  display:flex; gap:.5rem; padding:.8rem 1rem;
  background:rgba(0,0,0,.3); border-bottom:1px solid rgba(255,255,255,.07);
}
.gex-map-tab {
  display:flex; align-items:center; gap:.4rem;
  padding:.38rem .9rem; border-radius:20px; border:1px solid rgba(255,255,255,.12);
  background:transparent; color:rgba(255,255,255,.5);
  font-size:.75rem; font-weight:700; cursor:pointer;
  transition:all .2s;
}
.gex-map-tab:hover       { color:#fff; border-color:rgba(255,255,255,.3); }
.gex-map-tab--active     { background:rgba(0,200,232,.12); border-color:rgba(0,200,232,.35); color:#00c8e8; }

/* ── World SVG ── */
.gex-world-view { position:relative; }
.gex-svg        { width:100%; height:auto; display:block; cursor:crosshair; }

/* Country states */
.gex-country {
  cursor:pointer; transition:opacity .2s, filter .2s;
  opacity:.85;
}
.gex-country--active  { fill:#22d3ee; filter:drop-shadow(0 0 6px rgba(34,211,238,.55)); }
.gex-country--partner { fill:#a78bfa; filter:drop-shadow(0 0 6px rgba(167,139,250,.45)); }
.gex-country--planned { fill:#f59e0b; filter:drop-shadow(0 0 5px rgba(245,158,11,.4)); }
.gex-country:hover    { opacity:1;    filter:drop-shadow(0 0 12px currentColor) brightness(1.25); }
.gex-country--selected{ opacity:1;    filter:drop-shadow(0 0 14px currentColor) brightness(1.35) !important; stroke:#fff; stroke-width:1.5; }

.gex-region-label { fill:rgba(255,255,255,.12); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; text-anchor:middle; pointer-events:none; }

/* ── Legend ── */
.gex-legend {
  position:absolute; bottom:10px; left:12px;
  display:flex; gap:.9rem;
  background:rgba(5,10,26,.85); border:1px solid rgba(255,255,255,.1);
  border-radius:8px; padding:.45rem .8rem;
}
.gex-legend__item { display:flex; align-items:center; gap:.35rem; font-size:.68rem; color:rgba(255,255,255,.6); }
.gex-legend__dot  { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.gex-legend__dot--active  { background:#22d3ee; box-shadow:0 0 6px rgba(34,211,238,.7); }
.gex-legend__dot--partner { background:#a78bfa; box-shadow:0 0 6px rgba(167,139,250,.7); }
.gex-legend__dot--planned { background:#f59e0b; box-shadow:0 0 6px rgba(245,158,11,.6); }

/* ── Country drill-down view ── */
.gex-country-view  { padding:1rem; }
.gex-country-header {
  display:flex; align-items:center; gap:1rem;
  background:rgba(255,255,255,.04); border-radius:12px;
  padding:1rem 1.2rem; margin-bottom:1rem;
}
.gex-ch-flag   { font-size:2rem; }
.gex-ch-name   { font-size:1.1rem; font-weight:800; color:#fff; }
.gex-ch-summary{ font-size:.78rem; color:rgba(255,255,255,.5); margin-top:.2rem; }

/* Status pills */
.gex-pill {
  display:inline-block; padding:.18rem .55rem; border-radius:20px; border:1px solid;
  font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em;
  flex-shrink:0;
}
.gex-pill--active  { color:#22d3ee; background:rgba(34,211,238,.1); border-color:rgba(34,211,238,.3); }
.gex-pill--partner { color:#a78bfa; background:rgba(167,139,250,.1); border-color:rgba(167,139,250,.3); }
.gex-pill--planned { color:#f59e0b; background:rgba(245,158,11,.1);  border-color:rgba(245,158,11,.3); }

/* City map */
.gex-cmap-bar {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:.8rem; padding:0 .2rem;
}
.gex-cmap-bar__label  { font-size:.78rem; font-weight:700; color:rgba(255,255,255,.6); }
.gex-cmap-bar__counts { display:flex; gap:.8rem; font-size:.72rem; font-weight:700; }
.gex-cmap-cities { display:flex; flex-direction:column; gap:.5rem; }
.gex-city-btn {
  display:flex; align-items:center; gap:.7rem;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:10px; padding:.65rem 1rem; cursor:pointer;
  transition:background .2s, border-color .2s, transform .15s;
  border-left:3px solid var(--cms, rgba(255,255,255,.1));
}
.gex-city-btn:hover        { background:rgba(255,255,255,.07); transform:translateX(3px); }
.gex-city-btn--active      { background:rgba(0,200,232,.08); border-color:rgba(0,200,232,.3); }
.gex-city-btn__dot {
  width:8px; height:8px; border-radius:50%; background:var(--cms, #fff);
  box-shadow:0 0 8px var(--cms, rgba(255,255,255,.3)); flex-shrink:0;
}
.gex-city-btn__name { font-size:.85rem; font-weight:700; color:#fff; flex:1; }

/* ── Info panel ── */
.gex-info-panel {
  background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.08);
  border-radius:20px; padding:1.4rem; min-height:400px;
  display:flex; flex-direction:column;
}
.gex-info-intro {
  text-align:center; padding:2rem 1rem; display:flex; flex-direction:column;
  align-items:center; gap:1rem; color:rgba(255,255,255,.5); font-size:.88rem; line-height:1.65;
}
.gex-info-intro__icon { font-size:2.5rem; color:rgba(0,200,232,.4); }

/* Expansion summary */
.gex-expansion-summary {
  background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.07);
  border-radius:12px; padding:1rem; margin-bottom:1.2rem;
}
.gex-expansion-summary__title {
  font-size:.72rem; font-weight:800; color:rgba(255,255,255,.5);
  text-transform:uppercase; letter-spacing:.09em; margin-bottom:.8rem;
  display:flex; align-items:center; gap:.4rem;
}
.gex-expansion-summary__title i { color:#a78bfa; }
.gex-exp-row { display:flex; align-items:center; gap:.75rem; padding:.55rem 0; border-bottom:1px solid rgba(255,255,255,.05); }
.gex-exp-row:last-child { border-bottom:none; }
.gex-exp-row__icon {
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; flex-shrink:0;
}
.gex-exp-row__body { display:flex; flex-direction:column; gap:.15rem; }
.gex-exp-row__label { font-size:.78rem; font-weight:700; color:#fff; }
.gex-exp-row__val   { font-size:.7rem; color:rgba(255,255,255,.45); }

/* Country list */
.gex-country-list { }
.gex-country-list__title {
  font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  color:rgba(255,255,255,.35); margin-bottom:.6rem; padding:0 .2rem;
}
.gex-clist-item {
  display:flex; align-items:center; gap:.75rem;
  padding:.65rem .8rem; border-radius:10px; cursor:pointer;
  transition:background .2s, transform .15s;
}
.gex-clist-item:hover { background:rgba(255,255,255,.06); transform:translateX(3px); }
.gex-clist-item__flag   { font-size:1.3rem; flex-shrink:0; }
.gex-clist-item__body   { display:flex; flex-direction:column; gap:.12rem; flex:1; }
.gex-clist-item__name   { font-size:.85rem; font-weight:700; color:#fff; }
.gex-clist-item__status { font-size:.7rem; font-weight:600; }
.gex-clist-item__arrow  { color:rgba(255,255,255,.25); font-size:.7rem; }

/* Country detail panel */
.gex-cd-head  { display:flex; align-items:center; gap:.8rem; margin-bottom:1.2rem; }
.gex-cd-flag  { font-size:2rem; }
.gex-cd-name  { font-size:1.05rem; font-weight:800; color:#fff; }
.gex-cd-sum   { font-size:.75rem; color:rgba(255,255,255,.5); margin-top:.2rem; }
.gex-cd-counts {
  display:flex; gap:0; background:rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.07); border-radius:12px;
  overflow:hidden; margin-bottom:1.2rem;
}
.gex-cd-count { flex:1; text-align:center; padding:.8rem .5rem; }
.gex-cd-count + .gex-cd-count { border-left:1px solid rgba(255,255,255,.06); }
.gex-cd-count__val   { display:block; font-size:1.4rem; font-weight:900; color:#fff; }
.gex-cd-count__label { display:block; font-size:.62rem; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.07em; margin-top:.2rem; }
.gex-cd-cities-label { font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.35); margin-bottom:.6rem; }
.gex-cd-city {
  display:flex; align-items:center; gap:.7rem;
  padding:.6rem .8rem; border-radius:10px; cursor:pointer;
  border-left:2px solid var(--cdc, rgba(255,255,255,.1));
  transition:background .2s, transform .15s;
}
.gex-cd-city:hover { background:rgba(255,255,255,.06); transform:translateX(3px); }
.gex-cd-city i { font-size:.8rem; flex-shrink:0; }
.gex-cd-city span { font-size:.85rem; font-weight:700; color:#fff; flex:1; }

/* Back button */
.gex-back-btn {
  display:inline-flex; align-items:center; gap:.45rem;
  background:transparent; border:1px solid rgba(255,255,255,.12);
  border-radius:20px; padding:.35rem .85rem;
  color:rgba(255,255,255,.55); font-size:.75rem; font-weight:700;
  cursor:pointer; margin-bottom:1.2rem; transition:all .2s;
}
.gex-back-btn:hover { color:#fff; border-color:rgba(255,255,255,.35); }

/* Center detail card */
.gcc-header    { margin-bottom:.5rem; }
.gcc-status    {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.22rem .65rem; border-radius:20px; border:1px solid;
  font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
}
.gcc-status__dot { width:7px; height:7px; border-radius:50%; }
.gcc-name  { font-size:1.05rem; font-weight:800; color:#fff; margin:.6rem 0 .2rem; line-height:1.2; }
.gcc-city  { font-size:.8rem; color:rgba(255,255,255,.5); margin-bottom:1rem; }
.gcc-fields { display:flex; flex-direction:column; gap:.55rem; margin-bottom:1.2rem; }
.gcc-field {
  display:flex; align-items:flex-start; gap:.6rem;
  font-size:.82rem; color:rgba(255,255,255,.65);
}
.gcc-field i { color:#9b3de8; font-size:.8rem; flex-shrink:0; margin-top:.1rem; }
.gcc-field a  { color:#00c8e8; text-decoration:none; }
.gcc-field a:hover { text-decoration:underline; }
.gcc-field--tbc { opacity:.5; }
.gcc-actions { display:flex; flex-wrap:wrap; gap:.6rem; }
.gcc-btn {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem 1.1rem; border-radius:20px; font-size:.78rem; font-weight:700;
  text-decoration:none; transition:all .2s; cursor:pointer;
}
.gcc-btn--primary {
  background:linear-gradient(135deg,#6b21e8,#9b3de8); color:#fff;
  box-shadow:0 4px 14px rgba(107,33,232,.4);
}
.gcc-btn--primary:hover { box-shadow:0 6px 20px rgba(107,33,232,.55); transform:translateY(-1px); }
.gcc-btn--ghost { border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.7); }
.gcc-btn--ghost:hover { border-color:rgba(255,255,255,.4); color:#fff; }
.gcc-coming {
  font-size:.82rem; color:rgba(255,255,255,.45);
  display:flex; align-items:center; gap:.5rem;
  background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.2);
  border-radius:10px; padding:.7rem 1rem;
}
.gcc-coming i { color:#f59e0b; }
.gcc-coming a { color:#f59e0b; }

/* ── Responsive ── */
@media (max-width:1024px) {
  .gex-explorer { grid-template-columns:1fr; }
  .gex-info-panel { min-height:unset; }
}
@media (max-width:640px) {
  .gex-section  { padding:4rem 0; }
  .gex-container { padding:0 1.1rem; }
  .gex-stats    { flex-direction:column; max-width:100%; }
  .gex-stat--mid { border:none; border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07); }
}

/* ── §6 CTA ── */
.biz2-cta {
  position:relative;
  background:#04071a;
  border-top:1px solid rgba(255,255,255,.06);
  padding:6rem 1.5rem;
  text-align:center;
  overflow:hidden;
}
.biz2-cta__bg-grid {
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(34,211,238,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.04) 1px,transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
}
.biz2-cta__glow-l,.biz2-cta__glow-r {
  position:absolute;
  width:500px;
  height:500px;
  border-radius:50%;
  filter:blur(120px);
  pointer-events:none;
}
.biz2-cta__glow-l { background:rgba(8,145,178,.18); top:-100px; left:-100px; }
.biz2-cta__glow-r { background:rgba(74,30,158,.2);  bottom:-100px; right:-100px; }
.biz2-cta__content { position:relative; z-index:1; max-width:720px; margin:0 auto; }
.biz2-cta__title {
  font-size:clamp(1.8rem,3.5vw,2.6rem);
  font-weight:800;
  color:#fff;
  margin:.75rem 0 1rem;
  line-height:1.2;
}
.biz2-cta__sub { color:rgba(255,255,255,.55); font-size:1rem; line-height:1.7; margin:0 0 2.25rem; }
.biz2-cta__btns { display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; margin-bottom:2.5rem; }
.biz2-cta__trust { display:flex; justify-content:center; flex-wrap:wrap; gap:1.5rem; }
.biz2-cta__trust-item { display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:rgba(255,255,255,.4); }
.biz2-cta__trust-item i { color:#22d3ee; }

/* ── Responsive ── */
@media(max-width:900px){
  .biz2-hero__inner,
  .biz2-split { grid-template-columns:1fr; gap:2.5rem; }
  .biz2-split--rev { direction:ltr; }
  .biz2-hero__visual { order:-1; }
  .biz2-globe { width:260px; height:260px; }
}
@media(max-width:600px){
  .biz2-split__cards { grid-template-columns:1fr 1fr; }
  .biz2-cta__btns { flex-direction:column; align-items:center; }
}


/* ============================================================
   COMPANY MAIN PAGE v2  (/company)
   ============================================================ */

/* ── Hero ── */
.co2-hero {
  background:#050a1a;
  padding:7rem 1.5rem 4rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.co2-hero__inner {
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
}
.co2-breadcrumb { display:flex; gap:.4rem; align-items:center; margin-bottom:1.25rem; font-size:.8rem; }
.co2-breadcrumb__item { color:rgba(255,255,255,.4); text-decoration:none; }
.co2-breadcrumb__item--cur { color:rgba(255,255,255,.7); }
.co2-breadcrumb__sep { color:rgba(255,255,255,.25); }

.co2-badge {
  display:inline-block;
  background:rgba(34,211,238,.1);
  color:#22d3ee;
  border:1px solid rgba(34,211,238,.25);
  border-radius:999px;
  padding:.3rem 1rem;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:1.25rem;
}
.co2-badge--purple { background:rgba(167,139,250,.1); color:#a78bfa; border-color:rgba(167,139,250,.25); }
.co2-badge--teal   { background:rgba(52,211,153,.1);  color:#34d399; border-color:rgba(52,211,153,.25); }

.co2-hero__headline {
  font-size:clamp(2rem,3.8vw,3rem);
  font-weight:800;
  color:#fff;
  line-height:1.15;
  margin:0 0 1rem;
}
.co2-hero__grad {
  background:linear-gradient(135deg,#22d3ee,#a78bfa);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.co2-hero__sub {
  color:rgba(255,255,255,.6);
  font-size:1rem;
  line-height:1.7;
  margin:0 0 1.5rem;
  max-width:480px;
}
.co2-hero__pills { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.75rem; }
.co2-hero__pill {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  color:rgba(255,255,255,.7);
  font-size:.75rem;
  padding:.25rem .85rem;
}
.co2-hero__btns { display:flex; gap:1rem; flex-wrap:wrap; }

.co2-btn-primary {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#0891b2,#4a1e9e);
  color:#fff; font-weight:700; font-size:.9rem;
  padding:.75rem 1.6rem; border-radius:.6rem;
  text-decoration:none; display:inline-flex; align-items:center; gap:.5rem;
  transition:opacity .2s,transform .15s;
}
.co2-btn-primary:hover { opacity:.88; transform:translateY(-2px); }
.co2-btn-primary--lg { padding:.9rem 2rem; font-size:1rem; }
.co2-btn-primary__shimmer {
  position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.15) 50%,transparent 60%);
  animation:co2-shimmer 2.5s infinite;
}
@keyframes co2-shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(200%)} }

.co2-btn-ghost {
  background:transparent; color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.2);
  font-weight:600; font-size:.9rem;
  padding:.75rem 1.6rem; border-radius:.6rem;
  text-decoration:none; display:inline-flex; align-items:center; gap:.5rem;
  transition:border-color .2s,color .2s,transform .15s;
}
.co2-btn-ghost:hover { border-color:#22d3ee; color:#22d3ee; transform:translateY(-2px); }
.co2-btn-ghost--lg { padding:.9rem 2rem; font-size:1rem; }

/* Hero image */
.co2-hero__visual { display:flex; align-items:center; justify-content:center; }
.co2-hero__img-wrap {
  position:relative; width:100%;
  border-radius:1.25rem; overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  aspect-ratio:16/10; background:#0d1424;
}
.co2-hero__img { width:100%; height:100%; object-fit:cover; display:block; }
.co2-hero__img-overlay {
  position:absolute; inset:0;
  background:linear-gradient(120deg,rgba(5,10,26,.3) 0%,transparent 60%);
  pointer-events:none;
}
.co2-hero__hud {
  position:absolute; bottom:1rem; left:1rem;
  background:rgba(5,10,26,.8); backdrop-filter:blur(8px);
  border:1px solid rgba(34,211,238,.3); border-radius:.5rem;
  padding:.45rem .85rem; display:flex; align-items:center; gap:.5rem;
  font-size:.75rem; color:#fff;
}
.co2-hud__dot {
  width:8px; height:8px; border-radius:50%; background:#22d3ee;
  animation:co2-pulse 1.5s ease-in-out infinite;
}
@keyframes co2-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }

/* ── Shared section shell ── */
.co2-section { padding:5rem 1.5rem; }
.co2-container { max-width:1200px; margin:0 auto; }
.co2-section__header { text-align:center; max-width:680px; margin:0 auto 3.5rem; }
.co2-section__title {
  font-size:clamp(1.6rem,2.8vw,2.2rem);
  font-weight:800; color:#fff; line-height:1.2; margin:0 0 1rem;
}
.co2-section__sub { color:rgba(255,255,255,.55); font-size:.95rem; line-height:1.7; margin:0; }
.co2-body-text { color:rgba(255,255,255,.65); font-size:.95rem; line-height:1.75; margin:0 0 1.1rem; }
.co2-text-link { color:#22d3ee; font-size:.9rem; font-weight:600; text-decoration:none; }
.co2-text-link:hover { text-decoration:underline; }

/* ── §2 About split ── */
.co2-section--about { background:#070d1f; }
.co2-about-split {
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start;
}
.co2-pillar-card {
  display:flex; align-items:flex-start; gap:1rem;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:.85rem; padding:1.25rem; margin-bottom:1rem;
  transition:border-color .2s,transform .2s;
}
.co2-pillar-card:hover { border-color:#22d3ee; transform:translateX(4px); }
.co2-pillar-card__icon {
  width:40px; height:40px; min-width:40px; border-radius:.5rem;
  background:rgba(34,211,238,.1); color:#22d3ee;
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.co2-pillar-card__title { font-size:.9rem; font-weight:700; color:#fff; margin-bottom:.3rem; }
.co2-pillar-card__desc  { font-size:.8rem; color:rgba(255,255,255,.5); line-height:1.5; }

/* ── §3 Vision & Mission ── */
.co2-section--vm { background:#050a1a; }
.co2-vm-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.co2-vm-card {
  border-radius:1.1rem; padding:2rem;
  border:1px solid rgba(255,255,255,.08);
  transition:transform .2s;
}
.co2-vm-card:hover { transform:translateY(-4px); }
.co2-vm-card--vision  { background:rgba(34,211,238,.05);  border-top:3px solid #22d3ee; }
.co2-vm-card--mission { background:rgba(167,139,250,.05); border-top:3px solid #a78bfa; }
.co2-vm-card__label {
  font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:1rem; display:flex; align-items:center; gap:.5rem;
}
.co2-vm-card--vision  .co2-vm-card__label { color:#22d3ee; }
.co2-vm-card--mission .co2-vm-card__label { color:#a78bfa; }
.co2-vm-card__headline {
  font-size:1rem; font-weight:600; color:rgba(255,255,255,.9);
  line-height:1.6; font-style:italic; margin:0 0 1.25rem;
}
.co2-vm-card__points {
  list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem;
}
.co2-vm-card__points li {
  font-size:.85rem; color:rgba(255,255,255,.55); padding-left:1.1rem; position:relative;
}
.co2-vm-card__points li::before {
  content:'›'; position:absolute; left:0;
  color:#22d3ee; font-weight:700;
}
.co2-vm-card--mission .co2-vm-card__points li::before { color:#a78bfa; }

/* ── §4 Why built ── */
.co2-section--why { background:#080f22; }
.co2-why-inner {
  display:grid; grid-template-columns:1.2fr 1fr; gap:4rem; align-items:start;
}
.co2-stat-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:.9rem; padding:1.25rem 1.5rem; margin-bottom:1rem;
  transition:border-color .2s,transform .2s;
}
.co2-stat-card:hover { border-color:#22d3ee; transform:translateX(-4px); }
.co2-stat-card__val  { font-size:1.8rem; font-weight:900; color:#22d3ee; line-height:1; margin-bottom:.35rem; }
.co2-stat-card__desc { font-size:.8rem; color:rgba(255,255,255,.5); line-height:1.4; }

/* ── §5 Global audience ── */
.co2-section--global { background:#070d1f; }
.co2-audience-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.5rem;
}
.co2-audience-card {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-top:3px solid var(--acc,#22d3ee);
  border-radius:1rem; padding:1.75rem;
  transition:transform .2s,box-shadow .2s;
}
.co2-audience-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.3); }
.co2-audience-card__icon {
  width:44px; height:44px; border-radius:.5rem;
  background:rgba(255,255,255,.06); color:var(--acc,#22d3ee);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; margin-bottom:1rem;
}
.co2-audience-card__title { font-size:1rem; font-weight:700; color:#fff; margin:0 0 .6rem; }
.co2-audience-card__desc  { font-size:.85rem; color:rgba(255,255,255,.5); line-height:1.6; margin:0 0 1rem; }
.co2-audience-card__link  { font-size:.8rem; font-weight:600; color:var(--acc,#22d3ee); text-decoration:none; }
.co2-audience-card__link:hover { text-decoration:underline; }

/* ── §6 CTA ── */
.co2-cta {
  position:relative; background:#04071a;
  border-top:1px solid rgba(255,255,255,.06);
  padding:6rem 1.5rem; text-align:center; overflow:hidden;
}
.co2-cta__bg-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(34,211,238,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.04) 1px,transparent 1px);
  background-size:40px 40px; pointer-events:none;
}
.co2-cta__glow-l,.co2-cta__glow-r {
  position:absolute; width:500px; height:500px;
  border-radius:50%; filter:blur(120px); pointer-events:none;
}
.co2-cta__glow-l { background:rgba(8,145,178,.18); top:-100px; left:-100px; }
.co2-cta__glow-r { background:rgba(74,30,158,.2);  bottom:-100px; right:-100px; }
.co2-cta__content { position:relative; z-index:1; max-width:720px; margin:0 auto; }
.co2-cta__title {
  font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:800; color:#fff;
  margin:.75rem 0 1rem; line-height:1.2;
}
.co2-cta__sub  { color:rgba(255,255,255,.55); font-size:1rem; line-height:1.7; margin:0 0 2.25rem; }
.co2-cta__btns { display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; }

/* ── Responsive ── */
@media(max-width:900px){
  .co2-hero__inner,
  .co2-about-split,
  .co2-vm-grid,
  .co2-why-inner { grid-template-columns:1fr; gap:2.5rem; }
  .co2-hero__visual { order:-1; }
}
@media(max-width:600px){
  .co2-cta__btns { flex-direction:column; align-items:center; }
}


/* ============================================================
   NEUROSCIENCE PAGE  (/science/neuroscience)
   ============================================================ */

.ns-page { background:#050a1a; color:#fff; font-family:inherit; }

/* ── Shared utilities ── */
.ns-container { max-width:1200px; margin:0 auto; padding:0 1.5rem; }
.ns-grad {
  background:linear-gradient(135deg,#22d3ee,#a78bfa);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.ns-eyebrow {
  display:inline-block; background:rgba(34,211,238,.1); color:#22d3ee;
  border:1px solid rgba(34,211,238,.25); border-radius:999px;
  padding:.3rem 1rem; font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:1.25rem;
}
.ns-badge {
  display:inline-block; border-radius:999px;
  padding:.3rem 1rem; font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:1rem;
}
.ns-badge--cyan   { background:rgba(34,211,238,.1);  color:#22d3ee; border:1px solid rgba(34,211,238,.25); }
.ns-badge--purple { background:rgba(167,139,250,.1); color:#a78bfa; border:1px solid rgba(167,139,250,.25); }
.ns-badge--teal   { background:rgba(52,211,153,.1);  color:#34d399; border:1px solid rgba(52,211,153,.25); }

/* ── Page top ── */
.ns-top {
  position:relative; overflow:hidden;
  background:#050a1a; padding:6rem 1.5rem 4rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.ns-top__bg-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(34,211,238,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(34,211,238,.04) 1px,transparent 1px);
  background-size:40px 40px; pointer-events:none;
}
.ns-top__glow-l { position:absolute; width:500px; height:500px; border-radius:50%; filter:blur(120px); background:rgba(8,145,178,.18); top:-150px; left:-100px; pointer-events:none; }
.ns-top__glow-r { position:absolute; width:500px; height:500px; border-radius:50%; filter:blur(120px); background:rgba(74,30,158,.2); bottom:-150px; right:-100px; pointer-events:none; }
.ns-top .ns-container { position:relative; z-index:1; text-align:center; }
.ns-breadcrumb { display:flex; justify-content:center; gap:.4rem; align-items:center; margin-bottom:1.5rem; font-size:.8rem; }
.ns-breadcrumb__item { color:rgba(255,255,255,.4); text-decoration:none; }
.ns-breadcrumb__item:hover { color:#22d3ee; }
.ns-breadcrumb__cur { color:rgba(255,255,255,.7); }
.ns-breadcrumb__sep { color:rgba(255,255,255,.25); }
.ns-top__title { font-size:clamp(2rem,4vw,3.2rem); font-weight:800; color:#fff; line-height:1.15; margin:.5rem 0 1rem; }
.ns-top__sub { color:rgba(255,255,255,.6); font-size:1rem; line-height:1.7; max-width:600px; margin:0 auto; }

/* ── Shared section ── */
.ns-section { padding:5rem 1.5rem; }
.ns-section--dark { background:#050a1a; }
.ns-section--mid  { background:#070d1f; }
.ns-section__header { text-align:center; max-width:700px; margin:0 auto 3rem; }
.ns-section__title { font-size:clamp(1.6rem,2.8vw,2.2rem); font-weight:800; color:#fff; line-height:1.2; margin:0 0 .75rem; }
.ns-section__sub   { color:rgba(255,255,255,.55); font-size:.95rem; line-height:1.7; margin:0; }

/* ── S1 Quote ── */
.ns-section--quote { background:#070d1f; padding:4rem 1.5rem; }
.ns-quote-split {
  display:grid; grid-template-columns:280px 1fr; gap:3.5rem; align-items:start;
}
.ns-quote-person {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:1.1rem; padding:2rem; text-align:center;
}
.ns-quote-person__avatar {
  width:72px; height:72px; border-radius:50%; margin:0 auto 1rem;
  background:linear-gradient(135deg,#0891b2,#4a1e9e);
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; color:#fff;
}
.ns-quote-person__name  { font-size:1.1rem; font-weight:800; color:#fff; margin-bottom:.3rem; }
.ns-quote-person__title { font-size:.82rem; color:#22d3ee; font-weight:600; margin-bottom:.2rem; }
.ns-quote-person__sub   { font-size:.78rem; color:rgba(255,255,255,.45); margin-bottom:1rem; }
.ns-quote-person__tags  { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; }
.ns-quote-person__tags span {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:999px; font-size:.68rem; padding:.15rem .55rem; color:rgba(255,255,255,.6);
}
.ns-quote-right { display:flex; flex-direction:column; gap:1.5rem; }
.ns-quote-mark { font-size:6rem; line-height:.6; color:rgba(34,211,238,.25); font-family:Georgia,serif; }
.ns-quote-text {
  font-size:1.3rem; font-weight:600; color:rgba(255,255,255,.9);
  line-height:1.7; font-style:italic; margin:0;
  border-left:3px solid #22d3ee; padding-left:1.5rem;
}
.ns-quote-timeline {
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:.85rem; padding:1.25rem 1.5rem; margin-top:.5rem;
}
.ns-qt-item { flex:1; min-width:120px; }
.ns-qt-item__label { font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.3rem; }
.ns-qt-item--past   .ns-qt-item__label { color:rgba(255,255,255,.4); }
.ns-qt-item--present .ns-qt-item__label { color:#22d3ee; }
.ns-qt-item--future .ns-qt-item__label { color:#a78bfa; }
.ns-qt-item__text { font-size:.85rem; color:rgba(255,255,255,.7); line-height:1.4; }
.ns-qt-arrow { color:rgba(255,255,255,.25); font-size:.9rem; }

/* ── S2 Scientific foundations ── */
.ns-found-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.5rem;
}
.ns-found-card {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-top:3px solid var(--fc,#22d3ee); border-radius:1rem; padding:1.75rem;
  transition:transform .2s,box-shadow .2s;
}
.ns-found-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.3); }
.ns-found-card__icon { font-size:1.5rem; color:var(--fc,#22d3ee); margin-bottom:.85rem; }
.ns-found-card__title { font-size:1rem; font-weight:700; color:#fff; margin:0 0 .5rem; }
.ns-found-card__desc  { font-size:.85rem; color:rgba(255,255,255,.55); line-height:1.6; margin:0; }

/* ── S3 Neural optimization ── */
.ns-neural-split {
  display:grid; grid-template-columns:1fr auto 1fr; gap:2.5rem; align-items:center;
}
.ns-neural-col__label {
  font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#22d3ee; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem;
}
.ns-neural-col--mech .ns-neural-col__label { color:#a78bfa; }
.ns-neural-item {
  display:flex; align-items:center; gap:.75rem;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:.6rem; padding:.75rem 1rem; margin-bottom:.6rem;
  font-size:.88rem; color:rgba(255,255,255,.75);
}
.ns-neural-item__dot {
  width:8px; height:8px; min-width:8px; border-radius:50%; background:#22d3ee;
}
.ns-neural-col__text { color:rgba(255,255,255,.65); font-size:.88rem; line-height:1.6; margin-bottom:.75rem; }
.ns-neural-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(167,139,250,.1); color:#a78bfa; border:1px solid rgba(167,139,250,.25);
  border-radius:.5rem; padding:.5rem 1rem; font-size:.8rem; font-weight:700;
}
/* neural pathway center visual */
.ns-neural-pathway {
  display:flex; flex-direction:column; align-items:center; gap:0;
}
.ns-pathway-node {
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:.75rem; padding:1rem 1.25rem; min-width:100px; text-align:center;
  font-size:.75rem; font-weight:600; color:rgba(255,255,255,.8);
}
.ns-pathway-node i { font-size:1.4rem; }
.ns-pathway-node--brain  i { color:#22d3ee; }
.ns-pathway-node--spine  i { color:#a78bfa; }
.ns-pathway-node--muscle i { color:#34d399; }
.ns-pathway-line {
  width:2px; height:32px; background:linear-gradient(180deg,rgba(34,211,238,.4),rgba(167,139,250,.4));
}

/* ── S4 Banner ── */
.ns-banner {
  background:linear-gradient(135deg,rgba(8,145,178,.15),rgba(74,30,158,.2));
  border:1px solid rgba(34,211,238,.2); border-radius:1.25rem;
  padding:2.25rem 2rem; margin:0;
}
.ns-banner--revolution { margin:0 1.5rem; border-radius:1.25rem; }
.ns-banner--motor { }
.ns-banner__inner { display:flex; align-items:flex-start; gap:1.5rem; }
.ns-banner__icon { font-size:2rem; color:#22d3ee; padding-top:.2rem; flex-shrink:0; }
.ns-banner__pre { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#22d3ee; margin-bottom:.5rem; }
.ns-banner__text { color:rgba(255,255,255,.65); font-size:.95rem; line-height:1.6; margin:0 0 .5rem; }
.ns-banner__highlight { color:#fff; font-size:1.05rem; font-weight:600; line-height:1.6; margin:0; }

/* ── S5 Millisecond model ── */
.ns-ms-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-bottom:2rem; }
.ns-ms-card {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:1rem; padding:1.75rem; position:relative; overflow:hidden;
  transition:transform .2s,box-shadow .2s;
}
.ns-ms-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.3); }
.ns-ms-card__timing {
  font-size:1.8rem; font-weight:900; color:var(--mc,#22d3ee); line-height:1;
  margin-bottom:.85rem;
}
.ns-ms-card__icon { font-size:1.2rem; color:var(--mc,#22d3ee); margin-bottom:.75rem; }
.ns-ms-card__phase { font-size:1rem; font-weight:700; color:#fff; margin:0 0 .85rem; }
.ns-ms-card__list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.45rem; }
.ns-ms-card__list li {
  font-size:.83rem; color:rgba(255,255,255,.55); padding-left:1rem; position:relative;
}
.ns-ms-card__list li::before { content:'›'; position:absolute; left:0; color:var(--mc,#22d3ee); }
.ns-ms-total {
  background:linear-gradient(135deg,rgba(8,145,178,.12),rgba(74,30,158,.15));
  border:1px solid rgba(34,211,238,.2); border-radius:1rem;
  padding:1.75rem 2rem; text-align:center;
}
.ns-ms-total__val   { font-size:2.5rem; font-weight:900; color:#22d3ee; line-height:1; margin-bottom:.4rem; }
.ns-ms-total__label { font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:.75rem; }
.ns-ms-total__note  { font-size:.9rem; color:rgba(255,255,255,.65); line-height:1.6; }

/* ── S6 Brain-muscle communication ── */
.ns-bmc-split { display:grid; grid-template-columns:1fr 1.2fr; gap:3.5rem; align-items:start; }
.ns-bmc-visual {
  /* stretch to match the right column */
  display: flex;
  flex-direction: column;
  min-height: 340px;
  height: 100%;
}
.ns-bmc-visual .ns-bmc-img-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.ns-bmc-visual .ns-bmc-img-wrap picture {
  flex: 1;
  display: block;
}
.ns-placeholder {
  background:rgba(255,255,255,.03); border:2px dashed rgba(255,255,255,.15);
  border-radius:1.1rem; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:2.5rem;
}
.ns-placeholder--tall { min-height:320px; }
.ns-placeholder--video { min-height:280px; }
.ns-placeholder__icon { font-size:2.5rem; color:rgba(255,255,255,.2); margin-bottom:.85rem; }
.ns-placeholder__label { font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:.35rem; }
.ns-placeholder__sub { font-size:.78rem; color:rgba(255,255,255,.25); }
.ns-bmc-steps { display:flex; flex-direction:column; gap:1rem; }
.ns-bmc-step {
  display:flex; gap:1rem; align-items:flex-start;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-left:3px solid var(--sc,#22d3ee); border-radius:.75rem; padding:1.1rem 1.25rem;
  transition:transform .15s,box-shadow .15s;
}
.ns-bmc-step:hover { transform:translateX(4px); box-shadow:0 4px 20px rgba(0,0,0,.2); }
.ns-bmc-step__num {
  width:28px; height:28px; min-width:28px; border-radius:50%;
  background:var(--sc,#22d3ee); color:#000; font-size:.8rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; margin-top:.1rem;
}
.ns-bmc-step__title { font-size:.92rem; font-weight:700; color:#fff; margin-bottom:.3rem; }
.ns-bmc-step__desc  { font-size:.82rem; color:rgba(255,255,255,.5); line-height:1.5; }

/* ── S7 Neurobiological blocks ── */
.ns-neuro-blocks { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.ns-neuro-block {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:1rem; padding:2rem;
  transition:transform .2s,box-shadow .2s;
}
.ns-neuro-block:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.3); }
.ns-neuro-block__icon { font-size:1.6rem; color:var(--nb,#22d3ee); margin-bottom:1rem; }
.ns-neuro-block__title { font-size:1rem; font-weight:700; color:#fff; margin:0 0 .6rem; }
.ns-neuro-block__desc  { font-size:.85rem; color:rgba(255,255,255,.5); line-height:1.6; margin:0 0 1.25rem; }
.ns-neuro-block__bar {
  height:3px; border-radius:999px;
  background:linear-gradient(90deg,var(--nb,#22d3ee),transparent);
}

/* ── S8 Difference grid ── */
.ns-diff-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.5rem; }
.ns-diff-card {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:1rem; padding:1.75rem;
  border-bottom:3px solid var(--dc,#22d3ee);
  transition:transform .2s,box-shadow .2s;
}
.ns-diff-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.3); }
.ns-diff-card__icon { font-size:1.5rem; color:var(--dc,#22d3ee); margin-bottom:.85rem; }
.ns-diff-card__title { font-size:1rem; font-weight:700; color:#fff; margin:0 0 .5rem; }
.ns-diff-card__desc  { font-size:.85rem; color:rgba(255,255,255,.55); line-height:1.6; margin:0; }

/* ── S9 PAC grid ── */
.ns-pac-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.5rem; }
.ns-pac-card {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:1rem; padding:1.75rem;
  border-top:3px solid var(--pc,#22d3ee);
  transition:transform .2s,box-shadow .2s;
}
.ns-pac-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.3); }
.ns-pac-card__icon  { font-size:1.5rem; color:var(--pc,#22d3ee); margin-bottom:.85rem; }
.ns-pac-card__title { font-size:1rem; font-weight:700; color:#fff; margin:0 0 .5rem; }
.ns-pac-card__desc  { font-size:.85rem; color:rgba(255,255,255,.55); line-height:1.6; margin:0; }

/* ── S10 Pathway columns ── */
.ns-pathway-split { display:grid; grid-template-columns:1fr auto 1fr; gap:2rem; align-items:start; }
.ns-pathway-col {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:1rem; padding:1.75rem;
}
.ns-pathway-col__head {
  font-size:.8rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  margin-bottom:1.25rem; display:flex; align-items:center; gap:.5rem;
}
.ns-pathway-col--aff .ns-pathway-col__head { color:#22d3ee; }
.ns-pathway-col--eff .ns-pathway-col__head { color:#a78bfa; }
.ns-pathway-col__sub { font-weight:400; opacity:.6; margin-left:.25rem; }
.ns-pw-step {
  display:flex; align-items:center; gap:.85rem;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  border-radius:.6rem; padding:.75rem 1rem; margin-bottom:.6rem;
  font-size:.85rem; color:rgba(255,255,255,.7);
}
.ns-pw-step__num {
  width:22px; height:22px; min-width:22px; border-radius:50%;
  background:rgba(255,255,255,.08); font-size:.7rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5);
}
.ns-pw-step__icon { color:#22d3ee; width:16px; text-align:center; }
.ns-pathway-col--eff .ns-pw-step__icon { color:#a78bfa; }
.ns-pathway-loop {
  display:flex; align-items:center; justify-content:center;
  position:relative; width:80px; padding-top:60px;
}
.ns-pathway-loop__ring {
  width:70px; height:70px; border-radius:50%;
  border:2px solid rgba(34,211,238,.3);
  animation:ns-spin 8s linear infinite;
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
}
.ns-pathway-loop__inner {
  position:relative; z-index:1; display:flex; flex-direction:column;
  align-items:center; gap:.35rem; font-size:.65rem; color:rgba(255,255,255,.5);
  text-align:center; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
}
.ns-pathway-loop__inner i { font-size:1.2rem; color:#22d3ee; }
@keyframes ns-spin { to { transform:translate(-50%,-50%) rotate(360deg); } }

/* ── S11 Motor grid ── */
.ns-motor-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.ns-motor-card {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:1rem; padding:1.75rem;
  border-left:3px solid var(--mot,#22d3ee);
  transition:transform .2s,box-shadow .2s;
}
.ns-motor-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.3); }
.ns-motor-card__icon  { font-size:1.5rem; color:var(--mot,#22d3ee); margin-bottom:.85rem; }
.ns-motor-card__title { font-size:1rem; font-weight:700; color:#fff; margin:0 0 .5rem; }
.ns-motor-card__desc  { font-size:.85rem; color:rgba(255,255,255,.55); line-height:1.6; margin:0; }

/* ── S12 Examples ── */
.ns-example-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.ns-example-card {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:1rem; padding:1.75rem;
  transition:transform .2s,box-shadow .2s;
}
.ns-example-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.3); }
.ns-example-card__pos {
  display:flex; align-items:center; gap:.6rem;
  font-size:.85rem; font-weight:700; color:var(--ec,#22d3ee);
  text-transform:uppercase; letter-spacing:.07em; margin-bottom:1.25rem;
}
.ns-example-card__steps { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.65rem; }
.ns-example-step { display:flex; align-items:center; gap:.75rem; font-size:.87rem; color:rgba(255,255,255,.7); }
.ns-example-step__num {
  width:24px; height:24px; min-width:24px; border-radius:50%;
  background:var(--ec,#22d3ee); color:#000; font-size:.72rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}

/* ── Final section ── */
.ns-section--final {
  background:#04071a; border-top:1px solid rgba(255,255,255,.06);
  padding:5rem 1.5rem; position:relative; overflow:hidden;
}
.ns-final__bg-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(34,211,238,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(34,211,238,.04) 1px,transparent 1px);
  background-size:40px 40px; pointer-events:none;
}
.ns-final__glow-l { position:absolute; width:500px; height:500px; border-radius:50%; filter:blur(120px); background:rgba(8,145,178,.15); top:-100px; left:-100px; pointer-events:none; }
.ns-final__glow-r { position:absolute; width:500px; height:500px; border-radius:50%; filter:blur(120px); background:rgba(74,30,158,.18); bottom:-100px; right:-100px; pointer-events:none; }
.ns-final-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-bottom:2.5rem;
}
.ns-final-col {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-top:3px solid var(--fcc,#22d3ee); border-radius:1rem; padding:1.75rem; text-align:center;
}
.ns-final-col__icon { font-size:2rem; color:var(--fcc,#22d3ee); margin-bottom:.75rem; }
.ns-final-col__label { font-size:1rem; font-weight:800; color:#fff; margin-bottom:1rem; }
.ns-final-col__list {
  list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; text-align:left;
}
.ns-final-col__list li {
  font-size:.85rem; color:rgba(255,255,255,.55); padding-left:1rem; position:relative;
}
.ns-final-col__list li::before { content:'›'; position:absolute; left:0; color:var(--fcc,#22d3ee); }
.ns-final-banner {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem;
  margin-top:3rem;
  background:linear-gradient(135deg,rgba(8,145,178,.15),rgba(74,30,158,.2));
  border:1px solid rgba(34,211,238,.2); border-radius:1.25rem; padding:2rem 2.5rem;
}
.ns-final-banner__text {
  font-size:1.3rem; font-weight:700; color:#fff; line-height:1.4;
}
.ns-final-banner__btn {
  display:inline-flex; align-items:center; gap:.6rem;
  background:linear-gradient(135deg,#0891b2,#4a1e9e);
  color:#fff; font-weight:700; font-size:.9rem;
  padding:.8rem 1.75rem; border-radius:.6rem; text-decoration:none;
  transition:opacity .2s,transform .15s; white-space:nowrap;
}
.ns-final-banner__btn:hover { opacity:.88; transform:translateY(-2px); }

/* ══════════════════════════════════════════════════════════════
   ns-vid-card — Neuroscience explainer video card
══════════════════════════════════════════════════════════════ */

.ns-vid-card {
  position: relative;
  background: rgba(4, 7, 26, 0.85);
  border: 1px solid rgba(34, 211, 238, 0.15);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.07),
    0 32px 80px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Header bar ─────────────────────────────────────────────── */
.ns-vid-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.9rem 1.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}
.ns-vid-card__header-left {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.ns-vid-card__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.9);
  flex-shrink: 0;
  animation: nsVidPulse 2.4s ease-in-out infinite;
}
@keyframes nsVidPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(34,211,238,0.9); }
  50%       { opacity: 0.5; box-shadow: 0 0 16px rgba(34,211,238,0.4); }
}
.ns-vid-card__eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.ns-vid-card__badges {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.ns-vid-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  border-radius: 100px;
  border: 1px solid;
}
.ns-vid-card__badge i { font-size: 0.55rem; }

/* ── Video wrapper ───────────────────────────────────────────── */
.ns-vid-card__wrap {
  position: relative;
  width: 100%;
  background: #000;
  line-height: 0;
}

/* corner bracket decorators */
.ns-vid-card__corner {
  position: absolute;
  width: 16px; height: 16px;
  border-color: rgba(34, 211, 238, 0.5);
  border-style: solid;
  z-index: 2;
  pointer-events: none;
}
.ns-vid-card__corner--tl { top: 10px; left: 10px;  border-width: 2px 0 0 2px; }
.ns-vid-card__corner--tr { top: 10px; right: 10px; border-width: 2px 2px 0 0; }
.ns-vid-card__corner--bl { bottom: 10px; left: 10px;  border-width: 0 0 2px 2px; }
.ns-vid-card__corner--br { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; }

/* YouTube 16:9 embed container */
.ns-vid-card__yt {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #000;
  overflow: hidden;
}
.ns-vid-card__yt-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ── Caption row ─────────────────────────────────────────────── */
.ns-vid-card__caption {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.85rem 1.3rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.6;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  background: rgba(255, 255, 255, 0.015);
}
.ns-vid-card__caption-icon {
  color: #22d3ee;
  font-size: 0.72rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ns-vid-card__header { flex-direction: column; align-items: flex-start; }
  .ns-vid-card__caption { font-size: 0.7rem; }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ns-vid-card__dot { animation: none; opacity: 1; }
}

/* ── Responsive ── */
@media(max-width:960px){
  .ns-quote-split { grid-template-columns:1fr; gap:2rem; }
  .ns-neural-split { grid-template-columns:1fr; }
  .ns-neural-pathway { flex-direction:row; justify-content:center; }
  .ns-pathway-line { width:32px; height:2px; }
  .ns-bmc-split { grid-template-columns:1fr; }
  .ns-pathway-split { grid-template-columns:1fr; }
  .ns-pathway-loop { display:none; }
  .ns-ms-grid,
  .ns-neuro-blocks,
  .ns-motor-grid,
  .ns-example-grid,
  .ns-final-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:600px){
  .ns-ms-grid,
  .ns-neuro-blocks,
  .ns-motor-grid,
  .ns-example-grid,
  .ns-final-grid { grid-template-columns:1fr; }
  .ns-quote-timeline { flex-direction:column; gap:1rem; }
  .ns-qt-arrow { transform:rotate(90deg); }
  .ns-final-banner { flex-direction:column; text-align:center; }
}


/* ============================================================
   DECISION MAKING PAGE  (/science/decision-making)
   ============================================================ */

.dm-page { background:#050a1a; color:#fff; font-family:inherit; }
.dm-container { max-width:1200px; margin:0 auto; padding:0 1.5rem; }
.dm-grad {
  background:linear-gradient(135deg,#22d3ee,#a78bfa);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ── Shared badges / buttons ── */
.dm-eyebrow {
  display:inline-block; background:rgba(34,211,238,.1); color:#22d3ee;
  border:1px solid rgba(34,211,238,.25); border-radius:999px;
  padding:.3rem 1rem; font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:1.25rem;
}
.dm-badge {
  display:inline-block; border-radius:999px;
  padding:.3rem 1rem; font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:1rem;
}
.dm-badge--cyan   { background:rgba(34,211,238,.1);  color:#22d3ee; border:1px solid rgba(34,211,238,.25); }
.dm-badge--purple { background:rgba(167,139,250,.1); color:#a78bfa; border:1px solid rgba(167,139,250,.25); }
.dm-badge--teal   { background:rgba(52,211,153,.1);  color:#34d399; border:1px solid rgba(52,211,153,.25); }
.dm-body { color:rgba(255,255,255,.65); font-size:.95rem; line-height:1.75; margin:0 0 1rem; }
.dm-btn-primary {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#0891b2,#4a1e9e);
  color:#fff; font-weight:700; font-size:.9rem;
  padding:.8rem 1.75rem; border-radius:.6rem;
  text-decoration:none; display:inline-flex; align-items:center; gap:.5rem;
  transition:opacity .2s,transform .15s;
}
.dm-btn-primary:hover { opacity:.88; transform:translateY(-2px); }
.dm-btn-primary__shimmer {
  position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.15) 50%,transparent 60%);
  animation:dm-shimmer 2.5s infinite;
}
@keyframes dm-shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(200%)} }
.dm-btn-ghost {
  background:transparent; color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.2); font-weight:600; font-size:.9rem;
  padding:.8rem 1.75rem; border-radius:.6rem;
  text-decoration:none; display:inline-flex; align-items:center; gap:.5rem;
  transition:border-color .2s,color .2s,transform .15s;
}
.dm-btn-ghost:hover { border-color:#22d3ee; color:#22d3ee; transform:translateY(-2px); }

/* ── Page top ── */
.dm-top {
  position:relative; overflow:hidden;
  background:#050a1a; padding:6rem 1.5rem 4rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.dm-top__bg-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(34,211,238,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(34,211,238,.04) 1px,transparent 1px);
  background-size:40px 40px; pointer-events:none;
}
.dm-top__glow-l { position:absolute; width:500px; height:500px; border-radius:50%; filter:blur(120px); background:rgba(8,145,178,.18); top:-150px; left:-100px; pointer-events:none; }
.dm-top__glow-r { position:absolute; width:500px; height:500px; border-radius:50%; filter:blur(120px); background:rgba(74,30,158,.2); bottom:-150px; right:-100px; pointer-events:none; }
.dm-top .dm-container { position:relative; z-index:1; text-align:center; }
.dm-breadcrumb { display:flex; justify-content:center; gap:.4rem; align-items:center; margin-bottom:1.5rem; font-size:.8rem; }
.dm-breadcrumb__item { color:rgba(255,255,255,.4); text-decoration:none; }
.dm-breadcrumb__item:hover { color:#22d3ee; }
.dm-breadcrumb__cur { color:rgba(255,255,255,.7); }
.dm-breadcrumb__sep { color:rgba(255,255,255,.25); }
.dm-top__title { font-size:clamp(2rem,4vw,3.2rem); font-weight:800; color:#fff; line-height:1.15; margin:.5rem 0 1rem; }
.dm-top__sub { color:rgba(255,255,255,.6); font-size:1rem; line-height:1.7; max-width:580px; margin:0 auto; }

/* ── Shared sections ── */
.dm-section { padding:5rem 1.5rem; }
.dm-section--dark  { background:#050a1a; }
.dm-section--mid   { background:#070d1f; }
.dm-section__header { text-align:center; max-width:700px; margin:0 auto 3rem; }
.dm-section__title { font-size:clamp(1.6rem,2.8vw,2.2rem); font-weight:800; color:#fff; line-height:1.2; margin:0 0 .75rem; }
.dm-section__sub   { color:rgba(255,255,255,.55); font-size:.95rem; line-height:1.7; margin:0; }

/* ── Shared placeholders ── */
.dm-placeholder {
  background:rgba(255,255,255,.03); border:2px dashed rgba(255,255,255,.15);
  border-radius:1.1rem; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:2.5rem;
}
.dm-placeholder--video    { min-height:300px; }
.dm-placeholder--img      { min-height:260px; }
.dm-placeholder--dashboard{ min-height:340px; }
.dm-placeholder__play {
  width:60px; height:60px; border-radius:50%;
  background:linear-gradient(135deg,#0891b2,#4a1e9e);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; color:#fff; margin-bottom:1rem;
}
.dm-placeholder__icon { font-size:2.5rem; color:rgba(255,255,255,.2); margin-bottom:.85rem; }
.dm-placeholder__label { font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:.35rem; }
.dm-placeholder__sub { font-size:.78rem; color:rgba(255,255,255,.25); }

/* ── S1 Hero split ── */
.dm-hero-split {
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center;
}
/* ── Vertical Shorts embed (9:16) inside hero split ── */
.dm-shorts-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.dm-shorts-frame {
  position: relative;
  width: 100%;
  max-width: 340px;          /* phone-style width cap */
  aspect-ratio: 9 / 16;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(34, 211, 238, 0.25);
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.12),
    0 0 40px rgba(34, 211, 238, 0.10),
    0 12px 48px rgba(0, 0, 0, 0.55);
  background: #000;
}
.dm-shorts-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
@media (max-width: 900px) {
  .dm-shorts-frame { max-width: 280px; }
}
@media (max-width: 600px) {
  .dm-shorts-frame { max-width: 220px; }
}

.dm-hero-stats { display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:2rem; }
.dm-hero-stat {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:.75rem; padding:1rem 1.25rem; flex:1; min-width:120px;
}
.dm-hero-stat__val   { font-size:1.6rem; font-weight:900; color:#22d3ee; line-height:1; margin-bottom:.3rem; }
.dm-hero-stat__label { font-size:.75rem; color:rgba(255,255,255,.5); line-height:1.4; }

/* ── S2 Chain grid ── */
.dm-chain-grid { display:flex; align-items:stretch; gap:0; flex-wrap:wrap; margin-bottom:2rem; }
.dm-chain-wrap { display:flex; align-items:center; gap:0; flex:1; min-width:200px; }
.dm-chain-card {
  flex:1; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-top:3px solid var(--cc,#22d3ee); border-radius:1rem; padding:1.75rem;
  transition:transform .2s,box-shadow .2s;
}
.dm-chain-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.3); }
.dm-chain-card__num { font-size:2rem; font-weight:900; color:rgba(255,255,255,.07); line-height:1; margin-bottom:.75rem; }
.dm-chain-card__icon { font-size:1.4rem; color:var(--cc,#22d3ee); margin-bottom:.75rem; }
.dm-chain-card__title { font-size:1rem; font-weight:800; color:#fff; margin:0 0 .5rem; }
.dm-chain-card__desc { font-size:.85rem; color:rgba(255,255,255,.65); line-height:1.5; margin:0 0 .5rem; }
.dm-chain-card__detail { font-size:.8rem; color:rgba(255,255,255,.4); line-height:1.5; margin:0; }
.dm-chain-arrow {
  padding:0 .75rem; color:rgba(255,255,255,.2); font-size:1.2rem; flex-shrink:0;
}
.dm-highlight-banner {
  display:flex; align-items:center; gap:1rem;
  background:linear-gradient(135deg,rgba(8,145,178,.12),rgba(74,30,158,.15));
  border:1px solid rgba(34,211,238,.2); border-radius:1rem;
  padding:1.25rem 1.75rem; font-size:.9rem; color:rgba(255,255,255,.75);
}
.dm-highlight-banner i { color:#22d3ee; font-size:1.1rem; flex-shrink:0; }
.dm-highlight-banner--sm { padding:1rem 1.25rem; font-size:.85rem; }
.dm-highlight-banner--centered { max-width:860px; margin-left:auto; margin-right:auto; }

/* ── S3 Elite vs Non-elite ── */
/* ── Elite vs Non-Elite diagram image container ─────────────────── */
.dm-elite-img-wrap {
  position: relative;
  display: block;
  max-width: 860px;
  margin: 0 auto 3rem;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(34, 211, 238, 0.2);
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.1),
    0 0 32px rgba(34, 211, 238, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.45);
  background: rgba(13, 21, 48, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px;
}
.dm-elite-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.dm-elite-img__fallback {
  display: none;          /* shown via onerror JS */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 220px;
  aspect-ratio: 16 / 9;
  color: rgba(255, 255, 255, 0.25);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}
.dm-elite-img__fallback i {
  font-size: 2.2rem;
  color: rgba(34, 211, 238, 0.2);
}
@media (max-width: 640px) {
  .dm-elite-img-wrap { margin-bottom: 2rem; padding: 2px; border-radius: 0.75rem; }
}

.dm-compare-split { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start; }
.dm-compare-rows { display:flex; flex-direction:column; gap:1.5rem; }
.dm-compare-group {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:1rem; padding:1.5rem;
}
.dm-compare-group__head { margin-bottom:1rem; }
.dm-compare-group__badge {
  display:inline-block; background:rgba(239,68,68,.1); color:#f87171;
  border:1px solid rgba(239,68,68,.2); border-radius:999px;
  padding:.25rem .85rem; font-size:.72rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}
.dm-compare-group__badge--elite {
  background:rgba(52,211,153,.1); color:#34d399; border-color:rgba(52,211,153,.2);
}
.dm-compare-flow { display:flex; flex-direction:column; gap:.55rem; }
.dm-flow-step {
  display:flex; align-items:center; gap:.75rem;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  border-radius:.5rem; padding:.65rem .9rem;
  font-size:.85rem; color:rgba(255,255,255,.7);
}
.dm-flow-step__num {
  width:22px; height:22px; min-width:22px; border-radius:50%;
  font-size:.72rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.dm-flow-step--non  .dm-flow-step__num { background:#f87171; color:#000; }
.dm-flow-step--elite .dm-flow-step__num { background:#34d399; color:#000; }
.dm-compare-vs {
  text-align:center; font-size:1.2rem; font-weight:900;
  color:rgba(255,255,255,.15); padding:.5rem;
}

/* ── S4 Accelerating cognitive ── */
.dm-accel-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.5rem; }
.dm-accel-card {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:1rem; padding:1.75rem;
  transition:transform .2s,box-shadow .2s;
}
.dm-accel-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.3); }
.dm-accel-card__top { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.dm-accel-card__num { font-size:2rem; font-weight:900; color:rgba(255,255,255,.07); line-height:1; }
.dm-accel-card__icon { font-size:1.3rem; color:var(--ac,#22d3ee); }
.dm-accel-card__title { font-size:1rem; font-weight:700; color:#fff; margin:0 0 .5rem; }
.dm-accel-card__desc  { font-size:.85rem; color:rgba(255,255,255,.5); line-height:1.6; margin:0 0 1.25rem; }
.dm-accel-card__bar {
  height:3px; border-radius:999px;
  background:linear-gradient(90deg,var(--ac,#22d3ee),transparent);
}

/* ── S5 Millisecond grid ── */
.dm-ms-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-bottom:2rem; }
.dm-ms-card {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:1rem; padding:1.75rem;
  transition:transform .2s,box-shadow .2s;
}
.dm-ms-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.3); }
.dm-ms-card__timing { font-size:1.8rem; font-weight:900; color:var(--mc,#22d3ee); line-height:1; margin-bottom:.75rem; }
.dm-ms-card__icon   { font-size:1.2rem; color:var(--mc,#22d3ee); margin-bottom:.65rem; }
.dm-ms-card__phase  { font-size:1rem; font-weight:700; color:#fff; margin:0 0 .5rem; }
.dm-ms-card__desc   { font-size:.85rem; color:rgba(255,255,255,.5); line-height:1.6; margin:0 0 1.25rem; }
.dm-ms-card__track  { height:4px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; }
.dm-ms-card__fill   { height:100%; background:var(--mc,#22d3ee); border-radius:999px; width:75%; }
.dm-ms-total {
  background:linear-gradient(135deg,rgba(8,145,178,.12),rgba(74,30,158,.15));
  border:1px solid rgba(34,211,238,.2); border-radius:1rem; padding:1.75rem 2rem;
}
.dm-ms-total__row { display:flex; align-items:center; gap:1rem; margin-bottom:.75rem; flex-wrap:wrap; }
.dm-ms-total__val  { font-size:1.5rem; font-weight:900; color:#22d3ee; }
.dm-ms-total__tag  {
  background:rgba(34,211,238,.1); color:#22d3ee; border:1px solid rgba(34,211,238,.25);
  border-radius:999px; font-size:.72rem; font-weight:700; padding:.2rem .75rem;
}
.dm-ms-total__note { color:rgba(255,255,255,.65); font-size:.9rem; line-height:1.6; margin:0; }

/* ── S6 Training split ── */
.dm-training-split { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.dm-mech-list { display:flex; flex-direction:column; gap:.7rem; margin-top:1.5rem; }
.dm-mech-item {
  display:flex; align-items:center; gap:.85rem;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:.6rem; padding:.8rem 1rem;
  font-size:.88rem; color:rgba(255,255,255,.75);
  transition:border-color .2s,transform .15s;
}
.dm-mech-item:hover { border-color:#34d399; transform:translateX(4px); }
.dm-mech-item__icon {
  width:30px; height:30px; min-width:30px; border-radius:.4rem;
  background:rgba(52,211,153,.1); color:#34d399;
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
}
.dm-mech-item__label { font-weight:600; }

/* ── S7 Measure split ── */
.dm-measure-split { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.dm-metric-card {
  display:flex; align-items:flex-start; gap:1rem;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-left:3px solid var(--met,#22d3ee); border-radius:.75rem;
  padding:1.1rem 1.25rem; margin-bottom:1rem;
  transition:transform .15s,box-shadow .15s;
}
.dm-metric-card:hover { transform:translateX(4px); box-shadow:0 4px 20px rgba(0,0,0,.2); }
.dm-metric-card__icon {
  width:38px; height:38px; min-width:38px; border-radius:.5rem;
  background:rgba(255,255,255,.06); color:var(--met,#22d3ee);
  display:flex; align-items:center; justify-content:center; font-size:1rem; margin-top:.15rem;
}
.dm-metric-card__title { font-size:.95rem; font-weight:700; color:#fff; margin-bottom:.35rem; }
.dm-metric-card__desc  { font-size:.82rem; color:rgba(255,255,255,.5); line-height:1.5; }

/* ── S8 Final intel grid ── */
.dm-section--final {
  background:#04071a; border-top:1px solid rgba(255,255,255,.06);
  padding:5rem 1.5rem; position:relative; overflow:hidden;
}
.dm-final__bg-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(34,211,238,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(34,211,238,.04) 1px,transparent 1px);
  background-size:40px 40px; pointer-events:none;
}
.dm-final__glow-l { position:absolute; width:500px; height:500px; border-radius:50%; filter:blur(120px); background:rgba(8,145,178,.15); top:-100px; left:-100px; pointer-events:none; }
.dm-final__glow-r { position:absolute; width:500px; height:500px; border-radius:50%; filter:blur(120px); background:rgba(74,30,158,.18); bottom:-100px; right:-100px; pointer-events:none; }
.dm-intel-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-bottom:2.5rem;
}
.dm-intel-col {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-top:3px solid var(--ic,#22d3ee); border-radius:1rem; padding:1.75rem; text-align:center;
}
.dm-intel-col__icon  { font-size:2rem; color:var(--ic,#22d3ee); margin-bottom:.75rem; }
.dm-intel-col__title { font-size:1rem; font-weight:800; color:#fff; margin-bottom:1rem; }
.dm-intel-col__list  {
  list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; text-align:left;
}
.dm-intel-col__list li {
  font-size:.85rem; color:rgba(255,255,255,.55); padding-left:1rem; position:relative;
}
.dm-intel-col__list li::before { content:'›'; position:absolute; left:0; color:var(--ic,#22d3ee); }
.dm-final-banner {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem;
  background:linear-gradient(135deg,rgba(8,145,178,.15),rgba(74,30,158,.2));
  border:1px solid rgba(34,211,238,.2); border-radius:1.25rem; padding:2rem 2.5rem;
}
.dm-final-banner__text { font-size:1.2rem; font-weight:700; color:#fff; line-height:1.4; }
.dm-final-banner__btns { display:flex; gap:1rem; flex-wrap:wrap; }

/* ── Responsive ── */
@media(max-width:960px){
  .dm-hero-split,
  .dm-compare-split,
  .dm-training-split,
  .dm-measure-split { grid-template-columns:1fr; gap:2.5rem; }
  .dm-chain-grid { flex-direction:column; }
  .dm-chain-arrow { transform:rotate(90deg); text-align:center; }
  .dm-ms-grid,
  .dm-intel-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:600px){
  .dm-ms-grid,
  .dm-intel-grid { grid-template-columns:1fr; }
  .dm-hero-stats { flex-direction:column; }
  .dm-final-banner { flex-direction:column; text-align:center; }
  .dm-final-banner__btns { justify-content:center; }
}


/* ═══════════════════════════════════════════════════════════════
   SCANNING PAGE  (/science/scanning)   prefix: sc2-
   ═══════════════════════════════════════════════════════════════ */

/* ── base ── */
.sc2-page { background:#050a1a; color:#e2e8f0; font-family:inherit; }
.sc2-container { max-width:1140px; margin:0 auto; padding:0 1.5rem; }

/* ── page header ── */
.sc2-top {
  position:relative; overflow:hidden;
  padding:5.5rem 0 3.5rem;
  background:linear-gradient(180deg,#060d20 0%,#050a1a 100%);
}
.sc2-top__bg-grid {
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(34,211,238,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(34,211,238,.04) 1px,transparent 1px);
  background-size:48px 48px;pointer-events:none;
}
.sc2-top__glow-l {
  position:absolute;top:-60px;left:-80px;width:440px;height:440px;
  background:radial-gradient(circle,rgba(34,211,238,.12) 0%,transparent 70%);
  pointer-events:none;
}
.sc2-top__glow-r {
  position:absolute;top:-40px;right:-80px;width:380px;height:380px;
  background:radial-gradient(circle,rgba(167,139,250,.1) 0%,transparent 70%);
  pointer-events:none;
}
.sc2-breadcrumb { display:flex;align-items:center;gap:.4rem;margin-bottom:1.5rem;font-size:.82rem; }
.sc2-breadcrumb__item { color:#94a3b8;text-decoration:none;transition:color .2s; }
.sc2-breadcrumb__item:hover { color:#22d3ee; }
.sc2-breadcrumb__cur { color:#e2e8f0; }
.sc2-breadcrumb__sep { color:#475569; }
.sc2-eyebrow { display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#22d3ee;margin-bottom:.75rem; }
.sc2-top__title {
  font-size:clamp(2rem,5vw,3.2rem);font-weight:800;line-height:1.15;
  color:#f1f5f9;margin-bottom:1rem;
}
.sc2-grad {
  background:linear-gradient(135deg,#22d3ee,#a78bfa);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sc2-top__sub { font-size:1.1rem;color:#94a3b8;max-width:600px;line-height:1.7; }

/* ── sections ── */
.sc2-section { padding:5rem 0; }
.sc2-section--dark { background:#050a1a; }
.sc2-section--mid  { background:#060d20; }
.sc2-section--final{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#060d20 0%,#0a0f24 50%,#060d20 100%);
  padding:6rem 0;
}
.sc2-final__bg-grid {
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(34,211,238,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(34,211,238,.035) 1px,transparent 1px);
  background-size:48px 48px;pointer-events:none;
}
.sc2-final__glow-l {
  position:absolute;bottom:-80px;left:-100px;width:500px;height:500px;
  background:radial-gradient(circle,rgba(34,211,238,.1) 0%,transparent 70%);pointer-events:none;
}
.sc2-final__glow-r {
  position:absolute;top:-80px;right:-100px;width:440px;height:440px;
  background:radial-gradient(circle,rgba(167,139,250,.1) 0%,transparent 70%);pointer-events:none;
}

/* section header */
.sc2-section__header { text-align:center;margin-bottom:3.5rem; }
.sc2-section__title  { font-size:clamp(1.5rem,3.5vw,2.2rem);font-weight:700;color:#f1f5f9;margin:.6rem 0 .75rem; }
.sc2-section__sub    { font-size:1rem;color:#94a3b8;max-width:620px;margin:0 auto;line-height:1.7; }

/* badges */
.sc2-badge { display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .9rem;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; }
.sc2-badge--cyan   { background:rgba(34,211,238,.12);color:#22d3ee;border:1px solid rgba(34,211,238,.25); }
.sc2-badge--purple { background:rgba(167,139,250,.12);color:#a78bfa;border:1px solid rgba(167,139,250,.25); }
.sc2-badge--teal   { background:rgba(52,211,153,.12);color:#34d399;border:1px solid rgba(52,211,153,.25); }

/* body text */
.sc2-body { font-size:1rem;color:#94a3b8;line-height:1.8;margin-bottom:1rem; }
.sc2-body strong { color:#e2e8f0; }
.sc2-body--center { text-align:center; }

/* ── PLACEHOLDERS ── */
.sc2-placeholder {
  background:rgba(255,255,255,.03);border:2px dashed rgba(34,211,238,.2);
  border-radius:12px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.6rem;padding:2.5rem 1.5rem;text-align:center;
  min-height:200px;transition:border-color .3s;
}
.sc2-placeholder:hover { border-color:rgba(34,211,238,.45); }
.sc2-placeholder--video { min-height:320px;position:relative; }
.sc2-placeholder--img   { min-height:220px; }

/* ── Vertical Shorts embed inside sc2-vr-split__media (9:16) ── */
.sc2-shorts-outer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  /* blurred dark backdrop for premium look */
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(34,211,238,0.06) 0%, transparent 70%);
  border-radius: 1.25rem;
  padding: 1.25rem 1rem;
}
.sc2-shorts-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 1.1rem;
  overflow: hidden;
  border: 1px solid rgba(34, 211, 238, 0.22);
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.10),
    0 0 36px rgba(34, 211, 238, 0.10),
    0 12px 48px rgba(0, 0, 0, 0.55);
  background: #000;
}
.sc2-shorts-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
@media (max-width: 900px) {
  .sc2-shorts-frame { max-width: 100%; aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
  .sc2-shorts-outer { padding: 0.75rem 0.5rem; }
  .sc2-shorts-frame { max-width: 100%; aspect-ratio: 16 / 9; }
}
.sc2-placeholder--chart { min-height:180px; }
.sc2-placeholder--dashboard { min-height:260px; }
.sc2-placeholder__play {
  width:52px;height:52px;border-radius:50%;
  background:rgba(34,211,238,.15);border:2px solid rgba(34,211,238,.35);
  display:flex;align-items:center;justify-content:center;
  color:#22d3ee;font-size:1.1rem;
}
.sc2-placeholder__icon { font-size:2rem;color:rgba(34,211,238,.45); }
.sc2-placeholder__label { font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#64748b; }
.sc2-placeholder__sub   { font-size:.78rem;color:#475569; }

/* ── S1 HERO SPLIT ── */
.sc2-hero-split {
  display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;
}
.sc2-hero-split__text .sc2-badge { margin-bottom:1rem; }
.sc2-hero-split__text .sc2-section__title { text-align:left;margin-bottom:.5rem; }
.sc2-hero-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem; }
.sc2-hero-stat {
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:1rem .75rem;text-align:center;
}
.sc2-hero-stat__val   { font-size:1.45rem;font-weight:800;color:#22d3ee; }
.sc2-hero-stat__label { font-size:.72rem;color:#64748b;margin-top:.25rem;line-height:1.4; }

/* ── S2 PROCESS CARDS ── */
.sc2-process-grid {
  display:flex;align-items:stretch;gap:0;margin-bottom:2.5rem;
  overflow-x:auto;
}
.sc2-process-wrap { display:flex;align-items:center;flex:1;min-width:220px; }
.sc2-process-card {
  flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:2rem 1.5rem;position:relative;overflow:hidden;
  transition:transform .3s,box-shadow .3s;
}
.sc2-process-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--pc,#22d3ee);
}
.sc2-process-card:hover { transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.4); }
.sc2-process-card__num {
  font-size:.72rem;font-weight:800;letter-spacing:.12em;
  color:var(--pc,#22d3ee);opacity:.6;margin-bottom:.75rem;
}
.sc2-process-card__icon { font-size:1.6rem;color:var(--pc,#22d3ee);margin-bottom:.75rem; }
.sc2-process-card__title { font-size:1.05rem;font-weight:700;color:#f1f5f9;margin-bottom:.5rem; }
.sc2-process-card__desc  { font-size:.88rem;color:#94a3b8;line-height:1.6;margin-bottom:.75rem; }
.sc2-process-card__detail{ font-size:.8rem;color:#64748b;line-height:1.55;border-top:1px solid rgba(255,255,255,.06);padding-top:.75rem; }
.sc2-process-arrow {
  flex-shrink:0;width:40px;display:flex;align-items:center;justify-content:center;
  color:#22d3ee;font-size:.9rem;opacity:.5;
}
.sc2-diagram-placeholder { margin-top:1rem; }

/* ── S3 WHY GRID ── */
.sc2-why-grid {
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;
}
.sc2-why-card {
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:1.75rem;position:relative;overflow:hidden;
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.sc2-why-card::after {
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:var(--wc,#22d3ee);opacity:0;transition:opacity .3s;
}
.sc2-why-card:hover { transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.4);border-color:rgba(255,255,255,.15); }
.sc2-why-card:hover::after { opacity:1; }
.sc2-why-card__icon { font-size:1.5rem;color:var(--wc,#22d3ee);margin-bottom:.9rem; }
.sc2-why-card__title { font-size:1rem;font-weight:700;color:#f1f5f9;margin-bottom:.5rem; }
.sc2-why-card__desc  { font-size:.86rem;color:#94a3b8;line-height:1.6; }

/* ── S4 INTEL SPLIT ── */
.sc2-intel-split {
  display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;
}
.sc2-intel-split__text .sc2-badge { margin-bottom:1rem; }
.sc2-intel-split__text .sc2-section__title { text-align:left;margin-bottom:1rem; }
.sc2-quote-block {
  background:rgba(34,211,238,.06);border-left:4px solid #22d3ee;
  border-radius:0 12px 12px 0;padding:2.5rem 2rem;position:relative;
}
.sc2-quote-block__mark {
  font-size:4rem;line-height:1;color:#22d3ee;opacity:.25;
  position:absolute;top:.5rem;left:1.25rem;font-family:Georgia,serif;
}
.sc2-quote-block__text {
  font-size:1.2rem;font-style:italic;color:#e2e8f0;line-height:1.75;
  margin:0;position:relative;z-index:1;
}
.sc2-quote-block__bar { height:3px;background:linear-gradient(90deg,#22d3ee,#a78bfa);border-radius:2px;margin-top:1.5rem; }

/* ── S5 MOMENT CARDS ── */
.sc2-moments-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:2rem; }
.sc2-moment-card {
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:2rem 1.5rem;text-align:center;
  position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s;
}
.sc2-moment-card:hover { transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.4); }
.sc2-moment-card__dist {
  display:inline-block;padding:.25rem .75rem;border-radius:999px;
  background:rgba(255,255,255,.07);color:var(--mm,#22d3ee);
  font-size:.78rem;font-weight:700;letter-spacing:.06em;margin-bottom:.5rem;
}
.sc2-moment-card__num {
  font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#475569;margin-bottom:.5rem;
}
.sc2-moment-card__icon { font-size:1.8rem;color:var(--mm,#22d3ee);margin-bottom:.6rem; }
.sc2-moment-card__tag {
  font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mm,#22d3ee);opacity:.75;margin-bottom:.5rem;
}
.sc2-moment-card__title { font-size:1rem;font-weight:700;color:#f1f5f9;margin-bottom:.6rem; }
.sc2-moment-card__desc  { font-size:.84rem;color:#94a3b8;line-height:1.6;margin-bottom:1rem; }
.sc2-moment-card__track { background:rgba(255,255,255,.07);border-radius:999px;height:4px;overflow:hidden; }
.sc2-moment-card__fill  { height:100%;background:var(--mm,#22d3ee);border-radius:999px;width:80%; }

/* highlight banners */
.sc2-highlight-banner {
  display:flex;align-items:center;gap:1rem;
  background:rgba(34,211,238,.07);border:1px solid rgba(34,211,238,.2);
  border-radius:12px;padding:1.25rem 1.75rem;font-size:.95rem;color:#94a3b8;
}
.sc2-highlight-banner i { color:#22d3ee;font-size:1.1rem;flex-shrink:0; }
.sc2-highlight-banner strong { color:#e2e8f0; }

/* ── S6 VR SPLIT ── */
.sc2-vr-split {
  display:grid;grid-template-columns:1.4fr 1fr;gap:3.5rem;align-items:center;
}
.sc2-vr-split__cols .sc2-badge { margin-bottom:1rem; }
.sc2-vr-split__cols .sc2-section__title { text-align:left;margin-bottom:1.75rem; }
.sc2-vr-col-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem; }
.sc2-vr-col {
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:1.5rem 1.25rem;border-top:3px solid var(--vc,#22d3ee);
}
.sc2-vr-col__icon  { font-size:1.3rem;color:var(--vc,#22d3ee);margin-bottom:.6rem; }
.sc2-vr-col__title { font-size:.9rem;font-weight:700;color:#f1f5f9;margin-bottom:.75rem; }
.sc2-vr-col__list  { list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem; }
.sc2-vr-col__list li { font-size:.8rem;color:#94a3b8;padding-left:1rem;position:relative; }
.sc2-vr-col__list li::before { content:'›';position:absolute;left:0;color:var(--vc,#22d3ee); }

/* ── S7 CHART / BAR ── */
.sc2-chart-placeholder { margin-bottom:1.5rem; }
.sc2-bar-chart { margin-top:1.75rem;display:flex;flex-direction:column;gap:.7rem; }

/* ── Scanning Frequency Chart image ── */
.sc2-freq-img-wrap {
  position: relative;
  width: 100%;
  margin: 0 auto 1.5rem;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(34, 211, 238, 0.18);
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.08),
    0 0 40px rgba(34, 211, 238, 0.08),
    0 12px 48px rgba(0, 0, 0, 0.5);
  background: #050914;
}
.sc2-freq-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}
.sc2-freq-img__fallback {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 200px;
  color: rgba(255,255,255,0.25);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}
.sc2-freq-img__fallback i { font-size: 2rem; color: rgba(34,211,238,0.25); }
.sc2-bar-row { display:flex;align-items:center;gap:1rem; }
.sc2-bar-row__name {
  width:110px;flex-shrink:0;font-size:.82rem;font-weight:600;color:#94a3b8;
  text-align:right;
}
.sc2-bar-row__track {
  flex:1;height:10px;background:rgba(255,255,255,.06);
  border-radius:999px;overflow:hidden;
}
.sc2-bar-row__fill {
  height:100%;border-radius:999px;
  animation:sc2BarIn .9s ease both;
}
@keyframes sc2BarIn { from { width:0 !important } }
.sc2-bar-row__pct { width:36px;flex-shrink:0;font-size:.8rem;font-weight:700;color:#64748b; }

/* ── S8 FINAL ── */
.sc2-final-desc {
  max-width:680px;margin:0 auto 3rem;text-align:center;
}
.sc2-final-desc p { font-size:1rem;color:#94a3b8;line-height:1.8;margin-bottom:.75rem; }
.sc2-intel-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:3rem; }
.sc2-intel-col {
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:2rem 1.5rem;border-top:3px solid var(--ic,#22d3ee);
  transition:transform .3s,box-shadow .3s;
}
.sc2-intel-col:hover { transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.4); }
.sc2-intel-col__icon  { font-size:1.6rem;color:var(--ic,#22d3ee);margin-bottom:.75rem; }
.sc2-intel-col__title { font-size:1rem;font-weight:700;color:#f1f5f9;margin-bottom:.85rem; }
.sc2-intel-col__list  { list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.45rem; }
.sc2-intel-col__list li { font-size:.84rem;color:#94a3b8;padding-left:1.1rem;position:relative;line-height:1.5; }
.sc2-intel-col__list li::before { content:'›';position:absolute;left:0;color:var(--ic,#22d3ee); }

.sc2-final-banner {
  background:linear-gradient(135deg,rgba(34,211,238,.08) 0%,rgba(167,139,250,.08) 100%);
  border:1px solid rgba(34,211,238,.2);border-radius:16px;
  padding:3rem 2.5rem;text-align:center;
}
.sc2-final-banner__eyebrow {
  font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#22d3ee;opacity:.75;margin-bottom:.75rem;
}
.sc2-final-banner__text { font-size:1.4rem;font-weight:700;color:#f1f5f9;margin-bottom:2rem;line-height:1.4; }
.sc2-final-banner__text strong { background:linear-gradient(135deg,#22d3ee,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.sc2-final-banner__btns { display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap; }

/* buttons */
.sc2-btn-primary {
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.75rem;border-radius:8px;font-size:.88rem;font-weight:700;
  background:linear-gradient(135deg,#22d3ee,#0ea5e9);color:#050a1a;
  text-decoration:none;position:relative;overflow:hidden;
  transition:transform .2s,box-shadow .2s;
}
.sc2-btn-primary:hover { transform:translateY(-2px);box-shadow:0 8px 20px rgba(34,211,238,.35); }
.sc2-btn-primary__shimmer {
  position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.25) 50%,transparent 60%);
  transform:translateX(-100%);animation:sc2Shimmer 2.5s infinite;
}
@keyframes sc2Shimmer { to { transform:translateX(200%) } }
.sc2-btn-ghost {
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.5rem;border-radius:8px;font-size:.88rem;font-weight:600;
  background:rgba(255,255,255,.05);color:#e2e8f0;
  border:1px solid rgba(255,255,255,.12);text-decoration:none;
  transition:background .2s,border-color .2s,transform .2s;
}
.sc2-btn-ghost:hover { background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22);transform:translateY(-2px); }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .sc2-hero-split,
  .sc2-intel-split,
  .sc2-vr-split { grid-template-columns:1fr; }
  .sc2-why-grid,
  .sc2-intel-grid { grid-template-columns:repeat(2,1fr); }
  .sc2-moments-grid { grid-template-columns:1fr; }
  .sc2-vr-col-grid { grid-template-columns:1fr; }
  .sc2-hero-stats { grid-template-columns:repeat(3,1fr); }
  .sc2-process-grid { flex-direction:column; }
  .sc2-process-arrow { transform:rotate(90deg); }
}
@media (max-width:600px) {
  .sc2-why-grid,
  .sc2-intel-grid { grid-template-columns:1fr; }
  .sc2-hero-stats { grid-template-columns:1fr; }
  .sc2-final-banner__btns { flex-direction:column; }
}

/* ═══════════════════════════════════════════════════════════════
   SCIENTIFIC RESULTS PAGE  (/science/scientific-results)  sr-
   ═══════════════════════════════════════════════════════════════ */

/* ── base ── */
.sr-page { background:#050a1a; color:#e2e8f0; font-family:inherit; }
.sr-container { max-width:1140px; margin:0 auto; padding:0 1.5rem; }

/* ── page header ── */
.sr-top {
  position:relative; overflow:hidden;
  padding:5.5rem 0 4rem;
  background:linear-gradient(180deg,#060d20 0%,#050a1a 100%);
}
.sr-top__bg-grid {
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(34,211,238,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(34,211,238,.04) 1px,transparent 1px);
  background-size:48px 48px;pointer-events:none;
}
.sr-top__glow-l {
  position:absolute;top:-80px;left:-100px;width:480px;height:480px;
  background:radial-gradient(circle,rgba(34,211,238,.13) 0%,transparent 70%);pointer-events:none;
}
.sr-top__glow-r {
  position:absolute;top:-60px;right:-80px;width:400px;height:400px;
  background:radial-gradient(circle,rgba(167,139,250,.11) 0%,transparent 70%);pointer-events:none;
}
.sr-breadcrumb { display:flex;align-items:center;gap:.4rem;margin-bottom:1.5rem;font-size:.82rem; }
.sr-breadcrumb__item { color:#94a3b8;text-decoration:none;transition:color .2s; }
.sr-breadcrumb__item:hover { color:#22d3ee; }
.sr-breadcrumb__cur { color:#e2e8f0; }
.sr-breadcrumb__sep { color:#475569; }
.sr-eyebrow { display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#22d3ee;margin-bottom:.75rem; }
.sr-top__title {
  font-size:clamp(2.4rem,5.5vw,3.8rem);font-weight:800;line-height:1.1;color:#f1f5f9;margin-bottom:1rem;
}
.sr-grad {
  background:linear-gradient(135deg,#22d3ee,#a78bfa);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sr-top__sub { font-size:1.1rem;color:#94a3b8;max-width:580px;line-height:1.7;margin-bottom:2.5rem; }

/* hero pills */
.sr-hero-pills { display:flex;flex-wrap:wrap;gap:1rem; }
.sr-hero-pill {
  display:flex;flex-direction:column;align-items:center;gap:.2rem;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:.85rem 1.4rem;min-width:110px;text-align:center;
}
.sr-hero-pill__val   { font-size:1.5rem;font-weight:800;color:#22d3ee; }
.sr-hero-pill__label { font-size:.72rem;color:#64748b;line-height:1.3; }

/* ── sections ── */
.sr-section { padding:5.5rem 0; }
.sr-section--dark { background:#050a1a; }
.sr-section--mid  { background:#060d20; }
.sr-section--final {
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#060d20 0%,#0a0f24 50%,#060d20 100%);
  padding:6.5rem 0;
}
.sr-final__bg-grid {
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(34,211,238,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(34,211,238,.03) 1px,transparent 1px);
  background-size:48px 48px;pointer-events:none;
}
.sr-final__glow-l {
  position:absolute;bottom:-100px;left:-120px;width:520px;height:520px;
  background:radial-gradient(circle,rgba(34,211,238,.1) 0%,transparent 70%);pointer-events:none;
}
.sr-final__glow-r {
  position:absolute;top:-80px;right:-100px;width:460px;height:460px;
  background:radial-gradient(circle,rgba(167,139,250,.1) 0%,transparent 70%);pointer-events:none;
}

/* section header */
.sr-section__header { text-align:center;margin-bottom:3.5rem; }
.sr-section__title  { font-size:clamp(1.6rem,3.5vw,2.3rem);font-weight:700;color:#f1f5f9;margin:.6rem 0 .8rem; }
.sr-section__sub    { font-size:1rem;color:#94a3b8;max-width:640px;margin:0 auto;line-height:1.7; }
.sr-section__sub strong { color:#e2e8f0; }

/* badges */
.sr-badge { display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .9rem;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; }
.sr-badge--cyan   { background:rgba(34,211,238,.12);color:#22d3ee;border:1px solid rgba(34,211,238,.25); }
.sr-badge--purple { background:rgba(167,139,250,.12);color:#a78bfa;border:1px solid rgba(167,139,250,.25); }
.sr-badge--teal   { background:rgba(52,211,153,.12);color:#34d399;border:1px solid rgba(52,211,153,.25); }

/* body text */
.sr-body { font-size:1rem;color:#94a3b8;line-height:1.8;margin-bottom:1rem; }
.sr-body strong { color:#e2e8f0; }
.sr-body--center { text-align:center; }

/* placeholders */
.sr-placeholder {
  background:rgba(255,255,255,.03);border:2px dashed rgba(34,211,238,.2);
  border-radius:12px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.65rem;padding:2.5rem 1.5rem;text-align:center;
  min-height:200px;transition:border-color .3s;
}
.sr-placeholder:hover { border-color:rgba(34,211,238,.42); }
.sr-placeholder--img   { min-height:220px; }
.sr-placeholder--chart { min-height:200px; }
.sr-placeholder__icon { font-size:2.2rem;color:rgba(34,211,238,.4); }
.sr-placeholder__label { font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#64748b; }
.sr-placeholder__sub   { font-size:.78rem;color:#475569; }

/* ── S1 HERO SPLIT ── */
.sr-hero-split { display:grid;grid-template-columns:1.1fr 1fr;gap:3.5rem;align-items:center; }
.sr-hero-split__text .sr-badge { margin-bottom:1rem; }
.sr-hero-split__text .sr-section__title { text-align:left;margin:.5rem 0 .75rem; }
.sr-pub-badge {
  display:flex;align-items:center;gap:1rem;margin-top:2rem;
  background:rgba(34,211,238,.07);border:1px solid rgba(34,211,238,.2);
  border-radius:10px;padding:1rem 1.25rem;
}
.sr-pub-badge i { font-size:1.6rem;color:#22d3ee;flex-shrink:0; }
.sr-pub-badge__journal { font-size:.92rem;font-weight:700;color:#f1f5f9; }
.sr-pub-badge__tag { font-size:.75rem;color:#22d3ee;margin-top:.15rem; }

/* ── S2 STUDY TIMELINE ── */
.sr-timeline { display:flex;flex-direction:column;gap:0;position:relative;padding-left:2.5rem; }
.sr-timeline::before {
  content:'';position:absolute;left:.7rem;top:1.2rem;bottom:1.2rem;
  width:2px;background:linear-gradient(180deg,#22d3ee,#a78bfa,#34d399);
  border-radius:2px;
}
.sr-tl-phase { position:relative;padding-bottom:2.5rem; }
.sr-tl-phase__dot {
  position:absolute;left:-2.1rem;top:.55rem;
  width:18px;height:18px;border-radius:50%;
  border:3px solid;background:#050a1a;
}
.sr-tl-phase--cyan   .sr-tl-phase__dot { border-color:#22d3ee;box-shadow:0 0 10px rgba(34,211,238,.5); }
.sr-tl-phase--purple .sr-tl-phase__dot { border-color:#a78bfa;box-shadow:0 0 10px rgba(167,139,250,.5); }
.sr-tl-phase--teal   .sr-tl-phase__dot { border-color:#34d399;box-shadow:0 0 10px rgba(52,211,153,.5); }
.sr-tl-phase__content {
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:1.5rem 1.75rem;
}
.sr-tl-phase--cyan   .sr-tl-phase__content { border-left:3px solid #22d3ee; }
.sr-tl-phase--purple .sr-tl-phase__content { border-left:3px solid #a78bfa; }
.sr-tl-phase--teal   .sr-tl-phase__content { border-left:3px solid #34d399; }
.sr-tl-phase__num { font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#475569;margin-bottom:.25rem; }
.sr-tl-phase__title { font-size:1.05rem;font-weight:700;color:#f1f5f9;margin-bottom:.75rem;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap; }
.sr-tl-phase__duration {
  font-size:.78rem;font-weight:700;padding:.2rem .7rem;border-radius:999px;
  background:rgba(167,139,250,.15);color:#a78bfa;border:1px solid rgba(167,139,250,.3);
}
.sr-tl-phase__body { display:flex;flex-direction:column;gap:.5rem; }
.sr-tl-stat { display:flex;align-items:center;gap:.6rem;font-size:.88rem;color:#94a3b8; }
.sr-tl-stat i { color:#22d3ee;width:14px;flex-shrink:0; }

/* groups */
.sr-tl-groups { display:grid;grid-template-columns:1fr 1fr;gap:1rem; }
.sr-tl-group { border-radius:10px;padding:1rem 1.25rem;border:1px solid; }
.sr-tl-group--a { background:rgba(100,116,139,.07);border-color:rgba(100,116,139,.2); }
.sr-tl-group--b { background:rgba(34,211,238,.06);border-color:rgba(34,211,238,.2); }
.sr-tl-group__badge {
  font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#94a3b8;margin-bottom:.4rem;
}
.sr-tl-group--b .sr-tl-group__badge { color:#22d3ee; }
.sr-tl-group__desc { font-size:.86rem;color:#94a3b8;margin:0; }
.sr-tl-group__desc strong { color:#e2e8f0; }

/* VR protocol */
.sr-vr-protocol {
  background:rgba(167,139,250,.07);border:1px solid rgba(167,139,250,.2);
  border-radius:12px;padding:1.5rem 1.75rem;margin-bottom:2.5rem;
}
.sr-vr-protocol__title { font-size:.92rem;font-weight:700;color:#a78bfa;margin-bottom:1.25rem;display:flex;align-items:center;gap:.6rem; }
.sr-vr-protocol__grid { display:grid;grid-template-columns:repeat(4,1fr);gap:1rem; }
.sr-vr-protocol__item { text-align:center; }
.sr-vr-protocol__val { font-size:1.5rem;font-weight:800;color:#a78bfa; }
.sr-vr-protocol__key { font-size:.75rem;color:#64748b;margin-top:.15rem; }

/* ── S3 RESULT CARDS ── */
.sr-result-grid { display:grid;gap:1.5rem;margin-bottom:2rem; }
.sr-result-grid--3 { grid-template-columns:repeat(3,1fr); }
.sr-result-card {
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:2rem 1.5rem;position:relative;overflow:hidden;
  transition:transform .3s,box-shadow .3s;
}
.sr-result-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--rc,#22d3ee);
}
.sr-result-card:hover { transform:translateY(-5px);box-shadow:0 16px 40px rgba(0,0,0,.45); }
.sr-result-card__top { display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem; }
.sr-result-card__icon { font-size:1.6rem;color:var(--rc,#22d3ee); }
.sr-result-card__val {
  font-size:2.2rem;font-weight:900;
  background:linear-gradient(135deg,var(--rc,#22d3ee),#f1f5f9);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sr-result-card__title { font-size:.98rem;font-weight:700;color:#f1f5f9;margin-bottom:.6rem; }
.sr-result-card__desc  { font-size:.84rem;color:#94a3b8;line-height:1.6;margin-bottom:1rem; }
.sr-result-card__bar  { height:4px;background:rgba(255,255,255,.07);border-radius:999px;overflow:hidden; }
.sr-result-card__fill {
  height:100%;width:85%;background:linear-gradient(90deg,var(--rc,#22d3ee),rgba(255,255,255,.2));
  border-radius:999px;animation:srFill .9s ease both;
}
@keyframes srFill { from { width:0 } }

/* insight boxes */
.sr-insight-box {
  display:flex;align-items:flex-start;gap:1rem;
  background:rgba(34,211,238,.06);border:1px solid rgba(34,211,238,.18);
  border-radius:12px;padding:1.25rem 1.5rem;font-size:.9rem;color:#94a3b8;line-height:1.7;
}
.sr-insight-box i { color:#22d3ee;font-size:1.1rem;flex-shrink:0;margin-top:.15rem; }
.sr-insight-box strong { color:#e2e8f0; }
.sr-insight-box--purple { background:rgba(167,139,250,.06);border-color:rgba(167,139,250,.18); }
.sr-insight-box--purple i { color:#a78bfa; }

/* ── S4 PASSING SPLIT ── */
.sr-pass-split { display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:start; }
.sr-pass-metrics-only { display:block; max-width:720px; }
.sr-pass-metric {
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:1.25rem 1.5rem;margin-bottom:1rem;
  border-left:3px solid var(--pm,#22d3ee);transition:transform .2s;
}
.sr-pass-metric:hover { transform:translateX(4px); }
.sr-pass-metric__left { display:flex;align-items:center;gap:1rem;flex:1; }
.sr-pass-metric__icon { font-size:1.3rem;color:var(--pm,#22d3ee);flex-shrink:0; }
.sr-pass-metric__title { font-size:.92rem;font-weight:700;color:#f1f5f9;margin-bottom:.15rem; }
.sr-pass-metric__sub   { font-size:.78rem;color:#64748b;line-height:1.4; }
.sr-pass-metric__val   { font-size:1.75rem;font-weight:900;color:var(--pm,#22d3ee);flex-shrink:0; }

/* ── S5 BIG STATS ── */
.sr-big-stats { display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem; }
.sr-big-stat {
  position:relative;overflow:hidden;border-radius:16px;padding:2.5rem 2rem;
  text-align:center;border:1px solid;
}
.sr-big-stat--cyan   { background:rgba(34,211,238,.06);border-color:rgba(34,211,238,.2); }
.sr-big-stat--purple { background:rgba(167,139,250,.06);border-color:rgba(167,139,250,.2); }
.sr-big-stat__bg {
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.03) 0%,transparent 70%);
}
.sr-big-stat__icon {
  font-size:2rem;margin-bottom:.75rem;
}
.sr-big-stat--cyan   .sr-big-stat__icon { color:#22d3ee; }
.sr-big-stat--purple .sr-big-stat__icon { color:#a78bfa; }
.sr-big-stat__val {
  font-size:3.5rem;font-weight:900;line-height:1;margin-bottom:.5rem;
  background:linear-gradient(135deg,currentColor,#f1f5f9);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sr-big-stat--cyan   .sr-big-stat__val { color:#22d3ee; }
.sr-big-stat--purple .sr-big-stat__val { color:#a78bfa; }
.sr-big-stat__label { font-size:1rem;font-weight:700;color:#f1f5f9;margin-bottom:.35rem; }
.sr-big-stat__note  { font-size:.78rem;color:#64748b; }

/* ── S6 ELITE SPLIT ── */
.sr-elite-split { display:grid;grid-template-columns:1fr 1.2fr;gap:3rem;align-items:start; }
/* YouTube Shorts embed — 9:16 vertical */
.sr-yt-shorts-wrap {
  display:flex;justify-content:center;
  background:rgba(13,21,48,0.6);
  border:1px solid rgba(34,211,238,0.2);
  box-shadow:0 0 0 1px rgba(139,92,246,0.1), inset 0 0 30px rgba(139,92,246,0.05);
  border-radius:1rem;
  padding:6px;
  overflow:hidden;
}
.sr-yt-shorts-frame {
  width:100%;
  max-width:340px;
  aspect-ratio:9/16;
  border:none;
  border-radius:.75rem;
  display:block;
}
@media(max-width:900px){
  .sr-yt-shorts-frame { max-width:280px; }
}
.sr-benchmark-card {
  background:rgba(34,211,238,.07);border:1px solid rgba(34,211,238,.2);
  border-radius:14px;padding:2rem;margin-bottom:1.5rem;
}
.sr-benchmark-card__label { font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#22d3ee;margin-bottom:.5rem; }
.sr-benchmark-card__val   { font-size:2.2rem;font-weight:900;color:#f1f5f9;margin-bottom:.75rem; }
.sr-benchmark-card__desc  { font-size:.9rem;color:#94a3b8;line-height:1.7;margin:0; }
.sr-benchmark-card__desc strong { color:#e2e8f0; }
.sr-elite-points { display:flex;flex-direction:column;gap:.75rem; }
.sr-elite-point { display:flex;align-items:center;gap:.75rem;font-size:.9rem;color:#94a3b8; }
.sr-elite-point i { font-size:.9rem;flex-shrink:0; }

/* ── S7 PUBLICATION SPLIT ── */
.sr-pub-split { display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start; }
.sr-pub-info-only { display:block; max-width:720px; }
.sr-journal-card {
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:0;overflow:hidden;
}
.sr-journal-card__logo {
  background:linear-gradient(135deg,rgba(167,139,250,.15),rgba(34,211,238,.1));
  border-bottom:1px solid rgba(255,255,255,.08);padding:2rem;
  display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;color:#a78bfa;
}
.sr-journal-card__body { padding:1.75rem 2rem; }
.sr-journal-card__tag  { font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#a78bfa;margin-bottom:.5rem; }
.sr-journal-card__name { font-size:1.15rem;font-weight:700;color:#f1f5f9;margin-bottom:.85rem;line-height:1.4; }
.sr-journal-card__desc { font-size:.9rem;color:#94a3b8;line-height:1.7;margin-bottom:1.25rem; }
.sr-journal-card__desc strong { color:#e2e8f0; }
.sr-journal-card__facts { display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.75rem; }
.sr-journal-fact {
  display:flex;align-items:center;gap:.4rem;
  font-size:.75rem;font-weight:600;padding:.3rem .75rem;border-radius:999px;
  background:rgba(255,255,255,.06);color:#94a3b8;border:1px solid rgba(255,255,255,.1);
}
.sr-journal-fact i { color:#22d3ee;font-size:.7rem; }
.sr-pub-btn-wrap { display:flex;flex-direction:column;gap:.75rem; }
.sr-link-placeholder {
  display:flex;align-items:center;gap:.5rem;font-size:.78rem;
  color:#475569;padding:.5rem .75rem;background:rgba(255,255,255,.03);
  border:1px dashed rgba(255,255,255,.1);border-radius:8px;
}
.sr-link-placeholder i { color:#64748b;font-size:.8rem; }

/* ── S8 FINAL ── */
.sr-final-desc { max-width:680px;margin:0 auto 3rem;text-align:center; }
.sr-final-desc p { font-size:1.02rem;color:#94a3b8;line-height:1.8;margin-bottom:.75rem; }
.sr-final-desc strong { color:#e2e8f0; }

/* pillars */
.sr-pillars { display:flex;align-items:stretch;gap:0;margin-bottom:3.5rem; }
.sr-pillar {
  flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:2rem 1.5rem;text-align:center;
  transition:transform .3s,box-shadow .3s;
}
.sr-pillar:hover { transform:translateY(-5px);box-shadow:0 16px 40px rgba(0,0,0,.4); }
.sr-pillar--cyan   { border-top:3px solid #22d3ee; }
.sr-pillar--purple { border-top:3px solid #a78bfa; }
.sr-pillar--teal   { border-top:3px solid #34d399; }
.sr-pillar__icon { font-size:1.8rem;margin-bottom:.75rem; }
.sr-pillar--cyan   .sr-pillar__icon { color:#22d3ee; }
.sr-pillar--purple .sr-pillar__icon { color:#a78bfa; }
.sr-pillar--teal   .sr-pillar__icon { color:#34d399; }
.sr-pillar__title { font-size:1rem;font-weight:700;color:#f1f5f9;margin-bottom:1rem; }
.sr-pillar__list { list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem; }
.sr-pillar__list li { font-size:.82rem;color:#94a3b8;padding-left:1rem;position:relative;text-align:left; }
.sr-pillar__list li::before { content:'›';position:absolute;left:0;color:#22d3ee; }
.sr-pillar--purple .sr-pillar__list li::before { color:#a78bfa; }
.sr-pillar--teal   .sr-pillar__list li::before { color:#34d399; }
.sr-pillar__plus {
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;font-weight:300;color:rgba(255,255,255,.2);
  padding:0 .75rem;flex-shrink:0;
}

/* final banner */
.sr-final-banner {
  background:linear-gradient(135deg,rgba(34,211,238,.08),rgba(167,139,250,.08));
  border:1px solid rgba(34,211,238,.2);border-radius:18px;
  padding:3rem 2.5rem;text-align:center;
}
.sr-final-banner__headline {
  font-size:1.5rem;font-weight:700;color:#f1f5f9;margin-bottom:2rem;line-height:1.4;
}
.sr-final-banner__btns { display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap; }

/* buttons */
.sr-btn-primary {
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.8rem 1.8rem;border-radius:8px;font-size:.88rem;font-weight:700;
  background:linear-gradient(135deg,#22d3ee,#0ea5e9);color:#050a1a;
  text-decoration:none;position:relative;overflow:hidden;
  transition:transform .2s,box-shadow .2s;
}
.sr-btn-primary:hover { transform:translateY(-2px);box-shadow:0 8px 22px rgba(34,211,238,.35); }
.sr-btn-primary__shimmer {
  position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.25) 50%,transparent 60%);
  transform:translateX(-100%);animation:srShimmer 2.5s infinite;
}
@keyframes srShimmer { to { transform:translateX(200%) } }
.sr-btn-ghost {
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.4rem;border-radius:8px;font-size:.88rem;font-weight:600;
  background:rgba(255,255,255,.05);color:#e2e8f0;
  border:1px solid rgba(255,255,255,.12);text-decoration:none;
  transition:background .2s,border-color .2s,transform .2s;
}
.sr-btn-ghost:hover { background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22);transform:translateY(-2px); }

/* ── RESPONSIVE ── */
@media (max-width:960px) {
  .sr-hero-split,
  .sr-pass-split,
  .sr-pub-split,
  .sr-elite-split { grid-template-columns:1fr; }
  .sr-result-grid--3 { grid-template-columns:1fr 1fr; }
  .sr-big-stats { grid-template-columns:1fr 1fr; }
  .sr-tl-groups { grid-template-columns:1fr; }
  .sr-vr-protocol__grid { grid-template-columns:repeat(2,1fr); }
  .sr-pillars { flex-direction:column; }
  .sr-pillar__plus { padding:.25rem 0;font-size:1.5rem; }
}
@media (max-width:600px) {
  .sr-result-grid--3 { grid-template-columns:1fr; }
  .sr-big-stats { grid-template-columns:1fr; }
  .sr-hero-pills { gap:.6rem; }
  .sr-final-banner__btns { flex-direction:column; }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTBALL CLUBS PAGE  (/solutions/football-clubs)   fclub-
   ═══════════════════════════════════════════════════════════════ */

/* ── base ── */
.fclub-page { background:#050a1a; color:#e2e8f0; font-family:inherit; }
.fclub-container { max-width:1140px; margin:0 auto; padding:0 1.5rem; }

/* ── page header ── */
.fclub-top {
  position:relative; overflow:hidden;
  padding:5.5rem 0 4rem;
  background:linear-gradient(180deg,#060d20 0%,#050a1a 100%);
}
.fclub-top__bg-grid {
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(34,211,238,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(34,211,238,.04) 1px,transparent 1px);
  background-size:48px 48px;pointer-events:none;
}
.fclub-top__glow-l {
  position:absolute;top:-80px;left:-100px;width:500px;height:500px;
  background:radial-gradient(circle,rgba(34,211,238,.12) 0%,transparent 70%);pointer-events:none;
}
.fclub-top__glow-r {
  position:absolute;top:-40px;right:-80px;width:400px;height:400px;
  background:radial-gradient(circle,rgba(167,139,250,.1) 0%,transparent 70%);pointer-events:none;
}

/* breadcrumb */
.fclub-breadcrumb { display:flex;align-items:center;gap:.4rem;margin-bottom:1.5rem;font-size:.82rem; }
.fclub-breadcrumb__item { color:#94a3b8;text-decoration:none;transition:color .2s; }
.fclub-breadcrumb__item:hover { color:#22d3ee; }
.fclub-breadcrumb__cur { color:#e2e8f0; }
.fclub-breadcrumb__sep { color:#475569; }

/* eyebrow */
.fclub-eyebrow { display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#22d3ee;margin-bottom:.75rem; }

/* hero split */
.fclub-hero-split { display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center; }
.fclub-top__title {
  font-size:clamp(2rem,5vw,3.2rem);font-weight:800;line-height:1.15;color:#f1f5f9;margin-bottom:.75rem;
}
.fclub-grad {
  background:linear-gradient(135deg,#22d3ee,#a78bfa);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.fclub-top__sub { font-size:1.1rem;color:#94a3b8;margin-bottom:.75rem;line-height:1.6; }
.fclub-body { font-size:1rem;color:#94a3b8;line-height:1.8;margin-bottom:1rem; }
.fclub-body strong { color:#e2e8f0; }

/* hero pills */
.fclub-hero-pills { display:flex;gap:1rem;margin:1.5rem 0; }
.fclub-hero-pill {
  display:flex;flex-direction:column;align-items:center;gap:.15rem;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:.75rem 1.1rem;min-width:90px;text-align:center;
}
.fclub-hero-pill__val   { font-size:1.35rem;font-weight:800;color:#22d3ee; }
.fclub-hero-pill__label { font-size:.7rem;color:#64748b;line-height:1.3; }

/* hero CTAs */
.fclub-hero-ctas { display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.75rem; }

/* ── sections ── */
.fclub-section { padding:5rem 0; }
.fclub-section--dark { background:#050a1a; }
.fclub-section--mid  { background:#060d20; }
.fclub-section--final {
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#060d20 0%,#0a0f24 50%,#060d20 100%);
  padding:6rem 0;
}
.fclub-final__bg-grid {
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(34,211,238,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(34,211,238,.03) 1px,transparent 1px);
  background-size:48px 48px;pointer-events:none;
}
.fclub-final__glow-l {
  position:absolute;bottom:-80px;left:-100px;width:480px;height:480px;
  background:radial-gradient(circle,rgba(34,211,238,.1) 0%,transparent 70%);pointer-events:none;
}
.fclub-final__glow-r {
  position:absolute;top:-60px;right:-100px;width:420px;height:420px;
  background:radial-gradient(circle,rgba(167,139,250,.1) 0%,transparent 70%);pointer-events:none;
}

/* section header */
.fclub-section__header { text-align:center;margin-bottom:3.5rem; }
.fclub-section__title  { font-size:clamp(1.6rem,3.5vw,2.3rem);font-weight:700;color:#f1f5f9;margin:.6rem 0 .75rem; }
.fclub-section__sub    { font-size:1rem;color:#94a3b8;max-width:620px;margin:0 auto;line-height:1.7; }

/* badges */
.fclub-badge { display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .9rem;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; }
.fclub-badge--cyan   { background:rgba(34,211,238,.12);color:#22d3ee;border:1px solid rgba(34,211,238,.25); }
.fclub-badge--purple { background:rgba(167,139,250,.12);color:#a78bfa;border:1px solid rgba(167,139,250,.25); }
.fclub-badge--teal   { background:rgba(52,211,153,.12);color:#34d399;border:1px solid rgba(52,211,153,.25); }

/* ── PLACEHOLDERS ── */
.fclub-placeholder {
  background:rgba(255,255,255,.03);border:2px dashed rgba(34,211,238,.2);
  border-radius:12px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.65rem;padding:2.5rem 1.5rem;text-align:center;
  min-height:200px;transition:border-color .3s;
}
.fclub-placeholder:hover { border-color:rgba(34,211,238,.42); }
.fclub-placeholder--video     { min-height:360px; }
.fclub-placeholder--dashboard { min-height:420px; }
.fclub-placeholder__play {
  width:54px;height:54px;border-radius:50%;
  background:rgba(34,211,238,.15);border:2px solid rgba(34,211,238,.35);
  display:flex;align-items:center;justify-content:center;
  color:#22d3ee;font-size:1.2rem;
}
.fclub-placeholder__icon { font-size:2.2rem;color:rgba(34,211,238,.4); }
.fclub-placeholder__label { font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#64748b; }
.fclub-placeholder__sub   { font-size:.78rem;color:#475569; }

/* ── S2 PROBLEM SPLIT ── */
.fclub-problem-split { display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start; }

/* invest list */
.fclub-invest-list { display:flex;flex-direction:column;gap:.75rem;margin-top:.5rem; }
.fclub-invest-item {
  display:flex;align-items:center;gap:1rem;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:1rem 1.25rem;
}
.fclub-invest-item--done  { border-left:3px solid rgba(52,211,153,.5); }
.fclub-invest-item--missing { border-left:3px solid rgba(239,68,68,.5);background:rgba(239,68,68,.04); }
.fclub-invest-item__icon { font-size:1.1rem;color:#94a3b8;width:24px;flex-shrink:0; }
.fclub-invest-item--done .fclub-invest-item__icon { color:#34d399; }
.fclub-invest-item--missing .fclub-invest-item__icon { color:#ef4444; }
.fclub-invest-item > span { font-size:.93rem;color:#94a3b8;flex:1; }
.fclub-invest-item__check { color:#34d399;font-size:.85rem;flex-shrink:0; }
.fclub-invest-item__title { font-size:.93rem;font-weight:700;color:#f1f5f9;flex:1; }
.fclub-invest-item__sub   { font-size:.78rem;color:#64748b; }
.fclub-invest-item__miss  { font-size:.75rem;font-weight:700;color:#ef4444;flex-shrink:0;white-space:nowrap; }
.fclub-invest-gap { margin-top:.5rem; }

/* advantage card */
.fclub-advantage-card {
  background:linear-gradient(135deg,rgba(34,211,238,.07),rgba(167,139,250,.07));
  border:1px solid rgba(34,211,238,.2);border-radius:16px;padding:2rem 1.75rem;
}
.fclub-advantage-card__icon { font-size:2rem;color:#22d3ee;margin-bottom:.75rem; }
.fclub-advantage-card__title { font-size:1.05rem;font-weight:700;color:#f1f5f9;margin-bottom:.75rem;line-height:1.4; }
.fclub-advantage-card__desc  { font-size:.9rem;color:#94a3b8;line-height:1.7;margin-bottom:1.5rem; }
.fclub-advantage-card__desc strong { color:#e2e8f0; }
.fclub-advantage-card__stats { display:flex;gap:2rem; }
.fclub-adv-stat__val   { font-size:1.8rem;font-weight:900;color:#22d3ee; }
.fclub-adv-stat__label { font-size:.75rem;color:#64748b;margin-top:.1rem; }

/* ── S3 CAPABILITIES GRID ── */
.fclub-cap-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem; }
.fclub-cap-card {
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:2rem 1.75rem;position:relative;overflow:hidden;
  transition:transform .3s,box-shadow .3s;
}
.fclub-cap-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--cc,#22d3ee);
}
.fclub-cap-card:hover { transform:translateY(-5px);box-shadow:0 16px 40px rgba(0,0,0,.45); }
.fclub-cap-card__top { display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem; }
.fclub-cap-card__num  { font-size:.68rem;font-weight:800;letter-spacing:.12em;color:var(--cc,#22d3ee);opacity:.5; }
.fclub-cap-card__icon { font-size:1.6rem;color:var(--cc,#22d3ee); }
.fclub-cap-card__title { font-size:1.05rem;font-weight:700;color:#f1f5f9;margin-bottom:.6rem; }
.fclub-cap-card__desc  { font-size:.87rem;color:#94a3b8;line-height:1.65;margin-bottom:1rem; }
.fclub-cap-card__points { list-style:none;padding:0;margin:0 0 1.25rem;display:flex;flex-direction:column;gap:.4rem; }
.fclub-cap-card__points li { font-size:.81rem;color:#64748b;padding-left:1rem;position:relative; }
.fclub-cap-card__points li::before { content:'›';position:absolute;left:0;color:var(--cc,#22d3ee); }
.fclub-cap-card__bar { height:3px;background:rgba(255,255,255,.06);border-radius:999px;overflow:hidden; }
.fclub-cap-card__bar::after {
  content:'';display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--cc,#22d3ee),rgba(255,255,255,.1));
  border-radius:999px;animation:fclubBar .9s ease .2s both;
}
@keyframes fclubBar { to { width:85% } }

/* ── S4 USE CASES SPLIT ── */
.fclub-usecase-split { display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start; }
.fclub-usecase-list { display:flex;flex-direction:column;gap:1.25rem; }
.fclub-usecase-item {
  display:flex;align-items:flex-start;gap:1.25rem;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:1.5rem 1.5rem;
  border-left:3px solid var(--uc,#22d3ee);
  transition:transform .2s,box-shadow .2s;
}
.fclub-usecase-item:hover { transform:translateX(4px);box-shadow:0 8px 24px rgba(0,0,0,.35); }
.fclub-usecase-item__icon {
  width:42px;height:42px;border-radius:10px;flex-shrink:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;color:var(--uc,#22d3ee);
}
.fclub-usecase-item__title { font-size:1rem;font-weight:700;color:#f1f5f9;margin-bottom:.4rem; }
.fclub-usecase-item__desc  { font-size:.85rem;color:#94a3b8;line-height:1.65;margin:0; }
.fclub-usecase-media { position:sticky;top:100px; }

/* club use cases image container */
.fclub-uc-img-wrap {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(34,211,238,0.2);
  box-shadow:
    0 0 0 1px rgba(167,139,250,0.1),
    0 0 32px rgba(34,211,238,0.08),
    0 8px 32px rgba(0,0,0,0.45);
  background: rgba(13,21,48,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px;
}
.fclub-uc-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.fclub-uc-img__fallback {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 240px;
  aspect-ratio: 16/9;
  color: rgba(255,255,255,0.25);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 0.75rem;
}
.fclub-uc-img__fallback i {
  font-size: 2.2rem;
  color: rgba(34,211,238,0.2);
}
@media (max-width: 640px) {
  .fclub-uc-img-wrap { padding: 2px; border-radius: 0.75rem; }
}

/* ── S5 OUTCOME ── */
.fclub-outcome-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-bottom:2.5rem; }
.fclub-outcome-card {
  display:flex;align-items:center;gap:1.25rem;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:1.5rem;
  border-left:4px solid var(--oc,#22d3ee);
  transition:transform .25s,box-shadow .25s;
}
.fclub-outcome-card:hover { transform:translateX(4px);box-shadow:0 8px 24px rgba(0,0,0,.4); }
.fclub-outcome-card__icon {
  font-size:1.4rem;color:var(--oc,#22d3ee);flex-shrink:0;
  width:44px;height:44px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
}
.fclub-outcome-card__val    { font-size:.96rem;font-weight:700;color:#f1f5f9;margin-bottom:.2rem; }
.fclub-outcome-card__detail { font-size:.78rem;color:#64748b;line-height:1.4; }

/* highlight banner */
.fclub-highlight-banner {
  display:flex;align-items:center;justify-content:center;gap:1rem;
  background:linear-gradient(135deg,rgba(34,211,238,.08),rgba(167,139,250,.08));
  border:1px solid rgba(34,211,238,.2);border-radius:14px;
  padding:1.5rem 2rem;font-size:1.15rem;color:#e2e8f0;
  margin-bottom:2.5rem;text-align:center;
}
.fclub-highlight-banner i { color:#22d3ee;font-size:1.2rem;flex-shrink:0; }
.fclub-highlight-banner strong { color:#22d3ee; }

/* final buttons */
.fclub-final-btns { display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap; }

/* buttons */
.fclub-btn-primary {
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.8rem 1.8rem;border-radius:8px;font-size:.88rem;font-weight:700;
  background:linear-gradient(135deg,#22d3ee,#0ea5e9);color:#050a1a;
  text-decoration:none;position:relative;overflow:hidden;
  transition:transform .2s,box-shadow .2s;
}
.fclub-btn-primary:hover { transform:translateY(-2px);box-shadow:0 8px 22px rgba(34,211,238,.35); }
.fclub-btn-primary__shimmer {
  position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.25) 50%,transparent 60%);
  transform:translateX(-100%);animation:fclubShimmer 2.5s infinite;
}
@keyframes fclubShimmer { to { transform:translateX(200%) } }
.fclub-btn-ghost {
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.4rem;border-radius:8px;font-size:.88rem;font-weight:600;
  background:rgba(255,255,255,.05);color:#e2e8f0;
  border:1px solid rgba(255,255,255,.12);text-decoration:none;
  transition:background .2s,border-color .2s,transform .2s;
}
.fclub-btn-ghost:hover { background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22);transform:translateY(-2px); }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .fclub-hero-split,
  .fclub-problem-split,
  .fclub-usecase-split { grid-template-columns:1fr; }
  .fclub-cap-grid { grid-template-columns:1fr; }
  .fclub-outcome-grid { grid-template-columns:1fr; }
  .fclub-hero-pills { flex-wrap:wrap; }
  .fclub-usecase-media { position:static; }
}
@media (max-width:600px) {
  .fclub-hero-ctas,
  .fclub-final-btns { flex-direction:column; }
  .fclub-advantage-card__stats { flex-direction:column;gap:1rem; }
}

/* ════════════════════════════════════════════════════════════
   FOOTBALL ACADEMIES PAGE  (/solutions/football-academies)
   prefix: facad-
════════════════════════════════════════════════════════════ */

/* ── Container & page shell ─────────────────────────────── */
.facad-page { background: var(--navy-deep); color: var(--white); }
.facad-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

/* ── Breadcrumb ─────────────────────────────────────────── */
.facad-breadcrumb { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
.facad-breadcrumb__item { color: var(--white-60); font-size: .85rem; text-decoration: none; transition: var(--transition); }
.facad-breadcrumb__item:hover { color: var(--cyan-bright); }
.facad-breadcrumb__sep { color: var(--white-20); font-size: .85rem; }
.facad-breadcrumb__cur { color: var(--cyan-bright); font-size: .85rem; }

/* ── Eyebrow ────────────────────────────────────────────── */
.facad-eyebrow {
  display: inline-block; font-size: .75rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--cyan-bright); margin-bottom: 1rem;
}

/* ── Gradient text ──────────────────────────────────────── */
.facad-grad {
  background: linear-gradient(135deg, var(--cyan-bright) 0%, var(--purple-bright) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Badges ─────────────────────────────────────────────── */
.facad-badge {
  display: inline-block; padding: .35rem .9rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.facad-badge--purple { background: rgba(124, 58, 237, .2); color: var(--purple-glow); border: 1px solid rgba(124, 58, 237, .35); }
.facad-badge--cyan   { background: rgba(6, 182, 212, .15);  color: var(--cyan-bright); border: 1px solid rgba(6, 182, 212, .3);  }
.facad-badge--teal   { background: rgba(52, 211, 153, .15); color: #34d399;             border: 1px solid rgba(52, 211, 153, .3);  }

/* ── Body copy ──────────────────────────────────────────── */
.facad-body { color: var(--white-60); line-height: 1.75; margin-bottom: 1.25rem; font-size: 1.05rem; }
.facad-body--hero { font-size: 1.1rem; max-width: 540px; }

/* ── Buttons ────────────────────────────────────────────── */
.facad-btn-primary {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 2rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--purple-bright) 0%, var(--cyan-dark) 100%);
  color: var(--white); font-weight: 700; font-size: .95rem; text-decoration: none;
  transition: var(--transition); box-shadow: 0 4px 24px rgba(124, 58, 237, .35);
}
.facad-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(124, 58, 237, .55); }
.facad-btn-primary__shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  transform: translateX(-100%); transition: transform .6s ease;
}
.facad-btn-primary:hover .facad-btn-primary__shimmer { transform: translateX(100%); }

.facad-btn-ghost {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.8rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2); color: var(--white-80);
  font-weight: 600; font-size: .95rem; text-decoration: none;
  transition: var(--transition); background: rgba(255,255,255,.04);
}
.facad-btn-ghost:hover { border-color: var(--cyan-bright); color: var(--cyan-bright); background: rgba(6,182,212,.08); }

/* ══════════════════════════════════════════════
   HERO / TOP SECTION
══════════════════════════════════════════════ */
.facad-top {
  position: relative; overflow: hidden;
  padding: 7rem 0 5rem;
  background: radial-gradient(ellipse at 20% 50%, rgba(74,30,158,.35) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 30%, rgba(8,145,178,.25) 0%, transparent 60%),
              var(--navy-deep);
}
.facad-top__bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.facad-top__glow-l {
  position: absolute; top: -80px; left: -120px;
  width: 500px; height: 500px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(124,58,237,.3) 0%, transparent 70%);
  animation: facad-pulse 6s ease-in-out infinite;
}
.facad-top__glow-r {
  position: absolute; top: 40px; right: -100px;
  width: 400px; height: 400px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(6,182,212,.2) 0%, transparent 70%);
  animation: facad-pulse 6s ease-in-out 3s infinite;
}
@keyframes facad-pulse { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.08)} }

.facad-top__title { font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 800; line-height: 1.15; margin-bottom: 1rem; }
.facad-top__sub { font-size: 1.2rem; color: var(--cyan-bright); font-weight: 500; margin-bottom: 1.25rem; }

/* hero split */
.facad-hero-split {
  display: grid; grid-template-columns: 1fr 0.55fr; gap: 3.5rem; align-items: start;
}
.facad-hero-split__text { display: flex; flex-direction: column; padding-top: 0.5rem; }
@media (max-width: 900px) {
  .facad-hero-split { grid-template-columns: 1fr; }
}

/* Football Academies — 9:16 vertical video */
.facad-shorts-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(167,139,250,0.32);
  box-shadow: 0 0 40px rgba(167,139,250,0.18), 0 8px 32px rgba(0,0,0,0.4);
}
.facad-shorts-glow {
  position: absolute; inset: 0;
  border-radius: 18px;
  background: radial-gradient(ellipse at 50% 0%, rgba(167,139,250,0.15) 0%, transparent 65%);
  pointer-events: none; z-index: 1;
}
.facad-shorts-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none; display: block;
}
@media (max-width: 900px) {
  .facad-shorts-frame { max-width: 320px; margin: 0 auto; }
}

/* hero pills */
.facad-hero-pills { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.facad-hero-pill {
  display: flex; flex-direction: column; align-items: center;
  padding: .6rem 1.4rem; border-radius: var(--radius-md);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
.facad-hero-pill__val  { font-size: 1.3rem; font-weight: 800; color: var(--cyan-bright); }
.facad-hero-pill__label { font-size: .72rem; color: var(--white-60); text-transform: uppercase; letter-spacing: .08em; }

/* hero ctas */
.facad-hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ── Video placeholder ──────────────────────────────────── */
.facad-placeholder--video {
  aspect-ratio: 16/9; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(74,30,158,.25) 0%, rgba(8,145,178,.15) 100%);
  border: 2px dashed rgba(6,182,212,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .75rem; min-height: 260px;
}
.facad-placeholder--video .facad-placeholder__play {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(6,182,212,.2); border: 2px solid rgba(6,182,212,.5);
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan-bright); font-size: 1.25rem;
}
.facad-placeholder--screen {
  aspect-ratio: 4/3; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(74,30,158,.2) 0%, rgba(8,145,178,.1) 100%);
  border: 2px dashed rgba(167,139,250,.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .75rem; min-height: 280px;
}
.facad-placeholder--screen .facad-placeholder__icon { font-size: 2.5rem; color: rgba(167,139,250,.6); }
.facad-placeholder__label { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--white-20); }
.facad-placeholder__sub { font-size: .85rem; color: var(--white-40, rgba(255,255,255,.4)); }

/* ══════════════════════════════════════════════
   GENERIC SECTION WRAPPER
══════════════════════════════════════════════ */
.facad-section { padding: 5rem 0; }
.facad-section--mid  { background: var(--navy-dark); }
.facad-section--dark { background: var(--navy-deep); }
.facad-section--final { position: relative; overflow: hidden; background: var(--navy-deep); }

.facad-final__bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.facad-final__glow-l {
  position: absolute; bottom: -100px; left: -80px;
  width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(124,58,237,.25) 0%, transparent 70%);
}
.facad-final__glow-r {
  position: absolute; top: -80px; right: -80px;
  width: 350px; height: 350px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(6,182,212,.2) 0%, transparent 70%);
}

.facad-section__header { text-align: center; max-width: 740px; margin: 0 auto 3.5rem; }
.facad-section__title { font-size: clamp(1.7rem, 3.5vw, 2.6rem); font-weight: 800; margin-bottom: .75rem; line-height: 1.2; }
.facad-section__title--left { text-align: left; }
.facad-section__sub { color: var(--white-60); font-size: 1.05rem; }

/* ══════════════════════════════════════════════
   S2 — WHY COGNITIVE TRAINING
══════════════════════════════════════════════ */
.facad-why-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start;
}
@media (max-width: 860px) {
  .facad-why-split { grid-template-columns: 1fr; }
}

/* skill list (left column) */
.facad-skill-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; }
.facad-skill-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem; border-radius: var(--radius-md);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  position: relative; overflow: hidden;
  transition: var(--transition);
}
.facad-skill-item:hover { border-color: var(--sk,#22d3ee); transform: translateX(4px); }
.facad-skill-item__icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sk,#22d3ee) 15%, transparent);
  color: var(--sk,#22d3ee); font-size: 1rem;
}
.facad-skill-item__label { font-weight: 600; color: var(--white-80); }
.facad-skill-item__bar {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--sk,#22d3ee); transform: scaleX(0); transform-origin: left;
  transition: transform .4s ease;
}
.facad-skill-item:hover .facad-skill-item__bar { transform: scaleX(1); }

/* gap card */
.facad-gap-card {
  padding: 1.25rem 1.5rem; border-radius: var(--radius-md);
  background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25);
  margin-bottom: 1.25rem;
}
.facad-gap-card__top { display: flex; align-items: flex-start; gap: .75rem; color: #fca5a5; font-weight: 500; }
.facad-gap-card__top i { color: #ef4444; font-size: 1.1rem; flex-shrink: 0; margin-top: .15rem; }

/* solution card */
.facad-solution-card {
  padding: 1.5rem; border-radius: var(--radius-md);
  background: rgba(52,211,153,.06); border: 1px solid rgba(52,211,153,.25);
}
.facad-solution-card__top { display: flex; align-items: flex-start; gap: .75rem; color: #86efac; font-weight: 600; margin-bottom: 1rem; }
.facad-solution-card__top i { color: #34d399; font-size: 1.1rem; flex-shrink: 0; margin-top: .15rem; }
.facad-solution-card__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.facad-solution-card__list li {
  padding-left: 1.5rem; position: relative; color: var(--white-60); font-size: .95rem;
}
.facad-solution-card__list li::before {
  content: '→'; position: absolute; left: 0; color: #34d399; font-weight: 700;
}

/* ══════════════════════════════════════════════
   S3 — BENEFITS GRID
══════════════════════════════════════════════ */
.facad-benefits-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
@media (max-width: 960px) { .facad-benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .facad-benefits-grid { grid-template-columns: 1fr; } }

.facad-benefit-card {
  position: relative; overflow: hidden;
  padding: 1.75rem 1.5rem; border-radius: var(--radius-lg);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  transition: var(--transition);
}
.facad-benefit-card:hover { border-color: var(--bc,#22d3ee); transform: translateY(-4px); background: rgba(255,255,255,.06); }
.facad-benefit-card::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg);
  background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--bc,#22d3ee) 12%, transparent) 0%, transparent 70%);
  opacity: 0; transition: opacity .35s ease;
}
.facad-benefit-card:hover::before { opacity: 1; }

.facad-benefit-card__header {
  display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem;
}
.facad-benefit-card__num { font-size: 1.8rem; font-weight: 900; color: var(--bc,#22d3ee); opacity: .25; line-height: 1; }
.facad-benefit-card__icon {
  width: 42px; height: 42px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bc,#22d3ee) 15%, transparent);
  color: var(--bc,#22d3ee); font-size: 1rem;
}
.facad-benefit-card__tag {
  margin-left: auto; padding: .25rem .7rem; border-radius: 999px; font-size: .7rem; font-weight: 700;
  background: color-mix(in srgb, var(--bc,#22d3ee) 15%, transparent);
  color: var(--bc,#22d3ee); border: 1px solid color-mix(in srgb, var(--bc,#22d3ee) 35%, transparent);
  text-transform: uppercase; letter-spacing: .06em;
}
.facad-benefit-card__title { font-size: 1rem; font-weight: 700; margin-bottom: .6rem; color: var(--white); }
.facad-benefit-card__desc { font-size: .875rem; color: var(--white-60); line-height: 1.65; margin-bottom: 1rem; }
.facad-benefit-card__bar {
  height: 3px; border-radius: 2px; background: var(--bc,#22d3ee);
  transform: scaleX(0); transform-origin: left; transition: transform .5s ease;
}
.facad-benefit-card:hover .facad-benefit-card__bar { transform: scaleX(1); }

/* ══════════════════════════════════════════════
   S4 — TALENT IDENTIFICATION
══════════════════════════════════════════════ */
.facad-talent-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center;
}
@media (max-width: 860px) { .facad-talent-split { grid-template-columns: 1fr; } }

.facad-metric-list { display: flex; flex-direction: column; gap: .9rem; margin: 1.5rem 0; }
.facad-metric-row {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 1.25rem; border-radius: var(--radius-md);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--mr,#22d3ee);
  transition: var(--transition);
}
.facad-metric-row:hover { background: rgba(255,255,255,.07); transform: translateX(4px); }
.facad-metric-row__icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--mr,#22d3ee) 15%, transparent);
  color: var(--mr,#22d3ee); font-size: .9rem;
}
.facad-metric-row__body { flex: 1; }
.facad-metric-row__label { font-size: .9rem; font-weight: 600; color: var(--white-80); }
.facad-metric-row__val { font-size: .8rem; font-weight: 700; color: var(--mr,#22d3ee); white-space: nowrap; }

.facad-insight-box {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.25rem 1.5rem; border-radius: var(--radius-md);
  background: rgba(234,179,8,.06); border: 1px solid rgba(234,179,8,.2);
}
.facad-insight-box i { color: #fbbf24; font-size: 1.1rem; flex-shrink: 0; margin-top: .15rem; }
.facad-insight-box p { color: var(--white-60); font-size: .9rem; line-height: 1.65; margin: 0; }
.facad-insight-box strong { color: var(--white-80); }

/* ══════════════════════════════════════════════
   S5 — LONG-TERM DEVELOPMENT
══════════════════════════════════════════════ */
.facad-dev-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 3.5rem;
}
@media (max-width: 1100px) { .facad-dev-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .facad-dev-grid { grid-template-columns: 1fr; } }

.facad-dev-card {
  padding: 1.75rem 1.5rem; border-radius: var(--radius-lg);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  transition: var(--transition); position: relative; overflow: hidden;
}
.facad-dev-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--dc,#22d3ee); transform: scaleX(0); transform-origin: left;
  transition: transform .45s ease;
}
.facad-dev-card:hover { border-color: var(--dc,#22d3ee); transform: translateY(-4px); }
.facad-dev-card:hover::after { transform: scaleX(1); }

.facad-dev-card__icon {
  width: 48px; height: 48px; border-radius: var(--radius-md); margin-bottom: 1rem;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--dc,#22d3ee) 15%, transparent);
  color: var(--dc,#22d3ee); font-size: 1.15rem;
}
.facad-dev-card__title { font-size: 1rem; font-weight: 700; margin-bottom: .6rem; }
.facad-dev-card__desc  { font-size: .875rem; color: var(--white-60); line-height: 1.65; margin-bottom: 1.25rem; }
.facad-dev-card__stat  { border-top: 1px solid rgba(255,255,255,.08); padding-top: 1rem; display: flex; flex-direction: column; gap: .15rem; }
.facad-dev-card__stat-val   { font-size: 1.4rem; font-weight: 900; color: var(--dc,#22d3ee); }
.facad-dev-card__stat-label { font-size: .75rem; color: var(--white-60); text-transform: uppercase; letter-spacing: .06em; }

/* ── Final banner ───────────────────────────────────────── */
.facad-final-banner {
  padding: 3rem 2.5rem; border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(74,30,158,.4) 0%, rgba(8,145,178,.3) 100%);
  border: 1px solid rgba(124,58,237,.4);
  display: flex; flex-wrap: wrap; align-items: center; gap: 2rem;
  box-shadow: 0 0 60px rgba(124,58,237,.2);
}
.facad-final-banner__icon {
  width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--purple-bright), var(--cyan-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: var(--white);
}
.facad-final-banner__text {
  flex: 1; min-width: 220px; font-size: 1.15rem; color: var(--white-80); line-height: 1.65;
}
.facad-final-banner__text strong { color: var(--white); }
.facad-final-banner__btns { display: flex; flex-wrap: wrap; gap: .9rem; }

/* ════════════════════════════════════════════════════════════
   PRIVATE TRAINING CENTERS  (/solutions/private-training-centers)
   prefix: ptc-
════════════════════════════════════════════════════════════ */

/* ── Shell & container ──────────────────────────────────── */
.ptc-page { background: var(--navy-deep); color: var(--white); }
.ptc-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

/* ── Breadcrumb ─────────────────────────────────────────── */
.ptc-breadcrumb { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
.ptc-breadcrumb__item { color: var(--white-60); font-size: .85rem; text-decoration: none; transition: var(--transition); }
.ptc-breadcrumb__item:hover { color: var(--cyan-bright); }
.ptc-breadcrumb__sep  { color: var(--white-20); font-size: .85rem; }
.ptc-breadcrumb__cur  { color: var(--cyan-bright); font-size: .85rem; }

/* ── Eyebrow ────────────────────────────────────────────── */
.ptc-eyebrow {
  display: inline-block; font-size: .75rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--cyan-bright); margin-bottom: 1rem;
}

/* ── Gradient text ──────────────────────────────────────── */
.ptc-grad {
  background: linear-gradient(135deg, var(--cyan-bright) 0%, var(--purple-bright) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── Badges ─────────────────────────────────────────────── */
.ptc-badge {
  display: inline-block; padding: .35rem .9rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.ptc-badge--cyan   { background: rgba(6,182,212,.15);  color: var(--cyan-bright); border: 1px solid rgba(6,182,212,.3);  }
.ptc-badge--purple { background: rgba(124,58,237,.2);  color: var(--purple-glow); border: 1px solid rgba(124,58,237,.35); }
.ptc-badge--teal   { background: rgba(52,211,153,.15); color: #34d399;             border: 1px solid rgba(52,211,153,.3);  }

/* ── Body copy ──────────────────────────────────────────── */
.ptc-body { color: var(--white-60); line-height: 1.75; margin-bottom: 1.25rem; font-size: 1.05rem; }
.ptc-body--hero { font-size: 1.1rem; }

/* ── Buttons ────────────────────────────────────────────── */
.ptc-btn-primary {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 2rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--purple-bright) 0%, var(--cyan-dark) 100%);
  color: var(--white); font-weight: 700; font-size: .95rem; text-decoration: none;
  transition: var(--transition); box-shadow: 0 4px 24px rgba(124,58,237,.35);
}
.ptc-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(124,58,237,.55); }
.ptc-btn-primary__shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  transform: translateX(-100%); transition: transform .6s ease;
}
.ptc-btn-primary:hover .ptc-btn-primary__shimmer { transform: translateX(100%); }

.ptc-btn-ghost {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.8rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2); color: var(--white-80);
  font-weight: 600; font-size: .95rem; text-decoration: none;
  transition: var(--transition); background: rgba(255,255,255,.04);
}
.ptc-btn-ghost:hover { border-color: var(--cyan-bright); color: var(--cyan-bright); background: rgba(6,182,212,.08); }

/* ══════════════════════════════════════════════
   HERO / TOP SECTION
══════════════════════════════════════════════ */
.ptc-top {
  position: relative; overflow: hidden;
  padding: 7rem 0 5rem;
  background: radial-gradient(ellipse at 20% 50%, rgba(74,30,158,.35) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 30%, rgba(8,145,178,.25) 0%, transparent 60%),
              var(--navy-deep);
}
.ptc-top__bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.ptc-top__glow-l {
  position: absolute; top: -80px; left: -120px;
  width: 500px; height: 500px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(124,58,237,.3) 0%, transparent 70%);
  animation: ptc-pulse 6s ease-in-out infinite;
}
.ptc-top__glow-r {
  position: absolute; top: 40px; right: -100px;
  width: 400px; height: 400px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(6,182,212,.2) 0%, transparent 70%);
  animation: ptc-pulse 6s ease-in-out 3s infinite;
}
@keyframes ptc-pulse { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.08)} }

.ptc-top__title { font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 800; line-height: 1.15; margin-bottom: 1rem; }
.ptc-top__sub   { font-size: 1.2rem; color: var(--cyan-bright); font-weight: 500; margin-bottom: 1.25rem; }

/* hero split */
.ptc-hero-split { display: grid; grid-template-columns: 1fr 0.55fr; gap: 3.5rem; align-items: start; }
.ptc-hero-split__text { display: flex; flex-direction: column; padding-top: 0.5rem; }
@media (max-width: 900px) { .ptc-hero-split { grid-template-columns: 1fr; } }

/* Private Training Centers — 9:16 vertical video */
.ptc-shorts-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(96,165,250,0.32);
  box-shadow: 0 0 40px rgba(96,165,250,0.18), 0 8px 32px rgba(0,0,0,0.4);
}
.ptc-shorts-glow {
  position: absolute; inset: 0;
  border-radius: 18px;
  background: radial-gradient(ellipse at 50% 0%, rgba(96,165,250,0.15) 0%, transparent 65%);
  pointer-events: none; z-index: 1;
}
.ptc-shorts-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none; display: block;
}
@media (max-width: 900px) {
  .ptc-shorts-frame { max-width: 320px; margin: 0 auto; }
}

/* hero pills */
.ptc-hero-pills { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.ptc-hero-pill {
  display: flex; flex-direction: column; align-items: center;
  padding: .6rem 1.4rem; border-radius: var(--radius-md);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
.ptc-hero-pill__val   { font-size: 1.3rem; font-weight: 800; color: var(--cyan-bright); }
.ptc-hero-pill__label { font-size: .72rem; color: var(--white-60); text-transform: uppercase; letter-spacing: .08em; }

/* hero ctas */
.ptc-hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ── Placeholders ────────────────────────────────────────── */
.ptc-placeholder--video {
  aspect-ratio: 16/9; border-radius: var(--radius-lg); min-height: 260px;
  background: linear-gradient(135deg, rgba(74,30,158,.25) 0%, rgba(8,145,178,.15) 100%);
  border: 2px dashed rgba(6,182,212,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
}
.ptc-placeholder--video .ptc-placeholder__play {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(6,182,212,.2); border: 2px solid rgba(6,182,212,.5);
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan-bright); font-size: 1.25rem;
}
.ptc-placeholder--vr {
  aspect-ratio: 4/3; border-radius: var(--radius-lg); min-height: 280px;
  background: linear-gradient(135deg, rgba(74,30,158,.2) 0%, rgba(8,145,178,.1) 100%);
  border: 2px dashed rgba(167,139,250,.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
}
.ptc-placeholder--vr .ptc-placeholder__icon { font-size: 2.8rem; color: rgba(167,139,250,.6); }
.ptc-placeholder__label { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--white-20); }
.ptc-placeholder__sub   { font-size: .85rem; color: rgba(255,255,255,.4); }

/* ══════════════════════════════════════════════
   SECTION WRAPPERS
══════════════════════════════════════════════ */
.ptc-section { padding: 5rem 0; }
.ptc-section--mid   { background: var(--navy-dark); }
.ptc-section--dark  { background: var(--navy-deep); }
.ptc-section--final { position: relative; overflow: hidden; background: var(--navy-deep); }

.ptc-final__bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.ptc-final__glow-l {
  position: absolute; bottom: -100px; left: -80px;
  width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(124,58,237,.25) 0%, transparent 70%);
}
.ptc-final__glow-r {
  position: absolute; top: -80px; right: -80px;
  width: 350px; height: 350px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(6,182,212,.2) 0%, transparent 70%);
}

.ptc-section__header { text-align: center; max-width: 740px; margin: 0 auto 3.5rem; }
.ptc-section__title  { font-size: clamp(1.7rem, 3.5vw, 2.6rem); font-weight: 800; margin-bottom: .75rem; line-height: 1.2; }
.ptc-section__title--left { text-align: left; }
.ptc-section__sub    { color: var(--white-60); font-size: 1.05rem; }

/* ══════════════════════════════════════════════
   S2 — TRAINING SERVICES GRID
══════════════════════════════════════════════ */
.ptc-services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
/* last card spans 2 columns on last row when 5 items → 3+2 layout */
.ptc-services-grid > .ptc-service-card:nth-child(4) { grid-column: span 1; }
@media (max-width: 960px) {
  .ptc-services-grid { grid-template-columns: repeat(2, 1fr); }
  .ptc-services-grid > .ptc-service-card:nth-child(5) { grid-column: span 2; }
}
@media (max-width: 600px) {
  .ptc-services-grid { grid-template-columns: 1fr; }
  .ptc-services-grid > .ptc-service-card:nth-child(5) { grid-column: span 1; }
}

.ptc-service-card {
  position: relative; overflow: hidden;
  padding: 1.75rem 1.5rem; border-radius: var(--radius-lg);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  transition: var(--transition);
}
.ptc-service-card:hover { border-color: var(--sc,#22d3ee); transform: translateY(-4px); background: rgba(255,255,255,.06); }
.ptc-service-card::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg);
  background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--sc,#22d3ee) 12%, transparent) 0%, transparent 70%);
  opacity: 0; transition: opacity .35s ease;
}
.ptc-service-card:hover::before { opacity: 1; }

.ptc-service-card__header {
  display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem;
}
.ptc-service-card__num  { font-size: 1.8rem; font-weight: 900; color: var(--sc,#22d3ee); opacity: .22; line-height: 1; }
.ptc-service-card__icon {
  width: 42px; height: 42px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sc,#22d3ee) 15%, transparent);
  color: var(--sc,#22d3ee); font-size: 1rem;
}
.ptc-service-card__tag {
  margin-left: auto; padding: .25rem .7rem; border-radius: 999px; font-size: .7rem; font-weight: 700;
  background: color-mix(in srgb, var(--sc,#22d3ee) 15%, transparent);
  color: var(--sc,#22d3ee); border: 1px solid color-mix(in srgb, var(--sc,#22d3ee) 35%, transparent);
  text-transform: uppercase; letter-spacing: .06em;
}
.ptc-service-card__title { font-size: 1rem; font-weight: 700; margin-bottom: .6rem; color: var(--white); }
.ptc-service-card__desc  { font-size: .875rem; color: var(--white-60); line-height: 1.65; margin-bottom: 1rem; }
.ptc-service-card__bar {
  height: 3px; border-radius: 2px; background: var(--sc,#22d3ee);
  transform: scaleX(0); transform-origin: left; transition: transform .5s ease;
}
.ptc-service-card:hover .ptc-service-card__bar { transform: scaleX(1); }

/* ══════════════════════════════════════════════
   S3 — BUSINESS OPPORTUNITY SPLIT
══════════════════════════════════════════════ */
.ptc-biz-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start;
}
@media (max-width: 900px) { .ptc-biz-split { grid-template-columns: 1fr; } }

/* opportunity list */
.ptc-opp-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.ptc-opp-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem; border-radius: var(--radius-md);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--oi,#22d3ee);
  transition: var(--transition); cursor: default;
}
.ptc-opp-item:hover { background: rgba(255,255,255,.07); transform: translateX(5px); }
.ptc-opp-item__icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--oi,#22d3ee) 15%, transparent);
  color: var(--oi,#22d3ee); font-size: .95rem;
}
.ptc-opp-item__body { flex: 1; display: flex; flex-direction: column; gap: .2rem; }
.ptc-opp-item__label  { font-weight: 700; color: var(--white-80); font-size: .95rem; }
.ptc-opp-item__detail { font-size: .8rem; color: var(--white-60); line-height: 1.4; }
.ptc-opp-item__arrow { color: var(--oi,#22d3ee); opacity: 0; transition: opacity .3s, transform .3s; }
.ptc-opp-item:hover .ptc-opp-item__arrow { opacity: 1; transform: translateX(4px); }

/* advantage card */
.ptc-advantage-card {
  position: relative; overflow: hidden;
  padding: 2rem; border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(74,30,158,.3) 0%, rgba(8,145,178,.2) 100%);
  border: 1px solid rgba(124,58,237,.4);
  box-shadow: 0 0 50px rgba(124,58,237,.2);
}
.ptc-advantage-card__glow {
  position: absolute; top: -60px; right: -60px;
  width: 240px; height: 240px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(124,58,237,.25) 0%, transparent 70%);
}
.ptc-advantage-card__icon {
  width: 52px; height: 52px; border-radius: 50%; margin-bottom: 1.25rem;
  background: linear-gradient(135deg, var(--purple-bright), var(--cyan-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: var(--white);
}
.ptc-advantage-card__title { font-size: 1.2rem; font-weight: 700; margin-bottom: .75rem; }
.ptc-advantage-card__desc  { color: var(--white-60); font-size: .95rem; line-height: 1.7; margin-bottom: 1.5rem; }
.ptc-advantage-card__desc strong { color: var(--white-80); }
.ptc-advantage-card__stats { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.ptc-adv-stat { display: flex; flex-direction: column; gap: .15rem; }
.ptc-adv-stat__val   { font-size: 1.5rem; font-weight: 900; color: var(--cyan-bright); }
.ptc-adv-stat__label { font-size: .72rem; color: var(--white-60); text-transform: uppercase; letter-spacing: .06em; }
.ptc-advantage-card__link {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--cyan-bright); font-size: .875rem; font-weight: 600; text-decoration: none;
  transition: var(--transition);
}
.ptc-advantage-card__link:hover { gap: .9rem; }

/* ══════════════════════════════════════════════
   S4 — PLAYER BENEFITS SPLIT
══════════════════════════════════════════════ */
.ptc-benefits-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center;
}
@media (max-width: 900px) { .ptc-benefits-split { grid-template-columns: 1fr; } }

/* benefit rows */
.ptc-benefit-list { display: flex; flex-direction: column; gap: 1rem; margin: 1.5rem 0; }
.ptc-benefit-row {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1rem 1.25rem; border-radius: var(--radius-md);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  transition: var(--transition); position: relative; overflow: hidden;
}
.ptc-benefit-row::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--pb,#22d3ee); transform: scaleY(0); transform-origin: top;
  transition: transform .4s ease;
}
.ptc-benefit-row:hover { background: rgba(255,255,255,.07); transform: translateX(4px); }
.ptc-benefit-row:hover::after { transform: scaleY(1); }
.ptc-benefit-row__icon {
  width: 42px; height: 42px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--pb,#22d3ee) 15%, transparent);
  color: var(--pb,#22d3ee); font-size: 1rem;
}
.ptc-benefit-row__body { flex: 1; }
.ptc-benefit-row__label { display: block; font-weight: 700; color: var(--white-80); margin-bottom: .25rem; }
.ptc-benefit-row__desc  { font-size: .85rem; color: var(--white-60); line-height: 1.55; }
.ptc-benefit-row__dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: .5rem;
  background: var(--pb,#22d3ee); opacity: .5; transition: opacity .3s;
}
.ptc-benefit-row:hover .ptc-benefit-row__dot { opacity: 1; }

/* VR stats overlay */
.ptc-benefits-split__right { position: relative; }
.ptc-vr-stats {
  display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; justify-content: center;
}
.ptc-vr-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: .5rem 1.1rem; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--vs,#22d3ee) 10%, rgba(10,22,40,.9));
  border: 1px solid color-mix(in srgb, var(--vs,#22d3ee) 35%, transparent);
}
.ptc-vr-stat__val   { font-size: 1.15rem; font-weight: 900; color: var(--vs,#22d3ee); }
.ptc-vr-stat__label { font-size: .7rem; color: var(--white-60); text-transform: uppercase; letter-spacing: .06em; }

/* players-improve image container */
.ptc-players-img-wrap {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(34,211,238,0.2);
  box-shadow:
    0 0 0 1px rgba(167,139,250,0.1),
    0 0 32px rgba(34,211,238,0.08),
    0 8px 32px rgba(0,0,0,0.45);
  background: rgba(13,21,48,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px;
  margin-bottom: 1rem;
}
.ptc-players-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.ptc-players-img__fallback {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 220px;
  aspect-ratio: 16/9;
  color: rgba(255,255,255,0.25);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 0.75rem;
}
.ptc-players-img__fallback i {
  font-size: 2.2rem;
  color: rgba(34,211,238,0.2);
}
@media (max-width: 640px) {
  .ptc-players-img-wrap { padding: 2px; border-radius: 0.75rem; }
}

/* ══════════════════════════════════════════════
   S5 — FINAL BANNER
══════════════════════════════════════════════ */
.ptc-final-banner {
  padding: 3rem 2.5rem; border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(74,30,158,.4) 0%, rgba(8,145,178,.3) 100%);
  border: 1px solid rgba(124,58,237,.4);
  display: flex; flex-wrap: wrap; align-items: center; gap: 2rem;
  box-shadow: 0 0 60px rgba(124,58,237,.2);
}
.ptc-final-banner__icon {
  width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--purple-bright), var(--cyan-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: var(--white);
}
.ptc-final-banner__text {
  flex: 1; min-width: 220px; font-size: 1.15rem; color: var(--white-80); line-height: 1.65;
}
.ptc-final-banner__text strong { color: var(--white); }
.ptc-final-banner__btns { display: flex; flex-wrap: wrap; gap: .9rem; }

/* ════════════════════════════════════════════════════════════
   REHABILITATION CENTERS  (/solutions/rehabilitation-centers)
   prefix: rhb-
════════════════════════════════════════════════════════════ */

/* ── Shell & container ──────────────────────────────────── */
.rhb-page { background: var(--navy-deep); color: var(--white); }
.rhb-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

/* ── Breadcrumb ─────────────────────────────────────────── */
.rhb-breadcrumb { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
.rhb-breadcrumb__item { color: var(--white-60); font-size: .85rem; text-decoration: none; transition: var(--transition); }
.rhb-breadcrumb__item:hover { color: var(--cyan-bright); }
.rhb-breadcrumb__sep { color: var(--white-20); font-size: .85rem; }
.rhb-breadcrumb__cur { color: var(--cyan-bright); font-size: .85rem; }

/* ── Eyebrow ────────────────────────────────────────────── */
.rhb-eyebrow {
  display: inline-block; font-size: .75rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--cyan-bright); margin-bottom: 1rem;
}

/* ── Gradient text ──────────────────────────────────────── */
.rhb-grad {
  background: linear-gradient(135deg, #34d399 0%, var(--cyan-bright) 50%, var(--purple-bright) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── Badges ─────────────────────────────────────────────── */
.rhb-badge {
  display: inline-block; padding: .35rem .9rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.rhb-badge--cyan   { background: rgba(6,182,212,.15);   color: var(--cyan-bright); border: 1px solid rgba(6,182,212,.3);   }
.rhb-badge--purple { background: rgba(124,58,237,.2);   color: var(--purple-glow); border: 1px solid rgba(124,58,237,.35);  }
.rhb-badge--amber  { background: rgba(245,158,11,.12);  color: #fbbf24;             border: 1px solid rgba(245,158,11,.3);   }
.rhb-badge--green  { background: rgba(52,211,153,.12);  color: #34d399;             border: 1px solid rgba(52,211,153,.3);   }

/* ── Body copy ──────────────────────────────────────────── */
.rhb-body { color: var(--white-60); line-height: 1.75; margin-bottom: 1.25rem; font-size: 1.05rem; }
.rhb-body--hero { font-size: 1.1rem; }

/* ── Buttons ────────────────────────────────────────────── */
.rhb-btn-primary {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 2rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--purple-bright) 0%, var(--cyan-dark) 100%);
  color: var(--white); font-weight: 700; font-size: .95rem; text-decoration: none;
  transition: var(--transition); box-shadow: 0 4px 24px rgba(124,58,237,.35);
}
.rhb-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(124,58,237,.55); }
.rhb-btn-primary__shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  transform: translateX(-100%); transition: transform .6s ease;
}
.rhb-btn-primary:hover .rhb-btn-primary__shimmer { transform: translateX(100%); }

.rhb-btn-ghost {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.8rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2); color: var(--white-80);
  font-weight: 600; font-size: .95rem; text-decoration: none;
  transition: var(--transition); background: rgba(255,255,255,.04);
}
.rhb-btn-ghost:hover { border-color: var(--cyan-bright); color: var(--cyan-bright); background: rgba(6,182,212,.08); }

/* ══════════════════════════════════════════════
   HERO / TOP SECTION
══════════════════════════════════════════════ */
.rhb-top {
  position: relative; overflow: hidden;
  padding: 7rem 0 5rem;
  background: radial-gradient(ellipse at 20% 50%, rgba(52,211,153,.2) 0%, transparent 55%),
              radial-gradient(ellipse at 80% 30%, rgba(8,145,178,.2) 0%, transparent 55%),
              radial-gradient(ellipse at 60% 80%, rgba(74,30,158,.25) 0%, transparent 55%),
              var(--navy-deep);
}
.rhb-top__bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.rhb-top__glow-l {
  position: absolute; top: -80px; left: -120px;
  width: 500px; height: 500px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(52,211,153,.2) 0%, transparent 70%);
  animation: rhb-pulse 7s ease-in-out infinite;
}
.rhb-top__glow-r {
  position: absolute; top: 40px; right: -100px;
  width: 400px; height: 400px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(6,182,212,.2) 0%, transparent 70%);
  animation: rhb-pulse 7s ease-in-out 3.5s infinite;
}
@keyframes rhb-pulse { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.08)} }

.rhb-top__title { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; line-height: 1.15; margin-bottom: 1rem; }
.rhb-top__sub   { font-size: 1.2rem; color: #34d399; font-weight: 500; margin-bottom: 1.25rem; }

/* hero split */
.rhb-hero-split { display: grid; grid-template-columns: 1fr 0.62fr; gap: 3rem; align-items: start; }
.rhb-hero-split__text { display: flex; flex-direction: column; padding-top: 0.5rem; }
@media (max-width: 900px) { .rhb-hero-split { grid-template-columns: 1fr; } }

/* hero pills */
.rhb-hero-pills { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.rhb-hero-pill {
  display: flex; flex-direction: column; align-items: center;
  padding: .6rem 1.4rem; border-radius: var(--radius-md);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
.rhb-hero-pill__val   { font-size: 1.3rem; font-weight: 800; color: #34d399; }
.rhb-hero-pill__label { font-size: .72rem; color: var(--white-60); text-transform: uppercase; letter-spacing: .08em; }

/* hero ctas */
.rhb-hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ── Hero visual — 9:16 vertical video (Shorts) ─────────── */
.rhb-shorts-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(52,211,153,0.32);
  box-shadow:
    0 0 0 1px rgba(52,211,153,0.10),
    0 0 40px rgba(52,211,153,0.18),
    0 0 14px rgba(52,211,153,0.10),
    0 24px 64px rgba(0,0,0,0.60);
}
.rhb-shorts-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 18px;
  display: block;
}
.rhb-shorts-glow {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse 80% 40% at 50% 100%,
    rgba(52,211,153,0.18) 0%, transparent 70%);
}
@media (max-width: 900px) {
  .rhb-shorts-frame { max-width: 320px; margin: 0 auto; }
}

/* ══════════════════════════════════════════════
   SECTION WRAPPERS
══════════════════════════════════════════════ */
.rhb-section { padding: 5rem 0; }
.rhb-section--mid   { background: var(--navy-dark); }
.rhb-section--dark  { background: var(--navy-deep); }
.rhb-section--final { position: relative; overflow: hidden; background: var(--navy-deep); }

.rhb-final__bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.rhb-final__glow-l {
  position: absolute; bottom: -100px; left: -80px;
  width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(52,211,153,.2) 0%, transparent 70%);
}
.rhb-final__glow-r {
  position: absolute; top: -80px; right: -80px;
  width: 350px; height: 350px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(6,182,212,.18) 0%, transparent 70%);
}

.rhb-section__header { text-align: center; max-width: 740px; margin: 0 auto 3.5rem; }
.rhb-section__title  { font-size: clamp(1.7rem, 3.5vw, 2.6rem); font-weight: 800; margin-bottom: .75rem; line-height: 1.2; }
.rhb-section__title--left { text-align: left; }
.rhb-section__sub    { color: var(--white-60); font-size: 1.05rem; }

/* ══════════════════════════════════════════════
   S2 — BENEFITS GRID
══════════════════════════════════════════════ */
.rhb-benefits-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
@media (max-width: 960px) { .rhb-benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .rhb-benefits-grid { grid-template-columns: 1fr; } }

.rhb-benefit-card {
  position: relative; overflow: hidden;
  padding: 1.75rem 1.5rem; border-radius: var(--radius-lg);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  transition: var(--transition);
}
.rhb-benefit-card:hover { border-color: var(--bc,#22d3ee); transform: translateY(-4px); background: rgba(255,255,255,.06); }
.rhb-benefit-card::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg);
  background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--bc,#22d3ee) 12%, transparent) 0%, transparent 70%);
  opacity: 0; transition: opacity .35s ease;
}
.rhb-benefit-card:hover::before { opacity: 1; }

.rhb-benefit-card__header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.rhb-benefit-card__num  { font-size: 1.8rem; font-weight: 900; color: var(--bc,#22d3ee); opacity: .22; line-height: 1; }
.rhb-benefit-card__icon {
  width: 42px; height: 42px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bc,#22d3ee) 15%, transparent);
  color: var(--bc,#22d3ee); font-size: 1rem;
}
.rhb-benefit-card__tag {
  margin-left: auto; padding: .25rem .7rem; border-radius: 999px; font-size: .7rem; font-weight: 700;
  background: color-mix(in srgb, var(--bc,#22d3ee) 15%, transparent);
  color: var(--bc,#22d3ee); border: 1px solid color-mix(in srgb, var(--bc,#22d3ee) 35%, transparent);
  text-transform: uppercase; letter-spacing: .06em;
}
.rhb-benefit-card__title { font-size: 1rem; font-weight: 700; margin-bottom: .6rem; }
.rhb-benefit-card__desc  { font-size: .875rem; color: var(--white-60); line-height: 1.65; margin-bottom: 1rem; }
.rhb-benefit-card__bar {
  height: 3px; border-radius: 2px; background: var(--bc,#22d3ee);
  transform: scaleX(0); transform-origin: left; transition: transform .5s ease;
}
.rhb-benefit-card:hover .rhb-benefit-card__bar { transform: scaleX(1); }

/* ══════════════════════════════════════════════
   S3 — RETURN-TO-PLAY SPLIT
══════════════════════════════════════════════ */
.rhb-rtp-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start;
}
@media (max-width: 900px) { .rhb-rtp-split { grid-template-columns: 1fr; } }

/* struggle list */
.rhb-struggle-list { margin: 1.5rem 0; }
.rhb-struggle-list__heading { font-size: .85rem; font-weight: 700; color: var(--white-60); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; }

.rhb-struggle-item {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1rem 1.25rem; border-radius: var(--radius-md); margin-bottom: .9rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--si,#ef4444);
  transition: var(--transition);
}
.rhb-struggle-item:hover { background: rgba(255,255,255,.07); transform: translateX(4px); }
.rhb-struggle-item__icon {
  width: 38px; height: 38px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--si,#ef4444) 15%, transparent);
  color: var(--si,#ef4444); font-size: .9rem;
}
.rhb-struggle-item__body { display: flex; flex-direction: column; gap: .2rem; }
.rhb-struggle-item__label { font-weight: 700; color: var(--white-80); font-size: .9rem; }
.rhb-struggle-item__desc  { font-size: .8rem; color: var(--white-60); line-height: 1.5; }

/* solution box */
.rhb-solution-box {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.25rem 1.5rem; border-radius: var(--radius-md);
  background: rgba(52,211,153,.06); border: 1px solid rgba(52,211,153,.25);
  margin-top: 1.5rem;
}
.rhb-solution-box__icon { color: #34d399; font-size: 1.2rem; flex-shrink: 0; margin-top: .15rem; }
.rhb-solution-box p     { color: var(--white-60); font-size: .9rem; line-height: 1.65; margin: 0; }
.rhb-solution-box strong { color: var(--white-80); }

/* timeline */
.rhb-timeline { display: flex; flex-direction: column; gap: 0; }
.rhb-timeline__label {
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--white-60); margin-bottom: 1.5rem;
}
.rhb-timeline__item {
  display: flex; gap: 1.25rem; position: relative; padding-bottom: 1.5rem;
}
.rhb-timeline__item:not(:last-child)::before {
  content: ''; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, var(--tc,#22d3ee) 0%, rgba(255,255,255,.06) 100%);
}
.rhb-timeline__dot {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--tc,#22d3ee) 20%, rgba(10,22,40,1));
  border: 2px solid var(--tc,#22d3ee); color: var(--tc,#22d3ee); font-size: .9rem;
  z-index: 1;
}
.rhb-timeline__content { flex: 1; padding-top: .35rem; }
.rhb-timeline__phase {
  display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--tc,#22d3ee); margin-bottom: .25rem;
}
.rhb-timeline__title { display: block; font-weight: 700; color: var(--white-80); margin-bottom: .35rem; }
.rhb-timeline__body  { font-size: .85rem; color: var(--white-60); line-height: 1.6; }

/* ══════════════════════════════════════════════
   S4 — SAFE TRAINING SPLIT
══════════════════════════════════════════════ */
.rhb-safe-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center;
}
@media (max-width: 900px) { .rhb-safe-split { grid-template-columns: 1fr; } }

/* VR placeholder */
.rhb-placeholder--vr {
  aspect-ratio: 4/3; border-radius: var(--radius-lg); min-height: 260px;
  background: linear-gradient(135deg, rgba(52,211,153,.15) 0%, rgba(6,182,212,.1) 100%);
  border: 2px dashed rgba(52,211,153,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
}
.rhb-placeholder--vr .rhb-placeholder__icon { font-size: 2.8rem; color: rgba(52,211,153,.55); }
.rhb-placeholder__label { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--white-20); }
.rhb-placeholder__sub   { font-size: .85rem; color: rgba(255,255,255,.4); }

/* safe stats */
.rhb-safe-stats { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; margin-top: 1rem; }
.rhb-safe-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: .5rem 1.1rem; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--ss,#34d399) 10%, rgba(10,22,40,.9));
  border: 1px solid color-mix(in srgb, var(--ss,#34d399) 35%, transparent);
}
.rhb-safe-stat__val   { font-size: 1.15rem; font-weight: 900; color: var(--ss,#34d399); }
.rhb-safe-stat__label { font-size: .7rem; color: var(--white-60); text-transform: uppercase; letter-spacing: .06em; }

/* safe list */
.rhb-safe-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.rhb-safe-item {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1rem 1.25rem; border-radius: var(--radius-md);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  transition: var(--transition); position: relative; overflow: hidden;
}
.rhb-safe-item::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--si2,#34d399); transform: scaleY(0); transform-origin: top;
  transition: transform .4s ease;
}
.rhb-safe-item:hover { background: rgba(255,255,255,.07); transform: translateX(4px); }
.rhb-safe-item:hover::after { transform: scaleY(1); }
.rhb-safe-item__icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--si2,#34d399) 15%, transparent);
  color: var(--si2,#34d399); font-size: .95rem;
}
.rhb-safe-item__body { flex: 1; display: flex; flex-direction: column; gap: .2rem; }
.rhb-safe-item__label { font-weight: 700; color: var(--white-80); font-size: .9rem; }
.rhb-safe-item__desc  { font-size: .8rem; color: var(--white-60); line-height: 1.5; }

/* ══════════════════════════════════════════════
   S5 — FINAL BANNER
══════════════════════════════════════════════ */
.rhb-final-banner {
  padding: 3rem 2.5rem; border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(52,211,153,.2) 0%, rgba(8,145,178,.25) 50%, rgba(74,30,158,.3) 100%);
  border: 1px solid rgba(52,211,153,.3);
  display: flex; flex-wrap: wrap; align-items: center; gap: 2rem;
  box-shadow: 0 0 60px rgba(52,211,153,.15);
}
.rhb-final-banner__icon {
  width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #34d399, var(--cyan-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: var(--white);
}
.rhb-final-banner__text {
  flex: 1; min-width: 220px; font-size: 1.15rem; color: var(--white-80); line-height: 1.65;
}
.rhb-final-banner__text strong { color: var(--white); }
.rhb-final-banner__btns { display: flex; flex-wrap: wrap; gap: .9rem; }

/* ════════════════════════════════════════════════════════════
   FEDERATIONS PAGE  (/solutions/federations)
   prefix: fed-
════════════════════════════════════════════════════════════ */

/* ── Shell & container ──────────────────────────────────── */
.fed-page { background: var(--navy-deep); color: var(--white); }
.fed-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

/* ── Breadcrumb ─────────────────────────────────────────── */
.fed-breadcrumb { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
.fed-breadcrumb__item { color: var(--white-60); font-size: .85rem; text-decoration: none; transition: var(--transition); }
.fed-breadcrumb__item:hover { color: var(--cyan-bright); }
.fed-breadcrumb__sep { color: var(--white-20); font-size: .85rem; }
.fed-breadcrumb__cur { color: var(--cyan-bright); font-size: .85rem; }

/* ── Eyebrow ────────────────────────────────────────────── */
.fed-eyebrow {
  display: inline-block; font-size: .75rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--cyan-bright); margin-bottom: 1rem;
}

/* ── Gradient text ──────────────────────────────────────── */
.fed-grad {
  background: linear-gradient(135deg, var(--cyan-bright) 0%, var(--purple-bright) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── Badges ─────────────────────────────────────────────── */
.fed-badge {
  display: inline-block; padding: .35rem .9rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.fed-badge--cyan   { background: rgba(6,182,212,.15);  color: var(--cyan-bright); border: 1px solid rgba(6,182,212,.3);   }
.fed-badge--purple { background: rgba(124,58,237,.2);  color: var(--purple-glow); border: 1px solid rgba(124,58,237,.35); }
.fed-badge--teal   { background: rgba(52,211,153,.12); color: #34d399;             border: 1px solid rgba(52,211,153,.3);  }
.fed-badge--amber  { background: rgba(245,158,11,.12); color: #fbbf24;             border: 1px solid rgba(245,158,11,.3);  }

/* ── Body copy ──────────────────────────────────────────── */
.fed-body { color: var(--white-60); line-height: 1.75; margin-bottom: 1.25rem; font-size: 1.05rem; }
.fed-body--hero { font-size: 1.1rem; max-width: 560px; }

/* ── Buttons ────────────────────────────────────────────── */
.fed-btn-primary {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 2rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--purple-bright) 0%, var(--cyan-dark) 100%);
  color: var(--white); font-weight: 700; font-size: .95rem; text-decoration: none;
  transition: var(--transition); box-shadow: 0 4px 24px rgba(124,58,237,.35);
}
.fed-btn-primary--sm { padding: .7rem 1.6rem; font-size: .875rem; margin-top: .5rem; }
.fed-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(124,58,237,.55); }
.fed-btn-primary__shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  transform: translateX(-100%); transition: transform .6s ease;
}
.fed-btn-primary:hover .fed-btn-primary__shimmer { transform: translateX(100%); }

.fed-btn-ghost {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.8rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2); color: var(--white-80);
  font-weight: 600; font-size: .95rem; text-decoration: none;
  transition: var(--transition); background: rgba(255,255,255,.04);
}
.fed-btn-ghost:hover { border-color: var(--cyan-bright); color: var(--cyan-bright); background: rgba(6,182,212,.08); }

/* ══════════════════════════════════════════════
   HERO / TOP SECTION
══════════════════════════════════════════════ */
.fed-top {
  position: relative; overflow: hidden;
  padding: 7rem 0 5rem;
  background: radial-gradient(ellipse at 20% 50%, rgba(74,30,158,.35) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 30%, rgba(8,145,178,.25) 0%, transparent 60%),
              var(--navy-deep);
}
.fed-top__bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.fed-top__glow-l {
  position: absolute; top: -80px; left: -120px;
  width: 500px; height: 500px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(124,58,237,.3) 0%, transparent 70%);
  animation: fed-pulse 6s ease-in-out infinite;
}
.fed-top__glow-r {
  position: absolute; top: 40px; right: -100px;
  width: 400px; height: 400px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(6,182,212,.2) 0%, transparent 70%);
  animation: fed-pulse 6s ease-in-out 3s infinite;
}
@keyframes fed-pulse { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.08)} }

.fed-top__title { font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 800; line-height: 1.15; margin-bottom: 1rem; }
.fed-top__sub   { font-size: 1.2rem; color: var(--cyan-bright); font-weight: 500; margin-bottom: 1.25rem; }

/* hero split */
.fed-hero-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3.5rem; align-items: center; }
.fed-hero-split__text { display: flex; flex-direction: column; }
@media (max-width: 900px) { .fed-hero-split { grid-template-columns: 1fr; } }

/* hero pills */
.fed-hero-pills { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.fed-hero-pill {
  display: flex; flex-direction: column; align-items: center;
  padding: .6rem 1.4rem; border-radius: var(--radius-md);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
.fed-hero-pill__val   { font-size: 1.3rem; font-weight: 800; color: var(--cyan-bright); }
.fed-hero-pill__label { font-size: .72rem; color: var(--white-60); text-transform: uppercase; letter-spacing: .08em; }

/* hero ctas */
.fed-hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ── Network visual ─────────────────────────────────────── */
.fed-network-visual {
  position: relative; width: 100%; max-width: 380px; margin: 0 auto;
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
}
.fed-network-visual__ring {
  position: absolute; border-radius: 50%;
  animation: fed-ring-spin 22s linear infinite;
}
.fed-network-visual__ring--outer {
  inset: 0; border: 1px solid rgba(34,211,238,.18);
  animation-duration: 28s; animation-direction: reverse;
}
.fed-network-visual__ring--inner {
  inset: 16%; border: 1px solid rgba(124,58,237,.25);
  animation-duration: 16s;
}
@keyframes fed-ring-spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

.fed-network-visual__core {
  width: 88px; height: 88px; border-radius: 50%; z-index: 2;
  background: linear-gradient(135deg, rgba(74,30,158,.45) 0%, rgba(8,145,178,.35) 100%);
  border: 2px solid rgba(6,182,212,.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: var(--cyan-bright);
  box-shadow: 0 0 50px rgba(6,182,212,.3);
  animation: fed-core-pulse 3.5s ease-in-out infinite;
}
@keyframes fed-core-pulse { 0%,100%{box-shadow:0 0 50px rgba(6,182,212,.3)} 50%{box-shadow:0 0 80px rgba(6,182,212,.6)} }

.fed-network-nodes { position: absolute; inset: 0; pointer-events: none; }
.fed-network-node {
  position: absolute; padding: .32rem .8rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700; white-space: nowrap;
  background: color-mix(in srgb, var(--nn,#22d3ee) 15%, rgba(10,22,40,.95));
  border: 1px solid color-mix(in srgb, var(--nn,#22d3ee) 40%, transparent);
  color: var(--nn,#22d3ee);
}
.fed-network-node--top    { top: 4%;  left: 50%; transform: translateX(-50%); }
.fed-network-node--right  { top: 50%; right: 1%; transform: translateY(-50%); }
.fed-network-node--bottom { bottom: 4%; left: 50%; transform: translateX(-50%); }
.fed-network-node--left   { top: 50%; left: 1%; transform: translateY(-50%); }

/* ══════════════════════════════════════════════
   SECTION WRAPPERS
══════════════════════════════════════════════ */
.fed-section { padding: 5rem 0; }
.fed-section--mid   { background: var(--navy-dark); }
.fed-section--dark  { background: var(--navy-deep); }
.fed-section--final { position: relative; overflow: hidden; background: var(--navy-deep); }

.fed-final__bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.fed-final__glow-l {
  position: absolute; bottom: -100px; left: -80px;
  width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(124,58,237,.25) 0%, transparent 70%);
}
.fed-final__glow-r {
  position: absolute; top: -80px; right: -80px;
  width: 350px; height: 350px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(6,182,212,.2) 0%, transparent 70%);
}

.fed-section__header { text-align: center; max-width: 780px; margin: 0 auto 3.5rem; }
.fed-section__title  { font-size: clamp(1.7rem, 3.5vw, 2.6rem); font-weight: 800; margin-bottom: .75rem; line-height: 1.2; }
.fed-section__title--left { text-align: left; }
.fed-section__sub    { color: var(--white-60); font-size: 1.05rem; }

/* ══════════════════════════════════════════════
   S2 — TALENT IDENTIFICATION SPLIT
══════════════════════════════════════════════ */
.fed-talent-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start;
}
@media (max-width: 900px) { .fed-talent-split { grid-template-columns: 1fr; } }

/* metric cards grid */
.fed-metrics-grid { display: flex; flex-direction: column; gap: 1rem; }
.fed-metric-card {
  padding: 1.25rem 1.5rem; border-radius: var(--radius-md);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--mc,#22d3ee);
  transition: var(--transition); position: relative; overflow: hidden;
}
.fed-metric-card:hover { background: rgba(255,255,255,.07); transform: translateX(5px); }
.fed-metric-card__top { display: flex; align-items: center; gap: .9rem; margin-bottom: .5rem; }
.fed-metric-card__icon {
  width: 38px; height: 38px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--mc,#22d3ee) 15%, transparent);
  color: var(--mc,#22d3ee); font-size: .9rem;
}
.fed-metric-card__header { flex: 1; display: flex; justify-content: space-between; align-items: center; }
.fed-metric-card__label { font-weight: 700; color: var(--white-80); font-size: .95rem; }
.fed-metric-card__val   { font-size: .75rem; font-weight: 700; color: var(--mc,#22d3ee);
  padding: .2rem .6rem; border-radius: 999px;
  background: color-mix(in srgb, var(--mc,#22d3ee) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--mc,#22d3ee) 30%, transparent);
}
.fed-metric-card__desc { font-size: .82rem; color: var(--white-60); line-height: 1.55; margin-bottom: .75rem; }
.fed-metric-card__bar {
  height: 2px; border-radius: 2px; background: var(--mc,#22d3ee);
  transform: scaleX(0); transform-origin: left; transition: transform .5s ease;
}
.fed-metric-card:hover .fed-metric-card__bar { transform: scaleX(1); }

/* ══════════════════════════════════════════════
   S3 — STANDARDIZED TESTING
══════════════════════════════════════════════ */
.fed-testing-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start;
}
@media (max-width: 960px) { .fed-testing-layout { grid-template-columns: 1fr; } }

/* protocol card */
.fed-protocol-card {
  padding: 2rem; border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(74,30,158,.2) 0%, rgba(8,145,178,.15) 100%);
  border: 1px solid rgba(124,58,237,.3);
}
.fed-protocol-card__icon {
  width: 52px; height: 52px; border-radius: var(--radius-md); margin-bottom: 1.25rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(124,58,237,.2); color: var(--purple-glow); font-size: 1.2rem;
}
.fed-protocol-card__title { font-size: 1.15rem; font-weight: 700; margin-bottom: .75rem; }
.fed-protocol-card__desc  { color: var(--white-60); font-size: .9rem; line-height: 1.7; margin-bottom: 1.5rem; }
.fed-protocol-card__steps { display: flex; flex-direction: column; gap: 1rem; }
.fed-protocol-step {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: .9rem 1rem; border-radius: var(--radius-md);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
}
.fed-protocol-step__num {
  font-size: 1rem; font-weight: 900; color: var(--purple-glow); opacity: .5;
  line-height: 1; flex-shrink: 0; margin-top: .1rem;
}
.fed-protocol-step__body { display: flex; flex-direction: column; gap: .2rem; }
.fed-protocol-step__label { font-weight: 700; color: var(--white-80); font-size: .875rem; }
.fed-protocol-step__desc  { font-size: .8rem; color: var(--white-60); line-height: 1.5; }

/* testing benefits */
.fed-testing-benefits { display: flex; flex-direction: column; gap: 1.25rem; }
.fed-test-benefit {
  display: flex; gap: 1.1rem; align-items: flex-start;
  padding: 1.25rem 1.5rem; border-radius: var(--radius-md);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-top: 3px solid var(--tb,#22d3ee);
  transition: var(--transition);
}
.fed-test-benefit:hover { background: rgba(255,255,255,.07); transform: translateY(-3px); }
.fed-test-benefit__icon {
  width: 44px; height: 44px; border-radius: var(--radius-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--tb,#22d3ee) 15%, transparent);
  color: var(--tb,#22d3ee); font-size: 1rem;
}
.fed-test-benefit__title { font-size: .95rem; font-weight: 700; margin-bottom: .4rem; color: var(--white-80); }
.fed-test-benefit__desc  { font-size: .835rem; color: var(--white-60); line-height: 1.6; }

/* ══════════════════════════════════════════════
   S4 — EDUCATION & RESEARCH GRID
══════════════════════════════════════════════ */
.fed-edu-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
@media (max-width: 960px) { .fed-edu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .fed-edu-grid { grid-template-columns: 1fr; } }

.fed-edu-card {
  position: relative; overflow: hidden;
  padding: 1.75rem 1.5rem; border-radius: var(--radius-lg);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  transition: var(--transition);
}
.fed-edu-card:hover { border-color: var(--ec,#22d3ee); transform: translateY(-4px); background: rgba(255,255,255,.06); }
.fed-edu-card::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg);
  background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--ec,#22d3ee) 10%, transparent) 0%, transparent 65%);
  opacity: 0; transition: opacity .35s ease;
}
.fed-edu-card:hover::before { opacity: 1; }

.fed-edu-card__header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.fed-edu-card__num  { font-size: 1.8rem; font-weight: 900; color: var(--ec,#22d3ee); opacity: .22; line-height: 1; }
.fed-edu-card__icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ec,#22d3ee) 15%, transparent);
  color: var(--ec,#22d3ee); font-size: 1.1rem;
}
.fed-edu-card__title { font-size: 1rem; font-weight: 700; margin-bottom: .6rem; color: var(--white); }
.fed-edu-card__desc  { font-size: .85rem; color: var(--white-60); line-height: 1.65; margin-bottom: 1rem; }
.fed-edu-card__list  {
  list-style: none; padding: 0; display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1rem;
}
.fed-edu-card__list li {
  font-size: .8rem; color: var(--white-60); padding-left: 1.2rem; position: relative; line-height: 1.5;
}
.fed-edu-card__list li::before {
  content: '›'; position: absolute; left: 0; color: var(--ec,#22d3ee); font-weight: 700;
}
.fed-edu-card__bar {
  height: 3px; border-radius: 2px; background: var(--ec,#22d3ee);
  transform: scaleX(0); transform-origin: left; transition: transform .5s ease;
}
.fed-edu-card:hover .fed-edu-card__bar { transform: scaleX(1); }

/* ══════════════════════════════════════════════
   S5 — CENTRALIZED DATA SYSTEM
══════════════════════════════════════════════ */
.fed-data-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center;
}
@media (max-width: 900px) { .fed-data-split { grid-template-columns: 1fr; } }

/* data nodes */
.fed-data-nodes { display: flex; flex-direction: column; gap: .9rem; margin: 1.5rem 0; }
.fed-data-node {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem; border-radius: var(--radius-md);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  transition: var(--transition);
}
.fed-data-node:hover { background: rgba(255,255,255,.07); transform: translateX(5px); border-color: var(--dn,#22d3ee); }
.fed-data-node__icon {
  width: 42px; height: 42px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--dn,#22d3ee) 15%, transparent);
  color: var(--dn,#22d3ee); font-size: 1rem;
}
.fed-data-node__body { flex: 1; display: flex; flex-direction: column; gap: .15rem; }
.fed-data-node__label { font-weight: 700; color: var(--white-80); font-size: .95rem; }
.fed-data-node__count { font-size: .8rem; color: var(--white-60); }
.fed-data-node__indicator {
  width: 8px; height: 8px; border-radius: 50%; background: var(--dn,#22d3ee);
  box-shadow: 0 0 8px var(--dn,#22d3ee); animation: fed-blink 2s ease-in-out infinite;
}
@keyframes fed-blink { 0%,100%{opacity:.5} 50%{opacity:1} }

/* data callout */
.fed-data-callout {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.25rem 1.5rem; border-radius: var(--radius-md);
  background: rgba(245,158,11,.06); border: 1px solid rgba(245,158,11,.2);
}
.fed-data-callout i { color: #fbbf24; font-size: 1.1rem; flex-shrink: 0; margin-top: .15rem; }
.fed-data-callout p { color: var(--white-60); font-size: .9rem; line-height: 1.65; margin: 0; }
.fed-data-callout strong { color: var(--white-80); }

/* database visual */
.fed-db-visual {
  position: relative; overflow: hidden;
  padding: 2rem; border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(74,30,158,.25) 0%, rgba(8,145,178,.2) 100%);
  border: 1px solid rgba(6,182,212,.3);
  box-shadow: 0 0 50px rgba(6,182,212,.15);
}
.fed-db-visual__glow {
  position: absolute; top: -40px; right: -40px;
  width: 200px; height: 200px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(6,182,212,.2) 0%, transparent 70%);
}
.fed-db-visual__icon {
  width: 56px; height: 56px; border-radius: 50%; margin-bottom: 1.25rem;
  background: linear-gradient(135deg, rgba(8,145,178,.4), rgba(74,30,158,.4));
  border: 2px solid rgba(6,182,212,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: var(--cyan-bright);
}
.fed-db-visual__title { font-size: .875rem; font-weight: 700; color: var(--white-80); margin-bottom: 1.5rem; letter-spacing: .04em; }
.fed-db-rows { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1.5rem; }
.fed-db-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .65rem 1rem; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.05); border-left: 2px solid var(--dr,#22d3ee);
}
.fed-db-row__label { font-size: .78rem; color: var(--white-60); }
.fed-db-row__val   { font-size: .78rem; font-weight: 700; color: var(--dr,#22d3ee); }
.fed-db-visual__pulse {
  height: 2px; border-radius: 2px; margin-top: .5rem;
  background: linear-gradient(90deg, var(--cyan-bright), var(--purple-bright), var(--cyan-bright));
  background-size: 200% 100%;
  animation: fed-scan 2.5s linear infinite;
}
@keyframes fed-scan { 0%{background-position:0% 0%} 100%{background-position:200% 0%} }

/* ══════════════════════════════════════════════
   S6 — FINAL BANNER
══════════════════════════════════════════════ */
.fed-final-banner {
  padding: 3rem 2.5rem; border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(74,30,158,.4) 0%, rgba(8,145,178,.3) 100%);
  border: 1px solid rgba(124,58,237,.4);
  display: flex; flex-wrap: wrap; align-items: center; gap: 2rem;
  box-shadow: 0 0 60px rgba(124,58,237,.2);
}
.fed-final-banner__icon {
  width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--purple-bright), var(--cyan-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: var(--white);
}
.fed-final-banner__text {
  flex: 1; min-width: 220px; font-size: 1.15rem; color: var(--white-80); line-height: 1.65;
}
.fed-final-banner__text strong { color: var(--white); }
.fed-final-banner__btns { display: flex; flex-wrap: wrap; gap: .9rem; }


/* ============================================================
   TEAM PAGE  (/company/team)   prefix: tm-
   v2 — real members, portrait aspect-ratio frame, social area
   ============================================================ */

/* ── CSS custom-property defaults ── */
.tm-founder-card,
.tm-dev-card {
  --tm-accent:    #00c8ff;
  --tm-badge-bg:  rgba(0,200,255,.12);
  --tm-glow:      rgba(0,200,255,.28);
}

/* ================================================================
   HERO
   ================================================================ */
.tm-hero {
  position: relative;
  overflow: hidden;
  padding: 6.5rem 1.5rem 5rem;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(0,200,255,.07) 0%, transparent 70%),
    linear-gradient(180deg, #07080f 0%, #0b0d17 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align: center;
}
.tm-hero__inner {
  max-width: 780px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Breadcrumb */
.tm-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.tm-breadcrumb__item {
  font-size: .75rem;
  color: rgba(255,255,255,.4);
  text-decoration: none;
  transition: color .2s;
}
.tm-breadcrumb__item:hover        { color: #00c8ff; }
.tm-breadcrumb__item--cur         { color: rgba(255,255,255,.65); }
.tm-breadcrumb__sep               { color: rgba(255,255,255,.2); font-size: .75rem; }

/* Eyebrow */
.tm-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #00c8ff;
  background: rgba(0,200,255,.1);
  border: 1px solid rgba(0,200,255,.25);
  border-radius: 100px;
  padding: .3rem .9rem;
  margin-bottom: 1.5rem;
}

/* Headline */
.tm-hero__headline {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 1.25rem;
}
.tm-hero__gradient {
  background: linear-gradient(135deg, #00c8ff 0%, #a855f7 55%, #22c55e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subheadline */
.tm-hero__sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,.58);
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto 2rem;
}

/* Pills */
.tm-pills {
  display: flex;
  gap: .7rem;
  justify-content: center;
  flex-wrap: wrap;
}
.tm-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 100px;
  padding: .38rem 1rem;
}
.tm-pill i { color: #00c8ff; font-size: .72rem; }

/* Floating deco badges */
.tm-hero__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.tm-deco-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 100px;
  padding: .4rem .9rem;
  white-space: nowrap;
  animation: tm-float 6s ease-in-out infinite;
}
.tm-deco-badge i { font-size: .78rem; }
.tm-deco-badge--1 { top: 20%; left: 4%;  animation-delay: 0s;   color: #00c8ff; border-color: rgba(0,200,255,.2); }
.tm-deco-badge--2 { top: 58%; left: 3%;  animation-delay: 1.6s; }
.tm-deco-badge--3 { top: 22%; right: 4%; animation-delay: .9s;  color: #a855f7; border-color: rgba(168,85,247,.2); }
.tm-deco-badge--4 { top: 60%; right: 3%; animation-delay: 2.3s; color: #22c55e; border-color: rgba(34,197,94,.2); }
@keyframes tm-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* ================================================================
   SECTION WRAPPERS
   ================================================================ */
.tm-section           { padding: 5.5rem 1.5rem; }
.tm-section--dark     { background: #0b0d17; }
.tm-section--mid      { background: #0d0f1c; }
.tm-section__inner    { max-width: 1160px; margin: 0 auto; }

/* Section header */
.tm-section-header    { text-align: center; margin-bottom: 3.75rem; }

.tm-section-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #00c8ff;
  background: rgba(0,200,255,.08);
  border: 1px solid rgba(0,200,255,.2);
  border-radius: 100px;
  padding: .28rem .8rem;
  margin-bottom: 1rem;
}
.tm-section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: .75rem;
}
.tm-highlight {
  background: linear-gradient(135deg, #00c8ff, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.tm-section-desc {
  font-size: 1rem;
  color: rgba(255,255,255,.52);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ================================================================
   LEADERSHIP / FOUNDERS ROW  — 3 large equal cards
   ================================================================ */
.tm-founders-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: start;
}
@media (max-width: 860px)  { .tm-founders-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px)  { .tm-founders-row { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; } }

/* ================================================================
   DEVELOPMENT TEAM GRID  — responsive equal cards
   ================================================================ */
.tm-dev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
@media (max-width: 440px)  { .tm-dev-grid { grid-template-columns: 1fr; } }

/* ================================================================
   SHARED CARD BASE
   ================================================================ */
.tm-founder-card,
.tm-dev-card {
  position: relative;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  padding: 2rem 1.5rem 5.25rem; /* bottom reserved for socials */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
  transition:
    transform     .3s cubic-bezier(.25,.8,.25,1),
    box-shadow    .3s ease,
    border-color  .3s ease,
    background    .3s ease;
  cursor: default;
}
.tm-founder-card:hover,
.tm-dev-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 52px var(--tm-glow);
  border-color: var(--tm-accent);
  background: rgba(255,255,255,.055);
}

/* Accent top-bar */
.tm-card__top-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--tm-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
  border-radius: 18px 18px 0 0;
}
.tm-founder-card:hover .tm-card__top-bar,
.tm-dev-card:hover     .tm-card__top-bar { transform: scaleX(1); }

/* "Founding Partner" label — above portrait in founder cards */
.tm-card__partner-label {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tm-accent);
  background: var(--tm-badge-bg);
  border: 1px solid var(--tm-accent);
  border-radius: 100px;
  padding: .2rem .75rem;
  margin-bottom: 1.25rem;
}

/* ================================================================
   PORTRAIT SYSTEM
   Two layered divs (.tm-portrait__layer--default / --hover) share
   the same absolute frame.  The default fades out on hover,
   revealing the hover layer beneath.  Both sit inside
   .tm-portrait which uses aspect-ratio to keep the frame square
   without any layout jump.
   ================================================================ */

/* Large portrait (leadership cards) */
.tm-portrait--lg {
  position: relative;
  width: 148px;
  height: 148px;           /* fixed square — no layout jump */
  border-radius: 50%;
  margin: 0 auto 1.5rem;
  flex-shrink: 0;
}

/* Small portrait (dev-team cards) */
.tm-portrait--sm {
  position: relative;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  margin: 0 auto 1.25rem;
  flex-shrink: 0;
}

/* Both layers occupy exactly the same frame */
.tm-portrait__layer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--tm-accent);
}

/* Default layer — on top, full opacity at rest */
.tm-portrait__layer--default {
  z-index: 2;
  opacity: 1;
  transition: opacity 350ms ease;
}
/* Hover layer — underneath, always fully rendered */
.tm-portrait__layer--hover {
  z-index: 1;
  opacity: 1; /* always visible underneath */
}
/* On card hover: fade the default layer out → hover layer shows */
.tm-founder-card:hover .tm-portrait__layer--default,
.tm-dev-card:hover     .tm-portrait__layer--default {
  opacity: 0;
}

/* Real portrait image */
.tm-portrait__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Placeholder (shown when photo URLs are empty) */
.tm-portrait__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.09));
  font-size: 2.8rem;
  color: rgba(255,255,255,.18);
  transition: color .35s ease;
}
/* Hover placeholder tints with accent colour */
.tm-portrait__placeholder--hover {
  background: linear-gradient(135deg, var(--tm-badge-bg), rgba(255,255,255,.03));
  color: var(--tm-accent);
  opacity: .65;
}

/* Glow ring behind portrait on hover */
.tm-portrait__glow {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: var(--tm-accent);
  opacity: 0;
  filter: blur(10px);
  z-index: 0;
  transition: opacity .35s ease;
}
.tm-founder-card:hover .tm-portrait__glow,
.tm-dev-card:hover     .tm-portrait__glow { opacity: .28; }

/* ================================================================
   CARD CONTENT
   ================================================================ */
.tm-card__identity  { margin-bottom: .8rem; width: 100%; }

.tm-card__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin: 0 0 .25rem;
}
.tm-card__name--sm { font-size: .95rem; }

.tm-card__title {
  font-size: .78rem;
  font-weight: 600;
  color: var(--tm-accent);
  margin: 0;
  letter-spacing: .02em;
}

.tm-card__desc {
  font-size: .85rem;
  color: rgba(255,255,255,.52);
  line-height: 1.65;
  margin-bottom: .5rem;
  flex-grow: 1;
  width: 100%;
}
.tm-card__desc--sm { font-size: .8rem; }

/* ================================================================
   SOCIAL ICONS — absolute at card bottom, always visible
   ================================================================ */
.tm-card__socials {
  position: absolute;
  bottom: 1.35rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: .65rem;
}

.tm-card__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.45);
  font-size: .82rem;
  text-decoration: none;
  transition:
    background    .25s ease,
    color         .25s ease,
    border-color  .25s ease,
    transform     .2s ease;
}
.tm-card__social-link:hover {
  background: var(--tm-badge-bg);
  color: var(--tm-accent);
  border-color: var(--tm-accent);
  transform: translateY(-2px);
}
/* Inactive state — link not yet configured */
.tm-card__social-link--inactive {
  opacity: .3;
  pointer-events: none;
  cursor: default;
}

/* ================================================================
   JOIN BANNER
   ================================================================ */
.tm-join-banner {
  padding: 5.5rem 1.5rem;
  background:
    radial-gradient(ellipse 80% 55% at 50% 100%, rgba(0,200,255,.07) 0%, transparent 70%),
    linear-gradient(180deg, #0d0f1c 0%, #07080f 100%);
  border-top: 1px solid rgba(255,255,255,.06);
  text-align: center;
}
.tm-join-banner__inner { max-width: 580px; margin: 0 auto; }

.tm-join-banner__title {
  font-size: clamp(1.75rem, 3.5vw, 2.35rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
}
.tm-join-banner__gradient {
  background: linear-gradient(135deg, #00c8ff, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.tm-join-banner__body {
  font-size: 1rem;
  color: rgba(255,255,255,.52);
  line-height: 1.7;
  margin-bottom: 2.25rem;
}
.tm-join-banner__ctas {
  display: flex;
  gap: .85rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ================================================================
   BUTTONS
   ================================================================ */
.tm-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 600;
  border-radius: 8px;
  padding: .72rem 1.5rem;
  text-decoration: none;
  transition: all .25s ease;
  white-space: nowrap;
}
.tm-btn--primary {
  background: linear-gradient(135deg, #00c8ff, #0076ff);
  color: #fff;
  border: 1px solid transparent;
}
.tm-btn--primary:hover {
  opacity: .88;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,200,255,.32);
}
.tm-btn--ghost {
  background: transparent;
  color: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.14);
}
.tm-btn--ghost:hover {
  border-color: rgba(255,255,255,.3);
  color: #fff;
  background: rgba(255,255,255,.04);
}

/* ================================================================
   REVEAL SCROLL ANIMATION
   ================================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}


/* ============================================================
   HARDWARE / SYSTEM REQUIREMENTS PAGE  prefix: hw-
   /technology/hardware
   ============================================================ */

/* ── HERO ── */
.hw-hero {
  position: relative;
  padding: 5.5rem 1.5rem 4.5rem;
  background: linear-gradient(160deg, #0b0d17 0%, #0f1120 60%, #0b0e1a 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}
.hw-hero::before {
  content: '';
  position: absolute;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 400px;
  background: radial-gradient(ellipse, rgba(0,118,255,.12) 0%, transparent 70%);
  pointer-events: none;
}
.hw-hero__inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* breadcrumb */
.hw-breadcrumb {
  display: flex; align-items: center; justify-content: center;
  gap: .4rem; margin-bottom: 1.75rem; flex-wrap: wrap;
}
.hw-breadcrumb__item {
  font-size: .75rem; color: rgba(255,255,255,.4);
  text-decoration: none; transition: color .2s;
}
.hw-breadcrumb__item:hover        { color: #3b82f6; }
.hw-breadcrumb__item--cur         { color: rgba(255,255,255,.65); }
.hw-breadcrumb__sep               { color: rgba(255,255,255,.2); font-size: .75rem; }

/* eyebrow */
.hw-eyebrow {
  display: inline-block;
  font-size: .72rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: #3b82f6;
  background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.25);
  border-radius: 100px; padding: .28rem .85rem; margin-bottom: 1.25rem;
}

/* headline */
.hw-hero__headline {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800; line-height: 1.15; color: #fff; margin-bottom: 1rem;
}
.hw-hero__gradient {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.hw-hero__sub {
  font-size: 1.05rem; color: rgba(255,255,255,.6);
  line-height: 1.7; max-width: 640px; margin: 0 auto 2rem;
}

/* overview banner */
.hw-overview-banner {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; flex-wrap: wrap;
  background: linear-gradient(135deg, #1d4ed8, #7c3aed);
  border-radius: 12px; padding: 1rem 2rem;
  margin-bottom: 1.75rem;
}
.hw-overview-banner__item {
  display: flex; align-items: center; gap: .5rem;
  font-size: .9rem; font-weight: 700; color: #fff;
}
.hw-overview-banner__item i { font-size: 1rem; }
.hw-overview-banner__divider {
  width: 1px; height: 24px; background: rgba(255,255,255,.3);
}
@media (max-width: 560px) {
  .hw-overview-banner { flex-direction: column; gap: .75rem; }
  .hw-overview-banner__divider { display: none; }
}

.hw-hero__body {
  font-size: .95rem; color: rgba(255,255,255,.58);
  line-height: 1.75; max-width: 680px; margin: 0 auto 1.75rem;
}

/* benefit pills */
.hw-hero__benefits {
  display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap;
}
.hw-hero__benefit {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 100px; padding: .38rem 1rem;
}
.hw-hero__benefit i { color: #3b82f6; }

/* ── SECTION BASE ── */
.hw-section { padding: 5rem 1.5rem; }
.hw-section--light { background: linear-gradient(160deg, #0d1224 0%, #111827 50%, #0c1a2e 100%); }
.hw-section--dark  { background: #0f172a; }
.hw-section--deep  { background: #0b0f1e; }
.hw-section__inner { max-width: 960px; margin: 0 auto; }

/* section header */
.hw-section-header { text-align: center; margin-bottom: 2.5rem; }

.hw-section-tag {
  display: inline-block;
  font-size: .7rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; border-radius: 100px;
  padding: .28rem .8rem; margin-bottom: .85rem;
}
.hw-section-tag--blue   { color: #93c5fd; background: rgba(59,130,246,.15); border: 1px solid rgba(59,130,246,.35); }
.hw-section-tag--orange { color: #f97316; background: rgba(249,115,22,.12); border: 1px solid rgba(249,115,22,.3); }
.hw-section-tag--green  { color: #22c55e; background: rgba(34,197,94,.12);  border: 1px solid rgba(34,197,94,.3);  }

.hw-section-title {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: 800; color: #fff; margin-bottom: .65rem;
}
.hw-section-title--dark { color: #f1f5f9; }

.hw-section-desc {
  font-size: .98rem; color: rgba(255,255,255,.55);
  max-width: 620px; margin: 0 auto; line-height: 1.7;
}
.hw-section-desc--dark  { color: rgba(226,232,240,0.6); }

/* ── MINIMUM REQUIREMENT BANNER ── */
.hw-min-banner {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  background: linear-gradient(135deg, #1d4ed8, #6d28d9);
  border-radius: 10px; padding: 1rem 1.75rem;
  margin-bottom: 2rem; color: #fff;
  font-size: .95rem; font-weight: 700;
}
.hw-min-banner i { font-size: 1.2rem; color: #93c5fd; }

/* ── SCREENSHOT WRAPPER ── */
.hw-screenshot-wrap {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(0,0,0,.18);
  background: #fff;
  margin-bottom: 2rem;
}
.hw-screenshot {
  width: 100%; height: auto; display: block;
}
.hw-screenshot--rounded { border-radius: 14px; }

/* ── NO PC / INTERNET INFO CARDS ── */
.hw-info-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 640px) { .hw-info-row { grid-template-columns: 1fr; } }

.hw-info-card {
  display: flex; align-items: flex-start; gap: 1rem;
  border-radius: 12px; padding: 1.25rem 1.5rem;
  border: 1px solid;
}
.hw-info-card--red {
  background: rgba(220,38,38,0.1); border-color: rgba(248,113,113,0.3); color: #fca5a5;
}
.hw-info-card--green {
  background: rgba(22,163,74,0.1); border-color: rgba(74,222,128,0.3); color: #86efac;
}
.hw-info-card strong { display: block; font-size: .95rem; margin-bottom: .35rem; color: #f1f5f9; }
.hw-info-card p { font-size: .85rem; margin: 0; line-height: 1.6; color: rgba(226,232,240,0.6); opacity: 1; }

.hw-info-card__icon {
  width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.hw-info-card--red   .hw-info-card__icon { background: rgba(220,38,38,0.18); color: #f87171; }
.hw-info-card--green .hw-info-card__icon { background: rgba(22,163,74,0.18); color: #4ade80; }

/* ── OPTIONAL HEADER ── */
.hw-optional-header { text-align: center; margin-bottom: 1.5rem; }
.hw-optional-title  { font-size: 1.5rem; font-weight: 800; color: #f1f5f9; }

/* ─────────────────────────────────────────────
   hwr — Hardware Requirement Cards
───────────────────────────────────────────── */
.hwr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}
@media (max-width: 768px) {
  .hwr-grid { grid-template-columns: 1fr; }
}

/* ── Card shell ── */
.hwr-card {
  position: relative;
  border-radius: 1.1rem;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(8,12,30,0.8);
  backdrop-filter: blur(12px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.hwr-card:hover { transform: translateY(-4px); }

/* per-card accent colours */
.hwr-card--1 { border-color: rgba(59,130,246,0.22);  box-shadow: 0 4px 28px rgba(59,130,246,0.08); }
.hwr-card--2 { border-color: rgba(167,139,250,0.22); box-shadow: 0 4px 28px rgba(167,139,250,0.08); }
.hwr-card--3 { border-color: rgba(34,197,94,0.22);   box-shadow: 0 4px 28px rgba(34,197,94,0.08); }

.hwr-card--1:hover { border-color: rgba(59,130,246,0.45);  box-shadow: 0 8px 40px rgba(59,130,246,0.16); }
.hwr-card--2:hover { border-color: rgba(167,139,250,0.45); box-shadow: 0 8px 40px rgba(167,139,250,0.16); }
.hwr-card--3:hover { border-color: rgba(34,197,94,0.45);   box-shadow: 0 8px 40px rgba(34,197,94,0.16); }

/* top glow blob */
.hwr-card__glow {
  position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  width: 180px; height: 180px; border-radius: 50%;
  filter: blur(48px); opacity: 0.18; pointer-events: none;
  transition: opacity 0.3s ease;
}
.hwr-card--1 .hwr-card__glow { background: #3b82f6; }
.hwr-card--2 .hwr-card__glow { background: #a78bfa; }
.hwr-card--3 .hwr-card__glow { background: #22c55e; }
.hwr-card:hover .hwr-card__glow { opacity: 0.32; }

/* ── Badge ── */
.hwr-card__badge {
  position: absolute; top: 0.85rem; left: 0.85rem;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px; padding: 0.2rem 0.6rem;
}

/* ── Image / icon area ── */
.hwr-card__img-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1.75rem 1.5rem;
  flex-shrink: 0;
  min-height: 200px;
  /* transparent — PNG images have no background */
  background: transparent;
  border-radius: 0.75rem 0.75rem 0 0;
  transition: box-shadow 0.35s ease;
}

/* Real hardware PNG images — transparent background */
.hwr-card__hw-img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: 180px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.6));
  transition: transform 0.35s ease, filter 0.35s ease;
}
.hwr-card:hover .hwr-card__hw-img {
  transform: translateY(-6px) scale(1.05);
  filter: drop-shadow(0 14px 30px rgba(0,0,0,0.75));
}
/* Per-card hover glow under image */
.hwr-card--1:hover .hwr-card__img-wrap {
  box-shadow: inset 0 -8px 28px rgba(59,130,246,0.13);
}
.hwr-card--2:hover .hwr-card__img-wrap {
  box-shadow: inset 0 -8px 28px rgba(167,139,250,0.13);
}
.hwr-card--3:hover .hwr-card__img-wrap {
  box-shadow: inset 0 -8px 28px rgba(34,197,94,0.13);
}

/* Fallback (shown only when image fails) */
.hwr-card__hw-fallback {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 180px;
  font-size: 3.5rem;
  opacity: 0.25;
}
.hwr-card--1 .hwr-card__hw-fallback { color: #3b82f6; }
.hwr-card--2 .hwr-card__hw-fallback { color: #a78bfa; }
.hwr-card--3 .hwr-card__hw-fallback { color: #22c55e; }

/* Legacy placeholder icon (unused but kept for safety) */
.hwr-card__placeholder-ico { display: none; }

/* ── Divider line ── */
.hwr-card__divider {
  height: 1px; background: rgba(255,255,255,0.06); margin: 0 1.1rem;
}

/* ── Body row: icon + name/qty ── */
.hwr-card__body {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 1rem 1.1rem 0.6rem;
}
.hwr-card__icon-wrap {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.hwr-card__icon-wrap--blue   { background: rgba(59,130,246,0.15);  color: #60a5fa;  border: 1px solid rgba(59,130,246,0.3); }
.hwr-card__icon-wrap--purple { background: rgba(167,139,250,0.15); color: #a78bfa;  border: 1px solid rgba(167,139,250,0.3); }
.hwr-card__icon-wrap--green  { background: rgba(34,197,94,0.12);   color: #4ade80;  border: 1px solid rgba(34,197,94,0.3); }

.hwr-card__info { flex: 1; min-width: 0; }
.hwr-card__name {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em;
  color: #fff; text-transform: uppercase; line-height: 1.25;
}
.hwr-card__qty {
  font-size: 0.72rem; font-weight: 500;
  color: rgba(255,255,255,0.38); margin-top: 0.15rem;
}

/* ── Description ── */
.hwr-card__desc {
  font-size: 0.8rem; color: rgba(255,255,255,0.42);
  line-height: 1.6; margin: 0;
  padding: 0 1.1rem 1.25rem;
}

/* ── SOFTWARE ACCENT TEXT ── */
.hw-accent-text { color: #f97316; }

/* ── OPTIONAL EQUIPMENT CARDS ── */
.hw-opt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
@media (max-width: 640px) {
  .hw-opt-grid { grid-template-columns: 1fr; }
}

.hw-opt-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.hw-opt-card:hover {
  box-shadow: 0 8px 32px rgba(99,102,241,0.18);
  border-color: rgba(139,92,246,0.35);
  transform: translateY(-2px);
}

/* header row: icon + title */
.hw-opt-card__header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.hw-opt-card__icon-wrap {
  width: 38px; height: 38px;
  border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.hw-opt-card__icon-wrap--blue { background: rgba(59,130,246,0.18); color: #93c5fd; border: 1px solid rgba(59,130,246,0.3); }
.hw-opt-card__icon-wrap--cyan { background: rgba(6,182,212,0.18);  color: #67e8f9; border: 1px solid rgba(6,182,212,0.3); }

.hw-opt-card__title {
  font-size: 0.88rem; font-weight: 700;
  color: rgba(255,255,255,0.9); line-height: 1.25;
}
.hw-opt-card__subtitle {
  font-size: 0.75rem; color: rgba(255,255,255,0.45); margin-top: 0.1rem;
}

/* image placeholder area */
/* ── Optional card image area ── */
.hw-opt-card__img-area {
  flex: 1;
  display: flex;
  align-items: center; justify-content: center;
  min-height: 160px;
  margin: 0.75rem 1.1rem;
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
  transition: box-shadow 0.3s ease;
}
.hw-opt-card:hover .hw-opt-card__img-area {
  box-shadow: 0 0 20px rgba(139,92,246,0.12);
}

/* Backup Battery — PNG with transparent bg, contain */
.hw-opt-card__hw-img {
  display: block;
  width: 100%;
  max-width: 200px;
  height: 160px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.6));
  transition: transform 0.35s ease, filter 0.35s ease;
}
/* External Display — JPG fills full area, cover */
.hw-opt-card__hw-img--cover {
  max-width: 100%;
  width: 100%;
  height: 160px;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  filter: none;
}
.hw-opt-card:hover .hw-opt-card__hw-img {
  transform: translateY(-4px) scale(1.04);
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.75));
}
.hw-opt-card:hover .hw-opt-card__hw-img--cover {
  transform: scale(1.03);
  filter: brightness(1.05);
}

/* Fallback (on image error) */
.hw-opt-card__hw-fallback {
  display: none;
  align-items: center; justify-content: center;
  width: 100%; height: 160px;
  font-size: 2rem;
  color: rgba(255,255,255,0.2);
}

/* footer note */
.hw-opt-card__footer {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.75rem; color: rgba(255,255,255,0.4);
  padding: 0.7rem 1.25rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.hw-opt-card__footer i { color: rgba(255,255,255,0.25); font-size: 0.72rem; flex-shrink: 0; }

/* ── SOFTWARE STRONG MESSAGES ── */
.hw-sw-message {
  display: flex; gap: 1.5rem; justify-content: center;
  flex-wrap: wrap; margin-top: 2rem;
}
.hw-sw-message__item {
  display: flex; align-items: center; gap: .6rem;
  font-size: .95rem; font-weight: 700;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 100px; padding: .55rem 1.25rem;
}
.hw-sw-message__item i { color: #22c55e; }

/* ── CTA ROW ── */
.hw-cta-row {
  display: flex; gap: 1rem; justify-content: center;
  flex-wrap: wrap; margin-top: 2.5rem;
}
.hw-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .9rem; font-weight: 700; border-radius: 10px;
  padding: .8rem 1.75rem; text-decoration: none;
  transition: all .25s ease; white-space: nowrap;
}
.hw-btn--primary {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff; border: 1px solid transparent;
}
.hw-btn--primary:hover {
  opacity: .88; transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(124,58,237,.35);
}
.hw-btn--secondary {
  background: linear-gradient(135deg, #f97316, #ef4444);
  color: #fff; border: 1px solid transparent;
}
.hw-btn--secondary:hover {
  opacity: .88; transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(249,115,22,.35);
}

/* ═══════════════════════════════════════════════════════════════
   AGE-BASED COGNITIVE DEVELOPMENT SYSTEM — .acd-section
   Inserted after hero section on the homepage.
═══════════════════════════════════════════════════════════════ */

/* ── Section shell ── */
.acd-section {
  position: relative;
  padding: 7rem 2rem 6.5rem;
  background: #050a1a;
  overflow: hidden;
}

/* Background decorations */
.acd-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(74,30,158,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,30,158,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.acd-bg-glow-left {
  position: absolute;
  top: 10%;
  left: -12%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74,30,158,0.18) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(1px);
}
.acd-bg-glow-right {
  position: absolute;
  bottom: 5%;
  right: -10%;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(8,145,178,0.14) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Container ── */
.acd-container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
}

/* ── Section header ── */
.acd-header {
  text-align: center;
  margin-bottom: 4rem;
}
.acd-title {
  font-size: clamp(1.9rem, 3.5vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #fff;
  margin: 0.85rem 0 1rem;
}
.acd-title__accent {
  background: linear-gradient(90deg, #9b3de8, #22d3ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.acd-subtitle {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.58);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ── Overview metrics row ── */
.acd-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 3.5rem;
}
.acd-metric {
  background: rgba(255,255,255,0.032);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 1.65rem 1.4rem 1.5rem;
  text-align: center;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
  position: relative;
  overflow: hidden;
}
.acd-metric::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #4a1e9e, #0891b2);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.acd-metric:hover {
  border-color: rgba(155,61,232,0.28);
  background: rgba(74,30,158,0.08);
  transform: translateY(-3px);
}
.acd-metric:hover::before { opacity: 1; }
.acd-metric__val {
  display: block;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #c084fc, #22d3ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.acd-metric__label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.35;
}

/* ── Sub-section headings ── */
.acd-sub-header {
  margin-bottom: 1.75rem;
}
.acd-sub-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.acd-sub-line {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #9b3de8, #22d3ee);
  border-radius: 2px;
  margin-top: 0.5rem;
}

/* ── Age group cards ── */
.acd-age-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.1rem;
}
.acd-age-card {
  border-radius: 18px;
  padding: 1.75rem 1.5rem 1.65rem;
  border: 1px solid rgba(255,255,255,0.07);
  position: relative;
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), border-color 0.28s ease, box-shadow 0.28s ease;
}
.acd-age-card:hover {
  transform: translateY(-5px);
}

/* Colour variants per card */
.acd-age-card--1 {
  background: linear-gradient(145deg, rgba(34,211,238,0.06) 0%, rgba(8,145,178,0.04) 100%);
  border-color: rgba(34,211,238,0.15);
}
.acd-age-card--1:hover {
  border-color: rgba(34,211,238,0.35);
  box-shadow: 0 16px 40px rgba(34,211,238,0.1);
}
.acd-age-card--2 {
  background: linear-gradient(145deg, rgba(155,61,232,0.07) 0%, rgba(124,58,237,0.04) 100%);
  border-color: rgba(155,61,232,0.15);
}
.acd-age-card--2:hover {
  border-color: rgba(155,61,232,0.38);
  box-shadow: 0 16px 40px rgba(155,61,232,0.12);
}
.acd-age-card--3 {
  background: linear-gradient(145deg, rgba(99,102,241,0.07) 0%, rgba(79,70,229,0.04) 100%);
  border-color: rgba(99,102,241,0.15);
}
.acd-age-card--3:hover {
  border-color: rgba(99,102,241,0.38);
  box-shadow: 0 16px 40px rgba(99,102,241,0.12);
}
.acd-age-card--4 {
  background: linear-gradient(145deg, rgba(168,85,247,0.07) 0%, rgba(192,132,252,0.04) 100%);
  border-color: rgba(168,85,247,0.15);
}
.acd-age-card--4:hover {
  border-color: rgba(168,85,247,0.38);
  box-shadow: 0 16px 40px rgba(168,85,247,0.12);
}

/* Top accent bar */
.acd-age-card__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
}
.acd-age-card--1 .acd-age-card__bar { background: linear-gradient(90deg, #22d3ee, #06b6d4); }
.acd-age-card--2 .acd-age-card__bar { background: linear-gradient(90deg, #9b3de8, #7c3aed); }
.acd-age-card--3 .acd-age-card__bar { background: linear-gradient(90deg, #6366f1, #4f46e5); }
.acd-age-card--4 .acd-age-card__bar { background: linear-gradient(90deg, #a855f7, #c084fc); }

/* Age badge */
.acd-age-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.75rem;
  border-radius: 100px;
  margin-bottom: 1.2rem;
}
.acd-age-card--1 .acd-age-card__badge {
  background: rgba(34,211,238,0.1);
  color: #22d3ee;
  border: 1px solid rgba(34,211,238,0.22);
}
.acd-age-card--2 .acd-age-card__badge {
  background: rgba(155,61,232,0.1);
  color: #c084fc;
  border: 1px solid rgba(155,61,232,0.22);
}
.acd-age-card--3 .acd-age-card__badge {
  background: rgba(99,102,241,0.1);
  color: #a5b4fc;
  border: 1px solid rgba(99,102,241,0.22);
}
.acd-age-card--4 .acd-age-card__badge {
  background: rgba(168,85,247,0.1);
  color: #d8b4fe;
  border: 1px solid rgba(168,85,247,0.22);
}

/* Age number */
.acd-age-card__age {
  display: block;
  font-size: clamp(2rem, 2.8vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0.3rem;
}
.acd-age-card--1 .acd-age-card__age { color: #22d3ee; }
.acd-age-card--2 .acd-age-card__age { color: #c084fc; }
.acd-age-card--3 .acd-age-card__age { color: #a5b4fc; }
.acd-age-card--4 .acd-age-card__age { color: #d8b4fe; }

.acd-age-card__years {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.03em;
  margin-bottom: 1rem;
}

/* Phase label */
.acd-age-card__phase {
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  line-height: 1.3;
  margin-bottom: 0;
}

/* Progressive note below age grid */
.acd-age-note {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 3.5rem;
}
.acd-age-note__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9b3de8, #22d3ee);
  flex-shrink: 0;
}
.acd-age-note__text {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.42);
  font-style: italic;
}

/* ── Benefits cards ── */
.acd-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 3.5rem;
}
.acd-benefit {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 1.75rem 1.6rem 1.65rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.acd-benefit:hover {
  border-color: rgba(155,61,232,0.22);
  background: rgba(74,30,158,0.06);
  transform: translateY(-4px);
}
.acd-benefit__icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  background: rgba(155,61,232,0.1);
  border: 1px solid rgba(155,61,232,0.2);
  color: #c084fc;
  flex-shrink: 0;
}
.acd-benefit--2 .acd-benefit__icon-wrap {
  background: rgba(34,211,238,0.08);
  border-color: rgba(34,211,238,0.18);
  color: #22d3ee;
}
.acd-benefit--3 .acd-benefit__icon-wrap {
  background: rgba(99,102,241,0.08);
  border-color: rgba(99,102,241,0.18);
  color: #a5b4fc;
}
.acd-benefit__title {
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin-bottom: 0.55rem;
  line-height: 1.3;
}
.acd-benefit__desc {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.48);
  line-height: 1.65;
  margin: 0;
}

/* ── Highlight statement ── */
.acd-highlight {
  position: relative;
  border-radius: 18px;
  padding: 2.1rem 2.5rem;
  background: linear-gradient(135deg,
    rgba(74,30,158,0.22) 0%,
    rgba(8,145,178,0.14) 100%);
  border: 1px solid rgba(155,61,232,0.22);
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.acd-highlight::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(155,61,232,0.6) 30%,
    rgba(0,200,232,0.6) 70%,
    transparent 100%);
}
.acd-highlight__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(155,61,232,0.25), rgba(8,145,178,0.2));
  border: 1px solid rgba(155,61,232,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c084fc;
}
.acd-highlight__text {
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  font-weight: 500;
  color: rgba(255,255,255,0.72);
  line-height: 1.65;
  margin: 0;
}
.acd-highlight__text strong {
  color: #22d3ee;
  font-weight: 700;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .acd-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .acd-age-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .acd-section {
    padding: 5rem 1.25rem 5rem;
  }
  .acd-benefits-grid {
    grid-template-columns: 1fr;
  }
  .acd-highlight {
    flex-direction: column;
    text-align: center;
    padding: 1.75rem 1.5rem;
    gap: 1rem;
  }
}
@media (max-width: 600px) {
  .acd-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
  }
  .acd-age-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
  }
  .acd-metric { padding: 1.35rem 1rem 1.2rem; }
  .acd-age-card { padding: 1.5rem 1.2rem 1.4rem; }
}

/* ═══════════════════════════════════════════════════════════════
   PERFORMANCE IMPROVEMENT — .pim-section
   Measured Cognitive Performance Improvement section on homepage.
═══════════════════════════════════════════════════════════════ */

/* ── Section shell ── */
.pim-section {
  position: relative;
  padding: 7rem 2rem 6.5rem;
  background: #050a1a;
  overflow: hidden;
}

/* Background layers */
.pim-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(8,145,178,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,145,178,0.035) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.pim-bg-glow-tl {
  position: absolute;
  top: -8%;
  left: -6%;
  width: 600px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74,30,158,0.16) 0%, transparent 68%);
  pointer-events: none;
}
.pim-bg-glow-br {
  position: absolute;
  bottom: -5%;
  right: -6%;
  width: 500px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(8,145,178,0.12) 0%, transparent 68%);
  pointer-events: none;
}

/* ── Container ── */
.pim-container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
}

/* ── Section header ── */
.pim-header {
  text-align: center;
  margin-bottom: 4rem;
}
.pim-title {
  font-size: clamp(1.9rem, 3.5vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #fff;
  margin: 0.85rem 0 1rem;
}
.pim-title__accent {
  background: linear-gradient(90deg, #22d3ee, #9b3de8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pim-subtitle {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.55);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ── Charts grid ── */
.pim-charts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

/* Individual chart card */
.pim-chart-card {
  background: rgba(255,255,255,0.028);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  padding: 1.6rem 1.5rem 1.4rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.28s ease, transform 0.28s cubic-bezier(0.22,1,0.36,1);
}
.pim-chart-card:hover {
  border-color: rgba(155,61,232,0.25);
  transform: translateY(-4px);
}
/* Top accent bar */
.pim-chart-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  opacity: 0.7;
  transition: opacity 0.28s ease;
}
.pim-chart-card:hover::before { opacity: 1; }
.pim-chart-card--scan::before   { background: linear-gradient(90deg, #22d3ee, #06b6d4); }
.pim-chart-card--pass::before   { background: linear-gradient(90deg, #9b3de8, #7c3aed); }
.pim-chart-card--react::before  { background: linear-gradient(90deg, #6366f1, #a855f7); }

/* Chart title row */
.pim-chart-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.pim-chart-card--scan  .pim-chart-title { color: #22d3ee; }
.pim-chart-card--pass  .pim-chart-title { color: #c084fc; }
.pim-chart-card--react .pim-chart-title { color: #a5b4fc; }

.pim-chart-subtitle {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.38);
  margin-bottom: 1.1rem;
  display: block;
}

/* Canvas wrapper — fixed aspect ratio */
.pim-canvas-wrap {
  position: relative;
  width: 100%;
  height: 180px;
}
.pim-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Legend row */
.pim-chart-legend {
  display: flex;
  gap: 1.2rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.pim-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.52);
  font-weight: 500;
}
.pim-legend-line {
  width: 18px;
  height: 2px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Phases section ── */
.pim-phases-header {
  margin-bottom: 1.75rem;
}
.pim-phases-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pim-phases-line {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #22d3ee, #9b3de8);
  border-radius: 2px;
  margin-top: 0.5rem;
}

/* Phases grid */
.pim-phases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Phase card */
.pim-phase {
  border-radius: 18px;
  padding: 1.8rem 1.6rem 1.7rem;
  border: 1px solid rgba(255,255,255,0.07);
  position: relative;
  overflow: hidden;
  transition: border-color 0.28s ease, transform 0.28s cubic-bezier(0.22,1,0.36,1);
}
.pim-phase:hover {
  transform: translateY(-4px);
}
/* Phase colour variants */
.pim-phase--1 {
  background: linear-gradient(145deg, rgba(34,211,238,0.05) 0%, rgba(8,145,178,0.03) 100%);
}
.pim-phase--1:hover { border-color: rgba(34,211,238,0.3); box-shadow: 0 16px 40px rgba(34,211,238,0.08); }
.pim-phase--2 {
  background: linear-gradient(145deg, rgba(155,61,232,0.06) 0%, rgba(124,58,237,0.03) 100%);
}
.pim-phase--2:hover { border-color: rgba(155,61,232,0.3); box-shadow: 0 16px 40px rgba(155,61,232,0.1); }
.pim-phase--3 {
  background: linear-gradient(145deg, rgba(99,102,241,0.06) 0%, rgba(79,70,229,0.03) 100%);
}
.pim-phase--3:hover { border-color: rgba(99,102,241,0.3); box-shadow: 0 16px 40px rgba(99,102,241,0.1); }

/* Phase top bar */
.pim-phase__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
}
.pim-phase--1 .pim-phase__bar { background: linear-gradient(90deg, #22d3ee, #06b6d4); }
.pim-phase--2 .pim-phase__bar { background: linear-gradient(90deg, #9b3de8, #7c3aed); }
.pim-phase--3 .pim-phase__bar { background: linear-gradient(90deg, #6366f1, #a855f7); }

/* Phase badge */
.pim-phase__badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
  margin-bottom: 1rem;
}
.pim-phase--1 .pim-phase__badge { background: rgba(34,211,238,0.1);  color: #22d3ee; border: 1px solid rgba(34,211,238,0.2); }
.pim-phase--2 .pim-phase__badge { background: rgba(155,61,232,0.1);  color: #c084fc; border: 1px solid rgba(155,61,232,0.2); }
.pim-phase--3 .pim-phase__badge { background: rgba(99,102,241,0.1);  color: #a5b4fc; border: 1px solid rgba(99,102,241,0.2); }

/* Phase name & timeframe */
.pim-phase__name {
  font-size: 1.05rem;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
  margin-bottom: 0.2rem;
  line-height: 1.25;
}
.pim-phase__time {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.38);
  margin-bottom: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Phase headline & stats */
.pim-phase__headline {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.pim-phase__stats {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.pim-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.pim-stat__label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.52);
  flex: 1;
}
.pim-stat__val {
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Stat value colours per phase */
.pim-phase--1 .pim-stat__val { color: #22d3ee; }
.pim-phase--2 .pim-stat__val { color: #c084fc; }
.pim-phase--3 .pim-stat__val { color: #a5b4fc; }

/* Thin progress bar under each stat */
.pim-stat__track {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 0.2rem;
}
.pim-stat__fill {
  height: 100%;
  border-radius: 2px;
  width: 0;
  transition: width 1s cubic-bezier(0.22,1,0.36,1);
}
.pim-phase--1 .pim-stat__fill { background: linear-gradient(90deg, #22d3ee, #06b6d4); }
.pim-phase--2 .pim-stat__fill { background: linear-gradient(90deg, #9b3de8, #c084fc); }
.pim-phase--3 .pim-stat__fill { background: linear-gradient(90deg, #6366f1, #a5b4fc); }

/* Divider between stat row and track */
.pim-stat-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.55rem;
}
.pim-stat-row:last-child { margin-bottom: 0; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .pim-charts-grid  { grid-template-columns: 1fr; gap: 1.25rem; }
  .pim-phases-grid  { grid-template-columns: 1fr; gap: 1.25rem; }
}
@media (max-width: 768px) {
  .pim-section { padding: 5rem 1.25rem 5rem; }
  .pim-canvas-wrap { height: 160px; }
}
@media (max-width: 600px) {
  .pim-chart-card { padding: 1.35rem 1.1rem 1.2rem; }
  .pim-phase { padding: 1.5rem 1.2rem 1.4rem; }
}

/* ─────────────────────────────────────────────
   ms-stage — field image (Perception / Decision / Execution)
───────────────────────────────────────────── */
.ms-stage__img-wrap {
  position: relative;
  width: calc(100% + 3.5rem);     /* bleed out past the card padding */
  margin: -1.75rem -1.75rem 1.4rem;
  border-radius: 17px 17px 0 0;
  overflow: hidden;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
}
.ms-stage__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.ms-stage:hover .ms-stage__img {
  transform: scale(1.04);
}
/* gradient overlay: transparent top → card bg at bottom (seamless blend) */
.ms-stage__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10,14,35,0)    0%,
    rgba(10,14,35,0)   55%,
    rgba(10,14,35,0.55) 80%,
    rgba(10,14,35,0.92) 100%
  );
  pointer-events: none;
}
/* Stage 1 (perception) — subtle purple tint on top */
.ms-stage[data-stage="1"] .ms-stage__img-overlay {
  background: linear-gradient(
    to bottom,
    rgba(155,61,232,0.08) 0%,
    rgba(10,14,35,0)      40%,
    rgba(10,14,35,0.55)   80%,
    rgba(10,14,35,0.92)  100%
  );
}
/* Stage 2 (decision) — subtle indigo tint */
.ms-stage[data-stage="2"] .ms-stage__img-overlay {
  background: linear-gradient(
    to bottom,
    rgba(107,91,240,0.08) 0%,
    rgba(10,14,35,0)      40%,
    rgba(10,14,35,0.55)   80%,
    rgba(10,14,35,0.92)  100%
  );
}
/* Stage 3 (motor) — subtle cyan tint */
.ms-stage[data-stage="3"] .ms-stage__img-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0,200,232,0.06)  0%,
    rgba(10,14,35,0)      40%,
    rgba(10,14,35,0.55)   80%,
    rgba(10,14,35,0.92)  100%
  );
}

/* ── Responsive: keep image on smaller viewports ── */
@media (max-width: 900px) {
  .ms-stage__img-wrap {
    width: calc(100% + 3.5rem);
    margin: -1.75rem -1.75rem 1.2rem;
  }
}
@media (max-width: 600px) {
  .ms-stage__img-wrap {
    aspect-ratio: 4 / 3;
  }
}

/* ─────────────────────────────────────────────
   ns-bmc — Brain–Muscle diagram image
───────────────────────────────────────────── */
.ns-bmc-img-wrap {
  position: relative;
  border-radius: 1.1rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(10,14,35,0.6);
  box-shadow: 0 8px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(34,211,238,0.06);
}
.ns-bmc-img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  display: block;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.ns-bmc-img-wrap:hover .ns-bmc-img {
  transform: scale(1.03);
}
/* subtle cyan glow overlay on edges */
.ns-bmc-img-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(34,211,238,0.06) 0%,
    transparent 65%
  );
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   sc2 — YouTube channel embed (scanning hero)
───────────────────────────────────────────── */
.sc2-yt-wrap {
  position: relative;
  border-radius: 1.1rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: #0a0e23;
  box-shadow: 0 8px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(34,211,238,0.06);
  display: flex;
  flex-direction: column;
}
.sc2-yt-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  display: block;
  background: #000;
}
.sc2-yt-footer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.sc2-yt-footer__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff0000;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(255,0,0,0.6);
  animation: yt-pulse 2s ease-in-out infinite;
}
@keyframes yt-pulse {
  0%,100% { opacity:1; }
  50%      { opacity:0.45; }
}
.sc2-yt-footer__text {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc2-yt-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #ff4444;
  text-decoration: none;
  padding: 0.25rem 0.65rem;
  border: 1px solid rgba(255,68,68,0.28);
  border-radius: 0.4rem;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}
.sc2-yt-footer__link:hover {
  background: rgba(255,68,68,0.12);
  border-color: rgba(255,68,68,0.55);
  color: #ff6666;
}

/* ─────────────────────────────────────────────
   sdd — Study Design Diagram (coded)
───────────────────────────────────────────── */
.sdd-wrap {
  position: relative;
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1.6fr auto 1fr;
  align-items: center;
  gap: 0;
  background: rgba(8,12,30,0.75);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 1.25rem;
  padding: 2rem 1.75rem;
  overflow: hidden;
}
/* subtle dot-grid background */
.sdd-bg-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* ── Columns ── */
.sdd-col { display: flex; flex-direction: column; align-items: center; }
.sdd-col--pre   { align-items: flex-start; }
.sdd-col--train { flex: 1; align-items: stretch; padding: 0 0.5rem; }
.sdd-col--post  { align-items: flex-end; }

/* ── PRE / POST shared box ── */
.sdd-box {
  position: relative;
  background: rgba(10,14,35,0.85);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1rem;
  padding: 1.4rem 1.35rem 1.3rem;
  min-width: 180px;
  backdrop-filter: blur(8px);
}
.sdd-box--pre  { border-color: rgba(34,211,238,0.25); box-shadow: 0 0 24px rgba(34,211,238,0.07); }
.sdd-box--post { border-color: rgba(167,139,250,0.25); box-shadow: 0 0 24px rgba(167,139,250,0.07); }

/* corner accent lines */
.sdd-box__corner {
  position: absolute;
  width: 16px; height: 16px;
  pointer-events: none;
}
.sdd-box__corner--tl {
  top: -1px; left: -1px;
  border-top: 2px solid; border-left: 2px solid;
  border-radius: 1rem 0 0 0;
}
.sdd-box__corner--br {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid; border-right: 2px solid;
  border-radius: 0 0 1rem 0;
}
.sdd-box--pre  .sdd-box__corner { border-color: #22d3ee; }
.sdd-box--post .sdd-box__corner { border-color: #a78bfa; }

.sdd-box__eyebrow {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.55rem;
}
.sdd-box__num {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.18em;
  color: rgba(255,255,255,0.22); text-transform: uppercase;
}
.sdd-box__ico { font-size: 1rem; }
.sdd-box--pre  .sdd-box__ico { color: #22d3ee; }
.sdd-box--post .sdd-box__ico { color: #a78bfa; }

.sdd-box__label {
  font-size: 1.05rem; font-weight: 800; letter-spacing: 0.06em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.sdd-box--pre  .sdd-box__label { color: #22d3ee; }
.sdd-box--post .sdd-box__label { color: #a78bfa; }

.sdd-box__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.sdd-box__list li {
  font-size: 0.8rem; color: rgba(255,255,255,0.6);
  display: flex; align-items: center; gap: 0.45rem;
}
.sdd-box__list li i { font-size: 0.72rem; color: rgba(255,255,255,0.28); width: 14px; text-align: center; }

/* ── Arrows ── */
.sdd-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 64px; flex-shrink: 0;
}
.sdd-arrow svg { width: 56px; height: 24px; }

/* ── Training column header ── */
.sdd-train-header {
  text-align: center;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.55); text-transform: uppercase;
  margin-bottom: 1rem;
  padding: 0.35rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* ── Groups container ── */
.sdd-groups { display: flex; flex-direction: column; gap: 0.75rem; }

/* ── Individual group card ── */
.sdd-group {
  border-radius: 0.75rem;
  padding: 1rem 1.1rem;
  border: 1px solid;
  backdrop-filter: blur(6px);
}
.sdd-group--a {
  background: rgba(34,211,238,0.04);
  border-color: rgba(34,211,238,0.18);
}
.sdd-group--b {
  background: rgba(167,139,250,0.06);
  border-color: rgba(167,139,250,0.22);
}

.sdd-group__title {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 0.65rem;
}
.sdd-group--a .sdd-group__title { color: #22d3ee; }
.sdd-group--b .sdd-group__title { color: #a78bfa; }

.sdd-group__dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.sdd-group__dot--cyan   { background: #22d3ee; box-shadow: 0 0 6px rgba(34,211,238,0.6); }
.sdd-group__dot--purple { background: #a78bfa; box-shadow: 0 0 6px rgba(167,139,250,0.6); }

.sdd-group__body {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem;
}
.sdd-group__stat {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem; color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 0.4rem; padding: 0.25rem 0.55rem;
}
.sdd-group__stat i { font-size: 0.7rem; color: rgba(255,255,255,0.3); }
.sdd-group__stat--vr { color: #a78bfa; border-color: rgba(167,139,250,0.25); background: rgba(167,139,250,0.07); }
.sdd-group__stat--vr i { color: #a78bfa; }
.sdd-group__plus {
  font-size: 0.9rem; font-weight: 700;
  color: rgba(255,255,255,0.25);
}
.sdd-group__protocol {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.65rem;
  padding-top: 0.65rem; border-top: 1px solid rgba(167,139,250,0.12);
}
.sdd-group__protocol span {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.72rem; color: rgba(167,139,250,0.75); font-weight: 600;
}
.sdd-group__protocol i { font-size: 0.65rem; }

/* ── Responsive ── */
@media (max-width: 960px) {
  .sdd-wrap {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1rem;
    padding: 1.5rem 1.25rem;
  }
  .sdd-arrow { width: 100%; justify-content: flex-start; padding-left: 1rem; }
  .sdd-arrow svg { transform: rotate(90deg); }
  .sdd-col--pre, .sdd-col--train, .sdd-col--post { align-items: stretch; }
  .sdd-box { min-width: unset; }
}

/* ─────────────────────────────────────────────
   sc2-flow-img — Scanning → Analysis → Planning diagram image
───────────────────────────────────────────── */
.sc2-flow-img-wrap {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 6px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(34,211,238,0.05);
  background: #050a1a;
}
.sc2-flow-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.sc2-flow-img-wrap:hover .sc2-flow-img {
  transform: scale(1.02);
}
/* very subtle cyan edge glow + darken left/right edges so it bleeds nicely */
.sc2-flow-img-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,  rgba(5,10,26,0.35) 0%, transparent 12%, transparent 88%, rgba(5,10,26,0.35) 100%),
    linear-gradient(to bottom, rgba(34,211,238,0.04) 0%, transparent 30%);
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   sr-pub-card — Research publication image card
───────────────────────────────────────────── */
.sr-pub-card {
  border-radius: 1.1rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(10,14,35,0.7);
  box-shadow:
    0 8px 48px rgba(0,0,0,0.5),
    0 0 0 1px rgba(34,211,238,0.05);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.sr-pub-card:hover {
  box-shadow:
    0 12px 56px rgba(0,0,0,0.6),
    0 0 0 1px rgba(34,211,238,0.14);
  transform: translateY(-3px);
}

/* Image area */
.sr-pub-card__img-wrap {
  position: relative;
  overflow: hidden;
  max-height: 400px;
}
.sr-pub-card__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.sr-pub-card:hover .sr-pub-card__img {
  transform: scale(1.02);
}
/* gradient: transparent top → card bg bottom (seamless blend into footer) */
.sr-pub-card__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent   0%,
    transparent  60%,
    rgba(10,14,35,0.55) 82%,
    rgba(10,14,35,0.95) 100%
  );
  pointer-events: none;
}

/* Footer bar */
.sr-pub-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.85rem 1.1rem;
  background: rgba(255,255,255,0.025);
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
}
.sr-pub-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.sr-pub-card__tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: #22d3ee;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}
.sr-pub-card__doi {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.3);
  font-family: 'Inter', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sr-pub-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, rgba(74,30,158,0.7), rgba(8,145,178,0.7));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.45rem;
  padding: 0.35rem 0.85rem;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.sr-pub-card__btn:hover {
  background: linear-gradient(135deg, rgba(107,61,232,0.85), rgba(8,165,198,0.85));
  border-color: rgba(255,255,255,0.22);
  transform: translateY(-1px);
}


/* ══════════════════════════════════════════════════════════════
   SOFTWARE SETUP — STEP CARDS  (.sw-step-card)
══════════════════════════════════════════════════════════════ */
.sw-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}
@media (max-width: 1024px) { .sw-steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .sw-steps-grid { grid-template-columns: 1fr; } }

.sw-step-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  position: relative;
}
.sw-step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  border-color: rgba(139,92,246,0.45);
}

/* step number badge */
.sw-step-card__num {
  position: absolute;
  top: 0.75rem;
  left: 0.85rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
}

/* icon */
.sw-step-card__icon-wrap {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  margin: 2.2rem auto 0;
  flex-shrink: 0;
}
.sw-step-card__icon-wrap--violet { background: rgba(139,92,246,0.2); color: #a78bfa; border: 1px solid rgba(139,92,246,0.3); }
.sw-step-card__icon-wrap--blue   { background: rgba(59,130,246,0.2);  color: #93c5fd; border: 1px solid rgba(59,130,246,0.3); }
.sw-step-card__icon-wrap--cyan   { background: rgba(6,182,212,0.2);   color: #67e8f9; border: 1px solid rgba(6,182,212,0.3); }
.sw-step-card__icon-wrap--green  { background: rgba(34,197,94,0.2);   color: #86efac; border: 1px solid rgba(34,197,94,0.3); }

/* image placeholder */
/* ── Software step card image area ── */
.sw-step-card__img-area {
  position: relative;
  margin: 1rem 1rem 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.25);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.sw-step-card:hover .sw-step-card__img-area {
  border-color: rgba(139,92,246,0.4);
  box-shadow: 0 4px 20px rgba(139,92,246,0.12);
}
.sw-step-card__img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  object-position: center top;
  border-radius: 10px;
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: brightness(0.92);
}
.sw-step-card:hover .sw-step-card__img {
  transform: scale(1.04);
  filter: brightness(1.05);
}
.sw-step-card__img-fallback {
  display: none;
  align-items: center; justify-content: center;
  width: 100%; height: 160px;
  font-size: 1.8rem;
  color: rgba(255,255,255,0.2);
  border-radius: 10px;
}

/* body */
.sw-step-card__body {
  padding: 1rem 1.1rem 1.25rem;
  flex: 1;
}
.sw-step-card__title {
  font-size: 0.9rem; font-weight: 700;
  color: rgba(255,255,255,0.92);
  margin-bottom: 0.4rem;
}
.sw-step-card__desc {
  font-size: 0.78rem; line-height: 1.55;
  color: rgba(255,255,255,0.55);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   ENVIRONMENT — TRAINING HALL PLACEHOLDER
══════════════════════════════════════════════════════════════ */
.env-hall-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  margin-top: 1.5rem;
}
/* Training hall real image */
.env-hall-img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 220px;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  filter: brightness(0.95);
  transition: filter 0.4s ease, transform 0.4s ease;
}
.env-hall-wrap:hover .env-hall-img {
  filter: brightness(1.03);
  transform: scale(1.01);
}
.env-hall-img__fallback {
  display: none;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.6rem;
  min-height: 220px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.25);
  font-size: 0.78rem; font-weight: 600;
}
.env-hall-img__fallback i {
  font-size: 2.5rem; color: rgba(255,255,255,0.15);
}
.env-hall-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  position: absolute; bottom: 1rem; right: 1.1rem;
  font-size: 0.75rem; font-weight: 700;
  color: rgba(255,255,255,0.8);
  background: rgba(34,197,94,0.2);
  border: 1px solid rgba(34,197,94,0.35);
  border-radius: 100px; padding: 0.35rem 0.9rem;
}
.env-hall-badge i { color: #86efac; }

/* ══════════════════════════════════════════════════════════════
   ENVIRONMENT — REQUIREMENTS GRID
══════════════════════════════════════════════════════════════ */
.env-req-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (max-width: 1024px) { .env-req-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .env-req-grid { grid-template-columns: repeat(2, 1fr); } }

.env-req-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  padding: 1.1rem 0.85rem 1rem;
  display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 0.5rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.env-req-card:hover {
  transform: translateY(-2px);
  border-color: rgba(99,102,241,0.35);
}
.env-req-card__icon-wrap {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.env-req-card__icon-wrap--green  { background: rgba(34,197,94,0.18);  color: #86efac; border: 1px solid rgba(34,197,94,0.25); }
.env-req-card__icon-wrap--blue   { background: rgba(59,130,246,0.18); color: #93c5fd; border: 1px solid rgba(59,130,246,0.25); }
.env-req-card__icon-wrap--orange { background: rgba(249,115,22,0.18); color: #fdba74; border: 1px solid rgba(249,115,22,0.25); }
.env-req-card__icon-wrap--violet { background: rgba(139,92,246,0.18); color: #c4b5fd; border: 1px solid rgba(139,92,246,0.25); }
.env-req-card__icon-wrap--cyan   { background: rgba(6,182,212,0.18);  color: #67e8f9; border: 1px solid rgba(6,182,212,0.25); }
.env-req-card__title {
  font-size: 0.75rem; font-weight: 700;
  color: rgba(255,255,255,0.75); line-height: 1.2;
}
.env-req-card__value {
  font-size: 0.68rem; font-weight: 600;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════════════════════
   ENVIRONMENT — TIPS BANNER
══════════════════════════════════════════════════════════════ */
.env-tips-banner {
  margin-top: 1.75rem;
  background: rgba(234,179,8,0.07);
  border: 1px solid rgba(234,179,8,0.2);
  border-radius: 14px;
  overflow: hidden;
}
.env-tips-banner__header {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.9rem 1.25rem;
  background: rgba(234,179,8,0.1);
  border-bottom: 1px solid rgba(234,179,8,0.15);
  font-size: 0.88rem; font-weight: 700;
  color: #fde68a;
}
.env-tips-banner__header i { color: #fbbf24; font-size: 1rem; }
.env-tips-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
@media (max-width: 700px) { .env-tips-list { grid-template-columns: 1fr; } }
.env-tips-list__item {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  font-size: 0.8rem; color: rgba(255,255,255,0.6); line-height: 1.5;
  border-bottom: 1px solid rgba(234,179,8,0.08);
}
.env-tips-list__item:nth-child(odd) { border-right: 1px solid rgba(234,179,8,0.08); }
.env-tips-list__item:last-child, .env-tips-list__item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.env-tips-list__item i { color: #86efac; font-size: 0.85rem; margin-top: 0.15rem; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   whu-c2  —  Federation card photo panel (narrow card)
══════════════════════════════════════════════════════════════ */

/* wrapper sits above the card head, no extra padding */
.whu-c2-img-wrap {
  width: 100%;
  padding: 0;
  flex-shrink: 0;
}

/* frame: clips photo + overlays, bottom-rounded to blend into card */
.whu-c2-img-frame {
  position: relative;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  /* violet-tinted glow on frame edges */
  box-shadow:
    0 0 0 1px rgba(139,92,246,0.18),
    0 6px 28px rgba(0,0,0,0.55),
    0 2px 14px rgba(139,92,246,0.1);
}

/* photo — portrait crop, focus on player+VR headset */
.whu-c2-img-photo {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: 50% 18%;
  filter: brightness(0.78) contrast(1.08) saturate(0.88);
  transition: transform 0.55s ease, filter 0.4s ease;
}
.whu-card--2:hover .whu-c2-img-photo {
  transform: scale(1.03);
  filter: brightness(0.86) contrast(1.06) saturate(0.92);
}

/* bottom-edge fade: blends photo into dark card body */
.whu-c2-img-fade {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(
    to bottom,
    transparent 35%,
    rgba(8,6,24,0.55) 70%,
    rgba(8,6,24,0.92) 100%
  );
  pointer-events: none;
  border-radius: 12px 12px 0 0;
}

/* violet atmosphere glow overlay */
.whu-c2-img-glow {
  position: absolute; inset: 0; z-index: 3;
  background:
    radial-gradient(ellipse 60% 60% at 60% 20%, rgba(139,92,246,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 20% 75%, rgba(99,102,241,0.1) 0%, transparent 60%);
  pointer-events: none;
  border-radius: 12px 12px 0 0;
  mix-blend-mode: screen;
}

/* scanlines — same weight as other cards */
.whu-c2-img-scan {
  position: absolute; inset: 0; z-index: 4;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,0,0,0.05) 3px, rgba(0,0,0,0.05) 4px
  );
  pointer-events: none;
  border-radius: 12px 12px 0 0;
  opacity: 0.4;
}

/* "FEDERATION SESSION" live badge — violet tone */
.whu-c2-img-badge {
  position: absolute; top: 0.7rem; right: 0.7rem; z-index: 5;
  display: inline-flex; align-items: center; gap: 0.38rem;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.13em;
  color: rgba(196,181,253,0.95);
  background: rgba(6,10,24,0.72);
  border: 1px solid rgba(139,92,246,0.28);
  border-radius: 20px; padding: 0.26rem 0.6rem;
  backdrop-filter: blur(8px);
}

/* pulsing live dot — violet */
.whu-c2-img-badge-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #a78bfa;
  box-shadow: 0 0 6px 2px rgba(167,139,250,0.7);
  animation: whu-c2-pulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes whu-c2-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.28; }
}

/* responsive: slightly shorter on mobile */
@media (max-width: 600px) {
  .whu-c2-img-photo { height: 180px; }
}

/* ══════════════════════════════════════════════════════════════
   whu-c1  —  Professional Football Clubs card photo panel
══════════════════════════════════════════════════════════════ */
.whu-c1-img-wrap { width: 100%; padding: 0; flex-shrink: 0; }

.whu-c1-img-frame {
  position: relative;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  box-shadow:
    0 0 0 1px rgba(59,130,246,0.18),
    0 6px 28px rgba(0,0,0,0.55),
    0 2px 14px rgba(59,130,246,0.1);
}

.whu-c1-img-photo {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: 50% 30%;
  filter: brightness(0.78) contrast(1.08) saturate(0.88);
  transition: transform 0.55s ease, filter 0.4s ease;
}
.whu-card--1:hover .whu-c1-img-photo {
  transform: scale(1.03);
  filter: brightness(0.86) contrast(1.06) saturate(0.92);
}

/* bottom-edge fade into dark card body */
.whu-c1-img-fade {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(
    to bottom,
    transparent 35%,
    rgba(6,10,28,0.55) 70%,
    rgba(6,10,28,0.92) 100%
  );
  pointer-events: none;
  border-radius: 12px 12px 0 0;
}

/* blue/cyan atmosphere glow */
.whu-c1-img-glow {
  position: absolute; inset: 0; z-index: 3;
  background:
    radial-gradient(ellipse 60% 60% at 40% 20%, rgba(59,130,246,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 80% 75%, rgba(6,182,212,0.1) 0%, transparent 60%);
  pointer-events: none;
  border-radius: 12px 12px 0 0;
  mix-blend-mode: screen;
}

/* scanlines */
.whu-c1-img-scan {
  position: absolute; inset: 0; z-index: 4;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,0,0,0.05) 3px, rgba(0,0,0,0.05) 4px
  );
  pointer-events: none;
  border-radius: 12px 12px 0 0;
  opacity: 0.4;
}

/* "PRO CLUB SESSION" badge — blue tone */
.whu-c1-img-badge {
  position: absolute; top: 0.7rem; right: 0.7rem; z-index: 5;
  display: inline-flex; align-items: center; gap: 0.38rem;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.13em;
  color: rgba(147,197,253,0.95);
  background: rgba(6,10,24,0.72);
  border: 1px solid rgba(59,130,246,0.28);
  border-radius: 20px; padding: 0.26rem 0.6rem;
  backdrop-filter: blur(8px);
}

/* pulsing live dot — blue */
.whu-c1-img-badge-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #60a5fa;
  box-shadow: 0 0 6px 2px rgba(96,165,250,0.7);
  animation: whu-c1-pulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes whu-c1-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.28; }
}

@media (max-width: 600px) {
  .whu-c1-img-photo { height: 180px; }
}

/* ══════════════════════════════════════════════════════════════
   whu-c4  —  Performance Training Centers card photo panel
══════════════════════════════════════════════════════════════ */
.whu-c4-img-wrap { width: 100%; padding: 0; flex-shrink: 0; }

.whu-c4-img-frame {
  position: relative;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  box-shadow:
    0 0 0 1px rgba(6,182,212,0.18),
    0 6px 28px rgba(0,0,0,0.55),
    0 2px 14px rgba(6,182,212,0.1);
}

.whu-c4-img-photo {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: 50% 25%;
  filter: brightness(0.78) contrast(1.08) saturate(0.88);
  transition: transform 0.55s ease, filter 0.4s ease;
}
.whu-card--4:hover .whu-c4-img-photo {
  transform: scale(1.03);
  filter: brightness(0.86) contrast(1.06) saturate(0.92);
}

/* bottom-edge fade into dark card body */
.whu-c4-img-fade {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(
    to bottom,
    transparent 35%,
    rgba(4,10,26,0.55) 70%,
    rgba(4,10,26,0.92) 100%
  );
  pointer-events: none;
  border-radius: 12px 12px 0 0;
}

/* cyan atmosphere glow */
.whu-c4-img-glow {
  position: absolute; inset: 0; z-index: 3;
  background:
    radial-gradient(ellipse 60% 60% at 50% 20%, rgba(6,182,212,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 80% 75%, rgba(34,211,238,0.1) 0%, transparent 60%);
  pointer-events: none;
  border-radius: 12px 12px 0 0;
  mix-blend-mode: screen;
}

/* scanlines */
.whu-c4-img-scan {
  position: absolute; inset: 0; z-index: 4;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,0,0,0.05) 3px, rgba(0,0,0,0.05) 4px
  );
  pointer-events: none;
  border-radius: 12px 12px 0 0;
  opacity: 0.4;
}

/* "PERFORMANCE SESSION" badge — cyan tone */
.whu-c4-img-badge {
  position: absolute; top: 0.7rem; right: 0.7rem; z-index: 5;
  display: inline-flex; align-items: center; gap: 0.38rem;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.13em;
  color: rgba(103,232,249,0.95);
  background: rgba(4,10,24,0.72);
  border: 1px solid rgba(6,182,212,0.28);
  border-radius: 20px; padding: 0.26rem 0.6rem;
  backdrop-filter: blur(8px);
}

/* pulsing live dot — cyan */
.whu-c4-img-badge-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 6px 2px rgba(34,211,238,0.7);
  animation: whu-c4-pulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes whu-c4-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.28; }
}

@media (max-width: 600px) {
  .whu-c4-img-photo { height: 180px; }
}

/* ══════════════════════════════════════════════════════════════
   TEXT READABILITY OVERLAY
   Cards with photo panels (c1, c2, c4) — text area protection
   Adds a dark semi-transparent glass layer behind head/body/footer
   Image stays fully visible above; text becomes crisp below
══════════════════════════════════════════════════════════════ */

/*
  Strategy: the whu-card__head sits right below the photo frame.
  We use a ::before pseudo on whu-card__head to paint a full-height
  overlay that covers from the top of whu-card__head down through
  the rest of the card (body + footer).
  height: 100vh is a safe overreach — card overflow:hidden clips it.
  z-index: 0 keeps it behind all real content (z-index: 1+).
*/

/* Cards that have photo panels — target the text content area */
.whu-card--1 .whu-card__head,
.whu-card--2 .whu-card__head,
.whu-card--4 .whu-card__head {
  position: relative;
}

.whu-card--1 .whu-card__head::before,
.whu-card--2 .whu-card__head::before,
.whu-card--4 .whu-card__head::before {
  content: '';
  position: absolute;
  /* start 28px above the head to overlap the photo bottom edge */
  top: -28px;
  left: 0; right: 0;
  /* extend well past footer — card clips it */
  height: calc(100% + 400px);
  z-index: 0;
  pointer-events: none;

  /* gradient: transparent at very top → rich dark at 28px → solid dark below */
  background: linear-gradient(
    to bottom,
    transparent                    0%,
    rgba(4, 6, 20, 0.55)          18%,
    rgba(4, 6, 20, 0.82)          38%,
    rgba(4, 6, 20, 0.93)          60%,
    rgba(4, 6, 20, 0.97)         100%
  );

  /* subtle glass blur — blends photo edge into text area */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Ensure all text children sit ABOVE the overlay */
.whu-card--1 .whu-card__head > *,
.whu-card--2 .whu-card__head > *,
.whu-card--4 .whu-card__head > *,
.whu-card--1 .whu-card__body,
.whu-card--2 .whu-card__body,
.whu-card--4 .whu-card__body,
.whu-card--1 .whu-card__footer,
.whu-card--2 .whu-card__footer,
.whu-card--4 .whu-card__footer {
  position: relative;
  z-index: 1;
}

/* Boost text contrast slightly for cards with photos */
.whu-card--1 .whu-card__title,
.whu-card--2 .whu-card__title,
.whu-card--4 .whu-card__title {
  color: rgba(255, 255, 255, 0.97);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.whu-card--1 .whu-card__item,
.whu-card--2 .whu-card__item,
.whu-card--4 .whu-card__item {
  color: rgba(255, 255, 255, 0.72);
}

.whu-card--1 .whu-card__num,
.whu-card--2 .whu-card__num,
.whu-card--4 .whu-card__num {
  opacity: 0.45;
}

/* ══════════════════════════════════════════════════════════════
   UNIFIED IMAGE PANEL SYSTEM  (.whu-cx-img-*)
   Used by ALL 5 cards — consistent image-top layout
   Emerald (card 3) and Amber (card 5) colour variants
══════════════════════════════════════════════════════════════ */

.whu-cx-img-wrap { width: 100%; padding: 0; flex-shrink: 0; }

.whu-cx-img-frame {
  position: relative;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}
/* per-card accent frame glow */
.whu-cx-img-frame--emerald {
  box-shadow:
    0 0 0 1px rgba(16,185,129,0.18),
    0 6px 28px rgba(0,0,0,0.55),
    0 2px 14px rgba(16,185,129,0.1);
}
.whu-cx-img-frame--amber {
  box-shadow:
    0 0 0 1px rgba(251,191,36,0.18),
    0 6px 28px rgba(0,0,0,0.55),
    0 2px 14px rgba(251,191,36,0.1);
}

/* photo */
.whu-cx-img-photo {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: 50% 25%;
  filter: brightness(0.78) contrast(1.08) saturate(0.88);
  transition: transform 0.55s ease, filter 0.4s ease;
}
.whu-card--3:hover .whu-cx-img-photo,
.whu-card--5:hover .whu-cx-img-photo {
  transform: scale(1.03);
  filter: brightness(0.86) contrast(1.06) saturate(0.92);
}

/* bottom-edge fade */
.whu-cx-img-fade {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(
    to bottom,
    transparent 35%,
    rgba(4, 6, 20, 0.55) 70%,
    rgba(4, 6, 20, 0.92) 100%
  );
  pointer-events: none;
  border-radius: 12px 12px 0 0;
}

/* atmosphere glow — emerald */
.whu-cx-img-glow--emerald {
  position: absolute; inset: 0; z-index: 3;
  background:
    radial-gradient(ellipse 60% 60% at 50% 20%, rgba(16,185,129,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 80% 75%, rgba(52,211,153,0.1) 0%, transparent 60%);
  pointer-events: none;
  border-radius: 12px 12px 0 0;
  mix-blend-mode: screen;
}

/* atmosphere glow — amber */
.whu-cx-img-glow--amber {
  position: absolute; inset: 0; z-index: 3;
  background:
    radial-gradient(ellipse 60% 60% at 50% 20%, rgba(251,191,36,0.16) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 20% 75%, rgba(217,119,6,0.1) 0%, transparent 60%);
  pointer-events: none;
  border-radius: 12px 12px 0 0;
  mix-blend-mode: screen;
}

/* scanlines */
.whu-cx-img-scan {
  position: absolute; inset: 0; z-index: 4;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,0,0,0.05) 3px, rgba(0,0,0,0.05) 4px
  );
  pointer-events: none;
  border-radius: 12px 12px 0 0;
  opacity: 0.4;
}

/* badges */
.whu-cx-img-badge {
  position: absolute; top: 0.7rem; right: 0.7rem; z-index: 5;
  display: inline-flex; align-items: center; gap: 0.38rem;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.13em;
  background: rgba(4, 10, 24, 0.72);
  border-radius: 20px; padding: 0.26rem 0.6rem;
  backdrop-filter: blur(8px);
}
.whu-cx-img-badge--emerald {
  color: rgba(52,211,153,0.95);
  border: 1px solid rgba(16,185,129,0.28);
}
.whu-cx-img-badge--amber {
  color: rgba(251,191,36,0.95);
  border: 1px solid rgba(251,191,36,0.28);
}

/* badge dots */
.whu-cx-img-badge-dot {
  width: 5px; height: 5px; border-radius: 50%;
  animation: whu-cx-pulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
.whu-cx-img-badge-dot--emerald {
  background: #34d399;
  box-shadow: 0 0 6px 2px rgba(52,211,153,0.7);
}
.whu-cx-img-badge-dot--amber {
  background: #fbbf24;
  box-shadow: 0 0 6px 2px rgba(251,191,36,0.7);
}
@keyframes whu-cx-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.28; }
}

@media (max-width: 600px) {
  .whu-cx-img-photo { height: 180px; }
}

/* ── Readability overlay for cards 3 & 5 (same system as 1,2,4) ── */
.whu-card--3 .whu-card__head,
.whu-card--5 .whu-card__head {
  position: relative;
}
.whu-card--3 .whu-card__head::before,
.whu-card--5 .whu-card__head::before {
  content: '';
  position: absolute;
  top: -28px; left: 0; right: 0;
  height: calc(100% + 400px);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent                  0%,
    rgba(4, 6, 20, 0.55)        18%,
    rgba(4, 6, 20, 0.82)        38%,
    rgba(4, 6, 20, 0.93)        60%,
    rgba(4, 6, 20, 0.97)       100%
  );
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.whu-card--3 .whu-card__head > *,
.whu-card--5 .whu-card__head > *,
.whu-card--3 .whu-card__body,
.whu-card--5 .whu-card__body,
.whu-card--3 .whu-card__footer,
.whu-card--5 .whu-card__footer { position: relative; z-index: 1; }

.whu-card--3 .whu-card__title,
.whu-card--5 .whu-card__title {
  color: rgba(255,255,255,0.97);
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.whu-card--3 .whu-card__item,
.whu-card--5 .whu-card__item { color: rgba(255,255,255,0.72); }
.whu-card--3 .whu-card__num,
.whu-card--5 .whu-card__num  { opacity: 0.45; }

/* ── Grid responsive: 5 cards in 3 cols ── */
@media (max-width: 900px) {
  .whu-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .whu-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   ct-how  —  How Training Works section
   (shares ct-skills container/header/bg classes)
══════════════════════════════════════════════════════════════ */
.ct-how {
  position: relative;
  padding: 6rem 0 7rem;
  overflow: hidden;
  /* Slightly deeper background to visually separate from ct-skills */
  background: linear-gradient(160deg, #070c1e 0%, #0d1030 50%, #060b1b 100%);
}

/* ══════════════════════════════════════════════════════════════
   PADT — Interactive 1-Year Development Tracking Dashboard
   Performance Analytics · Dark Neon Theme
══════════════════════════════════════════════════════════════ */

/* ── Dashboard card ─────────────────────────────────────────── */
.padt-card {
  background: rgba(8,12,30,0.92);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(34,211,238,0.08),
    0 24px 64px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ── Header bar ─────────────────────────────────────────────── */
.padt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.025);
}
.padt-header__left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.padt-live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 8px rgba(34,211,238,0.9);
  flex-shrink: 0;
  animation: padtPulse 2s ease-in-out infinite;
}
@keyframes padtPulse {
  0%,100% { opacity:1; box-shadow: 0 0 8px rgba(34,211,238,0.9); }
  50%      { opacity:0.6; box-shadow: 0 0 16px rgba(34,211,238,0.5); }
}
.padt-header__title {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.01em;
}
.padt-header__sub {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.32);
  font-weight: 500;
}

/* ── Controls (selects + view toggle) ───────────────────────── */
.padt-header__controls {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

/* View toggle */
.padt-view-toggle {
  display: flex;
  gap: 0.2rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 3px;
}
.padt-view-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.8rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.38);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  letter-spacing: 0.02em;
}
.padt-view-btn--active,
.padt-view-btn:hover {
  background: rgba(34,211,238,0.12);
  color: #22d3ee;
}
.padt-view-btn i { font-size: 0.65rem; }

/* Select wrapper */
.padt-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.padt-select-icon {
  position: absolute;
  left: 0.6rem;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.32);
  pointer-events: none;
  z-index: 1;
}
.padt-select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: rgba(255,255,255,0.8);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.35rem 2rem 0.35rem 1.8rem;
  cursor: pointer;
  outline: none;
  transition: border-color 0.18s, background 0.18s;
  min-width: 160px;
}
.padt-select:hover,
.padt-select:focus {
  border-color: rgba(34,211,238,0.4);
  background: rgba(34,211,238,0.06);
  color: #fff;
}
.padt-select option {
  background: #0d1030;
  color: #fff;
}

/* ── Metric label row ───────────────────────────────────────── */
.padt-metric-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.4rem 0;
  flex-wrap: wrap;
}
.padt-metric-label__name {
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.01em;
}
.padt-metric-label__unit {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 5px;
  padding: 0.15rem 0.45rem;
}
.padt-metric-label__note {
  font-size: 0.68rem;
  color: rgba(34,211,238,0.75);
  font-weight: 600;
  margin-left: auto;
}

/* ── Body ───────────────────────────────────────────────────── */
.padt-body {
  padding: 0.75rem 1.4rem 0.25rem;
}
.padt-body--hidden { display: none !important; }

/* ── Chart area ─────────────────────────────────────────────── */
.padt-chart-wrap {
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
  min-height: 220px;
}
.padt-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 2.2rem;
  min-width: 40px;
  text-align: right;
}
.padt-y-axis span {
  font-size: 0.58rem;
  color: rgba(255,255,255,0.22);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.padt-canvas-wrap {
  flex: 1;
  position: relative;
  min-height: 220px;
}
.padt-canvas {
  display: block;
  width: 100%;
  border-radius: 6px;
}

/* ── X-axis ─────────────────────────────────────────────────── */
.padt-x-axis {
  display: flex;
  justify-content: space-between;
  padding: 0.35rem 0 0.8rem;
  /* align with canvas area, not y-axis */
  margin-left: calc(40px + 0.6rem);
}
.padt-x-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  flex: 1;
}
.padt-x-label__name {
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
}
.padt-x-label__sub {
  font-size: 0.55rem;
  color: rgba(255,255,255,0.22);
  font-weight: 500;
}

/* ── Tooltip ────────────────────────────────────────────────── */
.padt-tooltip {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 20;
  min-width: 130px;
}
.padt-tooltip--visible { opacity: 1; }
.padt-tooltip__cp {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: rgba(8,12,30,0.96);
  border: 1px solid rgba(34,211,238,0.25);
  border-radius: 8px 8px 0 0;
  padding: 0.35rem 0.65rem 0.25rem;
  white-space: nowrap;
}
.padt-tooltip__val {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  background: rgba(8,12,30,0.96);
  border-left: 1px solid rgba(34,211,238,0.25);
  border-right: 1px solid rgba(34,211,238,0.25);
  padding: 0.1rem 0.65rem;
  white-space: nowrap;
}
.padt-tooltip__delta {
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(8,12,30,0.96);
  border: 1px solid rgba(34,211,238,0.25);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 0.25rem 0.65rem 0.35rem;
  white-space: nowrap;
  color: rgba(255,255,255,0.38);
}
.padt-tooltip__delta--good { color: #22d3ee; }
.padt-tooltip__delta--bad  { color: #f87171; }

/* ── KPI strip ──────────────────────────────────────────────── */
.padt-kpi-strip {
  display: flex;
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-wrap: wrap;
}
.padt-kpi {
  flex: 1;
  min-width: 140px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.2rem;
  border-right: 1px solid rgba(255,255,255,0.06);
  transition: background 0.18s;
}
.padt-kpi:last-child { border-right: none; }
.padt-kpi:hover { background: rgba(255,255,255,0.025); }
.padt-kpi__icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  opacity: 0.85;
}
.padt-kpi__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.padt-kpi__label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}
.padt-kpi__val {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  transition: color 0.3s;
}

/* ── Raw data view ──────────────────────────────────────────── */
.padt-raw-wrap {
  overflow-x: auto;
  padding: 0.5rem 0 1rem;
}
.padt-raw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.8);
}
.padt-raw-table thead th {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-align: left;
  white-space: nowrap;
}
.padt-raw-table tbody td {
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  white-space: nowrap;
}
.padt-raw-table tbody tr:last-child td { border-bottom: none; }
.padt-raw-table tbody tr:hover td { background: rgba(255,255,255,0.025); }
.padt-raw-tr--cp td { background: rgba(34,211,238,0.025); }
.padt-raw-cp-tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #22d3ee;
  background: rgba(34,211,238,0.1);
  border: 1px solid rgba(34,211,238,0.25);
  border-radius: 5px;
  padding: 0.18rem 0.5rem;
}
.padt-raw-table tbody td strong { color: #fff; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .padt-header { flex-direction: column; align-items: flex-start; }
  .padt-header__controls { width: 100%; justify-content: flex-start; }
  .padt-select { min-width: 130px; }
  .padt-kpi { min-width: 120px; padding: 0.8rem 0.9rem; }
  .padt-kpi__val { font-size: 0.9rem; }
}
@media (max-width: 640px) {
  .padt-header__controls { gap: 0.4rem; }
  .padt-view-toggle { width: 100%; }
  .padt-view-btn { flex: 1; justify-content: center; }
  .padt-select { width: 100%; min-width: 0; }
  .padt-select-wrap { flex: 1; }
  .padt-kpi-strip { flex-direction: column; }
  .padt-kpi { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .padt-kpi:last-child { border-bottom: none; }
  .padt-x-axis { display: none; }
  .padt-y-axis { min-width: 32px; }
  .padt-metric-label__note { margin-left: 0; width: 100%; }
}
@media (max-width: 480px) {
  .padt-body { padding: 0.5rem 0.9rem 0.25rem; }
  .padt-header { padding: 0.85rem 0.9rem; }
  .padt-kpi { padding: 0.7rem 0.9rem; }
}