/* ============================================================
   THEME — design tokens, reset, typography, layout primitives
   ============================================================ */

:root {
  /* Core neutrals — deep navy ink on a cool paper */
  --ink-900: #0a1628;
  --ink-800: #12233d;
  --ink-700: #1b2f4b;
  --ink-500: #45597a;
  --ink-400: #5a6f8c;
  --ink-200: #c3cedd;
  --ink-100: #e4eaf2;
  --paper:   #f4f7fc;
  --white:   #ffffff;

  /* Accent family — six hues at matched saturation so they sit together
     without shouting. Each service keeps its own colour across the site. */
  --signal-700: #0b4bb0;
  --signal-600: #0f5ed7;
  --signal-500: #1a73e8;
  --signal-400: #3f9bf5;
  --signal-100: #e6f0fe;

  --teal-600:  #0d7f7a;
  --teal-500:  #12a099;
  --teal-100:  #dcf5f3;

  --violet-600: #5b43c9;
  --violet-500: #7059e6;
  --violet-100: #ece8fd;

  --rose-600:  #c23a6b;
  --rose-500:  #e0507f;
  --rose-100:  #fde7ee;

  --amber-600: #9c6208;
  --amber-500: #f0a202;
  --amber-400: #ffb524;
  --amber-100: #fdf1d8;

  --lime-600:  #4a7c16;
  --lime-500:  #66a521;
  --lime-100:  #eaf6da;

  --green-600: #1a7f52;
  --green-100: #e2f4ea;
  --red-600:   #c0362c;
  --red-100:   #fbe9e7;

  /* Gradients */
  --grad-hero: linear-gradient(135deg, #0a1628 0%, #13305e 45%, #0e4a8f 100%);
  --grad-action: linear-gradient(135deg, var(--amber-400), #f08c00);
  --grad-signal: linear-gradient(135deg, var(--signal-500), var(--violet-500));
  --grad-band: linear-gradient(125deg, #0f2547 0%, #12417f 55%, #0d6a86 100%);
  --grad-rule: linear-gradient(90deg, var(--signal-500), var(--teal-500), var(--amber-500), var(--rose-500));

  --line: #dbe4f1;
  --line-strong: #bfcde0;

  /* Type */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 1.85rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
  --step-4:  clamp(2.1rem, 1.7rem + 2vw, 3.4rem);

  /* Space & shape */
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 7vw, 6rem);
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.05), 0 3px 10px rgba(13, 48, 105, 0.06);
  --shadow-md: 0 4px 14px rgba(13, 48, 105, 0.09), 0 14px 40px rgba(13, 48, 105, 0.09);
  --shadow-lift: 0 10px 26px rgba(13, 48, 105, 0.16), 0 26px 64px rgba(13, 48, 105, 0.14);

  --bar-h: 68px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, iframe { max-width: 100%; display: block; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink-900);
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); font-weight: 600; }

p { text-wrap: pretty; }
p, li { max-width: 68ch; }

a { color: var(--signal-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--signal-500); }

:focus-visible {
  outline: 3px solid var(--signal-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Layout ---------- */
.wrap { width: min(1180px, 100% - (var(--gutter) * 2)); margin-inline: auto; }
.wrap-narrow { width: min(760px, 100% - (var(--gutter) * 2)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section-tight { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.section-dark { background: var(--ink-900); color: var(--ink-200); }
.section-dark h2, .section-dark h3 { color: var(--white); }
/* Section tints — the page alternates between paper, white and a soft
   tinted band so long pages never read as one flat sheet. */
.section-alt { background: var(--white); }
.section-tint {
  background: linear-gradient(180deg, #eef4fd 0%, #f4f7fc 100%);
  border-block: 1px solid #e2ebf8;
}
.section-tint-warm {
  background: linear-gradient(180deg, #fff8ec 0%, #fdfaf4 100%);
  border-block: 1px solid #f6e7cc;
}

.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 1.75rem; }

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.lede { font-size: var(--step-1); color: var(--ink-500); line-height: 1.5; }
.muted { color: var(--ink-500); }
.small { font-size: var(--step--1); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }

.section-head { max-width: 640px; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.section-head p { margin-top: 0.75rem; color: var(--ink-500); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 200;
  background: var(--ink-900); color: var(--white); padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm); text-decoration: none;
}
.skip-link:focus { top: 0; color: var(--white); }

/* Reveal on scroll — one quiet entrance, disabled for reduced motion */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* Mobile action bar clearance */
@media (max-width: 720px) {
  body { padding-bottom: 66px; }
}