/* Layout: concrete-grey ground, product-green steel accents, dark laminated-plywood bands; drawing-style dimension details in mono. */
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 700; font-display: optional; src: url("/fonts/golos-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 700; font-display: optional; src: url("/fonts/golos-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: optional; src: url("/fonts/jbmono-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: optional; src: url("/fonts/jbmono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500 800; font-display: optional; src: url("/fonts/unbounded-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500 800; font-display: optional; src: url("/fonts/unbounded-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --concrete: #e8ebe6;
  --paper: #f7f8f5;
  --ink: #16201a;
  --steel: #56615a;
  --line: #cdd3cc;
  --formi: #0f7a3c;
  --formi-deep: #11612a;
  --formi-tint: #dcefdf;
  --ply: #2a211c;
  --ply-2: #3a2e27;
  --ply-fg: #efe9e3;
  --ply-muted: #b9ada3;
  --signal: #f2b705;
  --viber: #6550e0;
  --tg: #16729e;
  --danger: #b3261e;

  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-body: "Golos Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --s1: .5rem; --s2: .75rem; --s3: 1rem; --s4: 1.5rem; --s5: 2rem; --s6: 3rem; --s7: 4.5rem;
  --r: 4px;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--f-body);
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--formi-deep); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [role="tab"]:focus-visible {
  outline: 3px solid var(--signal); outline-offset: 2px;
}
h1, h2, h3, h4 { font-family: var(--f-display); line-height: 1.12; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: clamp(1.875rem, 3.4vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.375rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }
h4 { font-size: 1.0625rem; font-weight: 700; }
p { margin: 0; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--signal); color: var(--ink); padding: 8px 12px; }

.eyebrow {
  font: 600 .8125rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .12em;
  color: var(--formi-deep); margin-bottom: var(--s3);
  display: inline-flex; align-items: center; gap: .6em;
}
.eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; }
.eyebrow--light { color: #8fd49e; }
.sub { color: var(--steel); max-width: 62ch; margin-top: var(--s3); }
.fine { font-size: .8125rem; color: var(--steel); line-height: 1.5; }
.todo { background: #fff3c4; }

/* buttons */
.btn {
  --bg: var(--ink); --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 1.4em; border: 2px solid var(--bg); border-radius: var(--r);
  background: var(--bg); color: var(--fg); font: 600 1rem/1 var(--f-body); text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { --bg: var(--formi); }
.btn--primary:hover { --bg: var(--formi-deep); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--viber { --bg: var(--viber); }
.btn--tg { --bg: var(--tg); }
.btn--sm { min-height: 38px; padding: 0 1em; font-size: .9375rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); }
.top__row { display: flex; align-items: center; gap: var(--s4); min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: .55rem; color: var(--formi); text-decoration: none; }
.logo__img { height: 44px; width: auto; }
.logo--foot .logo__img { height: 52px; }
.nav { display: flex; gap: var(--s4); margin-left: auto; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: .9375rem; }
.nav a:hover { color: var(--formi-deep); }
.top__contact { display: flex; align-items: center; gap: var(--s3); }
.top__phone { font: 600 .9375rem var(--f-mono); color: var(--ink); text-decoration: none; white-space: nowrap; }

/* hero */
.hero { background: var(--concrete); position: relative; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s6); align-items: center; padding-block: var(--s6) var(--s7); }
.hero__text { min-width: 0; }
.hero__lead { font-size: 1.1875rem; color: var(--steel); margin-top: var(--s4); max-width: 46ch; }
.hero__facts { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.hero__facts li { padding: var(--s3) var(--s3) 0 0; display: grid; gap: .25rem; }
.hero__facts li + li { padding-left: var(--s3); border-left: 1px solid var(--line); }
.hero__facts b { font-size: clamp(1.375rem, 2.4vw, 1.875rem); font-weight: 600; color: var(--formi-deep); }
.hero__facts span { font-size: .875rem; color: var(--steel); line-height: 1.35; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.hero__note { font-size: .875rem; color: var(--steel); margin-top: var(--s2); }
.hero__media { margin: 0; position: relative; }
.hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); box-shadow: 0 30px 60px -30px rgba(22, 32, 26, .45); }
.hero__caption { font-size: .75rem; color: var(--steel); margin-top: var(--s2); text-transform: uppercase; letter-spacing: .06em; }

/* perforated steel flange divider (echoes the panel frame holes) */
.flange {
  height: 22px; background-color: var(--formi);
  background-image: radial-gradient(circle at 50% 50%, var(--paper) 0 4px, transparent 4.5px);
  background-size: 40px 22px; background-position: 20px 0;
}

/* sections */
.section { padding-block: var(--s7); }
.section--concrete { background: var(--concrete); }
.section--ply { background: var(--ply); color: var(--ply-fg); }
.section--ply .fine, .section--ply p { color: var(--ply-muted); }
.section--ply h2 { color: var(--ply-fg); }

/* pains */
.pains { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s5); }
.pain { padding: var(--s4) var(--s3) var(--s3); border-top: 3px solid var(--danger); background: var(--concrete); }
.pain h3 { font-size: 1.125rem; margin-bottom: var(--s1); }
.pain p { color: var(--steel); font-size: .9375rem; }
.answer { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s6); align-items: center; margin-top: var(--s7); }
.answer__img img { border-radius: var(--r); aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.answer__text { min-width: 0; }
.ticks { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s3); }
.ticks li { padding-left: 34px; position: relative; color: var(--steel); }
.ticks li b { color: var(--ink); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .3em; width: 20px; height: 20px; border: 2px solid var(--formi); border-radius: 2px; background: radial-gradient(circle, var(--formi) 0 4px, transparent 4.5px); }
.answer__sum { margin-top: var(--s4); font-weight: 600; padding: var(--s3); background: var(--formi-tint); border-radius: var(--r); }

