/* =========================================================
   BABAY — основні стилі
   Класи використовуються в templates/*.html і PHP-шаблонах теми.
   Не перейменовувати. Кольори й розміри — тільки через tokens.css.
   ========================================================= */

/* ---------- база ---------- */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--f-body);
  font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:600;letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
h3,h4{letter-spacing:-.015em}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent-lit);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.num{font-variant-numeric:tabular-nums}

/* мітка / eyebrow */
.label{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-lit);
  display:flex;align-items:center;gap:12px}
.label::before{content:"";width:28px;height:1px;background:currentColor;flex:none}
.label--plain::before{display:none}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-body);font-weight:600;font-size:14.5px;
  padding:14px 22px;border:1px solid var(--text);background:var(--text);color:var(--ground);cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);white-space:nowrap}
.btn:hover{background:var(--accent-lit);border-color:var(--accent-lit)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn--ghost:hover{background:transparent;border-color:var(--text);color:var(--text)}
.btn--sm{padding:10px 16px;font-size:13.5px}
.btn .arr{font-family:var(--f-mono);transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.link{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text);
  border-bottom:1px solid var(--accent);padding-bottom:3px;transition:color .2s}
.link:hover{color:var(--accent-lit)}

/* ---------- шапка ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(22,24,29,.88);backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line-soft)}
.site-header .wrap{display:flex;align-items:center;gap:28px;min-height:72px}
.brand{display:flex;align-items:center;color:var(--text);flex:none}
.brand svg{height:26px;width:auto}
.nav{display:flex;gap:4px;flex:1;min-width:0}
.nav a{padding:8px 12px;font-size:14.5px;color:var(--dim);transition:color .2s;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text)}
.nav a[aria-current="page"]{box-shadow:inset 0 -1px 0 var(--accent-lit)}
.h-util{display:flex;align-items:center;gap:18px;margin-left:auto;flex:none}
.lang{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--mute)}
.lang a{color:var(--mute)}.lang a:hover{color:var(--text)}
.lang [aria-current]{color:var(--text)}
.nav-n,.nav-foot{display:none}
.nav-toggle{display:none;position:relative;background:none;border:0;color:var(--text);width:44px;height:44px;margin-right:-10px;cursor:pointer}
.nav-toggle span:not(.sr-only){position:absolute;left:12px;width:20px;height:1.5px;background:currentColor;transition:transform .25s var(--ease),top .25s var(--ease)}
.nav-toggle span:nth-child(1){top:18px}
.nav-toggle span:nth-child(2){top:25px}
.site-header.is-open .nav-toggle span:nth-child(1){top:21.5px;transform:rotate(45deg)}
.site-header.is-open .nav-toggle span:nth-child(2){top:21.5px;transform:rotate(-45deg)}
@media (max-width:1120px){
  /* панель на весь екран під шапкою; absolute, бо backdrop-filter шапки робить її контейнером і для fixed */
  .nav{display:none;position:absolute;left:0;right:0;top:100%;height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain;
    flex-direction:column;gap:0;background:var(--ground);padding:8px var(--gut) 0;counter-reset:nav}
  .nav > a{display:flex;align-items:baseline;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);color:var(--text);white-space:normal}
  .nav > a::before{counter-increment:nav;content:counter(nav,decimal-leading-zero);font-family:var(--f-mono);font-size:12px;color:var(--accent-lit);width:24px;flex:none}
  .nav-t{font-family:var(--f-display);font-weight:600;font-size:22px;letter-spacing:-.02em;line-height:1.2}
  .nav-n{display:block;margin-left:auto;font-family:var(--f-mono);font-size:12px;color:var(--dim)}
  .nav > a[aria-current="page"]{box-shadow:none}
  .nav > a[aria-current="page"] .nav-t{color:var(--accent-lit)}
  .nav-foot{display:flex;flex-direction:column;gap:14px;margin-top:auto;padding:28px 0 max(20px,env(safe-area-inset-bottom))}
  .nav .nav-foot .btn{justify-content:center;padding:14px 20px;font-size:14.5px;color:var(--ground)}
  .nav .nav-foot .btn:hover{color:var(--ground)}
  .nav-contacts{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;font-family:var(--f-mono);font-size:12px;color:var(--dim)}
  .nav .nav-contacts a{padding:0;font-size:12px;color:var(--dim)}
  .site-header.is-open .nav{display:flex}
  .nav-toggle{display:block}
}
html.nav-open{overflow:hidden}
@media (max-width:560px){ .h-util .btn{display:none} }

/* ---------- хіро головної ---------- */
.hx{--hx-h:clamp(600px,54vw,780px);position:relative;overflow:hidden;background:#000;isolation:isolate;min-height:var(--hx-h);
  display:flex;flex-direction:column;border-bottom:1px solid var(--line)}
.hx-media{position:absolute;top:0;right:0;bottom:0;width:64%;z-index:0}
.hx-photo{width:100%;height:100%;object-fit:cover;object-position:center 45%;display:block}
/* вертикальний контурний знак BABAY біля правого краю */
.hx-mark{position:absolute;top:50%;right:calc(36px + 55px);width:calc(var(--hx-h) * .92);height:auto;max-width:none;
  transform:translate(50%,-50%) rotate(-90deg);opacity:.55;pointer-events:none}
