@font-face {
  font-family: 'Manrope';
  src: url('../assets/fonts/manrope/Manrope-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-main:
    'Manrope',
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;

  /* ================================
     ТИПОГРАФИЧЕСКАЯ ШКАЛА (1.25 Major Third + legacy)
     Используются как переменные в правилах. При рефакторе CSS
     заменять hardcoded font-size на эти.
     ================================ */

  /* Основная шкала — modular scale 1.25 (Major Third) */
  --fs-xs:   0.75rem;   /* 12px — caption, footer-meta, tooltips */
  --fs-sm:   0.875rem;  /* 14px — labels, secondary copy */
  --fs-base: 1rem;      /* 16px — body */
  --fs-md:   1.125rem;  /* 18px — lead paragraph, small h3 */
  --fs-lg:   1.375rem;  /* 22px — h3 */
  --fs-xl:   1.75rem;   /* 28px — h2 */
  --fs-2xl:  2.25rem;   /* 36px — h1 mobile */
  --fs-3xl:  clamp(1.75rem, 3vw, 2.75rem);   /* h1 desktop hero */

  /* Legacy промежуточные размеры — для миграции тех правил, где
     дизайн исторически использовал не-scale значения. При следующем
     визуальном редизайне рекомендуется перевести на основную шкалу. */
  --fs-11:   0.6875rem; /* 11px — micro caption (legacy) */
  --fs-13:   0.8125rem; /* 13px — chip/badge, small button (legacy) */
  --fs-15:   0.9375rem; /* 15px — secondary body (legacy) */
  --fs-24:   1.5rem;    /* 24px — modal title (legacy, между --fs-lg и --fs-xl) */

  --lh-display: 1.15;
  --lh-heading: 1.3;
  --lh-body:    1.55;

  /* ================================
     FONT-WEIGHT SCALE — стандартные веса
     Manrope variable поддерживает 200-800. Используем только
     стандартные 5 значений, никаких fractional весов.
     ================================ */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ================================
     RADIUS SCALE — унифицированные значения скругления
     Используются везде в CSS для консистентности дизайна.
     ================================ */
  --radius-xs:   6px;      /* tiny: badges, micro-pills */
  --radius-sm:   12px;     /* small: chips, inputs, small cards */
  --radius-md:   18px;     /* medium: regular cards, modal buttons */
  --radius-lg:   24px;     /* large: info-cards, feature-cards */
  --radius-xl:   32px;     /* xl: section-frame containers */
  --radius-pill: 999px;    /* pills, full round */

  --bg: #eff3fc;
  --bg-soft: #f5f8ff;
  --surface: #ffffff;
  --surface-soft: #f7f9ff;
  --surface-strong: #edf1fc;

  --text: #0a0f1e;
  --text-strong: #04070f;
  --muted: #4b5775;
  --muted-light: #6b7898;

  --border: rgba(10, 15, 30, 0.08);
  --border-strong: rgba(10, 15, 30, 0.16);

  --black: #0a0f1e;
  --black-hover: #000000;
  --white: #ffffff;

  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: #eff6ff;
  --accent-border: rgba(37, 99, 235, 0.22);

  --green: #10b981;
  --green-hover: #059669;

  --button-primary-bg: #0a0f1e;
  --button-primary-bg-hover: #000000;
  --button-primary-text: #ffffff;

  --button-secondary-bg: rgba(37,99,235,0.08);
  --button-secondary-bg-hover: rgba(37,99,235,0.14);
  --button-secondary-text: #1e40af;
  --button-secondary-border: rgba(37, 99, 235, 0.24);

  --button-soft-bg: rgba(255,255,255,0.72);
  --button-soft-bg-hover: rgba(255,255,255,0.92);
  --button-soft-text: #0a0f1e;
  --button-soft-border: rgba(10, 15, 30, 0.11);

  --card-bg: rgba(255,255,255,0.88);
  --card-bg-solid: #ffffff;
  --card-bg-soft: rgba(248,250,255,0.85);
  --card-border: rgba(255,255,255,0.78);
  --card-border-subtle: rgba(10, 15, 30, 0.06);
  --card-shadow:
    0 2px 8px rgba(10,15,30,0.05),
    0 10px 32px rgba(10,15,30,0.08),
    inset 0 1px 0 rgba(255,255,255,1);
  --card-shadow-strong:
    0 4px 16px rgba(10,15,30,0.07),
    0 24px 64px rgba(10,15,30,0.10),
    inset 0 1px 0 rgba(255,255,255,1);

  --glass-blur: blur(28px) saturate(2);
  --glass-blur-strong: blur(48px) saturate(2.2);
  --glass-light: rgba(255,255,255,0.82);
  --glass-border-light: rgba(255,255,255,0.72);
  --glass-inset-light: inset 0 1px 0 rgba(255,255,255,1);

  --radius-btn: 999px;
  --radius-card: 24px;
  --radius-section: 32px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --safeB: env(safe-area-inset-bottom, 0px);
  --headerOffset: 72px;
  --headerH: 84px;

  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #040c1c;
  --bg-soft: #060f22;
  --surface: rgba(12,20,42,0.90);
  --surface-soft: rgba(8,15,32,0.94);
  --surface-strong: rgba(18,30,58,0.90);

  --text: #dde5ff;
  --text-strong: #f0f5ff;
  --muted: #8492b4;
  --muted-light: #617090;

  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.15);

  --black: #f0f5ff;
  --black-hover: #ffffff;
  --white: #0a0f1e;

  --accent: #60a5fa;
  --accent-hover: #93c5fd;
  --accent-soft: rgba(96,165,250,0.12);
  --accent-border: rgba(96,165,250,0.26);

  --green: #34d399;
  --green-hover: #10b981;

  --button-primary-bg: #2563eb;
  --button-primary-bg-hover: #1d4ed8;
  --button-primary-text: #ffffff;

  --button-secondary-bg: rgba(96,165,250,0.12);
  --button-secondary-bg-hover: rgba(96,165,250,0.20);
  --button-secondary-text: #93c5fd;
  --button-secondary-border: rgba(96,165,250,0.28);

  --button-soft-bg: rgba(255,255,255,0.07);
  --button-soft-bg-hover: rgba(255,255,255,0.12);
  --button-soft-text: #dde5ff;
  --button-soft-border: rgba(255,255,255,0.10);

  --card-bg: rgba(255,255,255,0.05);
  --card-bg-solid: #0f1a32;
  --card-bg-soft: rgba(255,255,255,0.03);
  --card-border: rgba(255,255,255,0.10);
  --card-border-subtle: rgba(255,255,255,0.06);
  --card-shadow:
    0 2px 8px rgba(0,0,0,0.36),
    0 10px 32px rgba(0,0,0,0.44),
    inset 0 1px 0 rgba(255,255,255,0.07);
  --card-shadow-strong:
    0 4px 16px rgba(0,0,0,0.44),
    0 24px 64px rgba(0,0,0,0.54),
    inset 0 1px 0 rgba(255,255,255,0.08);

  --glass-blur: blur(28px) saturate(1.8);
  --glass-blur-strong: blur(48px) saturate(2);
  --glass-light: rgba(12,20,42,0.80);
  --glass-border-light: rgba(255,255,255,0.10);
  --glass-inset-light: inset 0 1px 0 rgba(255,255,255,0.07);

  color-scheme: dark;
}

