:root {
  

  --container: 1480px;
  --container-padding: 32px;

  

  --color-orange: #f45b2a;
  --color-orange-dark: #df4b1e;

  --color-yellow: #ffb43c;
  --color-yellow-soft: #ffc85f;

  --color-green: #3fbb7a;
  --color-green-dark: #31a96a;

  --color-turquoise: #4fc1c3;
  --color-turquoise-dark: #3aaeb1;

  --color-cyan: #35cad4;

  --color-lime: #79d93f;

  

  --color-black: #292626;
  --color-graphite: #302d2d;
  --color-graphite-soft: #3a3636;

  --color-text: #302d2d;
  --color-text-soft: #696565;
  --color-text-muted: #8b8787;

  --color-white: #ffffff;

  --color-surface: #ffffff;
  --color-surface-alt: #f5f8f9;
  --color-surface-soft: #eef3f5;

  --color-border: #e5ebed;
  --color-border-dark: rgba(48, 45, 45, 0.16);

  

  --color-primary: var(--color-turquoise);

  --color-success: var(--color-green);

  --color-error: #df4c42;

  --color-focus: rgba(79, 193, 195, 0.28);

  

  --hero-yellow: #ffb33b;
  --hero-green: #3fba79;
  --hero-turquoise: #4dc0c1;
  --hero-orange: #f45a25;
  --hero-light: #f4f7f8;

  

  --font-display:
    "Manrope",
    "Segoe UI",
    Arial,
    sans-serif;

  --font-body:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  

  --font-xs: 12px;
  --font-sm: 14px;
  --font-base: 16px;
  --font-md: 18px;
  --font-lg: 20px;
  --font-xl: 24px;

  --font-h6: 18px;
  --font-h5: 21px;
  --font-h4: 26px;
  --font-h3: 32px;
  --font-h2: clamp(42px, 4vw, 62px);
  --font-h1: clamp(52px, 5vw, 78px);

  

  --line-tight: 1.05;
  --line-heading: 1.12;
  --line-body: 1.65;
  --line-copy: 1.75;

  

  --tracking-tight: -0.045em;
  --tracking-heading: -0.032em;
  --tracking-body: -0.01em;
  --tracking-button: -0.012em;

  

  --section-space-xl: 150px;
  --section-space-lg: 120px;
  --section-space-md: 92px;
  --section-space-sm: 68px;

  

  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 88px;
  --space-5xl: 120px;

  

  --header-height: 88px;

  --header-background:
    rgba(255, 255, 255, 0.96);

  --header-border:
    rgba(48, 45, 45, 0.08);

  --header-z: 1000;

  

  --button-height: 60px;
  --button-height-small: 50px;

  --button-padding:
    0 30px;

  --button-radius: 999px;

  --button-font-size: 14px;

  --button-background:
    var(--color-graphite);

  --button-color:
    var(--color-white);

  

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --radius-2xl: 46px;
  --radius-pill: 999px;

  

  --shadow-xs:
    0 2px 8px rgba(31, 38, 40, 0.05);

  --shadow-sm:
    0 8px 24px rgba(31, 38, 40, 0.07);

  --shadow-md:
    0 16px 40px rgba(31, 38, 40, 0.09);

  --shadow-lg:
    0 26px 70px rgba(31, 38, 40, 0.11);

  

  --transition-fast:
    180ms ease;

  --transition-base:
    320ms cubic-bezier(0.22, 1, 0.36, 1);

  --transition-slow:
    620ms cubic-bezier(0.22, 1, 0.36, 1);

  --transition-reveal:
    760ms cubic-bezier(0.16, 1, 0.3, 1);

  

  --swiper-theme-color:
    var(--color-turquoise);

  --swiper-navigation-size: 26px;

  

  --input-height: 58px;

  --input-radius: 14px;

  --input-background:
    var(--color-white);

  --input-border:
    #dde5e7;

  --input-border-focus:
    var(--color-turquoise);

  

  --cookie-width: 620px;

  --cookie-radius: 18px;

  --cookie-offset: 24px;

  --cookie-z: 1200;

  

  --z-base: 1;
  --z-section: 2;
  --z-sticky: 50;
  --z-header: 1000;
  --z-overlay: 1100;
  --z-cookie: 1200;
  --z-modal: 1300;

  

  --copy-narrow: 560px;
  --copy-medium: 720px;
  --copy-wide: 920px;

  

  --grid-gap: 24px;
  --grid-gap-large: 32px;

  

  --icon-stroke: 1.8;
  --icon-size-sm: 18px;
  --icon-size-md: 24px;
  --icon-size-lg: 32px;

  

  --marquee-gap: 46px;
  --marquee-duration: 26s;

  

  --reveal-distance: 18px;
}

@media (max-width: 1544px) {
  :root {
    --container-padding: 28px;

    --section-space-xl: 132px;
    --section-space-lg: 108px;
  }
}

@media (max-width: 1180px) {
  :root {
    --header-height: 78px;

    --container-padding: 24px;

    --section-space-xl: 112px;
    --section-space-lg: 94px;
    --section-space-md: 76px;

    --font-h1: clamp(46px, 7vw, 66px);
    --font-h2: clamp(38px, 5.5vw, 54px);

    --grid-gap-large: 24px;
  }
}

@media (max-width: 900px) {
  :root {
    --container-padding: 22px;

    --section-space-xl: 94px;
    --section-space-lg: 82px;
    --section-space-md: 68px;
    --section-space-sm: 56px;

    --font-h1: clamp(42px, 8vw, 58px);
    --font-h2: clamp(35px, 6vw, 48px);

    --button-height: 56px;

    --cookie-width:
      min(620px, calc(100vw - 32px));

    --cookie-offset: 16px;
  }
}

@media (max-width: 640px) {
  :root {
    --header-height: 72px;

    --container-padding: 18px;

    --section-space-xl: 78px;
    --section-space-lg: 70px;
    --section-space-md: 60px;
    --section-space-sm: 50px;

    --font-base: 15px;
    --font-md: 17px;
    --font-lg: 19px;

    --font-h4: 24px;
    --font-h3: 29px;

    --font-h2:
      clamp(32px, 10vw, 42px);

    --font-h1:
      clamp(38px, 12vw, 50px);

    --line-heading: 1.1;

    --button-height: 54px;
    --button-padding: 0 24px;

    --grid-gap: 18px;
    --grid-gap-large: 20px;

    --radius-lg: 22px;
    --radius-xl: 28px;
    --radius-2xl: 34px;

    --marquee-gap: 30px;

    --reveal-distance: 12px;
  }
}

@media (max-width: 390px) {
  :root {
    --container-padding: 16px;

    --font-h1:
      clamp(36px, 11.5vw, 44px);

    --font-h2:
      clamp(30px, 9.5vw, 38px);

    --button-padding:
      0 21px;
  }
}