/* ============================================================
   base.css — тема, reset, типографика, базовые компоненты
   Палитра-гибрид: тёплый фон курса + оранжевый CTA make-it + синий акцент.
   Все цвета/отступы — через переменные. Менять палитру здесь.
   ============================================================ */

:root {
  /* --- фон / текст (тёплая база курса — склейка с demo) --- */
  --bg:            #f5f1ea;  /* основной фон */
  --bg-card:       #ffffff;  /* карточки */
  --bg-alt:        #efe9df;  /* чередующиеся секции */
  --bg-dark:       #211f2b;  /* тёмные плашки (финальный CTA) */
  --ink:           #2a2a3a;  /* основной текст */
  --ink-soft:      #6a6558;  /* приглушённый текст */
  --ink-invert:    #f5f1ea;  /* текст на тёмном */
  --line:          #e0dbd1;  /* разделители/границы */

  /* --- CTA: оранжевый make-it (РОДОВОЙ ПРИЗНАК, не менять) --- */
  --accent:        #ff6109;  /* главный CTA */
  --accent-hover:  #ee5500;
  --accent-ink:    #ffffff;  /* текст на оранжевом */

  /* --- акценты --- */
  --blue:          #2d6cdf;  /* смысловой акцент (не CTA — оранжевый остаётся главным CTA) */
  --blue-soft:     #e8efff;  /* фон-плашка под синий акцент */
  --sun:           #ffd86b;  /* жёлтый курса — мелкие детали, теги, подчёркивания */

  /* --- типографика --- */
  --font:      "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-head: "Onest", var(--font);

  /* --- ритм/размеры --- */
  --container:        1120px;
  --container-narrow: 720px;
  --gap:              24px;
  --block-pad-y:      88px;   /* вертикальный отступ секции */
  --radius:           16px;
  --radius-sm:        10px;
  --shadow:           0 14px 40px -18px rgba(42, 42, 58, 0.32);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p { margin: 0; }

h1, h2, h3, h4 { font-family: var(--font-head); }
h1 { font-size: clamp(28px, 4.6vw, 50px); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(25px, 3.4vw, 36px); line-height: 1.14; font-weight: 800; letter-spacing: -0.015em; }
h3 { font-size: clamp(18px, 2vw, 21px); line-height: 1.25; font-weight: 700; }

a { color: inherit; }

img { max-width: 100%; display: block; }

/* --- утилиты --- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
.container--narrow { max-width: var(--container-narrow); }

.muted  { color: var(--ink-soft); }
.lead   { font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-soft); line-height: 1.55; }
.center { text-align: center; }
.strike { text-decoration: line-through; opacity: .55; }

/* --- кнопки --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform 120ms ease, background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 10px 24px -10px rgba(255, 97, 9, 0.6);
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--ghost-light {
  border-color: rgba(245, 241, 234, 0.5);
  color: var(--ink-invert);
}
/* заглушка: кнопка-плейсхолдер без действия */
.btn.is-soon { position: relative; }
.btn.is-soon::after {
  content: "скоро";
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--sun);
  color: var(--ink);
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 4px;
}

/* --- бейдж/чип --- */
.chip {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

/* === АРХИТЕКТУРА БЛОКОВ ===
   Каждый блок = <section class="block">. Чтобы переставить блоки —
   меняешь порядок <section> в index.html. Блоки самодостаточны. */
.block { padding-block: var(--block-pad-y); }
.block--alt  { background: var(--bg-alt); }
.block--dark { background: var(--bg-dark); color: var(--ink-invert); }
.block__head { max-width: 780px; margin-bottom: 44px; }
.block__head--center { margin-inline: auto; text-align: center; }
.block__title { margin-bottom: 14px; }

/* сетка карточек — переиспользуется в нескольких блоках */
.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.card__icon  { font-size: 28px; margin-bottom: 14px; }
.card__title { margin-bottom: 8px; }
.card__text  { color: var(--ink-soft); font-size: 15px; }

@media (max-width: 640px) {
  :root { --block-pad-y: 60px; }
}