/*
 * Единая система оформления публичных страниц и кабинета.
 *
 * Раньше у каждой страницы был свой набор цветов, радиусов и теней: лендинг, /try,
 * тарифы и кабинет выглядели как четыре разных продукта. Здесь один источник значений,
 * страницы подключают файл и пользуются переменными вместо своих копий.
 *
 * Шкала намеренно крупная, с отрицательным трекингом на заголовках и очень мягкими
 * тенями: это то, чем «дорогие» интерфейсы отличаются от самодельных — не количеством
 * украшений, а размером, воздухом и сдержанностью.
 */
:root {
  /* Цвета */
  --accent: #6e46f9;
  --accent-ink: #5932dd;
  --accent-soft: #f2edff;
  --accent-ring: rgba(110, 70, 249, .18);

  --fg: #0f1115;
  --fg-soft: #343842;
  --muted: #5b6371;
  --line: rgba(15, 17, 21, .09);
  --line-strong: rgba(15, 17, 21, .16);

  --bg: #fff;
  --bg-soft: #f6f7f9;
  --card: #fff;

  --warm: #e8792c;
  --warm-soft: #fdf1e7;
  --good: #0f9d58;
  --bad: #c2280f;
  --bad-soft: #fde3dc;

  /* Форма */
  --radius-lg: 24px;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* Тени: почти незаметные вблизи, но дающие карточке вес */
  --shadow-xs: 0 1px 2px rgba(15, 17, 21, .05);
  --shadow: 0 1px 2px rgba(15, 17, 21, .04), 0 14px 34px -20px rgba(15, 17, 21, .4);
  --shadow-lift: 0 2px 6px rgba(15, 17, 21, .06), 0 26px 50px -24px rgba(15, 17, 21, .5);
  --shadow-pop: 0 32px 80px -24px rgba(15, 17, 21, .55);

  /* Типографика. Inter стоит системно у большинства; веб-шрифт не грузим — это
     лишний внешний запрос на каждой странице ради едва заметной разницы */
  --font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --container: 1120px;
  --container-text: 760px;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Заголовки: крупнее и плотнее обычного, иначе страница читается как документ, а не как продукт */
.u-h1 { font-size: 54px; line-height: 1.07; letter-spacing: -.03em; font-weight: 700; margin: 0; }
.u-h2 { font-size: 38px; line-height: 1.12; letter-spacing: -.025em; font-weight: 700; margin: 0; }
.u-h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.015em; font-weight: 600; margin: 0; }
.u-lead { font-size: 19px; line-height: 1.55; color: var(--muted); letter-spacing: -.011em; }

@media (max-width: 760px) {
  .u-h1 { font-size: 34px; letter-spacing: -.022em; }
  .u-h2 { font-size: 27px; }
  .u-lead { font-size: 17px; }
}

/* Кнопки */
.u-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 12px; border: 1px solid transparent;
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.011em;
  text-decoration: none; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.u-btn--primary { background: var(--accent); color: #fff; box-shadow: 0 10px 24px -12px var(--accent); }
.u-btn--primary:hover { background: var(--accent-ink); transform: translateY(-1px); box-shadow: 0 16px 30px -14px var(--accent); }
.u-btn--ghost { background: var(--card); color: var(--fg); border-color: var(--line); box-shadow: var(--shadow-xs); }
.u-btn--ghost:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow); }
.u-btn--big { padding: 15px 28px; font-size: 16px; border-radius: 14px; }
.u-btn:disabled, .u-btn[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.u-btn:focus-visible, .u-focus:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; }

/* Карточка */
.u-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Метка-пилюля над заголовком секции */
.u-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; letter-spacing: -.005em;
  color: var(--accent); background: var(--accent-soft);
  padding: 6px 13px; border-radius: var(--radius-pill);
}

/* Поля ввода */
.u-input {
  font: inherit; font-size: 15px; padding: 12px 14px;
  border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card); color: var(--fg);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.u-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.u-input::placeholder { color: #9aa1ae; }

@media (prefers-reduced-motion: reduce) {
  .u-btn, .u-input, .u-card { transition: none; }
  .u-btn:hover { transform: none; }
}