/* weight */
.weight { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: center; }
.weight__text p { margin-top: var(--s3); max-width: 52ch; }
.weight__chart { display: grid; gap: var(--s3); min-width: 0; }
.bar { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 6.5rem; gap: var(--s2); align-items: center; }
.bar__label { font-weight: 600; color: var(--ply-fg); font-size: .9375rem; }
.bar__track { height: 22px; background: var(--ply-2); border-radius: 2px; overflow: hidden; }
.bar__fill { display: block; height: 100%; width: var(--w); background: var(--ply-muted); }
.bar__fill--formi { background: var(--formi); }
.bar__val { text-align: right; color: var(--ply-fg); font-size: .875rem; }
.panels { display: flex; align-items: flex-end; gap: 10px; margin-top: var(--s4); height: 200px; }
.pnl {
  height: calc(var(--h) / 1500 * 100%); flex: 0 0 auto; width: calc(var(--w) / 1500 * 200px);
  border: 4px solid var(--formi); background: #1b1512; position: relative;
  background-image: linear-gradient(var(--formi), var(--formi)); background-size: 100% 4px; background-repeat: no-repeat; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
.pnl span { font-size: .6875rem; line-height: 1.3; text-align: center; background: #1b1512; color: var(--ply-fg); padding: 2px 3px; }

/* calculator */
.calc { margin-top: var(--s5); display: grid; gap: var(--s4); }
.calc__type { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s1); }
.calc__type legend { font-weight: 600; margin-bottom: var(--s2); padding: 0; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1em; border: 2px solid var(--line); border-radius: var(--r); cursor: pointer; font-weight: 500; background: #fff; }
.seg input:checked + span { border-color: var(--formi); background: var(--formi-tint); color: var(--formi-deep); }
.seg input:focus-visible + span { outline: 3px solid var(--signal); outline-offset: 2px; }
.calc__inputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s3); }
.field { display: grid; gap: .35rem; align-content: start; min-width: 0; }
.field label, .field legend { font-weight: 600; font-size: .9375rem; }
.field small { color: var(--steel); font-size: .8125rem; }
input[type="number"], input[type="text"], input[type="tel"], select, textarea {
  width: 100%; min-height: 48px; padding: .6rem .8rem; border: 2px solid var(--line); border-radius: var(--r);
  font: 500 1rem var(--f-body); color: var(--ink); background: #fff;
}
input[type="number"] { font-family: var(--f-mono); }
input:hover, select:hover, textarea:hover { border-color: var(--steel); }
textarea { resize: vertical; min-height: 90px; }
input[type="file"] { font: inherit; font-size: .875rem; width: 100%; max-width: 100%; min-width: 0; }
.form { min-width: 0; }
.form > * { min-width: 0; }
.calc__out { background: var(--ink); color: #fff; border-radius: var(--r); padding: var(--s4); display: grid; gap: var(--s4); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.kpi { display: grid; gap: .2rem; padding-left: var(--s3); border-left: 2px solid var(--formi); }
.kpi__label { font-size: .8125rem; color: #a9b5ad; text-transform: uppercase; letter-spacing: .06em; }
.kpi__val { font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 600; }
.kpi__hint { font-size: .8125rem; color: #a9b5ad; }
.compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.opt { background: #222e26; border-radius: var(--r); padding: var(--s3); display: grid; gap: .3rem; border: 2px solid transparent; }
.opt__name { font-weight: 600; color: #d6dfd8; }
.opt__sum { font-size: 1.5rem; font-weight: 600; }
.opt__note { font-size: .8125rem; color: #a9b5ad; line-height: 1.45; }
.opt.is-best { border-color: var(--formi); background: #183a22; }
.opt.is-best .opt__name::after { content: "выгоднее"; margin-left: .5em; font: 600 .6875rem var(--f-mono); text-transform: uppercase; background: var(--formi); color: #fff; padding: 2px 6px; border-radius: 2px; vertical-align: middle; }
.verdict { font-size: 1.0625rem; color: #fff; }
.verdict b { color: #8fd49e; }
.calc__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.calc__cta .fine { color: #a9b5ad; max-width: 52ch; }

/* offers */
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s5); }
.mode { background: var(--paper); padding: var(--s4); border-radius: var(--r); display: grid; gap: var(--s2); align-content: start; border: 2px solid var(--line); }
.mode--accent { border-color: var(--formi); }
.mode__price { font-weight: 600; font-size: 1.0625rem; }
.mode__price .mono { font-size: 1.875rem; color: var(--formi-deep); }
.mode p { color: var(--steel); }
.mode .mode__price { color: var(--ink); }
.mode__for { font-size: .875rem; border-top: 1px dashed var(--line); padding-top: var(--s2); }
.kits__title { margin-top: var(--s6); }
.kits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s3); margin-bottom: var(--s3); }
.kit { background: var(--paper); border-radius: var(--r); padding: var(--s4); display: grid; gap: var(--s2); grid-template-rows: auto 1fr auto auto auto; position: relative; }
.kit header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); border-bottom: 2px solid var(--ink); padding-bottom: var(--s2); }
.kit__m2 { font-weight: 600; color: var(--formi-deep); }
.kit p { color: var(--steel); font-size: .9375rem; }
.kit__price { color: var(--ink) !important; font-size: 1.0625rem !important; }
.kit__price b { font-size: 2rem; }
.kit--hit { outline: 3px solid var(--formi); }
.kit__badge { position: absolute; top: -12px; left: var(--s4); background: var(--formi); color: #fff; font: 600 .75rem var(--f-mono); text-transform: uppercase; letter-spacing: .06em; padding: 4px 8px; border-radius: 2px; }

/* range */
.build { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: var(--s4) 0 0; border-top: 2px solid var(--ink); }
.build div { padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: 1px solid var(--line); min-width: 0; }
.build dt { font: 600 .75rem var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--formi-deep); }
.build dd { margin: .25rem 0 0; font-size: .9375rem; }
@media (max-width: 900px) { .build { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .build { grid-template-columns: minmax(0, 1fr); } }
.tabs { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s5); border-bottom: 2px solid var(--ink); }
.tabs [role="tab"] { font: 600 .9375rem var(--f-body); background: none; border: 0; padding: .8rem 1rem; cursor: pointer; color: var(--steel); border-bottom: 4px solid transparent; margin-bottom: -2px; }
.tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-color: var(--formi); }
.table-scroll { overflow-x: auto; }
.spec { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 420px; }
.spec th, .spec td { text-align: left; padding: .65rem .75rem; border-bottom: 1px solid var(--line); }
.spec th { font: 600 .75rem var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--steel); }
.spec td { font-family: var(--f-mono); font-size: .9375rem; }
.spec td:first-child { font-family: var(--f-body); font-weight: 500; }
.spec tr.hl td { background: var(--formi-tint); font-weight: 600; }
.uses { list-style: none; padding: 0; margin: var(--s5) 0 0; display: flex; flex-wrap: wrap; gap: var(--s1); }
.uses li { border: 1px solid var(--line); background: var(--concrete); padding: .45rem .8rem; border-radius: 2px; font-size: .9375rem; }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s5); }
.g { margin: 0; display: grid; gap: var(--s1); align-content: start; min-width: 0; }
.g img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.g--span { grid-column: span 2; }
.g--span img { aspect-ratio: 8 / 3; }
.g figcaption { font-size: .875rem; color: var(--steel); }

/* steps */
.steps { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); counter-reset: s; }
.steps li { counter-increment: s; display: grid; gap: var(--s1); padding-top: var(--s4); border-top: 2px solid var(--ink); position: relative; }
.steps li::before { content: counter(s); position: absolute; top: -15px; left: 0; width: 28px; height: 28px; display: grid; place-items: center; background: var(--formi); color: #fff; font: 600 .875rem var(--f-mono); border-radius: 2px; }
.steps span { color: var(--steel); font-size: .9375rem; }

/* faq */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: var(--s6); }
.faq__list { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: var(--s3) 2.2rem var(--s3) 0; font-weight: 600; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 600 1.375rem var(--f-mono); color: var(--formi); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: var(--s3); color: var(--steel); max-width: 65ch; }

