/* ==========================================================================
   Luximex UA — design system
   Палітра й типографіка зняті безпосередньо з каталогу 2026.
   ========================================================================== */

:root{
  /* --------------------------------------------------------------------
     Гама «Антрацит» — обрана замовником з 20 варіантів.
     База #26292d: холодний темно-сірий, на два кроки світліший за
     попередню вугільну. Контраст тексту 12.06:1 — високо й чітко,
     але без засвіту, який давав чистий білий на майже чорному (20.6:1).
     Поверхні й приглушені кольори пораховані від бази, не на око.
     -------------------------------------------------------------------- */
  --hdr:        #1b1e21;   /* шапка: темніша за сторінку, тримає верх */
  --hdr-2:      #1f2326;   /* другий ряд шапки з продукцією */
  --ink:        #26292d;   /* фон сторінки */
  --ink-2:      #2d3135;   /* чергування секцій */
  --ink-3:      #33373c;   /* картки, поля вводу, меню */
  --ink-deep:   #212327;   /* підвал */
  --sunk:       #1e2023;   /* найглибша поверхня: тло фото до завантаження */
  --veil:       30,32,35;  /* затемнення поверх фото, RGB під нову базу */
  --bnr-end:    #26292d;   /* градієнт банера гасне рівно у фон сторінки */

  --paper:      #ece9e3;   /* основний текст,   12.06:1 */
  --muted:      #b8b6b3;   /* другорядний,       7.22:1  AAA */
  --muted-2:    #959594;   /* приглушений,       4.87:1  AA  */

  --green:      #009537;   /* фірмовий: рамки, іконки, риски, декор */
  --green-fill: #00812f;   /* заливки під білим текстом,  5.02:1  AA */
  --green-dk:   #006826;   /* наведення на кнопку */
  --green-lt:   #97c76e;   /* акценти, креслення, посилання, 7.45:1 */
  --on-green:   #ffffff;
  --blue:       #00489a;

  --line:       #404245;
  --line-2:     #565759;

  --wrap: 1220px;
  --gut: 24px;

  --r-sm: 3px;
  --r:    6px;

  --f-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --f-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--1: clamp(.8rem, .77rem + .12vw, .875rem);
  --step-0:  clamp(.95rem, .91rem + .2vw, 1.0625rem);
  --step-1:  clamp(1.12rem, 1.05rem + .35vw, 1.35rem);
  --step-2:  clamp(1.4rem, 1.25rem + .7vw, 1.9rem);
  --step-3:  clamp(1.75rem, 1.45rem + 1.4vw, 2.7rem);
  --step-4:  clamp(2.1rem, 1.6rem + 2.4vw, 3.9rem);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% ; scroll-behavior:smooth; overflow-x:clip }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--f-body);
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;   /* не створює контейнер прокрутки — sticky-шапка працює */
}

img,svg,video{ max-width:100%; height:auto; display:block }
a{ color:inherit }
button{ font:inherit; color:inherit }

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

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--green-fill); color:#fff; padding:12px 18px;
}
.skip:focus{ left:8px; top:8px }

/* --------------------------------------------------------------- типографіка */
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; line-height:1.1; margin:0 0 .6em; letter-spacing:-.01em }
h1{ font-size:var(--step-4) }
h2{ font-size:var(--step-3) }
h3{ font-size:var(--step-2) }
h4{ font-size:var(--step-1) }
p{ margin:0 0 1em; max-width:70ch }
.lede{ font-size:var(--step-1); color:var(--muted); max-width:62ch }

