/* ============================================================
   DESIGN SYSTEM — Денис Букін
   Джерело правди: ../../design-system.md
   Референси: rauno.me + 37signals.com
   Значення зафіксовані Денисом 09.08.2026 за результатами проби.
   ============================================================ */

/* --- Шрифти. Локальні, нічого не вантажиться зі сторонніх серверів --- */
@font-face{font-family:'Fixel Display';src:url('../fonts/FixelDisplay-Black.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Fixel Display';src:url('../fonts/FixelDisplay-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'e-Ukraine';src:url('../fonts/e-Ukraine-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'e-Ukraine';src:url('../fonts/e-Ukraine-Medium.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --font-display:'Fixel Display';
  --font-text:'e-Ukraine';

  --h1-vw:5vw;
  --h1-min:40px;
  --h1-max:108px;
  --h1-track:-0.03em;
  --h1-lead:0.9;
  --step:96px;
  --text-size:16px;

  --paper:#ECECEA;
  --paper-2:#E2E2DE;
  --ink:#141414;
  --muted:#5C5C58;
  --line:#D3D3CF;

  --c-sajty:#1E3FD0;
  --c-analityka:#0A6A50;
  --c-reklama:#C93A1C;
  --c-seo:#9A6A00;
  --c-lidgen:#0F5B6E;
  --c-monitoring:#8C1D40;

  /* Колір поточного напрямку. Перевизначається на сторінці. */
  --c:var(--ink);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font-text),system-ui,sans-serif;
  font-size:var(--text-size);line-height:1.62;
}

/* --- Каркас --- */
.field{padding:0 clamp(20px,5vw,72px)}
.band{padding-block:var(--step)}
.rule{border-top:1px solid var(--line)}

/* Розділення блоків: сусідні смуги стоять на різних відтінках паперу.
   Жодних рамок, тіней і карток — просто інший аркуш під наступним блоком.
   Рахуються тільки прямі діти body-типу div: header і footer не втручаються. */
body>div:nth-of-type(even){background:var(--paper-2)}

/* Широкі таблиці не ламають сторінку: горизонтальна прокрутка всередині себе */
.scroll-x{overflow-x:auto;margin-top:26px}
.scroll-x table{margin-top:0}
.scroll-x th:first-child,.scroll-x td:first-child{padding-left:0}
.scroll-x th:last-child,.scroll-x td:last-child{padding-right:0}

/* --- Типографіка --- */
h1{
  font-family:var(--font-display),system-ui,sans-serif;font-weight:900;
  font-size:clamp(var(--h1-min),var(--h1-vw),var(--h1-max));
  line-height:var(--h1-lead);letter-spacing:var(--h1-track);text-wrap:balance;
}
h2{
  font-family:var(--font-display),system-ui,sans-serif;font-weight:700;
  font-size:clamp(28px,3.2vw,40px);line-height:1.05;letter-spacing:-0.02em;
}
h3{
  font-family:var(--font-display),system-ui,sans-serif;font-weight:700;
  font-size:19px;line-height:1.2;letter-spacing:-0.01em;
}
.lead{font-size:clamp(18px,2.1vw,22px);line-height:1.4;font-weight:500;max-width:38ch}
p{max-width:62ch;color:var(--muted)}
p+p{margin-top:14px}
p strong{color:var(--ink);font-weight:500}
.label{font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* --- Перший екран: пласке кольорове поле, тільки заголовок.
   Висоти не задаємо взагалі — смуга рівно по вмісту. Мітка стоїть одразу над
   заголовком, а не притиснута до верху екрана: розпірка між ними давала
   півекрана порожнечі й нічого не додавала. --- */
.hero{
  background:var(--c);color:#fff;
  padding-top:clamp(32px,4vw,54px);
  padding-bottom:clamp(46px,5.4vw,78px);
}
.hero.paper{background:var(--paper);color:var(--ink)}
.hero .label{margin-bottom:clamp(18px,2.2vw,28px);color:rgba(255,255,255,.72)}
.hero.paper .label{color:var(--muted)}
.hero .lead{margin-top:22px;color:rgba(255,255,255,.9)}
.hero.paper .lead{color:var(--ink)}

/* Перша смуга після заголовка притиснута ближче: повний крок тут завеликий */
.hero+div.band{padding-top:clamp(46px,5.4vw,76px)}

/* --- Хлібні крихти --- */
.crumbs{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.crumbs a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.crumbs a:hover{border-bottom-width:2px}

/* --- Цифри-докази --- */
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-top:1px solid var(--line)}
.num{padding:26px 24px 26px 0;border-bottom:1px solid var(--line)}
.num b{
  display:block;font-family:var(--font-display),sans-serif;font-weight:900;
  font-size:clamp(36px,4.4vw,60px);line-height:1;letter-spacing:-0.02em;
}
.num span{display:block;margin-top:10px;font-size:14px;color:var(--muted);line-height:1.35;max-width:26ch}

/* --- Дві колонки: текст ліворуч, службове праворуч --- */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:clamp(28px,6vw,88px);align-items:start}

/* --- Пронумерований конвеєр. Номер тут нумерує крок, а не прикрашає --- */
.flow{counter-reset:s;border-top:1px solid var(--line);margin-top:28px}
.flow li{
  counter-increment:s;list-style:none;display:grid;
  grid-template-columns:44px minmax(0,15ch) minmax(0,1fr);gap:24px;
  padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.flow li::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--font-display),sans-serif;font-weight:700;
  font-size:15px;color:var(--c);
}
.flow b{font-weight:500;color:var(--ink)}
.flow span{font-size:15px;color:var(--muted)}

/* --- Рядки-переходи. Ціна праворуч. Кнопок на сайті немає --- */
.rows{border-top:1px solid var(--line)}
.rows a{
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:18px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;
}
.rows a span:first-child{font-weight:500;color:var(--ink)}
.rows a span:last-child{font-family:var(--font-display),sans-serif;font-weight:700;white-space:nowrap;color:var(--muted)}
.rows a:hover span:first-child{text-decoration:underline;text-underline-offset:4px}

/* Той самий ритм рядків, але без переходу: просто перелік, а не навігація */
.rows>div{
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:18px 0;border-bottom:1px solid var(--line);
}
.rows>div span:first-child{font-weight:500;color:var(--ink)}
.rows>div span+span{font-family:var(--font-display),sans-serif;font-weight:700;white-space:nowrap;color:var(--muted)}

/* --- Контакти: не рядки, а дві кнопки. Єдине місце на сайті, де потрібна
   очевидна ціль дії, тому тільки тут рамка і заливка на ховері --- */
.rows:has(a[data-contact]){border-top:0;display:flex;flex-wrap:wrap;gap:10px}
.rows a[data-contact]{
  flex:0 0 auto;display:inline-flex;align-items:baseline;gap:12px;
  padding:13px 18px;border:1px solid var(--line);border-radius:0;
  transition:background-color .16s,border-color .16s,color .16s;
}
.rows a[data-contact] span:first-child{font-weight:500}
.rows a[data-contact] span:last-child{
  font-family:var(--font-text),sans-serif;font-weight:400;font-size:15px;color:var(--muted);
}
.rows a[data-contact]:hover{background:var(--c);border-color:var(--c);color:#fff}
.rows a[data-contact]:hover span:first-child{text-decoration:none;color:#fff}
.rows a[data-contact]:hover span:last-child{color:rgba(255,255,255,.85)}
.rows a[data-contact]:active{transform:translateY(1px)}
.rows a[data-contact]:focus-visible{outline:2px solid var(--c);outline-offset:3px}

/* --- Перелік фактів: термін ліворуч, значення праворуч --- */
.facts{border-top:1px solid var(--line)}
.facts div{display:grid;grid-template-columns:minmax(0,12ch) minmax(0,1fr);gap:20px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.facts dt{color:var(--muted)}
.facts dd{color:var(--ink)}

/* --- Перелік напрямків. При наведенні колір напрямку заливає рядок зліва направо.
   Клікабельність видно ще до наведення: смуга кольору зліва і стрілка справа.
   Раніше вони стояли тільки на тачі — на десктопі рядок мовчав, поки на нього
   не наведеш, і виглядав як звичайний текст. --- */
.dirs{border-top:1px solid var(--line)}
.dir{
  display:block;position:relative;overflow:hidden;isolation:isolate;
  border-bottom:1px solid var(--line);padding:30px 0;
  text-decoration:none;color:inherit;
}
.dir::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--dc);
  transform:scaleX(0);transform-origin:left;transition:transform .18s ease-out;
}
.dir[href]{box-shadow:inset 4px 0 0 var(--dc)}
.dir[href]:hover::before{transform:scaleX(1)}
/* Стрілка — фігура з файлу, залита маскою: так вона бере колір напрямку
   і білішає на ховері без другого файлу */
.dir[href]::after{
  content:'';position:absolute;right:clamp(20px,5vw,72px);top:50%;
  width:34px;height:34px;transform:translateY(-50%);
  background-color:var(--dc);
  -webkit-mask:url(../img/arrow-circle.svg) center/contain no-repeat;
  mask:url(../img/arrow-circle.svg) center/contain no-repeat;
  transition:background-color .18s,transform .18s ease-out;
}
.dir[href]:hover::after{background-color:#fff;transform:translate(6px,-50%)}
.dir-in{
  display:grid;grid-template-columns:minmax(0,26vw) minmax(0,1fr) auto;
  gap:32px;align-items:baseline;
  padding-left:clamp(20px,5vw,72px);
  /* праворуч місце під стрілку, щоб вона не наїжджала на ціну */
  padding-right:calc(clamp(20px,5vw,72px) + 46px);
  transition:color .18s;
}
.dir[href]:hover .dir-in{color:#fff}
.dir-name{
  font-family:var(--font-display),sans-serif;font-weight:700;
  font-size:clamp(24px,2.9vw,38px);line-height:1;letter-spacing:-0.02em;
}
.dir-desc{font-size:15px;color:var(--muted);transition:color .18s}
.dir-price{
  font-family:var(--font-display),sans-serif;font-weight:700;
  font-size:15px;white-space:nowrap;color:var(--ink);text-align:right;transition:color .18s;
}
.dir[href]:hover .dir-desc{color:rgba(255,255,255,.85)}
.dir[href]:hover .dir-price{color:#fff}
.dir:not([href]){cursor:default}
.dir:not([href]) .dir-name{color:var(--muted)}

/* --- Сітка робіт: рівно по два кадри в ряд.
   Раніше перший і шостий йшли на всю ширину — виглядало добре, але сторінка
   через це вимагала вдвічі більше прокрутки, ніж того варті приклади. --- */
.works{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(26px,3vw,44px);margin-top:36px}
.work img{width:100%;height:auto;display:block;border:1px solid var(--line)}
.work h3{margin-top:16px}
.work .url{display:inline-block;margin-top:5px;font-size:13px;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.work .url:hover{border-bottom-color:var(--c)}
.work p{margin-top:9px;font-size:15px;max-width:52ch}

/* --- Смуги порівняння. Без бібліотек: жодного стороннього скрипта на сайті --- */
.bars{margin-top:26px;border-top:1px solid var(--line)}
.bars>div{
  display:grid;grid-template-columns:minmax(0,24ch) minmax(0,1fr) minmax(0,10ch);
  gap:20px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line);font-size:15px;
}
.bars .who{color:var(--muted)}
.bars .ours .who{color:var(--ink);font-weight:500}
.bar{height:12px;background:transparent;border-bottom:1px solid var(--line)}
.bar i{display:block;height:12px;min-width:3px;background:#B9B9B4}
.bars .ours .bar i{background:var(--c)}
.bar-val{
  font-family:var(--font-display),sans-serif;font-weight:700;
  white-space:nowrap;text-align:right;color:var(--muted);
}
.bars .ours .bar-val{color:var(--ink)}

/* --- Застереження: єдина рамка на сайті, без заливки і тіні --- */
.caveat{border:1px solid var(--line);padding:24px clamp(20px,3vw,32px);margin-top:32px}
.caveat h3{margin-bottom:12px}
.caveat p{max-width:70ch}

/* --- Мітка заглушки. Знімається разом із заглушкою --- */
.stub{display:inline-block;border:1px solid var(--line);padding:6px 11px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* --- Підвал. Лишився тільки на двох сторінках, де внизу стоять джерела цін --- */
footer{border-top:1px solid var(--line);padding-block:40px;font-size:14px;color:var(--muted)}
footer a{color:inherit}

@media (max-width:760px){
  :root{--step:64px}
  .two{grid-template-columns:1fr}
  .flow li{grid-template-columns:32px minmax(0,1fr);gap:8px 14px}
  .flow li b{grid-column:2}
  .flow li span{grid-column:2}
  .facts div{grid-template-columns:1fr;gap:2px}
  .bars>div{grid-template-columns:1fr auto;gap:6px 16px}
  .bars .bar{grid-column:1/-1;order:3}
  .works{grid-template-columns:1fr}
  .dir-in{grid-template-columns:1fr;gap:10px;padding-right:60px}
  .dir-price{text-align:left}
  /* На тачі немає ховера — реакція вішається на натискання */
  .dir[href]::after{right:clamp(18px,5vw,40px)}
  .dir[href]:active::before{transform:scaleX(1)}
  .dir[href]:active .dir-in{color:#fff}
  .dir[href]:active .dir-desc,.dir[href]:active .dir-price{color:rgba(255,255,255,.85)}
  .dir[href]:active::after{color:#fff}
  .scroll-x table{min-width:600px}
  .scroll-x{padding-bottom:6px}
}