/* затемнення: зліва під текст, згори під шапку, знизу в смугу цифр */
.hx::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg,rgb(22 24 29 / .7) 0,rgb(22 24 29 / 0) 120px),
  linear-gradient(0deg,var(--ground) 0,rgb(22 24 29 / 0) 200px),
  linear-gradient(90deg,var(--ground) 0,var(--ground) 34%,rgb(22 24 29 / .9) 46%,rgb(22 24 29 / 0) 70%)}
.hx-in{position:relative;z-index:2;flex:1;width:100%;display:flex;align-items:center;padding-block:clamp(72px,7vw,104px) 112px}
.hx-copy{max-width:720px}
.hx .label{color:var(--dim);font-size:11.5px;gap:14px}
.hx .label::before{height:2px;background:var(--accent)}
.hx h1{font-size:var(--fs-hero);font-weight:700;line-height:.98;letter-spacing:-.03em;margin-top:32px;max-width:12ch}
.hx h1 span{display:block;color:var(--dim)}
.hx-sub{color:var(--dim);font-size:var(--fs-lead);line-height:1.55;max-width:50ch;margin-top:32px;text-wrap:pretty}
.hx-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:44px}
.hx-acts .btn{padding:15px 24px}
.hx-acts .btn--ghost{border-color:rgb(242 241 237 / .35)}
.hx-foot{position:absolute;z-index:2;left:0;right:0;bottom:36px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.hx-facts{display:flex;gap:28px}
.hx-cap{display:flex;align-items:center;gap:14px}
.hx-cap b{color:var(--text);font-weight:500}
.hx-cap i{width:6px;height:6px;background:var(--accent);flex:none}
@media (max-width:1100px){.hx-cap span{display:none}}
@media (max-width:900px){
  .hx{min-height:0;display:block;background:var(--ground)}
  .hx::before{display:none}
  .hx-media{position:relative;width:100%;height:clamp(300px,88vw,420px);background:#000}
  .hx-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:180px;background:linear-gradient(0deg,var(--ground),rgb(22 24 29 / 0))}
  .hx-mark{top:auto;bottom:120px;right:auto;left:-4%;width:108%;transform:none;opacity:.5}
  .hx-in{margin-top:-56px;padding-block:0 44px}
  .hx .label{font-size:11px}
  .hx h1{margin-top:20px;max-width:none}
  .hx-sub{margin-top:20px}
  .hx-acts{flex-direction:column;gap:10px;margin-top:28px}
  .hx-acts .btn{justify-content:center;padding:14px 20px}
  .hx-foot{position:static;display:block;padding-bottom:44px;margin-top:-16px}
  .hx-facts{gap:20px;font-size:10.5px}
  .hx-cap{position:absolute;top:16px;right:var(--gut);font-size:10px}
  .hx-cap span,.hx-cap i{display:none}
}

/* ---------- смуга доказів ---------- */
.proof{background:var(--ground);border-bottom:1px solid var(--line-soft)}
.proof ul{display:grid;grid-template-columns:repeat(6,1fr)}
.proof li{padding:28px 20px 30px;border-left:1px solid var(--line-soft)}
.proof li:first-child{border-left:0;padding-left:0}
.proof .v{font-family:var(--f-display);font-weight:600;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.proof .l{font-size:13px;color:var(--dim);margin-top:6px;line-height:1.4}
@media (max-width:1000px){.proof ul{grid-template-columns:repeat(3,1fr)}.proof li:nth-child(4){border-left:0;padding-left:0}.proof li{border-top:1px solid var(--line-soft)}.proof li:nth-child(-n+3){border-top:0}}
@media (max-width:560px){.proof ul{grid-template-columns:repeat(2,1fr)}.proof li{border-left:0!important;padding-left:0!important;border-top:1px solid var(--line-soft)!important}.proof li:nth-child(-n+2){border-top:0!important}.proof li:nth-child(even){padding-left:16px!important;border-left:1px solid var(--line-soft)!important}}

/* ---------- секції ---------- */
.sec{padding-block:var(--sec)}
.sec + .sec{border-top:1px solid var(--line-soft)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px 64px;align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.sec-head h2{font-size:var(--fs-h2);margin-top:18px;max-width:18ch}
.sec-head p{color:var(--dim);font-size:var(--fs-lead);max-width:48ch}
.sec-head .aside{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}}

/* світла смуга (Paper) */
.band-paper{background:var(--paper);color:var(--on-paper)}
.band-paper .label{color:var(--accent-deep)}
.band-paper .sec-head p,.band-paper .dim{color:var(--on-paper-dim)}
.band-paper .btn{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.band-paper .btn:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.band-paper .btn--ghost{background:transparent;color:var(--ink);border-color:var(--paper-line)}
.band-paper .btn--ghost:hover{border-color:var(--ink);color:var(--ink);background:transparent}
.band-paper .link{color:var(--ink);border-color:var(--accent)}
.band-paper :focus-visible{outline-color:var(--accent-deep)}

/* ---------- компанія (split) ---------- */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px)}
.about h2{font-size:var(--fs-h2);margin-top:18px}
.about .cols{display:grid;gap:20px;font-size:var(--fs-lead);line-height:1.55}
.about .facts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--paper-line);margin-top:36px}
.about .facts div{padding:18px 0;border-bottom:1px solid var(--paper-line)}
.about .facts div:nth-child(odd){padding-right:20px}
.about .facts div:nth-child(even){padding-left:20px;border-left:1px solid var(--paper-line)}
.about .facts dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-paper-dim)}
.about .facts dd{margin:6px 0 0;font-weight:600;font-size:15.5px}
@media (max-width:860px){.about{grid-template-columns:1fr}}

