/* ============================================================
   PHOTON MC - UNIFIED STYLESHEET
   All styles in one file. No dependencies.
   ============================================================ */

/* ─── CUSTOM PROPERTIES ────────────────────────────────────── */
:root {
  /* Brand Colors */
  --color-primary:        #0EA2BD;
  --color-primary-dark:   #0189A1;
  --color-primary-light:  #1EC3E0;
  --color-accent:         #6366F1;

  /* UI Colors */
  --color-dark:           #1A1F24;
  --color-secondary:      #485664;
  --color-muted:          #6B7B8A;
  --color-light-gray:     #F8FAFC;
  --color-border:         rgba(0, 0, 0, 0.07);
  --color-white:          #FFFFFF;

  /* Semantic */
  --color-success:        #10B981;
  --color-error:          #EF4444;

  /* Gradients */
  --gradient-accent:      linear-gradient(135deg, #0EA2BD 0%, #6366F1 100%);
  --gradient-hero-orb1:   radial-gradient(circle, rgba(14,162,189,0.11) 0%, transparent 70%);
  --gradient-hero-orb2:   radial-gradient(circle, rgba(99,102,241,0.07) 0%, transparent 70%);

  /* Typography */
  --font:                 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --container-max:        1200px;
  --container-pad:        24px;
  --section-py:           96px;
  --header-h:             72px;

  /* Radius */
  --r-xs:    6px;
  --r-sm:    8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-card:    0 4px 24px rgba(0,0,0,0.06);
  --shadow-hover:   0 12px 40px rgba(0,0,0,0.11);
  --shadow-header:  0 2px 20px rgba(0,0,0,0.08);
  --shadow-cyan:    0 8px 24px rgba(14,162,189,0.28);

  /* Transitions */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:   150ms;
  --t-base:   280ms;
  --t-slow:   500ms;
}


/* ═══════════════════════════════════════════════════════════════
   PART 2 - MAIN SITE STYLES
   ═══════════════════════════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: 16px;
  color: var(--color-dark);
  background: var(--color-white);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }
strong { font-weight: 600; }

/* ─── TYPOGRAPHY ────────────────────────────────────────────── */
h1, h2, h3, h4, h5 { line-height: 1.15; color: var(--color-dark); }

h1 {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1.05;
}
h2 {
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 700;
  letter-spacing: -1px;
}
h3 {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 600;
  letter-spacing: -0.4px;
}
h4 { font-size: 16px; font-weight: 600; }

p { color: var(--color-secondary); line-height: 1.75; }

.gradient-text {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── LAYOUT ────────────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

section { padding: var(--section-py) 0; }

.section-header { text-align: center; margin-bottom: 48px; }
.section-header h2 { margin-bottom: 14px; }
.section-header p {
  font-size: 17px;
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ─── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  transition: all var(--t-base) var(--ease);
  cursor: pointer;
  border: 2px solid transparent;
  white-space: nowrap;
  text-decoration: none;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-cyan);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px);
}

.btn-white {
  background: var(--color-white);
  color: var(--color-dark);
  border-color: var(--color-white);
}
.btn-white:hover {
  background: transparent;
  color: var(--color-white);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--color-primary);
  padding: 8px 0;
  border: none;
  font-size: 14px;
  font-weight: 600;
}
.btn-ghost:hover { gap: 12px; color: var(--color-primary-dark); }
.btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ─── HEADER ─────────────────────────────────────────────────── */
#header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
#header.scrolled {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-header);
}

.header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Logo */
.logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.logo-img {
  height: 22px;
  width: auto;
  display: block;
  transition: opacity var(--t-fast);
}
.logo:hover .logo-img { opacity: 0.8; }
/* fallback text logo */
.logo-mark {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -1.2px;
  color: var(--color-dark);
  line-height: 1;
  transition: color var(--t-fast);
}
.logo-mark .dot { color: var(--color-primary); }
.logo:hover .logo-mark { color: var(--color-primary); }

/* Nav */
.nav { flex: 1; display: flex; justify-content: center; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-list > li { position: relative; }
.nav-list > li > a {
  padding: 8px 13px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-dark);
  border-radius: var(--r-xs);
  transition: all var(--t-fast) var(--ease);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-list > li > a:hover {
  color: var(--color-primary);
  background: rgba(14,162,189,0.07);
}
.nav-list > li > a.active { color: var(--color-primary); }

/* Nav dropdown arrow */
.nav-arrow {
  width: 10px; height: 10px;
  transition: transform var(--t-fast);
  flex-shrink: 0;
}
.nav-list > li:hover .nav-arrow { transform: rotate(180deg); }

/* Nav dropdown sub-menu */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--color-white);
  border-radius: var(--r-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);
  padding: 8px;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--t-fast) var(--ease);
  z-index: 200;
}
.nav-list > li:hover > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
  display: block;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-dark);
  border-radius: var(--r-xs);
  transition: all var(--t-fast);
  white-space: nowrap;
}
.nav-dropdown a:hover {
  background: var(--color-light-gray);
  color: var(--color-primary);
}

/* Header actions */
.header-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Language switcher */
.lang-switcher { position: relative; }
.lang-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,0.6);
  color: var(--color-dark);
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
  line-height: 1;
}
.lang-btn:hover {
  border-color: rgba(14,162,189,0.35);
  background: rgba(14,162,189,0.05);
}
.lang-flag {
  width: 22px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
}
.lang-chevron {
  width: 11px;
  height: 11px;
  color: var(--color-muted);
  transition: transform var(--t-fast);
  flex-shrink: 0;
}
.lang-switcher.open .lang-chevron { transform: rotate(180deg); }
/* Hide legacy chevron svg if any */
.lang-btn > svg:not(.lang-chevron) { display: none; }

.lang-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--color-white);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--r-md);
  box-shadow: 0 16px 48px rgba(14,30,55,0.14), 0 0 0 1px rgba(0,0,0,0.04);
  padding: 6px;
  min-width: 168px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top right;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s var(--ease);
  z-index: 200;
}
.lang-switcher.open .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.lang-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-secondary);
  border-radius: var(--r-xs);
  transition: background var(--t-fast), color var(--t-fast);
}
.lang-dropdown a .lang-name { letter-spacing: 0.01em; }
.lang-dropdown a:hover { background: var(--color-light-gray); color: var(--color-primary); }
.lang-dropdown a.current {
  color: var(--color-primary);
  background: rgba(14,162,189,0.08);
}

/* Burger button */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-dark);
  border-radius: 2px;
  transition: all var(--t-base) var(--ease);
  transform-origin: center;
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  height: 100vh;
  height: 100dvh;
  background: var(--color-white);
  z-index: 2000;
  padding: 88px 24px 32px;
  transition: right var(--t-base) var(--ease);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 48px rgba(0,0,0,0.1);
  overflow-y: auto;
}
.mobile-nav.open { right: 0; }
.mobile-nav-list { display: flex; flex-direction: column; gap: 2px; }
.mobile-nav-list a {
  padding: 12px 14px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-dark);
  border-radius: var(--r-sm);
  display: block;
  transition: all var(--t-fast);
}
.mobile-nav-list a:hover { background: var(--color-light-gray); color: var(--color-primary); }
.mobile-nav-footer {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mobile-nav-footer .btn { justify-content: center; }
.mobile-lang-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.mobile-lang-row a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--r-xs);
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,0.6);
  color: var(--color-secondary);
  letter-spacing: 0.3px;
  transition: all var(--t-fast);
}
.mobile-lang-row a .lang-flag {
  width: 20px;
  height: 14px;
}
.mobile-lang-row a.active,
.mobile-lang-row a:hover {
  border-color: rgba(14,162,189,0.4);
  background: rgba(14,162,189,0.08);
  color: var(--color-primary);
}
.mobile-close {
  position: absolute;
  top: 22px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-light-gray);
  color: var(--color-dark);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast);
}
.mobile-close:hover { background: rgba(0,0,0,0.1); }

.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(3px);
  z-index: 1999;
  opacity: 0;
  visibility: hidden;
  transition: all var(--t-base) var(--ease);
}
.mobile-overlay.open { opacity: 1; visibility: visible; }

/* ─── HERO ───────────────────────────────────────────────────── */
#hero {
  min-height: min(100vh, 820px);
  min-height: min(100dvh, 820px);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: var(--header-h);
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  will-change: transform;
}
.hero-orb-1 {
  width: 700px; height: 700px;
  top: -150px; right: -80px;
  background: var(--gradient-hero-orb1);
  animation: orbFloat1 14s ease-in-out infinite;
}
.hero-orb-2 {
  width: 550px; height: 550px;
  bottom: -100px; left: -60px;
  background: var(--gradient-hero-orb2);
  animation: orbFloat2 18s ease-in-out infinite;
}
.hero-orb-3 {
  width: 380px; height: 380px;
  top: 45%; left: 35%;
  background: radial-gradient(circle, rgba(14,162,189,0.05) 0%, transparent 70%);
  animation: orbFloat3 22s ease-in-out infinite;
}
@keyframes orbFloat1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%  { transform: translate(-50px, 40px) scale(1.08); }
  66%  { transform: translate(30px, -25px) scale(0.95); }
}
@keyframes orbFloat2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%  { transform: translate(70px, -50px) scale(1.12); }
}
@keyframes orbFloat3 {
  0%,100% { transform: translate(0,0); opacity: 0.5; }
  50%  { transform: translate(-40px, 60px); opacity: 1; }
}

/* fine grid overlay for subtle texture */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.5;
}

.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 48px var(--container-pad) 80px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(14,162,189,0.08);
  border: 1px solid rgba(14,162,189,0.22);
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 32px;
}
.hero-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

.hero-content h1 { max-width: 820px; margin-bottom: 24px; }
.hero-subtitle {
  font-size: 18px;
  color: var(--color-secondary);
  max-width: 680px;
  margin-bottom: 44px;
  line-height: 1.7;
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }

/* ─── STATS ──────────────────────────────────────────────────── */
#stats {
  padding: 0;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.stats-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat-item {
  padding: 40px 32px;
  text-align: center;
  position: relative;
}
.stat-item + .stat-item::before {
  content: '';
  position: absolute;
  left: 0; top: 25%; bottom: 25%;
  width: 1px;
  background: var(--color-border);
}
.stat-number {
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 900;
  letter-spacing: -2px;
  color: var(--color-dark);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-unit {
  display: inline;
  font-size: clamp(22px, 2.5vw, 32px);
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
  letter-spacing: -1px;
}
.stat-label {
  font-size: 13px;
  color: var(--color-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* ─── FEATURE CARDS ─────────────────────────────────────────── */
#services { background: var(--color-light-gray); }

.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.service-card {
  background: var(--color-white);
  border-radius: var(--r-lg);
  padding: 40px 32px;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  display: flex;
  flex-direction: column;
}
.service-card p { flex: 1; }
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }

.sc-icon {
  width: 56px; height: 56px;
  background: rgba(14,162,189,0.08);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  transition: background var(--t-base);
}
.sc-icon svg { width: 26px; height: 26px; color: var(--color-primary); }
.service-card:hover .sc-icon { background: var(--color-primary); }
.service-card:hover .sc-icon svg { color: var(--color-white); }

.service-card h3 { font-size: 20px; margin-bottom: 12px; }
.service-card p { font-size: 15px; }
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  transition: gap var(--t-fast);
}
.card-link:hover { gap: 10px; }
.card-link svg { width: 14px; height: 14px; }

/* ─── WHY PHOTON ─────────────────────────────────────────── */
#why-photon { background: var(--color-white); }
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.why-card {
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: all var(--t-base) var(--ease);
}
.why-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(14,162,189,0.1);
}
.why-card .sc-icon { margin-bottom: 16px; }
.why-card h3 { font-size: 17px; margin-bottom: 8px; }
.why-card p { font-size: 14px; line-height: 1.75; }
@media (max-width: 1080px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .why-grid { grid-template-columns: 1fr; }
}

/* ─── ABOUT ──────────────────────────────────────────────────── */
#about { background: var(--color-white); }
.about-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 72px;
  align-items: start;
}
.about-image-wrap { position: relative; }
.about-image-wrap img {
  width: 100%;
  border-radius: var(--r-xl);
  object-fit: cover;
  aspect-ratio: 4/3;
}
.about-image-wrap::after {
  content: '';
  position: absolute;
  inset: -14px -14px 14px 14px;
  border: 2px solid rgba(14,162,189,0.15);
  border-radius: var(--r-xl);
  pointer-events: none;
  z-index: -1;
}
.about-content h2 { margin-bottom: 28px; }

/* Tabs */
.tabs-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.tab-btn {
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-secondary);
  background: var(--color-light-gray);
  border-radius: var(--r-full);
  transition: all var(--t-fast) var(--ease);
  cursor: pointer;
  border: 1.5px solid transparent;
}
.tab-btn:hover { color: var(--color-primary); background: rgba(14,162,189,0.07); }
.tab-btn.active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.tab-panel { display: none; animation: fadeIn 0.25s ease; }
.tab-panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.check-list { display: flex; flex-direction: column; gap: 11px; margin-top: 12px; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--color-secondary);
}
.check-list li::before {
  content: '';
  flex-shrink: 0;
  margin-top: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(14,162,189,0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%230EA2BD' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") center/10px no-repeat;
}

.sectors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 12px;
}
.sector-tag {
  padding: 7px 12px;
  background: var(--color-light-gray);
  border-radius: var(--r-xs);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-secondary);
  border: 1px solid var(--color-border);
}

.strategy-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.strategy-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  background: var(--color-light-gray);
  border-radius: var(--r-sm);
  font-size: 14px;
}
.strategy-row .s-label { color: var(--color-secondary); }
.strategy-row .s-value { font-weight: 700; color: var(--color-dark); }

/* ─── CTA (Investors) ────────────────────────────────────────── */
#investors-cta {
  background: var(--color-dark);
  position: relative;
  overflow: hidden;
}
#investors-cta::before {
  content: '';
  position: absolute;
  top: -160px; right: -80px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(14,162,189,0.14) 0%, transparent 70%);
  pointer-events: none;
}
#investors-cta::after {
  content: '';
  position: absolute;
  bottom: -120px; left: -60px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(99,102,241,0.09) 0%, transparent 70%);
  pointer-events: none;
}
.cta-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
#investors-cta h2 { color: var(--color-white); max-width: 640px; }
#investors-cta p { color: rgba(255,255,255,0.65); max-width: 640px; margin-top: 16px; font-size: 17px; }
.cta-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }

/* ─── PARTNERS ───────────────────────────────────────────────── */
#partners { background: var(--color-light-gray); }
.partners-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.partners-text h2 { margin-bottom: 16px; }
.partners-text .lead {
  font-size: 17px;
  color: var(--color-secondary);
  line-height: 1.75;
  margin-bottom: 36px;
}
.benefits-list { display: flex; flex-direction: column; gap: 22px; margin-bottom: 36px; }
.benefit-item { display: flex; gap: 16px; align-items: flex-start; }
.benefit-icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  background: rgba(14,162,189,0.08);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-base);
}
.benefit-icon svg { width: 20px; height: 20px; color: var(--color-primary); }
.benefit-item:hover .benefit-icon { background: var(--color-primary); }
.benefit-item:hover .benefit-icon svg { color: var(--color-white); }
.benefit-text h4 { font-size: 15px; margin-bottom: 3px; }
.benefit-text p { font-size: 14px; }

.partners-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.partners-card {
  background: var(--color-white);
  border-radius: var(--r-xl);
  padding: 44px 40px;
  box-shadow: var(--shadow-card);
  width: 100%;
  text-align: center;
}
.partners-card .pc-number {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -3px;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 8px;
}
.partners-card .pc-label {
  font-size: 13px;
  color: var(--color-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 28px;
}
.partners-divider { height: 1px; background: var(--color-border); margin-bottom: 28px; }
.partners-card .pc-text { font-size: 15px; color: var(--color-secondary); line-height: 1.7; }

/* Partners steps process */
.partners-steps {
  background: var(--color-white);
  border-radius: var(--r-xl);
  padding: 40px;
  box-shadow: var(--shadow-card);
  border: 1.5px solid var(--color-border);
}
.partner-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}
.partner-step:last-of-type {
  border-bottom: none;
  margin-bottom: 16px;
  padding-bottom: 0;
}
.ps-number {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-primary);
  background: rgba(14,162,189,0.08);
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ps-body h4 { font-size: 15px; margin-bottom: 4px; }
.ps-body p { font-size: 14px; color: var(--color-secondary); line-height: 1.7; }
.ps-partners-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ps-partner-tag {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--r-full);
  background: rgba(14,162,189,0.07);
  color: var(--color-primary);
}

