@font-face {
  font-family: "Druk Cyr";
  src: url("../fonts/DrukCyr-Bold.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Actay Wide";
  src: url("../fonts/ActayWide-Bold.otf") format("opentype");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

:root {
  --font-display: "Druk Cyr", Impact, "Arial Narrow", sans-serif;
  --font-wide: "Actay Wide", "Arial Black", Arial, sans-serif;
  --font-promo: Gilroy, Inter, Arial, sans-serif;
  --font-button: "Roberto Sans", Arial, sans-serif;

  --color-ink: #06142e;
  --color-surface: #ffffff;
  --color-text-inverse: #ffffff;
  --color-text-strong: #06142e;
  --color-accent-red: #ff143f;
  --color-odd-blue: #164db4;
  --color-odd-sky: #49b5ff;
  --color-border: #000000;
  --color-promo-start: rgba(117, 85, 145, 0.82);
  --color-promo-mid: rgba(255, 20, 63, 0.94);
  --color-promo-end: rgba(255, 20, 63, 0.58);
  --hero-backdrop-gradient: linear-gradient(
    90deg,
    #2c6496 0%,
    #2f6798 28%,
    #122f55 56%,
    #07142e 74%,
    #193f6d 100%
  );

  --site-max-width: 1440px;
  --page-x: clamp(20px, 4.85vw, 82px);
  --hero-aspect: 1440 / 1024;

  --radius-card: 20px;
  --radius-button: 20px;
  --radius-odd: 15px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 0 rgba(6, 20, 46, 0.1);
  --shadow-promo: 0 18px 24px rgba(6, 20, 46, 0.22);

  --duration-fast: 160ms;
  --duration-base: 240ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}