/* ==========================================================================
   ТОКЕНИ ДИЗАЙНУ — єдине місце, де живуть кольори, шрифти, відступи й розміри.
   Хочеш змінити вигляд сайту — міняй значення тут, а не в компонентах нижче.
   Перший блок :root — десктоп (макет 1440), другий — телефон (макет 390).
   ========================================================================== */
:root {
  /* --- Кольори --- */
  --color-bg: #F4F6FA;          /* фон сторінки */
  --color-ink: #0F1420;         /* основний текст, темні лінії */
  --color-muted: #4E5768;       /* другорядний текст, підписи */
  --color-line: #DCE2EC;        /* тонкі роздільники */
  --color-chip: #E6EBF3;        /* фон маленьких кнопок */
  --color-accent: #6EA8FF;      /* акцент: кнопка Telegram */
  --color-dark: #0F1420;        /* фон темного блоку контактів */
  --color-dark-line: #253045;   /* лінії на темному фоні */
  --color-dark-muted: #B8C0CE;  /* підписи на темному фоні (світліший, щоб читався й на фото у футері) */
  --color-on-dark: #F4F6FA;     /* текст на темному фоні */
  --color-accent-hover: #4F92F5;      /* кнопка Telegram при наведенні */
  --color-accent-text: #2A68CC;       /* акцент для тексту: посилання на сайти проєктів (контраст 4.9:1) */
  --color-chip-hover: #D5DDEA;        /* маленькі кнопки при наведенні */
  --color-dark-line-hover: #34425C;   /* маленькі кнопки на темному фоні при наведенні */
  --color-dot: #8A94A6;               /* неактивні крапки каруселі */
  --color-bg-glass: rgba(244, 246, 250, 0.72); /* фон шапки: напівпрозорий, щоб під ним було видно розмитий контент */
  --blur-header: 16px;                /* сила розмиття під шапкою */
  --footer-photo-opacity: 0.3;        /* фото на темному блоці контактів: чим менше, тим темніше й читабельніше */

  /* --- Шрифти --- */
  --font-body: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* --- Сітка й форма --- */
  --container: 1280px;   /* максимальна ширина контенту */
  --gutter: 40px;        /* бокові поля */
  --radius: 10px;
  --radius-sm: 6px;
  --tap: 44px;           /* мінімальна зона натискання */
  --btn-h: 60px;         /* висота великих кнопок */
  --btn-pad: 28px;
  --icon: 18px;
  --icon-lg: 20px;
  --logo: 28px;          /* знак-логотип у шапці */
  --logo-s: 18px;        /* знак-логотип у підвалі */
  --logo-gap: 8px;       /* відступ між знаком і «PAVEL ERMAK» */

  /* --- Відступи --- */
  --space-header-y: 20px;
  --header-h: calc(var(--tap) + var(--space-header-y) * 2); /* висота шапки: під неї зупиняються переходи по меню */
  --z-header: 10;          /* шапка завжди над контентом */
  --space-section: 112px;     /* над секціями Work / About / Contact */
  --space-hero-top: 72px;
  --space-hero-gap: 28px;
  --space-card-y: 40px;
  --space-case-hero-top: 88px;
  --space-case-row-y: 72px;   /* секції «Задача» і «Що я зробив» */
  --space-case-block: 40px;   /* поля навколо картинок у кейсі */
  --space-next-y: 64px;

  /* --- Розміри тексту: моно-підписи --- */
  --fs-label: 11px;        /* LOCATION, ROLE, RESULT */
  --fs-eyebrow: 13px;      /* 02 — SELECTED WORK */
  --fs-mono-s: 12px;       /* LINKEDIN, футер */
  --fs-brand: 14px;
  --fs-back: 14px;         /* ← ALL WORK */
  --fs-lang: 13px;
  --fs-copy: 11px;

  /* --- Розміри тексту: заголовки й цифри --- */
  --fs-hero-name: min(12.8vw, 184px);
  --fw-hero-name: 800;     /* «Pavel Ermak»: Manrope ExtraBold */
  --fs-h2: 48px;
  --fs-contact-title: 80px;
  --fs-num-xl: 128px;      /* +15 у головному кейсі */
  --fs-num-l: 88px;        /* +22%, +18% */
  --fs-num-m: 40px;        /* +25%, результати в кейсах */
  --fs-num-s: 28px;        /* −12%, +~8% */
  --fs-num-cell: 40px;     /* три результати в кейсі WinBoss */
  --fs-num-team: 48px;
  --fs-h3: 28px;
  --fs-h3-card: 22px;
  --fs-case-title: 112px;
  --fs-case-title-long: 112px;
  --fs-next: 56px;
  --fs-menu: 40px;         /* пункти мобільного меню */

  /* --- Розміри тексту: основний текст --- */
  --fs-lede: 26px;
  --fs-about: 22px;
  --fs-case-text: 28px;    /* текст задачі в кейсі */
  --fs-case-sub: 28px;
  --fs-step: 21px;
  --fs-btn: 18px;
  --fs-btn-contact: 18px;
  --fs-btn-case: 17px;
  --fs-email: 20px;
  --fs-text-l: 17px;       /* підзаголовок кейсу, підпис +15 */
  --fs-text: 16px;
  --fs-text-s: 15px;       /* опис задачі, підписи метрик */
  --fs-meta: 14px;         /* роль у головному кейсі */
  --fs-meta-s: 13px;       /* роль у малих картках, підписи −12% */
  --fs-nav: 15px;
  --fs-site-link: 22px;    /* посилання на сайт поруч із назвою кейсу */

  /* --- Рух: криві, тривалості, відстані --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* різкий старт, довге м’яке гальмування */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* для ліній і «шторок» */
  --dur-hover: 380ms;      /* реакція на наведення */
  --dur-hover-slow: 900ms; /* наближення обкладинки */
  --dur-reveal: 1000ms;    /* поява блоку */
  --dur-hero: 1200ms;      /* поява першого екрана */
  --dur-wipe: 1300ms;      /* малювання ліній */
  --dur-image: 800ms;      /* поява картинки: «шторка» + проявлення */
  --image-zoom-in: 1.06;   /* наскільки картинка збільшена на старті появи */
  --dur-word: 700ms;       /* поява одного слова */
  --dur-menu: 600ms;       /* відкриття мобільного меню */
  --dur-photo-fill: 1200ms;   /* «Pavel Ermak» заливається фото */
  --delay-photo-fill: 2ms;    /* через скільки після завантаження починається заливка */
  --dur-count: 1600ms;     /* відлік цифр від нуля */
  --stagger: 90ms;         /* затримка між сусідніми елементами */
  --stagger-word: 16ms;    /* затримка між словами */
  --shift-x: 72px;         /* наскільки текст виїжджає збоку */
  --shift-y: 36px;         /* наскільки блок виїжджає знизу */
  --nudge: 6px;            /* зсув стрілки при наведенні */
  --cover-zoom: 1.04;      /* наближення обкладинки при наведенні */
}