/* Expanded investors CTA */
.cta-inner--expanded {
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
}
.cta-text-col p { color: rgba(255,255,255,0.65); max-width: none; margin-top: 16px; font-size: 17px; }
.cta-benefits {
  list-style: none;
  margin: 24px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cta-benefits li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
}
.cta-benefits li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}
.cta-stats-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-content: start;
}
.cta-stat-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  text-align: center;
}
.cta-stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-white);
  letter-spacing: -1px;
  margin-bottom: 6px;
}
.cta-stat-label {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
}

/* ─── INVESTMENT DIRECTIONS ─────────────────────────────────── */
#directions { background: var(--color-white); }
.directions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.dir-card {
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: 32px;
  transition: all var(--t-base) var(--ease);
  cursor: default;
}
.dir-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(14,162,189,0.1);
}
.dir-icon {
  width: 48px; height: 48px;
  background: rgba(14,162,189,0.07);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all var(--t-base);
}
.dir-icon svg { width: 22px; height: 22px; color: var(--color-primary); transition: color var(--t-base); }
.dir-card:hover .dir-icon { background: var(--color-primary); }
.dir-card:hover .dir-icon svg { color: var(--color-white); }
.dir-card h3 { font-size: 17px; margin-bottom: 10px; }
.dir-card p { font-size: 14px; line-height: 1.75; }

/* ─── UNIVERSITIES ─────────────────────────────────────────── */
#universities { background: var(--color-white); }
.uni-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
}
.uni-concept { margin-bottom: 32px; }
.uni-badge {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(14,162,189,0.08);
  border: 1px solid rgba(14,162,189,0.2);
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 16px;
}
.uni-concept h3 { font-size: 22px; margin-bottom: 12px; line-height: 1.3; }
.uni-concept p { font-size: 15px; color: var(--color-secondary); line-height: 1.75; }
.uni-tracks { display: flex; flex-direction: column; gap: 16px; }
.uni-track {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  background: var(--color-light-gray);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--color-border);
}
.uni-track-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14,162,189,0.08);
  border-radius: var(--r-md);
  color: var(--color-primary);
}
.uni-track-body h4 { font-size: 15px; margin-bottom: 4px; }
.uni-track-body p { font-size: 14px; color: var(--color-secondary); line-height: 1.7; }
.uni-pipeline {
  background: var(--color-light-gray);
  border-radius: var(--r-xl);
  padding: 32px;
  box-shadow: var(--shadow-card);
  border: 1.5px solid var(--color-border);
}
.uni-pipeline-title { font-size: 16px; font-weight: 700; margin-bottom: 20px; text-align: center; }
.uni-funnel { display: flex; flex-direction: column; gap: 8px; }
.uni-funnel-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--color-white);
  transition: all var(--t-base);
}
.uni-funnel-step:hover { background: rgba(14,162,189,0.08); }
.ufs-num { font-size: 13px; font-weight: 800; color: var(--color-primary); min-width: 28px; }
.ufs-name { font-size: 14px; font-weight: 600; color: var(--color-dark); }
.uni-pipeline-note { font-size: 13px; color: var(--color-muted); text-align: center; margin-top: 16px; }

/* ─── FRAMEWORK PAGE ──────────────────────────────────────── */
.fw-overview {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
}
.fw-overview-text h3 { font-size: 22px; margin-bottom: 14px; }
.fw-overview-text p { font-size: 16px; color: var(--color-secondary); line-height: 1.8; }
.fw-overview-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.fw-stat-card {
  background: var(--color-light-gray);
  border-radius: var(--r-lg);
  padding: 24px;
  text-align: center;
}
.fw-stat-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--color-dark);
  letter-spacing: -1px;
}
.fw-stat-label {
  font-size: 13px;
  color: var(--color-muted);
  margin-top: 4px;
}
.fw-funnel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
}
.fw-hyp-card {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 24px 28px;
  background: var(--color-white);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--color-border);
  transition: all var(--t-base);
}
.fw-hyp-card:hover {
  border-color: var(--color-primary);
  transform: translateX(4px);
  box-shadow: 0 4px 20px rgba(14,162,189,0.08);
}
.fw-hyp-num { font-size: 22px; font-weight: 900; color: var(--color-primary); }
.fw-hyp-body h4 { font-size: 16px; margin-bottom: 4px; }
.fw-hyp-body p { font-size: 14px; color: var(--color-secondary); }
.fw-hyp-pct { font-size: 18px; font-weight: 800; color: var(--color-muted); white-space: nowrap; }
.fw-tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.fw-track-card {
  background: var(--color-white);
  border-radius: var(--r-xl);
  padding: 36px;
  box-shadow: var(--shadow-card);
  border: 1.5px solid var(--color-border);
}
.fw-track-card h3 { font-size: 20px; margin-bottom: 8px; }
.fw-track-sub { font-size: 14px; color: var(--color-primary); font-weight: 600; margin-bottom: 16px; }
.fw-track-meta { display: flex; gap: 12px; margin-bottom: 16px; }
.fw-track-tag {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--r-full);
  background: rgba(14,162,189,0.07);
  color: var(--color-primary);
}
.fw-eco-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.fw-eco-card {
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: all var(--t-base);
}
.fw-eco-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(14,162,189,0.08);
}
.fw-eco-card h4 { font-size: 16px; margin-bottom: 6px; }
.fw-eco-card p { font-size: 14px; color: var(--color-secondary); line-height: 1.7; }
.fw-eco-badge {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  padding: 4px 10px;
  background: rgba(14,162,189,0.07);
  border-radius: var(--r-full);
}

/* ─── INNOVATION FRAMEWORK PAGE v2 ──────────────────────── */

/* Framework page - reduced vertical rhythm (many sections) */
.page-framework { --section-py: 72px; }
.page-framework .section-header { margin-bottom: 36px; }
.page-framework .section-header p { max-width: 980px; }
@media (max-width: 1080px) {
  .page-framework { --section-py: 60px; }
  .page-framework .section-header { margin-bottom: 28px; }
}
@media (max-width: 768px) {
  .page-framework { --section-py: 48px; }
}

/* Sector theming - each sector has its own accent color */
html[data-active-sector="fintech"] {
  --c-sector: #0EA2BD;
  --c-sector-soft: rgba(14, 162, 189, 0.08);
  --c-sector-border: rgba(14, 162, 189, 0.22);
}
html[data-active-sector="edtech"] {
  --c-sector: #10B981;
  --c-sector-soft: rgba(16, 185, 129, 0.08);
  --c-sector-border: rgba(16, 185, 129, 0.22);
}
html[data-active-sector="agrotech"] {
  --c-sector: #F59E0B;
  --c-sector-soft: rgba(245, 158, 11, 0.08);
  --c-sector-border: rgba(245, 158, 11, 0.22);
}
html[data-active-sector="industrytech"] {
  --c-sector: #8B5CF6;
  --c-sector-soft: rgba(139, 92, 246, 0.08);
  --c-sector-border: rgba(139, 92, 246, 0.22);
}

/* Sector switcher (sticky, compact) */
.fw-sector-bar-section {
  padding: 16px 0;
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  transition: padding var(--t-base) var(--ease);
}
.fw-sector-bar-section.compact { padding: 10px 0; }
.fw-sector-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 4px;
  background: var(--color-light-gray);
  border-radius: var(--r-sm);
  border: 1px solid var(--color-border);
  max-width: 900px;
  margin: 0 auto;
}
.fw-sector-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  text-align: left;
}
.fw-sector-btn:hover { background: rgba(14,162,189,0.05); }
.fw-sector-btn.active {
  background: var(--color-white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border-top: 2px solid var(--c-sector);
}
.fw-sector-btn.active .fw-sector-name { color: var(--c-sector); }
.fw-sector-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.fw-sector-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}
.fw-sector-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.2;
  transition: color var(--t-fast);
}
.fw-sector-sub {
  font-size: 10px;
  color: var(--color-muted);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.fw-sector-hint {
  text-align: center;
  font-size: 13px;
  color: var(--color-muted);
  margin-top: 12px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  max-height: 40px;
  opacity: 1;
  overflow: hidden;
  transition: max-height var(--t-base) var(--ease), opacity var(--t-base) var(--ease), margin-top var(--t-base) var(--ease);
}
.fw-sector-bar-section.compact .fw-sector-hint {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

/* Sector-aware visibility (default: fintech only) */
[data-sector="edtech"],
[data-sector="agrotech"],
[data-sector="industrytech"] { display: none; }
html[data-active-sector="edtech"] [data-sector="fintech"],
html[data-active-sector="edtech"] [data-sector="agrotech"],
html[data-active-sector="edtech"] [data-sector="industrytech"] { display: none; }
html[data-active-sector="edtech"] [data-sector="edtech"] { display: inline; }
html[data-active-sector="agrotech"] [data-sector="fintech"],
html[data-active-sector="agrotech"] [data-sector="edtech"],
html[data-active-sector="agrotech"] [data-sector="industrytech"] { display: none; }
html[data-active-sector="agrotech"] [data-sector="agrotech"] { display: inline; }
html[data-active-sector="industrytech"] [data-sector="fintech"],
html[data-active-sector="industrytech"] [data-sector="edtech"],
html[data-active-sector="industrytech"] [data-sector="agrotech"] { display: none; }
html[data-active-sector="industrytech"] [data-sector="industrytech"] { display: inline; }

/* Actor pills (shared by grid cards and modal) */
.fw-actor-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  white-space: nowrap;
}
.fw-actor-pill.actor-academia {
  background: rgba(14,162,189,0.08);
  color: var(--color-primary);
  border-color: rgba(14,162,189,0.2);
}
.fw-actor-pill.actor-bank {
  background: rgba(99,102,241,0.08);
  color: var(--color-accent);
  border-color: rgba(99,102,241,0.2);
}
.fw-actor-pill.actor-regulator {
  background: rgba(139,92,246,0.08);
  color: #8b5cf6;
  border-color: rgba(139,92,246,0.2);
}
.fw-actor-pill.actor-lab {
  background: rgba(236,72,153,0.08);
  color: #ec4899;
  border-color: rgba(236,72,153,0.2);
}
.fw-actor-pill.actor-photon {
  background: rgba(245,158,11,0.08);
  color: #f59e0b;
  border-color: rgba(245,158,11,0.2);
}
.fw-actor-pill.actor-vc {
  background: rgba(16,185,129,0.08);
  color: var(--color-success);
  border-color: rgba(16,185,129,0.2);
}

/* Why it matters - comparison section */
.fw-why-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.fw-why-col {
  background: var(--color-white);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  border: 1.5px solid var(--color-border);
  position: relative;
}
.fw-why-col--before {
  background: var(--color-light-gray);
}
.fw-why-col--after {
  border-color: var(--c-sector, var(--color-primary));
  border-top-width: 3px;
  border-top-style: solid;
  border-top-color: var(--c-sector, var(--color-primary));
}
.fw-why-label {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--r-full);
  margin-bottom: 12px;
}
.fw-why-col--before .fw-why-label {
  background: rgba(0,0,0,0.06);
  color: var(--color-muted);
}
.fw-why-col--after .fw-why-label {
  background: var(--c-sector-soft, rgba(14,162,189,0.08));
  color: var(--c-sector, var(--color-primary));
}
.fw-why-col h3 {
  font-size: 19px;
  margin-bottom: 18px;
  color: var(--color-dark);
  line-height: 1.3;
}
.fw-why-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fw-why-list li {
  padding-left: 28px;
  position: relative;
  font-size: 14px;
  color: var(--color-secondary);
  line-height: 1.65;
}
.fw-why-col--before .fw-why-list li::before {
  content: '✕';
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #EF4444;
  background: rgba(239,68,68,0.1);
  border-radius: 50%;
}
.fw-why-col--after .fw-why-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-sector, var(--color-primary));
  background: var(--c-sector-soft, rgba(14,162,189,0.08));
  border-radius: 50%;
}

/* Benefits by audience - 4 cards */
.fw-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.fw-benefit-card {
  background: var(--color-white);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  border: 1.5px solid var(--color-border);
  transition: all var(--t-base) var(--ease);
  display: flex;
  flex-direction: column;
}
.fw-benefit-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  border-color: var(--c-sector, var(--color-primary));
}
.fw-benefit-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  background: var(--c-sector-soft, rgba(14,162,189,0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 16px;
}
.fw-benefit-card h4 {
  font-size: 16px;
  margin-bottom: 14px;
  color: var(--color-dark);
}
.fw-benefit-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fw-benefit-list li {
  padding-left: 18px;
  position: relative;
  font-size: 13px;
  color: var(--color-secondary);
  line-height: 1.55;
}
.fw-benefit-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-sector, var(--color-primary));
  font-weight: 700;
}

/* Compact 3×2 hypothesis grid */
.fw-hyp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
.fw-hyp-mini {
  background: var(--color-white);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--color-border);
  border-top-width: 3px;
  border-top-style: solid;
  border-top-color: var(--c-sector, var(--color-primary));
  padding: 18px 20px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all var(--t-base) var(--ease);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fw-hyp-mini:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  border-color: var(--c-sector, var(--color-primary));
}
.fw-hyp-mini-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.fw-hyp-mini-num {
  font-size: 22px;
  font-weight: 900;
  color: var(--c-sector, var(--color-primary));
  line-height: 1;
}
.fw-hyp-mini-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-muted);
  background: var(--color-light-gray);
  padding: 4px 10px;
  border-radius: var(--r-full);
}
.fw-hyp-mini-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
  line-height: 1.3;
}
.fw-hyp-mini-sub {
  font-size: 12px;
  color: var(--color-muted);
  font-weight: 500;
  margin: 0;
}
.fw-hyp-mini-desc {
  font-size: 13px;
  color: var(--color-secondary);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.fw-hyp-mini-actors {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}
.fw-hyp-mini-more {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-sector, var(--color-primary));
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.fw-hyp-mini-more::after {
  content: '→';
  transition: transform var(--t-fast);
}
.fw-hyp-mini:hover .fw-hyp-mini-more::after { transform: translateX(3px); }

/* Hypothesis detail modal */
.fw-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.fw-modal.open { display: flex; }
.fw-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease;
}
.fw-modal-dialog {
  position: relative;
  background: var(--color-white);
  border-radius: var(--r-xl);
  max-width: 820px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
  animation: fadeIn 0.25s ease, modalSlide 0.3s ease;
}
@keyframes modalSlide {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.fw-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-light-gray);
  border: none;
  font-size: 20px;
  color: var(--color-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background var(--t-fast);
}
.fw-modal-close:hover { background: rgba(0,0,0,0.1); }
.fw-modal-head {
  padding: 32px 40px 24px;
  border-bottom: 1px solid var(--color-border);
}
.fw-modal-head-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.fw-modal-num {
  font-size: 28px;
  font-weight: 900;
  color: var(--c-sector, var(--color-primary));
  line-height: 1;
}
.fw-modal-pct-badge {
  font-size: 12px;
  font-weight: 700;
  background: var(--c-sector-soft, rgba(14,162,189,0.08));
  color: var(--c-sector, var(--color-primary));
  padding: 4px 12px;
  border-radius: var(--r-full);
}
.fw-modal-head h3 {
  font-size: 22px;
  margin-bottom: 4px;
  color: var(--color-dark);
}
.fw-modal-sub {
  font-size: 13px;
  color: var(--color-muted);
  margin: 0;
}
.fw-modal-body {
  padding: 24px 40px 40px;
  background: var(--color-light-gray);
}
.fw-hyp-detail-body {
  padding: 0;
  background: transparent;
}
.fw-hyp-goal {
  background: var(--color-white);
  border-left: 4px solid var(--color-primary);
  padding: 20px 24px;
  border-radius: var(--r-sm);
  margin-bottom: 24px;
}
.fw-hyp-goal-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-primary);
  font-weight: 700;
  margin-bottom: 6px;
}
.fw-hyp-goal p {
  font-size: 15px;
  color: var(--color-dark);
  line-height: 1.7;
  margin: 0;
}
.fw-hyp-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.fw-hyp-meta {
  background: var(--color-white);
  padding: 14px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--color-border);
}
.fw-hyp-meta > span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-muted);
  font-weight: 700;
  margin-bottom: 4px;
}
.fw-hyp-meta > strong {
  font-size: 14px;
  color: var(--color-dark);
  font-weight: 600;
}
.fw-hyp-section-title {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-dark);
  font-weight: 800;
  margin: 24px 0 14px;
}
.fw-hyp-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
}
.fw-hyp-steps li {
  display: flex;
  gap: 16px;
  background: var(--color-white);
  padding: 16px 20px;
  border-radius: var(--r-sm);
  border: 1px solid var(--color-border);
}
.fw-step-num {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-primary);
  background: rgba(14,162,189,0.08);
  width: 32px;
  height: 32px;
  border-radius: var(--r-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fw-hyp-steps li > div { flex: 1; }
.fw-hyp-steps strong {
  display: block;
  font-size: 14px;
  color: var(--color-dark);
  margin-bottom: 4px;
}
.fw-hyp-steps p {
  font-size: 13px;
  color: var(--color-secondary);
  line-height: 1.6;
  margin: 0;
}
.fw-hyp-outputs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.fw-output {
  background: var(--color-white);
  padding: 14px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--color-border);
}
.fw-output strong {
  display: block;
  font-size: 13px;
  color: var(--color-primary);
  margin-bottom: 4px;
}
.fw-output p {
  font-size: 12px;
  color: var(--color-secondary);
  line-height: 1.5;
  margin: 0;
}
.fw-hyp-partners {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fw-hyp-partners li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--color-white);
  padding: 12px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--color-border);
}
.fw-hyp-partners li p {
  font-size: 13px;
  color: var(--color-secondary);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.fw-hyp-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 16px;
  margin: 0 auto 12px;
  max-width: 600px;
}
.fw-gate-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-muted);
}
.fw-gate-rate {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  padding: 4px 12px;
  background: rgba(14,162,189,0.08);
  border-radius: var(--r-full);
}

