/* ==========================================================================
   anastasikarimova.com — редизайн
   Чистий CSS, без фреймворків. Mobile-first (основний трафік — Instagram).

   ЛОГІКА КОЛЬОРУ
   Хром сайту нейтральний (крем + графіт). Колір належить продукту, а не сайту:
   кожен .product несе власний --accent, від якого залежать обкладинка, ціна,
   кнопка й маркери списку. Щоб перефарбувати продукт — правити одне значення
   в атрибуті style прямо в index.html.

   Типографіка: Playfair Display (заголовки) + Inter (текст, обкладинки).
   ========================================================================== */

/* ------------------------------ ТОКЕНИ ------------------------------ */
:root{
  /* нейтральний хром */
  --ink:        #1D1518;
  --ink-2:      #4A3D41;
  --ink-3:      #7A6A6F;
  --cream:      #FBF7F3;
  --cream-2:    #F5EEE7;
  --white:      #FFFFFF;
  --line:       #E8DCD2;

  /* дефолт, якщо продукт не задав свій */
  --accent:     #1D1518;
  --accent-ink: #FFFFFF;

  /* фірмовий рожевий — тільки для головної дії «Розрахувати матрицю».
     #EC008C з матеріалів дає контраст 4.25 з білим (нижче норми),
     тому для кнопки взято затемнений варіант. */
  --brand:      #D6007E;
  --brand-dark: #B8006C;

  --f-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --wrap: 1180px;
  --gut: 20px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;

  --sh-sm: 0 2px 8px rgba(29,21,24,.05);
  --sh-md: 0 10px 30px rgba(29,21,24,.08);
  --sh-lg: 0 24px 60px rgba(29,21,24,.14);

  --ease: cubic-bezier(.4,0,.2,1);
  /* спільна «м'яка» крива: розкриття «Що всередині» і розкладання
     сторінок обкладинки рухаються однаково */
  --ease-soft: cubic-bezier(.22,.84,.36,1);

  /* Наскільки задня сторінка обкладинки відходить убік.
     На вузьких екранах менше: при 26% на 360px аркуш підходив до краю
     екрана впритул (6px) — обкладинка виглядала обрізаною. */
  --spread: 17%;
}

/* ------------------------------ БАЗА ------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* overflow-x на body не тримає: скрол підхоплює html. clip, а не hidden —
   не створює контейнер прокрутки й не ламає position:sticky у шапки. */
html{ overflow-x:clip; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* Без overflow-x на body! overflow-x:hidden робить body контейнером
     прокрутки (overflow-y стає auto), і position:sticky у шапки
     перестає працювати — вона їде вгору разом зі сторінкою.
     Горизонтальний скрол ловить html{overflow-x:clip} вище. */
}

h1,h2,h3{ font-family:var(--f-head); font-weight:600; line-height:1.15; margin:0; letter-spacing:-.01em; }
p{ margin:0; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; transition:color .2s var(--ease); }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }

:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{ left:0; }

/* ------------------------------ КНОПКИ ------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px;
  padding:13px 26px;
  border:1.5px solid transparent; border-radius:999px;
  font-size:15px; font-weight:600; letter-spacing:.01em;
  /* nowrap ламав довгі підписи: «Приєднатися до листа очікування» вилазив
     за контейнер на 375px, і це ховав overflow-x:hidden на body. */
  text-align:center; cursor:pointer; white-space:normal; text-wrap:balance;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn--lg{ min-height:56px; padding:16px 34px; font-size:16px; }
.btn--sm{ min-height:44px; padding:10px 18px; font-size:14px; }

/* акцент продукту */
.btn--accent{ background:var(--accent); color:var(--accent-ink); }
.btn--accent:hover{ transform:translateY(-2px); box-shadow:0 12px 28px color-mix(in srgb, var(--accent) 40%, transparent); filter:brightness(1.06); }

/* нейтральна темна — навігація, hero, підтримка */
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(29,21,24,.28); }

/* світла на темному тлі */
.btn--light{ background:var(--white); color:var(--ink); }
.btn--light:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.3); }