/* ---------- виробничий цикл ---------- */
.cycle{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.cycle > li{padding:28px 24px 8px 0;position:relative}
.cycle > li + li{padding-left:24px;border-left:1px solid var(--line-soft)}
.cycle .st{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--accent-lit)}
.cycle h3{font-size:var(--fs-h3);margin-top:14px}
.cycle ul{margin-top:18px;display:grid;gap:10px}
.cycle ul li{font-size:14.5px;color:var(--dim);padding-left:18px;position:relative;line-height:1.45}
.cycle ul li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--accent-lit)}
.cycle > li::before{content:"";position:absolute;top:-1px;left:0;width:40px;height:2px;background:var(--accent-lit)}
.cycle > li + li::before{left:24px}
.cycle-foot{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between;margin-top:48px;
  padding-top:28px;border-top:1px solid var(--line-soft);color:var(--dim)}
.cycle-foot strong{color:var(--text);font-weight:600}
@media (max-width:980px){.cycle{grid-template-columns:repeat(2,minmax(0,1fr))}.cycle > li:nth-child(3){padding-left:0;border-left:0}.cycle > li:nth-child(3)::before{left:0}.cycle > li:nth-child(n+3){border-top:1px solid var(--line-soft);margin-top:12px}}
@media (max-width:560px){.cycle{grid-template-columns:1fr}.cycle > li{padding-left:0!important;border-left:0!important}.cycle > li::before{left:0!important}.cycle > li + li{border-top:1px solid var(--line-soft);margin-top:12px}}

/* ---------- картка комплексу ---------- */
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.pgrid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.pgrid--4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.pgrid,.pgrid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:580px){.pgrid,.pgrid--4{grid-template-columns:1fr}}
.pcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-soft);transition:border-color .25s var(--ease)}
.pcard:hover{border-color:var(--line)}
.pcard-media{position:relative;background:var(--stage);aspect-ratio:1600/955;overflow:hidden}
.pcard-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pcard:hover .pcard-media img{transform:scale(1.035)}
.pcard-badge{position:absolute;left:14px;top:14px;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text);background:rgba(10,11,15,.72);border:1px solid var(--line);padding:5px 8px;backdrop-filter:blur(6px)}
.pcard-body{display:flex;flex-direction:column;gap:6px;padding:20px 22px 22px;flex:1}
.pcard-dir{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.pcard h3{font-size:19px;letter-spacing:-.01em;margin-top:2px}
.pcard-class{font-size:14px;color:var(--dim)}
.pcard-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:auto;padding-top:18px;border-top:1px solid var(--line-soft)}
.pcard-body .pcard-specs{margin-top:16px}
.pcard-specs dd{margin:0;font-family:var(--f-mono);font-size:15px;font-variant-numeric:tabular-nums;color:var(--text);line-height:1.2}
.pcard-specs dt{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:5px}
.pcard-specs > div{display:flex;flex-direction:column-reverse;justify-content:flex-end;min-width:0}

/* ---------- напрями (головна) ---------- */
.dirs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.dirs a{background:var(--surface);padding:28px 28px 26px;display:flex;flex-direction:column;min-height:240px;transition:background .2s var(--ease)}
.dirs a:hover{background:var(--surface-2)}
.dirs-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.dirs-n{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--accent-lit)}
.dirs svg{width:44px;height:44px;flex:none;color:var(--text);opacity:.85}
.dirs .t{font-family:var(--f-display);font-weight:600;font-size:20px;line-height:1.2;margin-top:36px}
.dirs .d{font-size:14.5px;color:var(--dim);line-height:1.5;margin-top:10px}
.dirs .go{margin-top:auto;padding-top:28px;font-size:13.5px;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;transition:text-decoration-color .2s}
.dirs a:hover .go{text-decoration-color:var(--accent-lit)}
@media (max-width:1100px){.dirs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .dirs{grid-template-columns:minmax(0,1fr)}
  .dirs a{display:grid;grid-template-columns:36px minmax(0,1fr) auto;column-gap:14px;align-items:start;min-height:0;padding:18px 20px}
  .dirs-top{display:contents}
  .dirs svg{width:36px;height:36px;grid-row:1 / span 2;grid-column:1}
  .dirs-n{grid-column:3;grid-row:1;font-size:12px;letter-spacing:.06em;white-space:nowrap}
  .dirs .t{grid-column:2;grid-row:1;font-size:17px;margin-top:0}
  .dirs .d{grid-column:2;grid-row:2;font-size:13.5px;margin-top:6px;line-height:1.45}
  .dirs .go{display:none}
}

/* ---------- спроможності ---------- */
.caps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--paper-line)}
.caps > div{padding:30px 32px 34px 0;border-bottom:1px solid var(--paper-line)}
.caps > div:nth-child(even){padding-left:32px;padding-right:0;border-left:1px solid var(--paper-line)}
.caps h3{font-size:var(--fs-h3)}
.caps p{color:var(--on-paper-dim);margin-top:12px;max-width:50ch}
.caps .tag{display:inline-block;margin-top:16px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--accent-deep);border:1px solid var(--paper-line);padding:4px 8px;margin-right:6px}
@media (max-width:760px){.caps{grid-template-columns:1fr}.caps > div{padding-left:0!important;border-left:0!important}}

