/* Хаб Освіти — зібрано з new-styles/index.css.
   НЕ РЕДАГУВАТИ ВРУЧНУ: правки роби у вихідних файлах
   і перезбирай через `python new-styles/build.py`. */

@import url("https://fonts.googleapis.com/css2?family=Commissioner:wght@400;500;600;700&display=swap");
/* ============================================================
   Хаб Освіти — редизайн 2026. Точка входу.

   Порядок шарів має значення: токени → база → розкладка →
   компоненти → сторінки. Нижчий шар не має перебивати вищий
   специфічністю, тільки послідовністю.

   Цей файл зручний для розробки. На бойову сторінку краще
   підключати склеєний dist/hub.css — див. build.py, бо кожен
   @import це окремий запит і рендер блокується на кожному.
   ============================================================ */

/* ═══════════════ 01-tokens.css ═══════════════ */
/* ============================================================
   Хаб Освіти — Design System Tokens
   Source of truth: extracted from busy-villani/src/styles
   ============================================================ */

/* Font: Commissioner (Google Fonts) — weights 400/500/600/700 */
/* https://fonts.googleapis.com/css2?family=Commissioner:wght@400;500;600;700&display=swap -> піднято на початок файлу */

:root {
  /* ---------- Fonts ---------- */
  --font-family-base: "Commissioner", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */

  /* ---------- Colors — neutrals ---------- */
  --color-bg:           #ffffff;
  --color-bg-primary:   #ffffff;
  --color-bg-secondary: #fcfaff;
  --color-bg-muted:     #fcfaff;
  --color-bg-tint:      #f6f2ff;
  --color-stroke:       #e5dff1;

  /* Unified text palette:
     all-dark text → --color-text-title (#0D0A23), all-grey/secondary → --color-text-caption (#8B93BE) */
  --color-text-title:    #0d0a23;
  --color-text-body:     #0d0a23;   /* body = title (unified dark) */
  --color-text-caption:  #8b93be;   /* captions, hints, placeholders, disabled */
  --color-text-disabled: #8b93be;   /* legacy alias — same grey */
  --color-text-on-brand: #ffffff;   /* text on purple surfaces */

  /* ---------- Colors — brand (purple) ---------- */
  --color-brand-5:   #f2ecfe;
  --color-brand-20:  #e6d9fd;
  --color-brand-50:  #b38efa;
  --color-brand-80:  #9969f9;
  --color-brand-100: #8043f7;

  /* Legacy aliases still used in code */
  --color-purple-10:  var(--color-brand-5);
  --color-purple-20:  var(--color-brand-20);
  --color-purple-40:  var(--color-brand-50);
  --color-purple-60:  var(--color-brand-50);
  --color-purple-80:  var(--color-brand-80);
  --color-purple-100: var(--color-brand-100);

  /* ---------- Colors — accents ---------- */
  --color-pink-10:    #ffeff4;
  --color-pink-100:   #ff6496;

  --color-blue-10:    #e5f8ff;
  --color-blue-100:   #00b7ff;

  --color-yellow-10:  #fff7e5;
  --color-yellow-100: #ffb200;

  /* ---------- Colors — semantic ---------- */
  --color-success-10:  #e6f8f4;
  --color-success-20:  #caece8;
  --color-success-100: #01b58b;

  --color-error-10:    #fdf0ef;
  --color-error-20:    #fce1e0;
  --color-error-100:   #f06b64;

  /* ---------- Radii (unified — 4 steps only) ---------- */
  --radius-xs:   4px;    /* progress bars, dots, tiny tags */
  --radius-sm:   8px;    /* buttons, chips, inputs, small cards */
  --radius-md:   16px;   /* cards, tiles, modals */
  --radius-xl:   64px;   /* avatars, pill tags, circles — NOT buttons */

  /* Legacy aliases — map old tokens onto the 4-step scale */
  --radius-xxs:  var(--radius-xs);
  --radius-chip: var(--radius-sm);
  --radius-lg:   var(--radius-md);
  --radius-card: var(--radius-md);
  --radius-btn:  var(--radius-sm);
  --radius-pill: var(--radius-xl);

  /* ---------- Shadows (MINIMAL — cards use borders, not shadows)
     Only two tokens exist: one soft lift for floating surfaces
     (modal / dropdown / toast) and the accessibility focus ring. */
  --shadow-float: none;
  --shadow-focus: none;

  /* Legacy aliases — collapse ALL old tokens to none (cards get border:1px solid var(--color-stroke) instead) */
  --shadow-xs:       none;
  --shadow-card:     none;
  --shadow-hover:    none;
  --shadow-dropdown: var(--shadow-float);
  --shadow-modal:    var(--shadow-float);

  /* ---------- Button tokens (Figma UI-Kit spec) ---------- */
  --btn-bg-primary:     #0d0a23;       /* DARK NAVY — not purple! */
  --btn-fg-primary:     #ffffff;
  --btn-bg-secondary:   transparent;
  --btn-fg-secondary:   #0d0a23;
  --btn-border-secondary:#0d0a23;
  --btn-radius:         8px; /* @kind radius */           /* unified with inputs */
  --btn-h-lg:           56px; /* @kind spacing */
  --btn-h-md:           44px; /* @kind spacing */
  --btn-h-sm:           36px; /* @kind spacing */
  --btn-font-size:      14px; /* @kind font */
  --btn-font-weight:    700; /* @kind font */
  --btn-padding-x:      24px; /* @kind spacing */

  /* ---------- Input tokens (Figma UI-Kit spec) ---------- */
  --input-bg:          #ffffff;
  --input-border:      #e5dff1;
  --input-radius:      8px; /* @kind radius */
  --input-height:      40px; /* @kind spacing */
  --input-padding-x:   16px; /* @kind spacing */
  --input-padding-y:   20px; /* @kind spacing */
  --input-font-size:   16px; /* @kind font */
  --input-placeholder: #8b93be;
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Adaptive spacing (fluid) */
  --gutter:     clamp(16px, 3vw, 32px); /* @kind spacing */
  --section:    clamp(20px, 5vw, 32px); /* @kind spacing */
  --card-pad:   clamp(14px, 2vw, 18px); /* @kind spacing */
  --layout-gap: var(--space-5); /* @kind spacing */      /* unified aside↔main + between cards */
  --page-gutter: var(--gutter); /* @kind spacing */      /* legacy alias */

  /* ---------- Typography scale (unified, Figma-grounded)
     Sizes seen most often in Figma: 12, 14, 16, 18, 20, 24, 36
     Floor of the scale = 12px (caption/meta) */
  --fz-d1: 36px; /* @kind font */   /* hero display        — rare, one per screen   */
  --fz-d2: 24px; /* @kind font */   /* page title          — most-used heading     */
  --fz-h1: 20px; /* @kind font */   /* section heading                              */
  --fz-h2: 18px; /* @kind font */   /* card / modal title                           */
  --fz-b1: 16px; /* @kind font */   /* DEFAULT body (Medium 16 = 892× in Figma)     */
  --fz-b3: 14px; /* @kind font */   /* secondary body, meta, small rows             */
  --fz-b5: 12px; /* @kind font */   /* FLOOR — captions, hints, tiny labels         */

  /* Legacy aliases (keep components working) */
  --fz-h3: var(--fz-h1); /* @kind font */
  --fz-h4: var(--fz-h2); /* @kind font */
  --fz-b2: var(--fz-b1); /* @kind font */
  --fz-b4: var(--fz-b3); /* @kind font */
  --fz-b6: var(--fz-b5); /* @kind font */
  --fz-b7: var(--fz-b5); /* @kind font */
  --fz-b8: var(--fz-b5); /* @kind font */
  --fz-c1: var(--fz-b5); /* @kind font */

  /* Stat card big number — shared by stat-card + illustrated-card */
  --fz-stat-value: clamp(32px, 5vw, 54px); /* @kind font */

  /* Line heights */
  --lh-0_90: 0.9; /* @kind font */
  --lh-1_05: 1.05; /* @kind font */
  --lh-1_15: 1.15; /* @kind font */
  --lh-1_20: 1.2; /* @kind font */
  --lh-1_30: 1.3; /* @kind font */
  --lh-1_40: 1.4; /* @kind font */
  --lh-1_60: 1.6; /* @kind font */

  /* ---------- Motion (Emil Kowalski curves) ---------- */
  --dur-instant: 80ms; /* @kind other */
  --dur-fast:    160ms; /* @kind other */
  --dur-base:    200ms; /* @kind other */
  --dur-slow:    280ms; /* @kind other */

  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* @kind other */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* @kind other */
  --ease-linear: linear; /* @kind other */

  /* ---------- Z-index ---------- */
  --z-base:     1; /* @kind other */
  --z-dropdown: 100; /* @kind other */
  --z-header:   500; /* @kind other */
  --z-aside:    600; /* @kind other */
  --z-overlay:  900; /* @kind other */
  --z-modal:    1000; /* @kind other */
  --z-toast:    2000; /* @kind other */
}

/* ============================================================
   Semantic element defaults — use these tags/classes directly
   ============================================================ */

html, body {
  font-family: var(--font-family-base);
  font-size: 16px;
  color: var(--color-text-body);
  background: #ffffff;
}

h1, .h1 {
  font-family: var(--font-family-base);
  font-size: var(--fz-d1);
  line-height: var(--lh-1_05);
  font-weight: var(--fw-bold);
  color: var(--color-text-title);
  letter-spacing: -0.01em;
}
h2, .h2 {
  font-family: var(--font-family-base);
  font-size: var(--fz-d2);
  line-height: var(--lh-0_90);
  font-weight: var(--fw-bold);
  color: var(--color-text-title);
}
h3, .h3 {
  font-family: var(--font-family-base);
  font-size: var(--fz-h1);
  line-height: var(--lh-1_30);
  font-weight: var(--fw-semibold);
  color: var(--color-text-title);
}
h4, .h4 {
  font-family: var(--font-family-base);
  font-size: var(--fz-h2);
  line-height: var(--lh-1_30);
  font-weight: var(--fw-semibold);
  color: var(--color-text-title);
}