/* Reusable table */
.fw-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.fw-table th,
.fw-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}
.fw-table th {
  background: var(--color-light-gray);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-dark);
  font-weight: 700;
}
.fw-table tbody tr:last-child td { border-bottom: none; }
.fw-table tbody td:first-child {
  color: var(--color-secondary);
  font-weight: 600;
}
.fw-table-compare td { color: var(--color-dark); }
.fw-table-note {
  font-size: 13px;
  color: var(--color-muted);
  margin-top: 16px;
  text-align: center;
}

/* Role matrix (actor × hypothesis grid) */
.fw-role-matrix {
  background: var(--color-white);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--color-border);
  overflow: hidden;
  margin-bottom: 32px;
}
.fw-role-matrix-head,
.fw-role-matrix-row {
  display: grid;
  grid-template-columns: 220px repeat(6, 1fr);
  align-items: center;
}
.fw-role-matrix-head {
  background: var(--color-light-gray);
  border-bottom: 1.5px solid var(--color-border);
}
.fw-role-matrix-row + .fw-role-matrix-row { border-top: 1px solid var(--color-border); }
.fw-role-matrix-cell {
  padding: 14px 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-muted);
}
.fw-role-matrix-head .fw-role-matrix-cell { color: var(--color-dark); }
.fw-role-matrix-actor {
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-dark);
  border-right: 1px solid var(--color-border);
}
.fw-role-on {
  position: relative;
}
.fw-role-on::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(14,162,189,0.18);
}
.fw-role-soft::after {
  background: rgba(14,162,189,0.35);
  box-shadow: none;
  width: 10px;
  height: 10px;
}
.fw-eco-roles {
  list-style: none;
  padding: 0;
  margin: 14px 0 0 0;
}
.fw-eco-roles li {
  font-size: 13px;
  color: var(--color-secondary);
  line-height: 1.6;
  padding-left: 12px;
  position: relative;
  margin-bottom: 6px;
}
.fw-eco-roles li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary);
}
.fw-eco-roles strong {
  color: var(--color-primary);
  font-weight: 700;
}

/* Two-fund investment path */
.fw-fund-compare {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  gap: 24px;
  align-items: stretch;
}
.fw-fund-card {
  background: var(--color-white);
  border-radius: var(--r-xl);
  padding: 32px;
  box-shadow: var(--shadow-card);
  border: 1.5px solid var(--color-border);
}
.fw-fund-icon { font-size: 32px; margin-bottom: 12px; }
.fw-fund-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 4px;
}
.fw-fund-stage {
  font-size: 13px;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 20px;
}
.fw-fund-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fw-fund-rows > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
  gap: 12px;
}
.fw-fund-rows > div:last-child { border-bottom: none; }
.fw-fund-rows span { color: var(--color-muted); }
.fw-fund-rows strong {
  color: var(--color-dark);
  font-weight: 700;
  text-align: right;
}
.fw-fund-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--color-primary);
  font-weight: 300;
}

/* Portfolio cohorts */
.fw-cohort-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}
.fw-cohort-card {
  background: var(--color-white);
  border-radius: var(--r-xl);
  padding: 28px;
  box-shadow: var(--shadow-card);
  border: 1.5px solid var(--color-border);
}
.fw-cohort-steady {
  border-color: var(--color-primary);
  background: linear-gradient(135deg, var(--color-white) 0%, rgba(14,162,189,0.03) 100%);
}
.fw-cohort-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 4px;
}
.fw-cohort-period {
  font-size: 13px;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.fw-cohort-metrics {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fw-cohort-metrics li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
}
.fw-cohort-metrics li:last-child { border-bottom: none; }
.fw-cohort-metrics span { color: var(--color-muted); }
.fw-cohort-metrics strong {
  color: var(--color-dark);
  font-weight: 700;
}
.fw-pareto-note {
  background: var(--color-white);
  border-left: 4px solid var(--color-accent);
  padding: 20px 24px;
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--color-secondary);
  line-height: 1.7;
}
.fw-pareto-note strong {
  color: var(--color-dark);
  font-weight: 700;
}

/* Governance cadence */
.fw-gov-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.fw-gov-col {
  background: var(--color-white);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1.5px solid var(--color-border);
  box-shadow: var(--shadow-card);
}
.fw-gov-head {
  padding: 20px 18px;
  color: var(--color-white);
  text-align: center;
}
.fw-gov-head.fw-gov-weekly { background: linear-gradient(135deg, #0ea2bd, #06b6d4); }
.fw-gov-head.fw-gov-monthly { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.fw-gov-head.fw-gov-quarterly { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.fw-gov-head.fw-gov-annual { background: linear-gradient(135deg, #10b981, #059669); }
.fw-gov-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  opacity: 0.85;
  margin-bottom: 6px;
}
.fw-gov-name {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 6px;
}
.fw-gov-freq {
  font-size: 12px;
  opacity: 0.85;
}
.fw-gov-row {
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
  color: var(--color-secondary);
  line-height: 1.6;
}
.fw-gov-row:last-child { border-bottom: none; }
.fw-gov-row strong {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-muted);
  margin-bottom: 4px;
  font-weight: 700;
}

/* Next step callout */
.fw-next-step-wrap { padding: 16px 0; }
.fw-next-step {
  background: var(--color-white);
  border-radius: var(--r-xl);
  padding: 40px;
  box-shadow: var(--shadow-card);
  border: 1.5px solid var(--color-border);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.fw-next-step-text h2 {
  font-size: 26px;
  margin-bottom: 8px;
}
.fw-next-step-text p {
  font-size: 15px;
  color: var(--color-secondary);
  margin: 0;
}
.fw-next-step-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Responsive for Innovation Framework v2 */
@media (max-width: 1080px) {
  .fw-sector-bar { grid-template-columns: repeat(2, 1fr); }
  .fw-hyp-grid { grid-template-columns: repeat(2, 1fr); }
  .fw-role-matrix-head,
  .fw-role-matrix-row { grid-template-columns: 160px repeat(6, 1fr); }
  .fw-role-matrix-actor { font-size: 13px; padding: 14px; }
  .fw-cohort-grid { grid-template-columns: 1fr; }
  .fw-gov-grid { grid-template-columns: repeat(2, 1fr); }
  .fw-next-step { grid-template-columns: 1fr; text-align: center; }
  .fw-next-step-actions { justify-content: center; }
  .fw-why-compare { grid-template-columns: 1fr; }
  .fw-benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .fw-sector-bar { grid-template-columns: 1fr 1fr; }
  .fw-sector-btn { padding: 8px 10px; }
  .fw-sector-icon { font-size: 18px; }
  .fw-sector-name { font-size: 12px; }
  .fw-sector-sub { font-size: 10px; }

  .fw-hyp-grid { grid-template-columns: 1fr; }
  .fw-hyp-mini { min-height: auto; }

  .fw-modal { padding: 12px; }
  .fw-modal-head { padding: 24px 24px 20px; }
  .fw-modal-body { padding: 20px 24px 32px; }
  .fw-modal-head h3 { font-size: 18px; }

  .fw-hyp-meta-grid { grid-template-columns: 1fr; }
  .fw-hyp-outputs { grid-template-columns: 1fr; }

  .fw-role-matrix { overflow-x: auto; }
  .fw-role-matrix-head,
  .fw-role-matrix-row {
    min-width: 560px;
    grid-template-columns: 140px repeat(6, 1fr);
  }

  .fw-gov-grid { grid-template-columns: 1fr; }

  /* Dual-track comparison table → stacked cards on mobile */
  .fw-table-compare,
  .fw-table-compare thead,
  .fw-table-compare tbody,
  .fw-table-compare tr,
  .fw-table-compare th,
  .fw-table-compare td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .fw-table-compare { box-shadow: var(--shadow-card); border-radius: var(--r-lg); overflow: hidden; background: var(--color-white); }
  .fw-table-compare thead { display: none; }
  .fw-table-compare tbody tr {
    padding: 12px 16px 14px;
    border-bottom: 1px solid var(--color-border);
  }
  .fw-table-compare tbody tr:last-child { border-bottom: none; }
  .fw-table-compare td {
    padding: 4px 0;
    border: none;
    font-size: 13px;
  }
  .fw-table-compare td:first-child {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-muted);
    font-weight: 700;
    padding-bottom: 6px;
  }
  .fw-table-compare td:nth-child(2),
  .fw-table-compare td:nth-child(3) {
    padding-left: 20px;
    position: relative;
  }
  .fw-table-compare td:nth-child(2)::before {
    content: '🏫 Академический';
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    padding-left: 0;
    position: static;
  }
  .fw-table-compare td:nth-child(3)::before {
    content: '⚡ Стартап';
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    padding-left: 0;
    position: static;
  }

  .fw-table:not(.fw-table-compare) { font-size: 13px; }
  .fw-table:not(.fw-table-compare) th,
  .fw-table:not(.fw-table-compare) td { padding: 12px 14px; }

  .fw-benefits-grid { grid-template-columns: 1fr; }
  .fw-why-col { padding: 24px 20px; }
}

/* ─── TEAM PAGE ─────────────────────────────────────────────── */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.team-card {
  background: var(--color-white);
  border-radius: var(--r-xl);
  padding: 40px;
  box-shadow: var(--shadow-card);
  border: 1.5px solid var(--color-border);
  text-align: center;
}
.team-photo {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--color-light-gray);
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800; color: var(--color-muted);
  border: 3px solid var(--color-border);
}
.team-card h3 { font-size: 20px; margin-bottom: 4px; }
.team-role { font-size: 14px; color: var(--color-primary); font-weight: 600; margin-bottom: 16px; }
.team-card p { font-size: 15px; color: var(--color-secondary); line-height: 1.75; }

.ic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ic-card {
  background: var(--color-white);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.ic-photo {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--color-light-gray);
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: var(--color-muted);
}
.ic-card h4 { font-size: 16px; margin-bottom: 4px; }
.ic-card p { font-size: 14px; color: var(--color-secondary); }

.advisory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.advisory-card {
  text-align: center;
  padding: 24px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-lg);
}
.advisory-card h4 { font-size: 15px; margin-bottom: 4px; }
.advisory-card p { font-size: 13px; color: var(--color-muted); }

@media (max-width: 1080px) {
  .advisory-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .team-grid { grid-template-columns: 1fr; }
  .ic-grid { grid-template-columns: 1fr; }
  .advisory-grid { grid-template-columns: 1fr; }
}

/* ─── ORG CHART (team page) ─────────────────────────────────── */
.team-org-section {
  padding: 60px 0 80px;
  background: var(--color-white);
}
.org-chart {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 0 40px;
}
.org-chart * { box-sizing: border-box; }

/* Tree structure */
.org-tree,
.org-tree ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.org-tree {
  display: flex;
  justify-content: center;
}
.org-tree ul {
  display: flex;
  justify-content: center;
  gap: 20px;
  position: relative;
  padding-top: 28px;
}
.org-tree li {
  position: relative;
  padding: 28px 6px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.org-tree > li { padding-top: 0; }

/* Horizontal + vertical connector halves above each sibling li.
   ::before has border-top (left half of horizontal line) + border-right
   (short vertical line from horizontal down to the card). ::after
   contributes only the right half of the horizontal line. */
.org-tree ul li::before,
.org-tree ul li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  width: 50%;
  height: 28px;
  border-top: 2px solid var(--color-border);
}
.org-tree ul li::before {
  border-right: 2px solid var(--color-border);
}
.org-tree ul li::after {
  right: auto;
  left: 50%;
}
/* Only-child: hide horizontal halves but keep the vertical line down to the card */
.org-tree ul li:only-child::before {
  border-top: none;
}
.org-tree ul li:only-child::after { display: none; }

/* Edge corrections for the horizontal line without losing the vertical connector */
.org-tree ul li:first-child:not(:only-child)::before { border-top: none; }
.org-tree ul li:last-child:not(:only-child)::after { border-top: none; }

/* Vertical line from parent ul going down to the connector row */
.org-tree ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 28px;
  background: var(--color-border);
  transform: translateX(-50%);
}
.org-tree > ul::before { display: none; }

/* Card wrap - inline-block so absolutely positioned children anchor to card */
.org-card-wrap {
  position: relative;
  display: inline-block;
}

/* ─── Org cards ─── */
.org-card {
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: 12px;
  padding: 14px 22px;
  text-align: center;
  min-width: 190px;
  max-width: 220px;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: var(--shadow-card);
  transition: all var(--t-base) var(--ease);
}
.org-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.org-role {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.35;
}
.org-vacant-badge {
  display: inline-block;
  margin-top: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(161, 161, 170, 0.14);
  color: #71717a;
}

/* Top card (Managing Partner) - primary accent */
.org-card--top {
  border-color: var(--color-primary);
  background: linear-gradient(135deg, var(--color-primary) 0%, #13c6e3 100%);
  color: var(--color-white);
  box-shadow: 0 10px 28px rgba(14, 162, 189, 0.22);
}
.org-card--top .org-role {
  color: var(--color-white);
  font-size: 14.5px;
}

/* Small card (Analysts) */
.org-card--sm {
  min-width: 150px;
  max-width: 170px;
  min-height: 76px;
  padding: 12px 16px;
}
.org-card--sm .org-role { font-size: 12px; }
.org-card--sm .org-vacant-badge { font-size: 9.5px; padding: 2px 8px; margin-top: 6px; }

/* Vacant card (dashed border, muted) */
.org-card--vacant {
  border-color: #a1a1aa;
  border-style: dashed;
  background: rgba(161, 161, 170, 0.04);
  box-shadow: none;
}
.org-card--vacant:hover {
  transform: none;
  box-shadow: none;
}
.org-card--vacant .org-role { color: var(--color-muted); }

/* Side card (Accountant) - subtle background differentiation */
.org-card--side {
  background: var(--color-light-gray);
  min-width: 170px;
  max-width: 190px;
}

/* Accountant side wing - absolutely positioned next to Director card */
.org-side-wing {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  white-space: nowrap;
  z-index: 2;
}
.org-side-connector {
  display: block;
  width: 36px;
  height: 0;
  border-top: 2px dashed #9ca3af;
  flex-shrink: 0;
}
.org-side-wing .org-card {
  margin-left: 6px;
  flex-shrink: 0;
}

/* ─── Mobile: stacked vertical layout ─── */
@media (max-width: 960px) {
  .team-org-section { padding: 40px 0 60px; }
  .org-chart { padding: 10px 12px 24px; max-width: 100%; }

  .org-tree ul {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-top: 20px;
  }
  .org-tree li {
    padding: 16px 0 0;
  }
  /* Hide horizontal connectors and default vertical line */
  .org-tree ul li::before,
  .org-tree ul li::after,
  .org-tree ul::before {
    display: none;
  }
  /* Vertical connector between stacked nodes */
  .org-tree ul li:not(:first-child)::before {
    content: '';
    display: block;
    position: static;
    width: 2px;
    height: 16px;
    margin: 0 auto 16px;
    background: var(--color-border);
    border: none;
  }

  /* Accountant wing becomes a normal block below Director on mobile */
  .org-side-wing {
    position: static;
    transform: none;
    margin-top: 12px;
    flex-direction: column;
    align-items: center;
  }
  .org-side-connector {
    width: 2px;
    height: 14px;
    border-top: none;
    border-left: 2px dashed #9ca3af;
  }
  .org-side-wing .org-card {
    margin-left: 0;
    margin-top: 4px;
  }

  .org-card {
    min-width: 240px;
    max-width: 300px;
  }
  .org-card--sm {
    min-width: 220px;
    max-width: 280px;
  }
}

/* ─── PARTNER LOGOS STRIP (homepage) ──────────────────────── */
.partners-strip {
  background: var(--color-light-gray);
  padding: 56px 0;
}
.partners-strip .container { text-align: center; }
.partners-strip-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--color-muted);
  margin-bottom: 32px;
}
.partners-strip-logos {
  display: flex;
  justify-content: center;
  gap: 64px;
  flex-wrap: wrap;
  align-items: center;
}
.partners-strip-logos img {
  max-height: 56px;
  max-width: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.partners-strip-logos img:hover {
  filter: grayscale(0);
  opacity: 1;
}
@media (max-width: 720px) {
  .partners-strip { padding: 40px 0; }
  .partners-strip-logos { gap: 36px; }
  .partners-strip-logos img { max-height: 44px; max-width: 140px; }
}

/* ─── LEGAL DOCUMENTS (Privacy / Terms) ─────────────────────── */
.legal-doc {
  max-width: 820px;
  margin: 0 auto;
  color: var(--color-secondary);
  line-height: 1.75;
  font-size: 15.5px;
}
.legal-doc h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-dark);
  margin-top: 48px;
  margin-bottom: 16px;
  line-height: 1.3;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-border);
}
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-dark);
  margin-top: 28px;
  margin-bottom: 12px;
}
.legal-doc p {
  margin-bottom: 14px;
}
.legal-doc p strong {
  color: var(--color-dark);
  font-weight: 600;
}
.legal-doc ul,
.legal-doc ol {
  margin: 0 0 16px 0;
  padding-left: 24px;
}
.legal-doc ul li,
.legal-doc ol li {
  margin-bottom: 8px;
  padding-left: 4px;
}
.legal-doc ul li strong,
.legal-doc ol li strong {
  color: var(--color-dark);
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px 0;
  font-size: 14px;
  background: var(--color-white);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1.5px solid var(--color-border);
}
.legal-table thead {
  background: var(--color-light-gray);
}
.legal-table th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 700;
  color: var(--color-dark);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 2px solid var(--color-border);
}
.legal-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  line-height: 1.6;
}
.legal-table tr:last-child td {
  border-bottom: none;
}
.legal-table tr:hover td {
  background: rgba(14, 162, 189, 0.03);
}