/* Заголовок у стилі обкладинки каталогу: широкий трекінг, верхній регістр */
.plate-title{
  font-family:var(--f-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.11em;
  line-height:1.08;
}

.green-word{ color:var(--green-lt) }

/* --------------------------------------------------------------- секції */
.sec{ padding:clamp(56px,7vw,104px) 0 }
.sec--alt{ background:var(--ink-2) }
.sec--tight{ padding-block:clamp(40px,5vw,68px) }

.sec-head{ margin-bottom:clamp(28px,4vw,52px); max-width:74ch }
.sec-head p{ color:var(--muted) }

/* Тонка риска-роздільник — структурний елемент каталогу */
.rule{ height:1px; background:var(--line); border:0; margin:0 }

/* --------------------------------------------------------------- шапка */
/* Два ряди: угорі бренд і службові посилання, знизу — весь асортимент.
   Товари винесені назовні, бо під випадайкою їх ніхто не бачив.         */
.hdr{
  position:sticky; top:0; z-index:60; background:var(--hdr);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line);
}
.hdr__top{ border-bottom:1px solid var(--line) }
.hdr__top-in{ display:flex; align-items:center; gap:18px; min-height:74px }

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0 }
.brand svg{ width:40px; height:auto; flex-shrink:0 }
.brand b{
  font-family:var(--f-display); font-weight:700; font-size:1.12rem;
  letter-spacing:.02em; color:var(--paper);
}
.brand b i{ font-style:normal; color:var(--green-lt) }
.brand--text svg{ display:none }

