@font-face {
  font-family: "Perfograma";
  src: url("../fonts/Perfograma.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {

  --color-navy: #202759;
  --color-navy-deep: #221f47;
  --color-orange: #ea7224;
  --color-orange-hover: #d4651f;
  --color-nav: #5e7a87;
  --color-cream: #f5f3ef;
  --color-white: #ffffff;
  --color-off-white: #faf9f7;
  --color-gray-100: #e8e6e1;
  --color-gray-300: #b8b4ad;
  --color-gray-500: #6b6b6b;
  --color-black: #1e1e1e;

  --color-bg: var(--color-white);
  --color-bg-soft: var(--color-cream);
  --color-text: var(--color-navy-deep);
  --color-text-strong: var(--color-navy);
  --color-text-inverse: var(--color-white);
  --color-accent: var(--color-orange);
  --color-border: var(--color-gray-100);
  --color-footer-bg: rgba(245, 246, 250, 0.46);
  --color-input-border: #d1d5dc;

  --font-sans: "Inter", system-ui, sans-serif;
  --font-nav: "Open Sans", system-ui, sans-serif;
  --font-display: "Kumbh Sans", sans-serif;
  --font-heading: "Kumbh Sans", sans-serif;
  --font-accent: "Perfograma", "Bebas Neue", sans-serif;
  --font-hero-solid: "Kumbh Sans", sans-serif;
  --font-hero-dotted: "Perfograma", sans-serif;
  --font-script: "Satisfy", cursive;
  --font-hand: "Handlee", cursive;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: clamp(2rem, 3.5vw, 2.75rem);
  --text-4xl: clamp(2.5rem, 4.5vw, 3.75rem);
  --text-hero: clamp(2.25rem, 4vw, 3.75rem);
  --text-section: clamp(2.5rem, 4vw, 3.75rem);
  --leading-tight: 1.12;
  --leading-normal: 1.6;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --container: 1514px;
  --page-width: min(1514px, 100%);
  --page-width-num: 1514;
  --hero-title-w: 575px;
  --hero-body-w: 553px;
  --dot-decor-width: 721px;
  --dot-decor-height: 315px;
  --scope-dot-width: 840px;
  --scope-dot-height: 367px;
  --scope-dot-w: calc(840px * var(--page-width-num) / var(--figma-width));

  --scope-dot-overlap: calc(85px * var(--page-width-num) / var(--figma-width));
  --scope-dot-peek: calc(282px * var(--page-width-num) / var(--figma-width));

  --vision-dot-overlap: calc(138px * var(--page-width-num) / var(--figma-width));
  --vision-dot-peek: calc(202px * var(--page-width-num) / var(--figma-width));

  --blinks-dot-col-step: calc(59px * var(--page-width-num) / var(--figma-width));
  --blinks-dot-w: calc(435px * var(--page-width-num) / var(--figma-width));
  --blinks-dot-shift: calc(405px * var(--page-width-num) / var(--figma-width));
  --blinks-dot-height: 295px;
  --blinks-dot-overlap: calc(177px * var(--page-width-num) / var(--figma-width));
  --blinks-dot-peek: calc(118px * var(--page-width-num) / var(--figma-width));
  --hero-scope-dot-w: calc(640px * var(--page-width-num) / var(--figma-width));
  --hero-scope-dot-overlap: calc(90px * var(--page-width-num) / var(--figma-width));
  --vision-side-dot-w: clamp(
    3.5rem,
    calc(367px * var(--page-width-num) / var(--figma-width)),
    367px
  );
  --vision-video-w: min(
    90vw,
    calc(1566px * var(--page-width-num) / var(--figma-width))
  );
  --vision-stage-w: min(
    100%,
    calc(2300px * var(--page-width-num) / var(--figma-width))
  );
  --vision-side-gap: clamp(0.5rem, calc(40px * var(--page-width-num) / var(--figma-width)), 40px);
  --vision-side-dot-offset: clamp(0.5rem, 2.5vw, 1.5rem);
  --vision-stage-pad: clamp(0.5rem, 2vw, 1rem);
  --figma-width: 1514;
  --t-scale: calc(var(--page-width-num) / var(--figma-width));
  --hero-h: calc(982px * var(--page-width-num) / var(--figma-width));
  --testimonial-card-size: calc(456px * var(--page-width-num) / var(--figma-width));
  --testimonial-card-gap: calc(29px * var(--page-width-num) / var(--figma-width));
  --testimonial-viewport-w: calc(3 * var(--testimonial-card-size) + 2 * var(--testimonial-card-gap));
  --blink-card-w: calc(440.53px * var(--page-width-num) / var(--figma-width));
  --blinks-carousel-gap: calc(34.81px * var(--page-width-num) / var(--figma-width));
  --blinks-carousel-viewport-w: calc(3 * var(--blink-card-w) + 2 * var(--blinks-carousel-gap));
  --blink-single-pad: clamp(1rem, 2vw, 28px);
  --scope-panel-active: calc(537px * var(--page-width-num) / var(--figma-width));
  --scope-panel-inactive: calc(325px * var(--page-width-num) / var(--figma-width));
  --scope-panel-narrow: calc(315px * var(--page-width-num) / var(--figma-width));
  --scope-dot-left: calc(874px * var(--page-width-num) / var(--figma-width));
  --partner-cell-w: calc(197.44px * var(--page-width-num) / var(--figma-width));
  --partner-cell-h: calc(127.99px * var(--page-width-num) / var(--figma-width));
  --partners-marquee-gap: 42px;
  --partners-marquee-speed: 35;
  --partners-marquee-speed-hover: 12;
  --header-h: 53px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 8px 32px rgba(32, 39, 89, 0.08);
  --transition: 220ms ease;
}

@media (max-width: 1514px) {
  :root {
    --page-width-num: 100vw;
  }
}

@media (max-width: 900px) {
  :root {
    --vision-side-dot-w: clamp(1.35rem, 9vw, 3.25rem);
    --vision-side-gap: clamp(0.3rem, 1.5vw, 0.75rem);
    --page-width-num: 900;
    --scope-dot-w: min(100vw, 840px);
    --scope-dot-overlap: calc(85px * 900 / var(--figma-width));
    --scope-dot-peek: calc(282px * 900 / var(--figma-width));
    --vision-dot-overlap: calc(138px * 900 / var(--figma-width));
    --vision-dot-peek: calc(202px * 900 / var(--figma-width));
    --blinks-dot-overlap: calc(177px * 900 / var(--figma-width));
    --blinks-dot-peek: calc(118px * 900 / var(--figma-width));
    --testimonial-card-size: min(calc(100vw - 2rem), 400px);
    --testimonial-card-gap: 1rem;
    --blink-card-w: min(calc(100vw - 2.5rem), 400px);
    --blinks-carousel-gap: 1.25rem;
    --blinks-carousel-viewport-w: calc(2 * var(--blink-card-w) + var(--blinks-carousel-gap));
    --scope-panel-active: 100%;
    --scope-panel-inactive: 100%;
    --scope-panel-narrow: 100%;
    --partner-cell-w: min(calc((100vw - 3rem) / 2), 200px);
    --hero-h: auto;
    --splash-portrait-w: min(calc(100vw - 1.5rem), 420px);
  }
}

@media (max-width: 480px) {
  :root {
    --vision-side-dot-w: clamp(1.35rem, 9vw, 2rem);
    --testimonial-card-size: min(calc(100vw - 1.5rem), 380px);
    --partner-cell-w: min(calc(100vw - 2rem), 280px);
    --blinks-carousel-viewport-w: var(--blink-card-w);
    --splash-portrait-w: min(calc(100vw - 1.25rem), 380px);
  }
}