/* ── FONTS (self-hosted) ─────────────────────────────────── */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/karla.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/karla-italic.woff2') format('woff2');
}

/* ── DESIGN TOKENS — shared across every public page ────────
   Palette: brand blue kept as-is, everything else rebuilt as a
   light, sharp-cornered, enterprise-grade system. */
:root {
  --bg:            #f7f8fb;
  --surface:       #ffffff;
  --surface-tint:  #eef3fe;
  --ink:           #14182b;
  --ink-soft:      rgba(20,24,43,.64);
  --ink-faint:     rgba(20,24,43,.42);
  --line:          rgba(20,24,43,.11);
  --line-strong:   rgba(20,24,43,.19);

  --blue:          #6495ed;
  --blue-deep:     #4169e1;
  --blue-text:     #3c5cc4;
  --blue-pale:     #dfe9fc;

  --amber:         #ec9f1f;
  --green:         #2f9e5c;

  --font-display:  'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:      'Karla', system-ui, sans-serif;

  --r-btn:   8px;
  --r-card: 12px;
  --r-img:  14px;
  --r-tag:   6px;

  --shadow-sm: 0 1px 2px rgba(20,24,43,.05), 0 6px 16px rgba(20,24,43,.06);
  --shadow-md: 0 2px 6px rgba(20,24,43,.05), 0 20px 44px rgba(20,24,43,.09);

  /* legacy aliases kept so pages we haven't fully rewritten still resolve */
  --blue2:    var(--blue-deep);
  --white:    var(--ink);
  --muted:    var(--ink-soft);
  --border:   var(--line);
  --card-bg:  var(--surface);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; }
::selection { background: var(--blue-pale); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ── SHARED PRIMITIVES ───────────────────────────────────── */
.section-label {
  font-family: var(--font-body);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--blue-text); margin-bottom: 18px;
}

.btn-primary {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--blue); color: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: 14.5px;
  padding: 14px 26px; border-radius: var(--r-btn);
  text-decoration: none; border: none; cursor: pointer;
  transition: background .18s, transform .1s;
  box-shadow: 0 1px 2px rgba(20,24,43,.05), 0 10px 22px rgba(100,149,237,.28);
}
.btn-primary:hover { background: var(--blue-deep); transform: translateY(-1px); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-soft); font-size: 14.5px; font-weight: 700; text-decoration: none;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-btn);
  padding: 12px 24px; background: var(--surface);
  transition: color .18s, border-color .18s, background .18s;
}
.btn-ghost:hover { color: var(--blue-text); border-color: var(--blue); background: var(--surface-tint); }

.btn-text {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink-soft); font-size: 14.5px; font-weight: 700; text-decoration: none;
  transition: color .18s;
}
.btn-text:hover { color: var(--blue-text); }