/* ==========================================================================
   base.css — reset, шрифт, токены дизайн-системы, типографика

   Все значения сняты с референса new.areyoukidy.me (его CSS лежит инлайном
   на главной) и подтверждены замерами getComputedStyle на 1920 и 1440.
   Правки палитры и геометрии — только здесь. В файлах блоков хардкод запрещён.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Шрифт Inter — self-hosted, вариативный (400…600 в одном файле).
   Три сабсета вместо одного файла на весь юникод: браузер скачает только те,
   что реально встретились в тексте. latin-ext нужен не для красоты — в нём
   лежит знак рубля ₽ (U+20BD).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/inter/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/inter/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/inter/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Токены. :root несёт сырую палитру бренда, геометрию, моушен
   и семантику ТЁМНОЙ темы — она дефолтная, как и на референсе.
   Светлая тема ниже переопределяет только семантический слой.
   -------------------------------------------------------------------------- */

:root {
  /* --- сырая палитра бренда: переносится 1:1, править нельзя --- */
  --white: #FFFFFF;
  --black: #000000;

  --primary100: #F2F5FF;
  --primary200: #7D81FF;
  --primary300: #5359FF;
  --primary400: #292B66;

  --success: #42D819;
  --error: #FF5356;
  --warning: #FF9030;

  --backgroundDark: #15161A;
  --dark400: #0F0F12;
  --dark300: #232325;
  --dark200: #303136;
  --dark100: #44464C;

  --backgroundLight: #F4F7FB;
  --gray100: #F5F6F7;
  --gray200: #F0F0F0;
  --gray300: #E7E7E7;
  --gray400: #AFAFAF;
  --gray500: #838792;

  --blackOverlay: rgba(0, 0, 0, .3);
  --whiteOverlay: rgba(255, 255, 255, .15);

  /* Камелот-ключи из плеера платформы. Поштучно на лендинге не нужны,
     но заведены целиком — акценты берём отсюда, чтобы не рождались
     случайные оттенки мимо системы. */
  --key1A: #42D819;  --key2A: #32E69E;  --key3A: #28E7D7;
  --key4A: #53D7FF;  --key5A: #53A0FF;  --key6A: #5359FF;
  --key7A: #7853FF;  --key8A: #AF53FF;  --key9A: #FC53FF;
  --key10A: #FF5398; --key11A: #FF5356; --key12A: #FF9030;

  /* --- градиенты баннеров (тоже с референса) --- */
  --gradient-promo: linear-gradient(90deg, #5359FF 0%, #AA48FF 100%);
  --gradient-hero: linear-gradient(90deg, #82C0FF 0%, #FD9BF1 100%);
  --gradient-tracks: linear-gradient(270deg, #9BFFCF 0%, #6271FF 100%);
  --gradient-cert: linear-gradient(90deg, #6846FF 0%, #9419FF 100%);

  /* --- семантика: ТЁМНАЯ тема (дефолт) --- */
  --main-bg: var(--backgroundDark);
  --text-color: var(--white);
  --text-gray: var(--gray400);

  --card-bg: var(--dark300);
  --card-bg-hover: var(--dark200);
  --border-color: var(--dark100);

  --header-bg: var(--dark300);
  --header-border: var(--dark200);
  --switcher-bg: var(--dark400);
  --switcher-icon-bg: var(--dark200);

  --pill-bg: var(--dark200);
  --pill-bg-hover: var(--white);
  --pill-border: var(--dark200);
  --pill-border-hover: var(--dark100);
  --pill-text: var(--white);
  --pill-text-hover: var(--primary300);
  --pill-text-active: var(--black);

  --input-bg: var(--dark300);
  --input-bg-focus: var(--dark200);
  --input-border: var(--dark100);
  --input-border-focus: var(--primary300);
  --input-text: var(--gray400);
  --input-text-active: var(--white);

  --btn-card-hover: var(--dark200);
  --overlay: var(--whiteOverlay);
  --banner-text: var(--white);

  /* Подсветка под курсором на карточках: на тёмном это высветление,
     на светлом — затемнение (см. блок светлой темы). */
  --glow-color: rgba(125, 129, 255, .16);

  /* --- геометрия: верхняя ступень, >1600 --- */
  --container-max: 1488px;
  --page-gap: 8px;          /* поле вокруг шапки-капсулы */
  --gutter: 8px;            /* зазор в сетках карточек */
  --gap: 24px;              /* базовый внутренний зазор секции */

  --radius-card: 40px;
  --radius-header: 24px;
  --radius-btn: 16px;
  --radius-btn-lg: 24px;
  --radius-input: 16px;
  --radius-pill: 96px;      /* «сделай круглым», а не настоящий радиус */

  --pad-card: 40px;
  --pad-section: 40px;
  --section-margin: 100px;
  --section-margin-sm: 24px;

  --card-translate: 12px;   /* подъём карточки на ховере */

  /* --- типографика: верхняя ступень --- */
  --fs-hero: 48px;
  --fs-h2: 42px;            /* заголовок секции */
  --fs-h3: 44px;            /* заголовок карточки, крупные цифры */
  --fs-h4: 26px;            /* подзаголовок, имя в отзыве */
  --fs-lead: 20px;          /* пояснительный текст секции и карточки */
  --fs-base: 18px;          /* кнопки, навигация, обычный текст */
  --fs-btn-lg: 20px;
  --fs-small: 16px;
  --fs-xs: 14px;

  --lh-heading: 1;          /* у референса line-height: 100% на всех h1–h6 */
  --lh-text: 1.2;

  --fw-text: 400;
  --fw-medium: 500;
  --fw-bold: 600;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- моушен: слой UI (реакция на пользователя) --- */
  --ease: cubic-bezier(.7, .54, 0, .74);
  --dur: .3s;

  /* --- моушен: слой ритма (фон и декор), 128 BPM --- */
  --beat: 468.75ms;                 /* 60000 / 128 */
  --bar: calc(var(--beat) * 4);     /* такт, 1875ms */
}

/* --- семантика: СВЕТЛАЯ тема --- */
:root[data-theme='light'] {
  --main-bg: var(--backgroundLight);
  --text-color: var(--black);
  --text-gray: var(--gray500);

  --card-bg: var(--white);
  --card-bg-hover: var(--gray100);
  --border-color: var(--gray300);

  --header-bg: var(--white);
  --header-border: var(--gray100);
  --switcher-bg: var(--gray200);
  --switcher-icon-bg: var(--white);

  --pill-bg: var(--gray100);
  --pill-bg-hover: var(--white);
  --pill-border: var(--gray100);
  --pill-border-hover: var(--gray200);
  --pill-text: var(--black);
  --pill-text-hover: var(--primary300);
  --pill-text-active: var(--black);

  --input-bg: var(--white);
  --input-bg-focus: var(--gray100);
  --input-border: var(--gray300);
  --input-border-focus: var(--primary300);
  --input-text: var(--gray400);
  --input-text-active: var(--black);

  --btn-card-hover: var(--gray100);
  --overlay: var(--blackOverlay);

  --glow-color: rgba(83, 89, 255, .10);
}

/* --------------------------------------------------------------------------
   Ступени геометрии и кеглей.
   Брейкпоинты 1600 / 1480 / 1024 — родные для референса; 768 и 576 наши,
   у него это внутренние страницы платформы, а у нас лендинг.
   Токены переопределяются здесь один раз, блоки о ступенях не знают.
   -------------------------------------------------------------------------- */

@media (max-width: 1600px) {
  :root {
    --container-max: 1304px;

    --radius-card: 32px;
    --radius-btn-lg: 16px;

    --pad-card: 32px;
    --pad-section: 32px;
    --section-margin: 80px;

    --fs-hero: 42px;
    --fs-h2: 36px;
    --fs-h3: 32px;
    --fs-h4: 20px;
    --fs-lead: 16px;
    --fs-btn-lg: 18px;
  }
}

@media (max-width: 1480px) {
  :root {
    --container-max: 1116px;
  }
}

@media (max-width: 1024px) {
  :root {
    --container-max: 100%;
    --page-gap: 16px;

    --radius-card: 24px;
    --pad-card: 24px;
    --pad-section: 24px;
    --section-margin: 60px;

    --fs-hero: 30px;
    --fs-h2: 26px;
    --fs-h3: 26px;

    /* На тач-устройствах подъёма карточки нет: ховера там не существует,
       а состояние :hover после тапа залипает. */
    --card-translate: 0px;
  }
}

@media (max-width: 576px) {
  :root {
    --page-gap: 12px;
    --gap: 16px;
  }
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

html {
  min-width: 320px;
  /* ⚠️ Именно clip, а не hidden. overflow-x: hidden превращает страницу
     в скролл-контейнер, и position: sticky у шапки перестаёт работать —
     она уезжает вместе с контентом. overflow-x: clip обрезает так же,
     но контейнера прокрутки не создаёт. В Safari < 16 свойство неизвестно
     и отработает как visible: горизонтального переполнения на странице
     нет (проверено на 375–1920), обрезка нужна только как страховка. */
  overflow-x: clip;
  scroll-behavior: smooth;
  /* Запас под залипшую шапку, чтобы якорь не уезжал под неё. */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Обрезку держит только html: дублировать её здесь нельзя — clip на body
     создаёт область обрезки и для липкой CTA-панели, которая position: fixed. */
  background-color: var(--main-bg);
  color: var(--text-color);
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: var(--fw-text);
  line-height: var(--lh-text);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Плавная смена темы — ровно как у референса: только цвета, без layout. */
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--text-color);
  /* Заголовкам переносы расставляем вручную <br> там, где нужно,
     но pretty снимает висячее слово там, где не расставляли. */
  text-wrap: pretty;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

img, svg, picture, video {
  display: block;
  max-width: 100%;
}

button {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

address {
  font-style: normal;
}

/* Видимый фокус только с клавиатуры: мышью кликать в рамке неприятно,
   а для доступности она обязательна. */
:focus-visible {
  outline: 2px solid var(--primary300);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background-color: var(--primary300);
  color: var(--white);
}

/* Скрыто визуально, но доступно скринридеру. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}