/* ───────────────────────────────────────────────────────────────
   Та сама система, що в кейсі й «Умовах роботи»: алюмінієвий
   папір, чорнило, акцент кольору анодованої бронзи.
   ─────────────────────────────────────────────────────────────── */
:root {
  --paper:        #E7E8E3;
  --panel:        #F4F5F1;
  --ink:          #15191A;
  --ink-2:        #545B58;
  --rule:         #C3C6BE;
  --rule-strong:  #9AA098;
  --accent:       #A0501F;
  --accent-wash:  rgba(160, 80, 31, .09);

  /* Сцена вітрини. На світлій темі темна — світлі знімки на ній
     читаються як експонати. На темній навпаки світліша за сторінку:
     та сама смуга кольору тла просто зникла б. */
  --stage:        #1B1F21;
  --stage-ink:    #E9EBE6;
  --stage-dim:    #9AA19D;
  --stage-rule:   #3A4144;
  --stage-bar:    #23282B;
  --stage-inset:  #171B1D;

  --measure: 66ch;
  --sans: 'Fira Sans', system-ui, 'Segoe UI', sans-serif;
  --cond: 'Fira Sans Condensed', 'Fira Sans', system-ui, sans-serif;
  --mono: 'Fira Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #131617;
    --panel:       #1B1F21;
    --ink:         #E9EBE6;
    --ink-2:       #9AA19D;
    --rule:        #2C3134;
    --rule-strong: #454C4F;
    --accent:      #DE8B4E;
    --accent-wash: rgba(222, 139, 78, .10);

    --stage:       #23292C;
    --stage-ink:   #EDEFEA;
    --stage-dim:   #A6ADA9;
    --stage-rule:  #454C4F;
    --stage-bar:   #2C3336;
    --stage-inset: #1A1E20;
  }
}

:root[data-theme="dark"] {
  --paper:       #131617;
  --panel:       #1B1F21;
  --ink:         #E9EBE6;
  --ink-2:       #9AA19D;
  --rule:        #2C3134;
  --rule-strong: #454C4F;
  --accent:      #DE8B4E;
  --accent-wash: rgba(222, 139, 78, .10);

  --stage:       #23292C;
  --stage-ink:   #EDEFEA;
  --stage-dim:   #A6ADA9;
  --stage-rule:  #454C4F;
  --stage-bar:   #2C3336;
  --stage-inset: #1A1E20;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.62 var(--sans);
}

/* Перемикання теми — плавне, але тільки в момент кліку: постійний
   transition на кольорах сповільнював би всю сторінку */
html.theming, html.theming * { transition: background-color .3s ease, color .3s ease, border-color .3s ease !important; }

::selection { background: var(--accent); color: var(--paper); }

a { color: var(--ink); text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }

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

.sheet {
  border: 1px solid var(--rule-strong);
  margin: 14px;
  padding: 0 clamp(16px, 4.2vw, 54px) clamp(22px, 3vw, 34px);
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px 28px;
  flex-wrap: wrap;
  padding: 26px 0 0;
}
.wordmark {
  font: 700 20px/1.2 var(--cond);
  letter-spacing: .01em;
  text-decoration: none;
  display: inline-block;
  transform-origin: left center;
  transition: transform .25s cubic-bezier(.2, .7, .3, 1);
}
.wordmark:hover { transform: scale(1.06); }
.wordmark span { color: var(--accent); }

.top nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font: 400 14px/1.2 var(--mono); }

/* Підкреслення виїжджає, а не блимає: колір, який змінюється миттєво,
   і дає те відчуття різкості */
.top nav a {
  position: relative;
  text-decoration: none;
  color: var(--ink-2);
  padding-bottom: 3px;
  transition: color .22s ease;
}
.top nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}
.top nav a:hover { color: var(--ink); }
.top nav a:hover::after { transform: scaleX(1); transform-origin: left center; }

.theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: color .22s ease, border-color .22s ease, transform .22s ease;
}
.theme:hover { color: var(--accent); border-color: var(--accent); transform: rotate(-18deg) scale(1.12); }
.theme svg { width: 15px; height: 15px; display: block; }