p, .body {
  font-family: var(--font-family-base);
  font-size: var(--fz-b2);
  line-height: var(--lh-1_60);
  font-weight: var(--fw-regular);
  color: var(--color-text-body);
}
.caption {
  font-family: var(--font-family-base);
  font-size: var(--fz-c1);
  line-height: var(--lh-1_30);
  font-weight: var(--fw-medium);
  color: var(--color-text-caption);
}
.label-strong {
  font-family: var(--font-family-base);
  font-size: var(--fz-b3);
  line-height: var(--lh-1_30);
  font-weight: var(--fw-semibold);
  color: var(--color-text-caption);
  text-transform: none;
}

.stat-value {
  font-size: var(--fz-stat-value);
  line-height: 1;
  font-weight: var(--fw-bold);
  color: var(--color-text-title);
  letter-spacing: 0.02em;
}


/* ═══════════════ 02-base.css ═══════════════ */
/* ============================================================
   02 БАЗА. Скидання, поведінка документа, типографічні дефолти.
   Нічого, що стосується конкретної сторінки чи компонента.
   ============================================================ */

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

/* clip, а не hidden: hidden на html ламає position:sticky у шапці.
   Потрібен, бо смуги .bleed мають ширину 100vw, а вона враховує
   скролбар — без цього сторінка їде вбік на його ширину. */
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-body);
  font-family: var(--font-family-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; }
a { color: var(--color-brand-100); text-decoration: none; }

/* Атрибут hidden має слабку типову специфічність (display:none у UA-стилях),
   тож будь-який display у нашому CSS його мовчки перебиває — панель із
   display:grid лишалася видимою попри hidden. Прибиваємо один раз тут,
   щоб кожен компонент не мусив писати власне [hidden]-правило. */
[hidden] { display: none !important; }

/* ────────────────────────────────────────────────────────────
   ЧОТИРИ РОЛІ ТЕКСТУ. Інших немає, нові не заводимо.

     1. Заголовки        --fz-d1 / --fz-d2 / --fz-h1 / --fz-h2
     2. ЗВИЧАЙНИЙ ТЕКСТ  16px — успадковується від body.
                         font-size у такому правилі НЕ ПИШЕТЬСЯ.
     3. Підпис / мета    --fz-b5 (12px): дати, лічильники, кикери
     4. Кнопки, керування --btn-font-size (14px): .btn, .chip-btn,
                         .pager__btn, .navitem__btn, поля вводу
     5. Числа-показники  .stat-value та точкові розміри в місцях,
                         де цифра працює як графіка (11 000+, 44%, ½)

   Якщо кортить написати font-size у звичайному абзаці — це помилка:
   значить, текст грає роль, якої в списку немає.
   ──────────────────────────────────────────────────────────── */
html, body { font-size: var(--fz-b1); }

h1, h2, h3, h4 { margin: 0; }
p { margin: 0; font-size: inherit; line-height: var(--lh-1_60); }

/* Заголовок секції з жовтим підкресленням — фірмовий прийом макета.
   Живе в базі, бо повторюється на кожній сторінці. */
.h-sec {
  margin: 0;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: var(--fw-bold);
  color: var(--color-text-title);
}
.h-sec--center { text-align: center; }

.u-mark {
  position: relative;
  display: inline-block;
  color: var(--color-brand-100);
}
.u-mark svg {
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 10px;
}

.sec-intro {
  margin: 6px 0 0;
  max-width: 520px;
  font-size: var(--fz-b1);
  line-height: var(--lh-1_60);
  color: var(--color-text-body);
}

.sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

/* ── Доступність ── */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-toast);
  background: #fff;
  color: var(--color-text-title);
  padding: 12px 20px;
  border-radius: var(--input-radius);
  font-weight: var(--fw-bold);
}
.skip:focus { left: 16px; top: 16px; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--color-brand-100);
  outline-offset: 3px;
}

/* ── Анімації, спільні для компонентів ── */
@keyframes ds-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  .skip, .hdr, .ftr, .rail { display: none !important; }
}


/* ═══════════════ 03-layout.css ═══════════════ */
/* ============================================================
   03 РОЗКЛАДКА. Контейнери й смуги. Без кольорів компонентів.

   Модель макета: вузький потік сторінки (1120px) + секції, які
   розпираються на всю ширину вікна кольоровою смугою.
   ============================================================ */

/* Потік сторінки. Вертикальний ритм між секціями задається тут,
   а не марджинами всередині секцій. */
.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 80px);
}

/* Смуга на всю ширину вікна всередині вузького потоку.
   overflow:hidden обов'язковий — усередині лежать декоративні
   кола, які інакше розширюють документ. */
