:root {
  /* color */
  --green: #00E013;
  --black: #000000;
  --white: #FFFFFF;
  --grey: #999999;
  --white-30: rgba(255, 255, 255, 0.3);
  --offwhite: #F5F5F3;

  /* type — fluid, calibrated to 1280px reference viewport */
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-hero: clamp(40px, 5.2vw, 96px);       /* hero h1 */
  --fs-h2: clamp(32px, 3.89vw, 72px);        /* section headlines */
  --fs-body: clamp(15px, 1.42vw, 24px);      /* right-column paragraph */
  --fs-cta: clamp(12px, 0.97vw, 16px);       /* section CTA pills */
  --fs-nav: clamp(11px, 0.83vw, 14px);       /* nav pills */
  --fs-fine: 12px;                            /* legal/fine print */
  --lh-tight: 0.95;
  --ls-tight: -0.03em;

  /* geometry @1280 reference */
  --nav-margin: 3.1vw;          /* ~40px */
  --logo-size: 4.1vw;           /* ~52px */
  --logo-radius: 1.1vw;         /* ~14px */
  --pill-h: 3.5vw;              /* ~44.7px */
  --phone-w: 31.25vw;           /* 400px */
  --phone-h: 67.7vw;            /* 866px  (2.165 aspect) */
  --phone-radius: 4.2vw;        /* ~54px */
  --card-w: 17vw;               /* 218px */
  --card-h: 27vw;               /* 346px */
  --card-radius: 1.25vw;        /* 16px */
  --stat-radius: 24px;
  --content-margin: 2.2vw;      /* left/right column outer margin */

  /* motion */
  --lerp: 0.1;                  /* engine smoothing factor per frame */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --enter-shift: 24px;          /* section text entrance slide */
}