/* ---------- канали постачання ---------- */
.channels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.channel{background:var(--surface);border:1px solid var(--line-soft);padding:28px 26px;display:flex;flex-direction:column;gap:12px}
.channel .who{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-lit)}
.channel h3{font-size:20px}
.channel p{color:var(--dim);font-size:15px}
.channel .link{margin-top:auto;align-self:flex-start}
@media (max-width:900px){.channels{grid-template-columns:1fr}}

/* ---------- заявка ---------- */
.request{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.request h2{font-size:var(--fs-h2);margin-top:18px}
.request .lead{color:var(--dim);font-size:var(--fs-lead);margin-top:20px;max-width:40ch}
.contact-list{margin-top:36px;display:grid;gap:18px}
.contact-list dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.contact-list dd{margin:4px 0 0;font-family:var(--f-display);font-size:18px;font-weight:500;letter-spacing:-.01em;user-select:all}
.form{background:var(--surface);border:1px solid var(--line-soft);padding:clamp(22px,3vw,36px);display:grid;grid-template-columns:1fr 1fr;gap:18px 16px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field--full{grid-column:1/-1}
.field label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.field input,.field select,.field textarea{font:inherit;font-size:15.5px;color:var(--text);background:var(--ground);border:1px solid var(--line);
  padding:13px 14px;border-radius:0;width:100%;transition:border-color .2s}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent-lit)}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;margin-top:6px}
.form-foot small{color:var(--mute);font-size:12.5px;max-width:42ch}
.form-ok{grid-column:1/-1;border-left:2px solid var(--accent-lit);padding:10px 16px;color:var(--text)}
.form-err{grid-column:1/-1;border-left:2px solid var(--danger);padding:10px 16px;color:var(--text)}
.field [aria-invalid="true"]{border-color:var(--danger)}
.hp{position:absolute;left:-9999px}
@media (max-width:900px){.request{grid-template-columns:1fr}}
@media (max-width:560px){.form{grid-template-columns:1fr}}

/* ---------- підвал ---------- */
.site-footer{background:var(--stage);border-top:1px solid var(--line-soft);padding-block:clamp(56px,7vw,88px) 36px;color:var(--dim);font-size:14.5px}
.f-top{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px}
.f-brand svg{height:30px;width:auto;color:var(--text)}
.f-brand p{margin-top:20px;max-width:32ch}
.f-legend{font-family:var(--f-mono);font-size:12px;color:var(--mute);margin-top:18px;letter-spacing:.04em}
.site-footer h2{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text);margin-bottom:16px}
.site-footer li{margin-bottom:10px}
.site-footer a:hover{color:var(--text)}
.f-bot{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;margin-top:56px;padding-top:24px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--mute)}
@media (max-width:900px){.f-top{grid-template-columns:1fr 1fr}.f-brand{grid-column:1/-1}}

/* =========================================================
   КАТАЛОГ
   ========================================================= */
.crumbs{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;color:var(--mute);display:flex;flex-wrap:wrap;gap:8px;padding-top:28px}
.crumbs a:hover{color:var(--text)}
.crumbs span[aria-hidden]{opacity:.5}
.crumbs [aria-current]{color:var(--dim)}
.page-head{padding-block:clamp(28px,4vw,48px) clamp(36px,5vw,56px);border-bottom:1px solid var(--line-soft)}
.page-head h1{font-size:var(--fs-h1);margin-top:22px}
.page-head p{color:var(--dim);font-size:var(--fs-lead);max-width:56ch;margin-top:18px}

.filters{display:flex;flex-wrap:wrap;gap:20px 40px;padding-block:26px;border-bottom:1px solid var(--line-soft)}
.fgroup{display:flex;flex-direction:column;gap:10px;min-width:0}
.fgroup > span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:13.5px;padding:7px 13px;border:1px solid var(--line);color:var(--dim);transition:.2s;white-space:nowrap}
.chip:hover{color:var(--text);border-color:var(--mute)}
.chip[aria-current="true"]{background:var(--text);border-color:var(--text);color:var(--ground)}
.chip .c{font-family:var(--f-mono);font-size:11px;color:var(--mute);margin-left:6px}
.chip[aria-current="true"] .c{color:var(--on-paper-dim)}
.found{font-family:var(--f-mono);font-size:12.5px;color:var(--dim);padding-block:22px}
.found b{color:var(--text);font-weight:500}
.cat-group + .cat-group{margin-top:clamp(56px,7vw,88px)}
.cat-group-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.cat-group-head h2{font-size:clamp(22px,2.4vw,30px)}
.cat-group-head h2 small{font-family:var(--f-mono);font-size:13px;color:var(--accent-lit);font-weight:400;letter-spacing:0;margin-left:10px;vertical-align:middle}
.cat-group-head p{color:var(--dim);font-size:15px;max-width:60ch}

/* порівняльна таблиця */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line-soft);background:var(--surface)}
.tbl{border-collapse:collapse;width:100%;min-width:820px;font-size:14px;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
.tbl thead th{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:500;background:var(--surface-2)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--surface-2)}
.tbl td:first-child a{font-family:var(--f-display);font-weight:600;font-size:13.5px;letter-spacing:-.01em}
.tbl td:first-child a:hover{color:var(--accent-lit)}
.tbl td{font-family:var(--f-mono);color:var(--dim)}
.tbl td:first-child{font-family:var(--f-body);color:var(--text)}

