/* ── V2-dark: Dark theme overrides ─────────────────────────────── */

html, body {
  --color-paper:         #08111f;
  --color-soft:          #0d1a2e;
  --color-ink:           #e4eeff;
  --color-ink-soft:      #7e9cbf;
  --color-line:          rgba(255,255,255,0.09);
  --color-line-light:    rgba(255,255,255,0.06);
  --color-panel:         rgba(255,255,255,0.04);
  --color-blue-soft:     rgba(0,94,255,0.18);
  --color-green-1:       rgba(189,230,174,0.12);
  --color-green-2:       rgba(189,230,174,0.18);
  --color-green-3:       #3d7a52;
  --color-gray-1:        rgba(255,255,255,0.07);
  --color-blue-1:        rgba(78,132,190,0.15);
  --color-blue-2:        rgba(78,132,190,0.22);
  --color-blue-3:        rgba(78,132,190,0.30);
  --color-blue-4:        rgba(78,132,190,0.38);
  --color-rich-bg:       rgba(217,0,50,0.18);
  --color-rich-text:     #ff6b8a;
  --color-cheap-bg:      rgba(0,103,200,0.18);
  --color-cheap-text:    #5ab0ff;
  --color-shadow:        rgba(0,0,0,0.45);
  --color-shadow-strong: rgba(0,0,0,0.65);
  background: #08111f;
  color: #e4eeff;
}

