/* ==========================================================================
   Olha Pasternak — portfolio
   1. Шрифти   2. Токени (= Figma Variables)   3. База   4. Хедер   5. Хіроу
   6. Стрічка навичок   7. Кейс (шаблон секції)
   ========================================================================== */

/* ── 1. Шрифти ─────────────────────────────────────────────────────────────
   Season Mix — TRIAL (див. docs/fonts/README.md). У файлах «вага» нестандартна
   (Regular = 420, Medium = 580…), тож тут кожне накреслення прив'язане до
   стандартного числа CSS. Geist — безкоштовний (OFL). */

@font-face { font-family: "Season Mix"; src: url("../fonts/season-mix/SeasonMix-TRIAL-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Mix"; src: url("../fonts/season-mix/SeasonMix-TRIAL-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Season Mix"; src: url("../fonts/season-mix/SeasonMix-TRIAL-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Mix"; src: url("../fonts/season-mix/SeasonMix-TRIAL-RegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Season Mix"; src: url("../fonts/season-mix/SeasonMix-TRIAL-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Mix"; src: url("../fonts/season-mix/SeasonMix-TRIAL-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Season Mix"; src: url("../fonts/season-mix/SeasonMix-TRIAL-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Mix"; src: url("../fonts/season-mix/SeasonMix-TRIAL-SemiBoldItalic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Season Mix"; src: url("../fonts/season-mix/SeasonMix-TRIAL-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Mix"; src: url("../fonts/season-mix/SeasonMix-TRIAL-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Season Mix"; src: url("../fonts/season-mix/SeasonMix-TRIAL-Heavy.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Mix"; src: url("../fonts/season-mix/SeasonMix-TRIAL-HeavyItalic.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; }

@font-face { font-family: "Geist"; src: url("../fonts/geist/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ── 2. Токени ─────────────────────────────────────────────────────────────
   ✅ = значення взято з макета (Figma: Hero 1:2). Решта — заготовки. */

:root {
  /* Кольори */
  --white: #ffffff;
  --gray-0: #fefffe; /* ✅ фон сторінки */
  --gray-900: #141413;
  --brown-900: #271d12; /* ✅ текст меню */
  --gray-50: #fffffe; /* ✅ фон секції кейсів */
  --gray-100: #f1efef; /* ✅ фон тегу */
  --gray-200: #e6e6e6; /* ✅ рамка ілюстрації */
  --ink-900: #181f1f; /* ✅ текст кейсу */
  --ink-800: #222f30; /* ✅ текст тегу */
  --green-600: #5f794a; /* ✅ квадратик тегу (InsurTech) */

  --color-bg: var(--gray-0);
  --color-text-primary: var(--gray-900);
  --color-text-on-media: var(--white); /* ✅ текст поверх фото */
  --color-nav-bg: rgb(255 255 255 / 0.69); /* ✅ скляна плашка меню */
  --color-nav-text: var(--brown-900);
  --color-nav-item-hover-bg: rgb(255 255 255 / 0.57); /* ✅ ховер пункту меню */
  --color-nav-item-hover-text: #000000; /* ✅ */
  --nav-blur: 7.95px; /* ✅ */

  /* Шрифти */
  --font-family-base: "Season Mix", system-ui, sans-serif; /* ✅ заголовки, лого */
  --font-family-ui: "Geist", system-ui, sans-serif; /* ✅ меню, підписи */

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 900;

  /* Text Styles */
  --text-hero-size: clamp(2.5rem, 5.14vw, 4.625rem); /* ✅ 74px на 1440, плавно менше на вужчих */
  --text-hero-line: 1.2; /* ✅ */
  --text-hero-caption-size: 1rem; /* ✅ Geist Regular 16 */
  --text-hero-caption-line: 1.3; /* ✅ */
  --text-nav-size: 0.875rem; /* ✅ Geist Medium 14 */
  --text-nav-line: 1; /* ✅ */
  --text-logo-size: 1rem; /* ✅ Season Mix Medium 16 */
  --text-logo-line: 1.2; /* ✅ */
  --text-case-title-size: 2.6875rem; /* ✅ Season Mix Medium 43 / 120% */
  --text-case-title-line: 1.2;
  --text-case-lead-size: 1.6875rem; /* ✅ Season Mix Medium 27 / 31 */
  --text-case-lead-line: 31px;
  --text-case-tag-size: 0.875rem; /* ✅ Geist Medium 14 / 14, uppercase */
  --text-case-tag-line: 1;
  --text-case-meta-size: 0.875rem; /* ✅ Geist Regular 14 / 20 */
  --text-case-meta-line: 20px;

  /* Відступи (шкала 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-20: 80px;

  /* Радіуси */
  --radius-m: 8px; /* ✅ плашка меню і пункт меню */
  --radius-xl: 24px; /* ✅ картка хіроу */

  /* Меню */
  --nav-height: 36px; /* ✅ */
  --nav-padding: 2px; /* ✅ */
  --nav-item-padding-x: var(--space-4); /* ✅ 16px */

  /* Рамка хіроу */
  --frame-inset: var(--space-4); /* ✅ відступ картки від країв екрана */
  --frame-padding-x: var(--space-12); /* ✅ лого/меню: 48px збоку */
  --frame-padding-top: var(--space-8); /* ✅ лого/меню: 32px зверху */
}

/* Мобайл (≤ 767px). Мобільного макета ще немає — це моя адаптація */
@media (max-width: 767px) {
  :root {
    --frame-padding-x: var(--space-4);
    --frame-padding-top: var(--space-4);
    --nav-item-padding-x: 12px;
  }
}

/* ── 3. База ──────────────────────────────────────────────────────────────── */

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

* {
  margin: 0;
}

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

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

body {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

/* ── 4. Хедер: лого зліва + скляне меню по центру ─────────────────────────── */

.header {
  position: absolute;
  inset: calc(var(--frame-inset) + var(--frame-padding-top)) var(--frame-inset) auto;
  z-index: 10;
  display: flex;
  align-items: center;
  height: var(--nav-height);
  padding-inline: var(--frame-padding-x);
  color: var(--color-text-on-media);
}

.header__logo {
  font-size: var(--text-logo-size);
  line-height: var(--text-logo-line);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.header__nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: var(--nav-height);
  padding: var(--nav-padding);
  border-radius: var(--radius-m);
  background: var(--color-nav-bg);
  backdrop-filter: blur(var(--nav-blur));
  -webkit-backdrop-filter: blur(var(--nav-blur));
}

.header__nav ul {
  display: flex;
  height: 100%;
  padding: 0;
  list-style: none;
}

.header__nav a {
  display: flex;
  align-items: center;
  height: 100%;
  padding-inline: var(--nav-item-padding-x);
  border-radius: var(--radius-m);
  font-family: var(--font-family-ui);
  font-size: var(--text-nav-size);
  line-height: var(--text-nav-line);
  font-weight: var(--font-weight-medium);
  color: var(--color-nav-text);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ✅ Ховер (і фокус з клавіатури) */
.header__nav a:hover,
.header__nav a:focus-visible {
  background: var(--color-nav-item-hover-bg);
  color: var(--color-nav-item-hover-text);
  outline: none;
}

/* Мобайл: меню по центру налазить на лого, тож воно йде праворуч */
@media (max-width: 767px) {
  .header__nav {
    position: static;
    transform: none;
    margin-left: auto;
  }
}

/* ── 5. Хіроу ─────────────────────────────────────────────────────────────── */

.hero {
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  padding: var(--frame-inset);
}

.hero__frame {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--gray-900);
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* На вузьких екранах фото обрізається — тримаємо в кадрі доповідачку (вона на ~63% ширини) */
  object-position: 63% 50%;
}

.hero__title {
  position: relative;
  max-width: 1044px;
  padding-inline: var(--frame-padding-x);
  font-size: var(--text-hero-size);
  line-height: var(--text-hero-line);
  font-weight: var(--font-weight-medium);
  text-align: center;
  color: var(--color-text-on-media);
}

.hero__caption {
  position: absolute;
  inset-inline: 0;
  bottom: var(--space-8); /* ✅ 32px від низу картки */
  font-family: var(--font-family-ui);
  font-size: var(--text-hero-caption-size);
  line-height: var(--text-hero-caption-line);
  color: var(--color-text-on-media);
}

/* ── 6. Стрічка навичок («табло вгору») ──────────────────────────────────────
   Рядок-маска заввишки рівно в один рядок тексту. Слова лежать одне на одному
   по центру; рух — лише вертикальний зсув на повну висоту рядка. */

:root {
  --ticker-duration: 0.9s; /* перехід (JS задає те саме значення з ticker.js) */
  --ticker-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ticker__window {
  position: relative;
  height: calc(var(--text-hero-caption-size) * var(--text-hero-caption-line));
  overflow: hidden;
}

.ticker__word {
  position: absolute;
  inset: 0;
  text-align: center;
  white-space: nowrap;
  transform: translateY(100%); /* старт: під нижнім краєм рядка */
  transition: transform var(--ticker-duration) var(--ticker-easing);
}

.ticker__word.is-current {
  transform: translateY(0);
}

.ticker__word.is-leaving {
  transform: translateY(-100%); /* фініш: за верхнім краєм рядка */
}

/* Якщо в системі вимкнено анімації — слова просто змінюються без руху */
@media (prefers-reduced-motion: reduce) {
  .ticker__word {
    transition: none;
  }
}

/* Текст для скрінрідерів: на екрані не видно, але його зачитують */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── 7. Кейс — шаблонна секція (Figma: Desktop - 5, 1:48) ─────────────────────
   Одна секція = один кейс. Текст зліва, ілюстрація справа.
   Колір квадратика в тегу задається для кожного кейсу: style="--case-accent: #…" */

.case {
  padding: 138px var(--space-20); /* ✅ */
  background: var(--gray-50);
  overflow: clip; /* широка картка під час анімації не подовжує сторінку */
  position: relative; /* для кнопки-курсора */
}

.case__inner {
  display: flex;
  justify-content: space-between;
  gap: var(--space-12);
  max-width: 1280px; /* ✅ */
  margin-inline: auto;
}

.case__text {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* назва зверху, решта притиснута донизу */
  flex: 0 0 350px; /* ✅ */
}

.case__title {
  font-size: var(--text-case-title-size);
  line-height: var(--text-case-title-line);
  font-weight: var(--font-weight-medium);
  color: #000000;
}

.case__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-8); /* ✅ 32 між описом і рядком результату */
}

.case__summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px; /* ✅ між тегом і описом */
}

.case__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* ✅ */
  padding: var(--space-2) 12px; /* ✅ 8 / 12 */
  border-radius: var(--radius-m);
  background: var(--gray-100);
  font-family: var(--font-family-ui);
  font-size: var(--text-case-tag-size);
  line-height: var(--text-case-tag-line);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  color: var(--ink-800);
}

.case__tag::before {
  content: "";
  flex: none;
  width: 10px; /* ✅ */
  height: 10px;
  background: var(--case-accent, var(--green-600));
}

.case__lead {
  font-size: var(--text-case-lead-size);
  line-height: var(--text-case-lead-line);
  font-weight: var(--font-weight-medium);
  color: var(--ink-900);
}

.case__meta {
  font-family: var(--font-family-ui);
  font-size: var(--text-case-meta-size);
  line-height: var(--text-case-meta-line);
  color: var(--ink-900);
}

/* Картка ілюстрації: .case__media — місце в макеті, .case__frame — видима рамка
   з картинкою. Ефект появи при скролі перемикається атрибутом на <html>:
   data-case-reveal="flare" (крапля, js/case-reveal-flare.js) або "scale" (js/case-reveal.js) */
.case__media {
  position: relative;
  z-index: 1;
  flex: 0 1 782px; /* ✅ */
  aspect-ratio: 782 / 480; /* ✅ */
}

.case__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl); /* ✅ 24 */
  background: var(--gray-100);
}

/* ✅ Ілюстрація трохи більша за картку і прив'язана до лівого верхнього кута
   (873 × 491 у картці 782 × 480), тож правий край обрізається */
.case__frame img {
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc((100% + 2px) * 873 / 782); /* +2px = рамка картки */
  max-width: none;
  height: auto;
}

/* Варіант «scale»: картка стартує широкою і звужується (рамку й скруглення
   ділимо на масштаб, щоб на екрані вони лишались 1px і 24px) */
[data-case-reveal="scale"] .case__media {
  transform-origin: 50% 0;
  will-change: transform;
}

[data-case-reveal="scale"] .case__frame {
  border-width: calc(1px / var(--reveal-scale, 1));
  border-radius: calc(var(--radius-xl) / var(--reveal-scale, 1));
}

/* Варіант «flare»: низ картки «розтікається» в боки біля низу екрана.
   Скрипт задає --flare (наскільки рамка ширша за картку з кожного боку)
   і --flare-clip (форма). Поки є «ніжки», рамку ховаємо — її малює форма */
[data-case-reveal="flare"] .case__frame {
  left: calc(-1 * var(--flare, 0px));
  right: calc(-1 * var(--flare, 0px));
}

[data-case-reveal="flare"] .case__media.is-flaring .case__frame {
  border-color: transparent;
  border-radius: 0;
  clip-path: var(--flare-clip);
}

/* Поки ілюстрації немає */
.case__media-placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  font-family: var(--font-family-ui);
  font-size: var(--text-case-meta-size);
  color: var(--ink-800);
  opacity: 0.5;
}

/* ── 8. Анімації появи (js/intro.js) ─────────────────────────────────────────
   Стартові (приховані) стани діють лише коли працює JS (клас .js на <html>).
   Рух — через властивості translate/scale/opacity, щоб не зачіпати transform,
   яким уже центроване меню. */

:root {
  --motion-easing: cubic-bezier(0.2, 0.8, 0.2, 1); /* той самий, що в стрічці */
}

/* Фото хіроу «осідає»: 1.08 → 1 за 1,6с */
.js .hero__image {
  scale: 1.08;
  transition: scale 1.6s var(--motion-easing);
}

.is-loaded .hero__image {
  scale: 1;
}

/* Заголовок: рядки виїжджають знизу з-під маски */
.js .hero__title {
  visibility: hidden; /* до розбиття на рядки, щоб не блимнув */
}

.js .hero__title.is-split {
  visibility: visible;
}

.hero__line {
  display: block;
  overflow: hidden;
}

.hero__line-inner {
  display: inline-block;
  translate: 0 100%;
  transition: translate 0.9s var(--motion-easing);
  transition-delay: var(--delay, 0ms);
}

.is-loaded .hero__line-inner {
  translate: 0 0;
}

/* Текст кейсу при скролі: назва → тег → опис → результат.
   Затримку кожного елемента (--delay, крок 80 мс) задає скрипт */
.js [data-reveal-item] {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity 0.8s var(--motion-easing),
    translate 0.8s var(--motion-easing);
  transition-delay: var(--delay, 0ms);
}

.js .is-visible [data-reveal-item] {
  opacity: 1;
  translate: 0 0;
}

/* Запобіжник: якщо скрипт не запустився або анімації вимкнені — все видно одразу */
.no-motion .hero__image,
.no-motion .hero__line-inner,
.no-motion [data-reveal-item] {
  scale: none;
  opacity: 1;
  translate: none;
  transition: none;
}

.no-motion .hero__title {
  visibility: visible;
}

/* ── 9. Кнопка «View case study» (js/case-cursor.js) ──────────────────────────
   Figma: Nav 3:2 — пігулка 138 × 34, зелена 70% з розмиттям фону.
   • .cursor-cta — ОДНА спільна кнопка на всі кейси: з мишею їде за курсором
     і не зникає при переході з кейсу на кейс.
   • .case__cta — окреме посилання кожного кейсу для клавіатури і скрінрідерів;
     у режимі «курсор» видно лише при фокусі з клавіатури (на місці з макета). */

.cta-pill {
  display: flex;
  align-items: center;
  height: 34px; /* ✅ */
  padding: 2px var(--space-4); /* ✅ 2 / 16 */
  border-radius: 53px; /* ✅ */
  background: rgb(48 76 27 / 0.7); /* ✅ */
  backdrop-filter: blur(7.95px); /* ✅ */
  -webkit-backdrop-filter: blur(7.95px);
  font-size: 0.875rem; /* ✅ Season Mix SemiBold 14 / 14 */
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
}

.case__cta {
  position: absolute;
  left: 530px; /* ✅ місце з макета */
  top: 346px;
  z-index: 5;
}

.case__cta:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* Режим «курсор» (вмикає скрипт на пристроях з мишею) */
.cursor-mode .case__inner {
  cursor: none; /* лише в зоні контенту: від назви до низу ілюстрації */
}

.cursor-mode .case__cta {
  opacity: 0;
  pointer-events: none;
}

.cursor-mode .case__cta:focus-visible {
  opacity: 1;
}

.cursor-cta {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  opacity: 0;
  scale: 0.9;
  pointer-events: none; /* не заважає кліку по кейсу */
  transition:
    opacity 0.4s var(--motion-easing),
    scale 0.4s var(--motion-easing);
  will-change: transform;
}

.cursor-cta.is-visible {
  opacity: 1;
  scale: 1;
}

/* ── 10. Додаткові роботи: 3 картки «віялом» (js/more-work.js) ───────────────
   Перша версія за референсом (макета у Figma ще немає).
   Поява: картки вилітають стопкою з центру і розходяться віялом, по черзі.
   Ховер: картка вирівнюється і піднімається. --rot і --lift задаються на картці. */

.more {
  position: relative;
  isolation: isolate;
  /* знизу +240px: на цю частину фото «наїжджає» біла секція відгуків */
  padding: 138px var(--space-20) calc(240px + var(--tms-overlap, 240px));
  overflow: clip;
  border-radius: 48px 48px 0 0; /* ✅ */
  background: #2b2f26;
}

/* ✅ Фон: фото з виступу, віддзеркалене і сильно розмите (Figma: blur 43.25) */
.more::before {
  content: "";
  position: absolute;
  inset: -120px;
  z-index: -2;
  /* ✅ Масштаб і зсув як у Figma: фото 2385 px завширшки на секцію 1440, центр зсунутий
     на +75 px праворуч і −35 px угору (знак X інвертований, бо шар віддзеркалений) */
  background: url("../images/more-bg.jpg") calc(50% - 75px) calc(50% - 35px) / calc((100% - 240px) * 1.657) auto no-repeat;
  transform: scaleX(-1);
  filter: blur(43.25px);
}

/* ✅ Тонування поверх фото: чорний 10% + зелений rgba(78, 122, 8, 0.1) */
.more::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgb(78 122 8 / 0.1), rgb(78 122 8 / 0.1)),
    rgb(0 0 0 / 0.1);
}

.more__title {
  margin-bottom: 72px;
  font-size: var(--text-case-title-size);
  line-height: var(--text-case-title-line);
  font-weight: var(--font-weight-medium);
  text-align: center;
  color: var(--white); /* ✅ */
}

.more__cards {
  display: flex;
  justify-content: center;
  align-items: stretch; /* усі три картки однакової висоти — віяло симетричне */
  gap: 40px;
  max-width: 1280px;
  margin-inline: auto;
}

.more__card {
  flex: 0 1 360px;
  padding: 14px 14px 28px;
  border-radius: 20px;
  background: var(--white);
  box-shadow:
    0 1px 1px rgb(24 31 31 / 0.04),
    0 12px 20px rgb(24 31 31 / 0.08); /* ✅ */
  /* ✅ Віяло симетричне (Figma 8:58): бічні ±15°, на 64px нижче середньої
     і на 30px далі від неї — центри на ±430px від центру */
  rotate: var(--rot, 0deg);
  translate: var(--shift, 0px) var(--lift, 0px);
  transition:
    rotate 0.5s var(--motion-easing),
    translate 0.5s var(--motion-easing),
    box-shadow 0.5s var(--motion-easing),
    opacity 0.5s var(--motion-easing);
}

.more__card:hover {
  rotate: 0deg;
  translate: var(--shift, 0px) calc(var(--lift, 0px) - 12px);
  box-shadow:
    0 2px 4px rgb(24 31 31 / 0.05),
    0 24px 60px rgb(24 31 31 / 0.14);
}

/* Стопка до появи: усі картки по центру, без віяла (зсув --stack-x рахує скрипт) */
.more__cards.is-stacked .more__card {
  opacity: 0;
  translate: var(--stack-x, 0px) 160px;
  rotate: var(--stack-rot, 0deg);
}

/* «Роздача»: довший рух із затримкою для кожної картки */
.more__cards.is-dealing .more__card {
  transition:
    rotate 1.1s var(--motion-easing),
    translate 1.1s var(--motion-easing),
    opacity 0.6s var(--motion-easing);
  transition-delay: var(--deal-delay, 0ms);
}

.more__art {
  display: grid;
  place-items: center;
  height: 230px;
  margin-bottom: 22px;
  overflow: hidden;
  border-radius: 12px;
  background: #f3f3f0;
}

.more__name {
  padding-inline: 10px;
  font-size: var(--text-case-lead-size);
  line-height: 1.2;
  font-weight: var(--font-weight-medium);
  color: var(--ink-900);
}

.more__desc {
  margin-top: var(--space-2);
  padding-inline: 10px;
  font-family: var(--font-family-ui);
  font-size: 0.875rem;
  line-height: 20px;
  color: #3f4747;
}

/* ── Міні-ілюстрація: Integrity Lab (список справ, статус змінюється) ── */

.mini-panel {
  width: 86%;
  padding: 4px;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 6px 20px rgb(24 31 31 / 0.08);
  font-family: var(--font-family-ui);
}

.mini-row {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--space-2);
  padding: 10px;
}

.mini-row + .mini-row {
  border-top: 1px solid #f0f0ee;
}

.mini-row__title {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--ink-900);
}

.mini-row__sub {
  grid-row: 2;
  font-size: 11px;
  color: #8a9090;
}

.mini-status {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.mini-status--review { background: #fff3d6; color: #8a6200; }
.mini-status--done { background: #e3ecdc; color: #3f5a2c; }

/* Статус, що змінюється: New → In review → Resolved */
.mini-status--live {
  display: inline-grid;
  padding: 0;
  justify-items: end;
}

.mini-status--live span {
  grid-area: 1 / 1;
  padding: 4px 8px;
  border-radius: 999px;
  opacity: 0;
  animation: status-cycle 6s var(--motion-easing) infinite;
}

.mini-status--live span:nth-child(1) { background: #e6eef8; color: #2f5d8a; }
.mini-status--live span:nth-child(2) { background: #fff3d6; color: #8a6200; animation-delay: 2s; }
.mini-status--live span:nth-child(3) { background: #e3ecdc; color: #3f5a2c; animation-delay: 4s; }

@keyframes status-cycle {
  0% { opacity: 0; translate: 0 6px; }
  6%, 30% { opacity: 1; translate: 0 0; }
  36%, 100% { opacity: 0; translate: 0 -6px; }
}

/* ── Міні-ілюстрація: Memo (картки гри перевертаються) ── */

.memo {
  display: grid;
  grid-template-columns: repeat(3, 64px);
  gap: 10px;
  perspective: 600px;
}

.memo__card {
  position: relative;
  width: 64px;
  height: 80px;
  transform-style: preserve-3d;
}

/* Сорочка картки */
.memo__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.12) 0 10px, transparent 11px),
    var(--ink-900);
  backface-visibility: hidden;
}

/* Лице картки */
.memo__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px #e6e6e6;
  font-size: 24px;
  color: var(--green-600);
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

/* Уже знайдена пара — лицем догори */
.memo__card:nth-child(1),
.memo__card:nth-child(6) {
  transform: rotateY(180deg);
}

.memo__card--flip {
  animation: memo-flip 4s var(--motion-easing) infinite;
}

.memo__card--late {
  animation-delay: 0.35s;
}

@keyframes memo-flip {
  0%, 15% { transform: rotateY(0deg); }
  28%, 68% { transform: rotateY(180deg); }
  80%, 100% { transform: rotateY(0deg); }
}

/* ── Міні-ілюстрація: Ghost App (мапа з маршрутом і пульсом) ── */

.map {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, #ffffff 46px 52px),
    repeating-linear-gradient(0deg, transparent 0 40px, #ffffff 40px 46px),
    #e8eee2;
}

.map__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.map__route path {
  animation: route-run 1.2s linear infinite;
}

@keyframes route-run {
  to { stroke-dashoffset: -12; }
}

.map__start {
  position: absolute;
  left: 10%;
  top: 85%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--ink-900);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.2);
}

.map__pin {
  position: absolute;
  left: 83.3%;
  top: 20%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--green-600);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.25);
}

.map__pulse {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--green-600);
  animation: pin-pulse 2s ease-out infinite;
}

@keyframes pin-pulse {
  0% { opacity: 0.5; scale: 1; }
  100% { opacity: 0; scale: 3; }
}

.map__chip {
  position: absolute;
  right: 22%;
  top: 9%;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 4px 12px rgb(24 31 31 / 0.12);
  font-family: var(--font-family-ui);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--ink-900);
}

@media (prefers-reduced-motion: reduce) {
  .mini-status--live span,
  .memo__card--flip,
  .map__route path,
  .map__pulse {
    animation: none;
  }

  .mini-status--live span:nth-child(3) {
    opacity: 1;
  }
}

/* ── 11. Відгуки (перша версія за референсом) ─────────────────────────────────
   Картка: ім'я й роль зліва вгорі, логотип по центру, коротка цитата знизу.
   Ховер / фокус: з'являється живий зелений патерн із «зерном», текст стає білим,
   коротка цитата змінюється розширеною. Картки — не посилання. */

/* Біла секція «наїжджає» на фото блоку More products: стартує вужчою за екран
   (відступ --tms-inset з боків), при скролі розширюється до країв (js/tms-expand.js).
   Розширюється лише білий фон (clip-path), вміст стоїть на місці */
:root {
  --tms-overlap: 240px; /* наскільки секція заходить на фото */
  --tms-inset-start: 56px; /* відступ від країв на старті */
}

.tms {
  position: relative;
  z-index: 1;
  isolation: isolate;
  margin-top: calc(-1 * var(--tms-overlap));
  padding: var(--space-20) var(--space-20) 138px; /* зверху 80, як на скриншоті */
}

.tms::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--white);
  clip-path: inset(0 var(--tms-inset, var(--tms-inset-start)) round 48px 48px 0 0);
}

.tms__title {
  max-width: 1280px;
  margin: 0 auto 72px;
  font-size: var(--text-case-title-size);
  line-height: var(--text-case-title-line);
  font-weight: var(--font-weight-medium);
  text-align: left;
  color: #000000;
}

@media (prefers-reduced-motion: reduce) {
  .tms::before {
    clip-path: inset(0 round 48px 48px 0 0);
  }
}

.tms__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  max-width: 1280px;
  margin-inline: auto;
}

.tm {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  aspect-ratio: 1 / 1;
  padding: 28px;
  overflow: hidden;
  border: 1px solid #ecebe8;
  border-radius: 24px;
  background: #f5f4f2;
  color: var(--ink-900);
  text-decoration: none;
  transition: color 0.4s var(--motion-easing);
}

/* Живий патерн: шар з градієнтом, що повільно «переливається», + зерно */
.tm::before,
.tm::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s var(--motion-easing);
}