.hdr__util{ margin-left:auto; display:flex; align-items:center; gap:1px }
.hdr__util a{
  font-size:.84rem; color:var(--muted-2); text-decoration:none;
  padding:8px 12px; border-radius:var(--r-sm); white-space:nowrap;
}
.hdr__util a:hover{ color:var(--paper); background:#ffffff0f }
.hdr__util a[aria-current="page"]{ color:var(--paper) }

.hdr__tel{
  text-decoration:none; font-family:var(--f-display); font-weight:700;
  font-size:.97rem; white-space:nowrap; color:var(--paper); flex-shrink:0;
}
.hdr__tel:hover{ color:var(--green-lt) }

.lang{ display:flex; border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden; flex-shrink:0 }
.lang a{ padding:5px 9px; font-size:.74rem; text-decoration:none; color:var(--muted-2); font-weight:600; letter-spacing:.05em }
.lang a[aria-current]{ background:var(--green-fill); color:#fff }

/* Другий ряд — уся продукція */
.hdr__prods{ background:var(--hdr-2) }
.hdr__prods-in{ display:flex; gap:0; overflow-x:auto; scrollbar-width:none }
.hdr__prods-in::-webkit-scrollbar{ display:none }
.hdr__prods-in a{
  font-size:.82rem; color:var(--muted); text-decoration:none; white-space:nowrap;
  padding:13px 14px; border-bottom:2px solid transparent; flex:1 0 auto; text-align:center;
  transition:color .15s, border-color .15s, background .15s;
}
.hdr__prods-in a:hover{ color:var(--paper); background:#ffffff0a; border-bottom-color:var(--green) }
.hdr__prods-in a[aria-current="page"]{ color:var(--paper); border-bottom-color:var(--green) }

.burger{
  display:none; background:none; border:1px solid var(--line-2); border-radius:var(--r-sm);
  width:42px; height:38px; cursor:pointer; align-items:center; justify-content:center; flex-shrink:0;
}
.burger span{ display:block; width:19px; height:2px; background:var(--paper); position:relative }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:19px; height:2px; background:var(--paper) }
.burger span::before{ top:-6px } .burger span::after{ top:6px }

/* Мобільна панель: продукція плиткою, службові посилання списком */
.mnav{ display:none }
@media (max-width: 1000px){
  .hdr__util, .hdr__prods, .hdr__tel{ display:none }
  .burger{ display:flex; margin-left:auto }
  .mnav{
    position:fixed; inset:74px 0 0 0; background:var(--ink); z-index:59;
    overflow-y:auto; padding:18px var(--gut) 40px;
  }
  body[data-nav="open"] .mnav{ display:block }
  body[data-nav="open"]{ overflow:hidden }
  .mnav__h{
    margin:20px 0 0; font-family:var(--f-display); font-size:.74rem; font-weight:600;
    letter-spacing:.11em; text-transform:uppercase; color:var(--muted-2);
  }
  .mnav__h:first-child{ margin-top:4px }
  .mnav__links{ list-style:none; margin:10px 0 0; padding:0; border-top:1px solid var(--line) }
  .mnav__links--prod a{ color:var(--paper); font-weight:500 }
  .mnav__links a{
    display:block; padding:15px 2px; border-bottom:1px solid var(--line);
    text-decoration:none; color:var(--muted); font-size:1rem;
  }
  .mnav__links a:hover{ color:var(--paper) }
  .mnav__tel{
    display:block; margin-top:22px; font-family:var(--f-display); font-weight:700;
    font-size:1.3rem; color:var(--paper); text-decoration:none;
  }
}

/* --------------------------------------------------------------- кнопки */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:var(--r-sm); border:1px solid transparent;
  font-family:var(--f-display); font-weight:600; font-size:.92rem;
  text-decoration:none; cursor:pointer; transition:background .16s, border-color .16s, color .16s;
}
.btn--primary{ background:var(--green-fill); color:var(--on-green) }
.btn--primary:hover{ background:var(--green-dk) }
.btn--ghost{ background:transparent; color:var(--paper); border-color:var(--line-2) }
.btn--ghost:hover{ border-color:var(--green-lt); color:var(--green-lt) }
.btn--light{ background:var(--paper); color:var(--ink) }
.btn--light:hover{ background:#e6e6e3 }
.btn--wide{ width:100% }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px }

/* --------------------------------------------------------------- банер */
.bnr{ position:relative; background:var(--sunk); overflow:hidden }
.bnr__img{
  width:100%; display:block; object-fit:cover;
  aspect-ratio:2.33/1; max-height:min(64vh, 600px);
}
.bnr__over{
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center;
  text-align:center; pointer-events:none;
  background:linear-gradient(180deg, rgba(var(--veil),0) 18%, rgba(var(--veil),.58) 42%, rgba(var(--veil),.93) 70%, var(--bnr-end) 100%);
}
.bnr__body{ padding:0 var(--gut) clamp(26px,4vw,48px); max-width:840px; pointer-events:auto }
.bnr h1{
  font-family:var(--f-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; line-height:1.12; font-size:clamp(1.35rem,.95rem + 1.9vw,2.5rem);
  margin:0 0 .45em;
}
.bnr__sub{ color:#dbd9d5; font-size:clamp(.9rem,.87rem + .22vw,1.04rem); margin:0 auto 22px; max-width:56ch }
.bnr__btns{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center }
@media (max-width: 760px){
  /* На телефоні першим має бути асортимент, а не банер:
     людина заходить по товар, а не по картинку. Порядок міняємо
     через flex, розмітка лишається однаковою для обох версій. */
  main{ display:flex; flex-direction:column }
  main > *{ order:3 }
  main > #produkciya{ order:1; padding-top:clamp(18px,4vw,26px) }
  main > .bnr{ order:2 }
  #produkciya .sec-head{ margin-bottom:18px }
  #produkciya .sec-head p{ display:none }

  .bnr__img{ aspect-ratio:1/1; max-height:none }
  .bnr__over{ background:linear-gradient(180deg, rgba(var(--veil),.12) 28%, rgba(var(--veil),.76) 60%, var(--bnr-end) 100%) }
  .bnr__sub{ display:none }
  .bnr__btns .btn{ flex:1 1 100%; }
  .bnr__btn1{ display:none }   /* плитка вже вище — кнопка гортала б угору */
}

/* --------------------------------------------------------------- плитка продукції */
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:13px }
@media (max-width: 1080px){ .tiles{ grid-template-columns:repeat(3,1fr) } }
@media (max-width: 760px){ .tiles{ grid-template-columns:repeat(2,1fr); gap:11px } }

.tile{
  position:relative; display:flex; align-items:flex-end; text-decoration:none;
  border-radius:14px; overflow:hidden; isolation:isolate; aspect-ratio:4/3;
  background:var(--sunk);
}
@media (max-width: 760px){ .tile{ aspect-ratio:1/1; border-radius:12px } }
.tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  transition:transform .5s ease;
}
.tile::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(var(--veil),.2) 0%, rgba(var(--veil),.6) 48%, rgba(var(--veil),.92) 100%);
}
.tile:hover img{ transform:scale(1.06) }
.tile__body{ padding:clamp(14px,1.6vw,20px); width:100% }
.tile h3{
  font-family:var(--f-display); font-weight:700; color:var(--paper);
  font-size:clamp(.95rem,.88rem + .32vw,1.12rem); line-height:1.22; margin:0 0 9px;
}
.tile__more{ display:flex; align-items:center; gap:9px; font-size:.83rem; color:#cfcdc9 }
.tile__more svg{ width:28px; height:9px; fill:none; stroke:currentColor; stroke-width:1.4; flex-shrink:0 }
.tile:hover .tile__more{ color:var(--green-lt) }

/* --------------------------------------------------------------- герой */
.hero{ position:relative; padding:clamp(40px,4.5vw,64px) 0 clamp(38px,4vw,58px); overflow:hidden }
.hero__grid{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(28px,4vw,56px); align-items:center }
.hero h1{ margin-bottom:.42em; font-size:var(--step-3) }
.hero__sub{ font-size:var(--step-1); color:var(--muted); max-width:46ch; margin-bottom:8px }

/* Три опори каталогу — «Надійність · Технології · Довговічність» */
.pillars{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 26px }
.pillars li{ display:flex; align-items:center; gap:9px; font-size:.9rem; color:var(--muted); font-family:var(--f-display); font-weight:500; letter-spacing:.03em }
.pillars li::before{ content:""; width:7px; height:7px; background:var(--green); flex-shrink:0 }

/* Технічна плита з креслень — головний впізнаваний елемент */
.plate{
  position:relative; display:grid; grid-template-columns:repeat(6,1fr);
  gap:18px 20px; align-items:end; justify-items:center; color:var(--muted-2);
}
.plate > div{ width:100%; display:flex; align-items:flex-end; justify-content:center }
.plate svg{ width:auto; height:auto; max-width:100%; max-height:clamp(96px, 13vw, 186px) }
.plate__a{ grid-column:1 / span 2 }
.plate__b{ grid-column:3 / span 2 }
.plate__c{ grid-column:5 / span 2 }
.plate__d{ grid-column:2 / span 4 }
.plate__d svg{ max-height:215px }
/* Декоративна смуга креслень під відео. Ширина кожного креслення
   пропорційна його співвідношенню сторін (flex-grow = ширина/висота),
   тому всі вони однакової висоти й разом ніколи не ширші за екран. */
.plate--strip{
  display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(10px,3vw,40px); max-width:900px; color:var(--muted-2);
}
.strip__i{ min-width:0 }
.strip__i svg{ display:block; width:100%; height:auto }
.strip__i .bg{ fill:var(--ink) }
.plate__acc{ color:var(--green-lt) }
@media (max-width: 760px){ .strip__i svg [stroke]{ stroke-width:.6 } }
@media (max-width: 860px){
  .hero__grid{ grid-template-columns:1fr }
  .plate{ opacity:.6; gap:12px }
  .plate svg{ max-height:130px }
  .plate__d svg{ max-height:150px }
}

/* --------------------------------------------------------------- сітка продукції */
.prods{ display:grid; grid-template-columns:repeat(auto-fill, minmax(290px,1fr)); gap:2px; background:var(--line) }
.prod{
  position:relative; background:var(--ink); text-decoration:none; display:flex; flex-direction:column;
  transition:background .18s;
}
.prod:hover{ background:var(--ink-3) }
.prod__img{ aspect-ratio:4/3; overflow:hidden; background:var(--sunk) }
.prod__img img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease }
.prod:hover .prod__img img{ transform:scale(1.035) }
.prod__body{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1 }
.prod__body h3{ font-size:1.13rem; margin-bottom:.4em; line-height:1.25 }
.prod__body p{ font-size:.9rem; color:var(--muted); margin:0 0 16px }
.prod__meta{
  margin-top:auto; font-family:var(--f-display); font-size:.78rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--green-lt);
  display:flex; align-items:center; gap:8px;
}
.prod__meta::after{ content:""; flex:1; height:1px; background:var(--line-2) }