/* Hero subtitle for legal pages */
.page-hero p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  margin-top: 12px;
}
.page-hero p .place-h {
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
  .legal-doc { font-size: 14.5px; }
  .legal-doc h2 { font-size: 19px; margin-top: 36px; }
  .legal-doc h3 { font-size: 16px; }
  .legal-table {
    font-size: 13px;
    display: block;
    overflow-x: auto;
  }
  .legal-table th,
  .legal-table td { padding: 10px 12px; }
}

/* Placeholder highlight - for finalization markers */
.legal-doc .place-h,
.page-hero .place-h {
  background: rgba(250, 204, 21, 0.22);
  border: 1px dashed rgba(234, 179, 8, 0.5);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  color: #92400e;
}

/* ─── FAQ ─────────────────────────────────────────────────── */
.faq-item {
  background: var(--color-white);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--color-border);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color var(--t-base);
}
.faq-item[open] { border-color: var(--color-primary); }
.faq-question {
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-dark);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: '+';
  font-size: 20px;
  font-weight: 300;
  color: var(--color-primary);
  flex-shrink: 0;
  transition: transform var(--t-base);
}
.faq-item[open] .faq-question::after {
  transform: rotate(45deg);
}
.faq-answer {
  padding: 0 24px 20px;
}
.faq-answer p {
  font-size: 15px;
  color: var(--color-secondary);
  line-height: 1.75;
}

/* ─── CONTACT ────────────────────────────────────────────────── */
#contact { background: var(--color-light-gray); }
.contact-layout {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 56px;
  margin-bottom: 40px;
}
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto 40px;
}
.contact-info-grid .contact-detail {
  background: var(--color-white);
  border-radius: var(--r-lg);
  padding: 24px;
  border: 1.5px solid var(--color-border);
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.contact-info-grid .cd-icon { margin-bottom: 4px; }
.contact-info-grid .cd-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-muted);
  margin-bottom: 4px;
}
.contact-info-grid .cd-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-dark);
}
.contact-cta {
  text-align: center;
  margin-bottom: 40px;
}
@media (max-width: 1080px) {
  .contact-info-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .contact-info-grid { grid-template-columns: 1fr; }
}
.contact-info h2 { margin-bottom: 14px; }
.contact-info .lead {
  font-size: 16px;
  color: var(--color-secondary);
  margin-bottom: 36px;
  line-height: 1.75;
}
.contact-details { display: flex; flex-direction: column; gap: 18px; }
.contact-detail { display: flex; gap: 14px; align-items: flex-start; }
.cd-icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  background: rgba(14,162,189,0.08);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cd-icon svg { width: 17px; height: 17px; color: var(--color-primary); }
.cd-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--color-muted);
  margin-bottom: 2px;
}
.cd-value { font-size: 15px; color: var(--color-dark); font-weight: 500; }
.cd-value a { color: var(--color-primary); transition: color var(--t-fast); }
.cd-value a:hover { color: var(--color-primary-dark); }

/* Contact form card */
.contact-form-card {
  background: var(--color-white);
  border-radius: var(--r-xl);
  padding: 40px;
  box-shadow: var(--shadow-card);
  max-width: 640px;
}
.contact-form-card h3 { font-size: 22px; margin-bottom: 28px; }

/* Form elements */
.form-group { margin-bottom: 18px; }
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 7px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.form-control {
  width: 100%;
  padding: 12px 14px;
  background: var(--color-light-gray);
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  font-size: 15px;
  color: var(--color-dark);
  transition: all var(--t-fast) var(--ease);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.form-control::placeholder { color: var(--color-muted); }
.form-control:focus {
  background: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(14,162,189,0.1);
}
.form-control.is-error {
  border-color: var(--color-error);
  background: var(--color-white);
}
.form-control.is-error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }
textarea.form-control { resize: vertical; min-height: 120px; }
select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23485664' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

.form-error-msg {
  display: none;
  font-size: 12px;
  color: var(--color-error);
  margin-top: 5px;
  font-weight: 500;
}
.form-error-msg.show { display: block; }

/* Success block */
.form-success {
  display: none;
  text-align: center;
  padding: 24px 20px;
  background: rgba(16,185,129,0.07);
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: var(--r-md);
  margin-top: 16px;
  animation: fadeIn 0.3s ease;
}
.form-success.show { display: block; }
.fs-icon {
  width: 48px; height: 48px;
  background: rgba(16,185,129,0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.fs-icon svg { width: 22px; height: 22px; color: var(--color-success); }
.form-success h4 { color: var(--color-success); font-size: 16px; margin-bottom: 4px; }
.form-success p { font-size: 14px; }

/* Error block (global form submission error) */
.form-error-global {
  display: none;
  text-align: center;
  padding: 24px 20px;
  background: rgba(239,68,68,0.07);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: var(--r-md);
  margin-top: 16px;
  animation: fadeIn 0.3s ease;
}
.form-error-global.show { display: block; }
.form-error-global h4 { color: var(--color-error); font-size: 16px; margin-bottom: 4px; }
.form-error-global p { font-size: 14px; }

/* Map */
.map-wrap {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  height: 320px;
}
.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ─── FOOTER ─────────────────────────────────────────────────── */
#footer {
  background: var(--color-dark);
  padding: 72px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-brand .logo { margin-bottom: 14px; }
.footer-brand p {
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  line-height: 1.75;
  max-width: 260px;
}
.footer-col h4 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.35);
  margin-bottom: 18px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  transition: color var(--t-fast);
}
.footer-links a:hover { color: var(--color-primary-light); }
.footer-contact-list { display: flex; flex-direction: column; gap: 10px; }
.footer-contact-list li {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.footer-contact-list li svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; color: var(--color-primary); }
.footer-contact-list a { color: inherit; transition: color var(--t-fast); }
.footer-contact-list a:hover { color: var(--color-primary-light); }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.social-link {
  width: 34px; height: 34px;
  background: rgba(255,255,255,0.07);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast);
}
.social-link:hover { background: var(--color-primary); }
.social-link svg { width: 15px; height: 15px; color: var(--color-white); }
.footer-bottom {
  padding: 22px 0;
  text-align: center;
}
.footer-bottom p { font-size: 13px; color: rgba(255,255,255,0.25); }
.footer-consent {
  max-width: 980px;
  margin: 24px auto 0 !important;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 11.5px !important;
  line-height: 1.7;
  color: rgba(255,255,255,0.32) !important;
  text-align: left;
}
.footer-consent a {
  color: rgba(255,255,255,0.55);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.25);
  text-underline-offset: 2px;
  transition: color var(--t-base);
}
.footer-consent a:hover {
  color: rgba(255,255,255,0.85);
}
@media (max-width: 768px) {
  .footer-consent {
    font-size: 11px !important;
    margin-top: 18px !important;
    padding-top: 18px;
  }
}

/* ─── PAGE HERO ──────────────────────────────────────────────── */
.page-hero {
  background: var(--color-dark);
  padding: 140px 0 56px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -100px; right: -60px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(14,162,189,0.12) 0%, transparent 70%);
}
.page-hero-inner { position: relative; z-index: 1; }
.page-hero h1 {
  color: var(--color-white);
  font-size: clamp(32px, 4.5vw, 52px);
  margin-bottom: 16px;
}
.page-hero p {
  color: rgba(255,255,255,0.6);
  font-size: 18px;
  max-width: 520px;
}

/* ─── VC FUNDS PAGE ──────────────────────────────────────────── */
.funds-section { background: var(--color-light-gray); }
.funds-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 16px;
}
.funds-grid--2col {
  grid-template-columns: repeat(2, 1fr);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  gap: 32px;
}
.fund-card {
  background: var(--color-white);
  border-radius: var(--r-xl);
  padding: 40px;
  box-shadow: var(--shadow-card);
  transition: all var(--t-base) var(--ease);
  display: flex;
  flex-direction: column;
  position: relative;
}
.fund-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.fund-card.upcoming {
  border: 2px dashed rgba(0,0,0,0.1);
  box-shadow: none;
  background: rgba(248,250,252,0.6);
}
.fund-card.upcoming:hover { transform: none; box-shadow: none; }
.fund-card-status {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  padding: 5px 10px;
  border-radius: 100px;
}
.fund-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
  50% { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.1); }
}

/* Completed mandate variant */
.fund-card-status--completed {
  color: #6366f1;
  background: rgba(99, 102, 241, 0.1);
}
.fund-card-status--completed .fund-status-dot {
  background: #6366f1;
  box-shadow: none;
  animation: none;
}
.fund-card--completed .fund-logo {
  background: rgba(99, 102, 241, 0.08);
  color: #6366f1;
}

/* Funds CTA below grid */
.funds-cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.fund-logo {
  width: 60px; height: 60px;
  background: rgba(14,162,189,0.08);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  color: var(--color-primary);
  margin-bottom: 24px;
  letter-spacing: -1px;
}
.fund-card h3 { font-size: 22px; margin-bottom: 8px; }
.fund-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 16px;
}
.fund-tag {
  padding: 4px 10px;
  background: rgba(14,162,189,0.07);
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
}
.fund-card p { font-size: 15px; line-height: 1.75; flex: 1; }
.fund-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  transition: gap var(--t-fast);
}
.fund-link:hover { gap: 10px; }
.fund-link svg { width: 14px; height: 14px; }

.upcoming-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--color-light-gray);
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-muted);
  margin-top: 20px;
}
.upcoming-note svg { width: 14px; height: 14px; }

/* GP Section */
.gp-section { background: var(--color-white); }
.gp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.gp-text h2 { margin-bottom: 16px; }
.gp-text p { font-size: 16px; margin-bottom: 16px; }
.gp-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.gp-stat {
  background: var(--color-light-gray);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  text-align: center;
}
.gp-stat-val {
  font-size: clamp(24px, 4vw, 30px);
  font-weight: 900;
  letter-spacing: -1.5px;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 6px;
}
.gp-stat-lbl { font-size: 12px; color: var(--color-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; }

/* Fund detail cards */
.fund-detail-card {
  background: var(--color-white);
  border-radius: var(--r-xl);
  padding: 40px;
  box-shadow: var(--shadow-card);
  border: 1.5px solid var(--color-border);
}
.fund-detail-card h3 { font-size: 20px; margin-bottom: 16px; }
.fund-detail-card p { font-size: 15px; color: var(--color-secondary); line-height: 1.8; margin-bottom: 10px; }
.fund-detail-card p:last-child { margin-bottom: 0; }

/* Governance grid */
.governance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.gov-card {
  background: var(--color-white);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
  border: 1.5px solid var(--color-border);
}
.gov-card .sc-icon { margin-bottom: 20px; }
.gov-card h3 { font-size: 18px; margin-bottom: 10px; }
.gov-card p { font-size: 15px; color: var(--color-secondary); line-height: 1.75; }

@media (max-width: 1080px) {
  .governance-grid { grid-template-columns: 1fr; }
}

/* Operational vs Trust management explainer */
.op-vs-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 40px;
}
.op-vs-trust-card {
  background: var(--color-white);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
  border: 1.5px solid var(--color-border);
  position: relative;
}
.op-vs-trust-card--trust { opacity: 0.92; }
.op-vs-trust-card--op {
  border-color: var(--color-primary);
  border-width: 2px;
  box-shadow: 0 8px 24px rgba(14, 162, 189, 0.12);
}
.op-vs-trust-head { margin-bottom: 20px; }
.op-vs-trust-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--color-light-gray);
  color: var(--color-muted);
  margin-bottom: 12px;
}
.op-vs-trust-tag--active {
  background: var(--color-primary);
  color: var(--color-white);
}
.op-vs-trust-card h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-primary-dark, var(--color-dark));
}
.op-vs-trust-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.op-vs-trust-list li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-secondary);
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}
.op-vs-trust-list li:last-child { border-bottom: none; padding-bottom: 0; }
.op-vs-trust-list li strong { color: var(--color-dark); font-weight: 600; }