.bleed {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}
.bleed--tint  { background: var(--color-bg-tint); }
.bleed--brand { background: var(--color-brand-100); }
.bleed--dark  { background: #0D0A23; }

/* Внутрішній контейнер смуги: повертає вміст у сітку сторінки. */
.shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.shell--pad { padding: clamp(48px, 6vw, 80px) var(--gutter); }

/* Секція без смуги — просто вертикальний стек. */
.stack {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
}
.stack--center { align-items: center; }

/* Якір під липку шапку. */
[id] { scroll-margin-top: 90px; }

/* ── Сітки ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 2vw, 24px); }

@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
}


/* ═══════════════ components\button.css ═══════════════ */
/* ============================================================
   Кнопки й текстові посилання-стрілки.

   Один клас .btn + модифікатор кольору. Розмір за замовчуванням
   великий (56px), бо в макеті це основна кнопка на смугах.
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 30px;
  font-family: var(--font-family-base);
  font-size: var(--fz-b1);
  font-weight: var(--fw-bold);
  line-height: 1;
  border: none;
  border-radius: var(--input-radius);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn svg { display: block; flex: none; }

/* ── Розміри ── */
.btn--md { height: 52px; padding: 0 28px; font-size: var(--btn-font-size); }
.btn--sm { height: 48px; padding: 0 24px; font-size: var(--btn-font-size); }
.btn--xs { height: 44px; padding: 0 16px; font-size: var(--btn-font-size); }
.btn--full { width: 100%; }

/* ── Кольори ──
   Білі та скляні призначені для фіолетових смуг,
   brand і tint — для світлих секцій. */
.btn--white { background: #fff; color: var(--color-brand-100); }
.btn--white:hover { transform: translateY(-1px); color: var(--color-brand-100); }

.btn--plain { background: #fff; color: var(--color-text-title); }
.btn--plain:hover { transform: translateY(-1px); color: var(--color-text-title); }

.btn--glass { background: rgba(255, 255, 255, .14); color: #fff; }
.btn--glass:hover { background: rgba(255, 255, 255, .24); color: #fff; }

.btn--brand { background: var(--color-brand-100); color: #fff; }
.btn--brand:hover { background: var(--color-brand-80); color: #fff; }

.btn--tint { background: var(--color-brand-5); color: var(--color-brand-100); }
.btn--tint:hover { background: var(--color-brand-20); color: var(--color-brand-100); }

.btn--ghost {
  background: #fff;
  color: var(--color-text-title);
  border: 1px solid var(--color-stroke);
}
.btn--ghost:hover { border-color: var(--color-brand-50); color: var(--color-text-title); }

/* Темна кнопка з UI-кіту: --btn-bg-primary у токенах саме темно-синій,
   не фіолетовий. Тримаємо для форм і кабінетів. */
.btn--dark { background: var(--btn-bg-primary); color: var(--btn-fg-primary); }
.btn--dark:hover { transform: translateY(-1px); color: var(--btn-fg-primary); }

/* ── Посилання зі стрілкою ── */
.lnk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  font-size: var(--btn-font-size);
  font-weight: var(--fw-bold);
  color: var(--color-brand-100);
}
.lnk svg { display: block; flex: none; }
.lnk--yellow { color: var(--color-yellow-100); }
.lnk--white { color: #fff; }

/* ── Значок-пігулка ── */
.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--color-brand-100);
  font-size: var(--fz-b5);
  font-weight: var(--fw-bold);
  padding: 8px 16px;
  border-radius: var(--radius-xl);
  transform: rotate(-2deg);
}


/* ═══════════════ components\header.css ═══════════════ */
/* ============================================================
   Шапка з мега-меню. Спільна для всіх сторінок проєкту.

   Розмітка:
   header.hdr > .hdr__in > [логотип] [nav.hdr__nav] [.hdr__spacer]
                           [button.hdr__burger] [.hdr__auth]

   Стан відкритого пункту — клас .is-open на .navitem (ставить JS),
   стан мобільного меню — .is-menu-open на .hdr.
   ============================================================ */

.hdr {
  /* Відступ низу шапки винесений у змінну: від нього рахується, де саме
     починається випадна панель, щоб виточки сідали рівно на шов. */
  --hdr-pad-b: 16px;

  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(252, 250, 255, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-stroke);
}

.hdr__in {
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px var(--gutter) var(--hdr-pad-b);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  row-gap: 8px;
}

.hdr__logo { height: 34px; width: auto; flex: none; display: block; }
.hdr__nav { display: flex; gap: 4px; flex: 1; align-self: stretch; align-items: stretch; }
.hdr__spacer { flex: 1; }
.hdr__auth { display: flex; align-items: center; gap: 12px; }
.hdr__burger { display: none; }

/* ── Пункт меню ── */
.navitem { position: relative; display: flex; align-items: center; }

.navitem__btn {
  height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-family-base);
  font-size: var(--btn-font-size);
  font-weight: var(--fw-semibold);
  color: var(--color-text-title);
  background: transparent;
  border: none;
  border-radius: var(--input-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.navitem__btn svg { transition: transform var(--dur-fast) var(--ease-out); }
.navitem.is-open > .navitem__btn { background: var(--color-brand-100); color: #fff; }
.navitem.is-open > .navitem__btn svg { transform: rotate(180deg); }

/* ── Випадне меню ── */
.navmenu {
  position: absolute;
  top: calc(100% + var(--hdr-pad-b));
  left: 0;
  z-index: var(--z-dropdown);
  width: 560px;
  background: #fff;
  border: 1px solid var(--color-stroke);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 12px;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.navitem.is-open .navmenu {
  display: grid;
  animation: ds-open var(--dur-base) var(--ease-out);
}

/* Увігнуті кути на стику з шапкою.
   Панель звисає з шапки: верхньої рамки в неї немає, верхні кути прямі.
   Без цих двох виточок стик виглядає обрубаним — саме їх я загубив при
   перенесенні макета.

   Як влаштовано: квадрат 17×17 виноситься за край панелі, у ньому
   радіальний градієнт із центром у внутрішньому куті — всередині кола
   прозоро (видно тло сторінки), тонке кільце малює лінію рамки, далі
   білим до краю, щоб зшитися з панеллю. Виходить увігнута чверть кола. */
.navmenu::before,
.navmenu::after {
  content: "";
  position: absolute;
  top: 0;
  width: 17px;
  height: 17px;
}
.navmenu::before {
  left: -16px;
  background: radial-gradient(circle 16.5px at 0 17px,
    rgba(0, 0, 0, 0) 15.5px, var(--color-stroke) 16px, #fff 16.6px);
}
.navmenu::after {
  right: -16px;
  background: radial-gradient(circle 16.5px at 17px 17px,
    rgba(0, 0, 0, 0) 15.5px, var(--color-stroke) 16px, #fff 16.6px);
}

.navmenu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: var(--input-radius);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.navmenu__item:hover { background: var(--color-bg-tint); }

.navmenu__ico {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--input-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.navmenu__ico img { width: 24px; height: 24px; object-fit: contain; }

.navmenu__txt { display: flex; flex-direction: column; gap: 1px; }
.navmenu__t { font-weight: var(--fw-bold); color: var(--color-text-title); }
.navmenu__d { color: var(--color-text-body); }

/* ── Мобільна шапка ──
   У верхньому рядку лишаються тільки логотип і бургер;
   навігація та кнопки входу переїжджають усередину меню. */
@media (max-width: 900px) {
  .hdr__in { flex-wrap: wrap; padding: 10px var(--gutter); gap: 8px; }
  .hdr__logo { height: 30px; }
  .hdr__nav { display: none; }
  .hdr__spacer { display: none; }
  .hdr__auth { display: none; }

  .hdr__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--color-stroke);
    border-radius: var(--input-radius);
    cursor: pointer;
    color: var(--color-text-title);
  }

  .hdr.is-menu-open .hdr__nav {
    display: flex;
    flex-direction: column;
    width: 100%;
    order: 5;
    gap: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--color-stroke);
  }
  .hdr.is-menu-open .hdr__auth {
    display: flex;
    width: 100%;
    order: 6;
    gap: 8px;
    padding-bottom: 6px;
  }
  .hdr.is-menu-open .hdr__auth > * { flex: 1; }
  .hdr.is-menu-open .navmenu {
    position: static;
    width: 100%;
    border: none;
    padding: 4px 0 8px;
    grid-template-columns: 1fr;
  }
  /* У мобільному меню панель вбудована в потік, стику з шапкою немає —
     виточки тут не мають сенсу. */
  .navmenu::before,
  .navmenu::after { display: none; }
  .navitem__btn { width: 100%; justify-content: space-between; }
}


/* ═══════════════ components\footer.css ═══════════════ */
/* ============================================================
   Футер. Спільний для всіх сторінок проєкту.
   ============================================================ */

.ftr {
  margin-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--color-stroke);
  background: var(--color-bg-secondary);
}

.ftr__in {
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px var(--gutter) 32px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
}

.ftr__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.ftr__brand img { height: 30px; width: auto; }

.ftr__about {
  margin: 0;
  max-width: 260px;
  color: var(--color-text-body);
  line-height: var(--lh-1_60);
}

.ftr__cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 230px;
}
.ftr__cta .btn { height: 44px; padding: 0 16px; }

.ftr__col { display: flex; flex-direction: column; gap: 12px; }
.ftr__h { font-size: var(--fz-b1); font-weight: var(--fw-bold); color: var(--color-text-title); }
.ftr__col a {
  font-weight: var(--fw-medium);
  color: var(--color-text-body);
}
.ftr__col a:hover { color: var(--color-brand-100); }

.ftr__low { border-top: 1px solid var(--color-stroke); }
.ftr__lowin {
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ftr__lowin span,
.ftr__lowin a {
  color: var(--color-text-caption);
  font-weight: var(--fw-medium);
}
.ftr__lowin a:hover { color: var(--color-brand-100); }

@media (max-width: 900px) {
  .ftr__in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .ftr__in { grid-template-columns: 1fr; }
  .ftr__cta { max-width: none; }
}


/* ═══════════════ components\card.css ═══════════════ */
/* ============================================================
   Картки. Чотири типи, які повторюються по всьому проєкту:

     .story — велика картка-персона з ілюстрацією згори
     .tool  — рядок каталогу: іконка, назва, опис, стрілка
     .book  — обкладинка бібліотеки 3:4
     .post  — картка статті блогу

   Спільне правило дизайн-системи: тіней немає, глибина
   робиться бордером і зсувом по Y на ховері.
   ============================================================ */

/* ══════════ .story ══════════ */
.story {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--dur-base) var(--ease-out);
}
.story:hover { transform: translateY(-3px); }
.story--brand { background: var(--color-brand-100); }

.story__art {
  position: relative;
  height: 176px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.story__art img { max-height: 158px; object-fit: contain; display: block; }
.story__art--pink  { background: var(--color-pink-10); }
.story__art--blue  { background: var(--color-blue-10); }
.story__art--glass { background: rgba(255, 255, 255, .12); }

.story__chip {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #fff;
  font-size: var(--fz-b5);
  font-weight: var(--fw-bold);
  padding: 6px 14px;
  border-radius: var(--radius-xl);
  transform: rotate(-3deg);
}
.story__chip--pink  { color: var(--color-pink-100); }
.story__chip--brand { color: var(--color-brand-100); }
.story__chip--blue  { color: #0090C9; }

.story__flag {
  position: absolute;
  top: 14px;
  right: -4px;
  z-index: 3;
  background: var(--color-yellow-100);
  color: #0D0A23;
  font-size: var(--fz-b5);
  font-weight: var(--fw-bold);
  padding: 6px 14px;
  border-radius: var(--radius-xl);
  transform: rotate(4deg);
}

.story__body {
  padding: clamp(20px, 2.4vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.story__t {
  font-size: clamp(19px, 1.9vw, 23px);
  font-weight: var(--fw-bold);
  color: var(--color-text-title);
  line-height: 1.25;
}
.story--brand .story__t { color: #fff; }

.story__list { display: flex; flex-direction: column; gap: 9px; }
.story__li {
  display: flex;
  gap: 10px;
  font-weight: var(--fw-medium);
  color: var(--color-text-body);
  line-height: var(--lh-1_40);
}
.story--brand .story__li { color: #fff; }
.story__li svg { flex: none; margin-top: 2px; }
.story__body .lnk { margin-top: auto; }

/* ══════════ .tool ══════════ */
.tool {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr 34px;
  align-items: start;
  column-gap: 18px;
  row-gap: 7px;
  padding: clamp(16px, 1.8vw, 20px) 12px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out);
}
.tool:hover { background: var(--color-bg-tint); }

.tool__ico {
  grid-row: span 2;
  align-self: start;
  margin-top: 2px;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tool__ico img { width: 26px; height: 26px; object-fit: contain; }

.tool__head { display: flex; align-items: center; gap: 10px; }
.tool__name {
  font-size: var(--fz-b1);
  font-weight: var(--fw-bold);
  color: var(--color-text-title);
  line-height: 1.35;
}
.tool__go {
  grid-row: span 2;
  width: 34px;
  height: 34px;
  align-self: center;
  flex: none;
  border-radius: var(--radius-xl);
  background: var(--color-brand-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tool__desc {
  grid-column: 2;
  max-width: 400px;
  font-size: var(--fz-b1);
  color: var(--color-text-body);
  line-height: var(--lh-1_40);
  font-weight: var(--fw-medium);
}

/* ══════════ .book ══════════ */
.book { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }

.book__cover {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  transition: transform var(--dur-slow) var(--ease-out);
}
/* Нахил кожної обкладинки задає інлайновий стиль від рендерера;
   на ховері вирівнюємо й піднімаємо. */
.book:hover .book__cover { transform: translateY(-8px) rotate(0deg); }

.book__brand { font-size: var(--fz-b5); letter-spacing: .14em; font-weight: var(--fw-bold); }
.book__glyph { font-size: 56px; line-height: .92; font-weight: var(--fw-bold); letter-spacing: -.03em; }
.book__line  { font-size: var(--fz-b1); line-height: 1.25; font-weight: var(--fw-bold); }

.book__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.book__pill {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .55);
}

.book__meta { display: flex; flex-direction: column; gap: 3px; padding: 0 2px; }
.book__t { font-weight: var(--fw-bold); color: var(--color-text-title); line-height: 1.3; }
.book__c { color: var(--color-text-caption); font-weight: var(--fw-medium); }

/* ══════════ .post ══════════ */
.post {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-stroke);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.post:hover { transform: translateY(-3px); border-color: var(--color-brand-50); }

.post__art {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: var(--color-bg-tint);
}
.post__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post__fallback {
  width: 100%;
  height: 86%;
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
}

.post__body {
  padding: clamp(18px, 2vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
/* Заголовок мусить домінувати: 16 проти 14 давало різницю у два пікселі,
   і картка читалась суцільною стіною тексту. */
.post__t {
  font-size: var(--fz-h1);
  font-weight: var(--fw-bold);
  color: var(--color-text-title);
  line-height: 1.28;
  letter-spacing: -.01em;
}

/* Опис обрізаємо двома рядками: без обмеження описи були від 111 до 177
   символів, висоти карток розлітались, а знизу лишались порожні провали. */
.post__x {
  color: var(--color-text-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-1_40);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Без лінії згори: картка вже обведена рамкою, і волосяна риска
   всередині нічого не розділяла — дата й так відрізняється кольором
   і кеглем. Відстань робить ту саму роботу тихіше. */
.post__foot {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Категорія стискається й обрізається трьома крапками, дата — ні:
   у вузькій картці довга назва рубрики інакше з'їдала дату. */
.post__cat {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fz-b5);
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--color-brand-100);
}
.post__date {
  margin-left: auto;
  flex: none;
  white-space: nowrap;
  font-size: var(--fz-b5);
  font-weight: var(--fw-medium);
  color: var(--color-text-title);
}


/* ═══════════════ components\controls.css ═══════════════ */
/* ============================================================
   Дрібні керуючі елементи: таби, чипи-фільтри, акордеон.
   Стан тримається на ARIA-атрибутах, а не на класах —
   тоді розмітка лишається доступною, а CSS не дублює правду.
   ============================================================ */

/* ══════════ Таби ══════════
   Активний = [aria-selected="true"]. */
.tabs {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
  flex-wrap: wrap;
  justify-content: center;
}

.tab {
  position: relative;
  padding: 0 2px 10px;
  font-family: var(--font-family-base);
  font-size: var(--fz-b1);
  font-weight: var(--fw-bold);
  color: var(--color-text-caption);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out);
}
.tab:hover { color: var(--color-text-title); }
.tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: var(--radius-xs);
  background: var(--color-brand-100);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}
.tab[aria-selected="true"] { color: var(--color-text-title); }
.tab[aria-selected="true"]::after { transform: scaleX(1); }

/* ══════════ Чипи-фільтри ══════════
   Активний = [aria-pressed="true"]. */
.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.chip-btn {
  height: 38px;
  padding: 0 18px;
  font-family: var(--font-family-base);
  font-size: var(--btn-font-size);
  font-weight: var(--fw-bold);
  color: var(--color-text-title);
  background: #fff;
  border: none;
  border-radius: var(--input-radius);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.chip-btn:active { transform: scale(.96); }
.chip-btn[aria-pressed="true"] { background: var(--color-brand-100); color: #fff; }

/* ══════════ Акордеон ══════════
   Відкрите питання = кнопка [aria-expanded="true"],
   відповідь ховається атрибутом hidden. */
.acc { display: flex; flex-direction: column; }

.acc__item { border-top: 1px solid rgba(128, 67, 247, .16); }

.acc__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(18px, 2vw, 22px) 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-family-base);
  font-size: clamp(17px, 1.7vw, 19px);
  font-weight: var(--fw-bold);
  color: var(--color-text-title);
  line-height: 1.35;
}

.acc__plus {
  width: 32px;
  height: 32px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-5);
  border-radius: var(--radius-xl);
  transition: background var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.acc__plus path { stroke: #8043F7; }
.acc__q[aria-expanded="true"] .acc__plus { background: var(--color-brand-100); transform: rotate(45deg); }
.acc__q[aria-expanded="true"] .acc__plus path { stroke: #fff; }

.acc__a {
  margin: 0;
  padding: 0 60px 22px 4px;
  font-size: var(--fz-b1);
  color: var(--color-text-body);
  line-height: var(--lh-1_60);
  animation: ds-open var(--dur-base) var(--ease-out);
}
.acc__a[hidden] { display: none; }

/* ══════════ Плаваюча картка-факт ══════════
   Використовується поверх ілюстрацій (герой, промо-блоки). */
.float { position: absolute; z-index: 2; }
.float__card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.float__val {
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--color-text-title);
  line-height: 1;
  letter-spacing: .02em;
}
.float__sub {
  font-size: var(--fz-b5);
  color: var(--color-text-caption);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}
.float__label {
  font-size: var(--fz-b5);
  letter-spacing: .1em;
  font-weight: var(--fw-bold);
  color: var(--color-text-caption);
}
.float__row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--fw-semibold);
  color: var(--color-text-body);
}
.float__row.is-first { font-weight: var(--fw-bold); color: var(--color-text-title); }
.float__rank {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--radius-xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fz-b5);
  background: var(--color-brand-5);
}
.float__rank.is-top { background: var(--color-yellow-100); }
.float__delta { margin-left: auto; color: var(--color-text-caption); }
.float__delta.is-up { color: var(--color-success-100); }
.float__ok { font-weight: var(--fw-bold); color: var(--color-text-title); }


/* ═══════════════ components\form.css ═══════════════ */
/* ============================================================
   Поля форми. Розміри беруться з UI-кіту (--input-*), тому
   інпут, селект і пошук завжди однакової висоти.
   ============================================================ */

.field { display: flex; flex-direction: column; gap: 6px; }
.field--grow { flex: 1; min-width: 180px; }

.field__label {
  font-size: var(--fz-b5);
  font-weight: var(--fw-semibold);
  color: var(--color-text-caption);
}

.input,
.select {
  height: var(--input-height);
  padding: 0 var(--input-padding-x);
  font-family: var(--font-family-base);
  font-size: var(--btn-font-size);
  font-weight: var(--fw-medium);
  color: var(--color-text-title);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  transition: border-color var(--dur-fast) var(--ease-out);
  width: 100%;
}
.input::placeholder { color: var(--input-placeholder); font-weight: var(--fw-regular); }
.input:hover,
.select:hover { border-color: var(--color-brand-50); }
.input:focus-visible,
.select:focus-visible { border-color: var(--color-brand-100); }

/* Стрілка селекта малюється фоном — нативна різна в кожному браузері. */
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%238B93BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* Пошук з іконкою всередині */
.search { position: relative; }
.search .input { padding-left: 40px; }
.search__ico {
  position: absolute;
  left: 14px;
  top: 50%;
  translate: 0 -50%;
  pointer-events: none;
  display: block;
}

/* Панель фільтрів над списком */
.toolbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.toolbar .btn { flex: none; }

@media (max-width: 640px) {
  .toolbar { align-items: stretch; }
  .toolbar .btn { width: 100%; }
}


/* ═══════════════ components\pager.css ═══════════════ */
/* ============================================================
   Пагінація та порожній стан списку.
   Активна сторінка — [aria-current="page"], як і має бути.
   ============================================================ */

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pager__btn {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-base);
  font-size: var(--btn-font-size);
  font-weight: var(--fw-bold);
  color: var(--color-text-title);
  background: #fff;
  border: 1px solid var(--color-stroke);
  border-radius: var(--input-radius);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.pager__btn:hover:not(:disabled) { border-color: var(--color-brand-50); color: var(--color-text-title); }
.pager__btn:disabled { opacity: .45; cursor: default; }
.pager__btn[aria-current="page"] {
  background: var(--color-brand-100);
  border-color: var(--color-brand-100);
  color: #fff;
}
.pager__btn svg { display: block; }

/* Проміжок «…» між далекими сторінками */
.pager__gap {
  min-width: 24px;
  text-align: center;
  color: var(--color-text-caption);
  font-weight: var(--fw-bold);
  user-select: none;
}

/* Порожній результат фільтра */
.empty {
  padding: clamp(32px, 5vw, 56px) var(--gutter);
  text-align: center;
  border: 1px dashed var(--color-stroke);
  border-radius: var(--radius-md);
  color: var(--color-text-caption);
  font-size: var(--fz-b1);
  font-weight: var(--fw-medium);
}
.empty b { display: block; color: var(--color-text-title); margin-bottom: 6px; font-size: var(--fz-h2); }


/* ═══════════════ components\prose.css ═══════════════ */
/* ============================================================
   Типографіка довгого тексту.

   Застосовується на .prose — тілі статті, яке приходить із
   редактора. Усередині немає класів: стилізуємо самі теги, бо
   розмітку генерує CMS і керувати нею з боку верстки не можна.

   Ширина рядка тримається 68 символів: довші рядки читати важче,
   і саме через неї стаття не розпливається на весь монітор.
   ============================================================ */

.prose {
  max-width: 68ch;
  margin-inline: auto;
  color: var(--color-text-body);
  line-height: var(--lh-1_60);
}

/* Вертикальний ритм задається зверху одним правилом, а не
   марджинами на кожному теґу — так між блоками не накопичуються
   подвійні відступи. */
.prose > * + * { margin-top: 1.1em; }

.prose h2,
.prose h3 { color: var(--color-text-title); letter-spacing: -.015em; }

.prose h2 {
  margin-top: 2em;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.2;
  font-weight: var(--fw-bold);
}
.prose h3 {
  margin-top: 1.6em;
  font-size: var(--fz-h1);
  line-height: 1.3;
  font-weight: var(--fw-bold);
}

.prose p { font-size: inherit; }

/* Виняток — посилання, що є частиною компонента: кнопки й пункти змісту
   мають власний вигляд, і підкреслення тексту статті їм не належить.
   Новий компонент із посиланнями всередині статті додається сюди. */
.prose a:not(.btn):not(.toc__link) {
  color: var(--color-brand-100);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:not(.btn):not(.toc__link):hover { color: var(--color-brand-80); }

.prose strong { font-weight: var(--fw-bold); color: var(--color-text-title); }

.prose ul,
.prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .5em; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li {
  position: relative;
  padding-left: 28px;
}
/* Крапка списку — фірмова: колір бренда з мʼяким ореолом. */
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-brand-100);
  box-shadow: 0 0 0 4px var(--color-brand-5);
}
.prose ol { list-style: decimal; }
.prose ol > li::marker { color: var(--color-brand-100); font-weight: var(--fw-bold); }

.prose blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 20px 24px;
  background: var(--color-bg-tint);
  border-radius: var(--radius-md);
  font-weight: var(--fw-medium);
  color: var(--color-text-title);
}
.prose blockquote p + p { margin-top: .8em; }

.prose img,
.prose video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.prose figure { margin: 0; }
.prose figcaption {
  margin-top: 10px;
  font-size: var(--fz-b5);
  color: var(--color-text-caption);
  text-align: center;
}

/* Таблиця має скролитись сама, а не розпирати сторінку. */
.prose table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--color-stroke);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.prose th,
.prose td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--color-stroke); }
.prose th { background: var(--color-bg-tint); font-weight: var(--fw-bold); color: var(--color-text-title); }
.prose tr:last-child td { border-bottom: none; }

.prose code {
  padding: 2px 6px;
  background: var(--color-bg-tint);
  border-radius: var(--radius-xs);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
}
.prose pre {
  padding: 18px 20px;
  background: #0D0A23;
  color: #E6D9FD;
  border-radius: var(--radius-md);
  overflow-x: auto;
}
.prose pre code { background: none; padding: 0; color: inherit; }

.prose hr {
  border: none;
  border-top: 1px solid var(--color-stroke);
  margin: 2em 0;
}

/* Вставлені промо-блоки виходять за межу тексту: вони ширші за
   колонку читання, щоб не губитись у потоці. */
.prose > .promo {
  max-width: none;
  width: 100%;
  margin-top: 2em;
  margin-bottom: 2em;
}


/* ═══════════════ components\promo.css ═══════════════ */
/* ============================================================
   Промо-блоки всередині статті.

   Задача: людина прийшла з пошуку по темі й не розуміє, що їй
   треба зареєструватись у Хабі. Тому в текст вставляються блоки
   різної ваги — від тонкої смужки до форми запису.

   Ваги, від найлегшої до найважчої:
     .promo--bar    тонка смужка з іконкою (після вступу)
     .promo--read   «Читай також» — внутрішнє перелінкування
     .promo--wide   кольоровий банер із кнопкою
     .promo--card   картка з переліком і кнопкою
     .promo--form   форма запису — найважча, ставиться один раз

   Розставляє їх blog_render_lib.php за правилом «після вступу,
   далі після кожного другого H2».
   ============================================================ */

.promo {
  display: block;
  border-radius: var(--radius-md);
  text-decoration: none;
}

/* ══════════ Тонка смужка ══════════ */
.promo--bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  background: linear-gradient(90deg, var(--color-pink-10), var(--color-brand-5) 55%, var(--color-blue-10));
  color: var(--color-text-title);
  font-weight: var(--fw-bold);
  transition: transform var(--dur-fast) var(--ease-out);
}
.promo--bar:hover { transform: translateY(-2px); color: var(--color-text-title); }
.promo--bar .promo__ico { flex: none; display: block; }
.promo--bar .promo__go { margin-left: auto; flex: none; display: block; }

/* ══════════ Читай також ══════════ */
.promo--read {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 20px;
  align-items: center;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--color-stroke);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.promo--read:hover { border-color: var(--color-brand-50); }
.promo--read img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
  margin: 0;
}
.promo--read .promo__kicker {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  margin-bottom: 8px;
  background: var(--color-success-10);
  color: var(--color-success-100);
  border-radius: var(--radius-xl);
  font-size: var(--fz-b5);
  font-weight: var(--fw-bold);
}
.promo--read .promo__t {
  display: block;
  font-size: var(--fz-h2);
  font-weight: var(--fw-bold);
  color: var(--color-text-title);
  line-height: 1.3;
}

/* ══════════ Кольоровий банер ══════════ */
.promo--wide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: clamp(24px, 3vw, 34px);
  background: var(--color-brand-100);
  overflow: hidden;
}
.promo--wide .promo__ring {
  position: absolute;
  top: -60%;
  right: -8%;
  width: 260px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 34px solid rgba(255, 255, 255, .09);
}
.promo--wide .promo__t {
  position: relative;
  max-width: 26ch;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: var(--fw-bold);
  color: #fff;
  line-height: 1.25;
}

/* ══════════ Картка з переліком ══════════
   Біла картка в рамці, як плитки інструментів на головній; праворуч
   колонка з ілюстрацією на бренд-фіолетовому, як у попапі. Одна дія. */
.promo--card {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  background: #fff;
  border: 1px solid var(--color-stroke);
  overflow: hidden;
}
.promo--card .promo__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 3vw, 30px);
}
.promo__kicker {
  font-size: var(--fz-b5);
  font-weight: var(--fw-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-brand-100);
}
.promo--card .promo__t {
  display: block;
  font-size: clamp(20px, 2.1vw, 25px);
  font-weight: var(--fw-bold);
  color: var(--color-text-title);
  line-height: 1.25;
}
.promo--card .promo__t mark {
  background: var(--color-yellow-100);
  color: var(--color-text-title);
  padding: 0 8px;
  border-radius: var(--radius-sm);
  display: inline-block;
  transform: rotate(-1deg);
}
.promo--card .promo__list {
  display: grid;
  gap: 8px;
  margin: 4px 0 6px;
  padding: 0;
  list-style: none;
}
.promo--card .promo__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-title);
  font-weight: var(--fw-medium);
}
.promo--card .promo__list li::before { content: none; }
.promo__ico {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.promo__ico img { display: block; width: 22px; height: 22px; }
.promo__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: auto; }
.promo__note { font-size: var(--fz-b5); color: var(--color-text-caption); }