.btn--outline-accent{ border-color:var(--accent); color:var(--accent); background:transparent; }
.btn--outline-accent:hover{ background:var(--accent); color:var(--accent-ink); transform:translateY(-2px); }

.btn--ghost{ border-color:var(--line); color:var(--ink); background:var(--white); }
.btn--ghost:hover{ border-color:var(--ink-3); transform:translateY(-2px); }
/* У hero світла кнопка лежить на фото (світлий жакет) — сіра обводка там
   зникає. Тому обводимо її фірмовим малиновим, як у головної кнопки. */
.hero__actions .btn--ghost{ border-color:var(--brand); border-width:2px; }
.hero__actions .btn--ghost:hover{ border-color:var(--brand-dark); }

/* головна дія сайту. Суцільна заливка — щоб читалась як кнопка,
   а не як ще одне посилання в меню. Рожевий, а не чорний: чорна
   пігулка на кремовому тлі виглядала важкою плямою. */
.btn--brand{ background:var(--brand); color:#fff; box-shadow:0 4px 14px rgba(214,0,126,.28); }
.btn--brand:hover{ background:var(--brand-dark); color:#fff; transform:translateY(-2px); box-shadow:0 8px 22px rgba(214,0,126,.34); }

.btn:active{ transform:translateY(0); }

/* ------------------------------ НАВІГАЦІЯ ------------------------------ */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(251,247,243,.93);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.is-scrolled{ border-bottom-color:var(--line); box-shadow:0 4px 20px rgba(29,21,24,.05); }

.nav__inner{
  max-width:var(--wrap); margin-inline:auto; padding:12px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

.nav__logo{ display:flex; flex-direction:column; justify-content:center; min-height:44px; line-height:1.2; }
.nav__logo-name{ font-family:var(--f-head); font-size:17px; font-weight:600; }
.nav__logo-role{ font-size:11px; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; }

.nav__toggle{
  width:44px; height:44px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px;
  background:none; border:0; cursor:pointer; padding:0;
}
.nav__toggle span{ width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .2s var(--ease); }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav__menu{
  position:absolute; left:0; right:0; top:100%;
  background:var(--cream); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:2px;
  padding:0 var(--gut);
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .35s var(--ease), opacity .25s var(--ease), padding .35s var(--ease);
}
/* Жорсткі 440px були крихкі: в альбомній орієнтації (375px висоти) меню
   впиралось у край екрана, а прокрутки всередині немає через overflow:hidden.
   Тепер стеля рахується від висоти екрана, а вміст за потреби прокручується.
   Два max-height поспіль — перший для браузерів без dvh. */
.nav__menu.is-open{
  max-height:min(72vh, 520px);
  max-height:min(calc(100dvh - 76px), 520px);
  overflow-y:auto; overscroll-behavior:contain;
  opacity:1; padding:12px var(--gut) 22px;
}
.nav__menu a{ padding:12px 0; font-size:16px; font-weight:500; border-bottom:1px solid var(--line); }
/* :not(.nav__cta) обов'язковий — інакше це правило (0,2,1) перебиває
   .btn--brand:hover (0,2,0) і фарбує текст кнопки в сірий поверх
   рожевого тла: контраст падав до 3.51 при нормі 4.5. */
.nav__menu a:not(.nav__cta):hover{ color:var(--ink-3); }
/* Специфічність: .nav__menu a (0,1,1) перебиває .nav__cta (0,1,0) і
   обнуляє горизонтальні відступи — кнопка виглядає «розпертою».
   Тому селектор обов'язково з .nav__menu. */
.nav__menu a.nav__cta{
  margin-top:14px; min-height:50px; padding:13px 26px;
  font-size:15px; border-bottom:0;
}

/* ------------------------------ HERO ------------------------------ */
.hero{ padding:18px 0 44px; }
.hero__inner{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  display:flex; flex-direction:column; gap:20px;
}

/* На мобільному надрядок приховано — перший екран починається одразу
   з імені. З 860px повертаємо: там простору вистачає. */
.hero__eyebrow{
  display:none;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:14px;
}
.hero__title{ font-size:clamp(2.6rem,13vw,4.2rem); font-weight:500; letter-spacing:-.02em; }
.hero__lede{ margin-top:12px; font-size:17px; color:var(--ink-2); max-width:36ch; }
/* «коуч Mental Research Institute» — тільки на ПК: на телефоні рядок з'їдав
   висоту першого екрана. Вмикається у медіа ≥860px. */
.hero__lede-more{ display:none; }

.hero__actions{ display:flex; flex-direction:column; gap:12px; margin-top:20px; }


/* рамка під фото */
.hero__photo{ margin:0; }
.photo-frame{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--cream-2); box-shadow:var(--sh-lg); aspect-ratio:4/5; }
.photo-frame img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:2; }
.photo-frame::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  border-radius:var(--r-lg); box-shadow:inset 0 0 0 1px rgba(29,21,24,.06);
}
.photo-frame__stub{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:repeating-linear-gradient(45deg,var(--cream-2),var(--cream-2) 12px,#EFE5DB 12px,#EFE5DB 24px);
  color:var(--ink-3); text-align:center; padding:20px;
}
.photo-frame__stub span{ font-family:var(--f-head); font-size:20px; letter-spacing:.2em; }
.photo-frame__stub small{ font-size:11px; font-family:monospace; opacity:.75; word-break:break-all; }
.photo-frame--sm{ aspect-ratio:3/4; }

/* Фото-вирізка (PNG з альфою): жодної підкладки, рамки й тіні — фігура
   стоїть просто на кремовому тлі сторінки. aspect-ratio знято, бо кадр
   задає саме зображення; contain — щоб нічого не обрізало. */
.photo-frame--cutout{
  background:transparent; box-shadow:none; border-radius:0;
  aspect-ratio:auto; overflow:visible;
}
.photo-frame--cutout::after{ display:none; }
.photo-frame--cutout img{
  display:block; margin-inline:auto;
  width:auto; max-width:100%;
  height:clamp(400px, 118vw, 480px);
  /* bottom — якщо колонка вужча за фігуру і contain додає порожнечу,
     вона піде зверху, а ноги лишаться притиснутими до низу. */
  object-fit:contain; object-position:bottom;
}

/* ---------------------------------------------------------------------
   МОБІЛЬНИЙ HERO «НА ВЕСЬ ЕКРАН»
   Фігура — окремим шаром на всю висоту екрана праворуч, текст і кнопки
   лежать поверх неї знизу-ліворуч. Діє тільки до 860px; від 860px
   вмикається звичайна двоколонкова сітка (див. блок нижче).
   Блок стоїть саме тут — після базових правил .photo-frame--cutout,
   інакше вони перебивають його (однакова специфічність, виграє останнє).
   --------------------------------------------------------------------- */
@media (max-width:859px){
  .hero{
    position:relative; overflow:hidden;
    min-height:calc(100vh - 68px);
    min-height:calc(100svh - 68px);   /* без адресного рядка в мобільних браузерах */
    display:flex; align-items:flex-end;
    padding:20px 0 76px;
  }
  /* .hero__inner лишається НЕпозиціонованим — інакше він стає containing
     block для фото, і inset:0 дає висоту тексту, а не всього екрана.
     Тому z-index вішаємо на самі текст і кнопки. */
  .hero__inner{ width:100%; gap:24px; }
  .hero__text,
  .hero__actions{ position:relative; z-index:3; }

  .hero__photo{ position:absolute; inset:0; z-index:1; margin:0; pointer-events:none; }
  .photo-frame--cutout{ height:100%; }
  .photo-frame--cutout img{
    position:absolute; right:-8%; bottom:0;
    width:auto; max-width:none; height:92%;   /* трохи повітря над головою */
    object-fit:contain; object-position:bottom right;
  }

  .hero__title{ line-height:1.04; }
  .hero__lede{ margin-top:10px; font-size:15px; }

  /* Читабельність поверх фото: не плашка й не вуаль, а м'яке кремове
     сяйво навколо самих літер — фото лишається чистим, текст не «тоне»
     у складних ділянках (волосся, тінь на жакеті). */
  .hero__text{
    text-shadow:
      0 0 16px rgba(251,247,243,.92),
      0 0 6px rgba(251,247,243,.85),
      0 1px 2px rgba(251,247,243,.9);
  }
}
/* Без рамки. Головне тут — прибрати кремову підкладку: .photo-frame має
   background:var(--cream-2), і на майже чорній секції вона просвічувала
   світлими дугами у скруглених кутах. Саме це й читалось як дивна обводка.
   Тінь і внутрішній обідок теж зайві на темному тлі. */
.photo-frame--bare{
  background:transparent;
  box-shadow:none;
  border-radius:var(--r-md);
}
.photo-frame--bare::after{ display:none; }
/* якщо файл раптом не завантажиться — заглушка теж має бути темною,
   інакше на її місці спалахне світлий прямокутник */
.photo-frame--bare .photo-frame__stub{
  background:repeating-linear-gradient(45deg,#241C1F,#241C1F 12px,#2C2326 12px,#2C2326 24px);
  color:#8C7B80;
}

/* ------------------------------ СЕКЦІЇ ------------------------------ */
.section{ padding:56px 0; }
.section--dark{ background:var(--ink); color:var(--cream); }
.section--dark .section__title{ color:var(--white); }
.section--dark .section__eyebrow{ color:#B9A7AC; }
.section--dark .section__lede{ color:#CBBCC0; }

.section__head{ max-width:44ch; margin-bottom:34px; }
.section__eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:10px;
}
.section__title{ font-size:clamp(1.9rem,7vw,2.7rem); }
.section__lede{ margin-top:14px; color:var(--ink-2); font-size:16px; }

/* ==========================================================================
   ПРОДУКТИ — широкі ряди з обкладинкою
   ========================================================================== */
.products{ display:flex; flex-direction:column; }

/* Тон секції = тон першого продукту (нумерологічна карта). Смуга починається
   рівно там, де закінчується hero, — так перший екран відділений від основної
   частини, і фігура в hero стоїть ногами точно на межі.
   Нижній падінг знімаємо: у останнього продукту є власний. */
#products{ background:color-mix(in srgb, #EC008C 5%, var(--cream)); padding-bottom:0; }

.product{ padding:44px 0; position:relative; background:var(--cream); }
.product--tinted{ background:color-mix(in srgb, var(--accent) 5%, var(--cream)); }

.product__inner{ display:flex; flex-direction:column; gap:30px; }

/* ---------- текст ---------- */
.product__kicker{
  display:flex; align-items:center; gap:12px;
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px;
}
.product__no{
  font-family:var(--f-body); font-size:12px; font-weight:700; letter-spacing:0;
  color:var(--accent-ink); background:var(--accent);
  width:28px; height:28px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; flex:none;
}
.product__title{ font-size:clamp(1.8rem,7vw,2.6rem); }
.product__desc{ margin-top:14px; color:var(--ink-2); font-size:16px; max-width:52ch; }

.product__points{ margin-top:22px; display:flex; flex-direction:column; gap:11px; }
.product__points li{ position:relative; padding-left:28px; font-size:15.5px; color:var(--ink-2); }
.product__points li::before{
  content:''; position:absolute; left:2px; top:9px;
  width:9px; height:9px; border-radius:50%; background:var(--accent);
}
.product__points--lg li{ font-size:16px; }

/* Усі плашки одного зросту. Було: звичайна плашка 26px, а плашка-посилання
   44px (тач-таргет) — ряд виглядав рваним. Тепер висоту задає контейнер,
   тач-таргет зберігся. */
.product__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:20px; }
.product__meta li{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:12px; color:var(--ink-3);
  background:var(--white); border:1px solid var(--line);
  padding:5px 14px; border-radius:999px;
}
/* плашка-посилання (напр. INYEARBOT) — клікабельна, з тач-таргетом */
.product__meta li.is-link{ padding:0; border:0; background:none; }
.meta-link{
  display:inline-flex; align-items:center; gap:6px; min-height:44px;
  padding:5px 14px; border-radius:999px;
  font-size:12px; font-weight:600; color:var(--accent);
  background:var(--white); border:1px solid var(--accent);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.meta-link::after{ content:'↗'; font-size:11px; }
.meta-link:hover{ background:var(--accent); color:var(--accent-ink); }

/* плашка-бонус — те, що входить у продукт додатково */
/* Раніше плашка заливалась акцентом суцільно. У INMONEY акцент чорний,
   тому вона читалась як важка чорна пляма серед світлих плашок.
   Тепер — світла підкладка, акцентна рамка й текст. */

/* розкривний повний перелік (ТЗ §6 — картка має лишатись легкою) */
.spoiler{ margin-top:22px; border-top:1px solid var(--line); padding-top:14px; max-width:52ch; }
.spoiler summary{
  cursor:pointer; font-size:14px; font-weight:600; color:var(--accent);
  list-style:none; display:flex; align-items:center; gap:7px; min-height:44px;
}
.spoiler summary::-webkit-details-marker{ display:none; }
.spoiler summary::after{
  content:''; width:8px; height:8px; margin-left:auto;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .25s var(--ease);
}
.spoiler[open] summary::after{ transform:rotate(225deg) translateY(-2px); }
/* висоту анімує JS, а вміст проявляється тут — інакше текст просто
   «вилазить» готовим блоком під час росту висоти */
.spoiler p{
  margin-top:12px; font-size:14px; color:var(--ink-2);
  opacity:0; transform:translateY(-6px);
  transition:opacity .45s var(--ease-soft) .1s, transform .45s var(--ease-soft) .1s;
}
.spoiler[open] p{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .spoiler p{ opacity:1; transform:none; transition:none; }
}

.product__buy{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  margin-top:28px; padding-top:24px; border-top:2px solid var(--accent);
}
.price{ display:flex; align-items:baseline; gap:6px; }
.price__value{ font-family:var(--f-head); font-size:2.4rem; font-weight:600; line-height:1; color:var(--ink); }
.price__cur{ font-size:15px; color:var(--ink-3); }
.pending-note{ font-size:13.5px; color:var(--ink-3); line-height:1.45; font-style:italic; }

/* продукт, що чекає на дані */
.product--pending .product__buy{ border-top-style:dashed; }
.product__points li.is-todo{ color:var(--ink-3); font-style:italic; }
.product__points li.is-todo::before{ background:transparent; border:2px dashed currentColor; width:10px; height:10px; top:8px; left:1px; }

/* ---------- обкладинка: дві сторінки, які розкладає CSS ----------
   Джерело — плоскі A4-сторінки (1414×2000) без нахилу й без запеченої тіні.
   Нахил, тінь і анімацію робить браузер, тому одна пара файлів працює
   і зліва, і справа: у дзеркальних блоках (--flip) кути просто інвертуються.
   Друга сторінка майже біла — без CSS-тіні вона б зникла на кремовому тлі. */
.product__media{ display:flex; justify-content:center; }

.cover{
  position:relative; width:100%; max-width:340px;
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
}
.cover__pages{ position:relative; width:64%; aspect-ratio:1414/2000; }

.cover__page{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:contain;
  border-radius:3px;
  box-shadow:0 18px 40px rgba(29,21,24,.22), 0 2px 6px rgba(29,21,24,.10);
  /* довше й м'якше: різкий «клац» замінено на спокійне розкладання.
     Задня сторінка йде із затримкою — стос розкривається, а не стрибає. */
  transition:transform 1.35s var(--ease-soft);
  will-change:transform;
}

/* розкладений стан — він же дефолтний, тому без JS усе виглядає правильно */
.cover__page--back { z-index:1; transform:rotate(7deg)  translate(var(--spread),-5%); transition-delay:.14s; }
.cover__page--front{ z-index:2; transform:rotate(-3deg) translate(-6%,2%); }

/* дзеркальні блоки — ті самі файли, інвертовані кути */
.product--flip .cover__page--back { transform:rotate(-7deg) translate(calc(-1 * var(--spread)),-5%); }
.product--flip .cover__page--front{ transform:rotate(3deg)  translate(6%,2%); }

/* Ховер — тільки для справжньої миші. На тачскрині :hover «залипає» після
   дотику, сторінки розходились сильніше й задній аркуш вилазив за екран
   на 23px: html при цьому починав скролитись вбік (overflow-x:hidden стоїть
   на body, а не на html, тому не рятував). */
@media (hover: hover) and (pointer: fine){
  .product:hover .cover__page--back { transform:rotate(11deg) translate(34%,-9%); }
  .product:hover .cover__page--front{ transform:rotate(-5deg) translate(-9%,-1%); }
  .product--flip:hover .cover__page--back { transform:rotate(-11deg) translate(-34%,-9%); }
  .product--flip:hover .cover__page--front{ transform:rotate(5deg)   translate(9%,-1%); }
}

/* закритий стан — сторінки складені в стос.
   Ставиться скриптом до появи блоку у в'юпорті, потім знімається,
   і transition сам програє розкладання. Правила йдуть ПІСЛЯ :hover,
   щоб складений стан не збивався курсором. */
.cover.is-closed .cover__page--back,
.product--flip .cover.is-closed .cover__page--back,
.product:hover .cover.is-closed .cover__page--back{ transform:rotate(0deg) translate(0,0); }
.cover.is-closed .cover__page--front,
.product--flip .cover.is-closed .cover__page--front,
.product:hover .cover.is-closed .cover__page--front{ transform:rotate(0deg) translate(0,0); }

@media (prefers-reduced-motion: reduce){
  .cover__page{ transition:none; }
}

/* закритий продукт (предзапис): обкладинки вже розмиті у файлах,
   поверх — замочок, щоб було ясно, що дизайн поки не показуємо */
.cover__lock{
  position:absolute; left:50%; top:50%; z-index:3;
  transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#FFFFFF; background:rgba(29,21,24,.55);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 10px 30px rgba(29,21,24,.3);
  pointer-events:none;
}

/* ------------------------------ КОНСУЛЬТАЦІЇ ------------------------------ */
.consult{ display:flex; flex-direction:column; gap:30px; }
.consult__photo{ margin:0; }
.consult__body{ margin-top:18px; font-size:16px; color:#CBBCC0; }

/* факти: тривалість / формат / вартість */
.consult__facts{ display:flex; flex-direction:column; gap:0; margin-top:26px; }
.consult__facts li{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:13px 0; border-bottom:1px solid rgba(255,255,255,.12);
}
.consult__facts li:first-child{ border-top:1px solid rgba(255,255,255,.12); }
.consult__facts span{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#A8989C; }
.consult__facts strong{ font-size:17px; font-weight:600; color:var(--white); text-align:right; }
.consult__facts li:last-child strong{ font-family:var(--f-head); font-size:1.7rem; }

/* немає вільних місць — це не помилка, а стан продажу, тому спокійна плашка */
.consult__notice{
  margin-top:24px; padding:16px 18px;
  background:rgba(255,255,255,.06); border-left:3px solid var(--white);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:15px; color:#CBBCC0;
}

.consult__actions{ margin-top:26px; }
.consult__note{ margin-top:12px; font-size:13px; color:#A8989C; font-style:italic; }
.section--dark .product__points li{ color:#CBBCC0; }
.section--dark .product__points li::before{ background:var(--white); }
.section--dark .product__points li.is-todo{ color:#A8989C; }
.section--dark .product__points li.is-todo::before{ background:transparent; border-color:#A8989C; }

/* ------------------------------ КУРСИ ------------------------------ */
.courses{ display:grid; grid-template-columns:1fr; gap:20px; }

.course{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.course:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }

.course__media{ position:relative; aspect-ratio:16/10; background:var(--accent); overflow:hidden; }
.course__media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.course:hover .course__media img{ transform:scale(1.04); }
.course__stub{
  position:absolute; inset:0; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:var(--accent); color:var(--accent-ink); text-align:center; padding:16px;
}
.course__stub span{ font-family:var(--f-body); font-weight:700; font-size:32px; letter-spacing:-.03em; }
.course__stub small{ font-family:monospace; font-size:11px; opacity:.7; }
.course__media.is-empty .course__stub{ display:flex; }

.course__body{ padding:24px 22px; }
.course__title{ font-size:1.4rem; }
.course__desc{ margin:12px 0 22px; color:var(--ink-2); font-size:15px; }

/* ------------------------------ ПІДТРИМКА ------------------------------ */
.support{ padding:0 0 56px; }
.support__box{
  background:var(--cream-2); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:40px 24px; text-align:center;
}
.support__title{ font-size:clamp(1.7rem,6vw,2.2rem); }
.support__text{ margin:14px auto 26px; color:var(--ink-2); max-width:34ch; font-size:16px; }

/* ------------------------------ ФУТЕР ------------------------------ */
.foot{ background:var(--white); border-top:1px solid var(--line); padding:44px 0 24px; }
.foot__inner{ display:flex; flex-direction:column; gap:30px; }

.foot__name{ font-family:var(--f-head); font-size:19px; font-weight:600; }
.foot__role{ margin-top:8px; font-size:13.5px; color:var(--ink-3); line-height:1.5; }

.foot__links{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.foot__link{
  display:inline-flex; align-items:center; min-height:44px;
  background:none; border:0; padding:0; cursor:pointer;
  font-size:14.5px; color:var(--ink-2); text-align:left;
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px;
  transition:color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.foot__link:hover{ color:var(--ink); text-decoration-color:var(--ink); }

.foot__social-title{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px; }
.foot__social-links{ display:flex; flex-wrap:wrap; gap:10px; }
.foot__social-links a{
  font-size:14px; padding:10px 18px; min-height:44px;
  display:inline-flex; align-items:center;
  border:1px solid var(--line); border-radius:999px; background:var(--cream);
  transition:border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.foot__social-links a:hover{ border-color:var(--ink); transform:translateY(-2px); }

.foot__copy{
  margin-top:34px; padding-top:20px;
  border-top:1px solid var(--line);
  text-align:center; font-size:13px; color:var(--ink-3);
}

/* ------------------------------ НАВЕРХ ------------------------------ */
.to-top{
  position:fixed; right:16px; bottom:16px; z-index:90;
  width:46px; height:46px; border-radius:50%;
  background:var(--ink); color:#fff; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(29,21,24,.32);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }

/* ==========================================================================
   ПЛАНШЕТ  ≥ 700px
   ========================================================================== */
@media (min-width:700px){
  :root{ --gut:32px; --spread:26%; }

  .hero{ padding:60px 0 76px; }
  .hero__actions{ flex-direction:row; }

  .section{ padding:76px 0; }
  .product{ padding:60px 0; }
  .courses{ grid-template-columns:repeat(2,1fr); gap:24px; }

  /* поки розкладка ще в один стовпець (700–859px), обкладинка має бути
     помітно більшою — інакше вона губиться посеред широкої смуги */
  .cover{ max-width:480px; }

  .support__box{ padding:56px 40px; }
  .foot__inner{ flex-direction:row; justify-content:space-between; gap:40px; }
  .foot__brand{ max-width:280px; }

  .to-top{ right:24px; bottom:24px; width:50px; height:50px; }
}

/* ==========================================================================
   ШИРОКИЙ ПЛАНШЕТ  ≥ 860px

   Без цього блоку від 700 до 999px усе лишалось в один стовпець: обкладинка
   400px губилась посеред 820px смуги, тобто по 420px порожнечі з боків.
   Саме сюди потрапляють планшети в портреті й невеликі ноутбуки.
   Двоколонкову розкладку вмикаємо тут, а інлайнове меню — усе одно з 1000px,
   бо раніше пункти + кнопка не влазять у рядок.
   ========================================================================== */
@media (min-width:860px){
  .hero__eyebrow{ display:block; }
  .hero__lede-more{ display:inline; }
  .hero__lede{ margin-top:16px; }
  .hero__actions{ margin-top:28px; }

  /* Сітка, а не рядок: кнопки — окремий блок у розмітці (щоб на мобільному
     стояти після фото), тут вони повертаються під текст у ліву колонку. */
  .hero__inner{
    display:grid; align-items:center;
    grid-template-columns:54% 1fr;
    grid-template-areas:"text photo" "actions photo";
    column-gap:44px; row-gap:0;
  }
  .hero__text{ grid-area:text; }
  .hero__photo{ grid-area:photo; justify-self:center; }
  .hero__actions{ grid-area:actions; }
  /* Фігура крупніша й вирівняна по нижньому краю секції: від'ємний
     margin-bottom дорівнює нижньому падінгу .hero, тож вона «стоїть»
     рівно на межі з наступним блоком, а не висить посеред повітря. */
  .hero__photo{ align-self:end; margin-bottom:-76px; }   /* = padding-bottom у .hero */
  .photo-frame--cutout img{ height:clamp(500px, 62vw, 660px); }

  .product{ padding:70px 0; }
  .product__inner{ flex-direction:row; align-items:center; gap:44px; }
  .product--flip .product__inner{ flex-direction:row-reverse; }
  .product__media{ flex:0 0 40%; }
  .product__body{ flex:1; min-width:0; }
  .cover{ max-width:none; }

  .consult{ flex-direction:row; gap:44px; }
  .consult__photo{ flex:0 0 40%; max-width:360px; margin-top:40px; align-self:flex-start; }
  .consult__text{ flex:1; }
}

/* ==========================================================================
   ДЕСКТОП  ≥ 1000px
   ========================================================================== */
@media (min-width:1000px){
  body{ font-size:17px; }

  /* меню розгортається в рядок */
  .nav__toggle{ display:none; }
  .nav__menu{
    position:static; flex-direction:row; align-items:center; gap:30px;
    max-height:none; opacity:1; overflow:visible; padding:0;
    background:none; border:0; width:auto;
  }
  /* min-height, а не padding: посилання в рядку меню мали висоту 25px */
  .nav__menu a{
    display:inline-flex; align-items:center; min-height:44px;
    padding:0; border:0; font-size:15px; position:relative;
  }
  .nav__menu a:not(.nav__cta)::after{
    content:''; position:absolute; left:0; bottom:8px; width:0; height:2px;
    background:var(--ink); transition:width .3s var(--ease);
  }
  .nav__menu a:not(.nav__cta):hover::after{ width:100%; }
  /* у рядку меню кнопка має бути компактнішою за hero-кнопки,
     інакше «Розрахувати матрицю» візуально розпирає шапку */
  .nav__menu a.nav__cta{
    margin-top:0; min-height:44px; padding:9px 22px; font-size:14px;
  }
  .nav__logo-name{ font-size:19px; }

  .hero{ padding:80px 0 100px; }
  .hero__inner{ grid-template-columns:50% 1fr; column-gap:48px; }
  /* Заголовок крупніший, ніж у базі: інакше короткий рядок «Anastasiia»
     губиться в широкій колонці й між текстом та фігурою зяє порожнеча. */
  .hero__title{ font-size:clamp(4.4rem, 6.2vw, 6rem); }
  /* На широких екранах фігуру вирівнюємо по правому краю контенту —
     текст ліворуч, фото праворуч, обидва впритул до полів. */
  .hero__photo{ margin-bottom:-100px; justify-self:end; }   /* = padding-bottom у .hero */
  .photo-frame--cutout img{ height:clamp(560px, 84vh, 780px); }
  .hero__lede{ font-size:19px; }

  .section{ padding:96px 0; }
  .section__head{ margin-bottom:46px; }

  /* два стовпці, парні продукти дзеркаляться */
  .product{ padding:84px 0; }
  .product__inner{
    flex-direction:row; align-items:center; gap:70px;
  }
  .product--flip .product__inner{ flex-direction:row-reverse; }
  .product__media{ flex:0 0 38%; }
  .product__body{ flex:1; min-width:0; }
  .cover{ max-width:none; }

  .consult{ flex-direction:row; align-items:center; gap:64px; }
  /* фото спущене нижче — за текстом воно читається спокійніше,
     ніж коли жорстко відцентроване по блоку */
  .consult__photo{ flex:0 0 40%; max-width:420px; margin-top:64px; align-self:flex-start; }
  .consult__text{ flex:1; }

  .support__box{ padding:70px 40px; }
}

/* три написання імені — для людей і для пошуку */
.foot__names{ margin-top:10px; font-size:13px; color:var(--ink-3); letter-spacing:.01em; }