/* ==========================================================================
   ES Web Design — global.css
   Fluid scaling system (from website-base-main MASTER) + ES design tokens
   ========================================================================== */

/* Desktop */
:root {
  --size-unit: 16;
  --size-container-ideal: 1440;
  --size-container-min: 992px;
  --size-container-max: 1440px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
  --container-padding: 3.25em;
}
@media screen and (max-width: 991px) {
  :root { --size-container-ideal: 834; --size-container-min: 768px; --size-container-max: 991px; --container-padding: 1.5em; }
}
@media screen and (max-width: 767px) {
  :root { --size-container-ideal: 550; --size-container-min: 480px; --size-container-max: 767px; --container-padding: 1em; }
}
@media screen and (max-width: 479px) {
  :root { --size-container-ideal: 390; --size-container-min: 320px; --size-container-max: 479px; --container-padding: 1em; }
}

/* ==========================================================================
   Design Tokens
   ========================================================================== */
:root {
  /* Ground and surfaces */
  --color-canvas: #F4F6F9;
  --color-surface: #FFFFFF;
  --color-ink: #14171B;
  --color-ink-raised: #1D2127;
  --color-ink-line: rgba(255,255,255,.10);

  /* Text */
  --color-text-primary: #14171B;
  --color-text-secondary: #67727F;
  --color-text-white: #FFFFFF;
  --color-text-on-dark: #A8B3C0;

  /* Brand */
  --color-accent: #00ABFF;
  --color-accent-deep: #0077C8;
  --color-accent-soft: rgba(0,171,255,.10);
  --color-accent-line: rgba(0,171,255,.34);

  /* Semantic */
  --color-good: #16A34A;
  --color-good-soft: rgba(22,163,74,.10);
  --color-bad: #E5484D;
  --color-bad-soft: rgba(229,72,77,.10);

  --color-border: #E3E8ED;
  --color-border-strong: #D2DAE2;

  /* Typography */
  --font-heading: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-label: "DotStudio", "DotGothic16", ui-monospace, Menlo, monospace;
  --font-hand: "Caveat", "Segoe Script", cursive;

  /* Spacing */
  --spacing-xs: .25em;
  --spacing-sm: .5em;
  --spacing-md: 1em;
  --spacing-lg: 1.5em;
  --spacing-xl: 2em;
  --spacing-2xl: 2.5em;
  --spacing-3xl: 3em;
  --spacing-4xl: 3.25em;
  --spacing-5xl: 4em;
  --spacing-section: 3.75em;

  /* Radius */
  --radius-sm: .25em;
  --radius-md: .625em;
  --radius-lg: 1em;
  --radius-xl: 1.75em;
  --radius-pill: 3em;

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* Elevation */
  --shadow-card: 0 1px 2px rgba(20,23,27,.04), 0 12px 32px -18px rgba(20,23,27,.22);
  --shadow-lift: 0 2px 4px rgba(20,23,27,.05), 0 28px 60px -28px rgba(20,23,27,.32);
}

@font-face {
  font-family: "DotStudio";
  src: url("fonts/DotStudio-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-var.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-var-ext.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-400-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-500-ext.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-600-ext.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Caveat";
  src: url("fonts/caveat-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+20, U+45, U+52, U+61, U+63-66, U+69, U+6c-6f, U+73-75;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }

body {
  font-family: var(--font-body);
  font-size: var(--size-font);
  color: var(--color-text-secondary);
  background-color: var(--color-canvas);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-text-primary); line-height: 1.08; overflow-wrap: break-word; }
p { overflow-wrap: break-word; }

/* ==========================================================================
   Base utilities
   ========================================================================== */
.container { width: 100%; max-width: var(--size-container); margin-inline: auto; padding-inline: var(--container-padding); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }

.section-label {
  font-family: var(--font-label);
  font-size: 1em;
  line-height: 1.5;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  width: fit-content; min-height: 3.25em; padding-inline: 1.65em;
  font-family: var(--font-body); font-size: 1em; font-weight: 600; line-height: 1.5;
  border: 1px solid transparent; border-radius: var(--radius-md);
  cursor: pointer; white-space: nowrap;
  transition: transform var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.btn--primary { background-color: var(--color-accent); color: var(--color-text-white); box-shadow: 0 10px 24px -12px rgba(0,171,255,.85); }
.btn--primary:hover { background-color: #1CB8FF; transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(0,171,255,.9); }
.btn--dark { background-color: var(--color-ink); color: var(--color-text-white); }
.btn--dark:hover { background-color: #23282F; transform: translateY(-2px); }
.btn--ghost { border-color: var(--color-border-strong); color: var(--color-text-primary); background: transparent; }
.btn--ghost:hover { border-color: var(--color-ink); transform: translateY(-2px); }
.btn--on-dark { border-color: rgba(255,255,255,.22); color: #fff; background: transparent; }
.btn--on-dark:hover { border-color: #fff; transform: translateY(-2px); }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); }
:focus:not(:focus-visible) { outline: none; }