/* Salamander — уся верстка сайту.
   Джерело: design/first-screen.html (макет першого екрана, схвалений 2026-08-07).

   Правило, яке стереже tools/check-style.test.mjs: жоден колір не пишеться
   на місці — тільки через токени нижче. Інакше рецепт дня протікає в ніч. */

/* Manrope, порізаний під набір символів сайту (tools/charset.mjs).
   Версія в імені файла обовʼязкова: `_headers` віддає ці файли як immutable
   на рік. Перезібрав шрифт — підніми VERSION у tools/subset-font.mjs і
   поправ ці три адреси разом із preload в усіх HTML. */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/manrope-400-v2.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/manrope-700-v2.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/assets/fonts/manrope-800-v2.woff2") format("woff2");
}

/* ── Токени, керовані часом доби ─────────────────────────
   День — світлий теплий регістр (основа). Ніч — теплий морок:
   не «нічна тема заради теми», а вечірній затишок, який для вікон
   продає не гірше за денне світло. */
:root, :root[data-time="day"] {
  --paper:#F6F2EA; --surface:#FFFFFF; --ink:#1C1813; --muted:#6E665A;
  --hairline:#E4DCCE; --edge:#CDC3B2; --accent:#A8630A; --bright:#F5A623;
  --on-bright:#2A1B06;
  --sky-top:#AEC9DE; --sky-mid:#DCE8EA; --sky-bot:#FBE7C6;
  --frame-line: rgba(28,24,19,.34);
  --hill-far:#A6B590; --hill-near:#7E8C63;
  /* Матеріали перерізу профілю. День: пластик світлий і теплий, армування
     холодне-сіре, скло — блакитний натяк. */
  --pvc:#EDE7DB; --pvc-line:#B9AE9A; --steel:#9AA0A6; --pane:#CBDCE4; --gasket:#5C5348;
  color-scheme: light;
}
:root[data-time="night"] {
  --paper:#14110C; --surface:#1E1913; --ink:#F1EBE0; --muted:#9A9082;
  --hairline:#2A2318; --edge:#463C2D; --accent:#FFB020; --bright:#FFB020;
  --on-bright:#2A1B06;
  --sky-top:#081226; --sky-mid:#0B1830; --sky-bot:#14243F;
  --frame-line: rgba(240,235,224,.36);
  --hill-far:#0E1A2E; --hill-near:#0A1524;
  /* Ніч: той самий переріз, перевернута світлота. Не інверсія фільтром —
     інверсія перевернула б і колір ламінації, а це аргумент продажу. */
  --pvc:#2E2A22; --pvc-line:#5A5040; --steel:#6E747A; --pane:#24384A; --gasket:#C0B6A6;
  color-scheme: dark;
}

:root {
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:56px; --s7:80px;
  --f0:12px; --f1:14px; --f2:15px; --f3:17px; --f4:21px;
  --f5:clamp(22px,4.5vw,30px);
  --f6:clamp(34px,7vw,58px);
  --font:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap:1140px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 68px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: var(--f2); line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background .5s ease, color .5s ease;
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s4); }

/* ── Шапка ───────────────────────────────────────────── */
.top {
  border-bottom: 1px solid var(--hairline); position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
}
.top__in { display: flex; align-items: center; gap: var(--s3); height: 60px; }
.brand { display: flex; align-items: center; gap: var(--s2); text-decoration: none; color: var(--ink); }
.mark { width: 26px; height: 26px; flex: none; display: block; }
.brand__name { font-weight: 800; font-size: var(--f3); letter-spacing: .14em; text-transform: uppercase; }
.top__spacer { flex: 1; }
.lang { display: flex; align-items: center; gap: 2px; font-size: var(--f1); }
.lang a { color: var(--muted); text-decoration: none; padding: 2px 6px; }
.lang a.is-on { color: var(--ink); font-weight: 700; }
.lang a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang span { color: var(--edge); }
.top__phone {
  display: none; text-decoration: none; color: var(--ink); font-weight: 700;
  font-size: var(--f3); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.top__phone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 720px) { .top__phone { display: inline; } }

/* Під 380px шапка не влазить: знак + мова + перемикач часу доби вже займають
   більше за в'юпорт 320px. Знак сам ідентифікує бренд візуально — назва
   зайва на екрані, але лишається доступним іменем посилання (не
   `display: none`, а рецепт .sr-only — інакше в acc-tree лишається
   порожнє ім'я, WCAG 2.4.4/4.1.2). */