.promo--card .promo__art {
  position: relative;
  background: var(--color-brand-100);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  min-height: 240px;
}
.promo--card .promo__art img {
  width: 70%;
  max-width: 220px;
  height: auto;
  display: block;
  margin-bottom: -2px;
}
.promo--card .promo__ring {
  position: absolute;
  top: -40%;
  right: -35%;
  width: 95%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 30px solid rgba(255, 255, 255, .08);
}

/* ══════════ Форма запису ══════════ */
.promo--form {
  position: relative;
  padding: clamp(24px, 3vw, 34px);
  background: var(--color-success-100);
  overflow: hidden;
}
.promo--form .promo__t {
  display: block;
  max-width: 30ch;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: var(--fw-bold);
  color: #fff;
  line-height: 1.3;
  margin-bottom: 18px;
}
.promo__fields { display: grid; gap: 10px; max-width: 420px; }
/* 16px, а не контрольні 14: iOS Safari збільшує сторінку на фокусі в дрібнішому полі. */
.promo__fields .input { height: 52px; border-color: transparent; font-size: var(--fz-b1); }
.promo__fields .btn { width: 100%; }

/* ══════════ Спільне ══════════ */
.promo__go-circle {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--radius-xl);
  border: 1px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 700px) {
  .promo--read { grid-template-columns: 1fr; }
  .promo--card { grid-template-columns: 1fr; }
  .promo--card .promo__art { display: none; }
  .promo--wide { flex-direction: column; align-items: flex-start; }
  .promo__actions { width: 100%; }
  .promo__actions .btn { width: 100%; }
}


