/* ── Brand Tokens ────────────────────────────────────────── */
:root {
  /* Core navy (unchanged) */
  --navy:          #0D1B2A;
  --navy-mid:      #14263A;
  --navy-light:    #1C3550;

  /* Teal family — deep, muted, easy on eyes */
  --teal:          #2E8C87;
  --teal-light:    #4BAAA5;
  --teal-dark:     #1A635F;
  --teal-muted:    #1A635F;

  /* Prism spectrum rays */
  --r1: #40A89F;
  --r2: #2E8C87;
  --r3: #2882A3;

  /* Backgrounds — cool gray tones, never pure white */
  --page-bg:   #EFF4F8;
  --white:     #FFFFFF;    /* cards and modals only */
  --off-white: #E4EBF3;
  --gray-50:   #DCE6EF;
  --gray-100:  #D0DBEA;
  --gray-200:  #B4C4D4;
  --gray-300:  #90A4B6;
  --gray-400:  #6E8499;
  --gray-500:  #4A6070;
  --gray-600:  #2E4252;
  --gray-800:  #18293A;
  --ink:       #0F1C28;

  /* Typography */
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Fira Code', monospace;

  /* Layout */
  --max-w:     1200px;
  --nav-h:     72px;
  --radius:    8px;
  --radius-lg: 14px;

  /* Shadows — slightly warmer to complement navy */
  --shadow-sm: 0 1px 4px rgba(13,27,42,.10), 0 1px 2px rgba(13,27,42,.07);
  --shadow-md: 0 4px 20px rgba(13,27,42,.12), 0 2px 8px rgba(13,27,42,.08);
  --shadow-lg: 0 12px 40px rgba(13,27,42,.16), 0 4px 12px rgba(13,27,42,.09);

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur:  180ms;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; }
h1,h2,h3,h4,h5,h6 { line-height: 1.15; letter-spacing: -0.022em; font-weight: 700; }

/* ── Layout ──────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: 48px; }
@media (max-width: 900px) { .container { padding-inline: 32px; } }
@media (max-width: 600px) { .container { padding-inline: 20px; } }

/* ── Type Utilities ──────────────────────────────────────── */
.label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gray-400);
  display: block;
}
.label--teal       { color: var(--teal); }
.label--teal-light { color: var(--teal-light); }
.label--white      { color: rgba(255,255,255,.55); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
  white-space: nowrap;
  letter-spacing: -.01em;
}
.btn-primary {
  background: linear-gradient(135deg, var(--teal-light) 0%, var(--teal) 60%, #2070A0 100%);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(46,140,135,.25);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #58C2BC 0%, var(--teal-light) 60%, var(--r3) 100%);
  box-shadow: 0 6px 28px rgba(46,140,135,.45);
  transform: translateY(-1px);
}
.btn-outline {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.28);
}
.btn-outline:hover {
  border-color: var(--teal-light);
  color: var(--teal-light);
}
.btn-ghost-navy {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--gray-200);
}
.btn-ghost-navy:hover {
  border-color: var(--teal);
  color: var(--teal-dark);
}

/* ── Sections ────────────────────────────────────────────── */
.section     { padding-block: 96px; }
.section--sm { padding-block: 64px; }
.section--lg { padding-block: 128px; }
.section--navy { background: var(--navy); color: var(--white); }
.section--off  { background: var(--off-white); }
.section--gray { background: var(--gray-50); }

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 40px;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover {
  box-shadow: 0 8px 40px rgba(46,140,135,.12), 0 2px 8px rgba(13,27,42,.08);
  border-color: rgba(46,140,135,.3);
}
.card--navy {
  background: var(--navy-mid);
  border-color: var(--navy-light);
  color: var(--white);
}

/* ── Prose ───────────────────────────────────────────────── */
.prose { max-width: 720px; color: var(--gray-500); font-size: 17px; line-height: 1.75; }
.prose h2 { font-size: 1.6rem; color: var(--ink); margin-block: 2.5rem 1rem; }
.prose h3 { font-size: 1.25rem; color: var(--ink); margin-block: 2rem .75rem; }
.prose p  { margin-block: 1rem; }
.prose ul, .prose ol { margin-block: 1rem; padding-left: 1.5rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-block: .4rem; }
.prose a  { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--teal); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose blockquote {
  border-left: 3px solid var(--teal);
  padding-left: 1.25rem;
  color: var(--gray-500);
  font-style: italic;
  margin-block: 1.5rem;
}
.prose code {
  font-family: var(--font-mono);
  font-size: .875em;
  background: var(--off-white);
  border: 1px solid var(--gray-100);
  border-radius: 4px;
  padding: 2px 6px;
}

/* ── Misc ────────────────────────────────────────────────── */
.hr-teal {
  height: 2px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--r3) 100%);
  border: none;
  border-radius: 999px;
}

@media (max-width: 768px) {
  .section     { padding-block: 64px; }
  .section--lg { padding-block: 80px; }
}