/* --------------------------------------------------------------- зелена панель (з каталогу) */
.gpanel{ background:var(--green-fill); color:var(--on-green); padding:clamp(28px,4vw,46px); border-radius:var(--r) }
.gpanel h2,.gpanel h3{ color:#fff }
.gpanel p{ color:#eefaf2; max-width:78ch }
.gpanel p:last-child{ margin-bottom:0 }
.gpanel--full{ border-radius:0 }
.gpanel__note{ font-size:.92rem; color:#e8f8ee; border-top:1px solid #ffffff33; padding-top:16px; margin-top:20px }

/* --------------------------------------------------------------- списки з галочками */
.checks{ list-style:none; margin:0; padding:0; display:grid; gap:13px }
.checks li{ position:relative; padding-left:34px; line-height:1.5 }
.checks li::before{
  content:""; position:absolute; left:0; top:.15em; width:21px; height:21px;
  border-radius:50%; background:var(--green-fill);
}
.checks li::after{
  content:""; position:absolute; left:6.5px; top:.5em; width:8px; height:4.5px;
  border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg);
}
.checks--onGreen li::before{ background:#ffffff }
.checks--onGreen li::after{ border-color:var(--green) }

/* Прості марковані списки — переваги / сфери */
.dots{ list-style:none; margin:0; padding:0; display:grid; gap:9px }
.dots li{ position:relative; padding-left:19px; font-size:.94rem; color:var(--muted) }
.dots li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:1.5px; background:var(--green-lt) }

/* --------------------------------------------------------------- таблиця моделей */
.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-block:8px }
table.spec{ width:100%; border-collapse:collapse; font-size:.93rem; min-width:520px }
table.spec caption{ text-align:left; color:var(--muted-2); font-size:.85rem; padding-bottom:10px }
table.spec th,table.spec td{ padding:13px 16px; text-align:left; border-bottom:1px solid var(--line) }
table.spec thead th{
  background:var(--green-fill); color:#fff; font-family:var(--f-display); font-weight:600;
  font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; border-bottom:0;
}
table.spec tbody tr:hover{ background:#ffffff07 }
table.spec td:first-child{ font-family:var(--f-display); font-weight:600; color:var(--paper); white-space:nowrap }

/* Характеристики «ключ — значення» */
.kv{ display:grid; gap:0; margin:0; border-top:1px solid var(--line) }
.kv div{ display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid var(--line) }
.kv dt{ color:var(--muted); font-size:.92rem }
.kv dd{ margin:0; font-family:var(--f-display); font-weight:600; text-align:right; font-size:.94rem }

/* --------------------------------------------------------------- макети сторінок */
.two{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(26px,4vw,56px); align-items:start }
.two--wideL{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) }
@media (max-width: 880px){ .two,.two--wideL{ grid-template-columns:1fr } }

.figure{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--ink-3) }
.figure img{ width:100%; aspect-ratio:16/11; object-fit:cover }
.figure figcaption{ padding:12px 16px; font-size:.82rem; color:var(--muted-2); border-top:1px solid var(--line) }