.tm::before {
  inset: -40%;
  background:
    radial-gradient(40% 50% at 20% 30%, #9fc27f 0%, transparent 70%),
    radial-gradient(35% 45% at 80% 20%, #c5d97a 0%, transparent 70%),
    radial-gradient(45% 55% at 70% 80%, #2f4a22 0%, transparent 70%),
    radial-gradient(40% 50% at 25% 85%, #5f794a 0%, transparent 70%),
    #45603a;
  animation: tm-drift 9s ease-in-out infinite alternate paused;
}

.tm::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

@keyframes tm-drift {
  0% { translate: 0 0; rotate: 0deg; }
  50% { translate: 6% -4%; rotate: 8deg; }
  100% { translate: -5% 5%; rotate: -6deg; }
}

.tm:hover,
.tm:focus-visible {
  color: var(--white);
  outline: none;
}

.tm:hover::before,
.tm:focus-visible::before {
  opacity: 1;
  animation-play-state: running;
}

.tm:hover::after,
.tm:focus-visible::after {
  opacity: 0.35;
}

.tm__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-family-ui);
}

.tm__name {
  font-size: 1rem;
  line-height: 1.2;
  font-weight: var(--font-weight-medium);
}

.tm__role {
  font-size: 0.8125rem;
  line-height: 1.3;
  opacity: 0.6;
}

/* Логотип завжди в центрі картки, незалежно від довжини цитати */
.tm__logo {
  position: absolute;
  inset: 0;
  margin: auto;
  transition:
    opacity 0.4s var(--motion-easing),
    translate 0.4s var(--motion-easing);
}

/* Розширена цитата довша — логотип відходить, щоб звільнити місце */
.tm:hover .tm__logo,
.tm:focus-visible .tm__logo {
  opacity: 0;
  translate: 0 -16px;
}

.tm__quotes {
  display: grid;
  align-items: end;
}

.tm__quote {
  grid-area: 1 / 1;
  font-family: var(--font-family-ui);
  transition:
    opacity 0.4s var(--motion-easing),
    translate 0.4s var(--motion-easing);
}

.tm__quote--short {
  font-size: 1.125rem;
  line-height: 1.45;
}

.tm__quote--long {
  font-size: 0.9375rem;
  line-height: 1.5;
  opacity: 0;
  translate: 0 12px;
}

.tm:hover .tm__quote--short,
.tm:focus-visible .tm__quote--short {
  opacity: 0;
  translate: 0 -12px;
}

.tm:hover .tm__quote--long,
.tm:focus-visible .tm__quote--long {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .tm::before {
    animation: none;
  }
}