@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --btn-h: 56px;
    --btn-pad: 20px;
    --icon: 20px;

    --space-header-y: 10px;
    --space-section: 64px;
    --space-hero-top: 40px;
    --space-hero-gap: 20px;
    --space-card-y: 24px;
    --space-case-hero-top: 40px;
    --space-case-row-y: 32px;
    --space-case-block: 20px;
    --space-next-y: 32px;

    --fs-label: 12px;
    --fs-eyebrow: 12px;
    --fs-brand: 13px;
    --fs-back: 12px;
    --fs-lang: 12px;
    --fs-copy: 12px;

    --fs-hero-name: min(92px, 23.6vw);
    --fs-h2: 30px;
    --fs-contact-title: 48px;
    --fs-num-xl: 44px;
    --fs-num-l: 36px;
    --fs-num-m: 32px;
    --fs-num-s: 22px;
    --fs-num-cell: 24px;
    --fs-num-team: 36px;
    --fs-h3: 22px;
    --fs-h3-card: 20px;
    --fs-case-title: 52px;
    --fs-case-title-long: 44px;
    --fs-next: 28px;

    --fs-lede: 18px;
    --fs-about: 17px;
    --fs-case-text: 20px;
    --fs-case-sub: 20px;
    --fs-step: 16px;
    --fs-btn: 17px;
    --fs-btn-contact: 16px;
    --fs-btn-case: 16px;
    --fs-email: 16px;
    --fs-text-l: 16px;
    --fs-text-s: 16px;
    --fs-meta: 16px;
    --fs-meta-s: 16px;
    --fs-site-link: 18px;

    --shift-x: 36px;
    --shift-y: 24px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--color-bg);
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h); /* перехід по меню не ховає заголовок під шапкою */
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-text);
}

img { display: block; max-width: 100%; height: auto; }
button { font: inherit; }
b { font-weight: 600; }

a { color: var(--color-ink); transition: color var(--dur-hover) var(--ease-out); }
a:hover { color: var(--color-muted); }

/* Обгортка сторінки: не дає блокам, що виїжджають збоку, створити горизонтальний скрол */
.page { overflow-x: hidden; overflow-x: clip; }

/* Рамка фокусу (навігація клавіатурою): темна на світлому фоні, синя на темних блоках — контраст ≥ 3:1 */
:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.contact :focus-visible, .case-contact :focus-visible { outline-color: var(--color-accent); }
/* «Skip to content»: невидиме, поки на нього не перейти клавішею Tab */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: calc(var(--z-header) + 1);
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--color-ink);
  color: var(--color-on-dark);
  font-weight: 600;
  transform: translate3d(0, -200%, 0);
}
.skip-link:focus-visible { transform: none; color: var(--color-on-dark); }
#main { scroll-margin-top: var(--header-h); }

/* Сторінка 404 */
.not-found {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-hero-gap);
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-section) var(--gutter);
}
.not-found-text { margin: 0; max-width: 560px; font-size: var(--fs-text-l); line-height: 1.5; color: var(--color-muted); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Показ лише на десктопі / лише на телефоні */
.m-only { display: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   СПІЛЬНІ ЕЛЕМЕНТИ
   ========================================================================== */
.eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  color: var(--color-muted);
}
.label.m-only { display: none; } /* підпис лише для телефона (напр. RESULTS у WinBoss) */

.icon { width: var(--icon); height: var(--icon); flex: none; }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }

/* Кнопка: при наведенні знизу «наливається» заливка кольору --btn-fill */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: var(--btn-h);
  padding: 0 var(--btn-pad);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-btn);
  transition: color var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fill);
  transform: translate3d(0, 101%, 0);
  transition: transform var(--dur-hover) var(--ease-out);
}
.btn .arrow, .btn .icon { display: inline-block; transition: transform var(--dur-hover) var(--ease-out); }
.btn:active { transform: scale(0.98); }

.btn-accent, .btn-accent:hover { --btn-fill: var(--color-accent-hover); background: var(--color-accent); color: var(--color-ink); }
.btn-outline { --btn-fill: var(--color-ink); padding: 0 24px; border: 1px solid var(--color-ink); color: var(--color-ink); }
.btn-outline-light { --btn-fill: var(--color-on-dark); padding: 0 24px; border: 1px solid var(--color-on-dark); color: var(--color-on-dark); }

.copy-btn {
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-chip);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-copy);
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}
.copy-btn:active { transform: scale(0.96); }
.copy-btn--dark { background: var(--color-dark-line); color: var(--color-on-dark); }

.num { font-family: var(--font-head); font-weight: 600; }

/* Обкладинка: рамка 16:10 з темним фоном, поки вантажиться картинка */
.cover {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-ink);
}
.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform var(--dur-hover-slow) var(--ease-out),
    scale calc(var(--dur-image) * 1.5) var(--ease-out) calc(var(--i, 0) * var(--stagger));
}

/* ==========================================================================
   ГОЛОВНА: шапка
   ========================================================================== */
