/* ============================================================
   base.css — design tokens, typography (refined / Apple-inspired)
   ============================================================ */

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

:root {
  /* Color — Apple-style neutral system + single blue accent */
  --bg:        #ffffff;
  --bg-alt:    #f5f5f7;
  --bg-soft:   #f5f5f7;
  --ink:       #1d1d1f;
  --ink-soft:  #6e6e73;
  --ink-muted: #86868b;
  --border:    #e3e3e6;
  --border-strong: #d2d2d7;
  --accent:    #0071e3;
  --accent-ink:#0077ed;
  --accent-soft:#f0f6ff;

  /* Type — one family, many weights (SF Pro on Apple devices) */
  --font-sans:    "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --font-display: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Shape & depth — generous radii, soft diffuse shadows */
  --radius:     22px;
  --radius-sm:  14px;
  --radius-pill:980px;
  --maxw:       1080px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.04), 0 6px 16px rgba(0,0,0,.04);
  --shadow-md:  0 10px 40px rgba(0,0,0,.10), 0 3px 10px rgba(0,0,0,.04);
  --ease:       cubic-bezier(.22,1,.36,1);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  color: var(--ink-soft);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.07;
  font-weight: 600;
  letter-spacing: -0.035em;
}

h1 { font-size: clamp(2.9rem, 7vw, 5rem); font-weight: 600; }
h2 { font-size: clamp(1.9rem, 4.2vw, 2.85rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.02em; }

p { color: var(--ink-soft); }

a { color: var(--accent); text-decoration: none; }

img, svg { display: block; max-width: 100%; }

ul { list-style: none; padding: 0; }

::selection { background: #b9dcff; color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.mono { font-family: var(--font-mono); }

/* Section eyebrow — small, refined, uppercase label */
.eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
}