.op-roles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}
.op-roles-card {
  background: var(--color-white);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  border: 1.5px solid var(--color-border);
}
.op-roles-card h4 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 18px;
  color: var(--color-dark);
}
.op-roles-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.op-roles-list li {
  position: relative;
  padding: 8px 0 8px 28px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-secondary);
}
.op-roles-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.18;
}
.op-roles-list li::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}
.op-roles-list--dont li::before { background: #6366f1; opacity: 0.18; }
.op-roles-list--dont li::after { background: #6366f1; }

.op-vs-trust-note {
  background: var(--color-white);
  border-left: 4px solid var(--color-primary);
  padding: 20px 28px;
  border-radius: var(--r-md);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-secondary);
}
.op-vs-trust-note strong { color: var(--color-dark); }

@media (max-width: 900px) {
  .op-vs-trust-grid,
  .op-roles-grid { grid-template-columns: 1fr; gap: 20px; }
  .op-vs-trust-card,
  .op-roles-card { padding: 24px; }
  .op-vs-trust-card h3 { font-size: 19px; }
}

/* Track record section (UC Ventures historical) */
.tr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.tr-main {
  background: var(--color-white);
  border-radius: var(--r-lg);
  padding: 36px 40px;
  box-shadow: var(--shadow-card);
  border: 1.5px solid var(--color-border);
}
.tr-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.tr-tag-status {
  background: rgba(99, 102, 241, 0.1) !important;
  color: #4f46e5 !important;
  font-weight: 600;
}
.tr-main h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 16px;
  color: var(--color-dark);
}
.tr-main p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-secondary);
  margin-bottom: 14px;
}
.tr-meta {
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--color-light-gray);
  border-radius: var(--r-md);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-secondary);
  border-left: 3px solid var(--color-primary);
}
.tr-meta strong { color: var(--color-dark); }

.tr-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.tr-stat-card {
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 120px;
}
.tr-stat-val {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-dark);
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}
.tr-stat-lbl {
  font-size: 12px;
  color: var(--color-muted);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.tr-stat-card--accent {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.tr-stat-card--accent .tr-stat-val,
.tr-stat-card--accent .tr-stat-lbl {
  color: var(--color-white);
}
.tr-stat-card--accent .tr-stat-lbl { opacity: 0.9; }

@media (max-width: 900px) {
  .tr-grid { grid-template-columns: 1fr; gap: 20px; }
  .tr-main { padding: 28px 24px; }
  .tr-stats { grid-template-columns: 1fr 1fr; }
  .tr-main h3 { font-size: 19px; }
  .tr-stat-val { font-size: 24px; }
}

@media (max-width: 560px) {
  .funds-grid--2col { grid-template-columns: 1fr; gap: 20px; }
}

/* ─── APPLY PAGE ─────────────────────────────────────────────── */
.apply-section { background: var(--color-light-gray); min-height: 60vh; }
.apply-tabs-nav {
  display: flex;
  gap: 4px;
  background: var(--color-white);
  border-radius: var(--r-md);
  padding: 4px;
  width: fit-content;
  margin: 0 auto 32px;
  box-shadow: var(--shadow-card);
}
.apply-tab-btn {
  padding: 12px 32px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-secondary);
  border-radius: var(--r-sm);
  transition: all var(--t-fast) var(--ease);
  cursor: pointer;
}
.apply-tab-btn.active {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 4px 14px rgba(14,162,189,0.28);
}
.apply-tab-panel { display: none; }
.apply-tab-panel.active { display: block; animation: fadeIn 0.25s ease; }
.apply-form-card {
  background: var(--color-white);
  border-radius: var(--r-xl);
  padding: 48px;
  box-shadow: var(--shadow-card);
  max-width: 680px;
  margin: 0 auto;
}
.apply-form-card h2 { font-size: 24px; margin-bottom: 8px; }
.apply-form-card .subtitle { color: var(--color-secondary); margin-bottom: 36px; font-size: 16px; }
.form-row-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* ─── SCROLL TO TOP ──────────────────────────────────────────── */
.scroll-top {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 42px; height: 42px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(14,162,189,0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: all var(--t-base) var(--ease);
  z-index: 999;
  cursor: pointer;
}
.scroll-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { background: var(--color-primary-dark); transform: translateY(-2px); }
.scroll-top svg { width: 18px; height: 18px; }

/* ─── ANIMATIONS ─────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* Hero initial animation */
.hero-content > * {
  opacity: 0;
  transform: translateY(20px);
  animation: heroReveal 0.8s var(--ease) forwards;
}
.hero-badge   { animation-delay: 0.1s; }
.hero-content h1 { animation-delay: 0.25s; }
.hero-subtitle { animation-delay: 0.4s; }
.hero-ctas { animation-delay: 0.55s; }
@keyframes heroReveal {
  to { opacity: 1; transform: none; }
}

/* ─── MAIN RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 1080px) {
  :root { --section-py: 80px; }
  .nav, .header-actions .btn-primary { display: none; }
  .header-actions .lang-switcher { display: none; }
  .burger { display: flex; }

  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .stat-item + .stat-item::before { display: none; }
  .stat-item:nth-child(2)::before { display: block; }

  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .partners-grid { grid-template-columns: 1fr; gap: 40px; }
  .cta-inner { grid-template-columns: 1fr; gap: 32px; }
  .cta-inner--expanded { grid-template-columns: 1fr; gap: 40px; }
  .cta-actions { align-items: flex-start; }
  .gp-grid { grid-template-columns: 1fr; gap: 40px; }
  .directions-grid { grid-template-columns: repeat(2, 1fr); }
  .uni-grid { grid-template-columns: 1fr; gap: 32px; }
  .fw-overview { grid-template-columns: 1fr; }
  .fw-tracks { grid-template-columns: 1fr; }
  .fw-eco-grid { grid-template-columns: repeat(2, 1fr); }
  .funds-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --section-py: 64px; --container-pad: 20px; }

  .cards-3 { grid-template-columns: 1fr; }
  .directions-grid { grid-template-columns: 1fr; }
  .funds-grid { grid-template-columns: 1fr; }
  .fw-hyp-card { grid-template-columns: 48px 1fr; }
  .fw-hyp-pct { grid-column: 1 / -1; text-align: left; }
  .fw-eco-grid { grid-template-columns: 1fr; }
  .cta-stats-col { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }

  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { justify-content: center; }

  .stats-inner { grid-template-columns: repeat(2, 1fr); }

  .apply-form-card { padding: 32px 24px; }
  .form-row-2 { grid-template-columns: 1fr; }
  .contact-form-card { padding: 28px 20px; }
  .apply-tabs-nav { flex-direction: column; width: 100%; }
  .apply-tab-btn { text-align: center; }

  .sectors-grid { grid-template-columns: 1fr; }
  .gp-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .stats-inner { grid-template-columns: 1fr; }
  .stat-item + .stat-item::before { display: none; }
  .stat-item { border-top: 1px solid var(--color-border); }
  .stat-item:first-child { border-top: none; }
  .tabs-nav { flex-direction: column; }
}

/* ─── CUSTOM CURSOR (Photon — single dot, gentle breathing halo) ─── */
.photon-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  /* Two-tier glow: tight inner halo + soft outer bloom */
  box-shadow:
    0 0 0 1.5px rgba(14,162,189,0.18),
    0 0 14px 2px rgba(14,162,189,0.32);
  transition:
    width 0.25s var(--ease),
    height 0.25s var(--ease),
    background 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
  animation: photon-cursor-breathe 3.2s ease-in-out infinite;
  will-change: left, top, transform;
}
@keyframes photon-cursor-breathe {
  0%, 100% {
    box-shadow:
      0 0 0 1.5px rgba(14,162,189,0.16),
      0 0 12px 2px rgba(14,162,189,0.28);
  }
  50% {
    box-shadow:
      0 0 0 2.5px rgba(14,162,189,0.22),
      0 0 18px 3px rgba(14,162,189,0.42);
  }
}
/* On hover over interactive elements: dot grows slightly + halo blooms in indigo */
body:has(a:hover) .photon-cursor,
body:has(button:hover) .photon-cursor,
body:has(input:hover) .photon-cursor,
body:has(textarea:hover) .photon-cursor,
body:has(select:hover) .photon-cursor,
body:has(label:hover) .photon-cursor,
body:has([role="button"]:hover) .photon-cursor {
  width: 9px;
  height: 9px;
  background: var(--color-accent);
  box-shadow:
    0 0 0 3px rgba(99,102,241,0.18),
    0 0 22px 4px rgba(99,102,241,0.45);
  animation: none;
}
/* Click pulse — subtle, fast */
.photon-cursor.is-down {
  width: 4px;
  height: 4px;
  box-shadow:
    0 0 0 2px rgba(14,162,189,0.32),
    0 0 22px 5px rgba(14,162,189,0.5);
  transition:
    width 0.08s var(--ease),
    height 0.08s var(--ease),
    box-shadow 0.08s var(--ease);
}
.photon-cursor.is-hidden {
  opacity: 0;
}
@media (hover: none), (pointer: coarse) {
  .photon-cursor { display: none; }
}
@media (max-width: 1080px) {
  .photon-cursor { display: none; }
}

/* ─── DESIGN POLISH ──────────────────────────────────────────── */

/* Selection color */
::selection { background: rgba(14,162,189,0.18); color: var(--color-dark); }

/* Better focus styles for accessibility */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Smooth image loading */
img { transition: opacity 0.3s ease; }

/* Hero subtitle max-width on larger screens */
@media (min-width: 1024px) {
  .hero-subtitle { font-size: 20px; }
}

/* Slightly larger logo on bigger screens */
@media (min-width: 768px) {
  .logo-img { height: 25px; }
}

/* Better CTA section on tablet */
@media (max-width: 900px) {
  .cta-inner { grid-template-columns: 1fr; }
  .cta-actions { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
}

/* Partners card improvements */
.partners-card {
  border: 1.5px solid var(--color-border);
}

/* Fund card: minimum height for consistent layout */
.fund-card {
  min-height: 280px;
}

/* Direction cards: equal height via flex */
.directions-grid { align-items: stretch; }

/* Better contact section on mobile */
@media (max-width: 768px) {
  .contact-detail { gap: 12px; }
  .cd-icon { width: 36px; height: 36px; flex-shrink: 0; }
  .scroll-top { bottom: 20px; right: 20px; }
}

/* Smooth scroll anchor offset for fixed header */
[id] { scroll-margin-top: calc(var(--header-h) + 20px); }

/* Footer brand description line height */
.footer-brand p { line-height: 1.8; }

/* Better button for mobile (no-hover devices) */
@media (hover: none) {
  .btn-primary:hover, .btn-outline:hover, .btn-white:hover {
    transform: none;
    box-shadow: none;
  }
}

/* Page hero badge spacing */
.page-hero .hero-badge { margin-bottom: 24px; }

/* Stat number subtle animation on reveal */
.stat-item.visible .stat-number {
  animation: statPop 0.4s var(--ease) both;
}
@keyframes statPop {
  0% { transform: scale(0.9); opacity: 0; }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); opacity: 1; }
}

/* Why-now page: ensure content doesn't overflow on mobile */
@media (max-width: 768px) {
  .wn-container { padding: 0 12px; overflow-x: hidden; }
}

/* Improved mobile nav list item active state */
.mobile-nav-list li a.active {
  color: var(--color-primary);
  background: rgba(14,162,189,0.07);
  font-weight: 600;
}

/* Better hero grid pattern visibility */
.hero-bg::after { opacity: 0.35; }

/* Form textarea minimum height */
textarea.form-control { min-height: 110px; }

/* Utility: visually hidden (for accessibility) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* ─── HEADER: force solid bg on dark-hero pages ──────────────── */
#header.page-hero-active {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-header);
}

/* ─── UTILITY CLASSES ────────────────────────────────────────── */

/* Block-level button (full-width, centered) */
.btn-block {
  width: 100%;
  justify-content: center;
}

/* Submit button with top spacing */
.btn-submit {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}

/* Outline button for dark/image backgrounds */
.btn-outline-light {
  background: transparent;
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.35);
}
.btn-outline-light:hover {
  background: rgba(255,255,255,0.12);
  color: var(--color-white);
  border-color: rgba(255,255,255,0.6);
  transform: translateY(-2px);
}

/* Text color utilities */
.text-muted { color: var(--color-muted); }
.text-secondary { color: var(--color-secondary); }

/* Margin utilities */
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: 8px; }
.mt-sm { margin-top: 14px; }
.mt-md { margin-top: 24px; }
.mb-sm { margin-bottom: 14px; }
.mb-md { margin-bottom: 24px; }

/* ─── FUND CARD: upcoming state ──────────────────────────────── */
.fund-card.upcoming .fund-logo { color: var(--color-muted); background: var(--color-light-gray); }
.fund-card.upcoming h3        { color: var(--color-muted); }
.fund-card.upcoming .fund-tag { background: rgba(0,0,0,0.04); color: var(--color-muted); }
.fund-card.upcoming p         { color: var(--color-muted); }

/* ─── SERVICE CARDS: centered variant ───────────────────────── */
.service-card--centered { text-align: center; }
.service-card--centered .sc-icon { margin: 0 auto 24px; }

/* ─── STAT NUMBER: smaller text variant ─────────────────────── */
.stat-number--text {
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: -1px;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── SECTION VARIANTS ───────────────────────────────────────── */
.section-white {
  background: var(--color-white);
  padding: var(--section-py) 0;
}

/* ─── TAB PANEL CONTENT SPACING ─────────────────────────────── */
.tab-panel p { margin-bottom: 14px; }
.tab-panel p:last-child { margin-bottom: 0; }
.tab-panel .check-list { margin-top: 16px; }

/* ─── HERO CONTENT: fix child opacity on non-hero pages ─────── */
.page-why-now .hero-content > * {
  opacity: 1;
  transform: none;
  animation: none;
}

/* ─── CONSISTENT CARD HOVER STATES ──────────────────────────── */
.dir-card:hover,
.fund-card:hover,
.service-card:hover {
  cursor: default;
}

/* ─── FUND INFO CARD ─────────────────────────────────────────── */
.fund-info-card {
  background: var(--color-white);
  border-radius: var(--r-xl);
  padding: 40px;
  margin-top: 16px;
  box-shadow: var(--shadow-card);
}
.fund-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: start;
}
.fi-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-muted);
  margin-bottom: 8px;
}
.fi-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-dark);
}
@media (max-width: 768px) {
  .fund-info-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ─── CTA DARK SECTION ───────────────────────────────────────── */
.cta-dark {
  background: var(--color-dark);
  position: relative;
  overflow: hidden;
  padding: var(--section-py) 0;
}
.cta-dark-orb {
  position: absolute;
  top: -120px; right: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(14,162,189,0.13) 0%, transparent 70%);
  pointer-events: none;
}
.cta-dark-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.cta-dark-inner h2 {
  color: var(--color-white);
  margin-bottom: 16px;
}
.cta-dark-inner p {
  color: rgba(255,255,255,0.6);
  font-size: 17px;
  margin-bottom: 36px;
}
.cta-dark-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ─── BUTTON ROW ─────────────────────────────────────────────── */
.btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* ─── GP TEXT: tighter check-list spacing ────────────────────── */
.gp-text .check-list { margin-top: 8px; }


/* ═══════════════════════════════════════════════════════════════
   PART 3 - WHY-NOW PAGE STYLES
   All selectors scoped under .page-why-now
   ═══════════════════════════════════════════════════════════════ */

/* ─── WHY-NOW ANIMATIONS (unique to this page) ───────────────── */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes soft-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.02);
    opacity: 0.95;
  }
}