/* Смуга на всю ширину, що лишається вгорі екрана під час скролу */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-bg-glass);
  -webkit-backdrop-filter: blur(var(--blur-header));
  backdrop-filter: blur(var(--blur-header));
}
/* Лінія під шапкою з’являється, коли сторінку прокрутили (клас ставить main.js) */
.topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-line);
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease-out);
}
.topbar.is-stuck::after,
.topbar.is-open::after { opacity: 1; }

/* Бургер і мобільне меню: лише на телефоні */
.burger, .m-menu { display: none; }

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: var(--space-header-y) 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--logo-gap);
  min-height: var(--tap);
  font-family: var(--font-mono);
  font-size: var(--fs-brand);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
}
/* Знак-логотип (inline SVG): бере колір тексту поруч */
.logo { display: block; flex: none; width: var(--logo); height: var(--logo); }

.nav {
  margin: 0 auto; /* пункти меню — по центру шапки */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  font-size: var(--fs-nav);
}
.nav-link { display: inline-flex; align-items: center; min-height: var(--tap); }
.header-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px; }
/* Посилання меню: при наведенні зліва «виростає» лінія підкреслення */
.nav-link {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}

.lang {
  display: flex;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-lang);
}
.lang-btn {
  min-width: 40px;
  min-height: 36px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.lang-btn[aria-pressed="true"] { background: var(--color-ink); color: var(--color-on-dark); }

.header-email { display: flex; align-items: center; gap: 4px; }
.email-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 12px;
  text-decoration: none;
  font-size: var(--fs-nav);
  transition: color var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out);
}

/* ==========================================================================
   ГОЛОВНА: перший екран
   ========================================================================== */
.hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-hero-gap);
  padding-top: var(--space-hero-top);
}

.hero-name {
  margin: 0;
  font-family: var(--font-head);
  font-weight: var(--fw-hero-name);
  font-size: var(--fs-hero-name);
  line-height: 0.92;
  letter-spacing: -0.05em;
  white-space: nowrap;
}
.hero-name > span { display: inline-block; }
/* «Pavel Ermak» залитий фото з футера: фон видно лише всередині літер.
   Шари фону: 1) чорна «кришка» — анімація опускає її, і фото заливає літери знизу вгору;
   2) фото; 3) колір тексту під усім — якщо фото не завантажиться, ім’я лишиться чорним. */
.hero-name > span {
  color: transparent;
  background:
    linear-gradient(var(--color-ink), var(--color-ink)) top / 100% 0% no-repeat,
    url(/images/footer-bg.webp) center / cover no-repeat,
    var(--color-ink);
  -webkit-background-clip: text;
  background-clip: text;
}
@keyframes photo-fill {
  from { background-size: 100% 100%, cover; }
  to   { background-size: 100% 0%, cover; }
}

.hero-bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 48px;
  padding: 28px 0 56px;
  border-top: 2px solid transparent;
}

/* Лінії-роздільники, які вміють «малюватися» зліва направо.
   Рамка лишається прозорою (тримає відступи), а лінію малює ::before поверх неї. */
.hero-bottom, .case-card--feature { --rule-h: 2px; --rule-color: var(--color-ink); }
.hero-bottom::before, .case-card--feature::before, .teams-grid::before {
  content: '';
  position: absolute;
  top: calc(var(--rule-h, 1px) * -1);
  left: 0;
  right: 0;
  height: var(--rule-h, 1px);
  background: var(--rule-color, var(--color-line));
  transform-origin: left center;
}

.hero-lede {
  flex: 1 1 520px;
  min-width: 0;
  max-width: 720px;
  margin: 0;
  font-size: var(--fs-lede);
  line-height: 1.4;
}

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

/* Ключові факти */
.facts {
  list-style: none;
  margin: 0;
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.fact-value { display: block; margin-top: 4px; font-size: var(--fs-text); font-weight: 500; }

/* ==========================================================================
   ГОЛОВНА: кейси
   ========================================================================== */
.work { padding-top: var(--space-section); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 40px;
}

.h2 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.03em;
  white-space: pre-line;
}

.card-eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  color: var(--color-muted);
}

/* Картка кейсу. Одна розмітка на всі чотири кейси:
   --feature — головний (WinBoss), --wide — широкий (Yoju), без модифікатора — малі (Kauri, Godex) */
.case-card { display: flex; flex-direction: column; gap: 20px; }
.case-card-info { display: contents; }
.card-metric { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.card-metric-label { flex: 1 1 180px; font-size: var(--fs-text-s); font-weight: 500; }
.card-title { display: flex; flex-direction: column; gap: 4px; }
.h3 { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: var(--fs-h3-card); letter-spacing: -0.02em; }
.card-sub { margin: 0; font-size: var(--fs-text); }
.card-role { margin: 0; font-size: var(--fs-meta-s); color: var(--color-muted); }
.card-task { margin: 0; font-size: var(--fs-text-s); line-height: 1.55; }
/* Додатковий досвід під кейсом (WinBoss, Yoju): iGaming з нуля, дизайн-системи */
.card-note { margin: 0; font-size: var(--fs-text-s); line-height: 1.55; color: var(--color-muted); }

.open-link {
  align-self: flex-start;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 600;
  font-size: var(--fs-text-s);
  text-underline-offset: 0.15em;
  transition: color var(--dur-hover) var(--ease-out), text-underline-offset var(--dur-hover) var(--ease-out);
}

/* «Open case →» і поруч посилання на живий сайт проєкту (синє, відкривається в новій вкладці) */
.card-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; }
.site-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: var(--tap);
  font-weight: 600;
  font-size: var(--fs-text-s);
  color: var(--color-accent-text);
  text-underline-offset: 0.15em;
  transition: text-underline-offset var(--dur-hover) var(--ease-out);
}
.site-link:hover { color: var(--color-accent-text); }
.site-link-icon { transition: transform var(--dur-hover) var(--ease-out); }

.num-xl { font-size: var(--fs-num-xl); line-height: 0.9; letter-spacing: -0.05em; }
.num-l { font-size: var(--fs-num-l); line-height: 0.9; letter-spacing: -0.05em; }
.num-s { display: block; font-size: var(--fs-num-s); letter-spacing: -0.02em; }