/* ── Navigation ── */
.site-header {
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
}
.site-header.is-scrolled {
  background: rgba(8,17,31,0.97);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.site-header.is-scrolled .nav-shell {
  background: transparent;
  color: #e4eeff;
  box-shadow: none;
}
.nav-menu a, .nav-actions a, .nav-cta { color: #ffffff; }
.site-header.is-scrolled .nav-menu a,
.site-header.is-scrolled .nav-actions a,
.site-header.is-scrolled .nav-cta { color: #ffffff; }
.nav-menu a:hover { color: #fff; }
.nav-cta { border-color: rgba(255,255,255,0.22); color: #e4eeff; }
.nav-cta:hover { background: rgba(255,255,255,0.08); }
.logo-default { display: block; }
.logo-color   { display: none; }
.site-header.is-scrolled .logo-default { display: block; }
.site-header.is-scrolled .logo-color   { display: none; }

/* ── Mobile menu ── */
.mobile-menu { background: #08111f; }
.mobile-links a {
  color: #c8daef;
  font-size: 22px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mobile-links a:hover { color: #fff; }
.nav-toggle { color: #e4eeff; }
.mobile-cta {
  margin-top: 40px;
  padding: 16px;
  background: rgba(82,133,188,1);
  color: #fff;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
}

/* ── Hero bottom-right corner blends into section below ── */
.hero {
  position: relative;
  overflow: hidden;
}

/* ── Hero ── */
.hero {
  background:
    linear-gradient(135deg, rgba(5,15,40,0.85) 0%, rgba(3,25,55,0.72) 50%, var(--color-soft)),
    url("../images/hero_photo_dark.webp") center / cover no-repeat;
  color: #e4eeff;
}
.hero .badge-hero {
  color: #ffffff;
  border-color: rgba(255,255,255,0.05);
  border:none !important;
  background: rgba(255,255,255,0.06);
}
.hero h1 { color: #ffffff; }
.hero-copy p { color: #ffffff; }
.hero-button-primary { background: rgba(82,133,188,1); color: #fff; }
.hero-button-primary .material-symbols-outlined { background: rgba(255,255,255,0.16); color: #fff; }
.hero-button-secondary { background: rgba(255,255,255,0.09); color: #e4eeff; border: 1px solid rgba(255,255,255,0.22); }
.hero-button-secondary .material-symbols-outlined { background: rgba(255,255,255,0.10); color: #e4eeff; }
.hero-line { border-color: rgba(255,255,255,0.15); }
.hero-metrics .material-symbols-outlined { color: rgba(255,255,255,0.6); }
.hero-metrics strong { color: #e4eeff; }
.hero-metrics small  { color: rgba(255,255,255,0.45); }

/* ── Hero cards / data panels ── */
.hero-card,
.data-panel {
  background: rgba(14,24,46,0.92);
  border-color: rgba(255,255,255,0.09);
  color: #c8daef;
}

/* ── Sections ── */
.data-section,
.steps-section,
.macro-section,
.video-section,
.platform-section { background: var(--color-soft); }
.steps-section { background: #08111f; }
.platform-section { padding-top: var(--section-y); }
.steps-section { padding-top: var(--section-y); }

/* ── Badges ── */
.badge { background: rgba(255,255,255,0.07); color: #ffffff; border-color: rgba(126,207,255,0.22); }
.micro-badge { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.12); }

/* ── Section headers ── */
.section-header h2 { color: #e4eeff; }
.section-header p  { color: #ffffff; }
.flow-header h2    { color: #e4eeff; }

/* ── Highlight / thesis ── */
.highlight {
  background: url("../images/highlight_bg.webp") center / cover no-repeat;
  border-radius: 20px;
  color: #e4eeff;
}
.highlight h2, .highlight h3, .highlight p { color: rgba(255,255,255,0.7); }

/* ── Tabs ── */
.tabs { border-color: rgba(255,255,255,0.18); }
.tab { border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.82); }
.tab.is-active, .tab[aria-selected="true"] {
  background: rgba(255,255,255,0.2);
  color: #ffffff;
  border-color: rgba(255,255,255,0.32);
  border-right: 1px solid rgba(255,255,255,0.32);
}
.tab:hover:not(.is-active):not([aria-selected="true"]) { background: rgba(255,255,255,0.1); color: #ffffff; }

/* ── Data section panels ── */
.data-panel { background: rgba(12,22,42,0.95); border-color: rgba(255,255,255,0.08); }
.panel-tags span { background: rgba(255,255,255,0.08); color: #ffffff; }
.panel-tags .micro-badge { background: rgba(255,255,255,0.1); color: #ffffff; border-color: rgba(255,255,255,0.12); }
.panel-top h3 { color: #c8daef; }
.panel-top p  { color: rgba(255,255,255,0.55); }
.curve-y, .curve-x { color: rgba(255,255,255,0.35); }
.heatmap span  { color: rgba(255,255,255,0.45); }
.heatmap strong { color: rgba(255,255,255,0.45); }
.heatmap > span:first-child,
.heatmap span[style] { color: rgba(255,255,255,0.5); }

/* ── Stat row cards ── */
.stat-row div,
.macro-stats div,
.macro-row div,
.distribution-stats div {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.08);
}
.stat-row strong, .distribution-stats strong { color: #c8daef; }
.stat-row span,   .distribution-stats span   { color: rgba(255,255,255,0.4); }

/* ── Distribution bars ── */
.distribution-shell .surface-graphic img { opacity: 0.55; }

/* ── Flow section ── */
.flow-arrow { color: rgba(255,255,255,0.4); }
.flow-cards article { background: rgba(14,24,46,0.8); border-color: rgba(255,255,255,0.08); }
.flow-cards h3 { color: #e4eeff; }
.flow-cards p  { color: rgba(255,255,255,0.7); }

/* ── Macro section ── */
.macro-lead, .macro-mini { background: rgba(12,22,42,0.9); border-color: rgba(255,255,255,0.08); color: #c8daef; }
.macro-card-head h3 { color: #e4eeff; }
.macro-card-head .micro-badge { background: rgba(255,255,255,0.08); color: #ffffff; }
.macro-card-head { border-bottom-color: rgba(255,255,255,0.12); }
.macro-lead p, .macro-mini p, .macro-mini footer { color: rgba(255,255,255,0.7); }
.macro-row div { border-color: rgba(255,255,255,0.08); }
.macro-row strong { color: #e4eeff; }
.macro-row span   { color: #7e9cbf; }
.macro-chart { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }

/* ── Tile hover borders ── */
.macro-lead:hover,
.macro-mini:hover,
.audience-card:hover,
.flow-cards article:hover {
  border-color: rgba(255,255,255,0.3);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Video section ── */
.video-oriel { color: #5dd68c; }
.video-copy h2 { color: #e4eeff; }
.video-copy p  { color: rgba(255,255,255,0.7); }
.video-playlist li { border-color: rgba(255,255,255,0.08); color: #ffffff; }
.video-playlist strong { color: #ffffff; }

/* ── Audience / platform ── */
.audience-tagbar { background: rgba(12,22,42,0.8); border-color: rgba(255,255,255,0.08); }
.audience-tagbar-label { color: #7e9cbf; border-color: rgba(255,255,255,0.08); }
.audience-tagbar-item  { color: #b8ccee; border-color: rgba(255,255,255,0.08); }
.audience-tagbar-icon  { background: rgba(255,255,255,0.10); color: #c8daef; }
.audience-card { background: rgba(12,22,42,0.9); border-color: rgba(255,255,255,0.08); }
.audience-card-body h3 { color: #ffffff; }
.audience-card-body p  { color: #ffffff; }
.audience-card-body li { color: #ffffff; }

/* ── Access / form section ── */
.access-section {
  background: #003959 url("../images/inquiry_bg.webp") center / cover no-repeat;
}
.access-top-card, .access-bullet {
  background: rgba(14,26,52,1);
  border: 1px solid rgba(255,255,255,0.08);
  color: #c8daef;
}
.access-top-card h2 { color: #ffffff; }
.access-top-card p  { color: #ffffff; }
.access-top-card .badge { color: #ffffff; }
.access-bullet { color: #ffffff; }
.access-card {
  background: rgba(14,26,52,1);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.6);
}
.access-card-title { color: #e4eeff; }
.form-field > span  { color: #ffffff; }
.form-field input,
.form-field select,
.form-field textarea {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  color: #e4eeff;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(143,168,204,0.5); }
.form-fineprint { color: #7e9cbf; }
.form-fineprint strong { color: #b8ccee; }
.btn-accent { background: rgba(82,133,188,1); color: #fff; }

/* ── Footer ── */
.footer { background: #003959; border: none; color: rgba(255,255,255,0.7); }
.footer-meta span { color: #5a7a9a; }
.footer-meta { color: rgba(255,255,255,0.55); }
.footer-link { color: rgba(255,255,255,0.85); }
.logo-footer { color: #fff; }

.legend span { color: #ffffff; }

/* ── Premium polish ───────────────────────────────────────────────────────
   The base card hover uses a light-mode dark shadow that is invisible on the
   dark navy theme. Replace it with a real lift, an accent border, and a depth
   plus brand-accent glow so hover feedback actually reads. */
.flow-cards article,
.macro-lead,
.macro-mini,
.audience-card {
  position: relative;
  top: 0;
  transition: top 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.flow-cards article:hover,
.macro-lead:hover,
.macro-mini:hover,
.audience-card:hover {
  top: -4px;
  border-color: rgba(82, 133, 188, 0.55);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(82, 133, 188, 0.22);
}

/* Primary CTA: subtle lift + brand glow on hover. */
.hero-button-primary {
  transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.hero-button-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(82, 133, 188, 0.38);
}