@keyframes fade-in-up {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes fade-hold-pause-out {
  10%   { opacity: 0; }
  30%  { opacity: 1; }
  50%  { opacity: 1; }
  80%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes orbit-sway {
  0%   { transform: rotate(-4deg); }
  50%  { transform: rotate(4deg); }
  100% { transform: rotate(-4deg); }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes counter-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes rotate-reverse {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.5);
    transform: scale(1.05);
  }
}

@keyframes slow-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse-scale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes float-rotate {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

@keyframes orbit-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ─── WHY-NOW HERO ───────────────────────────────────────────── */
.page-why-now .hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 20px;
  padding-top: calc(72px + 40px);
  background: linear-gradient(135deg, rgba(14, 162, 189, 0.03) 0%, transparent 50%);
}

.page-why-now .hero-section .hero-content {
  max-width: 1200px;
  width: 100%;
  text-align: center;
  animation: fade-in-up 1s ease-out;
  padding: 0 var(--container-pad);
  margin: 0 auto;
}

.page-why-now .hero-section .hero-badge {
  display: inline-block;
  background: linear-gradient(135deg, #0ea2bd, #0ea2bd7a);
  color: var(--color-white);
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 0.9rem;
  margin-bottom: 20px;
  font-weight: 600;
}

.page-why-now .hero-title {
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 900;
  color: var(--color-dark);
  margin-bottom: 50px;
  letter-spacing: -2px;
  line-height: 1.1;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.page-why-now .hero-title span {
  background: linear-gradient(135deg, #0ea2bd, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-why-now .hero-subtitle {
  font-size: clamp(16px, 2vw, 20px);
  color: var(--color-muted);
  margin-bottom: 40px;
  font-weight: 500;
  margin-left: auto;
  margin-right: auto;
  max-width: 700px;
}

.page-why-now .wn-section-title span {
  background: linear-gradient(135deg, #0ea2bd, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-why-now .cta-button {
  display: inline-block;
  background: linear-gradient(135deg, #0ea2bd, #0099b8);
  color: var(--color-white);
  padding: 18px 40px;
  border-radius: var(--r-md);
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(14, 162, 189, 0.3);
  animation: soft-pulse 3s ease-in-out infinite;
}

.page-why-now .cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(14, 162, 189, 0.4);
}

.page-why-now .scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  animation: float 3s ease-in-out infinite;
  color: var(--color-muted);
  font-size: 2rem;
}

/* ─── WHY-NOW SECTIONS ───────────────────────────────────────── */
.page-why-now .wn-section {
  padding: var(--section-py) var(--container-pad);
  max-width: var(--container-max);
  margin: 0 auto;
}

.page-why-now .wn-section-title {
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 800;
  text-align: center;
  margin-bottom: 20px;
  color: var(--color-dark);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: -1px;
}

.page-why-now .wn-section-subtitle {
  font-size: 18px;
  color: var(--color-muted);
  text-align: center;
  margin-bottom: 50px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* ─── WHY-NOW PROBLEM CARDS ──────────────────────────────────── */
.page-why-now .problems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 60px;
}

.page-why-now .problem-card {
  background: var(--color-white);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  animation: fade-in-up 0.8s ease-out backwards;
}

.page-why-now .problem-card:nth-child(1) { animation-delay: 0.1s; }
.page-why-now .problem-card:nth-child(2) { animation-delay: 0.2s; }
.page-why-now .problem-card:nth-child(3) { animation-delay: 0.3s; }

.page-why-now .problem-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

.page-why-now .problem-icon {
  font-size: 3rem;
  margin-bottom: 20px;
}

.page-why-now .problem-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--color-dark);
}

.page-why-now .problem-text {
  color: var(--color-muted);
  line-height: 1.6;
  max-width: 65ch;
}

/* ─── WHY-NOW CHART ──────────────────────────────────────────── */
.page-why-now .chart-container {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--r-xl);
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  margin-bottom: 60px;
  position: relative;
  overflow: hidden;
}

.page-why-now .chart-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0ea2bd, #6366f1, #0ea2bd);
  animation: gradient-shift 3s ease infinite;
}

.page-why-now .chart-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 30px;
  color: var(--color-dark);
}

.page-why-now .chart {
  position: relative;
  height: 400px;
  background: linear-gradient(180deg, rgba(14, 162, 189, 0.05) 0%, transparent 100%);
  border-radius: var(--r-lg);
  padding: 20px;
}

.page-why-now .chart-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(0deg, rgba(226, 232, 240, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226, 232, 240, 0.3) 1px, transparent 1px);
  background-size: 50px 50px;
}

.page-why-now .chart-line {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  height: 3px;
  background: linear-gradient(90deg, #0ea2bd, #6366f1);
  transform-origin: left center;
  transform: rotate(-20deg);
  box-shadow: 0 4px 12px rgba(14, 162, 189, 0.3);
}

.page-why-now .chart-point {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--color-white);
  border: 3px solid var(--color-primary);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(14, 162, 189, 0.4);
  animation: soft-pulse 2s ease-in-out infinite;
}

.page-why-now .chart-point:nth-child(2) { bottom: 80px; left: 100px; }
.page-why-now .chart-point:nth-child(3) { bottom: 150px; left: 250px; }
.page-why-now .chart-point:nth-child(4) { bottom: 220px; left: 400px; }
.page-why-now .chart-point:nth-child(5) { bottom: 300px; left: 550px; }

.page-why-now .chart-label {
  position: absolute;
  font-size: 0.85rem;
  color: var(--color-muted);
  font-weight: 600;
  white-space: nowrap;
}

.page-why-now .axis-label {
  position: absolute;
  font-weight: 700;
  color: var(--color-dark);
}

.page-why-now .y-axis-label {
  left: -10px;
  top: 50%;
  transform: rotate(-90deg) translateX(-50%);
  transform-origin: center;
}

.page-why-now .x-axis-label {
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}

/* ─── WHY-NOW SOLUTIONS ──────────────────────────────────────── */
.page-why-now .solutions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-bottom: 60px;
}

.page-why-now .solution-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 255, 0.95));
  backdrop-filter: blur(10px);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: var(--r-lg);
  padding: 30px;
  text-align: center;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  animation: fade-in-up 0.8s ease-out backwards;
}

.page-why-now .solution-card:nth-child(1) { animation-delay: 0.1s; }
.page-why-now .solution-card:nth-child(2) { animation-delay: 0.2s; }
.page-why-now .solution-card:nth-child(3) { animation-delay: 0.3s; }

.page-why-now .solution-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0ea2bd, #6366f1);
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.page-why-now .solution-card:hover::before {
  transform: scaleX(1);
}

.page-why-now .solution-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 60px rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.2);
}

.page-why-now .solution-icon {
  font-size: 3rem;
  margin-bottom: 20px;
  display: inline-block;
  animation: float 3s ease-in-out infinite;
}

.page-why-now .solution-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--color-dark);
}

.page-why-now .solution-text {
  color: var(--color-muted);
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 65ch;
}

.page-why-now .solution-badge {
  display: inline-block;
  background: linear-gradient(135deg, rgba(14, 162, 189, 0.1), rgba(99, 102, 241, 0.1));
  color: var(--color-primary);
  padding: 6px 16px;
  border-radius: var(--r-md);
  font-size: 0.85rem;
  font-weight: 600;
}

/* ─── WHY-NOW PROCESS ────────────────────────────────────────── */
.page-why-now .process-timeline {
  position: relative;
  padding: 40px 0;
}

.page-why-now .process-line {
  position: absolute;
  top: 30px;
  left: 10%;
  right: 10%;
  height: 3px;
  background: var(--gradient-accent);
  transform: translateY(-50%);
  z-index: 1;
}

.page-why-now .process-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.page-why-now .process-step {
  flex: 1;
  text-align: center;
  animation: fade-in-up 0.8s ease-out backwards;
}

.page-why-now .process-step:nth-child(1) { animation-delay: 0.1s; }
.page-why-now .process-step:nth-child(2) { animation-delay: 0.2s; }
.page-why-now .process-step:nth-child(3) { animation-delay: 0.3s; }
.page-why-now .process-step:nth-child(4) { animation-delay: 0.4s; }

.page-why-now .process-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: var(--color-white);
  border: 3px solid var(--color-primary);
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(14, 162, 189, 0.2);
  transition: all 0.3s ease;
}

.page-why-now .process-step:hover .process-number {
  transform: scale(1.1);
  background: linear-gradient(135deg, #0ea2bd, #6366f1);
  color: var(--color-white);
  border-color: transparent;
}

.page-why-now .process-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--color-dark);
}

.page-why-now .process-text {
  font-size: 0.9rem;
  color: var(--color-muted);
  max-width: 200px;
  margin: 0 auto;
}

/* ─── WHY-NOW STATS ──────────────────────────────────────────── */
.page-why-now .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin: 60px 0;
}

.page-why-now .stat-card {
  text-align: center;
  padding: 30px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--r-lg);
  transition: all 0.3s ease;
  animation: fade-in-up 0.8s ease-out backwards;
}

.page-why-now .stat-card:nth-child(1) { animation-delay: 0.1s; }
.page-why-now .stat-card:nth-child(2) { animation-delay: 0.2s; }
.page-why-now .stat-card:nth-child(3) { animation-delay: 0.3s; }
.page-why-now .stat-card:nth-child(4) { animation-delay: 0.4s; }

.page-why-now .stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.page-why-now .stat-number {
  font-size: 3rem;
  font-weight: 900;
  background: linear-gradient(135deg, #0ea2bd, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
}

.page-why-now .stat-label {
  font-size: 0.85rem;
  color: var(--color-muted);
  font-weight: 600;
}

/* ─── WHY-NOW CTA SECTION ────────────────────────────────────── */
.page-why-now .cta-section {
  background: linear-gradient(135deg, rgba(14, 162, 189, 0.05), rgba(99, 102, 241, 0.05));
  border-radius: var(--r-xl);
  padding: 60px 40px;
  text-align: center;
  margin: 80px 0;
  position: relative;
  overflow: hidden;
}

.page-why-now .cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(14, 162, 189, 0.1) 0%, transparent 70%);
  animation: float 10s ease-in-out infinite;
}

.page-why-now .cta-title {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  margin-bottom: 20px;
  color: var(--color-dark);
  position: relative;
  z-index: 1;
}

.page-why-now .cta-text {
  font-size: 18px;
  color: var(--color-muted);
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}

.page-why-now .cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.page-why-now .cta-button-secondary {
  display: inline-block;
  background: var(--color-white);
  color: var(--color-primary);
  padding: 18px 40px;
  border-radius: var(--r-md);
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 2px solid var(--color-primary);
}

.page-why-now .cta-button-secondary:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(14, 162, 189, 0.3);
}

/* ─── WHY-NOW QUADRANT CHART ─────────────────────────────────── */
.page-why-now .quadrant-chart {
  position: relative;
  height: 500px;
  width: 100%;
  padding: 40px;
  overflow: hidden;
}

.page-why-now .quadrant-chart::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(
      circle at 100% 0%,
      rgb(239 68 68 / 75%) 0%,
      rgb(248 113 113 / 20%) 40%,
      rgb(255 255 255 / 0%) 55%,
      rgba(134, 239, 172, 0.3) 100%);
  z-index: 0;
  opacity: 0;
}

.page-why-now .quadrant-chart.animate-gradient::before {
  animation: fade-hold-pause-out 15s ease-in-out infinite;
}

/* Axes */
.page-why-now .quadrant-axis-x {
  position: absolute;
  top: 50%;
  left: 5%;
  right: 5%;
  height: 2px;
  background-color: #e2e8f0;
  transform: translateY(-50%);
  z-index: 1;
}

.page-why-now .quadrant-axis-y {
  position: absolute;
  left: 50%;
  top: 5%;
  bottom: 5%;
  width: 2px;
  background-color: #e2e8f0;
  transform: translateX(-50%);
  z-index: 1;
}

/* Axis labels */
.page-why-now .quadrant-label {
  position: absolute;
  color: var(--color-muted);
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 2;
}
.page-why-now .quadrant-label-x-start { left: 5%; top: 52%; }
.page-why-now .quadrant-label-x-mid { left: 50%; top: 52%; transform: translateX(-50%); }
.page-why-now .quadrant-label-x-end { right: 5%; top: 52%; }

.page-why-now .quadrant-label-y-start { left: 39%; bottom: 5%; }
.page-why-now .quadrant-label-y-mid { left: 51%; top: 50%; transform: translateY(-50%); }
.page-why-now .quadrant-label-y-end { left: 51%; top: 5%; }

/* Vertical stack */
.page-why-now .quadrant-y-stack {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  width: 200px;
  z-index: 10;
}

.page-why-now .stack-item {
  font-size: 0.8rem;
  color: var(--color-dark);
  background: rgba(255, 255, 255, 0.9);
  padding: 4px 8px;
  border: 1px solid #e2e8f0;
  border-radius: var(--r-xs);
  margin: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.page-why-now .stack-arrow {
  font-size: 1.5rem;
  color: #b0c2dd;
  line-height: 0.5;
  margin: 6px 0;
}

.page-why-now .quadrant-growth-path {
  position: absolute;
  width: 60%;
  height: 3px;
  background: linear-gradient(90deg, #86efac, #0ea2bd);
  z-index: 15;
  bottom: 26%;
  left: 37%;
  transform: rotate(30deg);
  transform-origin: left bottom;
}
.page-why-now .quadrant-growth-path::after {
  content: '';
  position: absolute;
  right: -4px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-top: 3px solid #0ea2bd;
  border-right: 3px solid #0ea2bd;
  transform: rotate(45deg);
}

.page-why-now .quadrant-point {
  position: absolute;
  border-radius: 50%;
  background-image: radial-gradient(circle at 30% 30%, #a7f3d0, #16a34a);
  border: 2px solid #166534;
  z-index: 20;
  box-shadow: 0 4px 15px rgba(22, 163, 74, 0.4);
}

.page-why-now .point-1 { width: 18px; height: 18px; bottom: 9.7%; left: 20%; background-image: radial-gradient(circle at 30% 30%, #ffcdcd, #73af89); z-index: 1;}
.page-why-now .point-2 { width: 28px; height: 28px; bottom: 17%; left: 35%; background-image: radial-gradient(circle at 30% 30%, #ede2e2, #73af89); z-index: 1;}
.page-why-now .point-3 { width: 45px; height: 45px; bottom: 28.5%; left: 50%; background-image: radial-gradient(circle at 30% 30%, #fdfdfd, #73af89); z-index: 1;}
.page-why-now .point-4 { width: 60px; height: 60px; bottom: 42%; left: 63%; background-image: radial-gradient(circle at 30% 30%, #d9fdec, #73af89); z-index: 1;}
.page-why-now .point-5 { width: 85px; height: 85px; bottom: 61%; left: 76%; z-index: 1;}

.page-why-now .quadrant-data-label {
  position: absolute;
  color: var(--color-dark);
  font-weight: 500;
  font-size: 0.75rem;
  z-index: 21;
  transform: rotate(330deg);
  text-shadow: 0 1px 3px rgba(255,255,255,0.7);
}
.page-why-now .label-1 {bottom: 22%;left: 20%; transform: rotate(345deg);}
.page-why-now .label-2 { bottom: 67%; left: 59%; transform: rotate(325deg);}

.page-why-now .quadrant-main-label-x {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
  color: var(--color-dark);
}
.page-why-now .quadrant-main-label-y {
  position: absolute;
  top: 50%;
  left: -80px;
  transform: translateY(-50%) rotate(-90deg);
  white-space: nowrap;
  font-weight: 700;
  color: var(--color-dark);
}

.page-why-now .chart-legend-top {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 10px;
}
.page-why-now .legend-label-start,
.page-why-now .legend-label-end {
  color: var(--color-muted);
  font-size: 0.9rem;
  font-weight: 600;
  flex-basis: 100px;
}
.page-why-now .legend-label-start { text-align: left; }
.page-why-now .legend-label-end { text-align: right; }

.page-why-now .legend-label-center-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
}
.page-why-now .legend-label-center-box {
  background-color: rgba(220, 242, 228, 0.8);
  color: #166534;
  padding: 4px 12px;
  border-radius: var(--r-sm);
  font-weight: 700;
  border: 1px solid rgba(22, 163, 74, 0.3);
  z-index: 2;
  position: relative;
}

.page-why-now .legend-gradient-arrow {
  width: 100%;
  height: 3px;
  background-image: linear-gradient(
    to right,
    rgba(134, 239, 172, 0.9) 0%,
    rgba(255, 255, 255, 0.0) 50%,
    rgba(239, 68, 68, 0.9) 100%
  );
  position: relative;
  margin-top: -15px;
  z-index: 1;
}
.page-why-now .legend-gradient-arrow::before,
.page-why-now .legend-gradient-arrow::after {
  content: '';
  position: absolute;
  top: -3.5px;
  width: 10px;
  height: 10px;
  border-top: 3px solid;
  border-right: 3px solid;
}
.page-why-now .legend-gradient-arrow::before {
  left: -1px;
  border-color: rgba(134, 239, 172, 0.9);
  transform: rotate(-135deg);
}
.page-why-now .legend-gradient-arrow::after {
  right: -1px;
  border-color: rgba(239, 68, 68, 0.9);
  transform: rotate(45deg);
}

/* ─── WHY-NOW BANK COMPARISON SECTION ────────────────────────── */
.page-why-now .wn-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding: 0 10px;
}

.page-why-now .header {
  text-align: center;
  margin-bottom: 60px;
  padding: 10px 0;
  animation: fade-in-up 0.8s ease-out;
}

.page-why-now .bank-title {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid rgba(255, 255, 255, 0.8);
  color: var(--color-dark);
  padding: 20px 40px;
  border-radius: var(--r-lg);
  display: inline-block;
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -1px;
  box-shadow:
    0 20px 60px rgba(99, 102, 241, 0.15),
    0 10px 30px rgba(0, 0, 0, 0.08);
  position: relative;
  transition: all 0.4s var(--ease);
  overflow: hidden;
}

.page-why-now .bank-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent);
  transform: translateX(-100%);
  transition: transform 0.6s;
}

.page-why-now .bank-title:hover {
  transform: translateY(-5px);
  box-shadow:
    0 30px 80px rgba(99, 102, 241, 0.25),
    0 15px 40px rgba(0, 0, 0, 0.1);
}

.page-why-now .bank-title:hover::before {
  transform: translateX(200%);
}

.page-why-now .wn-subtitle {
  margin-top: 20px;
  font-size: 18px;
  color: var(--color-muted);
  font-weight: 600;
}

/* Platform cards */
.page-why-now .platforms-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  margin-bottom: 30px;
  padding: 0 5px;
}

.page-why-now .platform-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.06),
    0 2px 10px rgba(0, 0, 0, 0.04);
  position: relative;
  transition: all 0.4s var(--ease);
  overflow: hidden;
  animation: fade-in-up 0.8s ease-out backwards;
}

.page-why-now .platform-card:nth-child(1) { animation-delay: 0.1s; }
.page-why-now .platform-card:nth-child(2) { animation-delay: 0.2s; }
.page-why-now .platform-card:nth-child(3) { animation-delay: 0.3s; }

.page-why-now .platform-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(89deg, #0ea2bd, #0ea2bd7a, #ffffff);
  transform: scaleX(0);
  transition: transform 0.4s ease;
  transform-origin: left;
}

.page-why-now .platform-card:hover {
  transform: translateY(-10px);
  box-shadow:
    0 20px 60px rgba(99, 102, 241, 0.12),
    0 10px 30px rgba(0, 0, 0, 0.08);
}

.page-why-now .platform-card:hover::before {
  transform: scaleX(1);
}

/* Venture fund card */
.page-why-now .venture-fund-card {
  border: 2px solid transparent;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #fbbf24, #f59e0b, #fbbf24) border-box;
  position: relative;
}

.page-why-now .venture-fund-card::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 35px;
  opacity: 0.2;
  z-index: -1;
  animation: soft-pulse 3s ease-in-out infinite;
  filter: blur(20px);
}

.page-why-now .venture-fund-card::before {
  background: linear-gradient(90deg, #fbbf24, #f59e0b, #fbbf24);
  height: 6px;
  transform: scaleX(1);
}

/* Platform headers */
.page-why-now .platform-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  position: relative;
}

.page-why-now .platform-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}

.page-why-now .platform-subtitle {
  font-size: 0.9rem;
  color: var(--color-muted);
  font-weight: 500;
}

/* Feature items */
.page-why-now .features-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}

.page-why-now .feature-item {
  background: #f7f7f7b3;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: var(--r-md);
  padding: 12px 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.page-why-now .feature-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(99, 102, 241, 0.08),
    transparent);
  transition: left 0.6s ease;
}