/* Головний кейс (WinBoss): обкладинка зліва, цифри й опис справа */
.case-card--feature {
  position: relative;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 32px 40px;
  padding: var(--space-card-y) 0;
  border-top: 2px solid transparent;
}
.case-card--feature .case-card-cover { flex: 8 1 600px; min-width: 0; align-self: flex-start; } /* не тягнеться за висотою тексту → картинка не обрізається */
.case-card--feature .case-card-info { flex: 4 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.case-card--feature .card-metric { flex-direction: column; align-items: stretch; gap: 6px; }
.case-card--feature .card-metric-label { flex: none; font-size: var(--fs-text-l); }
.case-card--feature .card-title { gap: 6px; padding-top: 20px; border-top: 1px solid var(--color-line); }
.case-card--feature .h3 { font-size: var(--fs-h3); }
.case-card--feature .card-sub { font-size: var(--fs-text-l); }
.case-card--feature .card-role { font-size: var(--fs-meta); }
.case-card--feature .open-link, .case-card--feature .site-link { font-size: var(--fs-text); }

.feature-metrics { display: flex; flex-wrap: wrap; gap: 28px; }
.metric-label { font-size: var(--fs-meta-s); color: var(--color-muted); }

/* Малі картки (Kauri, Godex) — дві колонки */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 40px;
  padding: 40px 0;
  border-top: 1px solid var(--color-line);
}

/* Широкий кейс (Yoju): обкладинка зліва, опис справа */
.case-card--wide {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 32px 40px;
  padding: 40px 0;
  border-top: 1px solid var(--color-line);
}
.case-card--wide .case-card-cover { flex: 7 1 520px; min-width: 0; align-self: flex-start; }
.case-card--wide .case-card-info { flex: 5 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* ==========================================================================
   ГОЛОВНА: про мене
   ========================================================================== */
.about {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 48px;
  padding: var(--space-section) 0 96px;
}
.about-head { flex: 4 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.about-body { flex: 8 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.about-text { margin: 0; max-width: 760px; font-size: var(--fs-about); line-height: 1.55; }

.teams-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  padding-top: 24px;
  border-top: 1px solid transparent;
}
.team { display: flex; flex-direction: column; gap: 6px; }
.num-team { font-size: var(--fs-num-team); letter-spacing: -0.04em; }
.team-label { font-size: var(--fs-text-s); line-height: 1.5; }
.teams { margin: 0; font-family: var(--font-mono); font-size: var(--fs-eyebrow); line-height: 1.6; color: var(--color-muted); }

/* ==========================================================================
   ГОЛОВНА: контакти
   ========================================================================== */
.contact { background: var(--color-dark); color: var(--color-on-dark); }
/* Фото на фоні темного блоку контактів (головна й кейси), приглушене прозорістю */
.contact, .case-contact { position: relative; isolation: isolate; }
.contact::before, .case-contact::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url(/images/footer-bg.webp) center / cover no-repeat;
  opacity: var(--footer-photo-opacity);
  pointer-events: none;
}
@media (max-width: 767px) {
  .contact::before, .case-contact::before { background-image: url(/images/footer-bg-800.webp); }
}
.contact-inner { padding-top: var(--space-section); }
.contact-main { display: flex; flex-wrap: wrap; gap: 48px; padding-bottom: 80px; }
.contact-left { flex: 7 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.eyebrow--dark { color: var(--color-dark-muted); }

.contact-title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--fs-contact-title);
  line-height: 0.98;
  letter-spacing: -0.04em;
  white-space: pre-line;
}
.contact .btn { font-size: var(--fs-btn-contact); }
/* Довгий рядок заголовка переноситься рівними частинами, а не «одне слово внизу» */
.contact-title .line-inner { text-wrap: balance; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.contact-email { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.contact-email-text { font-size: var(--fs-email); }

.contact-links {
  flex: 5 1 360px;
  min-width: 0;
  align-self: flex-start;
  list-style: none;
  margin: 0;
  padding: 52px 0 0;
}
.contact-links li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--color-dark-line);
}
.contact-links li:last-child { border-bottom: 1px solid var(--color-dark-line); }
.contact-links a {
  color: var(--color-on-dark);
  text-underline-offset: 0.15em;
  transition: color var(--dur-hover) var(--ease-out), text-underline-offset var(--dur-hover) var(--ease-out);
}
.contact-links a:hover { color: var(--color-dark-muted); }
.list-label { font-family: var(--font-mono); font-size: var(--fs-mono-s); color: var(--color-dark-muted); }

/* «PAVEL ERMAK» у шапці — у два рядки, по слову в рядку, щоб текст стояв щільно біля знака */
.brand .brand-text, .case-brand .brand-text { display: block; width: min-content; line-height: 1.15; }

.footer-brand { display: inline-flex; align-items: center; gap: var(--logo-gap); }
.footer-brand .logo { width: var(--logo-s); height: var(--logo-s); color: var(--color-on-dark); }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 0;
  border-top: 1px solid var(--color-dark-line);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  color: var(--color-dark-muted);
}

/* ==========================================================================
   СТОРІНКА КЕЙСУ
   ========================================================================== */
.case-frame {
  max-width: var(--container);
  margin: 0 auto;
  border-left: 1px solid var(--color-line);
  border-right: 1px solid var(--color-line);
}

.case-header {
  position: sticky; /* шапка лишається вгорі екрана під час скролу */
  top: 0;
  z-index: var(--z-header);
  background: var(--color-bg-glass);
  -webkit-backdrop-filter: blur(var(--blur-header));
  backdrop-filter: blur(var(--blur-header));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--space-header-y) var(--gutter);
  border-bottom: 1px solid var(--color-line);
}
.back-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-mono);
  font-size: var(--fs-back);
  text-decoration: none;
}
.case-brand { display: inline-flex; align-items: center; gap: var(--logo-gap); min-height: var(--tap); font-family: var(--font-mono); font-size: var(--fs-brand); font-weight: 500; text-decoration: none; }
.mail-btn {
  transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 0 16px;
  border-radius: var(--radius);
  background: var(--color-chip);
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-nav);
}

