/* ═══════════════════════════════════════════════════════════════════════════
   Design tokens  ·  Clean light financial theme
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand ─────────────────────────────────────────────────────────────── */
  --color-brand-500: #4B6CF5;
  --color-brand-600: #3A58E8;
  --color-accent:    #4B6CF5;

  /* ── Light surface scale ─────────────────────────────────────────────────── */
  --color-bg:          #FFFFFF;
  --color-surface:     #FFFFFF;
  --color-surface-2:   #E6ECF8;
  --color-border:      rgba(13, 27, 62, 0.08);
  --color-border-mid:  rgba(13, 27, 62, 0.14);

  /* ── Text ───────────────────────────────────────────────────────────────── */
  --color-text-primary: #0D1B3E;
  --color-text-muted:   #6B7A9A;
  --color-text-faint:   #9BA8C0;

  /* ── Brand alpha scale ──────────────────────────────────────────────────── */
  --color-brand-50:  rgba(75, 108, 245, 0.06);
  --color-brand-100: rgba(75, 108, 245, 0.10);
  --color-brand-200: rgba(75, 108, 245, 0.18);
  --color-brand-300: rgba(75, 108, 245, 0.24);
  --color-brand-400: rgba(75, 108, 245, 0.30);

  /* ── Navy shadow / overlay scale ────────────────────────────────────────── */
  --color-shadow-xs: rgba(13, 27, 62, 0.05);
  --color-shadow-sm: rgba(13, 27, 62, 0.06);

  /* ── Typography ─────────────────────────────────────────────────────────── */

  /* Section title */
  --type-section-size:   clamp(1.75rem, 3.5vw, 2.75rem);
  --type-section-lh:     1.15;
  --type-section-weight: 700;

  /* Lead text */
  --type-lead-size:   clamp(1rem, 1.5vw, 1.125rem);
  --type-lead-lh:     1.65;
  --type-lead-weight: 400;

  /* Label / eyebrow */
  --type-label-size:   0.75rem;
  --type-label-weight: 600;
  --type-label-track:  0.12em;

  /* ── Spacing ─────────────────────────────────────────────────────────────── */
  --space-section:      clamp(4rem, 8vw, 7rem);
  --container-max:      1200px;
  --container-padding:  clamp(1.25rem, 4vw, 2.5rem);

  /* ── Misc ────────────────────────────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'DM Sans', sans-serif;
  font-feature-settings: "kern" 1, "liga" 1;
  font-optical-sizing: auto;
  background: var(--color-bg);
  color: var(--color-text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

a { color: inherit; text-decoration: none; }

/* ── Flash guard (GSAP pre-hide) ────────────────────────────────────────── */
html.js:not(.reduced-motion):not(.anim-ready) [data-animate],
html.js:not(.reduced-motion):not(.anim-ready) [data-hero],
html.js:not(.reduced-motion):not(.anim-ready) #site-header { opacity: 0; }
html.js:not(.reduced-motion):not(.anim-ready) #site-header { transform: translateY(-1.5rem); }

/* ── Tailwind class aliases (light-mode remap) ──────────────────────────── */
.text-slate-900 { color: var(--color-text-primary) !important; }
.text-slate-800,
.text-slate-700 { color: rgba(13, 27, 62, 0.80) !important; }
.text-slate-600 { color: var(--color-text-muted) !important; }
.text-slate-500 { color: var(--color-text-faint) !important; }
.bg-white        { background-color: var(--color-surface) !important; }
.bg-slate-50     { background-color: var(--color-bg) !important; }
.bg-slate-900    { background-color: rgba(13, 27, 62, 0.05) !important; }
.border-slate-200{ border-color: var(--color-border) !important; }
.bg-brand-50     { background-color: rgba(75, 108, 245, 0.08) !important; }
.text-brand-600  { color: var(--color-brand-600) !important; }
.text-brand-500  { color: var(--color-brand-500) !important; }
.hover\:bg-slate-50:hover     { background-color: rgba(13, 27, 62, 0.04) !important; }
.hover\:text-slate-900:hover  { color: var(--color-text-primary) !important; }
.decoration-slate-300          { text-decoration-color: rgba(13, 27, 62, 0.22) !important; }
.hover\:decoration-slate-500:hover { text-decoration-color: rgba(13, 27, 62, 0.40) !important; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}
.section {
  padding-block: var(--space-section);
}
.section + .section,
.section ~ .section {
  border-top: 1px solid var(--color-border);
}

/* ── GSAP animation hints ───────────────────────────────────────────────── */
[data-hero], [data-animate] { will-change: transform, opacity; }
[data-animate="split-headline"],
[data-animate="hero-headline"]  { overflow: hidden; }

/* ── Reduced motion fallback ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-animate], [data-hero] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ── Header scroll transition ────────────────────────────────────────────── */
#site-header { transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); }

/* ── Page overlay (transitions) ─────────────────────────────────────────── */
.page-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--color-surface);
  pointer-events: none;
  opacity: 0;
}

/* ── App loader ──────────────────────────────────────────────────────────── */
.app-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.25rem;
  background: var(--color-surface);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0s linear 0s;
  pointer-events: all;
}
html.anim-ready .app-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.app-loader__logo {
  height: 48px;
  width: auto;
}

/* ── Custom scrollbar ────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb {
  background: rgba(75, 108, 245, 0.25);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(75, 108, 245, 0.45); }

/* Screen-reader-only utility */
.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;
}