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

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

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

:root {
  color-scheme: light dark;
  
  --font-family-base: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --color-accent: #300cff;
  --color-accent-strong: #4c39fc;
  --color-accent-hover: #2600d9;
  --color-action-primary: #262626;
  --color-action-primary-hover: #111111;
  --color-action-on-primary: #ffffff;
  --color-action-secondary: #efeff5;
  --color-action-secondary-hover: #262626;
  --color-action-on-secondary: #262626;
  --color-action-border: #262626;
  --color-action-focus: #262626;
  --color-success: #38dd25;
  --color-white: #ffffff;

  --color-page: #f5f6f9;
  --color-surface: #ffffff;
  --color-surface-soft: rgba(255, 255, 255, 0.72);
  --color-surface-strong: #262626;
  --color-surface-hover: #e7e8ee;
  --color-surface-strong-hover: #181818;
  --color-media-surface: #efeff5;
  --color-text: #262626;
  --color-text-muted: rgba(38, 38, 38, 0.68);
  --color-border: rgba(38, 38, 38, 0.1);
  --color-overlay: rgba(12, 12, 18, 0.32);

  --color-hero-bg: #150863;
  --color-hero-gradient-start: #1a145e;
  --color-hero-gradient-mid: #2b0bed;
  --color-hero-gradient-end: #10103c;
  --color-hero-radial-core: rgba(64, 18, 255, 0.96);
  --color-hero-radial-mid: rgba(41, 13, 202, 0.84);
  --color-hero-radial-edge: rgba(20, 8, 91, 0);
  --color-hero-bottom-shade: rgba(7, 5, 45, 0.72);
  --color-hero-side-shade: rgba(17, 9, 71, 0.36);
  --color-hero-text: #ffffff;
  --color-hero-text-muted: rgba(255, 255, 255, 0.76);
  --color-hero-chip: rgba(255, 255, 255, 0.14);
  --color-hero-glow: rgba(48, 12, 255, 0.72);
  --color-mobile-tabs: rgba(245, 246, 249, 0.72);

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-xl: clamp(24px, 2.1vw, 40px);
  --radius-pill: 999px;

  --container-max: 1760px;
  --container-padding: clamp(12px, 4.17vw, 80px);
  --grid-columns: repeat(6, minmax(0, 1fr));
  --grid-gutter: clamp(16px, 2.083vw, 40px);
  --header-padding-block: clamp(12px, 2vw, 32px) clamp(14px, 1.4vw, 26px);
  --header-gap: clamp(16px, 2.1vw, 40px);
  --header-nav-gap: clamp(6px, 0.625vw, 12px);
  --header-action-gap: 12px;
  --header-group-gap: clamp(14px, 1.56vw, 30px);
  --header-control-height: clamp(42px, 2.92vw, 56px);
  --header-control-padding-x: clamp(10px, 0.833vw, 16px);
  --header-link-padding-x: clamp(18px, 1.25vw, 24px);
  --header-action-padding-x: clamp(24px, 1.8vw, 36px);
  --header-language-width: clamp(86px, 5.2vw, 100px);
  --brand-logo-height: clamp(36px, 2.5vw, 48px);
  --brand-logo-mobile-height: clamp(32px, 8.7vw, 38px);
  --mobile-header-control-size: clamp(46px, 8.6vw, 50px);
  --mobile-menu-duration: 260ms;
  --mobile-menu-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --motion-duration-fast: 160ms;
  --motion-duration-base: 240ms;
  --motion-duration-reveal: 460ms;
  --motion-duration-case-hover: 360ms;
  --motion-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-case-hover: cubic-bezier(0.2, 0.75, 0.25, 1);
  --motion-distance-sm: 10px;
  --motion-distance-md: 14px;
  --motion-scale-case-media: 1.11;
  --motion-marquee-duration: 50s;
  --opacity-brand-muted: 0.42;
  --opacity-brand-active: 1;
  --shadow-case-card: 0 7px 20px rgba(70, 78, 96, 0.012), 0 1px 3px rgba(70, 78, 96, 0.008);

  --space-1: clamp(4px, 0.35vw, 8px);
  --space-2: clamp(8px, 0.65vw, 12px);
  --space-3: clamp(12px, 0.95vw, 18px);
  --space-4: clamp(16px, 1.25vw, 24px);
  --space-5: clamp(20px, 1.7vw, 32px);
  --space-6: clamp(28px, 2.2vw, 42px);
  --space-7: clamp(36px, 3vw, 58px);
  --space-8: clamp(44px, 4vw, 76px);
  --space-9: clamp(56px, 5.2vw, 100px);

  --distance-section: clamp(90px, calc(60.86px + 7.25vw), 200px);
  --distance-section-compact: clamp(40px, calc(33.65px + 1.59vw), 64px);
  --distance-heading-to-content: clamp(48px, calc(34.22px + 3.43vw), 100px);
  --distance-row: 40px;
  --distance-inner-bottom: clamp(44px, calc(29.17px + 3.68vw), 100px);

  --layout-section-gap: var(--distance-section);
  --layout-section-gap-compact: var(--distance-section-compact);
  --layout-heading-gap: var(--distance-heading-to-content);
  --layout-content-gap: var(--grid-gutter);
  --layout-row-gap: var(--distance-row);
  --layout-inner-bottom: var(--distance-inner-bottom);
  --layout-contact-content-gap: var(--distance-section);
  --layout-contact-footer-gap: var(--distance-section);
  --contact-footer-height: 36px;
  --contact-watermark-font-size: clamp(44px, 13.7vw, 300px);
  --contact-stack-gap: clamp(32px, 3.2vw, 56px);
  --contact-body-gap: clamp(24px, 2vw, 40px);
  --contact-cta-gap: clamp(16px, 1.45vw, 28px);
  --contact-cta-gap-stacked: var(--distance-row);
  --chip-gap: clamp(12px, 0.75vw, 16px);
  --chip-height: 32px;
  --chip-padding-x: 14px;
  --chip-radius: var(--radius-sm);
  --button-gap: var(--space-1);
  --button-padding-y: 10px;
  --button-padding-x: 16px;
  --button-radius: var(--radius-sm);
  --contact-link-gap: clamp(8px, 0.625vw, 12px);
  --contact-link-icon-gap: 0.32em;
  --contact-link-min-height: clamp(44px, 3vw, 56px);
  --contact-link-padding-y: var(--button-padding-y);
  --contact-link-padding-x: clamp(18px, 1.25vw, 24px);
  --video-play-size: clamp(48px, 3.75vw, 64px);
  --video-play-icon-width: 0.36em;
  --video-play-icon-height: 0.48em;
  --video-close-bg: rgba(255, 255, 255, 0.12);
  --video-close-bg-hover: var(--color-white);
  --video-close-bg-active: rgba(255, 255, 255, 0.82);
  --icon-size-inline: 0.72em;
  --icon-size-arrow-down: 0.7em;
  --icon-size-arrow-up-width: 0.64em;
  --icon-size-arrow-up-height: 0.82em;

  --type-heading-xl: clamp(2.5625rem, calc(2.177rem + 1.936vw), 4.5rem);
  --type-heading-lg: clamp(2rem, calc(1.851rem + 0.75vw), 2.75rem);
  --type-heading-md: clamp(1.5rem, calc(1.4rem + 0.5vw), 2rem);
  --type-heading-sm: clamp(1.25rem, calc(1.2rem + 0.25vw), 1.5rem);
  --type-heading-xs: clamp(1rem, calc(0.95rem + 0.25vw), 1.25rem);
  --type-heading-xxs: clamp(0.875rem, calc(0.85rem + 0.125vw), 1rem);
  --type-text-lg: clamp(1rem, calc(0.95rem + 0.25vw), 1.25rem);
  --type-text-sm: clamp(0.8125rem, calc(0.775rem + 0.187vw), 1rem);
  --type-text-xs: clamp(0.71875rem, calc(0.7rem + 0.0625vw), 0.75rem);
  --font-size-chip: clamp(0.8125rem, calc(0.775rem + 0.187vw), 1rem);
  --font-size-ui-24: var(--type-heading-sm);

  --font-size-body: var(--type-text-lg);
  --font-size-nav: var(--type-heading-md);
  --font-size-header-nav: var(--type-heading-sm);
  --font-size-h1: var(--type-heading-xl);
  --font-size-h2: var(--type-heading-xl);
  --font-size-h3: var(--type-heading-lg);
  --font-size-h4: var(--type-heading-md);
  --font-size-h5: var(--type-heading-sm);
  --font-size-h6: var(--type-heading-xs);
  --font-size-hero-copy: var(--type-heading-sm);
  --font-size-content-copy: var(--type-text-lg);
  --font-size-section-subtitle: 1rem;
  --font-size-case-contents: 1rem;
  --font-size-case-contents-label: 0.625rem;
  --font-size-case-contents-title: 1.125rem;
  --font-size-about-copy: var(--font-size-content-copy);
  --font-size-small: var(--type-text-sm);
  --font-size-logo-caption: var(--type-text-xs);
  --font-size-language-menu: var(--font-size-header-nav);
  --font-size-hero-eyebrow: var(--type-text-lg);
  --font-size-hero-badge: var(--type-text-sm);
  --font-size-marquee: var(--font-size-nav);
  --font-size-tabs: var(--type-heading-md);
  --font-size-mobile-menu-title: var(--type-heading-sm);
  --font-size-mobile-menu-link: var(--type-heading-md);
  --font-size-mobile-menu-label: var(--type-text-sm);
  --font-size-mobile-menu-footer: var(--type-heading-md);
  --font-size-mobile-cv: var(--font-size-nav);
  --font-size-case-title: var(--type-heading-xl);
  --font-size-case-copy: var(--font-size-hero-copy);
  --font-size-case-chip: var(--font-size-chip);
  --font-size-case-stat-label: var(--font-size-small);
  --font-size-case-stat-value: var(--type-heading-lg);
  --font-size-case-button: var(--type-heading-md);
  --font-size-contact-cta: var(--font-size-ui-24);
  --font-size-contact-link: var(--font-size-ui-24);

  --line-height-tight: 1.05;
  --line-height-heading: 1.08;
  --line-height-body: 1.4;
  --line-height-loose: 1.55;
  --line-height-compact: 1;
  --line-height-hero-title: 1.05;
  --line-height-hero-copy: 1.5;
  --line-height-hero-eyebrow: 1.5;

  --letter-spacing-hero-title: -0.02em;
  --letter-spacing-heading: 0;

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

  --case-gap: var(--grid-gutter);
  --case-radius: clamp(24px, 2.1vw, 40px);
  --case-padding: clamp(24px, 2.35vw, 48px);
  --case-height: 800px;
  --case-height-tablet: clamp(680px, calc(630.77px + 4.81vw), 700px);
  --case-action-gap: 30px;
  --case-media-content-gap: var(--space-5);
  --case-media-inner-padding: clamp(16px, 2.5vw, 30px);
  --case-content-padding-mobile: 20px;
  --case-button-height: clamp(56px, 3.75vw, 72px);
  --case-stats-height: 105px;
  --case-stat-gap: var(--space-1);
  --case-stat-padding-block: clamp(16px, 1.15vw, 22px);
  --case-stat-padding-inline: clamp(20px, 1.85vw, 36px);
  --case-stat-divider-inset: 22px;

  --carousel-pagination-gap: 8px;
  --carousel-pagination-padding-block: 7px;
  --carousel-pagination-padding-inline: 9px;
  --carousel-dot-size: 8px;
  --carousel-dot-active-size: 22px;

  --case-light-bg: #dfe8e1;
  --case-light-title: #262626;
  --case-light-copy: #262626;
  --case-light-chip-bg: rgba(38, 38, 38, 0.06);
  --case-light-chip-text: #262626;
  --case-light-panel-bg: rgba(38, 38, 38, 0.06);
  --case-light-panel-border: rgba(38, 38, 38, 0.12);

  --case-dark-bg: #111713;
  --case-dark-title: #ffffff;
  --case-dark-copy: #ffffff;
  --case-dark-chip-bg: rgba(255, 255, 255, 0.08);
  --case-dark-chip-text: #ffffff;
  --case-dark-panel-bg: rgba(255, 255, 255, 0.08);
  --case-dark-panel-border: rgba(255, 255, 255, 0.16);

  --case-warm-bg: #ebe2d4;
  --case-warm-title: #262626;
  --case-warm-copy: #262626;
  --case-warm-chip-bg: rgba(38, 38, 38, 0.07);
  --case-warm-chip-text: #262626;
  --case-warm-panel-bg: rgba(38, 38, 38, 0.07);
  --case-warm-panel-border: rgba(38, 38, 38, 0.13);

  --case-blue-bg: #35468d;
  --case-blue-title: #ffffff;
  --case-blue-copy: #ffffff;
  --case-blue-chip-bg: rgba(255, 255, 255, 0.12);
  --case-blue-chip-text: #ffffff;
  --case-blue-panel-bg: rgba(255, 255, 255, 0.12);
  --case-blue-panel-border: rgba(255, 255, 255, 0.2);
}