/* =========================================================
   СТОРІНКА КОМПЛЕКСУ
   ========================================================= */
/* хіро: інформація зліва, фото до правого краю екрана */
.ph{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:20px}
.ph-info{padding:clamp(40px,4.5vw,56px) clamp(32px,4.5vw,64px) clamp(40px,4.5vw,56px) max(var(--gut),calc((100vw - var(--max)) / 2 + var(--gut)))}
.ph-tags{display:flex;flex-wrap:wrap;gap:8px}
.ph-tags span{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px dashed var(--line);color:var(--dim);padding:6px 10px}
.ph-tags span.ok{border-style:solid;color:var(--text)}
.ph-tags span.ok::before{content:"";width:6px;height:6px;background:var(--accent);flex:none}
.ph h1{font-size:clamp(38px,4.6vw,64px);font-weight:700;letter-spacing:-.03em;line-height:1;margin-top:clamp(24px,3vw,40px)}
.p-class{font-size:var(--fs-lead);color:var(--dim);margin-top:14px}
.p-lead{margin-top:18px;font-size:15.5px;color:var(--dim);max-width:56ch}
.ph-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:32px;max-width:576px}
.ph-specs > div{background:var(--surface);padding:18px 20px 16px;display:flex;flex-direction:column-reverse;justify-content:flex-end}
.ph-specs dd{margin:0;font-family:var(--f-mono);font-size:clamp(18px,1.6vw,21px);color:var(--text);font-variant-numeric:tabular-nums}
.ph-specs dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:10px}
.p-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.p-acts .btn{padding:15px 22px}
.p-note{font-family:var(--f-mono);font-size:12px;color:var(--mute);margin-top:22px}
.ph-stage{position:relative;margin:0;background:var(--stage);border-left:1px solid var(--line);min-height:100%;overflow:hidden}
.ph-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-stage figcaption{position:absolute;left:24px;bottom:22px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
@media (max-width:960px){
  .ph{grid-template-columns:minmax(0,1fr)}
  .ph-stage{order:-1;border-left:0;border-bottom:1px solid var(--line);aspect-ratio:1600/955;min-height:0}
  .ph-info{padding:28px var(--gut) 40px}
  .ph-specs{max-width:none}
  .p-acts .btn{flex:1 1 auto;justify-content:center}
}

/* секції: заголовок зліва, зміст справа */
.p-body{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,72px);align-items:start}
.p-side h2{font-size:clamp(24px,2.4vw,30px);margin-top:18px}
.p-side .dim{color:var(--dim);margin-top:16px;max-width:38ch;font-size:15px}
@media (min-width:861px){.p-side{position:sticky;top:104px}}
.spec{width:100%;border-collapse:collapse;font-size:15px;border:1px solid var(--line)}
.spec thead th{text-align:left;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:500;
  background:var(--surface-2);padding:14px 24px;border-bottom:1px solid var(--line)}
.spec .spec-g th{text-align:left;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-lit);font-weight:500;
  padding:22px 24px 10px;background:var(--surface)}
.spec td{padding:15px 24px;border-top:1px solid var(--line-soft);vertical-align:top;background:var(--surface)}
.spec td:first-child{color:var(--dim);width:50%}
.spec td:last-child{font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--text)}
@media (max-width:860px){.p-body{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.spec td,.spec thead th{padding-inline:16px}.spec .spec-g th{padding-inline:16px}}

.kit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.kit li{background:var(--surface);padding:20px 20px 26px;font-size:15px;display:flex;gap:14px;align-items:baseline}
.kit .i{font-family:var(--f-mono);font-size:12px;color:var(--accent-lit)}
@media (max-width:640px){.kit{grid-template-columns:minmax(0,1fr)}}

/* сумісність: компактні картки */
.compat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.compat-i{background:var(--surface);padding:16px;display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:start;transition:background .2s var(--ease)}
.compat-i:hover{background:var(--surface-2)}
.compat-i img{width:72px;height:72px;object-fit:cover;background:var(--stage)}
.compat-i h3{font-size:16px;letter-spacing:-.01em}
.compat-i p{font-size:13.5px;color:var(--dim);margin-top:4px}
.compat-i dl{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:14px}
.compat-i dl > div{display:flex;flex-direction:column-reverse}
.compat-i dd{margin:0;font-family:var(--f-mono);font-size:13px}
.compat-i dt{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:4px}
.compat:has(> :only-child){grid-template-columns:minmax(0,1fr)}
@media (max-width:640px){.compat{grid-template-columns:minmax(0,1fr)}}

/* смуга «зроблено / перевірено / супровід» */
.made{background:var(--surface-2);border-block:1px solid var(--line)}
.made-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-block:clamp(48px,5vw,72px)}
.made-in > div{padding:4px clamp(20px,2.5vw,32px) 0;border-left:1px solid var(--line);display:flex;flex-direction:column}
.made-in > div:first-child{border-left:0;padding-left:0}
.made-in h3{font-size:clamp(20px,1.8vw,24px);margin-top:16px}
.made-in p:not(.label){color:var(--dim);font-size:15px;margin-top:12px;max-width:44ch}
.made-in .link{align-self:flex-start;margin-top:auto;padding-top:20px}
@media (max-width:860px){.made-in{grid-template-columns:minmax(0,1fr);gap:32px}.made-in > div{border-left:0;padding:0}}