/* ═══════════════ components\toc.css ═══════════════ */
/* ============================================================
   Зміст статті — інтерактивна навігація, а не список.

   Автор пише звичайний <ul> під заголовком «Зміст…»; рендерер
   (blog_enhance_toc) перетворює його на цей компонент, а article.js
   підсвічує поточний розділ і рухає смужку прогресу.

   Стан активного пункту — на .is-on, бо це не інтерактивний контрол,
   а індикація позиції: ARIA-атрибута з такою семантикою немає.
   ============================================================ */

.toc {
  position: relative;
  display: block;
  background: var(--color-bg-tint);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Смужка прогресу по розділах — тонка, зверху, без підписів. */
.toc__bar {
  height: 3px;
  background: var(--color-brand-20);
}
.toc__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-brand-100);
  transition: width var(--dur-base) var(--ease-out);
}

.toc__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px clamp(18px, 2vw, 24px);
}
.toc__t {
  font-size: var(--fz-h2);
  font-weight: var(--fw-bold);
  color: var(--color-text-title);
}
.toc__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: var(--radius-xl);
  background: var(--color-brand-100);
  color: #fff;
  font-size: var(--fz-b5);
  font-weight: var(--fw-bold);
}
.toc__toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family-base);
  font-size: var(--btn-font-size);
  font-weight: var(--fw-bold);
  color: var(--color-brand-100);
}
.toc__toggle svg { transition: transform var(--dur-fast) var(--ease-out); }
.toc__toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }

/* Компонент живе всередині .prose, а тамтешні правила для ol/a
   специфічніші за одиночний клас. Тому тут селектори з двох класів:
   інакше лишалась подвійна нумерація і підкреслені посилання. */
.toc .toc__list {
  list-style: none;
  margin: 0;
  padding: 0 clamp(10px, 1.4vw, 14px) clamp(12px, 1.6vw, 16px);
  display: grid;
  gap: 2px;
}
.toc__list[hidden] { display: none; }
.toc .toc__item { margin: 0; padding-left: 0; }
.toc .toc__item::before { content: none; }
.toc .toc__item::marker { content: none; }