@media (max-width: 379px) { .top .brand__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

/* перемикач сонце/місяць */
.sky-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid var(--edge); color: var(--ink);
}
.sky-toggle:hover { border-color: var(--accent); color: var(--accent); }
.sky-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sky-toggle svg { width: 17px; height: 17px; display: block; }
:root[data-time="day"] .sky-toggle .i-moon,
:root[data-time="night"] .sky-toggle .i-sun { display: none; }

/* ── Герой ───────────────────────────────────────────── */
.hero { padding: var(--s6) 0 var(--s7); }
.hero__grid { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); }
.hero__grid > * { min-width: 0; }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: var(--s6); }
}

.eyebrow {
  font-size: var(--f1); letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 var(--s3); display: flex; align-items: center; gap: var(--s2);
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); }
h1 {
  font-size: var(--f6); line-height: 1.04; font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 var(--s4); text-wrap: balance; max-width: 15ch;
}
.lead { font-size: var(--f4); line-height: 1.4; color: var(--muted); margin: 0 0 var(--s5); max-width: 34ch; }
.lead b { color: var(--ink); font-weight: 700; }

.price { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; margin: 0 0 var(--s5); }
.price__from { font-size: var(--f2); color: var(--muted); }
.price__num { font-size: var(--f5); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.price__cur { font-size: var(--f2); color: var(--muted); }
.price__note {
  font-size: var(--f0); color: var(--muted); align-self: center;
  padding-left: var(--s3); margin-left: var(--s1); border-left: 1px solid var(--hairline);
}
@media (max-width: 460px) {
  .price__note { flex-basis: 100%; padding-left: 0; margin-left: 0; margin-top: 2px; border-left: 0; }
}

.cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0 0 var(--s6); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: 52px; padding: 0 var(--s4); font: inherit; font-weight: 700; text-decoration: none;
  cursor: pointer; border: 1px solid transparent; transition: transform .12s ease, background .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--bright); color: var(--on-bright); }