/* як придбати: три канали */
.buy3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.buy3 article{background:var(--surface);padding:26px 24px 28px;display:flex;flex-direction:column;gap:10px}
.buy3 .st{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.buy3 .st::before{content:"";width:6px;height:6px;background:var(--accent)}
.buy3 .who{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-lit)}
.buy3 h3{font-family:var(--f-body);font-size:18px;font-weight:600;letter-spacing:0}
.buy3 p:not(.st){color:var(--dim);font-size:14.5px}
.buy3 .link{align-self:flex-start;margin-top:auto;padding-top:10px}
@media (max-width:1100px){.buy3{grid-template-columns:minmax(0,1fr)}}

.proofline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.proofline a{display:flex;flex-direction:column;gap:10px;padding:26px 0 0;border-top:1px solid var(--line)}
.proofline h3{font-size:18px}
.proofline p{color:var(--dim);font-size:14.5px}
.proofline .link{align-self:flex-start;margin-top:8px}
@media (max-width:860px){.proofline{grid-template-columns:1fr}}

/* ---------- смуга-заклик ---------- */
.cta-band{background:var(--accent);color:var(--ground)} /* світлий текст на Orange не проходить AA (2.7:1), темний — 5.8:1 */
.cta-band .wrap{display:flex;flex-wrap:wrap;gap:28px 48px;align-items:center;justify-content:space-between;padding-block:clamp(44px,5vw,64px)}
.cta-band h2{font-size:clamp(24px,2.8vw,34px);max-width:22ch}
.cta-band p{color:var(--ground);margin-top:10px;max-width:52ch}
.cta-band .btn{background:var(--ground);border-color:var(--ground);color:var(--paper)}
.cta-band .btn:hover{background:var(--stage);border-color:var(--stage)}
.cta-band .btn--ghost{background:transparent;color:var(--ground);border-color:rgba(22,24,29,.4)}
.cta-band .btn--ghost:hover{border-color:var(--ground);background:transparent;color:var(--ground)}
.cta-band :focus-visible{outline-color:var(--ground)}
.cta-band .acts{display:flex;flex-wrap:wrap;gap:10px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- варіанти сітки каталогу за кількістю ---------- */
.pgrid--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.pgrid--5 .pcard-body{padding:18px 18px 20px}
.pgrid--5 .pcard h3{font-size:17px}
.pgrid--5 .pcard-specs{gap:8px}
.pgrid--5 .pcard-specs dd{font-size:13.5px}
.pgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1240px){.pgrid--5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.pgrid--5,.pgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:580px){.pgrid--5,.pgrid--2{grid-template-columns:1fr}}
/* одна картка в групі — горизонтальна */
.pcard--wide{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.pcard--wide .pcard-body{padding:clamp(22px,3vw,40px);justify-content:center}
.pcard--wide h3{font-size:clamp(22px,2.2vw,28px)}
.pcard--wide .pcard-specs{margin-top:24px}
@media (max-width:760px){.pcard--wide{grid-template-columns:1fr}}
.keyspecs dd{white-space:nowrap;font-size:clamp(20px,2.3vw,32px)}
/* у 5 колонках — дві ключові характеристики, щоб значення не переносились */
.pgrid--5 .pcard-specs{grid-template-columns:repeat(2,minmax(0,1fr))}
.pgrid--5 .pcard-specs > div:nth-child(n+3){display:none}
@media (max-width:1240px){.pgrid--5 .pcard-specs{grid-template-columns:repeat(3,minmax(0,1fr))}.pgrid--5 .pcard-specs > div:nth-child(3){display:flex}}

/* =========================================================
   КОРПОРАТИВНІ СТОРІНКИ
   ========================================================= */
.page-head--split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:24px 64px;align-items:end}
.page-head--split h1{max-width:16ch}
.page-head--split > p{margin-top:0}
@media (max-width:860px){.page-head--split{grid-template-columns:1fr}}

/* цифри (варіант .proof усередині сторінки) */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats > div{padding:26px 20px 28px;display:flex;flex-direction:column-reverse;justify-content:flex-end}
.stats > div + div{border-left:1px solid var(--line-soft)}
.stats > div:first-child{padding-left:0}
.stats dd{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(26px,3vw,40px);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.stats dt{font-size:13.5px;color:var(--dim);margin-top:10px;line-height:1.4}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stats > div:nth-child(3){padding-left:0;border-left:0}.stats > div:nth-child(n+3){border-top:1px solid var(--line-soft)}}

