/* Look 1, plain modern variant (Apple, Persona, Things), set up for Pinch Motion:
   chunky Bricolage Grotesque headlines at 600, Geist body, a cool soft light page,
   cobalt blue as the one accent. Contrast checked: ink 15.4:1, body gray 6.9:1, blue text 4.75:1,
   white on blue 5.2:1, all on the page color. */
:root {
  --bg: #f4f5f8; --panel: #ebedf3; --surface: #ffffff;
  --ink: #221b26; --ink-2: #57525e; --ink-3: #625d69;
  --line: rgba(34, 27, 38, 0.1);
  --accent: #2d5bff; --accent-light: #5c80ff; --accent-deep: #1e3fc4;
  --accent-soft: rgba(45, 91, 255, 0.1);
  --btn: #221b26; --btn-top: #2e2533; --on-btn: #ffffff;
  --font-display: "Bricolage Grotesque", ui-sans-serif, -apple-system, sans-serif;
  --font-body: "Geist", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --display-weight: 600; --display-track: -0.025em; --display-lh: 1.02; --display-opsz: 96;
  --hero: clamp(2.375rem, 1.3rem + 4.4vw, 4.5rem);   /* 38px on a phone to 72px on desktop */
  --h2: clamp(2rem, 1.2rem + 3vw, 3.5rem);          /* 32px to 56px */
  --h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.6rem);
  --gap-section: clamp(4.5rem, 3rem + 4vw, 6.25rem); /* 72px on a phone to 100px on desktop */
  --r-card: 28px; --dots: rgba(34, 27, 38, 0.06);
  --nav-bg: rgba(244, 245, 248, 0.78);
}