.case-hero { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--color-line); }
.case-hero-main {
  flex: 8 1 640px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: var(--space-case-hero-top) var(--gutter) 64px;
  border-right: 1px solid var(--color-line);
}
.case-title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--fs-case-title);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.case-title--long { font-size: var(--fs-case-title-long); }
/* Назва кейсу і поруч посилання на живий сайт проєкту */
.case-title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 28px; }
.site-link--case { font-size: var(--fs-site-link); }
.site-link--case .site-link-icon { width: var(--icon-lg); height: var(--icon-lg); }
.case-title-line { display: inline-block; } /* щоб кожне слово могло виїжджати окремо */
.case-sub { margin: 0; font-size: var(--fs-case-sub); line-height: 1.3; }

.case-meta {
  flex: 4 1 320px;
  min-width: 0;
  margin: 0;
  padding: var(--space-case-hero-top) var(--gutter) 64px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.case-meta > div { padding: 14px 0; border-top: 1px solid var(--color-line); }
.case-meta > div:last-child { border-bottom: 1px solid var(--color-line); }
.case-meta dd { margin: 4px 0 0; font-size: var(--fs-text-l); }

/* Результат (один показник) */
.case-result {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 32px;
  padding: 20px var(--gutter);
  border-bottom: 1px solid var(--color-line);
}
.result-main { display: flex; flex-direction: column; gap: 10px; }
.result-num { font-family: var(--font-head); font-weight: 500; font-size: var(--fs-num-m); line-height: 1; letter-spacing: -0.03em; }
.result-note { padding-bottom: 6px; font-size: var(--fs-text-s); color: var(--color-muted); }
.result-notes { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; }
.result-notes .result-note { padding-bottom: 0; }
.result-note-2 { font-size: var(--fs-meta); color: var(--color-muted); }

/* Результати (три показники, WinBoss) */
.case-results { border-bottom: 1px solid var(--color-line); }
.results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.result-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px var(--gutter);
  border-right: 1px solid var(--color-line);
}
.result-cell:last-child { border-right: 0; }
.result-cell .result-num { font-size: var(--fs-num-cell); }
.result-cell .result-note { padding-bottom: 0; }

.case-cover { padding: var(--space-case-block); border-bottom: 1px solid var(--color-line); }

.case-row { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--color-line); }
.case-row-h {
  flex: 4 1 320px;
  margin: 0;
  padding: var(--space-case-row-y) var(--gutter);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.04em;
  color: var(--color-muted);
  border-right: 1px solid var(--color-line);
}
.case-task {
  flex: 8 1 560px;
  min-width: 0;
  margin: 0;
  padding: var(--space-case-row-y) var(--gutter);
  font-size: var(--fs-case-text);
  line-height: 1.4;
}

.steps {
  flex: 8 1 560px;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: var(--space-case-row-y) var(--gutter);
}
.steps li { display: flex; gap: 32px; padding: 24px 0; border-top: 1px solid var(--color-line); }
.steps li:first-child { border-top-color: var(--color-ink); }
.steps li:last-child { border-bottom: 1px solid var(--color-line); }
.step-num { padding-top: 6px; font-family: var(--font-mono); font-size: var(--fs-eyebrow); }
.step-text { font-size: var(--fs-step); line-height: 1.45; }

.case-screens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
  padding: var(--space-case-block);
  border-bottom: 1px solid var(--color-line);
}
.case-screens--single { grid-template-columns: 1fr; }
.shot { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--color-ink); }

/* Карусель скріншотів кейсу (десктоп): гортається стрілками, крапками,
   тачпадом або клавішами ← → (коли карусель у фокусі). Логіка — у main.js. */
.carousel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: var(--space-case-block);
  border-bottom: 1px solid var(--color-line);
}
.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  background: var(--color-ink);
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > .shot { flex: 0 0 100%; scroll-snap-align: start; }
.carousel-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.carousel-count { font-family: var(--font-mono); font-size: var(--fs-eyebrow); color: var(--color-muted); }
.carousel-dots { display: flex; align-items: center; gap: 2px; }
.carousel-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: var(--tap);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.carousel-dot span {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--color-dot);
  transition: width var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out);
}
.carousel-dot[aria-current="true"] span { width: 20px; background: var(--color-ink); }
.carousel-arrows { display: flex; gap: 8px; }
.carousel-btn {
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--color-ink);
  border-radius: 50%;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--fs-btn);
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
/* На десктопі обкладинку й скріншоти показує карусель, тож стовпчик картинок ховаємо */
@media (min-width: 768px) {
  .case-cover, .case-screens { display: none; }
}

.next-case {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: var(--space-next-y) var(--gutter);
  text-decoration: none;
}
.next-label { font-family: var(--font-mono); font-size: var(--fs-eyebrow); color: var(--color-muted); }
.next-title {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--fs-next);
  letter-spacing: -0.03em;
  transition: transform var(--dur-hover) var(--ease-out);
}

.case-contact { background: var(--color-dark); color: var(--color-on-dark); }
.case-contact-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-left: 1px solid var(--color-dark-line);
  border-right: 1px solid var(--color-dark-line);
}
.case-contact-title { margin: 0; font-family: var(--font-head); font-weight: 500; font-size: var(--fs-num-m); line-height: 1.05; letter-spacing: -0.03em; }
.case-contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.case-contact-email { font-size: var(--fs-text-l); }
.case-contact .btn { min-height: 56px; padding: 0 24px; font-size: var(--fs-btn-case); }

/* ==========================================================================
   ТЕЛЕФОН (макет 390): лише перебудова розкладки.
   Розміри й відступи вже змінено токенами вгорі файлу.
   ========================================================================== */