@media (max-width: 1199.98px) {
  :root {
    --case-stats-height: 80px;
    --case-stat-gap: 4px;
    --case-stat-padding-block: 12px;
    --case-stat-padding-inline: clamp(8px, 2.5vw, 16px);
    --case-stat-divider-inset: 14px;
    --font-size-case-stat-label: 0.8125rem;
    --font-size-case-stat-value: clamp(1.5rem, 6.4vw, 2rem);
  }
}

@media (max-width: 767px) {
  :root {
    --motion-marquee-duration: 42s;
    --contact-footer-height: 72px;
    --contact-watermark-font-size: clamp(44px, 13.7vw, 116px);
    --case-action-gap: 12px;
    --case-media-content-gap: 28px;
    --carousel-pagination-gap: 7px;
    --carousel-pagination-padding-block: 6px;
    --carousel-pagination-padding-inline: 8px;
    --carousel-dot-size: 7px;
    --carousel-dot-active-size: 18px;
    --chip-gap: 8px;
    --chip-height: 28px;
    --chip-padding-x: 10px;
    --chip-radius: 7px;
    --font-size-about-copy: var(--font-size-content-copy);
    --header-control-height: 32px;
    --mobile-header-control-size: 44px;
  }
}

@media (max-width: 402px) {
  :root {
    --type-heading-xl: 2.5625rem;
    --font-size-h1: var(--type-heading-xl);
    --font-size-tabs: 1.25rem;
    --font-size-mobile-menu-footer: 1.25rem;
    --font-size-case-button: 1.25rem;
    --font-size-contact-cta: 1.25rem;
    --font-size-mobile-cv: 1.25rem;
  }
}

:root[data-theme="dark"] {
  --color-page: #0d0d14;
  --color-surface: #171720;
  --color-surface-soft: rgba(255, 255, 255, 0.08);
  --color-surface-strong: #f5f5f7;
  --color-text: #f5f5f7;
  --color-text-muted: rgba(245, 245, 247, 0.68);
  --color-border: rgba(245, 245, 247, 0.12);
  --color-overlay: rgba(0, 0, 0, 0.52);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-page: #0d0d14;
    --color-surface: #171720;
    --color-surface-soft: rgba(255, 255, 255, 0.08);
    --color-surface-strong: #f5f5f7;
    --color-text: #f5f5f7;
    --color-text-muted: rgba(245, 245, 247, 0.68);
    --color-border: rgba(245, 245, 247, 0.12);
    --color-overlay: rgba(0, 0, 0, 0.52);
  }
}