*,
*::before,
*::after {
  font-family: inherit;
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-main);
  text-rendering: geometricPrecision;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-gutter: stable;
  overflow-x: hidden;
}

/* Tailwind's utility classes override UA stylesheet [hidden]. Fix: */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 130% 55% at 50% -8%, rgba(37,99,235,0.16) 0%, transparent 55%),
    radial-gradient(ellipse 70% 40% at 85% 85%, rgba(96,165,250,0.09) 0%, transparent 45%),
    linear-gradient(175deg, #eff3fc 0%, #f5f8ff 45%, #eff3fc 100%);
  background-attachment: fixed;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(ellipse 130% 55% at 50% -8%, rgba(37,99,235,0.24) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 85% 90%, rgba(99,102,241,0.12) 0%, transparent 45%),
    linear-gradient(175deg, #040c1c 0%, #05101f 50%, #040c1c 100%);
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-strong);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: var(--lh-display);
  margin: 0;
}

p {
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection {
  background: rgba(37, 99, 235, 0.18);
  color: var(--text-strong);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted-light);
}

/* =====================================================
   Accessibility — skip-to-content link
   Visible only when focused via keyboard.
   ===================================================== */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 9999;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--button-primary-bg, #0a0f1e);
  color: var(--button-primary-text, #ffffff);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
  transition: top 0.18s ease;
}

.skip-to-content:focus,
.skip-to-content:focus-visible {
  top: 12px;
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
}

/* =====================================================
   Accessibility — global focus-visible
   Keyboard-only focus ring (mouse clicks don't trigger).
   ===================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* Pill-кнопкам и круглым иконкам нужен outline с большим offset */
.contact-btn:focus-visible,
.hero-action-btn:focus-visible,
.btn:focus-visible,
.cookie-btn:focus-visible,
.site-footer__social-btn:focus-visible {
  outline-offset: 4px;
}

/* =====================================================
   prefers-reduced-motion — глобальное отключение анимаций
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}