/* ============================================================
   GXJ Beats — design tokens
   Exact render values from Figma "GXJ Beats" (node 1730:2,
   frame "1440w light") + the Motions Webflow template.
   ============================================================ */

:root {
  /* ---- Fonts (GXJ brand: Aeroko titles / GT Eesti body, see fonts.css) ---- */
  --font: "GT Eesti", "Helvetica Neue", system-ui, sans-serif;
  --font-display: "Aeroko", "Arial Black", system-ui, sans-serif;

  /* ---- Palette ---- */
  --c-bg:       #0f1215;
  --c-bg-deep:  #06080a;   /* footer */
  --c-num:      #222428;   /* numbered step blocks */
  --c-white:    #ffffff;
  --c-muted:    #858585;   /* footer links */
  --c-muted-60: rgba(255, 255, 255, 0.6);
  --c-line:     #4a555f;   /* 0.5px dividers */
  --c-accent:   #92bce1;   /* "RECENT PROJECTS" label */
  --c-overlay:  rgba(22, 26, 25, 0.5);

  /* ---- Type (exact Figma px) ---- */
  --fs-h1: 41.187px; --lh-h1: 51.484px; --ls-h1: -1.5445px;
  --fs-h2: 48px;     --lh-h2: 60px;     --ls-h2: -2px;
  --fs-item: 16px;   --lh-item: 20px;   /* service/step titles, Regular */
  --fs-body: 14px;   --lh-body: 17.5px; /* Light */
  --fs-small: 12px;  --lh-small: 15px;  /* Light */
  --fs-ticker: 10.4px;                  /* .65rem, uppercase, 300 */

  /* ---- Layout ---- */
  --container: 1440px;
  --page-pad: 80px;

  /* ---- Radii ---- */
  --r-media: 16px;
  --r-pill: 100px;
  --r-num: 4px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur: 0.4s;
}

@media screen and (max-width: 991px) {
  :root {
    --page-pad: 40px;
    --fs-h2: 40px; --lh-h2: 50px; --ls-h2: -1.6px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --page-pad: 24px;
    --fs-h1: 32px; --lh-h1: 40px; --ls-h1: -1.2px;
    --fs-h2: 32px; --lh-h2: 42px; --ls-h2: -1.3px;
  }
}

@media screen and (max-width: 479px) {
  :root {
    --page-pad: 20px;
    --fs-h1: 28px; --lh-h1: 36px;
    --fs-h2: 27px; --lh-h2: 36px;
  }
}