@media (max-width: 767px) {
  .d-only { display: none !important; }
  .m-only { display: revert; }
  .label.m-only { display: block; }

  /* Шапка */
  .site-header { flex-wrap: nowrap; gap: 8px; }
  /* На телефоні в шапці лише знак (поруч із бургером), текст «PAVEL ERMAK» прихований, але читається скрінрідером */
  .brand { display: none; } /* на телефоні біля бургера знака немає */
  .case-brand { justify-content: center; min-width: var(--tap); }
  .brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* Бургер: дві лінії, при відкритті складаються в хрестик */
  .burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap);
    height: var(--tap);
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: var(--color-chip);
    color: var(--color-ink);
    cursor: pointer;
    transition: background-color var(--dur-hover) var(--ease-out);
  }
  .burger-line {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform var(--dur-menu) var(--ease-out);
  }
  .is-open .burger-line--1 { transform: translate3d(0, 3px, 0) rotate(45deg); }
  .is-open .burger-line--2 { transform: translate3d(0, -3px, 0) rotate(-45deg); }

  /* Панель меню під шапкою на весь екран, відкривається «шторкою» згори */
  .m-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: 0 var(--gutter);
    background: var(--color-bg);
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--dur-menu) var(--ease-in-out), visibility 0s linear var(--dur-menu);
  }
  .is-open .m-menu {
    visibility: visible;
    clip-path: inset(0);
    transition: clip-path var(--dur-menu) var(--ease-in-out), visibility 0s;
  }
  .m-menu-list { margin: 0; padding: 24px 0 0; list-style: none; }
  .m-menu-list li {
    border-bottom: 1px solid var(--color-line);
    opacity: 0;
    transform: translate3d(0, var(--shift-y), 0);
    transition: opacity var(--dur-menu) var(--ease-out), transform var(--dur-menu) var(--ease-out);
  }
  .is-open .m-menu-list li {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--dur-menu) * 0.3 + var(--i, 0) * var(--stagger));
  }
  .m-menu-list li:nth-child(2) { --i: 1; }
  .m-menu-list li:nth-child(3) { --i: 2; }
  .m-menu-list a {
    display: flex;
    align-items: baseline;
    gap: 16px;
    min-height: var(--tap);
    padding: 16px 0;
    font-family: var(--font-head);
    font-weight: 500;
    font-size: var(--fs-menu);
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-decoration: none;
  }
  .m-menu-num {
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--color-muted);
  }
  /* Під відкритим меню сторінка не скролиться */
  .menu-open { overflow: hidden; }
  .nav, .header-email .copy-btn { display: none; } /* пункти меню — у бургері */
  .header-tools { flex-wrap: nowrap; gap: 6px; margin-left: auto; }
  .lang { gap: 2px; }
  .lang-btn { min-width: var(--tap); min-height: var(--tap); }
  .email-link {
    justify-content: center;
    width: var(--tap);
    height: var(--tap);
    padding: 0;
    border-radius: var(--radius);
    background: var(--color-chip);
    color: var(--color-ink);
  }
  .email-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }

  /* Перший екран */
  .hero { padding-bottom: 32px; }
  .hero .eyebrow { line-height: 1.6; }
  .hero-name { line-height: 0.9; letter-spacing: -0.055em; white-space: normal; }
  .hero-name span { display: block; }
  .hero-name > span { background-image: linear-gradient(var(--color-ink), var(--color-ink)), url(/images/footer-bg-800.webp); }
  .hero-bottom { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 20px; padding: 0; }
  .hero-lede { flex: none; max-width: none; padding-top: 18px; line-height: 1.45; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 20px; }
  .btn, .btn-outline, .btn-outline-light { display: flex; justify-content: space-between; padding: 0 var(--btn-pad); }

  .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 16px 0; }

  /* Кейси */
  .section-head { gap: 10px; padding-bottom: 24px; }
  .h2 { line-height: 1.1; }

  /* Картки кейсів: обкладинка на всю ширину екрана, під нею назва з тегом,
     підзаголовок, цифра й посилання. Роль, задача й дрібні цифри — лише на десктопі. */
  .case-card,
  .case-card--feature,
  .case-card--wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "cover cover" "title tag" "sub sub" "metric metric" "link link";
    align-items: baseline;
    gap: 14px 12px;
    padding: 20px 0 28px;
    border-top: 1px solid var(--color-line);
  }
  .case-card--note { grid-template-areas: "cover cover" "title tag" "sub sub" "metric metric" "note note" "link link"; }
  .case-card .card-note { grid-area: note; font-size: var(--fs-text); }
  .case-card--feature { border-top: 2px solid transparent; }
  .case-card--wide { border-bottom: 1px solid var(--color-line); }
  .case-card-info,
  .case-card--feature .case-card-info,
  .case-card--wide .case-card-info,
  .card-title,
  .case-card--feature .card-title { display: contents; }
  .case-card-cover { grid-area: cover; margin: 0 calc(var(--gutter) * -1); }
  .case-card .h3 { grid-area: title; font-size: var(--fs-h3-card); }
  .case-card .card-eyebrow { grid-area: tag; justify-self: end; }
  .case-card .card-sub { grid-area: sub; font-size: var(--fs-text); color: var(--color-muted); }
  .case-card .card-metric { grid-area: metric; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 12px; } /* підпис по центру цифри */
  .case-card--feature .card-metric { flex-wrap: nowrap; gap: 12px; }
  .case-card .card-metric-label { flex: 0 1 auto; font-size: var(--fs-text); }
  .case-card .num { flex: none; line-height: 1; letter-spacing: -0.04em; }
  .case-card .card-links { grid-area: link; }
  .case-card .open-link, .case-card .site-link { font-size: var(--fs-text); }

  .cards { display: block; padding: 0; border-top: 0; }

  /* Про мене */
  .about { flex-direction: column; flex-wrap: nowrap; gap: 22px; padding-bottom: 56px; }
  .about-head, .about-body { display: contents; }
  .teams-grid { gap: 16px; padding-top: 16px; }
  .team { gap: 4px; }

  /* Контакти */
  .contact-inner { display: flex; flex-direction: column; gap: 24px; padding-bottom: 24px; }
  .contact-main, .contact-left, .contact-actions { display: contents; }
  .contact-title { line-height: 1; }
  .contact-email { justify-content: space-between; gap: 8px; }
  .contact .copy-btn { min-height: var(--tap); padding: 0 12px; border-radius: 8px; }
  .contact-links { align-self: stretch; padding: 0; }
  .contact-links li { flex-direction: column; justify-content: flex-start; gap: 4px; padding: 14px 0; }
  .contact-links a { display: inline-flex; align-items: center; min-height: var(--tap); }
  .site-footer { padding: 24px 0 0; border-top: 0; }

  /* Сторінка кейсу */
  .case-frame { border-left: 0; border-right: 0; }
  .case-header { flex-wrap: nowrap; gap: 8px; }
  .mail-btn { width: var(--tap); height: var(--tap); padding: 0; }
  .mail-btn-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }

  .case-hero { flex-direction: column; flex-wrap: nowrap; border-bottom: 0; }
  .case-hero-main { flex: none; gap: 14px; padding-bottom: 28px; border-right: 0; }
  .case-title { line-height: 1; }
  .case-title-line { display: block; }
  .case-meta { flex: none; padding: 0 var(--gutter) 28px; }
  .case-meta > div { padding: 12px 0; }

  .case-result { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; padding: 0 var(--gutter) 20px; }
  .result-main { display: contents; }
  .result-note, .result-notes { padding-bottom: 0; }

  .case-results { display: flex; flex-direction: column; gap: 10px; padding: 0 var(--gutter) 20px; }
  .results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .result-cell { gap: 0; padding: 0 10px; border-right: 0; border-left: 1px solid var(--color-line); }
  .result-cell:first-child { padding-left: 0; border-left: 0; }
  .result-cell:last-child { padding-right: 0; }
  .result-cell .result-num { line-height: normal; }

  .case-row { flex-direction: column; flex-wrap: nowrap; gap: 12px; padding: var(--space-case-row-y) var(--gutter); }
  .case-row-h, .case-task, .steps { flex: none; padding: 0; border-right: 0; }
  .case-row--steps { border-bottom: 0; }
  .steps li { gap: 16px; padding: 16px 0; }
  .step-num { padding-top: 4px; }

  .case-screens { grid-template-columns: 1fr; gap: 16px; padding-top: 0; padding-bottom: 32px; }

  .next-case { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; }

  .case-contact-inner { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 20px; padding: 40px var(--gutter); border-left: 0; border-right: 0; }
  .case-contact-actions { flex-direction: column-reverse; flex-wrap: nowrap; align-items: stretch; gap: 20px; }
  .case-contact .btn { padding: 0 var(--btn-pad); }
}