.card{ background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px,3vw,32px) }
.card h3{ font-size:1.1rem }
.card > :last-child{ margin-bottom:0 }

/* Хлібні крихти */
.crumbs{ font-size:.83rem; color:var(--muted-2); padding-top:22px }
.crumbs a{ text-decoration:none; color:var(--muted-2) }
.crumbs a:hover{ color:var(--green-lt) }
.crumbs span{ margin-inline:8px; opacity:.5 }

/* Шапка внутрішньої сторінки */
.phead{ padding:clamp(26px,4vw,44px) 0 clamp(34px,4vw,54px); border-bottom:1px solid var(--line) }
.phead h1{ font-size:var(--step-3); margin-bottom:.35em }
.phead .lede{ margin-bottom:0 }

/* --------------------------------------------------------------- галерея */
.gal{ display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:10px }
.gal button{
  padding:0; border:0; background:var(--sunk); cursor:pointer; overflow:hidden;
  border-radius:var(--r-sm); aspect-ratio:4/3;
}
.gal img{ width:100%; height:100%; object-fit:cover; transition:transform .35s, opacity .2s }
.gal button:hover img{ transform:scale(1.05); opacity:.9 }

.lightbox{ border:0; padding:0; background:transparent; max-width:min(1100px,94vw); max-height:92dvh }
.lightbox::backdrop{ background:#000000ee }
.lightbox img{ max-height:82dvh; width:auto; margin-inline:auto; border-radius:var(--r) }
.lightbox__bar{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:12px; color:var(--muted) }
.lightbox__bar button{ background:#ffffff14; border:0; width:44px; height:44px; border-radius:50%; cursor:pointer; color:#fff; font-size:1.1rem }
.lightbox__bar button:hover{ background:var(--green-fill) }

/* --------------------------------------------------------------- відео */
/* Показуємо превʼю, а сам плеєр вантажимо лише після кліку: інакше YouTube
   тягне свої скрипти й куки на кожне відкриття сторінки й гальмує завантаження. */
.video{ position:relative; border-radius:var(--r); overflow:hidden; background:var(--sunk); max-width:900px }
.video__play{
  display:block; width:100%; padding:0; border:0; background:none; cursor:pointer;
  position:relative; line-height:0;
}
.video__play img{ width:100%; aspect-ratio:16/9; object-fit:cover; transition:opacity .2s }
.video__play::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(var(--veil),.12) 0%, rgba(var(--veil),.5) 100%);
  transition:opacity .25s;
}
.video__play:hover::after{ opacity:.55 }
.video__play:hover img{ transform:scale(1.02) }
.video__play img{ transition:transform .5s ease }
.video__btn{
  position:absolute; inset:0; margin:auto; z-index:1; width:78px; height:78px; border-radius:50%;
  background:#ffffff; display:grid; place-items:center;
  /* Біла кнопка з кільцем: на обкладинці і зелений бак, і блакитне небо —
     зелена кнопка на зеленому баку просто губилась. */
  box-shadow:0 0 0 7px rgba(255,255,255,.22), 0 12px 36px rgba(0,0,0,.45);
  transition:transform .2s, background .2s, box-shadow .2s;
}
.video__btn svg{ width:30px; height:30px; color:var(--green-fill); margin-left:5px; transition:color .2s }
.video__play:hover .video__btn{
  transform:scale(1.07); background:var(--green-fill);
  box-shadow:0 0 0 9px rgba(0,149,55,.28), 0 12px 36px rgba(0,0,0,.45);
}
.video__play:hover .video__btn svg{ color:#fff }
.video iframe{ width:100%; aspect-ratio:16/9; border:0; display:block }
/* Запасний вигляд, якщо обкладинка з YouTube не завантажилась */
.video--noimg .video__play{ aspect-ratio:16/9; background:var(--ink-3) }

/* --------------------------------------------------------------- FAQ */
.faq{ border-top:1px solid var(--line); max-width:900px }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{
  cursor:pointer; list-style:none; padding:20px 44px 20px 0; position:relative;
  font-family:var(--f-display); font-weight:600; font-size:1.02rem; line-height:1.4;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:""; position:absolute; right:8px; top:27px; width:11px; height:11px;
  border-right:2px solid var(--green-lt); border-bottom:2px solid var(--green-lt);
  transform:rotate(45deg); transition:transform .2s;
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:31px }
.faq summary:hover{ color:var(--green-lt) }
.faq .faq__a{ padding:0 44px 22px 0; color:var(--muted); max-width:80ch }
.faq .faq__a > :last-child{ margin-bottom:0 }

/* --------------------------------------------------------------- форми */
.form{ display:grid; gap:14px }
.field label{ display:block; font-size:.83rem; color:var(--muted); margin-bottom:6px }
.field input,.field select,.field textarea{
  width:100%; background:var(--sunk); border:1px solid var(--line-2); color:var(--paper);
  padding:13px 15px; border-radius:var(--r-sm); font:inherit; font-size:.95rem;
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--green); outline:none }
.field textarea{ min-height:104px; resize:vertical }
.field--err input,.field--err select{ border-color:#e0563f }
.field__err{ display:none; color:#f08b78; font-size:.8rem; margin-top:5px }
.field--err .field__err{ display:block }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

.consent{ display:flex; gap:10px; align-items:flex-start; font-size:.8rem; color:var(--muted-2); line-height:1.5 }
.consent input{ width:16px; height:16px; margin-top:2px; flex-shrink:0; accent-color:var(--green) }
.consent a{ color:var(--muted) }

/* Кнопка відправки трохи опущена — прохання замовника */
.form button[type="submit"]{ margin-top:2px }

.form__ok,.form__fail{ display:none; padding:15px 18px; border-radius:var(--r-sm); font-size:.92rem }
.form__ok{ background:#00953722; border:1px solid var(--green); color:#c9f2d8 }
.form__fail{ background:#e0563f1c; border:1px solid #e0563f; color:#f6bcb0 }
.form[data-state="sent"] .form__ok{ display:block }
.form[data-state="sent"] .form__body{ display:none }
.form[data-state="error"] .form__fail{ display:block }

/* --------------------------------------------------------------- модалка */
.modal{
  border:1px solid var(--line-2); background:var(--ink-2); color:var(--paper);
  border-radius:var(--r); padding:0; max-width:min(520px,94vw); width:100%;
}
.modal::backdrop{ background:#000000d9 }
.modal__in{ padding:clamp(24px,4vw,34px) }
.modal__x{
  position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%;
  background:#ffffff12; border:0; cursor:pointer; color:#fff; font-size:1.05rem; line-height:1;
}
.modal__x:hover{ background:var(--green-fill) }
.modal h3{ margin-bottom:.3em; padding-right:34px }
.modal p{ font-size:.92rem; color:var(--muted) }

/* --------------------------------------------------------------- смуга CTA */
.cta{ background:var(--green-fill); color:var(--on-green); padding:clamp(40px,5vw,64px) 0 }
.cta__in{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px; align-items:center }
.cta h2{ color:#fff; margin-bottom:.25em; font-size:var(--step-2) }
.cta p{ color:#eefaf2; margin:0; max-width:56ch }
@media (max-width: 780px){ .cta__in{ grid-template-columns:1fr } }

/* --------------------------------------------------------------- підбір БОК */
.picker{ background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px,3vw,32px) }
.picker__row{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap }
.picker__row .field{ flex:1 1 180px }
.picker__out{ margin-top:22px; padding-top:22px; border-top:1px solid var(--line); display:none }
.picker[data-has-result="true"] .picker__out{ display:block }
.picker__model{ font-family:var(--f-display); font-weight:700; font-size:var(--step-2); color:var(--green-lt); line-height:1 }

/* --------------------------------------------------------------- підвал */
.ftr{ background:var(--ink-deep); border-top:1px solid var(--line); padding:clamp(46px,5vw,70px) 0 30px; font-size:.9rem }
.ftr__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:34px }
@media (max-width: 940px){ .ftr__grid{ grid-template-columns:1fr 1fr } }
@media (max-width: 560px){ .ftr__grid{ grid-template-columns:1fr } }
.ftr h4{ font-size:.79rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-2); margin-bottom:15px; font-weight:600 }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px }
.ftr a{ color:var(--muted); text-decoration:none }
.ftr a:hover{ color:var(--green-lt) }
.ftr__tel{ font-family:var(--f-display); font-weight:700; font-size:1.24rem; color:var(--paper); text-decoration:none; display:inline-block; margin-bottom:6px }
.ftr__note{ color:var(--muted-2); font-size:.82rem }
.ftr__bottom{
  margin-top:40px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  color:var(--muted-2); font-size:.8rem;
}

/* Підписи — текстом, тому рамка тягнеться під вміст, а не фіксована 40x40:
   раніше «Instagram» і «Facebook» вилазили за межі квадратів. */
.soc{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px }
.soc a{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 13px; min-height:36px; font-size:.82rem; line-height:1;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  color:var(--muted); text-decoration:none; white-space:nowrap;
  transition:border-color .15s, background .15s, color .15s;
}
.soc a:hover{ border-color:var(--green); background:var(--green-fill); color:#fff }
.soc svg{ width:17px; height:17px; fill:currentColor }

/* Месенджери */
.msgrs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px }
.msgrs a{
  display:inline-flex; align-items:center; gap:7px; padding:8px 13px; font-size:.83rem;
  border:1px solid var(--line-2); border-radius:var(--r-sm); text-decoration:none; color:var(--muted);
}
.msgrs a:hover{ border-color:var(--green-lt); color:var(--green-lt) }
.msgrs svg{ width:15px; height:15px; fill:currentColor }

/* Плаваюча кнопка дзвінка на мобільному */
.callbar{ display:none }
@media (max-width: 720px){
  .callbar{
    display:grid; grid-template-columns:1fr 1fr; gap:1px; position:fixed; bottom:0; left:0; right:0;
    z-index:70; background:var(--line); border-top:1px solid var(--line);
  }
  .callbar a{
    background:var(--ink-2); padding:14px 8px; text-align:center; text-decoration:none;
    font-family:var(--f-display); font-weight:600; font-size:.87rem; color:var(--paper);
  }
  .callbar a.is-primary{ background:var(--green-fill) }
  body{ padding-bottom:54px }
}

/* дрібниці */
.tag{
  display:inline-block; font-family:var(--f-display); font-size:.72rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--green-lt);
  border:1px solid var(--green); border-radius:100px; padding:5px 12px; margin-bottom:16px;
}
.mt0{ margin-top:0 } .mb0{ margin-bottom:0 }
.stack > * + *{ margin-top:22px }

/* --------------------------------------------------------------- ціна чана */
.price-from{
  display:inline-flex; align-items:baseline; gap:8px; margin:0 0 16px;
  font-family:var(--f-display); font-size:1rem; color:var(--muted);
}
.price-from b{ font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem); color:var(--green-lt); font-weight:700 }

.kit__head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:6px }
.kit__head h3{ margin:0 }
.kit__price{
  margin:0; font-family:var(--f-display); font-weight:700; white-space:nowrap;
  font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem); color:var(--green-lt);
}

.tile__price{
  display:inline-block; margin-bottom:8px; padding:4px 10px; border-radius:100px;
  background:var(--green-fill); color:var(--on-green);
  font-family:var(--f-display); font-size:.76rem; font-weight:700;
}

/* --------------------------------------------------------------- «купити від виробника» */
.buy{ max-width:780px }
.buy h2{ font-size:var(--step-2) }
.buy p{ color:var(--muted) }

/* --------------------------------------------------------------- KALUSH EXPO */
.figure--tall img{ aspect-ratio:2/3; object-position:center 30% }
.gal--tall{ grid-template-columns:repeat(auto-fill,minmax(170px,1fr)) }
.gal--tall button{ aspect-ratio:2/3 }
.expo-note{
  margin-top:22px; padding:14px 16px; border-left:3px solid var(--green);
  background:var(--ink-3); color:var(--muted); font-size:.92rem;
}