.toc .toc__link {
  display: flex;
  text-decoration: none;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text-body);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.toc .toc__link:hover { background: #fff; color: var(--color-text-title); }

.toc__n {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  background: #fff;
  color: var(--color-brand-100);
  font-size: var(--fz-b5);
  font-weight: var(--fw-bold);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.toc__text { line-height: 1.35; }

/* Поточний розділ. */
.toc__item.is-on .toc__link { background: #fff; color: var(--color-text-title); font-weight: var(--fw-semibold); }
.toc__item.is-on .toc__n { background: var(--color-brand-100); color: #fff; }

/* Прочитані розділи трохи тьмяніші — видно, де ти вже був. */
.toc__item.is-done .toc__n { background: var(--color-brand-20); color: var(--color-brand-100); }

/* «Згорнути» тримається правого краю на будь-якій ширині: це керування
   блоком, а не продовження заголовка. Тому й переносу рядка тут немає —
   «Зміст • лічильник • Згорнути» вміщуються навіть на 320px. */
@media (max-width: 640px) {
  .toc__head { gap: 8px; padding-inline: 16px; }
  .toc__toggle span { display: none; }   /* лишається сама стрілка */
}


/* ═══════════════ components\rail.css ═══════════════ */
/* ============================================================
   Бічна панель швидких дій.

   Три плитки праворуч посеред екрана: тест рівня, реєстрація,
   пробний урок. Завжди на видноті, не залежить від прокрутки.

   Коли вільного поля праворуч від контенту вже нема (до 1320px:
   колонка 1120 + плитка 76 + відступи), панель переїжджає вниз
   і стає смугою з трьох кнопок.
   ============================================================ */

.rail {
  /* Системні синій і зелений (#00b7ff, #01b58b) з білим текстом дають
     контраст 2.3–2.6:1 — не читається. Тут темніші відтінки тих самих
     кольорів із контрастом понад 4.5:1; фіолетовий бренд проходить сам. */
  --rail-blue:  #0a6fb5;
  --rail-green: #0b7f66;

  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-aside);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rail__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 76px;
  height: 76px;
  border-radius: var(--radius-md);
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-size: var(--btn-font-size);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  transition: transform var(--dur-fast) var(--ease-out),
              filter var(--dur-fast) var(--ease-out);
}
.rail__btn:hover { transform: translateX(-4px); filter: brightness(1.06); color: #fff; }
.rail__btn:focus-visible { outline: 3px solid var(--color-text-title); outline-offset: 2px; }

/* Іконки в нас темні на світлому — на кольорових плитках інвертуємо. */
.rail__btn img { width: 26px; height: 26px; object-fit: contain; display: block; filter: brightness(0) invert(1); }

/* Кожна дія — свій колір системи, як плашки під фінальним закликом. */
.rail__btn--test   { background: var(--rail-blue); }
.rail__btn--signup { background: var(--color-brand-100); }
.rail__btn--lesson { background: var(--rail-green); }

@media (max-width: 1320px) {
  .rail {
    right: 0;
    left: 0;
    top: auto;
    bottom: 0;
    transform: none;
    flex-direction: row;
    gap: 1px;
    background: var(--color-stroke);
    border-top: 1px solid var(--color-stroke);
  }
  .rail__btn {
    flex: 1;
    width: auto;
    height: 56px;
    border-radius: 0;
    flex-direction: row;
    gap: 8px;
  }
  .rail__btn:hover { transform: none; }
  .rail__btn img { width: 20px; height: 20px; }

  /* Смуга забирає низ екрана — лише на сторінках, де вона є:
     футеру потрібен запас (56 + 1px рамки), а прокрутка до якоря
     не має ховати ціль під смугою. */
  body:has(.rail) { padding-bottom: 57px; }
  html:has(.rail) { scroll-padding-bottom: 57px; }
}

@media print {
  .rail { display: none !important; }
}


/* ═══════════════ components\modal.css ═══════════════ */
/* ============================================================
   Попап реєстрації.

   Одна ціль: перевести читача в реєстрацію вчителя. Форма не
   створює окремого ліда — вона передає email у signup.html, де
   реєстрація сама створює акаунт і правильний CRM-лід. Так
   лід не потрапляє у чужу воронку, а людині не треба вводити
   пошту двічі.

   Показує його engage.js: через 30 секунд або на спробі піти.
   Розмітка лежить у кінці сторінки з атрибутом hidden.

   Три режими:
     — десктоп: вікно по центру на затемненні, хрестик над ним;
     — низький екран (телефон боком): те саме вікно без
       ілюстрації, хрестик усередині, затемнення прокручується;
     — вузький екран: лист знизу БЕЗ затемнення (.modal--sheet,
       клас ставить engage.js) — сторінка лишається живою.
   ============================================================ */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(13, 10, 35, .62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: modal-in var(--dur-base) var(--ease-out);
}
@keyframes modal-in { from { opacity: 0; } to { opacity: 1; } }

/* Картка НЕ ріже overflow: хрестик стоїть над нею. Кути закруглюють
   самі колонки, тому ілюстрація не вилазить за радіус. */
.modal__card {
  position: relative;
  width: min(880px, 100%);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  border-radius: var(--radius-md);
  background: #fff;
  outline: none;
  animation: modal-card var(--dur-slow) var(--ease-out);
}
@keyframes modal-card {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* Хрестик винесений над карткою, як у референсі, — його видно
   одразу і він не конкурує з кнопкою дії. */
.modal__close {
  position: absolute;
  top: -58px;
  left: 50%;
  translate: -50% 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xl);
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.modal__close:focus-visible { outline: 3px solid var(--color-yellow-100); outline-offset: 2px; }
.modal__close svg { display: block; }

.modal__art {
  position: relative;
  background: var(--color-brand-100);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  min-height: 300px;
}
.modal__art img {
  width: 84%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  margin-bottom: -2px;
}
.modal__ring {
  position: absolute;
  top: -35%;
  left: -30%;
  width: 90%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 36px solid rgba(255, 255, 255, .08);
}

.modal__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.modal__t {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--color-text-title);
}
.modal__x { margin: 0; color: var(--color-text-body); }

.modal__form { display: grid; gap: 10px; margin-top: 6px; }
/* 16px, а не контрольні 14: iOS Safari збільшує сторінку, коли
   фокус потрапляє в поле дрібніше за 16px, і не повертає масштаб. */
.modal__form .input { height: 54px; font-size: var(--fz-b1); }
.modal__form .btn { width: 100%; }

.modal__note {
  font-size: var(--fz-b5);
  color: var(--color-text-caption);
}

/* Помилка валідації під полем */
.modal__err {
  font-size: var(--fz-b5);
  font-weight: var(--fw-semibold);
  color: var(--color-error-100);
}
.modal__err[hidden] { display: none; }

/* Поки вікно відкрите — сторінка під ним не прокручується.
   Саме html: у body це не спрацює, бо html має overflow-x:clip,
   і overflow body не піднімається до вікна перегляду. */
html.has-modal { overflow: hidden; }

/* ── Низький екран (телефон боком): вікно вище за екран, тож
   затемнення прокручується, ілюстрацію ховаємо, хрестик усередині. */
@media (max-height: 560px) {
  .modal { align-items: flex-start; overflow-y: auto; }
  .modal__card { grid-template-columns: 1fr; }
  .modal__art { display: none; }
  .modal__body { border-radius: var(--radius-md); padding-top: 52px; }
  .modal__close {
    top: 10px;
    left: auto;
    right: 10px;
    translate: none;
    width: 44px;
    height: 44px;
    border-color: var(--color-stroke);
    color: var(--color-text-title);
  }
  .modal__close:focus-visible { outline-color: var(--color-brand-100); }
}

/* ── Вузькі екрани: лист знизу. */
@media (max-width: 720px) {
  .modal { align-items: flex-end; padding: 0; overflow: visible; }
  .modal__card {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    max-height: 88vh;
  }
  .modal__art { display: none; }
  /* прокручується вміст, а хрестик лишається на місці */
  .modal__body {
    overflow-y: auto;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: 52px 20px 22px;
  }
  .modal__close {
    top: 10px;
    left: auto;
    right: 10px;
    translate: none;
    width: 44px;
    height: 44px;
    border-color: var(--color-stroke);
    color: var(--color-text-title);
  }
  .modal__close:focus-visible { outline-color: var(--color-brand-100); }
}

/* Лист без затемнення: займає до половини екрана, решта сторінки
   клікабельна й прокручується. Так попап не є «нав'язливим
   інтерстиціалом» за правилами Google для мобільного пошуку. */
.modal--sheet {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}
.modal--sheet .modal__card {
  pointer-events: auto;
  max-height: min(50vh, 440px);
  border-top: 1px solid var(--color-stroke);
}

@media (prefers-reduced-motion: reduce) {
  .modal, .modal__card { animation: none; }
}


/* ═══════════════ pages\home.css ═══════════════ */
/* ============================================================
   Головна сторінка. Тільки те, що більше ніде не повторюється.
   Усе повторюване живе в components/.

   Секції: герой → перший тиждень → три історії → інструменти →
   бібліотека → реєстрація → блог → питання → заклик.
   ============================================================ */

/* ══════════ Герой ══════════ */
.hero__ring {
  position: absolute;
  top: -200px;
  right: -200px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 80px solid rgba(255, 255, 255, .06);
}

.hero__in {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) var(--gutter) 0;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: stretch;
  position: relative;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  padding-bottom: clamp(40px, 5vw, 64px);
}

.hero h1 {
  max-width: 560px;
  font-size: clamp(40px, 4.6vw, 62px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  font-weight: var(--fw-bold);
}
/* У герої підкреслення жовте, але сам текст білий, не фіолетовий. */
.hero h1 .u-mark { color: #fff; }
.hero h1 .u-mark svg { bottom: -10px; height: 12px; }

.hero__lead {
  max-width: 440px;
  font-size: var(--fz-b1);
  color: #fff;
  line-height: var(--lh-1_60);
}

.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.hero__stats { display: flex; gap: clamp(24px, 3vw, 48px); flex-wrap: wrap; margin-top: 8px; }
.hero__stat { display: flex; flex-direction: column; gap: 4px; }
.hero__stat b {
  font-size: 30px;
  line-height: 1;
  font-weight: var(--fw-bold);
  color: #fff;
  letter-spacing: .02em;
}
.hero__stat b.is-yellow { color: var(--color-yellow-100); }
.hero__stat span { font-size: var(--fz-b5); color: #fff; font-weight: var(--fw-medium); }

.hero__art {
  position: relative;
  min-height: 460px;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hero__art > img {
  position: relative;
  max-width: 80%;
  max-height: 400px;
  object-fit: contain;
  display: block;
  margin-bottom: -1px;
  z-index: 1;
}

/* Розкладка плаваючих карток. Сам вигляд картки — components/controls.css */
.float--a { top: 4%; right: 0; transform: rotate(2deg); }
.float--a .float__card { padding: 14px 16px; gap: 12px; }
.float--b { top: 42%; left: -10px; transform: rotate(-3deg); }
.float--b .float__card { flex-direction: column; align-items: stretch; gap: 8px; min-width: 170px; }
.float--c { bottom: 5%; right: -6px; transform: rotate(-2deg); }

/* ══════════ Що зміниться за перший тиждень ══════════ */
.week { display: flex; flex-direction: column; gap: 28px; }
.week__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.wcard {
  border-radius: var(--radius-md);
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wcard--tint  { background: var(--color-brand-5); }
.wcard--brand { background: var(--color-brand-100); position: relative; overflow: hidden; }
.wcard--plain {
  background: #fff;
  border: 1px solid var(--color-stroke);
  flex-direction: row;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
}
.wcard__t {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: var(--fw-bold);
  color: var(--color-text-title);
  line-height: 1.25;
}
.wcard--brand .wcard__t { color: #fff; }
.wcard__p {
  max-width: 420px;
  color: var(--color-text-body);
  line-height: var(--lh-1_60);
}
.wcard--brand .wcard__p { color: #fff; }
.wcard__star { position: absolute; top: 22px; right: 24px; transform: rotate(14deg); }
.wcard__body { display: flex; flex-direction: column; gap: 8px; }

/* Макет журналу оцінок усередині картки */
.journal {
  background: #fff;
  border-radius: var(--input-radius);
  padding: 6px 8px;
  margin-top: auto;
  display: flex;
  flex-direction: column;
}
.journal__row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; }
.journal__row + .journal__row { border-top: 1px solid var(--color-bg-tint); }
.journal__row img { width: 28px; height: 28px; border-radius: var(--radius-xl); object-fit: cover; }
.journal__name { flex: 1; font-weight: var(--fw-semibold); color: var(--color-text-title); }
.journal__score { font-weight: var(--fw-bold); color: var(--color-brand-100); }

/* Стовпчикова діаграма «зріз по класу» */
.bars { display: flex; align-items: flex-end; gap: 12px; height: 120px; margin-top: auto; padding: 0 4px; }
.bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bars__bar { width: 100%; background: rgba(255, 255, 255, .35); border-radius: 6px 6px 0 0; }
.bars__bar.is-weak { background: var(--color-yellow-100); }
.bars__lbl { font-size: var(--fz-b5); font-weight: var(--fw-semibold); color: #fff; }
.bars__lbl.is-weak { font-weight: var(--fw-bold); color: var(--color-yellow-100); }

/* Макет роздатки з міткою PDF */
.paper { flex: none; width: 96px; position: relative; }
.paper__sheet {
  width: 84px;
  background: var(--color-bg-tint);
  border: 1px solid var(--color-stroke);
  border-radius: 8px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform: rotate(-4deg);
}
.paper__line { height: 4px; background: var(--color-stroke); border-radius: 3px; }
.paper__line.is-head { height: 5px; width: 70%; background: var(--color-brand-50); }
.paper__tag {
  position: absolute;
  bottom: -6px;
  right: -4px;
  background: var(--color-yellow-100);
  color: #0D0A23;
  font-size: var(--fz-b5);
  font-weight: var(--fw-bold);
  padding: 4px 8px;
  border-radius: var(--radius-xl);
  transform: rotate(4deg);
}

/* ══════════ Три історії ══════════ */
.stories { display: flex; flex-direction: column; gap: clamp(28px, 3.5vw, 44px); align-items: center; }
.stories__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}

/* ══════════ Інструменти ══════════ */
.tools { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); align-items: center; }
.toolgrid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(24px, 3vw, 40px);
  row-gap: 8px;
  align-items: start;
}

/* ══════════ Бібліотека ══════════ */
.lib { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); align-items: center; }
.books { width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 2vw, 24px); }

/* ══════════ Що дає реєстрація ══════════ */
.cmp { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); align-items: center; }
.cmp__grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }

.cmp__col {
  border-radius: var(--radius-md);
  padding: clamp(26px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  overflow: hidden;
}
.cmp__col--free { background: var(--color-bg-tint); }
.cmp__col--paid { background: var(--color-brand-100); }

.cmp__ring {
  position: absolute;
  top: -190px;
  right: -190px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 56px solid rgba(255, 255, 255, .08);
}
.cmp__star { position: absolute; top: 26px; right: 28px; transform: rotate(14deg); }

.cmp__hd { position: relative; display: flex; flex-direction: column; gap: 6px; }
.cmp__kicker { font-size: var(--fz-b5); font-weight: var(--fw-bold); letter-spacing: .14em; color: var(--color-text-caption); }
.cmp__col--paid .cmp__kicker { color: #fff; }
.cmp__t {
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: var(--fw-bold);
  color: var(--color-text-title);
  line-height: 1.2;
  letter-spacing: -.015em;
}
.cmp__col--paid .cmp__t { color: #fff; }

.cmp__list { position: relative; display: flex; flex-direction: column; gap: 12px; }
.cmp__li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fz-b1);
  font-weight: var(--fw-medium);
  color: var(--color-text-title);
}
.cmp__li svg { display: block; flex: none; }
.cmp__li.is-off { color: var(--color-text-disabled); }
.cmp__col--paid .cmp__li { color: #fff; }
.cmp__col .btn { margin-top: auto; position: relative; }

/* ══════════ Блог ══════════ */
.blog { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); align-items: center; }
.posts { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }

/* ══════════ Часті питання ══════════ */
.faq__in {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) var(--gutter);
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.faq__aside { align-self: center; display: flex; flex-direction: column; gap: 16px; }
.faq__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: clamp(26px, 3vw, 34px);
  background: var(--color-brand-100);
  border-radius: var(--radius-md);
}
.faq__card p { color: #fff; }
.faq__card .is-t { font-size: clamp(20px, 2vw, 24px); font-weight: var(--fw-bold); line-height: 1.3; letter-spacing: -.01em; }
.faq__card .is-x { font-size: var(--fz-b1); line-height: var(--lh-1_60); font-weight: var(--fw-medium); }
.faq__deco { display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); padding: 4px 6px; }
.faq__deco svg { display: block; flex: none; }

/* ══════════ Фінальний заклик ══════════ */
.final {
  padding: clamp(56px, 7vw, 96px) clamp(24px, 4vw, 56px) clamp(48px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.final__ring { position: absolute; border-radius: 50%; }
.final__ring--a { top: -220px; left: -160px; width: 460px; height: 460px; border: 64px solid rgba(255, 255, 255, .07); }
.final__ring--b { bottom: -180px; right: -120px; width: 380px; height: 380px; border: 52px solid rgba(255, 255, 255, .07); }
.final__deco { position: absolute; }
.final__kicker { position: relative; font-size: var(--fz-b5); font-weight: var(--fw-bold); letter-spacing: .16em; color: #fff; }
.final h2 {
  max-width: 800px;
  color: #fff;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.12;
  font-weight: var(--fw-bold);
}
.final h2 mark {
  background: var(--color-yellow-100);
  color: #0D0A23;
  padding: 1px 16px;
  border-radius: var(--radius-sm);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transform: rotate(-1deg);
  display: inline-block;
}
.final__p { max-width: 520px; font-size: var(--fz-h2); color: #fff; line-height: var(--lh-1_60); }
.final__cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.final__tags {
  position: relative;
  margin-top: 10px;
  max-width: 720px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.final__tag {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  font-size: var(--fz-b5);
  font-weight: var(--fw-bold);
  color: #0D0A23;
  border-radius: var(--input-radius);
  line-height: 1;
}

/* ══════════ Адаптив ══════════ */
@media (max-width: 1024px) {
  .hero__in { grid-template-columns: 1fr; }
  .hero__art { min-height: 380px; order: -1; }
  .hero__art > img { max-width: 62%; }
  .books { grid-template-columns: repeat(3, 1fr); }
  .stories__grid { grid-template-columns: 1fr; }
  .faq__in { grid-template-columns: 1fr; }
  .faq__aside { order: 2; }
}

@media (max-width: 900px) {
  .toolgrid { grid-template-columns: 1fr; }
  .cmp__grid { grid-template-columns: 1fr; }
  .posts { grid-template-columns: 1fr; }
  .week__grid { grid-template-columns: 1fr; }

  /* Плаваючі картки на вузькому екрані з'їдають ілюстрацію */
  .hero__art { min-height: 300px; }
  .float { transform: none !important; }
  .float--a { top: 0; right: -4px; }
  .float--b { top: auto; bottom: 34%; left: -8px; }
  .float--c { bottom: -2px; right: auto; left: 50%; translate: -50% 0; }
  .float__card { padding: 9px 12px; gap: 8px; }
  .float--a .float__card { padding: 9px 12px; gap: 9px; }
  .float--a svg { width: 34px; height: 34px; }
  .float__val { font-size: 17px; }
  .float__sub, .float__ok, .float__row { font-size: var(--fz-b5); }
  .float--b .float__card { min-width: 132px; }
}

@media (max-width: 640px) {
  .books { grid-template-columns: repeat(2, 1fr); }
  .wcard--plain { flex-direction: column; align-items: flex-start; }
  .hero__stats { gap: 20px; }
  .hero h1 { font-size: clamp(32px, 9vw, 44px); }
  .h-sec { white-space: normal !important; }
  .final h2 { font-size: clamp(28px, 8vw, 40px); }
}


/* ═══════════════ pages\blog.css ═══════════════ */
/* ============================================================
   Блог. Каталог матеріалів для уроку, не стрічка новин.

   Порядок сторінки:
     1. шапка з пошуком
     2. головний матеріал великим кольоровим блоком
     3. три теми — головна навігація й майбутні хаби
     4. рядок на кожну тему, кожна стаття рівно один раз
     5. пошук перемикає сторінку в режим результатів

   Чому без колонки «свіже»: архів маленький, і лід + свіже + рядки
   показували ті самі статті по два-три рази. Повний каталог без
   повторів корисніший, а коли архів виросте — рядки обріжуться.

   Картку статті бере з components/card.css (.post).
   ============================================================ */

.blogPage {
  display: flex;
  flex-direction: column;
  gap: clamp(44px, 5vw, 72px);
}

/* ══════════ Робоча смуга ══════════
   Заголовок, пошук і рубрики в одній кольоровій смузі на всю ширину.
   Раніше це був стос лівого тексту з сірим полем — виглядало як
   документ, а не як інструмент, і лишало праву половину порожньою. */
.blogBand__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: clamp(30px, 4vw, 52px) var(--gutter) clamp(26px, 3.4vw, 44px);
}
.blogBand__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }

/* Шлях назад видно лише на екрані рубрики. */
.blogBand__back {
  display: none;
  align-items: center;
  gap: 7px;
  font-size: var(--btn-font-size);
  font-weight: var(--fw-bold);
  color: var(--color-brand-100);
}
.blogBand__back svg { display: block; flex: none; }
.blogPage[data-mode="search"] .blogBand__back { display: inline-flex; }
.blogBand__copy .h-sec { font-size: clamp(28px, 3vw, 42px); }
.blogBand__lead {
  max-width: 46ch;
  color: var(--color-text-body);
  line-height: var(--lh-1_60);
}

/* Пошук — головна дія сторінки, тому білий на кольоровому тлі й великий. */
.blogBand .search { width: min(520px, 100%); margin-top: 4px; }
.blogBand .search .input {
  height: 58px;
  padding-left: 52px;
  font-size: var(--fz-b1);
  background: #fff;
  border-color: transparent;
}
.blogBand .search .input:hover { border-color: var(--color-brand-50); }
.blogBand .search__ico { left: 20px; }

/* Рубрики чипами: лічильник одразу показує обсяг кожної. */
.rubrics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rubric {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 8px 0 16px;
  background: #fff;
  border-radius: var(--radius-xl);
  font-size: var(--btn-font-size);
  font-weight: var(--fw-bold);
  color: var(--color-text-title);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rubric:hover { transform: translateY(-2px); color: var(--color-brand-100); }
.rubric__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: var(--radius-xl);
  background: var(--color-brand-5);
  color: var(--color-brand-100);
  font-size: var(--fz-b5);
  font-weight: var(--fw-bold);
}
/* Активна рубрика — темний чип. Раніше темним був завжди перший
   («Усі матеріали»), навіть коли відкрита конкретна рубрика. */
.rubric--on { background: var(--color-text-title); color: #fff; }
.rubric--on:hover { color: #fff; }
.rubric--on .rubric__n { background: rgba(255, 255, 255, .16); color: #fff; }

.blogBand__art { width: clamp(180px, 22vw, 280px); display: block; }

@media (max-width: 900px) {
  .blogBand__in { grid-template-columns: 1fr; padding-bottom: 28px; }
  .blogBand__art { display: none; }
  .blogBand .search { width: 100%; }
}

/* ══════════ Головний матеріал ══════════
   Кольоровий блок ліворуч, великий заголовок праворуч. Тримається
   і без обкладинки — тоді блок закриває фірмова декорація. */
/* Горизонтальна смуга, а не квадрат на пів екрана: на широкому моніторі
   квадратний блок з'їдав увесь перший екран заради однієї статті. */
.hero-post {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(20px, 2.6vw, 40px);
  align-items: stretch;
  padding: 18px;
  border: 1px solid var(--color-stroke);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out);
}
.hero-post:hover { border-color: var(--color-brand-50); }

/* Без aspect-ratio: у розтягнутому рядку висоту задає сусідня колонка,
   і співвідношення починало рахувати ШИРИНУ з неї — блок вилазив за
   свою колонку й накривав заголовок. Тепер ширину диктує сітка. */
.hero-post__block {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 250px;
  border-radius: var(--radius-md);
  background: var(--color-brand-100);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.hero-post__block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.hero-post:hover .hero-post__block img { transform: scale(1.04); }

/* Кільце й зірка — той самий набір, що в героя головної сторінки. */
.hero-post__ring {
  position: absolute;
  top: -30%;
  right: -30%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 34px solid rgba(255, 255, 255, .08);
}
.hero-post__mark {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px;
  text-align: center;
}
.hero-post__mark span {
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #fff;
  max-width: 16ch;
}

.hero-post__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: 6px 12px 6px 0;
}

.hero-post__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  background: var(--color-yellow-100);
  color: #0D0A23;
  font-size: var(--fz-b5);
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--radius-xl);
  transform: rotate(-1.5deg);
}

.hero-post__t {
  font-size: clamp(24px, 2.5vw, 34px);
  font-weight: var(--fw-bold);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--color-text-title);
  max-width: 17ch;
  transition: color var(--dur-fast) var(--ease-out);
}
.hero-post:hover .hero-post__t { color: var(--color-brand-100); }

.hero-post__x {
  font-size: var(--fz-b1);
  color: var(--color-text-body);
  line-height: var(--lh-1_60);
  max-width: 46ch;
}

.hero-post__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fz-b5);
  font-weight: var(--fw-medium);
  color: var(--color-text-caption);
}
.hero-post__meta b { color: var(--color-brand-100); font-weight: var(--fw-bold); }

/* ══════════ Рядок теми ══════════ */
.row { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 24px); }
/* Без підкреслення: заголовок рядка й так виділений кружком теми,
   великим кеглем і посиланням праворуч. Лінія лише додавала ваги. */
.row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.row__t {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(21px, 2.2vw, 28px);
  font-weight: var(--fw-bold);
  letter-spacing: -.02em;
  color: var(--color-text-title);
}
/* Кружок кольору теми звʼязує рядок із блоком угорі. */
.row__dot { width: 14px; height: 14px; border-radius: var(--radius-xl); flex: none; }
.row__all {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--btn-font-size);
  font-weight: var(--fw-bold);
  color: var(--color-brand-100);
}
.row__all svg { display: block; flex: none; transition: transform var(--dur-fast) var(--ease-out); }
.row__all:hover svg { transform: translateX(3px); }
/* Три колонки, а не чотири: у 249px картці заголовок нормального
   кегля розсипався на чотири рядки. Ширша картка — спокійніший текст. */
.row__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 22px); }