/* ==========================================================================
   РУХ: hover-ефекти й анімації появи.
   Тривалості, криві й відстані — у токенах «Рух» на початку файлу.
   ========================================================================== */

/* --- Hover: лише на пристроях із мишкою, щоб на телефоні ефект не «залипав» --- */
@media (hover: hover) {
  .btn:hover::before { transform: none; }
  .btn-outline:hover { color: var(--color-on-dark); }          /* CV: чорна заливка, білий текст */
  .btn-outline-light:hover { color: var(--color-ink); }        /* CV на темному: біла заливка, чорний текст */
  .btn-accent:hover .arrow { transform: translate3d(var(--nudge), 0, 0); }
  .btn-outline:hover .icon, .btn-outline-light:hover .icon { transform: translate3d(0, 2px, 0); }

  .copy-btn:hover, .burger:hover { background: var(--color-chip-hover); }
  .copy-btn--dark:hover { background: var(--color-dark-line-hover); }

  .lang-btn[aria-pressed="false"]:hover { background: var(--color-chip); color: var(--color-ink); }
  .nav-link:hover { background-size: 100% 1px; color: var(--color-ink); }

  .open-link:hover, .site-link:hover, .contact-links a:hover { text-underline-offset: 0.4em; }
  .site-link:hover .site-link-icon { transform: translate3d(2px, -2px, 0); }
  .cover:hover img { transform: scale(var(--cover-zoom)); }

  .mail-btn:hover, .carousel-btn:hover { background: var(--color-ink); color: var(--color-on-dark); }
  .carousel-dot:hover span { background: var(--color-muted); }
  .carousel-dot[aria-current="true"]:hover span { background: var(--color-ink); }
  .next-case:hover .next-title { transform: translate3d(calc(var(--nudge) * 2), 0, 0); }
}
@media (hover: hover) and (max-width: 767px) {
  .email-link:hover { background: var(--color-ink); color: var(--color-on-dark); }
}
/* Клавіатура: та сама реакція, що й на наведення */
.btn:focus-visible::before { transform: none; }
.btn-outline:focus-visible { color: var(--color-on-dark); }
.btn-outline-light:focus-visible { color: var(--color-ink); }