.page-why-now .feature-item:hover {
  transform: translateX(8px);
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(99, 102, 241, 0.2);
  box-shadow: 0 5px 20px rgba(99, 102, 241, 0.1);
}

.page-why-now .feature-item:hover::before {
  left: 100%;
}

/* Icons */
.page-why-now .icon-placeholder {
  width: 35px;
  height: 35px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: grey;
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.page-why-now .feature-item:hover .icon-placeholder {
  transform: rotate(10deg) scale(1.1);
}

.page-why-now .feature-content {
  flex: 1;
}

.page-why-now .feature-content h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 2px;
}

.page-why-now .feature-content p {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.4;
}

/* Venture description */
.page-why-now .venture-description {
  background: linear-gradient(135deg,
    rgba(251, 191, 36, 0.08),
    rgba(245, 158, 11, 0.08));
  border: 2px solid rgba(245, 158, 11, 0.2);
  border-radius: var(--r-md);
  padding: 15px;
  margin: 15px 0;
  text-align: center;
  color: #92400e;
  font-size: 0.9rem;
  line-height: 1.6;
  font-weight: 600;
  transition: all 0.3s ease;
}

.page-why-now .venture-description:hover {
  background: linear-gradient(135deg,
    rgba(251, 191, 36, 0.12),
    rgba(245, 158, 11, 0.12));
  border-color: rgba(245, 158, 11, 0.3);
  transform: scale(1.02);
}

/* Brand cards */
.page-why-now .brand-card {
  text-align: center;
  transition: transform 0.4s ease;
  padding: 10px;
  animation: fade-in-up 0.8s ease-out 0.5s backwards;
  margin-top: 0;
}

.page-why-now .brand-card:hover {
  transform: translateY(-10px);
}

.page-why-now .brand-logo {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.8);
  color: var(--color-dark);
  padding: 20px 30px;
  border-radius: var(--r-lg);
  font-size: 2rem;
  font-weight: 300;
  margin-bottom: 15px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.page-why-now .brand-logo::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent);
  transition: left 0.6s;
}

.page-why-now .brand-logo:hover {
  transform: scale(1.05) rotate(-2deg);
  box-shadow: 0 15px 50px rgba(99, 102, 241, 0.15);
}

.page-why-now .brand-logo:hover::before {
  left: 100%;
}

/* Individual brand colors */
.page-why-now .brand-logo.gluon:hover {
  background: linear-gradient(135deg, #5A8181, #1C2A2A);
  border-color: rgba(0, 0, 0, 0.25);
  color: var(--color-white);
}

.page-why-now .brand-logo.afin:hover {
  background: linear-gradient(135deg, #0C0C0C, #6B6B6B);
  border-color: rgba(0, 0, 0, 0.25);
  color: var(--color-white);
}

.page-why-now .brand-logo.photon:hover {
  background: linear-gradient(135deg, rgb(217 217 217 / 10%), rgba(255, 255, 255, 0.95));
  border-color: var(--color-primary);
}

.page-why-now .brand-description {
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.5;
  font-weight: 500;
  padding: 0 10px;
}

/* Info banners */
.page-why-now .info-banner {
  background: linear-gradient(65deg, rgb(255 255 255 / 8%), #0ea2bd12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--r-lg);
  padding: 25px;
  margin: 0px 0 50px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
  position: relative;
  animation: fade-in-up 0.8s ease-out 0.6s backwards;
  transition: all 0.4s ease;
}

.page-why-now .info-banner:hover {
  box-shadow: 0 15px 50px rgba(99, 102, 241, 0.12);
  transform: translateY(-2px);
}

.page-why-now .info-banner h2 {
  font-size: 1.25rem;
  color: var(--color-dark);
  margin-bottom: 10px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.page-why-now .info-banner p {
  font-size: 1rem;
  color: var(--color-secondary);
  line-height: 1.7;
  font-weight: 500;
}

.page-why-now .info-banner ul {
  margin-top: 15px;
  list-style: none;
  padding: 0;
}

.page-why-now .info-banner li {
  padding: 8px 0;
  color: var(--color-secondary);
  position: relative;
  padding-left: 25px;
}

.page-why-now .info-banner li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: #10b981;
  font-weight: bold;
}

/* More solutions block */
.page-why-now .more-solutions {
  background: rgba(248, 250, 255, 0.8);
  border: 2px dashed rgba(99, 102, 241, 0.2);
  border-radius: var(--r-md);
  padding: 15px;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 15px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.page-why-now .more-solutions:hover {
  background: linear-gradient(135deg,
    rgba(99, 102, 241, 0.08),
    rgba(139, 92, 246, 0.08));
  border-color: rgba(99, 102, 241, 0.4);
  border-style: solid;
  color: var(--color-accent);
  transform: scale(1.02);
  box-shadow: 0 5px 20px rgba(99, 102, 241, 0.15);
}

.page-why-now .more-solutions small {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  opacity: 0.8;
}

/* ─── WHY-NOW BUILD vs BUY COMPARISON ────────────────────────── */
.page-why-now .comparison-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 40px;
}

.page-why-now .comparison-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--r-lg);
  padding: 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  animation: fade-in-up 0.8s ease-out backwards;
}

.page-why-now .comparison-card:nth-child(1) { animation-delay: 0.1s; }
.page-why-now .comparison-card:nth-child(2) { animation-delay: 0.2s; }
.page-why-now .comparison-card:nth-child(3) { animation-delay: 0.3s; }

.page-why-now .comparison-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.page-why-now .comparison-header {
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.page-why-now .comparison-icon {
  font-size: 3rem;
  margin-bottom: 15px;
}

.page-why-now .comparison-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-dark);
}

.page-why-now .comparison-subtitle {
  font-size: 0.95rem;
  color: var(--color-muted);
  font-weight: 500;
}

.page-why-now .comparison-metrics {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
  flex-grow: 1;
}

.page-why-now .comparison-metrics li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-size: 0.9rem;
  color: var(--color-secondary);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.page-why-now .comparison-metrics li:last-child {
  border-bottom: none;
}

.page-why-now .comparison-metrics li span {
  font-weight: 500;
}

.page-why-now .comparison-metrics li strong {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-dark);
  text-align: right;
}

.page-why-now .comparison-comment {
  font-size: 0.9rem;
  color: var(--color-secondary);
  background: #f8faff;
  border: 1px solid #eef2f7;
  padding: 15px;
  border-radius: var(--r-md);
  line-height: 1.6;
}

/* Partner card highlight */
.page-why-now .comparison-card--partner {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 255, 0.95));
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 20px 60px rgba(99, 102, 241, 0.15);
  position: relative;
  transform: translateY(0);
}

.page-why-now .comparison-card--partner::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: var(--r-lg);
  z-index: -1;
  opacity: 0.8;
  filter: blur(5px);
  transition: all 0.4s ease;
}

.page-why-now .comparison-card--partner:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 25px 70px rgba(99, 102, 241, 0.25);
}

.page-why-now .comparison-card--partner:hover::before {
  opacity: 1;
  filter: blur(8px);
}

.page-why-now .comparison-card--partner .comparison-title {
  background: linear-gradient(135deg, #0ea2bd, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-why-now .comparison-card--partner .comparison-metrics li strong {
  color: var(--color-primary);
}

.page-why-now .comparison-card--partner .comparison-comment {
  background: linear-gradient(135deg, rgba(14, 162, 189, 0.05), rgba(99, 102, 241, 0.05));
  border-color: rgba(99, 102, 241, 0.2);
  color: var(--color-dark);
}

/* ─── WHY-NOW ONION CHART ────────────────────────────────────── */
.page-why-now .onion-chart {
  position: relative;
  width: 420px;
  height: 420px;
  margin: 0 auto;
  background: var(--color-white);
}
.page-why-now .onion-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 110px; height: 110px;
  transform: translate(-50%, -50%);
  background: #38761D;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-white); font-weight: 700; text-align: center;
}
.page-why-now .onion-inner-cards {
  position: absolute;
  top: 50%; left: 50%;
  width: 300px;
  transform: translate(-50%, -50%);
  display: flex; justify-content: space-between; gap: 6px;
}
.page-why-now .onion-card {
  background: #1D4C7C;
  color: var(--color-white);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 0.68rem;
  text-align: center;
  flex: 1;
  line-height: 1.15;
}
.page-why-now .onion-ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.page-why-now .onion-ring--products {
  width: 320px; height: 320px;
  border: 10px solid #2E72B7;
}
.page-why-now .onion-ring--vc {
  width: 380px; height: 380px;
  border: 12px solid #5AA13B;
}
.page-why-now .onion-ring-label {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 50px;
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--color-dark);
  text-align: center;
}
.page-why-now .onion-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.page-why-now .onion-dots span {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
}
.page-why-now .onion-dots--blue span { background: #4DA7E7; }
.page-why-now .onion-dots--green span { background: #78C25B; }
.page-why-now .onion-dots span:nth-child(1) { top: -7px; left: 50%; transform: translateX(-50%); }
.page-why-now .onion-dots span:nth-child(2) { top: 12%; right: 5%; }
.page-why-now .onion-dots span:nth-child(3) { top: 32%; right: -4px; }
.page-why-now .onion-dots span:nth-child(4) { top: 55%; right: 4%; }
.page-why-now .onion-dots span:nth-child(5) { bottom: 7px; right: 20%; }
.page-why-now .onion-dots span:nth-child(6) { bottom: -4px; left: 50%; transform: translateX(-50%); }
.page-why-now .onion-dots span:nth-child(7) { bottom: 7px; left: 16%; }
.page-why-now .onion-dots span:nth-child(8) { top: 55%; left: -4px; }
.page-why-now .onion-dots span:nth-child(9) { top: 30%; left: -6px; }
.page-why-now .onion-dots span:nth-child(10){ top: 12%; left: 6%; }

/* Classic onion */
.page-why-now .onion-chart--classic {
  width: 360px; height: 360px;
}
.page-why-now .onion-core--classic {
  background: #5F6A74;
  width: 140px; height: 140px;
}
.page-why-now .onion-ring--classic {
  width: 250px; height: 250px;
  border: 16px solid #A5B0B8;
}
.page-why-now .onion-ring-label--classic {
  padding: 0 30px;
  font-size: 0.75rem;
  color: #3b4044;
}

/* ─── WHY-NOW TABLE ──────────────────────────────────────────── */
.page-why-now .bank-table {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--color-white);
}
.page-why-now .bank-table-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  border-bottom: 1px solid #edf2f7;
}
.page-why-now .bank-table-row:last-child { border-bottom: none; }
.page-why-now .bank-table-cell {
  padding: 14px 16px;
  font-size: 0.9rem;
  text-align: left;
  color: var(--color-dark);
}
.page-why-now .bank-table-head {
  background: var(--color-light-gray);
  font-weight: 700;
  color: var(--color-dark);
}

/* ─── WHY-NOW VENN ───────────────────────────────────────────── */
.page-why-now .venn-wrapper {
  display: flex; justify-content: center;
}
.page-why-now .venn-circle {
  position: relative;
  width: 480px; height: 360px;
  border-radius: 50%;
  border: 2px solid #a9d6a4;
  background: #C3E7AD;
}
.page-why-now .venn-title {
  position: absolute;
  top: -38px; left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
  color: var(--color-dark);
}
.page-why-now .venn-list {
  list-style: none;
  padding: 65px 40px 40px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-dark);
}
.page-why-now .venn-circle--inner {
  position: absolute;
  top: 70px; left: 120px;
  width: 240px; height: 220px;
  border: 2px solid #cbd5e1;
  background: #D3D3D3;
  border-radius: 50%;
}
.page-why-now .venn-title--inner {
  top: -32px; font-size: 0.8rem;
}
.page-why-now .venn-list--inner {
  padding: 44px 28px 20px;
  font-size: 0.8rem;
}

/* ─── WHY-NOW ROADMAP ────────────────────────────────────────── */
.page-why-now .roadmap-two-paths {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.page-why-now .roadmap-title {
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--color-dark);
}
.page-why-now .roadmap-track {
  display: flex;
  align-items: center;
  gap: 35px;
  position: relative;
  padding: 20px 0;
}
.page-why-now .roadmap-track::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 6px;
  border-radius: 9999px;
  top: 30px;
}
.page-why-now .roadmap-track--classic::before {
  background: #778899;
}
.page-why-now .roadmap-track--innovative::before {
  background: #4CAF50;
}
.page-why-now .roadmap-point {
  position: relative;
  z-index: 1;
  min-width: 120px;
}
.page-why-now .rp-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #778899;
  border: 3px solid var(--color-white);
  margin-bottom: 10px;
}
.page-why-now .rp-dot--green {
  background: #4CAF50;
}
.page-why-now .rp-text {
  font-size: 0.75rem;
  max-width: 136px;
  color: var(--color-dark);
}
.page-why-now .roadmap-track--innovative .roadmap-point:nth-child(3),
.page-why-now .roadmap-track--innovative .roadmap-point:nth-child(5),
.page-why-now .roadmap-track--innovative .roadmap-point:nth-child(7) {
  transform: translateY(-10px);
}
.page-why-now .roadmap-point--last .rp-text {
  font-weight: 700;
  color: #15803d;
}

/* Highlight utility (why-now specific) */
.page-why-now .highlight {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  padding: 3px 8px;
  border-radius: var(--r-xs);
  font-weight: 600;
}

