/* =============================================================
   base.css — design tokens, reset, typography
   Тёмная (не угольно-чёрная) тема, белый текст, шрифт Circular
   ============================================================= */

/* --- Circular (если положишь файлы в assets/fonts/) --------- */
/* Файлы ожидаются:
   assets/fonts/CircularStd-Book.woff2   (400)
   assets/fonts/CircularStd-Medium.woff2 (500)
   assets/fonts/CircularStd-Bold.woff2   (700)
   Если их нет — сработает fallback на Inter / системный. */
@font-face {
  font-family: "Circular";
  src: url("../assets/fonts/CircularStd-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Circular";
  src: url("../assets/fonts/CircularStd-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Circular";
  src: url("../assets/fonts/CircularStd-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Палитра: глубокий тёмный, почти чёрный -------------- */
  --bg-0: #040406;            /* самый тёмный — фон страницы */
  --bg-1: #070709;           /* база сцены */
  --bg-2: #0d0e12;           /* поверхность карточки */
  --bg-3: #14161b;           /* приподнятая поверхность */

  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.13);

  /* --- Текст ------------------------------------------------ */
  --text-0: #f5f6f8;         /* основной белый */
  --text-1: #c7cbd2;         /* вторичный */
  --text-2: #8b90a0;         /* приглушённый */
  --text-3: #5b6070;         /* самый тихий / метки */

  /* --- Акцентный градиент (твоё пожелание) ----------------- */
  --grad-text: linear-gradient(135deg, #ffffff 0%, #6b7280 100%);
  --grad-text-soft: linear-gradient(135deg, #ffffff 0%, #9aa0ad 100%);
  --grad-line: linear-gradient(90deg, rgba(255,255,255,0.5), rgba(255,255,255,0));
  --grad-glow: radial-gradient(
      55% 55% at 50% 0%,
      rgba(255, 255, 255, 0.055) 0%,
      rgba(255, 255, 255, 0) 70%);

  /* --- Glass ------------------------------------------------ */
  --glass-bg: rgba(15, 17, 23, 0.5);
  --glass-bg-hi: rgba(22, 25, 33, 0.62);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-blur: 20px;

  /* --- Тени ------------------------------------------------- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55);

  /* --- Радиусы / ритм -------------------------------------- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;

  /* --- Типографика (fluid через clamp) -------------------- */
  --font: "Circular", "Inter", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-eyebrow: clamp(0.72rem, 0.62rem + 0.4vw, 0.86rem);
  --fs-body:    clamp(0.95rem, 0.85rem + 0.5vw, 1.18rem);
  --fs-lead:    clamp(1.1rem, 0.95rem + 0.8vw, 1.45rem);
  --fs-h3:      clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  --fs-h2:      clamp(1.9rem, 1.3rem + 3vw, 3.6rem);
  --fs-h1:      clamp(2.4rem, 1.5rem + 4.5vw, 5rem);
  --fs-stat:    clamp(2.8rem, 1.8rem + 5vw, 6rem);

  /* --- Тайминги -------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-slide: 720ms;
  --t-fast: 320ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--text-1);
  background-color: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;             /* дека управляет показом */
  letter-spacing: -0.01em;
  /* защита от выделения/копирования текста */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;  /* долгий тап на мобильных */
}
img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }

h1, h2, h3 {
  color: var(--text-0);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

p {
  line-height: 1.6;
  color: var(--text-1);
}

::selection {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* --- Утилита: текст с градиентом ------------------------- */
.grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Доступность: уважаем «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}