/* ── Scroll reveal (anime.js enhanced) ─────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
}

/* ── Hero entrance targets ────────────────────── */
.hero-eyebrow,
.hero-title,
.hero-subtitle,
.hero-ctas,
.hero-metrics {
  opacity: 0;
  transform: translateY(20px);
}

/* ── Flow step animation targets ──────────────── */
.flow-step {
  opacity: 0;
  transform: translateX(-12px);
}

/* ── Grid item stagger targets ────────────────── */
.stagger-item {
  opacity: 0;
  transform: translateY(16px);
}

/* ── Dark/light CSS variables (RGB channels) ──── */
:root {
  --vp-bg: 2 6 23;
  --vp-surface: 15 23 42;
  --vp-surface2: 17 24 39;
  --vp-border: 30 41 59;
  --vp-border2: 51 65 85;
  --vp-text: 248 250 252;
  --vp-muted: 148 163 184;
  --vp-dim: 71 85 105;
  --vp-primary: 0 92 153;
  --vp-primary-dim: 0 77 135;
  --vp-primary-light: 61 158 224;
  --vp-primary-pale: 212 232 245;
  --vp-success: 52 211 153;
  --vp-success-bg: 6 78 59;
  --vp-warning: 251 191 36;
  --vp-warning-bg: 69 26 3;
  --vp-danger: 248 113 113;
  --vp-danger-bg: 69 10 10;
}

html.light {
  --vp-bg: 248 250 252;
  --vp-surface: 255 255 255;
  --vp-surface2: 241 245 249;
  --vp-border: 226 232 240;
  --vp-border2: 203 213 225;
  --vp-text: 15 23 42;
  --vp-muted: 100 116 139;
  --vp-dim: 148 163 184;
  --vp-success: 22 101 52;
  --vp-success-bg: 167 243 208;
  --vp-warning: 146 64 14;
  --vp-warning-bg: 253 230 138;
  --vp-danger: 153 27 27;
  --vp-danger-bg: 252 165 165;
}

/* ── Theme transition ─────────────────────────── */
*, *::before, *::after {
  transition-property: background-color, border-color, color;
  transition-duration: 150ms;
  transition-timing-function: ease;
}

/* ── Navbar scroll border ─────────────────────── */
#navbar.scrolled {
  border-bottom: 1px solid rgb(var(--vp-border));
}

/* ── Focus visible (WCAG AA) ──────────────────── */
:focus-visible {
  outline: 2px solid rgb(var(--vp-primary));
  outline-offset: 2px;
}

/* ── FAQ accordion ────────────────────────────── */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease, opacity 0.2s ease;
  opacity: 0;
}
.faq-content.open {
  max-height: 200px;
  opacity: 1;
}
.faq-icon {
  transition: transform 0.2s ease;
}
.faq-trigger.open .faq-icon {
  transform: rotate(45deg);
}

/* ── Flow diagram lines ───────────────────────── */
.flow-line {
  width: 1px;
  background: linear-gradient(to bottom, rgb(var(--vp-primary)), rgb(var(--vp-border2)));
  margin: 0 auto;
  flex-shrink: 0;
}

/* ── Dashboard table hover ────────────────────── */
.table-row:hover {
  background: rgb(var(--vp-surface));
}

/* ── Scrollbar ────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgb(var(--vp-bg)); }
::-webkit-scrollbar-thumb { background: rgb(var(--vp-border)); border-radius: 3px; }