/* --- Перший екран: з’являється одразу після завантаження, без JS --- */
@keyframes enter-left  { from { opacity: 0; transform: translate3d(calc(var(--shift-x) * -1), 0, 0); } }
@keyframes enter-right { from { opacity: 0; transform: translate3d(var(--shift-x), 0, 0); } }
@keyframes enter-up    { from { opacity: 0; transform: translate3d(0, var(--shift-y), 0); } }
@keyframes enter-down  { from { opacity: 0; transform: translate3d(0, calc(var(--shift-y) * -0.5), 0); } }
@keyframes draw-x      { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: no-preference) {
  .site-header { animation: enter-down var(--dur-reveal) var(--ease-out) both; }
  .hero .eyebrow { animation: enter-left var(--dur-hero) var(--ease-out) both; animation-delay: calc(var(--stagger) * 1); }
  .hero-name > span:first-child { animation: enter-left var(--dur-hero) var(--ease-out) both, photo-fill var(--dur-photo-fill) var(--ease-in-out) both; animation-delay: calc(var(--stagger) * 2), var(--delay-photo-fill); }
  .hero-name > span:last-child { animation: enter-right var(--dur-hero) var(--ease-out) both, photo-fill var(--dur-photo-fill) var(--ease-in-out) both; animation-delay: calc(var(--stagger) * 3), calc(var(--delay-photo-fill) + var(--stagger) * 2); }
  .hero-bottom::before { animation: draw-x var(--dur-wipe) var(--ease-in-out) both; animation-delay: calc(var(--stagger) * 4); }
  .hero-lede { animation: enter-left var(--dur-hero) var(--ease-out) both; animation-delay: calc(var(--stagger) * 6); }
  .hero-actions { animation: enter-right var(--dur-hero) var(--ease-out) both; animation-delay: calc(var(--stagger) * 7); }
  .facts > li { animation: enter-up var(--dur-reveal) var(--ease-out) both; }
  .facts > li:nth-child(1) { animation-delay: calc(var(--stagger) * 9); }
  .facts > li:nth-child(2) { animation-delay: calc(var(--stagger) * 10); }
  .facts > li:nth-child(3) { animation-delay: calc(var(--stagger) * 11); }
  .facts > li:nth-child(4) { animation-delay: calc(var(--stagger) * 12); }
  .facts > li:nth-child(5) { animation-delay: calc(var(--stagger) * 13); }

  /* Перший екран кейсу: назва й опис зліва, роль і компанія справа */
  .case-header { animation: enter-down var(--dur-reveal) var(--ease-out) both; }
  .case-hero .eyebrow { animation: enter-left var(--dur-hero) var(--ease-out) both; animation-delay: calc(var(--stagger) * 1); }
  .case-title:not(.case-title--long),
  .case-title-line:first-child { animation: enter-left var(--dur-hero) var(--ease-out) both; animation-delay: calc(var(--stagger) * 2); }
  .case-title-line:last-child { animation: enter-right var(--dur-hero) var(--ease-out) both; animation-delay: calc(var(--stagger) * 3); }
  .site-link--case { animation: enter-right var(--dur-hero) var(--ease-out) both; animation-delay: calc(var(--stagger) * 4); }
  .case-sub { animation: enter-left var(--dur-hero) var(--ease-out) both; animation-delay: calc(var(--stagger) * 4); }
  .case-meta > div { animation: enter-right var(--dur-hero) var(--ease-out) both; }
  .case-meta > div:nth-child(1) { animation-delay: calc(var(--stagger) * 3); }
  .case-meta > div:nth-child(2) { animation-delay: calc(var(--stagger) * 4); }
  .case-meta > div:nth-child(3) { animation-delay: calc(var(--stagger) * 5); }
}

/* --- Поява блоків під час скролу. Клас .motion ставить скрипт у <head>;
       main.js додає .is-in, коли блок з’являється на екрані. --- */
.motion [data-reveal] {
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.motion [data-reveal="up"]:not(.is-in),
.motion [data-reveal="left"]:not(.is-in),
.motion [data-reveal="right"]:not(.is-in),
.motion [data-reveal="fade"]:not(.is-in) { opacity: 0; }
.motion [data-reveal="up"]:not(.is-in)    { transform: translate3d(0, var(--shift-y), 0); }
.motion [data-reveal="left"]:not(.is-in)  { transform: translate3d(calc(var(--shift-x) * -1), 0, 0); }
.motion [data-reveal="right"]:not(.is-in) { transform: translate3d(var(--shift-x), 0, 0); }

/* Обкладинка відкривається «шторкою» зліва направо і трохи віддаляється */
.motion [data-reveal="wipe"] {
  transition:
    clip-path var(--dur-image) var(--ease-out),
    opacity calc(var(--dur-image) * 0.75) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.motion [data-reveal="wipe"]:not(.is-in) { clip-path: inset(0 100% 0 0); opacity: 0.3; }
.motion [data-reveal="wipe"]:not(.is-in) img { scale: var(--image-zoom-in); }
/* Картинки в кейсах: рамка, щоб збільшена картинка не вилазила під час «шторки» */
.shot-wrap { overflow: hidden; }
.shot-wrap img { transition: scale calc(var(--dur-image) * 1.5) var(--ease-out) calc(var(--i, 0) * var(--stagger)); }

/* Лінія-роздільник малюється зліва направо */
.motion [data-reveal="rule"]::before {
  transition: transform var(--dur-wipe) var(--ease-in-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.motion [data-reveal="rule"]:not(.is-in)::before { transform: scaleX(0); }

/* Заголовки: кожен рядок виїжджає з-під маски.
   main.js ділить заголовок на рядки .line > .line-inner */
.line {
  display: block;
  overflow: hidden;
  padding: 0.1em 0 0.14em;
  margin: -0.1em 0 -0.14em;
}
.line-inner { display: block; }
.motion [data-reveal="lines"] .line-inner,
.motion [data-reveal="lines-lr"] .line-inner {
  transition:
    opacity var(--dur-hero) var(--ease-out),
    transform var(--dur-hero) var(--ease-out);
  transition-delay: calc((var(--i, 0) + var(--line, 0) * 1.5) * var(--stagger));
}
.motion [data-reveal="lines"]:not(.is-in) .line-inner { transform: translate3d(0, 110%, 0); }
/* «Спершу дані, потім інтерфейс»: перший рядок зліва, другий справа */
.motion [data-reveal="lines-lr"]:not(.is-in) .line-inner { opacity: 0; }
.motion [data-reveal="lines-lr"]:not(.is-in) .line:nth-child(odd) .line-inner  { transform: translate3d(calc(var(--shift-x) * -2), 0, 0); }
.motion [data-reveal="lines-lr"]:not(.is-in) .line:nth-child(even) .line-inner { transform: translate3d(calc(var(--shift-x) * 2), 0, 0); }

/* Текст «Про мене» проявляється слово за словом, як дані, що складаються в картину */
.word { display: inline-block; }
.motion [data-reveal="words"] .word {
  transition:
    opacity var(--dur-word) var(--ease-out),
    transform var(--dur-word) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger) + var(--w, 0) * var(--stagger-word));
}
.motion [data-reveal="words"]:not(.is-in) .word { opacity: 0.1; transform: translate3d(0, 0.45em, 0); }

/* Хто вимкнув анімації в системі — бачить усе одразу */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; scroll-behavior: auto !important; }
}