/* ─── WHY-NOW ORBIT ANIMATION ────────────────────────────────── */
.page-why-now .innovative-circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.page-why-now .orbit-container {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  animation: rotate 30s linear infinite;
}

.page-why-now .single-orbit-container {
  position: absolute;
  width: 340px;
  height: 340px;
  border: 1px dashed rgba(14, 162, 189, 0.3);
  border-radius: 50%;
  animation: rotate 30s linear infinite;
  z-index: 3;
}

.page-why-now .orbit {
  position: absolute;
  border: 1px dashed rgba(14, 162, 189, 0.3);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.page-why-now .orbit-1 { width: 280px; height: 280px; }
.page-why-now .orbit-2 { width: 350px; height: 350px; }
.page-why-now .orbit-3 { width: 420px; height: 420px; }

/* Core */
.page-why-now .innovative-core {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at 30% 30%, #a7f3d0, #16a34a);
  border: 1px solid #166534;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
  box-shadow:
    0 0 150px #16a34ad4,
    0 0 90px #16a34a63,
    inset 0 0 10px rgba(255, 255, 255, 0.2);
  animation: pulse-scale 3s ease-in-out infinite;
}

/* Startups */
.page-why-now .startup {
  position: absolute;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #0ea2bd, #0099b8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow:
    0 0 30px rgba(99, 102, 241, 0.6),
    inset 0 0 15px rgba(255, 255, 255, 0.3);
  animation: counter-rotate 30s linear infinite;
  cursor: pointer;
  transition: all 0.3s ease;
}

.page-why-now .startup:hover {
  transform: scale(1.3);
  z-index: 15;
  box-shadow: 0 0 50px rgba(99, 102, 241, 0.8);
}

.page-why-now .startup-tooltip {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: var(--color-white);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 20;
}

.page-why-now .startup:hover .startup-tooltip {
  opacity: 1;
}

/* Startup positions */
.page-why-now .startup-1 { top: -30px; left: 50%; transform: translateX(-50%); }
.page-why-now .startup-2 { top: 25%; right: -30px; }
.page-why-now .startup-3 { bottom: -30px; right: 25%; }
.page-why-now .startup-4 { bottom: -30px; left: 25%; }
.page-why-now .startup-5 { top: 25%; left: -30px; }
.page-why-now .startup-6 { top: 50%; right: -30px; transform: translateY(-50%); }

/* Venture fund */
.page-why-now .venture-fund {
  position: absolute;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 40px rgba(251, 191, 36, 0.6);
  animation: float 3s ease-in-out infinite;
  z-index: 11;
}


/* ═══════════════════════════════════════════════════════════════
   WHY-NOW RESPONSIVE STYLES
   ═══════════════════════════════════════════════════════════════ */

/* ─── Tablet: 1024px ─────────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 769px) {
  .page-why-now .chart-container {
    padding: 20px;
  }
  .page-why-now .quadrant-chart {
    height: 450px;
    padding: 30px;
  }
  .page-why-now .onion-chart { transform: scale(0.9); }
  .page-why-now .onion-chart--classic { transform: scale(0.9); }
  .page-why-now .venn-circle { transform: scale(0.9); }
  .page-why-now .comparison-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}

@media (min-width: 1024px) {
  .page-why-now .comparison-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
  }
}

@media (min-width: 769px) {
  .page-why-now .platforms-container {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    align-items: start;
  }

  .page-why-now .brand-card {
    margin-top: 0;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .page-why-now .comparison-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
  .page-why-now .comparison-card--partner {
    grid-column: 1 / -1;
    max-width: 600px;
    margin: 0 auto;
  }
}

/* ─── Tablet / Mobile: 820px ─────────────────────────────────── */
@media (max-width: 820px) {
  .page-why-now .bank-table-row { grid-template-columns: 1fr; }
  .page-why-now .onion-chart,
  .page-why-now .onion-chart--classic {
    transform: scale(0.78);
  }
  .page-why-now .venn-circle { transform: scale(0.8); }
  .page-why-now .roadmap-track { flex-wrap: wrap; gap: 16px; }
}

/* ─── Mobile: 768px ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-why-now .hero-title {
    font-size: 2.5rem;
  }
  .page-why-now .hero-subtitle {
    font-size: 1.2rem;
  }
  .page-why-now .wn-section-title {
    font-size: 2rem;
  }
  .page-why-now .chart {
    height: 300px;
  }
  .page-why-now .process-steps {
    flex-direction: column;
    gap: 40px;
  }
  .page-why-now .process-line {
    display: none;
  }
  .page-why-now .cta-section {
    padding: 40px 20px;
  }
  .page-why-now .cta-title {
    font-size: 2rem;
  }
  .page-why-now .wn-section {
    padding: 60px 15px;
    overflow-x: hidden;
  }

  /* Bank section mobile */
  .page-why-now .bank-title {
    font-size: 2rem;
    padding: 15px 25px;
  }
  .page-why-now .platform-card {
    padding: 15px;
  }
  .page-why-now .info-banner {
    padding: 20px;
  }
  .page-why-now .info-banner h2 {
    font-size: 1.15rem;
  }
  .page-why-now #platform-b2b { order: 1; }
  .page-why-now #brand-card-gluon { order: 2; }
  .page-why-now #platform-b2c { order: 3; }
  .page-why-now #brand-card-afin { order: 4; }
  .page-why-now #venture-card { order: 5; }
  .page-why-now #brand-card-photon { order: 6; }

  /* Quadrant chart mobile */
  .page-why-now .chart-container {
    padding: 15px 10px;
    overflow: hidden;
  }
  .page-why-now .chart-title {
    font-size: 1.1rem;
    margin-bottom: 15px;
    text-align: center;
  }
  .page-why-now .chart-legend-top {
    padding: 0 5px;
    margin-bottom: 10px;
  }
  .page-why-now .legend-label-start,
  .page-why-now .legend-label-end {
    font-size: 0.65rem;
  }
  .page-why-now .legend-label-center-box {
    font-size: 0.7rem;
    padding: 2px 6px;
  }
  .page-why-now .quadrant-chart {
    height: 380px;
    padding: 25px 15px;
    min-width: unset;
    width: 100%;
    overflow: hidden;
  }
  .page-why-now .quadrant-axis-x,
  .page-why-now .quadrant-axis-y {
    background-color: #cbd5e1;
  }
  .page-why-now .quadrant-label {
    font-size: 0.6rem;
  }
  .page-why-now .quadrant-label-x-start { left: 1%; }
  .page-why-now .quadrant-label-x-end { right: 1%; }
  .page-why-now .quadrant-main-label-y {
    left: -30px;
    font-size: 0.7rem;
  }
  .page-why-now .quadrant-main-label-x {
    bottom: -5px;
    font-size: 0.7rem;
  }
  .page-why-now .quadrant-y-stack {
    width: 150px;
    transform: translate(-50%, -50%) scale(0.85);
  }
  .page-why-now .stack-item {
    font-size: 0.62rem;
    padding: 2px 5px;
    margin: 3px;
  }
  .page-why-now .stack-arrow {
    font-size: 1rem;
    margin: 2px 0;
  }

  /* Points mobile */
  .page-why-now .point-1 { width: 12px; height: 12px; }
  .page-why-now .point-2 { width: 20px; height: 20px; }
  .page-why-now .point-3 { width: 32px; height: 32px; }
  .page-why-now .point-4 { width: 44px; height: 44px; }
  .page-why-now .point-5 { width: 60px; height: 60px; }

  .page-why-now .quadrant-data-label {
    font-size: 0.55rem;
    line-height: 1.1;
  }
  .page-why-now .label-1 { left: 15%; }
  .page-why-now .label-2 { left: 52%; }

  /* Bank comparison mobile -- keep !important for inline-styled elements */
  .page-why-now .comparison-wrapper > div[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 30px !important;
  }
  .page-why-now div[style*="font-size: 2.5rem"][style*="VS"] {
    font-size: 1.8rem !important;
    padding: 10px 20px !important;
    margin: 10px 0 !important;
  }
  .page-why-now .traditional-bank-block,
  .page-why-now .innovative-bank-block {
    width: 100% !important;
    max-width: 350px !important;
  }
  .page-why-now h2[style*="font-size: 2rem"] {
    font-size: 1.5rem !important;
  }
  .page-why-now div[style*="width: 100%"][style*="max-width: 400px"][style*="height: 400px"] {
    max-width: 300px !important;
    height: 300px !important;
  }
  .page-why-now div[style*="width: 200px"][style*="height: 200px"][style*="background: linear-gradient"] {
    width: 140px !important;
    height: 140px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  .page-why-now .traditional-bank-block h3[style*="font-size: 1.5rem"] {
    font-size: 1.1rem !important;
  }
  .page-why-now div[style*="background: rgba(71, 85, 105, 0.8)"] {
    font-size: 0.75rem !important;
    padding: 8px 12px !important;
  }
  .page-why-now div[style*="top: 20px"] { top: 10px !important; }
  .page-why-now div[style*="bottom: 20px"] { bottom: 10px !important; }
  .page-why-now div[style*="left: 20px"] { left: 10px !important; }
  .page-why-now div[style*="right: 20px"] { right: 10px !important; }
  .page-why-now div[style*="width: 160px"][style*="height: 160px"][style*="background: linear-gradient(135deg, #0ea2bd"] {
    width: 110px !important;
    height: 110px !important;
  }
  .page-why-now .innovative-bank-block h3[style*="color: white"] {
    font-size: 0.9rem !important;
  }
  .page-why-now .orbit-1 {
    width: 200px !important;
    height: 200px !important;
  }
  .page-why-now .orbit-2 {
    width: 250px !important;
    height: 250px !important;
  }
  .page-why-now .orbit-3 {
    width: 300px !important;
    height: 300px !important;
  }
  .page-why-now .startup-item {
    width: 45px !important;
    height: 45px !important;
    font-size: 0.6rem !important;
    padding: 3px !important;
  }
  .page-why-now div[style*="background: rgba(255, 255, 255, 0.9)"][style*="padding: 20px"] {
    padding: 15px !important;
  }
  .page-why-now div[style*="display: flex"][style*="justify-content: space-between"] span:first-child {
    font-size: 0.8rem !important;
  }
  .page-why-now div[style*="display: flex"][style*="justify-content: space-between"] span:last-child {
    font-size: 0.85rem !important;
  }

  .page-why-now .comparison-wrapper {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .page-why-now .traditional-bank-block,
  .page-why-now .innovative-bank-block {
    overflow: visible !important;
    max-width: 100% !important;
  }
  .page-why-now .comparison-wrapper > div {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}

@media (max-width: 767px) {
  .page-why-now .wn-section {
    padding: 60px 15px;
    overflow-x: hidden;
  }
  .page-why-now .comparison-card {
    padding: 25px 20px;
    border-radius: var(--r-lg);
  }
  .page-why-now .comparison-header {
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
  .page-why-now .comparison-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
  }
  .page-why-now .comparison-title {
    font-size: 1.3rem;
  }
  .page-why-now .comparison-subtitle {
    font-size: 0.9rem;
  }
  .page-why-now .comparison-metrics li {
    padding: 10px 0;
    font-size: 0.85rem;
  }
  .page-why-now .comparison-metrics li strong {
    font-size: 0.95rem;
  }
  .page-why-now .comparison-comment {
    font-size: 0.85rem;
    padding: 12px;
  }
  .page-why-now .comparison-card--partner {
    margin: 10px 0;
    transform: none;
  }
  .page-why-now .comparison-card--partner:hover {
    transform: translateY(-5px) scale(1.01);
  }
}

/* ─── Small Mobile: 480px ────────────────────────────────────── */
@media (max-width: 480px) {
  .page-why-now .hero-title {
    font-size: 2rem;
  }
  .page-why-now .wn-section {
    padding: 60px 20px;
  }
  .page-why-now .bank-title {
    font-size: 1.8rem;
    padding: 15px 20px;
  }
  .page-why-now .platform-card {
    padding: 15px 10px;
  }
  .page-why-now .feature-item {
    padding: 12px;
    gap: 10px;
  }
  .page-why-now .icon-placeholder {
    width: 30px;
    height: 30px;
    font-size: 1rem;
  }
  .page-why-now .info-banner {
    padding: 15px;
  }
  .page-why-now .quadrant-chart {
    height: 340px;
    padding: 20px 10px;
  }
  .page-why-now .chart-title {
    font-size: 0.95rem;
  }
  .page-why-now .quadrant-y-stack {
    transform: translate(-50%, -50%) scale(0.75);
    width: 130px;
  }
  .page-why-now .stack-item {
    font-size: 0.58rem;
  }
  .page-why-now .quadrant-main-label-y,
  .page-why-now .quadrant-main-label-x {
    font-size: 0.65rem;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .page-why-now .comparison-metrics li {
    flex-direction: row;
  }
  .page-why-now .comparison-card {
    padding: 30px 25px;
  }
  .page-why-now .comparison-comment {
    font-size: 0.9rem;
    padding: 15px;
  }
}

/* ─── Very Small Mobile: 380px ───────────────────────────────── */
@media (max-width: 380px) {
  .page-why-now .quadrant-chart {
    height: 300px;
    padding: 15px 5px;
  }
  .page-why-now .quadrant-label-x-mid,
  .page-why-now .quadrant-label-y-mid {
    display: none;
  }
  .page-why-now .quadrant-y-stack {
    transform: translate(-50%, -50%) scale(0.65);
    width: 110px;
  }
  .page-why-now .stack-item {
    font-size: 0.52rem;
    padding: 2px 3px;
  }
  .page-why-now .quadrant-data-label {
    display: none;
  }
  .page-why-now .point-1,
  .page-why-now .point-2 {
    opacity: 0.6;
  }
}

@media (max-width: 379px) {
  .page-why-now .wn-section {
    padding: 50px 10px;
  }
  .page-why-now .comparison-card {
    padding: 20px 15px;
  }
  .page-why-now .comparison-metrics li {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  .page-why-now .comparison-metrics li strong {
    align-self: flex-end;
    width: 100%;
    text-align: right;
  }
  .page-why-now .comparison-comment {
    font-size: 0.8rem;
    padding: 10px;
  }
  /* Bank comparison very small -- keep !important for inline-styled elements */
  .page-why-now div[style*="font-size: 2.5rem"][style*="VS"] {
    font-size: 1.5rem !important;
    padding: 8px 15px !important;
  }
  .page-why-now h2[style*="font-size: 2rem"] {
    font-size: 1.3rem !important;
  }
  .page-why-now div[style*="width: 100%"][style*="max-width: 400px"][style*="height: 400px"] {
    max-width: 260px !important;
    height: 260px !important;
  }
  .page-why-now div[style*="width: 200px"][style*="height: 200px"][style*="background: linear-gradient"] {
    width: 120px !important;
    height: 120px !important;
  }
  .page-why-now .traditional-bank-block h3[style*="font-size: 1.5rem"] {
    font-size: 1rem !important;
  }
  .page-why-now div[style*="background: rgba(71, 85, 105, 0.8)"] {
    font-size: 0.65rem !important;
    padding: 6px 10px !important;
  }
  .page-why-now .orbit-1 {
    width: 170px !important;
    height: 170px !important;
  }
  .page-why-now .orbit-2 {
    width: 210px !important;
    height: 210px !important;
  }
  .page-why-now .orbit-3 {
    width: 250px !important;
    height: 250px !important;
  }
  .page-why-now div[style*="width: 160px"][style*="height: 160px"][style*="background: linear-gradient(135deg, #0ea2bd"] {
    width: 90px !important;
    height: 90px !important;
  }
  .page-why-now .innovative-bank-block h3[style*="color: white"] {
    font-size: 0.8rem !important;
  }
  .page-why-now .startup-item {
    width: 35px !important;
    height: 35px !important;
    font-size: 0.5rem !important;
    padding: 2px !important;
  }
  .page-why-now div[style*="background: rgba(255, 255, 255, 0.9)"][style*="padding: 20px"] {
    padding: 12px 10px !important;
  }
  .page-why-now div[style*="display: flex"][style*="justify-content: space-between"] span:first-child {
    font-size: 0.7rem !important;
  }
  .page-why-now div[style*="display: flex"][style*="justify-content: space-between"] span:last-child {
    font-size: 0.75rem !important;
  }
}