/* Час читання плашкою на обкладинці — головний фільтр для вчителя. */
.post__art { position: relative; }
.post__time {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, .92);
  color: var(--color-text-title);
  font-size: var(--fz-b5);
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* ══════════ Режим результатів ══════════ */
.browse { display: contents; }
.rows { display: contents; }
.blogPage[data-mode="search"] .browse,
.blogPage[data-mode="search"] .rows { display: none; }
.blogPage[data-mode="browse"] .results { display: none; }

.results { display: flex; flex-direction: column; gap: clamp(18px, 2.5vw, 26px); }
.results__bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.results__count { font-size: var(--fz-b1); font-weight: var(--fw-medium); color: var(--color-text-caption); }
.results__count b { color: var(--color-text-title); font-weight: var(--fw-bold); }
.results__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 22px); }

/* ══════════ Адаптив ══════════ */
@media (max-width: 1024px) {
  .hero-post { grid-template-columns: 1fr; gap: 24px; }
  .hero-post__block { min-height: 200px; }
  .hero-post__body { padding: 0 6px 8px; }
  .hero-post__t { max-width: none; }
  .row__grid,
  .results__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .row__grid,
  .results__grid { grid-template-columns: 1fr; }
}


/* ═══════════════ pages\article.css ═══════════════ */
/* ============================================================
   Сторінка статті.

   Головна претензія до старого макета: сітка «240px збоку + текст»,
   де в боковій колонці лежали лише дата й час читання. Виходила
   порожня смуга на чверть екрана.

   Тут одна колонка читання по центру, а мета-дані стоять під
   заголовком рядком. Ширину тримає .prose (68ch), тому текст не
   розповзається навіть на широкому моніторі.
   ============================================================ */