/* 13 операцій: велика цифра зліва, операції рядками справа */
.ops-wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,72px);align-items:start}
.ops-side{position:sticky;top:104px}
.ops-n{font-family:var(--f-display);font-weight:700;font-size:clamp(96px,11vw,168px);line-height:.85;letter-spacing:-.05em}
.ops-meta{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:22px}
.ops-meta::after{content:"";display:block;width:48px;height:2px;background:var(--accent);margin-top:28px}
.ops-out{margin-top:40px;padding:22px 22px 24px;background:var(--surface);border:1px solid var(--line);max-width:360px}
.ops-out span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-lit)}
.ops-out h3{font-size:17px;margin-top:10px}
.ops-out p{font-size:14px;color:var(--dim);margin-top:8px}
.ops{border-top:1px solid var(--line)}
.ops li{display:grid;grid-template-columns:minmax(0,1.3fr) 64px minmax(0,2.6fr) minmax(0,3fr);gap:16px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.ops .st{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.ops .i{font-family:var(--f-mono);font-size:14px;color:var(--accent-lit)}
.ops h3{font-size:clamp(17px,1.5vw,20px);letter-spacing:-.01em}
.ops p{font-size:14.5px;color:var(--dim);line-height:1.45}
.ops-foot{margin-top:28px;color:var(--dim);font-size:15px;max-width:70ch}
.ops-foot strong{color:var(--text);font-weight:600}
@media (max-width:1100px){.ops li{grid-template-columns:48px minmax(0,1fr);row-gap:4px}.ops .st{grid-column:1 / -1}.ops .st:empty{display:none}.ops p{grid-column:2}}
@media (max-width:860px){.ops-wrap{grid-template-columns:minmax(0,1fr)}.ops-side{position:static}.ops-n{font-size:96px}}

/* фото виробу на всю ширину */
.photo-band{margin:0;position:relative;background:var(--stage);border-block:1px solid var(--line);height:clamp(260px,32vw,460px);overflow:hidden}
.photo-band img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.photo-band figcaption{position:absolute;left:0;right:0;bottom:22px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* картки з великою цифрою */
.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.figs > div{background:var(--surface);padding:28px 28px 30px}
.figs .fig{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(34px,3.4vw,46px);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.figs h3{font-family:var(--f-body);font-size:16px;font-weight:600;letter-spacing:0;margin-top:clamp(28px,3vw,44px)}
.figs p{color:var(--dim);font-size:14.5px;margin-top:10px}
.band-paper .figs{background:var(--paper-line);border-color:var(--paper-line)}
.band-paper .figs > div{background:var(--paper)}
@media (max-width:1100px){.figs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.figs{grid-template-columns:minmax(0,1fr)}}

/* смуга цифр усередині сторінки */
.proof--band{border-top:1px solid var(--line-soft);margin-top:clamp(32px,4vw,56px)}
@media (min-width:1001px){.proof--band ul{grid-template-columns:repeat(var(--n,6),minmax(0,1fr))}}

/* процес (послідовність кроків) */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--gap)}
.steps li{padding:24px 0 30px;border-top:1px solid var(--line);position:relative}
.steps li::before{content:"";position:absolute;left:0;top:-1px;width:32px;height:2px;background:var(--accent-lit)}
.steps .i{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--accent-lit)}
.steps h3{font-size:18px;margin-top:12px}
.steps p{font-size:14.5px;color:var(--dim);margin-top:8px;max-width:34ch}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* текстові пункти в 3 колонки (принципи, напрями R&D, сервіс) */
.points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.points--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.points--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.points > div{padding-top:22px;border-top:1px solid var(--line)}
.band-paper .points > div{border-top-color:var(--paper-line)}
.points h3{font-size:var(--fs-h3)}
.points p{color:var(--dim);margin-top:12px;font-size:15px}
.band-paper .points p{color:var(--on-paper-dim)}
.points .k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-lit);margin-bottom:12px;display:block}
.band-paper .points .k{color:var(--accent-deep)}
@media (max-width:980px){.points--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.points{grid-template-columns:1fr}.points--2{grid-template-columns:1fr}}
@media (max-width:560px){.points--4{grid-template-columns:1fr}}

/* таблиця випробувань / кодифікації */
.rows{width:100%;border-collapse:collapse;font-size:15px}
.rows th{text-align:left;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:500;padding:0 16px 12px 0;border-bottom:1px solid var(--line)}
.rows td{padding:16px 16px 16px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.rows td:first-child{font-weight:600;width:42%}
.rows td:last-child{color:var(--dim)}
.band-paper .rows th,.band-paper .rows td:last-child{color:var(--on-paper-dim)}
.band-paper .rows th,.band-paper .rows td{border-color:var(--paper-line)}

/* документи */
.docs{border-top:1px solid var(--line)}
.doc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 32px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line-soft)}
.doc h3{font-size:19px}
.doc p{color:var(--dim);font-size:14.5px;margin-top:6px}
.doc .state{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-lit);white-space:nowrap}
@media (max-width:620px){.doc{grid-template-columns:1fr}}

/* канали закупівлі — детально */
.chan-detail{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px 64px;padding-block:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.chan-detail:first-child{border-top:0;padding-top:0}
.chan-detail h2{font-size:clamp(24px,2.6vw,34px);margin-top:14px}
.chan-detail dl{display:grid;grid-template-columns:auto 1fr;gap:12px 24px;margin:0}
.chan-detail dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding-top:4px}
.chan-detail dd{margin:0}
.chan-detail .note{grid-column:1/-1;color:var(--dim);margin-top:8px}
@media (max-width:860px){.chan-detail{grid-template-columns:1fr}.chan-detail dl{grid-template-columns:1fr}.chan-detail dt{padding-top:10px}}

/* рішення за завданням */
.task + .task{margin-top:clamp(56px,7vw,88px)}
.task-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 48px;align-items:end;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.task-head h2{font-size:clamp(22px,2.4vw,30px)}
.task-head p{color:var(--dim)}
@media (max-width:760px){.task-head{grid-template-columns:1fr}}

/* контакти */
.contact-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.ccard{background:var(--surface);border:1px solid var(--line-soft);padding:28px 26px;display:flex;flex-direction:column;gap:10px}
.ccard .who{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-lit)}
.ccard h2{font-size:20px}
.ccard p{color:var(--dim);font-size:14.5px}
.ccard .v{font-family:var(--f-display);font-weight:500;font-size:17px;letter-spacing:-.01em;margin-top:auto;padding-top:14px;user-select:all}
.ccard .v + .v{margin-top:0;padding-top:4px}
@media (max-width:900px){.contact-cards{grid-template-columns:1fr}}