/* lead */
.leadbox { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.lead__text p { margin-top: var(--s3); }
.lead__alt { list-style: none; padding: 0; margin: var(--s4) 0 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.lead__phone a { color: var(--ply-fg); font-size: 1.125rem; }
.form { background: var(--paper); color: var(--ink); padding: var(--s4); border-radius: var(--r); display: grid; gap: var(--s3); }
.form .field--radio { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s3); }
.form .field--radio legend { width: 100%; margin-bottom: var(--s1); }
.form .field--radio label { font-weight: 500; display: inline-flex; gap: .4rem; align-items: center; }
.form small { color: var(--steel); }
.form__hint { font-size: .875rem; color: var(--steel); background: var(--concrete); padding: .6rem .8rem; border-radius: var(--r); }
.consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .875rem; color: var(--steel); }
.consent input { margin-top: .2rem; width: 18px; height: 18px; flex: 0 0 auto; }
.err { color: var(--danger); font-size: .875rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.form__status { font-weight: 600; min-height: 1.5em; }
.form__status.ok { color: var(--formi-deep); }
.form__status.bad { color: var(--danger); }
input[aria-invalid="true"] { border-color: var(--danger); }

/* footer */
.foot { background: var(--ink); color: #c9d2cc; padding-block: var(--s6); font-size: .9375rem; }
.foot__grid { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: var(--s5); }
.foot p + p { margin-top: .35rem; }
.foot a { color: #e8efe9; }
.foot .todo { color: var(--ink); }

/* mobile dock */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none; grid-template-columns: repeat(3, 1fr); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--ink); }
.dock__btn { display: grid; place-items: center; min-height: 56px; color: #fff; text-decoration: none; font-weight: 600; }
.dock__btn--viber { background: var(--viber); }
.dock__btn--tg { background: var(--tg); }
.dock__btn--call { background: var(--formi); }

/* cookie */
.cookie { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; max-width: 560px; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r); padding: var(--s3); display: grid; gap: var(--s2); box-shadow: 0 20px 40px -20px rgba(0,0,0,.4); font-size: .875rem; }
.cookie__btns { display: flex; gap: var(--s2); }
.cookie__btns .btn { flex: 1; }

/* responsive */
@media (max-width: 1080px) {
  .nav { display: none; }
  .top__contact { margin-left: auto; }
  .pains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s5); }
}
@media (max-width: 900px) {
  .hero__grid, .answer, .weight, .leadbox, .faq { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .hero__grid { padding-block: var(--s5) var(--s6); }
  .modes, .kits, .compare { grid-template-columns: minmax(0, 1fr); }
  .kits { gap: var(--s5); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g--span { grid-column: 1 / -1; }
  .answer__img img { aspect-ratio: 4 / 3; }
  .foot__grid { grid-template-columns: 1fr; }
  .dock { display: grid; }
  .cookie { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 901px) { body { padding-bottom: 0; } }
@media (max-width: 560px) {
  .top__phone { display: none; }
  .hero__facts { grid-template-columns: minmax(0, 1fr); }
  .hero__facts li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-bottom: var(--s2); }
  .hero__facts li { grid-template-columns: 6.5rem 1fr; align-items: baseline; padding-bottom: var(--s2); }
  .hero__cta .btn { flex: 1 1 100%; }
  .pains, .steps, .gallery { grid-template-columns: minmax(0, 1fr); }
  .g--span { grid-column: auto; }
  .g--span img { aspect-ratio: 4 / 3; max-height: none; }
  .bar { grid-template-columns: 1fr auto; }
  .bar__track { grid-column: 1 / -1; grid-row: 2; }
  .panels { height: 160px; gap: 6px; }
  .pnl { width: calc(var(--w) / 1500 * 150px); border-width: 3px; }
  .pnl span { font-size: .625rem; }
  .section { padding-block: var(--s6); }
  .kpis { gap: var(--s4) var(--s3); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}