:root{
    /* layout */
    --max: 1000px;
    --pad: clamp(16px, 3vmax, 48px);
    --gap: clamp(12px, 2vmax, 32px);
  
    /* type */
    --fs-900: clamp(40px, 6vw, 72px);
    --fs-800: clamp(32px, 4.5vw, 56px);
    --fs-700: clamp(26px, 3.5vw, 40px);
    --fs-600: clamp(22px, 2.6vw, 28px);
    --fs-500: 20px;
    --fs-400: 18px;
    --fs-300: 16px;
  
    /* theme (light default) */
    --bg:#ffffff; --text:#111111; --muted:#666; --surface:#f6f7f8; --line:#e6e7ea;
    /* accent defaults (swap later) */
    --accent:#cc143c; --accent-ink:#ffffff;
  }
  [data-theme="dark"]{
    --bg:#0c0c0d; --text:#eaeaea; --muted:#a7a7a7; --surface:#151517; --line:#2a2a2f;
  }
  [data-accent="blue"]{ --accent:#2563eb; --accent-ink:#fff; }
  [data-accent="green"]{ --accent:#16a34a; --accent-ink:#fff; }
  [data-accent="amber"]{ --accent:#f59e0b; --accent-ink:#151515; }
  [data-accent="crimson"]{ --accent:#cc143c; --accent-ink:#fff; }
  
  /* base */
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size:var(--fs-300); line-height:1.5; color:var(--text); background:var(--bg);
    scroll-snap-type: y mandatory; overflow-y: scroll;
  }
  img,svg,video{ max-width:100%; height:auto; display:block; }
  a{ color:inherit; text-decoration-thickness:.08em; text-underline-offset:.18em; }
  hr{ border:0; height:1px; background:var(--line); margin:var(--gap) 0; }
  
  /* layout helpers */
  .container{ width:min(100% - 2*var(--pad), var(--max)); margin-inline:auto; }
  .stack > * + *{ margin-top:var(--gap); }
  .cluster{ display:flex; flex-wrap:wrap; gap:var(--gap); align-items:center; }
  .grid{ display:grid; gap:var(--gap); }
  @media (min-width:800px){ .grid.two{ grid-template-columns:1fr 1fr; } }
  
  /* headings + text */
  .eyebrow{ text-transform:uppercase; letter-spacing:.08em; font-size:.8em; color:var(--muted); }
  h1{ font-size:var(--fs-900); line-height:1.05; margin:0 0 .4em; }
  h2{ font-size:var(--fs-800); line-height:1.1;  margin:0 0 .4em; }
  h3{ font-size:var(--fs-700); line-height:1.15; margin:0 0 .4em; }
  p{ margin:0; }
  
  /* buttons */
  .btn{ display:inline-flex; align-items:center; gap:.5em; padding:.7em 1em; border:1px solid var(--text);
    background:transparent; color:var(--text); text-decoration:none; border-radius:8px; cursor:pointer; }
  .btn--accent{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
  .btn--ghost{ border-color:var(--line); color:var(--text); }
  
  /* sections primitive */
  [data-section]{ padding-block: clamp(48px, 12vmin, 140px); position:relative; scroll-snap-align:start; }
  [data-section] .lead{ font-size:var(--fs-500); color:var(--muted); max-width:65ch; }
  [data-section][data-align="center"]{ text-align:center; }
  [data-section][data-pad="none"]{ padding-block:0; }
  [data-section][data-pad="sm"]{ padding-block: clamp(28px, 6vmin, 64px); }
  [data-section][data-variant="soft"]{ background:var(--surface); }
  [data-section][data-variant="dark"]{ background:#111; color:#fff; }
  [data-section][data-variant="dark"] .lead{ color:#cfcfcf; }
  
  /* progress bar */
  .progress{ position:fixed; left:0; top:0; height:4px; width:0; background:var(--accent); z-index:20; }