/* Сторінка статті вужча за решту сайту й вирівняна по центру.
   Раніше колонка тексту стояла ліворуч у контейнері на 1120px —
   праворуч лишалась порожня смуга на третину екрана. */
.articlePage {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 48px);
}

/* ══════════ Шапка статті ══════════ */
.artHead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-top: clamp(20px, 3vw, 36px);
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--btn-font-size);
  font-weight: var(--fw-semibold);
  color: var(--color-text-caption);
}
.crumbs a { color: var(--color-brand-100); }
.crumbs a:hover { color: var(--color-brand-80); }
.crumbs__sep { color: var(--color-stroke); }
.crumbs__now { color: var(--color-text-caption); }

.artHead__badge {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  background: var(--color-brand-5);
  color: var(--color-brand-100);
  border-radius: var(--radius-xl);
  font-size: var(--fz-b5);
  font-weight: var(--fw-bold);
}

.artHead h1 {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -.025em;
  font-weight: var(--fw-bold);
  color: var(--color-text-title);
}

.artHead__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: var(--btn-font-size);
  font-weight: var(--fw-medium);
  color: var(--color-text-caption);
}
.artHead__meta .dot { color: var(--color-stroke); }

/* Обкладинка ширша за колонку читання — вона працює як картинка,
   а не як текст, тож може дозволити собі більше. */
.artCover {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-tint);
}
.artCover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ══════════ Кінець статті ══════════ */
/* Фінальний заклик — та сама композиція, що й на головній (.final):
   бренд-фіолетова панель, кільця, жовтий маркер, біла + скляна кнопки. */
.artEnd {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: clamp(32px, 4.5vw, 52px) clamp(20px, 3vw, 40px);
  background: var(--color-brand-100);
  border-radius: var(--radius-md);
  color: #fff;
}
.artEnd__ring { position: absolute; border-radius: 50%; pointer-events: none; }
.artEnd__ring--a { top: -170px; left: -120px; width: 340px; height: 340px; border: 48px solid rgba(255, 255, 255, .07); }
.artEnd__ring--b { bottom: -150px; right: -100px; width: 300px; height: 300px; border: 40px solid rgba(255, 255, 255, .07); }
.artEnd__kicker {
  position: relative;
  font-size: var(--fz-b5);
  font-weight: var(--fw-bold);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.artEnd__t {
  position: relative;
  max-width: 18ch;
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: var(--fw-bold);
  line-height: 1.15;
}
.artEnd__t mark {
  background: var(--color-yellow-100);
  color: var(--color-text-title);
  padding: 1px 12px;
  border-radius: var(--radius-sm);
  display: inline-block;
  transform: rotate(-1deg);
}
.artEnd__p { position: relative; max-width: 46ch; margin: 0; color: #fff; }
.artEnd__cta { position: relative; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.artEnd__tags { position: relative; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
.artEnd__tag {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  font-size: var(--fz-b5);
  font-weight: var(--fw-bold);
  color: var(--color-text-title);
  border-radius: var(--input-radius);
  line-height: 1;
}

@media (max-width: 700px) {
  .artHead h1 { font-size: clamp(26px, 8vw, 34px); }
  .artEnd { padding: 28px 18px; }
  .artEnd__cta { width: 100%; }
  .artEnd__cta .btn { width: 100%; }
  .artCover { aspect-ratio: 4 / 3; }
}