/* примітка-пояснення */
.aside-note{border-left:2px solid var(--accent);padding:4px 0 4px 18px;color:var(--dim);max-width:70ch;font-size:15px}
.band-paper .aside-note{color:var(--on-paper-dim)}
.band-paper .stats dt{color:var(--on-paper-dim)}

/* вакансії */
.jobs{border-top:1px solid var(--line)}
.job{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 32px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line-soft);transition:background .2s}
.job:hover h3{color:var(--accent-lit)}
.job h3{font-size:20px;transition:color .2s}
.job p{color:var(--dim);font-size:14px;margin-top:6px}
.job .meta{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}

/* новини */
.ngrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.ncard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-soft);transition:border-color .25s}
.ncard:hover{border-color:var(--line)}
.ncard-media{aspect-ratio:16/10;background:var(--stage);overflow:hidden}
.ncard-media img{width:100%;height:100%;object-fit:cover}
.ncard-body{padding:22px;display:flex;flex-direction:column;gap:10px}
.ncard time{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;color:var(--accent-lit)}
.ncard h3{font-size:18px;line-height:1.25}
.ncard p{color:var(--dim);font-size:14.5px}
.ncard--lead{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.ncard--lead .ncard-media{aspect-ratio:auto;min-height:320px}
.ncard--lead .ncard-body{padding:clamp(24px,3vw,44px);justify-content:center}
.ncard--lead h3{font-size:clamp(22px,2.4vw,30px)}
@media (max-width:900px){.ngrid{grid-template-columns:1fr 1fr}.ncard--lead{grid-template-columns:1fr}.ncard--lead .ncard-media{min-height:0;aspect-ratio:16/10}}
@media (max-width:580px){.ngrid{grid-template-columns:1fr}}
.pager{display:flex;gap:6px;margin-top:40px}
.pager a,.pager span{font-family:var(--f-mono);font-size:13px;min-width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);color:var(--dim)}
.pager [aria-current]{background:var(--text);color:var(--ground);border-color:var(--text)}

/* стаття */
.article-head{max-width:860px;padding-block:clamp(28px,4vw,48px) clamp(28px,4vw,40px)}
.article-head time{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--accent-lit)}
.article-head h1{font-size:clamp(30px,4vw,50px);margin-top:16px}
.article-head .lead{font-size:var(--fs-lead);color:var(--dim);margin-top:18px;max-width:60ch}
.article-cover{background:var(--stage);aspect-ratio:21/9;overflow:hidden;margin:0}
.article-cover img{width:100%;height:100%;object-fit:cover}
.prose{max-width:720px;margin-inline:auto;padding-block:clamp(40px,5vw,64px);font-size:17px;line-height:1.7}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(22px,2.4vw,28px);margin-top:1.8em}
.prose h3{font-size:19px;margin-top:1.5em}
.prose a{color:var(--accent-lit);text-decoration:underline;text-underline-offset:3px}
.prose ul{list-style:none;padding:0}
.prose ul li{padding-left:22px;position:relative}
.prose ul li + li{margin-top:.5em}
.prose ul li::before{content:"";position:absolute;left:0;top:.8em;width:10px;height:1px;background:var(--accent-lit)}
.prose blockquote{margin:1.6em 0;padding-left:22px;border-left:2px solid var(--accent);font-family:var(--f-display);font-size:20px;line-height:1.35;letter-spacing:-.01em}
.prose figure{margin:1.6em 0}
.prose figcaption{font-family:var(--f-mono);font-size:12px;color:var(--mute);margin-top:10px}
.share{max-width:720px;margin-inline:auto;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding-block:24px;border-top:1px solid var(--line-soft)}

/* 404 */
.nf{min-height:60vh;display:grid;align-content:center;padding-block:var(--sec)}
.nf .code{font-family:var(--f-display);font-weight:700;font-size:clamp(96px,18vw,220px);line-height:.85;letter-spacing:-.06em;color:var(--surface-2)}
.nf h1{font-size:var(--fs-h2);margin-top:12px}
.nf p{color:var(--dim);margin-top:14px;max-width:48ch}
.nf .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.steps--4{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps--4{grid-template-columns:1fr}}
/* 4 колонки на широкому — дві характеристики */
@media (min-width:1101px){.pgrid--4 .pcard-specs{grid-template-columns:repeat(2,minmax(0,1fr))}.pgrid--4 .pcard-specs > div:nth-child(n+3){display:none}}
/* ключова характеристика-текст (не число): «Бездротовий», «БпЛА · НРК» */
.keyspecs dd.is-text{white-space:normal;font-size:clamp(18px,1.7vw,24px);letter-spacing:-.015em;overflow-wrap:anywhere}
/* склад поставки — список у дві колонки без «порожніх клітинок» */
.kit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;background:none;border:0;border-top:1px solid var(--line)}
.kit li{background:none;padding:14px 0 14px 22px;border-bottom:1px solid var(--line-soft);position:relative;font-size:15px}
.kit li::before{content:"";position:absolute;left:0;top:1.35em;width:10px;height:1px;background:var(--accent-lit)}
@media (max-width:560px){.kit{grid-template-columns:1fr}}