/* ───────────────────────────────────────────────────────────────
   Теза. Праворуч — не схема, а живий сайт: перше питання
   відвідувача це «а мій виглядатиме як?», і відповідати на нього
   кресленням не можна.
   ─────────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: center;
  padding: clamp(38px, 5vw, 66px) 0 clamp(34px, 5vw, 56px);
  border-bottom: 1px solid var(--rule);
}
.hero-text { display: flex; flex-direction: column; gap: 22px; }

/* ───────────────────────────────────────────────────────────────
   Ноутбук і телефон намальовані на CSS, а не картинками: так вони
   лишаються різкими на будь-якій щільності екрана й не додають
   жодного кілобайта.
   ─────────────────────────────────────────────────────────────── */
/* Телефон звисає нижче основи ноутбука — стоїть перед ним, а не лежить
   на екрані. Запас унизу саме під цей звис, щоб підпис не перекривався. */
.devices { position: relative; padding-bottom: 36px; }

/* Режим для готового макета картинкою — коли зображення вже містить
   і ноутбук, і телефон. Рамки з CSS тоді не потрібні. */
.devices.photo { padding-bottom: 0; }
.devices.photo img { display: block; width: 100%; height: auto; }

.laptop { filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .18)); }
.laptop-lid {
  background: linear-gradient(#3A4045, #23282B);
  padding: 10px 10px 11px;
  border-radius: 10px 10px 4px 4px;
}
.laptop-lid img { display: block; width: 100%; height: auto; border-radius: 3px; }
.laptop-base {
  position: relative;
  height: 11px;
  /* основа ширша за кришку, як у справжнього ноутбука, але помірно:
     на 5% це вже читалось як виступ, а не як корпус */
  margin: 0 -3%;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(#2E3438, #1B1F21);
}
/* виїмка для пальця — та сама деталь, за якою ноутбук упізнається */
.laptop-base::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 13%;
  height: 5px;
  border-radius: 0 0 5px 5px;
  background: #14181A;
}

/* Пропорції взяті з еталонних наборів (Flowbite): рамка близько 4.5%
   від ширини корпусу, радіус — близько 13%. Тонка рамка й прямі кути
   читаються як «прямокутник на знімку», а не як телефон.
   Кнопки збоку теж не декор: саме за ними око впізнає пристрій. */
.shot-note {
  margin-top: 16px;
  font: 400 12.5px/1.45 var(--mono);
  color: var(--ink-2);
}

h1, h2, h3 { margin: 0; text-wrap: balance; font-family: var(--cond); }

h1 {
  font-size: clamp(36px, 5.8vw, 58px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.018em;
}
h1 em { font-style: normal; color: var(--accent); }

.eyebrow {
  font: 500 11px/1.5 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

p { margin: 0; max-width: var(--measure); }
.lede { font-size: 19px; line-height: 1.55; }
.dim { color: var(--ink-2); }
.small { font-size: 15px; line-height: 1.5; }

.cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 12px 22px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--paper);
  font: 600 15px/1.2 var(--cond);
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border-radius: 5px;
  transition: filter .18s ease, transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease;
}
.btn:hover { filter: brightness(1.1); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.btn:active { transform: none; box-shadow: none; }
.btn[disabled] { opacity: .55; cursor: default; }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-quiet:hover { border-color: var(--accent); filter: none; }

/* ───────────────────────────────────────────────────────────────
   Вітрина. Єдина темна смуга на сторінці — щоб знімки читались
   як експонати, а не як ілюстрації до тексту.
   ─────────────────────────────────────────────────────────────── */
/* Раніше смуга виїжджала на поля аркуша й зупинялась за 15 пікселів
   до краю вікна — верхня грань читалась як приступка. Тепер це чесна
   панель усередині аркуша: із власними полями й заокругленням. */
.showcase {
  margin: clamp(26px, 3.4vw, 44px) 0;
  padding: clamp(28px, 3.6vw, 44px) clamp(18px, 2.6vw, 34px);
  background: var(--stage);
  color: var(--stage-ink);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}
.showcase h2 { color: var(--stage-ink); }
.showcase .rail, .showcase .dim { color: var(--stage-dim); }

.shelf {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.shelf figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.shelf figcaption { font: 400 13px/1.5 var(--mono); color: var(--stage-dim); }
.shelf figcaption b { color: var(--stage-ink); font-family: var(--cond); font-size: 15.5px; font-weight: 600; display: block; margin-bottom: 3px; }

/* Вікно браузера навколо знімка: це справді сторінка сайту,
   тому рамка не декорація, а підпис до того, що показано */
.win {
  border: 1px solid var(--stage-rule);
  border-radius: 7px;
  overflow: hidden;
  background: var(--stage-inset);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease;
}
.win-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  background: var(--stage-bar);
  border-bottom: 1px solid var(--stage-rule);
}
.win-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--stage-rule); flex: none; }
.win-bar span {
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 20px;
  background: var(--stage-inset);
  font: 400 11px/1.6 var(--mono);
  color: var(--stage-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Вікно фіксованої висоти, знімок усередині може бути вищим. Ведеш
   мишею вгору-вниз — сторінка прокручується під курсором. Це і дає
   можливість роздивитись усе, і робить наведення осмисленим:
   раніше картка просто підстрибувала, хоча клікати нема куди. */
.win-view {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  cursor: zoom-in;
}
.win-view img {
  width: 100%;
  /* без height:auto браузер бере висоту з HTML-атрибута height
     і розтягує знімок — саме на цьому щойно спіймались */
  height: auto;
  display: block;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1);
}
/* наведення тільки натякає, що можна відкрити; саме розглядання —
   у вікні на весь екран, де воно працює і пальцем, і мишею */
.win-view:hover img { transform: scale(1.02); }
/* ───────────────────────────────────────────────────────────────
   Знімок на весь екран. Прокрутка тут звичайна — колесом, пальцем
   або клавішами: нічого вигадувати не треба, усі це вміють.
   ─────────────────────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(9, 11, 12, .9);
  overflow: auto;
  padding: clamp(12px, 3vw, 40px);
  opacity: 0;
  transition: opacity .22s ease;
  -webkit-overflow-scrolling: touch;
}
.lightbox.open { opacity: 1; }
.lightbox img {
  display: block;
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}
.lightbox-close {
  position: fixed;
  top: 14px;
  right: 16px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(233, 235, 230, .35);
  border-radius: 50%;
  background: rgba(9, 11, 12, .7);
  color: #E9EBE6;
  font: 400 20px/1 var(--sans);
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
}
.lightbox-close:hover { border-color: #E9EBE6; transform: scale(1.08); }
.lightbox-tip {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(9, 11, 12, .78);
  color: #9AA19D;
  font: 400 11.5px/1.6 var(--mono);
  pointer-events: none;
}


/* Підказка, що знімок можна прокрутити. Показуємо тільки там,
   де справді є що прокручувати. */
.win-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(12, 15, 16, .74);
  color: #E9EBE6;
  font: 400 11px/1.6 var(--mono);
  letter-spacing: .04em;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.win-view:hover .win-hint, .win-view:focus-visible .win-hint { opacity: 1; }

/* ───────────────────────────────────────────────────────────────
   Секції з колонтитулом ліворуч
   ─────────────────────────────────────────────────────────────── */
.sec {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 0 34px;
  padding: clamp(34px, 5vw, 60px) 0;
  border-bottom: 1px solid var(--rule);
}
.sec:last-of-type { border-bottom: 0; }

/* Біжучий колонтитул розділу. Липким він стає лише всередині .sec —
   у вітрині це просто підпис над заголовком. */
.rail {
  margin: 0 0 6px;
  font: 500 11px/1.5 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.sec > .rail { margin: 0; position: sticky; top: 18px; align-self: start; }
.sec > .body { min-width: 0; display: flex; flex-direction: column; gap: 20px; }

h2 { font-size: clamp(25px, 3.1vw, 33px); font-weight: 700; line-height: 1.1; }
h3 { font-size: 18px; font-weight: 600; line-height: 1.25; }

/* ───────────────────────────────────────────────────────────────
   Кейс — головний доказ, тому єдиний піднятий блок на сторінці
   ─────────────────────────────────────────────────────────────── */
.case {
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: 5px;
  padding: clamp(18px, 2.6vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.case-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px 18px; flex-wrap: wrap; }
.case-head .tag {
  font: 500 11px/1.5 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.case-list { display: flex; flex-direction: column; gap: 8px; }
.case ul, .case-list ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; max-width: var(--measure); }
.case li::marker { color: var(--rule-strong); }

.demo {
  border-top: 1px solid var(--rule);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.demo dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 3px 14px;
  font: 400 14.5px/1.5 var(--mono);
}
.demo dt { color: var(--ink-2); }
.demo dd { margin: 0; }

/* ───────────────────────────────────────────────────────────────
   Перелік «мітка — значення» (склад робіт, ціни)
   ─────────────────────────────────────────────────────────────── */
.terms { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 5px; overflow: hidden; }
.terms > div {
  background: var(--panel);
  padding: 13px 16px;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 4px 20px;
  align-items: baseline;
}
.terms .k { font: 500 11px/1.5 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--ink-2); }
.terms .v { font-size: 16px; line-height: 1.45; }
.terms .v b { font-family: var(--cond); font-size: 18px; letter-spacing: .01em; }

/* ───────────────────────────────────────────────────────────────
   Етапи — послідовність, тому нумеровані. Позначки оплати
   стоять там, де вони справді настають.
   ─────────────────────────────────────────────────────────────── */
.stages { list-style: none; margin: 0; padding: 0; }
.stages li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) max-content;
  gap: 4px 18px;
  padding: 15px 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.stages li:last-child { border-bottom: 1px solid var(--rule); }
.stages .n { font: 500 13px/1.5 var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; }
.stages b { display: block; font: 600 17px/1.35 var(--cond); }
.stages p { margin-top: 3px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.stages .pay {
  font: 500 11px/1.6 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 5px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* Кадр із телефона на всю ширину полиці: знімок ліворуч у своїй
   природній вузькій пропорції, пояснення праворуч. Ніякої
   намальованої залізяки — сам знімок і є доказом. */
.shelf .wide { grid-column: 1 / -1; }
.shelf .wide .row {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
}
.shelf .wide .row img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--stage-rule);
  border-radius: 14px;
}
.shelf .wide .row p { color: var(--stage-dim); font-size: 15.5px; line-height: 1.55; }
.shelf .wide .row b { color: var(--stage-ink); font-family: var(--cond); font-size: 17px; display: block; margin-bottom: 6px; }

@media (max-width: 700px) {
  .shelf .wide .row { grid-template-columns: minmax(0, 1fr); }
  .shelf .wide .row img { max-width: 230px; }
}

/* ───────────────────────────────────────────────────────────────
   Контраст «як зараз / як буде». Пари стоять поруч у сітці,
   тому рядок читається впоперек, а не згори вниз.
   ─────────────────────────────────────────────────────────────── */
.versus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 5px;
  overflow: hidden;
}
.versus > div { background: var(--panel); padding: 13px 16px; display: flex; flex-direction: column; gap: 6px; }
.versus .head {
  font: 500 11px/1.5 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.versus .then .head { color: var(--accent); }
.versus p { font-size: 15.5px; line-height: 1.45; }

/* Відсів. Список того, за що не беруся, коштує рядок тексту
   і економлює обом сторонам розмову. */
.nope { display: flex; flex-direction: column; gap: 12px; }
.nope > div { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; }
.nope .x { color: var(--ink-2); font: 400 17px/1.4 var(--mono); }
.nope p { font-size: 16px; line-height: 1.5; }

/* ───────────────────────────────────────────────────────────────
   Заклик посеред сторінки. Рішення дозріває в різних людей
   у різних місцях: хтось готовий після знімків, хтось після цін.
   Одна форма в самому низу ловить тільки тих, хто дочитав.
   ─────────────────────────────────────────────────────────────── */
.pitch {
  /* та сама історія, що була у вітрини: смуга виїжджала на поля аркуша
     й не доходила до краю вікна — верхня грань читалась як приступка */
  margin: clamp(22px, 3vw, 36px) 0;
  padding: clamp(22px, 2.8vw, 32px) clamp(18px, 2.6vw, 34px);
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px 30px;
  flex-wrap: wrap;
}
.pitch p {
  font: 600 clamp(19px, 2.2vw, 25px)/1.25 var(--cond);
  max-width: 44ch;
}

/* ───────────────────────────────────────────────────────────────
   «Не страшно» — блок, який відповідає на головне заперечення
   ─────────────────────────────────────────────────────────────── */
.safe { display: flex; flex-direction: column; gap: 18px; }
.safe > div { display: flex; flex-direction: column; gap: 5px; padding-left: 15px; border-left: 2px solid var(--accent); }
.safe h3 { font-family: var(--cond); }
.safe p { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }

/* ───────────────────────────────────────────────────────────────
   Хто я
   ─────────────────────────────────────────────────────────────── */
.me { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 26px; align-items: start; }
.photo {
  aspect-ratio: 4 / 5;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  font: 400 12px/1.5 var(--mono);
  color: var(--ink-2);
}
.photo.has-img { padding: 0; overflow: hidden; aspect-ratio: 3 / 4; }
.photo.has-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.me.no-photo { grid-template-columns: minmax(0, 1fr); }
.me-text { display: flex; flex-direction: column; gap: 12px; }

/* ───────────────────────────────────────────────────────────────
   Форма
   ─────────────────────────────────────────────────────────────── */
form { display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.field input, .field select, .field textarea {
  font: 400 16px/1.45 var(--sans);
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: 5px;
  padding: 11px 13px;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 108px; }

/* ───────────────────────────────────────────────────────────────
   Власний список. Нативний <select> анімувати не можна — його
   випадайку малює операційна система, і CSS туди не дістає.
   Значення при цьому лежить у прихованому полі, тому форма
   збирається так само, як із звичайним select.
   ─────────────────────────────────────────────────────────────── */
.picker { position: relative; }
.picker-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: 400 16px/1.45 var(--sans);
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: 5px;
  padding: 11px 13px;
  cursor: pointer;
  text-align: left;
  transition: border-color .2s ease;
}
.picker-btn:hover { border-color: var(--accent); }
.picker.open .picker-btn { border-color: var(--accent); }
.picker-arrow {
  width: 11px;
  height: 11px;
  flex: none;
  color: var(--ink-2);
  transition: transform .26s cubic-bezier(.2, .7, .3, 1);
}
.picker.open .picker-arrow { transform: rotate(180deg); }

.picker-list {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: 5px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(.99);
  transform-origin: top center;
  transition: opacity .2s ease, transform .22s cubic-bezier(.2, .7, .3, 1), visibility 0s .22s;
}
.picker.open .picker-list {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .2s ease, transform .22s cubic-bezier(.2, .7, .3, 1), visibility 0s;
}
.picker-list li {
  padding: 9px 11px;
  border-radius: 4px;
  font-size: 15.5px;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.picker-list li:hover, .picker-list li.cursor { background: var(--accent-wash); }
.picker-list li[aria-selected="true"] { color: var(--accent); font-weight: 500; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field .err { font-size: 13.5px; line-height: 1.4; color: var(--accent); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice {
  border: 1px solid var(--accent);
  background: var(--accent-wash);
  border-radius: 5px;
  padding: 14px 16px;
  font-size: 15.5px;
  line-height: 1.5;
  max-width: 560px;
}
.notice p + p { margin-top: 7px; }

/* ───────────────────────────────────────────────────────────────
   Штамп
   ─────────────────────────────────────────────────────────────── */
.stamp {
  margin-top: clamp(28px, 4vw, 42px);
  border: 1px solid var(--rule-strong);
  border-radius: 5px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  overflow: hidden;
}
.stamp > div { background: var(--paper); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.stamp .k { font: 500 10.5px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); }
.stamp .v { font: 500 14.5px/1.35 var(--sans); }
.stamp .v a { text-decoration-color: var(--accent); }

@media (max-width: 880px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .shelf { grid-template-columns: minmax(0, 1fr); }
  .sec { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sec > .rail { position: static; }
  .terms > div { grid-template-columns: minmax(0, 1fr); }
  .me { grid-template-columns: 130px minmax(0, 1fr); gap: 18px; }
  .stamp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .sheet { margin: 8px; }
  .stages li { grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; }
  .stages .pay { grid-column: 2; justify-self: start; margin-top: 6px; }
  .me { grid-template-columns: minmax(0, 1fr); }
  .photo { max-width: 190px; }
  .stamp { grid-template-columns: minmax(0, 1fr); }
}

/* ───────────────────────────────────────────────────────────────
   Рух.

   Клас .anim ставить скрипт у <head> — до першої відмальовки
   і тільки якщо людина не просила прибрати анімації. Без нього
   сторінка просто статична й повністю видима: усе, що нижче,
   вмикається згори, а не навпаки.
   ─────────────────────────────────────────────────────────────── */
@keyframes rise {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: none; }
}

/* Шапка зʼявляється сходинками при завантаженні, а не за прокруткою:
   перший екран має бути на місці одразу */
.anim .hero-text > *,
.anim .shot-pair { animation: rise .62s cubic-bezier(.2, .7, .3, 1) backwards; }
.anim .hero-text > *:nth-child(1) { animation-delay: .04s; }
.anim .hero-text > *:nth-child(2) { animation-delay: .11s; }
.anim .hero-text > *:nth-child(3) { animation-delay: .18s; }
.anim .hero-text > *:nth-child(4) { animation-delay: .25s; }
.anim .shot-pair { animation-delay: .22s; animation-duration: .8s; }

/* Нижні блоки — за появою в полі зору, і в обидва боки: назад угору
   вони теж проявляються заново. Запобіжник у скрипті вмикає їх
   примусово, якщо спостерігач не спрацював. */
.anim .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
}
.anim .reveal.in { opacity: 1; transform: none; }
.anim .shelf .reveal:nth-child(2).in { transition-delay: .09s; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
  .anim .reveal { opacity: 1; transform: none; }
}

/* ───────────────────────────────────────────────────────────────
   Далі — те, що потрібно лише сторінці кейсу: креслення перерізу,
   блоки «рішень» і верхня службова смуга аркуша.
   ─────────────────────────────────────────────────────────────── */
code { font: 400 .92em/1.4 var(--mono); }
.sheet-edge { display: flex; justify-content: space-between; align-items: baseline; gap: 10px 20px; flex-wrap: wrap; padding: 12px 0 14px; border-bottom: 1px solid var(--rule); font: 500 11px/1.5 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); }
.sheet-edge .mark { color: var(--ink); }
.sheet-edge .stage { color: var(--accent); }
.rail .num { color: var(--rule-strong); display: block; }
.draw { width: 100%; height: auto; display: block; }
.draw .outline { fill: none; stroke: var(--accent); stroke-width: 2; }
.draw .hatch-line { stroke: var(--rule-strong); stroke-width: .8; }
.draw .dim-line { stroke: var(--ink-2); stroke-width: .9; fill: none; }
.draw .ext-line { stroke: var(--rule-strong); stroke-width: .7; }
.draw .node { fill: var(--ink-2); }
.draw text { fill: var(--ink-2); font: 400 12px var(--mono); }
.draw .caption { fill: var(--rule-strong); font-size: 10.5px; letter-spacing: .1em; }
figure { margin: 0; }
/* Підпис по центру потрібен лише кресленню в шапці кейсу.
   Глобальним його робити не можна: у вітрині підписи йдуть
   під знімками ліворуч, і центрування ламало ряд. */
.hero figcaption {
  margin-top: 10px;
  font: 400 12.5px/1.4 var(--mono);
  color: var(--ink-2);
  text-align: center;
}
.moves { display: flex; flex-direction: column; gap: 26px; }
.move { display: flex; flex-direction: column; gap: 7px; }
.move h3 { padding-left: 14px; border-left: 2px solid var(--accent); }
.move .why { padding-left: 16px; font-size: 15.5px; line-height: 1.5; font-style: italic; color: var(--ink-2); }
.move .what { padding-left: 16px; }
.colophon { padding: 18px 0 6px; font: 400 13px/1.6 var(--mono); color: var(--ink-2); max-width: var(--measure); }
/* Це правило приїхало з мобільного медіазапиту кейсу й помилково
   стало глобальним — ноутбук у шапці стискався до 280 пікселів
   на будь-якому екрані. Обмеження потрібне лише на вузьких. */
@media (max-width: 880px) {
  .hero figure { max-width: 280px; }
}

/* ───────────────────────────────────────────────────────────────
   Кнопка «нагору». Сторінки довгі — вісім тисяч пікселів, — і
   докручувати назад колесом довго. Зʼявляється не одразу, а коли
   прокрутили більше екрана з половиною: інакше вона просто заважає
   читати перший екран. Кнопку створює скрипт, бо без нього вона
   однаково не працювала б.
   ─────────────────────────────────────────────────────────────── */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink-2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s .25s,
              color .2s ease, border-color .2s ease;
}
.to-top.show {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .25s ease, transform .25s ease, visibility 0s,
              color .2s ease, border-color .2s ease;
}
.to-top:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.to-top svg { width: 15px; height: 15px; display: block; }

@media (max-width: 560px) {
  .to-top { right: 12px; bottom: 12px; width: 38px; height: 38px; }
}

/* ───────────────────────────────────────────────────────────────
   Дві «двері» на сторінці пісочниці: сайт і панель. Саме дві
   рівноцінні картки, а не список посилань — людина має одразу
   бачити, що це два різні місця, а не два варіанти одного.
   ─────────────────────────────────────────────────────────────── */
.doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.door {
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  padding: clamp(18px, 2.4vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.door-tag {
  font: 500 11px/1.5 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.door h3 { font-size: 21px; }
.door p { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.door .btn { margin-top: auto; }

/* Логін і пароль. Моноширинний навмисно: так видно, де пробіл,
   а де нуль замість «о». */
.cred {
  margin: 2px 0 4px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  font: 400 14.5px/1.6 var(--mono);
}
.cred dt { color: var(--ink-2); }
.cred dd { margin: 0; }

@media (max-width: 700px) {
  .doors { grid-template-columns: minmax(0, 1fr); }
}