.btn--primary:hover { background: color-mix(in srgb, var(--bright) 88%, #000); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--edge); font-variant-numeric: tabular-nums; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.trust { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline); }
.trust > * { min-width: 0; }
.trust__i { padding: var(--s3) var(--s3) 0 0; }
.trust__i + .trust__i { padding-left: var(--s3); border-left: 1px solid var(--hairline); }
.trust__k { font-size: var(--f0); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.trust__v { font-size: var(--f2); font-weight: 700; margin-top: 2px; }
/* Нижче 360px три колонки замало навіть без переносу: значення на кшталт
   «производителя» впритул до сусідньої межі. Складаємо в один стовпець —
   кожен факт отримує повну ширину замість переносу посеред слова. */
@media (max-width: 359px) {
  .trust { grid-template-columns: 1fr; }
  .trust__i + .trust__i { padding-left: 0; border-left: 0; border-top: 1px solid var(--hairline); margin-top: var(--s3); }
}

/* ── Вікно: небо цієї миті ───────────────────────────── */
.glass {
  position: relative; aspect-ratio: 4 / 5; width: 100%;
  border: 1px solid var(--edge); overflow: hidden;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 56%, var(--sky-bot) 100%);
  transition: background .5s ease;
}
.glass__scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
:root[data-time="day"] .scene-night { display: none; }
:root[data-time="night"] .scene-day { display: none; }

/* рама вікна поверх неба — завжди */
.glass__frame { position: absolute; inset: 14px; border: 2px solid var(--frame-line); }
.glass__mullion { position: absolute; left: 50%; top: 14px; bottom: 14px; width: 2px; background: var(--frame-line); }
.glass__sash { position: absolute; right: 14px; top: 14px; width: calc(50% - 14px); bottom: 14px; pointer-events: none; }
.glass__sash svg { width: 100%; height: 100%; display: block; }
.glass__sash line { stroke: var(--frame-line); stroke-width: 1.5; }

.glass__cap {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  font-size: var(--f0); color: var(--ink);
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  border: 1px solid var(--frame-line); padding: 8px 10px; backdrop-filter: blur(3px);
}

/* Рух — лише коли користувач не просив тиші.
   Мерехтіння зірок вимикається видаленням одного рядка `.star { animation … }`. */
@media (prefers-reduced-motion: no-preference) {
  .star { animation: tw 3.4s ease-in-out infinite; }
  .star:nth-child(3n){animation-delay:.6s} .star:nth-child(3n+1){animation-delay:1.3s}
  .star:nth-child(4n){animation-delay:2s}
  @keyframes tw { 0%,100%{opacity:.35} 50%{opacity:1} }
  .rise { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
  .rise:nth-child(2){animation-delay:.05s} .rise:nth-child(3){animation-delay:.1s}
  @keyframes rise { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
}

/* ── Форма заявки ────────────────────────────────────── */
.callback { border-top: 1px solid var(--hairline); padding: var(--s6) 0 var(--s7); }
.callback__h { font-size: var(--f5); font-weight: 800; letter-spacing: -.01em; margin: 0 0 var(--s2); }
.callback__sub { color: var(--muted); margin: 0 0 var(--s5); max-width: 42ch; }
.callback__row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-start; }
.callback__field { display: flex; flex-direction: column; gap: var(--s1); flex: 1 1 220px; min-width: 0; }
.callback__label { font-size: var(--f0); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.callback input {
  height: 52px; padding: 0 var(--s3); font: inherit; font-size: var(--f3); color: var(--ink);
  background: var(--surface); border: 1px solid var(--edge); border-radius: 0;
  font-variant-numeric: tabular-nums;
}
.callback input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.callback .btn { flex: 0 0 auto; align-self: flex-end; }

/* Візуально приховане, але доступне читачам з екрана. Honeypot не
   display:none — частина ботів такі поля пропускає навмисне, а частина
   рідерів навпаки їх озвучує. Тому прибираємо з потоку й з видимої області,
   лишаючи поле «справжнім» для того, хто читає HTML чи DOM. */
.sr-only, .callback__trap {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.callback__msg { margin: var(--s3) 0 0; min-height: 1.5em; font-size: var(--f2); color: var(--muted); }
.callback__msg[data-state="ok"] { color: var(--ink); font-weight: 700; }
.callback__msg[data-state="error"] { color: var(--accent); font-weight: 700; }

/* ── Спільне для секцій нижче героя ──────────────────── */
.profiles { border-top: 1px solid var(--hairline); padding: var(--s6) 0 var(--s7); }
.sec__h { font-size: var(--f5); font-weight: 800; letter-spacing: -.01em; margin: 0 0 var(--s2); }
.sec__lead { color: var(--muted); margin: 0 0 var(--s5); max-width: 52ch; font-size: var(--f3); }

/* ── Профілі ─────────────────────────────────────────── */
.profiles__grid {
  display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr);
}
.profiles__grid > * { min-width: 0; }
@media (min-width: 620px) { .profiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .profiles__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pcard { border: 1px solid var(--hairline); padding: var(--s4); display: flex; flex-direction: column; }
.pcard__h { font-size: var(--f4); font-weight: 400; margin: 0 0 var(--s3); letter-spacing: -.01em; }
.pcard__h b { font-weight: 800; }
.pcard__specs { margin: 0; display: grid; gap: 0; }
.spec {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2);
  padding: var(--s2) 0; border-top: 1px solid var(--hairline);
}
.spec__k { font-size: var(--f0); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.spec__v { font-size: var(--f3); font-weight: 700; font-variant-numeric: tabular-nums; margin: 0; white-space: nowrap; }
.pcard__note { font-size: var(--f1); color: var(--muted); margin: var(--s3) 0 0; }

/* Переріз профілю. Уся заливка — токенами: малюнок живе і в дні, і в ночі
   (спека §12). Растр із картки дистрибʼютора тут неможливий у принципі. */
.pcard__fig { width: 100%; height: auto; display: block; margin: 0 0 var(--s3); }
.pcard__fig .body { fill: var(--pvc); stroke: var(--pvc-line); stroke-width: 1.5; }
.pcard__fig .chamber { fill: none; stroke: var(--pvc-line); stroke-width: 1; }
.pcard__fig .steel { fill: var(--steel); }
.pcard__fig .gasket { fill: var(--gasket); }
.pcard__fig .pane { fill: var(--pane); stroke: var(--pvc-line); stroke-width: .6; }

/* ── Ціни ────────────────────────────────────── */
.prices { border-top: 1px solid var(--hairline); padding: var(--s6) 0 var(--s7); }

/* Таблиця широка за задумом. Скролиться ВОНА, а не сторінка —
   горизонтальний скрол тіла сторінки заборонений (спека §3). */
.prices__scroll { overflow-x: auto; margin: 0 0 var(--s4); }
.prices__scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ptable { border-collapse: collapse; width: 100%; min-width: 720px; }
.ptable th, .ptable td { text-align: left; padding: var(--s3) var(--s3) var(--s3) 0; vertical-align: middle; }
.ptable thead th {
  font-size: var(--f0); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  font-weight: 400; border-bottom: 1px solid var(--edge); white-space: nowrap;
}
.ptable tbody tr { border-bottom: 1px solid var(--hairline); }
.ptable tbody th { font-weight: 400; font-size: var(--f1); min-width: 260px; }
.rowhead { display: flex; align-items: center; gap: var(--s3); }
.rowhead > span { min-width: 0; }
.ptable td.p, .ptable th.p { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ptable td.p { font-weight: 700; font-size: var(--f3); }
.ptable td.sz { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }

/* Нижче 620px таблиця не влазить у жоден телефонний екран навіть зі
   скролом (row-header ~260px + колонка розміру самі зʼїдають в'юпорт 390px) —
   тому рядок перевтілюється в картку. Розмітка лишається табличною
   (семантика й check-parity не чіпаються), міняється лише display. */
@media (max-width: 619px) {
  .ptable { min-width: 0; }
  .prices__scroll { overflow-x: visible; }
  .ptable, .ptable tbody, .ptable tr, .ptable th, .ptable td { display: block; width: 100%; }
  .ptable thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .ptable tbody tr { padding: var(--s4) 0; }
  .ptable tbody th { min-width: 0; padding: 0 0 var(--s3); }
  .ptable tbody td.sz { padding: 0 0 var(--s3); }
  .ptable tbody td.p {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: var(--s1) 0; text-align: left;
  }
  .ptable tbody td.p::before {
    content: attr(data-label); font-weight: 400; font-size: var(--f1); color: var(--muted);
  }
}

/* Схема конструкції. Висота фіксована, ширина йде за пропорцією отвору —
   рядок 2000×1400 має бути видимо ширшим за 900×1400. */
.scheme { height: 46px; width: auto; flex: none; display: block; }
.scheme rect, .scheme line { fill: none; stroke: var(--edge); stroke-width: 2; }
.scheme .sash line { stroke: var(--muted); stroke-width: 1.5; }

.prices__note { font-size: var(--f1); color: var(--muted); margin: 0 0 var(--s5); max-width: 60ch; }
.prices__note b { color: var(--ink); font-weight: 700; }

/* ── Доказ ───────────────────────────────────────────── */
.proof { border-top: 1px solid var(--hairline); padding: var(--s6) 0 var(--s7); }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
.facts > * { min-width: 0; }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fact { display: flex; gap: var(--s3); align-items: flex-start; border-top: 1px solid var(--hairline); padding-top: var(--s3); }
.fact__n {
  font-size: var(--f1); font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--muted); flex: none; width: 1.5em;
}
.fact__t { font-size: var(--f2); color: var(--muted); }
.fact__t b { color: var(--ink); font-weight: 700; }

/* ── Контакти ────────────────────────────────────── */
.contacts { border-top: 1px solid var(--hairline); padding: var(--s6) 0 var(--s7); }
.contacts__grid { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); margin: 0 0 var(--s5); }
.contacts__grid > * { min-width: 0; }
@media (min-width: 620px) { .contacts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .contacts__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cblock { border-top: 1px solid var(--hairline); padding-top: var(--s3); }
.cblock__k { font-size: var(--f0); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); }
.cblock__v {
  display: block; font-size: var(--f3); font-weight: 700; color: var(--ink);
  text-decoration: none; font-variant-numeric: tabular-nums;
}
.cblock__v--sub { font-weight: 400; font-size: var(--f2); color: var(--muted); }
a.cblock__v:hover { color: var(--accent); }
a.cblock__v:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Сторінка 404 ────────────────────────────────────── */
.nf { min-height: 70vh; display: flex; align-items: center; padding: var(--s6) 0; }
.nf__code { font-size: var(--f1); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s3); }
.nf h1 { max-width: 18ch; }
.nf__lead { font-size: var(--f4); line-height: 1.4; color: var(--muted); margin: 0 0 var(--s5); max-width: 38ch; }

/* Копірайт, який чекає на власника (QUESTIONS.md, блок B).
   Пунктир зникне разом із класом, коли текст стане справжнім. */
.ph { border-bottom: 2px dashed var(--edge); }

/* ── Підвал ──────────────────────────────────────────── */
.foot { border-top: 1px solid var(--hairline); padding: var(--s5) 0; }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.foot__brand { display: flex; align-items: center; gap: var(--s2); }
.foot__legal { font-size: var(--f1); color: var(--muted); margin: 0; flex: 1 1 260px; min-width: 0; }
.foot__lang { display: flex; align-items: center; gap: var(--s2); font-size: var(--f1); }
.foot__lang a { color: var(--muted); text-decoration: none; }
.foot__lang a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.foot__lang a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.foot__lang span { color: var(--edge); }