/* ============ KAZAKH HEADING FONT (self-hosted) ============
   Playfair Display serves NO cyrillic-ext (only U+0400-045F, 0490-0491, 04B0-04B1) —
   Kazakh letters ә ғ қ ң ө ү һ would fall back to Times New Roman inside headings.
   «Playfair» (the modern variable successor, same Didone character) covers cyrillic-ext;
   rendered A/B at real sizes showed Playfair wght 600 ≈ Playfair Display 500 in density.
   Self-hosted per translation-skill rule (no extra CDN); files load lazily per unicode-range,
   so RU/EN visitors never download them. */
@font-face {
  font-family: "Playfair";
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/playfair-vf-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Playfair";
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/playfair-vf-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Playfair";
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/playfair-vf-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 {
  --font-heading: "Playfair Display", "Times New Roman", serif;
  --font-body: "Montserrat", "Inter", "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --white: #ffffff;
  /* neutral near-white (no cool/pink/beige tint) for cards; white sections elsewhere */
  --warm-white: #f6f6f5;
  --soft: #f5f3f0;
  --soft-2: #f4f4f3;
  --ink: #1b1712;
  --muted: #474440;
  --line: rgba(28, 28, 30, 0.20);
  --line-soft: rgba(28, 28, 30, 0.10);
  --card-border: rgba(28, 28, 30, 0.26);
  /* Glassmorphism edge: a very subtle glass-like rim (top light highlight + faint inner hairline).
     NOT a flat border — it catches light on the top edge like a pane of glass. Baked into
     --card-shadow so every plate gets it; buttons use --glass-edge-btn. Easy to roll back. */
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  --glass-edge-btn: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
  /* Glass edge weighted to the BOTTOM edge (glint reads as lit from below) — for the header switch blocks. */
  --glass-edge-under: inset 0 -1.5px 0 rgba(255, 255, 255, 0.85), inset 0 -7px 11px -6px rgba(109, 27, 36, 0.14), inset 0 0 0 1px rgba(28, 28, 30, 0.08);
  --card-shadow: var(--glass-edge), 0 14px 34px rgba(42, 40, 36, 0.08);
  --gold: #ad7a39;
  --gold-soft: #cda05f;
  --gold-tint: rgba(173, 122, 57, 0.10);
  --wine: #6d1b24;
  --wine-dark: #491016;
  --radius: 3px;
  --container: min(80vw, 1540px);
  --side: clamp(18px, 4vw, 72px);
  --shadow: 0 22px 64px rgba(42, 30, 20, 0.10);
  /* Кастомные курсоры сайта (белая заливка + винная обводка):
     стрелка-дротик по умолчанию и «рука» под тем же углом. */
  --cur-arrow: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='30'%20height='30'%20viewBox='0%200%2030%2030'%3E%3Cpath%20d='M3%203L27%2012L15%2015L12%2027Z'%20fill='%23fff'%20stroke='%236d1b24'%20stroke-width='2'%20stroke-linejoin='round'/%3E%3C/svg%3E") 3 3;
  --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cg%20transform='rotate%28-22%209.7%202.6%29'%3E%3Cpath%20d='M8%204.4C8%203.4%208.8%202.6%209.7%202.6C10.6%202.6%2011.4%203.4%2011.4%204.4L11.4%2012.2L15.4%2012.2C15.4%2011.3%2016.1%2010.7%2016.9%2010.7C17.8%2010.7%2018.5%2011.4%2018.5%2012.4L18.5%2020C18.5%2022.8%2016.3%2025%2013.5%2025L12%2025C9.6%2025%207.5%2023.4%206.8%2021.1L5%2015.6C4.7%2014.7%205.2%2013.7%206.1%2013.4C6.8%2013.2%207.5%2013.4%208%2013.9L8%204.4Z'%20fill='%23fff'%20stroke='%236d1b24'%20stroke-width='1.7'%20stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") 10 3;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 86px;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.004em;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

body.nav-open {
  overflow: hidden;
}

/* Кастомный курсор сайта: золотистая стрелка по умолчанию; над
   кликабельными элементами — «рука с пальцем» винного оттенка. */
body {
  cursor: var(--cur-arrow), auto;
}

a, button, label, summary, select,
.button, [role="button"],
input[type="submit"], input[type="button"],
input[type="checkbox"], input[type="radio"],
.scroll-tick, .scroll-to-hero {
  cursor: var(--cur-hand), pointer;
}

input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="number"], textarea {
  cursor: text;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: var(--cur-hand), pointer;
}

button:disabled {
  cursor: default;
}

.container {
  width: var(--container);
  margin-inline: auto;
}

.section-pad {
  padding: clamp(72px, 7.5vw, 118px) 0;
}

.section-anchor {
  scroll-margin-top: 86px;
}

/* «Живая» текстура ткани на фоне секций (js/fabric-weave.js).
   Канвас создаётся скриптом и лежит ПОД контентом: канвас на
   z-index 0, прямой .container секции поднят на 1. */
.weave-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.weave-host {
  position: relative;
}

.weave-host > .container {
  position: relative;
  z-index: 1;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============ HEADER ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Умный хедер: при скролле вниз уезжает вверх, при скролле вверх возвращается */
.site-header.hidden {
  transform: translateY(-100%);
}

/* Тонкая граница не на весь экран, а по ширине блока: от логотипа до переключателя темы */
.site-header::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: var(--container);
  height: 1px;
  background: rgba(173, 122, 57, 0.6);   /* gold divider between header and hero */
}

.header-inner {
  min-height: 84px;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
}

.logo,
.logo img {
  width: 218px;
}

/* Header logo swaps by theme: red wordmark on light, white wordmark on dark (matteks-logo-white). */
.logo-img.logo-dark { display: none; }
[data-theme="dark"] .logo-img.logo-light { display: none; }
[data-theme="dark"] .logo-img.logo-dark { display: block; }

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 1.9vw, 32px);
  color: #2b2927;
  font-size: clamp(12px, 0.82vw, 14px);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.main-nav a {
  position: relative;
  padding: 32px 0;
  transition: color 180ms ease, text-shadow 180ms ease;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--gold);
  transition: transform 180ms ease;
}

.main-nav a:hover::after {
  transform: scaleX(1);
}

.main-nav a:hover {
  color: var(--wine);
  text-shadow: 0 8px 18px rgba(109, 27, 36, 0.10);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.1vw, 20px);
}

.header-phone {
  white-space: nowrap;
  color: #221f1d;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: color 180ms ease, text-shadow 180ms ease;
}

.header-phone:hover {
  color: var(--wine);
  text-shadow: 0 8px 18px rgba(109, 27, 36, 0.10);
}

/* Kazakh nav labels (ЖЕТКІЗУ, КЕПІЛДІК, БІЗ ТУРАЛЫ, СҰРАҚТАР, БАЙЛАНЫС) are wider than the
   Russian set — on ≥1561px the 7-item row overran into the (secondary) header phone. Drop the
   phone in KK only; it already hides for every language ≤1560 and stays in footer + contacts. */
html[lang="kk"] .header-phone { display: none; }

.language-switch {
  display: inline-grid;
  grid-template-columns: repeat(3, 36px);
  gap: 0;                 /* segments join into one continuous strip — no separator between them */
  align-items: center;
  padding: 3px;
  border: 0.5px solid transparent; /* border hidden for now (kept for easy restore): was rgba(173,122,57,.6) gold hairline */
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--glass-edge-under);   /* glass edge on the block, weighted to the bottom (lit from below) */
}

.lang-option {
  width: 36px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 2px;
  background: rgba(28, 28, 30, 0.05);   /* inactive segment: same height as the active pill, faint tint in the site tone, no border */
  color: #6f5d54;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;   /* no trailing letter-spacing → «RU/KZ/EN» centre exactly under place-items:center */
  line-height: 1;
  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.lang-option.is-active {
  background: var(--wine);
  color: #fff7ec;
}

.lang-option:hover:not(.is-active) {
  background: rgba(173, 122, 57, 0.12);
  color: var(--gold-soft);            /* gold on hover — stays visible on dark (wine vanished) */
}

.theme-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, 36px);
  gap: 0;                 /* segments join into one continuous strip — no separator between them */
  align-items: center;
  padding: 3px;
  border: 0.5px solid transparent; /* border hidden for now (kept for easy restore): was rgba(173,122,57,.6) gold hairline */
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--glass-edge-under);   /* glass edge on the block, weighted to the bottom (lit from below) */
}

.theme-option {
  width: 36px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 2px;
  background: rgba(28, 28, 30, 0.05);   /* inactive segment: same height as the active pill, faint tint in the site tone, no border */
  color: var(--wine);
  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.theme-option svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-option.is-active {
  background: var(--wine);
  color: #fff7ec;
}

.theme-option:hover:not(.is-active):not(:disabled) {
  background: rgba(173, 122, 57, 0.12);
  color: var(--gold-soft);            /* gold on hover — SVG (currentColor) turns gold, visible on dark */
}

.theme-option:disabled {
  opacity: 0.55;
}

/* ===== Theme toggle relocation: header on desktop → burger menu on phones.
   On phones the header theme switch is removed (theme auto-follows the system, per the inline
   pre-render script), and the manual toggle lives inside the hamburger menu instead. ===== */
.nav-theme { display: none; }

@media (max-width: 680px) {
  .header-actions .theme-switch { display: none; }
  .nav-theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }
  .nav-theme-label { font-size: 15px; font-weight: 600; color: var(--ink); }
  .nav-theme .theme-switch { grid-template-columns: repeat(2, 44px); padding: 3px; }
  .nav-theme .theme-option { width: 44px; height: 38px; }
  .nav-theme .theme-option svg { width: 20px; height: 20px; }
}

/* ============ LEAD MODAL (CTA popup) ============ */
.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;          /* anchor to the TOP → mobile keyboard can't cover the submit */
  justify-content: center;
  padding: 8px 14px;                /* sit as high as possible so the shortened form clears the keyboard */
}
.lead-modal[hidden] { display: none; }
body.modal-open { overflow: hidden; }

.lead-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 10, 0.55);
  backdrop-filter: blur(4px);
}
.lead-modal__card {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  margin-top: clamp(4px, 1.2vh, 12px);
  padding: clamp(18px, 2.6vw, 24px) clamp(20px, 3.5vw, 34px) clamp(16px, 2.4vw, 22px);
  border-radius: var(--radius);
  background: var(--warm-white);
  border: 1px solid var(--line);
  box-shadow: var(--glass-edge), 0 44px 100px rgba(30, 16, 14, 0.42);
  animation: leadModalIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes leadModalIn {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lead-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.lead-modal__close:hover { background: rgba(109, 27, 36, 0.09); color: var(--wine); }
.lead-modal__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Same field set as the bottom contact form. Vertical on phones AND desktop/laptop;
   only tablets get the 2×2 grid (user). Reuses .footer-form field styling. */
.lead-modal .lead-modal__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: none;
}
.lead-modal .lead-modal__form .consent,
.lead-modal .lead-modal__form button { grid-column: 1 / -1; }

/* Compact popup so the on-screen keyboard never covers the submit button: no head text, shorter fields, tighter
   label gaps and a single-line consent. Scoped to the modal — the footer contact form keeps its roomier sizing. */
.lead-modal .footer-form label { gap: 6px; }
.lead-modal input,
.lead-modal select,
.lead-modal .footer-question textarea { height: 44px; min-height: 44px; }
.lead-modal .footer-question textarea { padding-top: 11px; padding-bottom: 11px; }
.lead-modal .consent span { font-size: 11.5px; white-space: nowrap; }

@media (min-width: 640px) and (max-width: 1024px) {
  .lead-modal .lead-modal__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }
}

/* ============ BUTTONS ============ */
.button {
  min-height: 56px;
  /* Floor = the main Hero CTA's natural width (~298px). No button anywhere may be SMALLER than the
     Hero primary; short labels grow up to this floor, long labels (branding / form) stay wider.
     Also makes the two Hero CTAs equal width (both hit this floor). Mobile (≤680) resets to 0. */
  min-width: 300px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 17px 32px;
  background: transparent;
  color: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
  filter: saturate(1.04);
}

.button-primary {
  background: linear-gradient(135deg, var(--wine), var(--wine-dark));
  border: 0.5px solid rgba(173, 122, 57, 0.6);  /* thin gold hairline, same as the outline button */
  color: #fff8ed;
  box-shadow: var(--glass-edge-btn), 0 12px 28px rgba(109, 27, 36, 0.14);  /* glass rim + soft neutral lift (no red glow) */
}

.button-primary:hover {
  box-shadow: var(--glass-edge-btn), 0 20px 44px rgba(109, 27, 36, 0.28);  /* glass rim + red glow on hover */
}

.button-secondary {
  background: linear-gradient(135deg, var(--wine), var(--wine-dark));
  border: 0.5px solid rgba(173, 122, 57, 0.6);  /* thin gold hairline, same as the other buttons */
  color: #fff8ed;
  box-shadow: var(--glass-edge-btn), 0 12px 28px rgba(109, 27, 36, 0.14);  /* glass rim + soft neutral lift */
}

.button-secondary:hover {
  box-shadow: var(--glass-edge-btn), 0 20px 44px rgba(109, 27, 36, 0.28);
}

.button-outline {
  background: rgba(255, 255, 255, 0.03);   /* barely-there milky fill */
  backdrop-filter: blur(1.5px);            /* faintest whisper of glass — «еще меньше» */
  -webkit-backdrop-filter: blur(1.5px);
  border-width: 0.5px;             /* hairline frame, both themes (border-box → same outer size as primary) */
  border-color: rgba(109, 27, 36, 0.55);  /* полупрозрачное вино: на DPR1 тоньше 1 физ.px не рисуется,
                                             поэтому «тоньше» достигается прозрачностью линии (user ×3) */
  color: var(--wine);
  box-shadow: 0 12px 28px rgba(109, 27, 36, 0.14);  /* soft lift only — NO glass rim: the rim's top highlight was faking border thickness on this ghost button */
}

.button-outline:hover {
  background: rgba(255, 255, 255, 0.05);   /* keep the whisper of frost on hover, a hair denser */
  border-color: var(--wine);  /* светлая тема: рамка чуть плотнеет (белая на светлом фоне ИСЧЕЗАЛА
                                 при наведении); тёмная тема ставит #fff своим правилом ниже */
}

/* CTA label variants: full on desktop, short («Консультация» / «Прайс») only where a
   narrow small-screen row would otherwise crowd the button — toggled in the adaptive blocks. */
.btn-short { display: none; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;               /* borderless hamburger (user) */
  background: transparent;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  background: var(--wine);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease;
  transform-origin: center;
}

/* Open menu → the hamburger becomes an ✕ (clear "tap to close"; menu also closes on link tap).
   Lines are 3px with a 9px flex gap in the mobile header → ±12px converges them to the centre. */
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(12px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-12px) rotate(-45deg); }

/* ============ TYPOGRAPHY ============ */
.eyebrow {
  position: relative;
  margin: 0 0 18px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.hero .eyebrow::before,
.section-head .eyebrow::before,
.two-col .eyebrow::before,
.brand-panel .eyebrow::before,
.consult .eyebrow::before,
.info-grid .eyebrow::before,
.clients-grid .eyebrow::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin-bottom: 14px;
  background: var(--gold);
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  letter-spacing: 0;
}

/* All h1/h2 use Playfair VF at wght 600 in EVERY language (user picked it over Playfair
   Display 500 — less vertically stretched). Scoped to h1/h2 only: digits (factoids, step
   numbers) and the МАТТЕКС watermark keep Playfair Display via --font-heading. */
h1,
h2 {
  font-family: "Playfair", "Playfair Display", "Times New Roman", serif;
  font-weight: 600;
}

h1 {
  max-width: 100%;
  font-size: clamp(38px, 3.05vw, 52px);
  line-height: 1.14;
}

/* Only the direct line-wrapper spans are blocks (3 lines of the hero H1). Использовать `>`,
   а не потомков: иначе вложенные .nowrap-pair / .tw-word тоже стали бы block и разорвали бы
   первую строку ("Стабильные" / "поставки тканей") в 4 строки. */
h1 > span {
  display: block;
  white-space: nowrap;
}

h2 {
  font-size: clamp(30px, 2.55vw, 42px);
  line-height: 1.15;
}

h3 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.36;
}

p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.72;
}

/* ============ HERO ============ */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--white);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../assets/images/hero-fabrics.png");
  background-size: cover;
  background-position: 72% 50%;
  /* Базовый зум сразу в CSS — чтобы при загрузке фон не «наезжал» через JS */
  transform: scale(1.14);
  /* Якорим масштаб к ПРАВОМУ краю: зум-запас уходит влево/за кадр (его режет
     .hero overflow:hidden), а правый край фона не вылезает за вьюпорт. Иначе
     getBoundingClientRect фона торчит правее экрана на всех ширинах (audit). */
  transform-origin: right center;
  transition: transform 0.3s ease-out;
  will-change: transform;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.99) 0%, rgba(255,255,255,0.96) 34%, rgba(255,255,255,0.62) 56%, rgba(255,255,255,0.08) 84%),
    linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.02));
}

.hero-grid {
  min-height: calc(100svh - 60px);
  display: grid;
  grid-template-columns: minmax(0, 64%) minmax(0, 36%);
  align-items: start;
  gap: clamp(24px, 3vw, 56px);
  /* Композиция чуть ниже центра: верх больше, низ меньше — общая высота та же */
  padding: clamp(80px, 10.5vh, 128px) 0 clamp(40px, 6vh, 74px);
}

/* Tall monitors (≈1920×1200 и выше): отдельный адаптив,
   чтобы заставка перекрывала сгиб и снизу не было белой полосы */
@media (min-height: 1100px) {
  .hero-grid {
    min-height: calc(100svh + 40px);
  }
}

/* ===== TALLER-THAN-FULLHD RULE (mandatory) — see .agents/rules/core/hero_first_screen.md =====
   Any viewport TALLER than the golden FullHD 16:9 (here width ≥1920 & height ≥1100 & aspect ≤ 17:10 —
   16:10 like 1920×1200, plus 3:2 / 4:3, and taller-than-16:9 big screens under the zoom ladder) has
   ~1/10 more vertical room than 1080 (1200 ÷ 1080 ≈ 1.11). The hero's top/bottom padding is vh-based,
   so it already grows with the viewport; only the INTER-ELEMENT gaps are fixed px and stay put — which
   is why a taller screen otherwise looks tight in the middle with an empty bottom. Fix = scale ONLY
   those gaps by the same ~1/10, so the whole hero fills proportionally and reads like a slightly airier
   FullHD (a "капелька" more air between rows), never a golden layout stranded at the top. Keep the
   golden min-height formula (100svh − header) so the grid fills exactly one screen; the zoom ladder's
   own /zoom min-heights (later in the file) still win for zoomed big screens. 16:9 (2K/4K logical
   ≈1080) is NOT matched here → keeps the exact golden rhythm. */
@media (min-width: 1920px) and (min-height: 1100px) and (max-aspect-ratio: 17/10) {
  .hero-grid { min-height: calc(100svh - 60px); }
  /* Taller screen → let the hero read a touch LARGER and airier than golden FullHD (user ask):
     slightly bigger type + a little more room after the eyebrow, so the block feels substantial,
     not sparse. Scoped to the taller-than-16:9 band so approved golden FullHD stays untouched. */
  .hero-copy > .eyebrow { margin-bottom: 34px; font-size: 14.5px; } /* was 18px gap / 13px */
  #hero-title { font-size: 62px; }                                  /* was capped 52px */
  .hero-lead { max-width: 700px; margin-top: 34px; font-size: 27px; line-height: 1.58; }
  .hero-bullets { margin-top: 50px; gap: 14px; }
  .hero-bullets li { grid-template-columns: 48px minmax(0, 1fr); min-height: 54px; font-size: 23px; }
  .hero-bullets .ic { width: 42px; height: 42px; }
  .hero-actions { margin-top: 118px; }
  /* .hero-grid specificity so this WINS over the later base `.hero-media` rule; the bigger eyebrow
     (14.5px + 34 margin) here drops the H1, so the plate needs a larger top offset to stay flush. */
  .hero-grid .hero-media { padding-top: 85px; }
  .dealer-card { width: min(452px, 100%); padding: 32px 40px 30px; gap: 16px; }
  .dealer-brand { width: min(310px, 84%); }
  .dealer-role { font-size: 13px; }
  .dealer-note { font-size: 14px; }
}

/* Very wide BUT short windows (≥1920 width, height ≤820 — e.g. a FullHD monitor with the
   browser un-maximized short). Laptops <1920 are handled by the FullHD-down zoom ladder
   (search "FullHD-DOWN parity"), which keeps golden proportions; this trim only covers the
   wide-short edge that the ladder's max-width:1919 gate excludes. Golden 1920×900/1080 (height
   >820) stays untouched. */
@media (min-width: 1920px) and (max-height: 820px) {
  .hero-grid {
    padding-top: clamp(40px, 6vh, 80px);
    padding-bottom: clamp(28px, 4vh, 60px);
  }
  .hero-lead { margin-top: clamp(14px, 2vh, 22px); }
  .hero-bullets { margin-top: clamp(18px, 2.6vh, 30px); }
  .hero-actions { margin-top: clamp(28px, 4.2vh, 60px); }
}

.hero-copy {
  max-width: 100%;
}

.hero-lead {
  max-width: 620px;
  margin-top: 22px;
  color: #39322c;
  font-size: clamp(20px, 1.35vw, 23px);
  font-weight: 500;
  line-height: 1.6;
}

.hero-lead .lead-break {
  display: block;
}

/* Keep a key phrase together on one line ONLY at narrow widths where the H1 line wraps and
   would otherwise leave an orphan (line-break control, typography §3). Desktop (>1024) fits
   "Стабильные поставки тканей" on one line, so the wrapper stays inert there → golden intact.
   Required for the per-word inline-block H1: &nbsp; can't bind inline-block boxes (box edges
   are always break opportunities), but white-space:nowrap on a wrapper does. */
@media (max-width: 1024px) {
  .nowrap-pair { white-space: nowrap; }
}

.hero-bullets {
  display: grid;
  gap: 9px;
  max-width: 640px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.hero-bullets li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 48px;
  color: var(--ink);
  font-size: clamp(18px, 1.15vw, 21px);
  font-weight: 600;
  line-height: 1.4;
}

.hero-bullets .ic {
  width: 38px;
  height: 38px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 60px;
}

.hero-media {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding-top: 63px;   /* top edge of the Bekaert plate flush with the H1 cap-top (below the eyebrow) */
}

.dealer-card {
  width: min(400px, 100%);
  margin: 0;
  padding: 26px 34px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 13px;
  border-radius: var(--radius);
  border: 0.5px solid rgba(173, 122, 57, 0.6);   /* thin gold hairline, same as the outline button */
  background: linear-gradient(160deg, #75212b 0%, #4d1117 100%);
  box-shadow: 0 44px 92px rgba(40, 12, 16, 0.44), 0 14px 30px rgba(40, 12, 16, 0.30);
  color: #f7e6d2;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Едва заметный плавный дрейф градиента в цвете самой карточки —
   не блик, просто живое «дыхание» винного тона, не привлекает внимания. */
.dealer-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: linear-gradient(160deg,
    rgba(150, 46, 60, 0.0) 0%,
    rgba(150, 46, 60, 0.55) 48%,
    rgba(150, 46, 60, 0.0) 100%);
  background-size: 100% 260%;
  background-position: 50% 0%;
  pointer-events: none;
}

html.anim-ready .dealer-card::before {
  animation: dealerDrift 11s ease-in-out infinite alternate;
}

@keyframes dealerDrift {
  0% { background-position: 50% 0%; }
  100% { background-position: 50% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html.anim-ready .dealer-card::before { animation: none; }
}

/* Single brand lockup: mark + «Bekaert Deslee» wordmark in ONE fixed white asset (brand file,
   never recoloured/reshaped). Already white artwork on transparent → reads white on the wine plate. */
.dealer-brand {
  width: min(272px, 84%);
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.24));
}

.dealer-role {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #e9cdaf;
}

.dealer-note {
  margin: 0;
  padding-top: 15px;
  border-top: 1px solid rgba(205, 160, 95, 0.32);
  color: rgba(245, 226, 205, 0.82);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

/* ============ STATS BAND ============ */
.stats-band {
  position: relative;
  padding: clamp(64px, 6.5vh, 96px) 0 56px;
  background: var(--white);
}


.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stats-grid div {
  padding: 0 clamp(18px, 3vw, 48px);
  border-right: 1px solid var(--line);
}

.stats-grid div:first-child {
  padding-left: 0;
}

.stats-grid div:last-child {
  border-right: 0;
  padding-right: 0;
}

.stats-grid strong {
  display: block;
  color: var(--wine);
  font-family: var(--font-heading);
  font-size: clamp(42px, 4vw, 62px);
  font-weight: 500;
  line-height: 1;
  /* мягкая тень под цифрой-фактоидом */
  text-shadow: 0 3px 8px rgba(30, 24, 18, 0.32);
}

.stats-grid span {
  display: block;
  margin-top: 8px;
  color: #5e544b;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* ============ SECTION HEADS ============ */
.section-head {
  max-width: 860px;
  margin-bottom: 46px;
}

.section-head.compact {
  max-width: 690px;
}

.section-head p:not(.eyebrow) {
  max-width: 680px;
  margin-top: 18px;
  font-size: 18px;
}

/* Блок «Обработки» — компактнее, чтобы целиком влезал в один экран
   (Full HD) и снап-центрирование показывало его вместе с кнопкой. */
.treatments {
  padding-top: clamp(40px, 4vw, 64px);
  padding-bottom: clamp(36px, 3.5vw, 56px);
}

.treatments .section-head {
  margin-bottom: 26px;
}

/* ============ WHAT YOU GET (benefit strip) ============ */
.hero-points {
  background: var(--white);
  padding: clamp(54px, 6vw, 86px) 0;
}

.point-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.benefit-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 18px;
  row-gap: 14px;
  padding: 38px clamp(28px, 3vw, 48px);
  border-right: 1px solid var(--line);
}

.benefit-card:first-child {
  padding-left: 0;
}

.benefit-card:last-child {
  border-right: 0;
  padding-right: 0;
}

.benefit-card .line-icon {
  grid-column: 1;
  grid-row: 1;
}

.benefit-card h3 {
  grid-column: 2;
  grid-row: 1;
  color: #24211f;
  font-size: 19px;
  line-height: 1.3;
}

.benefit-card p {
  grid-column: 1 / -1;
  grid-row: 2;
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

/* ============ ICON CHIPS (reusable, small & premium) ============ */
/* ============ ICONS (Lucide line set, masked → gold, single uniform size) ============ */
/* Маска рисуется в ::before, а filter:drop-shadow висит на самом элементе (без маски).
   Иначе браузер применяет filter ДО маски → тень обрезается маской и не видна.
   Цвет иконки берётся из `color` элемента (currentColor), поэтому перекраски работают. */
.ic,
.card-icon,
.line-icon,
.client-icon,
.work-steps .step-icon {
  display: inline-block;
  flex: none;
  position: relative;
  width: 52px;
  height: 52px;
  color: var(--gold);
  /* мягкая тень по форме иконки (в светлой теме — небольшая, но заметная) */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.20));
}

.ic::before,
.card-icon::before,
.line-icon::before,
.client-icon::before,
.work-steps .step-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: var(--ic);
  mask-image: var(--ic);
}

.card-icon {
  margin-bottom: 20px;
}

.ic-search { --ic: url("../assets/icons/search.svg"); }
.ic-clipboard-list { --ic: url("../assets/icons/clipboard-list.svg"); }
.ic-layers { --ic: url("../assets/icons/layers.svg"); }
.ic-badge-check { --ic: url("../assets/icons/badge-check.svg"); }
.ic-shield-check { --ic: url("../assets/icons/shield-check.svg"); }
.ic-thermometer-sun { --ic: url("../assets/icons/thermometer-sun.svg"); }
.ic-leaf { --ic: url("../assets/icons/leaf.svg"); }
.ic-award { --ic: url("../assets/icons/award.svg"); }
.ic-warehouse { --ic: url("../assets/icons/warehouse.svg"); }
.ic-coins { --ic: url("../assets/icons/coins.svg"); }
.ic-tag { --ic: url("../assets/icons/tag.svg"); }
.ic-truck { --ic: url("../assets/icons/truck.svg"); }
.ic-clock { --ic: url("../assets/icons/clock.svg"); }
.ic-palette { --ic: url("../assets/icons/palette.svg"); }
.ic-file-text { --ic: url("../assets/icons/file-text.svg"); }
.ic-package { --ic: url("../assets/icons/package.svg"); }
.ic-badge-percent { --ic: url("../assets/icons/badge-percent.svg"); }
.ic-bed-double { --ic: url("../assets/icons/bed-double.svg"); }
.ic-sofa { --ic: url("../assets/icons/sofa.svg"); }
.ic-pillow { --ic: url("../assets/icons/pillow.svg"); }
.ic-bed-linen { --ic: url("../assets/icons/bed-linen.svg"); }

/* ============ CATALOG ============ */
.catalog {
  background: var(--soft);
  padding-top: clamp(40px, 4vw, 64px);
  padding-bottom: clamp(40px, 4vw, 64px);
}

.catalog-head {
  max-width: none;
  margin-bottom: 40px; /* a bit more air under the title before the fabric cards */
}

.catalog-head h2 {
  white-space: nowrap;
}

.fabric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.fabric-card {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--warm-white);
  box-shadow: var(--card-shadow);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.fabric-card:hover {
  transform: translateY(-4px);
  border-color: rgba(173, 122, 57, 0.42);
  box-shadow: var(--glass-edge), 0 22px 52px rgba(40, 38, 34, 0.16);
}

.fabric-photo {
  flex: none;
  height: 224px;
  position: relative;
  overflow: hidden;
}

/* Само фото — на псевдоэлементе, чтобы зум при наведении клипался рамкой карточки */
.fabric-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/images/fabric-collection-clean.png");
  background-repeat: no-repeat;
  background-size: 400% 200%;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.photo-1::before { background-position: 0% 0%; }
.photo-2::before { background-position: 33.333% 0%; }
.photo-3::before { background-position: 66.666% 0%; }
.photo-4::before { background-position: 100% 0%; }
.photo-5::before { background-position: 0% 100%; }
.photo-6::before { background-position: 33.333% 100%; }
.photo-7::before { background-position: 66.666% 100%; }
.photo-8::before { background-position: 100% 100%; }

.fabric-card:hover .fabric-photo::before {
  transform: scale(1.07);
}

.fabric-card h3 {
  align-self: start;
  margin: 16px 22px 7px;
  color: var(--gold);
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* жёсткое правило: заголовок в одну строку */
  max-width: calc(100% - 44px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 200ms ease;
}

/* Заголовок каталожной карточки НЕ перекрашивается от hover всей карточки —
   меняется только сама карточка (бордер/тень/подъём) + зум фото. */

.fabric-card p {
  margin: 0 22px 20px;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
  /* жёсткое правило: описание максимум в две строки */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tablets/phones (≤1120): DON'T truncate the product-card text (user: «не сокращаем тексты» /
   «набор не влез — сделай карточку повыше, добавь третью строку»). Title wraps instead of «…»,
   description gets a 3rd line; the card grows to fit. */
@media (max-width: 1120px) {
  .fabric-card h3 {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
  }
  .fabric-card p {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

/* Карточка-ссылка: индикатор кликабельности — медный шеврон вправо,
   на уровне заголовка карточки (справа); при наведении мягко качается. */
.card-go {
  position: absolute;
  right: 18px;
  top: 242px; /* фото 224 + отступ h3 → вровень со строкой заголовка */
  z-index: 2;
  color: var(--gold);
  transition: color 200ms ease;
}

.fabric-card:hover .card-go {
  color: var(--wine);
}

.card-go svg {
  display: block;
  width: 10px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fabric-card:hover .card-go {
  animation: cardChevBob 0.85s ease-in-out infinite;
}

@keyframes cardChevBob {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .fabric-card:hover .card-go { animation: none; }
}

/* ============ QUOTE BAND ============ */
.quote-band {
  padding: clamp(70px, 8vw, 108px) 0;
  background: var(--white);
}

.quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(36px, 6vw, 86px);
  align-items: center;
}

.quote-layout p:not(.eyebrow) {
  max-width: 600px;
  margin-top: 18px;
}

.quote-action {
  display: flex;
  justify-content: flex-end;
}

/* ============ FORMS ============ */
.footer-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 720px;
}

.footer-form label {
  display: grid;
  gap: 8px;
  align-self: start;
}

.footer-form span {
  color: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

input,
textarea,
select {
  width: 100%;
  height: 52px;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  outline: none;
  background: var(--white);
  color: var(--ink);
  font-size: 16px;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

textarea {
  height: auto;
  min-height: 96px;
  padding: 14px 16px;
  resize: vertical;
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ad7a39' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  cursor: var(--cur-hand), pointer;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(109, 27, 36, 0.6);
  box-shadow: 0 0 0 3px rgba(109, 27, 36, 0.10);
}

input:hover,
textarea:hover,
select:hover {
  border-color: rgba(173, 122, 57, 0.48);
}

/* ============ TREATMENTS ============ */
.treatments {
  background: var(--soft);
}

.treatment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.treatment-card {
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--warm-white);
  box-shadow: var(--card-shadow);
}

.treatment-card h3,
.why-grid h3,
.partner-grid h3 {
  margin-bottom: 18px;
  font-size: 19px;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

.treatment-card ul,
.info-grid ul {
  display: grid;
  gap: 13px;
  list-style: none;
}

.treatment-card li,
.info-grid li {
  position: relative;
  padding-left: 24px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

.treatment-card li b,
.info-grid li b {
  color: var(--ink);
  font-weight: 700;
}

.treatment-card li::before,
.info-grid li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* ============ TWO-COL (test / partners / about) ============ */
.two-col {
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

.two-col p {
  margin: 18px 0 28px;
}

.test-section {
  background: var(--white);
}

.test-steps {
  display: grid;
  gap: 0;
  list-style: none;
}

.test-steps li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: clamp(18px, 1.4vw, 22px) 2px;
  border-bottom: 1px solid var(--line);
}

.test-steps li:first-child {
  border-top: 1px solid var(--line);
}

.test-steps .step-num {
  color: var(--gold);
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

.test-steps .step-text {
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
}

/* ============ WHY ============ */
.why {
  background: var(--soft);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.why-grid article {
  padding: clamp(28px, 2.6vw, 36px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--warm-white);
  box-shadow: var(--card-shadow);
}

.why-grid p {
  font-size: 16px;
  line-height: 1.6;
}

/* ============ HOW WE WORK ============ */
.work {
  background: var(--white);
}

#work-title {
  white-space: nowrap;
}

.work-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  list-style: none;
}

.work-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  row-gap: 18px;
  padding: 4px clamp(12px, 1.1vw, 20px);
  border-right: 1px solid var(--line);
}

.work-steps li:first-child {
  padding-left: 0;
}

.work-steps li:last-child {
  padding-right: 0;
  border-right: 0;
}

.work-steps .step-num {
  color: var(--gold);
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

.work-steps p {
  grid-column: 1 / -1;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

/* ============ BRAND PANELS ============ */
.brand {
  background: var(--soft);
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.brand-panel {
  min-height: 410px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 4vw, 56px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--warm-white);
  box-shadow: var(--card-shadow);
}

.brand-panel::before {
  content: "МАТТЕКС";
  position: absolute;
  top: 84px;
  left: 56%;
  right: auto;
  white-space: nowrap;
  color: rgba(173, 122, 57, 0.16);
  font-family: var(--font-heading);
  font-size: clamp(110px, 12vw, 180px);
  font-weight: 500;
  letter-spacing: 0;
  transition: color 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-panel.trial::before {
  content: "01";
  left: auto;
  right: 30px;
}

.brand-panel p:not(.eyebrow) {
  max-width: 580px;
  margin: 18px 0 30px;
}

/* ============ CLIENTS ============ */
.clients {
  background: var(--white);
}

.clients-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.58fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: start;
}

.clients-grid p {
  margin-top: 16px;
}

.client-tags {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.client-tags article {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 4px clamp(18px, 1.8vw, 30px);
  border-right: 1px solid var(--line);
}

.client-tags article:first-child {
  padding-left: 0;
}

.client-tags article:last-child {
  padding-right: 0;
  border-right: 0;
}

.client-tags h3 {
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.32;
}

.client-tags p {
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

/* ============ PARTNERS ============ */
.partners {
  background: var(--soft);
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.partner-grid article {
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--warm-white);
  box-shadow: var(--card-shadow);
}

.partner-grid p {
  font-size: 16px;
}

/* ============ ABOUT ============ */
.about {
  background: var(--white);
}

.text-stack {
  display: grid;
  gap: 18px;
}

.text-stack p {
  margin: 0;
  font-size: 18px;
}

/* ============ INFO STRIP (guarantees / delivery / offers) ============ */
.info-strip {
  padding: clamp(76px, 8vw, 118px) 0;
  background: var(--soft);
}

.info-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.9fr;
  gap: 20px;
}

.info-grid article {
  padding: clamp(28px, 3vw, 38px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--warm-white);
  box-shadow: var(--card-shadow);
}

.info-grid h2 {
  margin-bottom: 18px;
  font-size: clamp(26px, 2.1vw, 32px);
}

.info-grid p {
  font-size: 16px;
}

/* ============ CONSULT ============ */
.consult {
  background: var(--white);
}

.consult-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(34px, 4vw, 56px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--warm-white);
  box-shadow: var(--card-shadow);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms ease, border-color 240ms ease;
}

.consult-inner p:not(.eyebrow) {
  margin-top: 12px;
}

/* ============ FAQ ============ */
.faq {
  background: var(--soft);
}

.faq .section-head {
  margin-bottom: clamp(36px, 3.4vw, 52px);
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 84px);
  align-items: start;
}

.faq-col {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-col .faq-item:first-child {
  border-top: 1px solid var(--line);
}

.faq-item > summary {
  list-style: none;
  cursor: var(--cur-hand), pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 1.4vw, 22px) 2px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--ink);
  transition: color 160ms ease;
}

.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-item > summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 3px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 220ms ease;
}

.faq-item[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.faq-item > summary:hover,
.faq-item[open] > summary {
  color: var(--gold);
}

.faq-answer {
  padding: 0 56px clamp(20px, 1.5vw, 24px) 2px;
}

.faq-answer p {
  margin: 0;
  font-size: 16px;
  line-height: 1.62;
  color: var(--muted);
}

/* ============ FOOTER ============ */
.site-footer {
  padding: 76px 0 30px;
  background: var(--soft-2);
  color: var(--ink);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.62fr) minmax(0, 1fr);
  gap: clamp(42px, 6vw, 82px);
  padding-top: 44px;
  border-top: 1px solid var(--line);
}

.footer-logo {
  width: 196px;
  margin-bottom: 26px;
}

/* Theme-swapped footer logo — show EXACTLY ONE (both were rendering → logo appeared twice).
   Light theme → light-top logo; dark theme → white-top logo (matteks-logo-white.png). */
.footer-logo.logo-dark { display: none; }
[data-theme="dark"] .footer-logo.logo-light { display: none; }
[data-theme="dark"] .footer-logo.logo-dark { display: block; }

.footer-cta h2 {
  margin-bottom: 22px;
  font-family: var(--font-body);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.footer-form .footer-question textarea {
  height: 52px;
  min-height: 52px;
  padding: 14px 16px;
  line-height: 1.4;
  resize: none;
  overflow: hidden;
}

.footer-form .consent {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 15px;
}

.footer-form .consent span {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 500;
}

.footer-form .consent a {
  color: #8a817a;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-form .consent a:hover {
  color: var(--wine);
}

.footer-form .consent input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: var(--wine);
}

.footer-form .consent input:focus,
.footer-form .consent input:focus-visible {
  box-shadow: none;
  border-color: var(--card-border);
  outline: 2px solid rgba(109, 27, 36, 0.45);
  outline-offset: 2px;
}

.footer-form button {
  grid-column: 1 / -1;
}

.footer-contacts {
  display: grid;
  align-content: start;
  gap: 16px;
}

.footer-contacts h3 {
  font-size: 18px;
}

.footer-contacts p,
.footer-contacts a {
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
  transition: color 180ms ease;
}

.footer-contacts b {
  color: var(--ink);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.footer-nav a:hover,
.footer-contacts a:hover,
.footer-bottom a:hover {
  color: var(--wine);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: #6e655f;
  font-size: 13px;
}

.footer-bottom a {
  font-size: 11px;
  color: #8a817a;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============ RESPONSIVE (kept; full adaptive pass is a later stage) ============ */
/* ============ SCROLL-IN ANIMATIONS (заимствованный приём) ============ */
/* Якорные секции не прячутся под липким хедером при переходе по навигации/снапе.
   Единый отступ 86px для всех целей-якорей (совпадает с .section-anchor и scroll-padding-top). */
section[id] {
  scroll-margin-top: 86px;
}

/* Reveal — через @keyframes-АНИМАЦИЮ, а не transition: так собственный
   transition элементов (hover-подъём карточек/кнопок) остаётся нетронутым
   и плавным. Задержка стаггера — через --rev-delay (только на анимацию). */
html.anim-ready .reveal {
  opacity: 0;
}

html.anim-ready .reveal.is-visible {
  animation: revealUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--rev-delay, 0ms) both;
}

/* Хедер появляется сверху (лого/меню/переключатели). */
html.anim-ready .reveal-down.is-visible {
  animation-name: revealDown;
}

@keyframes revealUp {
  from { opacity: 0; translate: 0 34px; scale: 0.99; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes revealDown {
  from { opacity: 0; translate: 0 -16px; }
  to { opacity: 1; translate: 0 0; }
}

/* Иконки внутри появляющихся блоков мягко «вырастают» следом. */
html.anim-ready .reveal .line-icon,
html.anim-ready .reveal .card-icon {
  opacity: 0;
  scale: 0.5;
  transition: opacity 0.5s ease 0.18s,
    scale 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 0.18s;
}

html.anim-ready .reveal.is-visible .line-icon,
html.anim-ready .reveal.is-visible .card-icon {
  opacity: 1;
  scale: 1;
}

/* Мягкий акцент по завершении счётчика фактоида */
html.anim-ready .stats-grid strong.count-done {
  animation: factCountDone 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes factCountDone {
  0% { transform: scale(1); }
  45% { transform: scale(1.07); color: var(--gold); }
  100% { transform: scale(1); color: var(--wine); }
}

/* --- Hero: появление как на PalantirDent — плавный подъём с лёгким флипом (целыми элементами, без по-словной разбивки) --- */
html.anim-ready .hero-copy { perspective: 1000px; }
html.anim-ready .hero-grid { perspective: 1200px; }

html.anim-ready .hero-copy > .eyebrow,
html.anim-ready .hero-lead,
html.anim-ready .hero-bullets li,
html.anim-ready .hero-actions {
  opacity: 0;
  transform: translate3d(0, 28px, 0) rotateX(8deg);
  transform-origin: left bottom;
}

html.anim-ready .hero-media {
  opacity: 0;
  transform: translate3d(34px, 18px, 0) scale(0.97) rotateY(-5deg);
  transform-origin: right center;
}

html.anim-ready body.hero-in .hero-copy > .eyebrow,
html.anim-ready body.hero-in .hero-lead,
html.anim-ready body.hero-in .hero-bullets li,
html.anim-ready body.hero-in .hero-actions,
html.anim-ready body.hero-in .hero-media {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

html.anim-ready body.hero-in .hero-copy > .eyebrow { transition-delay: 0.2s; }
html.anim-ready body.hero-in .hero-lead { transition-delay: 0.92s; }
html.anim-ready body.hero-in .hero-bullets li { transition-delay: calc(1.16s + var(--hero-i, 0) * 120ms); }
html.anim-ready body.hero-in .hero-actions { transition-delay: 1.5s; }
html.anim-ready body.hero-in .hero-media { transition-delay: 0.36s; }

/* H1 — появление по словам (как PalantirDent). Слова статичны в HTML → раскладка стабильна, без сдвига */
html.anim-ready #hero-title { perspective: 900px; }
html.anim-ready #hero-title .tw-word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.72em, 0) rotateX(28deg) rotateY(-4deg);
  transform-origin: left bottom;
  clip-path: inset(0 0 100% 0);
}
html.anim-ready body.hero-in #hero-title .tw-word {
  animation: heroWordIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(0.4s + var(--word-i) * 42ms);
}
@keyframes heroWordIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 0.72em, 0) rotateX(28deg) rotateY(-4deg);
    clip-path: inset(0 0 100% 0);
  }
  100% {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
  }
}

/* --- CTA: мягкое градиентное переливание через ~5с (яркость в пределах вина, без сдвига тона) --- */
.button-primary,
.button-secondary {
  position: relative;
  isolation: isolate;
}

.button-primary::before,
.button-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 236, 216, 0.34) 50%, transparent 70%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  opacity: 0;
  pointer-events: none;
}

/* Плавное непрерывное переливание-сияние: появляется через ~5с
   (класс вешает JS) и мягко продолжает двигаться туда-обратно. */
html.anim-ready .button-primary.cta-attention::before,
html.anim-ready .button-secondary.cta-attention::before {
  opacity: 1;
  animation: btnSheen 3.6s ease-in-out infinite alternate;
}

@keyframes btnSheen {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  html.anim-ready .button-primary.cta-attention::before,
  html.anim-ready .button-secondary.cta-attention::before { animation: none; opacity: 0; }
}

/* ============ ЕДИНЫЙ HOVER ДЛЯ ВСЕХ БЛОКОВ ============ */
/* Карточные блоки: подъём + усиленная тень */
.treatment-card,
.why-grid article,
.partner-grid article,
.info-grid article,
.brand-panel {
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 240ms ease, border-color 240ms ease;
}

.treatment-card:hover,
.why-grid article:hover,
.partner-grid article:hover,
.info-grid article:hover,
.brand-panel:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 54px rgba(40, 38, 34, 0.18);
  /* бордер не трогаем — он уже хорошо выглядит */
}

.treatment-card:hover,
.why-grid article:hover,
.partner-grid article:hover,
.info-grid article:hover,
.brand-panel:hover,
.consult-inner:hover {
  border-color: rgba(173, 122, 57, 0.38);
}

.consult-inner:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 54px rgba(40, 38, 34, 0.16);
}

.brand-panel:hover::before {
  color: rgba(173, 122, 57, 0.23);
  transform: translateX(-8px);
}

/* Линейные блоки: лёгкий подъём */
.benefit-card,
.client-tags article,
.work-steps li,
.test-steps li {
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), background-color 240ms ease;
}

.benefit-card:hover,
.client-tags article:hover,
.work-steps li:hover,
.test-steps li:hover {
  transform: translateY(-3px);
  background: linear-gradient(180deg, rgba(173, 122, 57, 0.045), rgba(173, 122, 57, 0));
}

/* Иконки и короткие тексты получают общий тонкий отклик от родительского hover. */
.ic,
.card-icon,
.line-icon,
.client-icon,
.work-steps .step-icon,
.stats-grid strong,
.stats-grid span,
.treatment-card h3,
.why-grid h3,
.partner-grid h3,
.info-grid h2,
.benefit-card h3,
.client-tags h3,
.work-steps .step-num,
.test-steps .step-num {
  transition: color 220ms ease, background-color 220ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-bullets li,
.stats-grid div {
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-bullets li:hover {
  transform: translateX(4px);
}

/* Наведение на карточку/контейнер меняет ТОЛЬКО саму карточку (бордер/тень/подъём).
   Внутренние иконки, заголовки и тексты реагируют лишь на СВОЙ прямой hover (ниже). */
.stats-grid div:hover {
  transform: translateY(-2px);
}

/* Тексты и отдельные иконки: второй, более точный уровень hover.
   Работает только на устройствах с точным курсором, чтобы touch-экраны не получали лишние состояния. */
@media (hover: hover) and (pointer: fine) {
  .eyebrow,
  .hero-lead,
  .hero-bullets li span,
  .fabric-card p,
  .section-head p:not(.eyebrow),
  .quote-layout p:not(.eyebrow),
  .benefit-card p,
  .treatment-card li,
  .info-grid li,
  .test-steps .step-text,
  .why-grid p,
  .work-steps p,
  .brand-panel p:not(.eyebrow),
  .client-tags p,
  .partner-grid p,
  .text-stack p,
  .info-grid p,
  .consult-inner p:not(.eyebrow),
  .faq-answer p,
  .footer-cta h2,
  .footer-form span,
  .footer-contacts p,
  .footer-bottom span,
  h1,
  h2,
  h3 {
    transition: color 220ms ease, text-shadow 220ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .ic,
  .card-icon,
  .line-icon,
  .client-icon,
  .work-steps .step-icon {
    cursor: var(--cur-hand), pointer;
    transition: color 220ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1), filter 220ms ease;
  }

  .ic:hover,
  .card-icon:hover,
  .line-icon:hover,
  .client-icon:hover,
  .work-steps .step-icon:hover {
    color: var(--wine);
    filter: drop-shadow(0 10px 18px rgba(109, 27, 36, 0.18));
    transform: translateY(-3px) scale(1.06);
  }

  h1:hover,
  h2:hover,
  h3:hover,
  .footer-cta h2:hover {
    transform: translateY(-2px);
    text-shadow: 0 10px 24px rgba(173, 122, 57, 0.14);
  }

  .eyebrow:hover {
    color: var(--gold);
    text-shadow: 0 8px 18px rgba(173, 122, 57, 0.14);
  }

  .hero-lead:hover,
  .section-head p:not(.eyebrow):hover,
  .quote-layout p:not(.eyebrow):hover,
  .brand-panel p:not(.eyebrow):hover,
  .text-stack p:hover,
  .consult-inner p:not(.eyebrow):hover,
  .footer-contacts p:hover,
  .footer-bottom span:hover {
    transform: translateY(-1px);
    text-shadow: 0 8px 18px rgba(173, 122, 57, 0.10);
  }

  .hero-bullets li span:hover,
  .fabric-card p:hover,
  .benefit-card p:hover,
  .treatment-card li:hover,
  .info-grid li:hover,
  .test-steps .step-text:hover,
  .why-grid p:hover,
  .work-steps p:hover,
  .client-tags p:hover,
  .partner-grid p:hover,
  .info-grid p:hover,
  .faq-answer p:hover {
    transform: translateY(-1px);
    text-shadow: 0 8px 18px rgba(173, 122, 57, 0.12);
  }

  .treatment-card li:hover b,
  .info-grid li:hover b {
    color: var(--wine);
  }

  .faq-item > summary:hover {
    text-shadow: 0 8px 18px rgba(173, 122, 57, 0.12);
  }

  .footer-form label:hover span {
    color: var(--wine);
  }
}

/* Карточка дилера Bekaert в hero — тоже приподнимается */
.dealer-card {
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms ease;
}

.dealer-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 56px 112px rgba(40, 12, 16, 0.52), 0 16px 34px rgba(40, 12, 16, 0.34);
}

@media (prefers-reduced-motion: reduce) {
  html .reveal,
  html.anim-ready .hero-copy > .eyebrow,
  html.anim-ready #hero-title .tw-word,
  html.anim-ready .hero-lead,
  html.anim-ready .hero-bullets li,
  html.anim-ready .hero-actions,
  html.anim-ready .hero-media {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
  }
  .button-primary.cta-attention,
  .button-secondary.cta-attention,
  .button-primary.cta-attention::before,
  .button-secondary.cta-attention::before { animation: none !important; }
}

/* ---------- Large / high-res screens (≥2K) — FullHD parity (DPR=1 / no OS scaling).
   1920 and below stay UNTOUCHED (golden protected — zoom starts only at 2000). Uniform
   `zoom` scales the WHOLE design system together (type, spacing, images, cards, radii);
   capped ≈1.6 per skill §4E so it never becomes billboard-sized. The content column keeps
   its `min(86vw,1540px)` cap, so ultrawide/4K get a centered FullHD-scaled composition with
   the full-bleed hero background expanding to the edges — never a tiny island in empty margin. */
/* Standard big screens (≈16:9 / 16:10) — scale to FullHD-WIDTH parity: zoom ≈ physWidth/1920.
   A DPR=1 2K/4K/5K then lays out the 1920 composition at the SAME visual proportion as FullHD
   (e.g. 3840 → 1920×1080 logical), so the hero FILLS the height like 1920×1080 instead of being
   stranded at the top with a huge empty fabric strip below. This is true FullHD parity. */
/* Each step also DIVIDES the hero-grid min-height by its own zoom, so the hero fills EXACTLY one
   screen under zoom (svh stays PHYSICAL under :root{zoom}, so an undivided 100svh × zoom would make
   the hero ~2× too tall — the "fabric photo stretched to full height" bug). Same technique as the
   FullHD-DOWN parity band. Result: logical hero height ≈ golden 1080 → 2K/4K look identical to FullHD. */
@media (min-width: 2000px) { :root { zoom: 1.05; } .hero-grid { min-height: calc((100svh - 60px) / 1.05); } }
@media (min-width: 2240px) { :root { zoom: 1.18; } .hero-grid { min-height: calc((100svh - 60px) / 1.18); } }
@media (min-width: 2560px) { :root { zoom: 1.33; } .hero-grid { min-height: calc((100svh - 60px) / 1.33); } }
@media (min-width: 2800px) { :root { zoom: 1.46; } .hero-grid { min-height: calc((100svh - 60px) / 1.46); } }
@media (min-width: 3100px) { :root { zoom: 1.62; } .hero-grid { min-height: calc((100svh - 60px) / 1.62); } }
@media (min-width: 3440px) { :root { zoom: 1.79; } .hero-grid { min-height: calc((100svh - 60px) / 1.79); } }
@media (min-width: 3840px) { :root { zoom: 2.0; } .hero-grid { min-height: calc((100svh - 60px) / 2.0); } }
@media (min-width: 4400px) { :root { zoom: 2.3; } .hero-grid { min-height: calc((100svh - 60px) / 2.3); } }
@media (min-width: 5120px) { :root { zoom: 2.67; } .hero-grid { min-height: calc((100svh - 60px) / 2.67); } }

/* Ultrawide / super-wide (aspect > 2:1) — width parity would over-scale here (the screen is
   short, so logical height would collapse). Scale to FullHD-HEIGHT parity instead, gentler;
   the content column stays capped and the full-bleed background expands to the edges. */
@media (min-aspect-ratio: 2/1) and (min-width: 2400px) { :root { zoom: 1.25; } .hero-grid { min-height: calc((100svh - 60px) / 1.25); } }
@media (min-aspect-ratio: 2/1) and (min-width: 3600px) { :root { zoom: 1.4; } .hero-grid { min-height: calc((100svh - 60px) / 1.4); } }

/* ============ FullHD-DOWN parity (laptops shorter than the golden 1920×900) ============
   Same universal rule as the big-screen ladder, applied DOWNWARD: the 1920×900 layout is the
   reference; on a SHORT laptop we scale the WHOLE design down with `zoom` so every important
   section (catalog, «Обработки…», «Склад, документы…») fits the viewport like it does on FullHD,
   instead of the content blocks (~940–1010px tall here) overrunning the fold. Empty space below
   a section is acceptable (per brief). Keyed to the viewport HEIGHT (that's what's scarce) and
   gated to laptop widths — max-width:1919 leaves the golden 1920 and all bigger screens (handled
   by the up-ladder above) completely untouched. Steps roughly zoom ≈ availableHeight ÷ ~915
   (tallest content section). Ordered tallest→shortest so the most restrictive (smallest) height
   wins via source order. `--container: 80%` is the KEY companion to the down-zoom: the default
   `--container` is `min(80vw,1540px)`, but under `:root{zoom}` `vw` resolves to the PHYSICAL
   viewport (1280), so it would collapse the container to ~1024px in the larger LOGICAL viewport
   and strand it in centered margins (also cramping the header → nav collides with the switchers).
   Switching to a percentage makes the container fill 80% of the logical width — the same inset as
   FullHD — so the header and grid scale cleanly. `.hero-grid` min-height is divided by the zoom so
   the hero still FILLS the first screen (factoids stay on the second screen) despite `svh` staying
   physical under zoom. */
@media (min-width: 1025px) and (max-width: 1919px) and (max-height: 910px) {
  :root { zoom: 0.88; --container: 80%; }
  .hero-grid { min-height: calc((100svh - 60px) / 0.88); }
}
@media (min-width: 1025px) and (max-width: 1919px) and (max-height: 850px) {
  :root { zoom: 0.84; --container: 80%; }
  .hero-grid { min-height: calc((100svh - 60px) / 0.84); }
}
@media (min-width: 1025px) and (max-width: 1919px) and (max-height: 800px) {
  :root { zoom: 0.80; --container: 80%; }
  .hero-grid { min-height: calc((100svh - 60px) / 0.80); }
}
@media (min-width: 1025px) and (max-width: 1919px) and (max-height: 760px) {
  :root { zoom: 0.77; --container: 80%; }
  .hero-grid { min-height: calc((100svh - 60px) / 0.77); }
}
@media (min-width: 1025px) and (max-width: 1919px) and (max-height: 720px) {
  :root { zoom: 0.73; --container: 80%; }
  .hero-grid { min-height: calc((100svh - 60px) / 0.73); }
}
@media (min-width: 1025px) and (max-width: 1919px) and (max-height: 690px) {
  :root { zoom: 0.69; --container: 80%; }
  .hero-grid { min-height: calc((100svh - 60px) / 0.69); }
}

/* FullHD parity of the HEADINGS: the fluid clamps (h1/h2/lead use `vw`) shrink the type at
   1280–1440 BEFORE the zoom is applied, so after the down-zoom the headings looked smaller than
   on the 1920 reference. Pin them to their DESKTOP (1920) sizes inside the parity band so the
   zoomed result matches — or slightly exceeds — the FullHD scale. Body/buttons are already fixed
   px (parity-correct under zoom), so only the fluid headings need pinning. */
@media (min-width: 1025px) and (max-width: 1919px) and (max-height: 910px) {
  h1 { font-size: 52px; }
  h2 { font-size: 42px; }
  .hero-lead { font-size: 23px; }
}

/* ---------- ≤1560: the 7-item nav + phone gets tight beside the switchers → drop the
   (secondary) phone first and tighten nav gaps so the header row keeps air (skill §9). ---------- */
@media (max-width: 1560px) {
  .header-phone { display: none; }
  .main-nav { gap: clamp(13px, 1.3vw, 22px); }
}

@media (max-width: 1320px) {
  .header-inner {
    grid-template-columns: 200px minmax(0, 1fr) auto;
  }

  .logo,
  .logo img {
    width: 196px;
  }

  .main-nav {
    gap: 16px;
  }
}

@media (max-width: 1120px) {
  .header-inner {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  .main-nav {
    position: fixed;
    left: var(--side);
    right: var(--side);
    top: 92px;
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 12px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow);
    /* menu must never exceed the viewport and must scroll if tall (skill §9, mobile landscape) */
    max-height: calc(100svh - 110px);
    overflow-y: auto;
  }

  [data-theme="dark"] .main-nav {
    background: rgba(22, 22, 20, 0.98);
  }

  .main-nav a {
    padding: 15px 0;
  }

  .main-nav a::after {
    bottom: 10px;
  }

  body.nav-open .main-nav {
    display: grid;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 0.6fr) minmax(260px, 0.4fr);
  }

  .treatment-grid,
  .why-grid,
  .fabric-grid,
  .work-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  /* Header controls on the burger/tablet zone. Hamburger is BORDERLESS and height-matched
     to the language/theme pills — no taller outlined button (user). Flex-centered 3-line icon. */
  .nav-toggle {
    width: 46px;
    height: 36px;
    border: 0;
    background: transparent;
    border-radius: 0;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 9px;
  }
  .nav-toggle span { width: 26px; height: 3px; margin: 0; }
  /* Unified header height on tablets: logo, language + theme pills and burger all ≈36px. */
  .logo, .logo img { width: 218px; }
  .lang-option { height: 30px; }
  .theme-option { height: 30px; }
  .theme-option svg { width: 20px; height: 20px; }

  /* Hero CTAs: equal width; one row when both fit, otherwise stacked full-width AND equal
     (flex-basis ≈ the longer label's natural width). Satisfies the equal-when-stacked /
     one-row-when-space rules. Desktop (>1120) keeps its approved natural layout. */
  .hero-actions .button { flex: 1 1 290px; min-width: 0; width: auto; }
}

/* ---------- ≤1024 tablet landscape: release the forced single-line headings
   (root cause of mobile H1/H2 horizontal overflow) and bring headings into the tablet
   range. Cards stay 2-col → tablet density, not an oversized mobile (skill §15). ---------- */
@media (max-width: 1024px) {
  h1 span,
  .catalog-head h2,
  #work-title { white-space: normal; }

  h1 { font-size: clamp(40px, 5.2vw, 50px); line-height: 1.16; }
  h2 { font-size: clamp(32px, 4.3vw, 42px); }
  .section-head { margin-bottom: 38px; }

  .hero-grid { grid-template-columns: minmax(0, 0.62fr) minmax(220px, 0.38fr); }

  /* Hero CTAs: keep the label on ONE line (user rule — no 2-line buttons on small screens);
     shrink the font/side-padding fluidly instead of wrapping. */
  .hero-actions .button {
    white-space: nowrap;
    font-size: clamp(12px, 1.5vw, 13.5px);
    padding-left: clamp(16px, 3vw, 32px);
    padding-right: clamp(16px, 3vw, 32px);
  }

  /* 6-step work strip → 2 columns with horizontal dividers (no odd vertical rule) */
  .work-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 4vw, 44px);
  }
  .work-steps li {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 16px 0;
  }
}

/* Single-column stacked layout: all phones/small tablets (≤900), PLUS every portrait tablet up to
   1024 (e.g. 1024×1366 iPad Pro) — a portrait tablet must stack like mobile, never keep the 2-col
   hero that mangled the H1 and unbalanced the page. */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1024px) {
  .hero {
    min-height: auto;
  }

  .hero-grid {
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 66px 0 50px;
  }

  /* drop the 1.08 parallax zoom on touch (no parallax here) → no decorative h-overflow */
  .hero-bg {
    background-position: 70% 54%;
    transform: scale(1);
  }

  /* Mobile/tablet-portrait: lighten the veil so hero-fabrics.png is actually visible
     behind the stacked hero (was washed to ~white). Kept strong enough up top that the
     dark H1/lead stay readable, fades to reveal more fabric toward the CTA. */
  .hero::after {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.80) 0%, rgba(255,255,255,0.64) 50%, rgba(255,255,255,0.46) 100%);
  }

  .hero-media {
    justify-content: flex-start;
    padding-top: 8px;
    width: 100%;
  }

  /* Bekaert plate (single wide brand lockup) on the stacked hero → full-width but capped &
     centred; logo on top, role + note below. The short horizontal logo keeps the plate low. */
  .dealer-card {
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
    padding: clamp(18px, 3.4vw, 24px) clamp(22px, 4vw, 30px);
    gap: clamp(11px, 2.2vw, 15px);
  }
  .dealer-brand { width: min(288px, 72%); }
  .dealer-role { font-size: clamp(12px, 1.6vw, 13px); }
  .dealer-note { max-width: none; padding-top: clamp(13px, 2.4vw, 16px); }

  .quote-layout,
  .two-col,
  .brand-grid,
  .clients-grid,
  .info-grid,
  .faq-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* The section-pad floor (72px) is too tall on small screens → oversized empty gaps between
     every section (user). Scale it down here, plus the footer top padding and the stacked-FAQ
     column gap (was 40–84px splitting the list in the middle). */
  .section-pad { padding: clamp(38px, 8vw, 62px) 0; }
  .site-footer { padding: clamp(40px, 8vw, 56px) 0 28px; }
  .faq-grid { gap: 0; }

  .quote-layout,
  .two-col,
  .clients-grid {
    gap: 34px;
  }
  .quote-action { justify-content: flex-start; }

  /* Quote band: cut the oversized mobile whitespace (was ~70px top/bottom + 34px gap → huge
     empty area around the CTA, user report). Tighten section padding and the text→button gap. */
  .quote-band { padding: clamp(40px, 8vw, 56px) 0; }
  .quote-layout { gap: clamp(20px, 4vw, 26px); }

  /* 4 factoids → tidy 2×2 (not a tall single stack) */
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 0;
  }
  .stats-grid div { padding: 0 clamp(16px, 4vw, 40px); }
  .stats-grid div:nth-child(2n) { border-right: 0; padding-right: 0; }
  .stats-grid div:nth-child(2n+1) { padding-left: 0; }

  /* 3 benefit cards → stacked list w/ bottom dividers (3-col is far too narrow ≤900).
     Layout = icon LEFT, text (h3 + p) RIGHT — the icon must sit at the TOP of its column, never
     drift below the text (default `p { grid-column: 1/-1 }` pulled the copy under the icon). */
  .point-grid { grid-template-columns: 1fr; }
  .benefit-card {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: clamp(14px, 2.5vw, 20px);
    row-gap: 6px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 28px 0;
  }
  .benefit-card .line-icon { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .benefit-card h3 { grid-column: 2; grid-row: 1; }
  .benefit-card p  { grid-column: 2; grid-row: 2; }
  /* Even vertical rhythm: every card keeps the full top+bottom padding so the gap from the section's top line to the
     first card, between cards (divider sits midway), and from the last card to the bottom line are all equal — the
     first/last cards are no longer cramped against the frame. */
  .benefit-card:last-child { border-bottom: 0; }

  /* client tag strip → stacked list with bottom dividers (headings fit fully) */
  .partner-grid,
  .client-tags {
    grid-template-columns: 1fr;
  }
  .client-tags article {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 18px 0;
  }
  .client-tags article:last-child { border-bottom: 0; }
}

@media (max-width: 680px) {
  :root {
    --side: 18px;
    --container: 91vw;
  }

  #work-title {
    white-space: normal;
  }

  /* Phone header: logo, language switch and burger spaced EVENLY across the row (equal gaps
     logo↔lang↔burger). We dissolve the .header-actions wrapper (display:contents) so those three
     become direct flex siblings of the header row, then space-between distributes them evenly. */
  .header-inner {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .header-actions { display: contents; }

  /* Bigger logo on phones — height matched to the language pill. Sized by HEIGHT via the 6.07:1
     aspect: width scales with the viewport and caps so it never collides with the burger.
     Governs ≤430/≤360 too (those brackets no longer pin an explicit width). */
  .logo { width: auto; }
  .logo img {
    width: clamp(120px, 46vw, 188px); /* height ≈ the lang pill (~30px @393) — logo/pill/burger equal */
    height: auto;
    display: block;
  }

  /* Hamburger: box height = the lang pill, icon lines enlarged to fill it → same height as the
     logo and language switch, and big/easy to tap (user). */
  .nav-toggle { width: 46px; height: 33px; gap: 9px; }
  .nav-toggle span { width: 27px; height: 3px; }

  .theme-switch {
    grid-template-columns: repeat(2, 28px);
  }

  .language-switch {
    grid-template-columns: repeat(3, 30px);
  }

  .lang-option {
    width: 30px;
    height: 27px;
    font-size: 9px;
  }

  .theme-option {
    width: 28px;
    height: 27px;
  }

  .main-nav {
    top: 80px;
    grid-template-columns: 1fr;
  }

  /* Phone H1 = exactly 3 lines (each logical <span> on ONE line), no orphan word.
     The three spans are «Стабильные поставки тканей» / «для матрасов и мебели» /
     «со склада в России». Font shrunk so the longest span («…поставки тканей», 26
     chars) fits the ~91vw container at every phone width (320–430) → the natural
     wrap keeps each span whole (nowrap-pair binds «поставки тканей»); no forced
     nowrap, so nothing can overflow horizontally. Reads clearly at this size. */
  h1 {
    font-size: clamp(19px, 6.1vw, 26px);
    line-height: 1.2;
  }

  h2 {
    font-size: clamp(25px, 7vw, 30px);
    line-height: 1.2;
  }

  .section-head { margin-bottom: 30px; }
  .section-head p:not(.eyebrow) { font-size: 16px; }

  .hero-grid {
    padding: 34px 0 34px;
  }

  .eyebrow { margin-bottom: 16px; }

  /* Description: small enough to stay tight, but airier line-height so it never reads
     cramped (user). The forced desktop breaks flow INLINE on phones so each line fills
     the width (no short «и мягкой мебели» stub) — natural wrap + nbsp keep phrases whole. */
  .hero-lead {
    font-size: clamp(13px, 3.7vw, 14px);
    line-height: 1.66;
    margin-top: 16px;
  }
  /* Only the FIRST break flows inline (fills line 2 with «…— от мастерской»); the last
     sentence «Всегда в наличии под ваш продукт.» stays on its own line so nothing dangles. */
  .hero-lead .lead-break:first-of-type { display: inline; }

  .hero-bullets {
    grid-template-columns: 1fr;
    margin-top: 26px; /* air — hero was too cramped */
    gap: 14px;        /* breathing room between bullets */
  }

  /* Bullets: font ≤ the description, each on ONE line, with smaller icons (user). */
  .hero-bullets li {
    grid-template-columns: 28px minmax(0, 1fr);
    min-height: 28px;
    font-size: clamp(12px, 3.3vw, 13px);
    gap: 10px;
  }
  .hero-bullets .ic { width: 28px; height: 28px; }

  .hero-actions {
    gap: 12px;
    margin-top: 30px; /* air, but both CTAs still well within the first screen */
  }

  .button {
    width: 100%;
    min-width: 0; /* release the 300px desktop floor so full-width CTAs never overflow narrow phones */
    white-space: nowrap; /* full-width CTAs → label stays on one line (no 2-line buttons on phones) */
  }

  /* benefit-card icon-left layout is handled by the ≤900/portrait rule above (covers ≤680 too) */
  .benefit-card { padding: 26px 0; }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 0;
  }

  .stats-grid div {
    padding: 0 18px;
  }

  .stats-grid div:nth-child(2) {
    border-right: 0;
  }

  .stats-grid div:nth-child(3) {
    padding-left: 0;
  }

  .footer-form,
  .fabric-grid,
  .treatment-grid,
  .why-grid,
  .work-steps {
    grid-template-columns: 1fr;
  }

  .fabric-photo { height: clamp(200px, 56vw, 260px); }
  /* keep the card arrow level with the title: track the (variable) mobile photo height instead
     of the fixed desktop 242px (taller phone photos were pushing the title below the arrow). */
  .card-go { top: calc(clamp(200px, 56vw, 260px) + 18px); }

  .brand-panel {
    min-height: 320px;
  }
  .brand-panel::before { font-size: clamp(86px, 22vw, 130px); }

  .faq-answer { padding-right: 24px; }

  .consult-inner {
    align-items: stretch;
    flex-direction: column;
  }

  .footer-bottom {
    flex-direction: column;
  }
}

/* ---------- ≤430 small mobile: header stays one clean row; tighten switchers ---------- */
@media (max-width: 430px) {
  :root { --container: calc(100% - 28px); }

  .header-inner { min-height: 60px; gap: 8px; }
  .header-actions { gap: 6px; }
  /* logo governed by the ≤680 height-matched clamp (42vw, cap 172px) */

  .language-switch { grid-template-columns: repeat(3, 26px); gap: 0; padding: 2px; }
  .lang-option { width: 26px; height: 26px; font-size: 9.5px; }
  .theme-switch { grid-template-columns: repeat(2, 26px); gap: 0; padding: 2px; }
  .theme-option { width: 26px; height: 26px; }
  .theme-option svg { width: 15px; height: 15px; }
  .nav-toggle { width: 44px; height: 30px; } /* box = ≤430 pill (26 + 4); big icon fills it */
  .main-nav { top: 72px; }

  .stats-grid strong { font-size: clamp(36px, 12vw, 48px); }
  .test-steps li { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
  .test-steps .step-num { font-size: 28px; }
}

/* ---------- ≤360 (incl. 320 iPhone SE): one more notch so the header never overflows ---------- */
@media (max-width: 360px) {
  .header-actions { gap: 5px; }
  /* logo governed by the ≤680 height-matched clamp (42vw, cap 172px) */
  .language-switch { grid-template-columns: repeat(3, 23px); }
  .lang-option { width: 23px; height: 25px; font-size: 9px; }
  .theme-switch { grid-template-columns: repeat(2, 23px); }
  .theme-option { width: 23px; height: 25px; }
  .nav-toggle { width: 42px; height: 29px; } /* box = ≤360 pill (25 + 4); big icon fills it */
}

/* ---------- Mobile landscape: single-column compact hero (skill §15 — common failure point).
   A 2-col hero on a ~375px-tall landscape phone cut the Bekaert plate off the right edge, so we
   stack: copy on top, CTAs, then the partner plate as a FULL-WIDTH horizontal strip that can
   never be clipped. Vertical rhythm stays tight so the CTA sits near the first screen. ---------- */
@media (max-height: 560px) and (orientation: landscape) and (max-width: 900px) {
  .hero { min-height: auto; }
  .hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 20px 0 22px;
    gap: 14px;
  }
  .hero-media { justify-content: stretch; padding-top: 4px; width: 100%; }
  /* Bekaert plate (single wide lockup) → full-width, ultra-compact centred stack for the short
     landscape hero, so it can never be clipped at the right edge. */
  .dealer-card {
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
    padding: 12px clamp(18px, 3.5vw, 26px);
    gap: 8px;
  }
  .dealer-brand { width: min(232px, 66%); }
  .dealer-role { font-size: 11.5px; }
  .dealer-note { max-width: none; padding-top: 9px; }
  h1 { font-size: clamp(26px, 4.6vw, 32px); }
  .hero-lead { margin-top: 10px; }
  .hero-bullets { margin-top: 12px; }
  .hero-actions { margin-top: 18px; }
  .hero-actions .button { min-width: 0; width: auto; }
}

/* ---------- Landscape tablets, short viewport (≤1024 wide, 561–820 tall). The ≥1025 down-zoom
   ladder can't reach these widths, so the 2-col hero's fixed vertical rhythm pushed the CTA below
   the fold (1024×768, 960×600, 1007×601…). Compact H1 + inter-row margins so header + H1 + lead +
   bullets + BOTH CTAs stay on the first screen, without touching portrait or FullHD. ---------- */
@media (orientation: landscape) and (min-width: 901px) and (max-width: 1120px) and (max-height: 900px) {
  /* Wide-but-short landscape tablets (960×600, 1007×601, 1024×768, 1080×810 …) → the user's
     reference: a scaled-down FullHD hero. Balanced 2-col ALWAYS (never the single-column phone
     layout that stranded content left with a dead right half). `zoom:1` cancels the ≥1025 down-zoom
     ladder (its pinned 52px H1 overran the card at ~1080). Big-ish H1, full CTA labels, airy
     vh-based rhythm that still fits the short height, and the card aligned to the H1 top. */
  :root { zoom: 1; }
  .hero { min-height: auto; }
  .hero-grid {
    grid-template-columns: minmax(0, 0.62fr) minmax(220px, 0.38fr);
    align-items: start;
    min-height: calc(100svh - 60px);
    padding: clamp(22px, 4.5vh, 56px) 0 clamp(22px, 4vh, 48px);
    gap: clamp(24px, 3vw, 48px);
  }
  h1 { font-size: clamp(28px, 4.6vh, 42px); line-height: 1.15; }
  .hero-lead { margin-top: clamp(14px, 2.5vh, 24px); font-size: clamp(15px, 2.1vh, 18px); line-height: 1.55; }
  .hero-bullets { margin-top: clamp(16px, 3vh, 32px); gap: clamp(8px, 1.6vh, 14px); }
  .hero-bullets li { min-height: 38px; font-size: clamp(15px, 2vh, 17px); }
  .hero-bullets .ic { width: 38px; height: 38px; }
  .hero-actions { margin-top: clamp(18px, 4.4vh, 48px); flex-wrap: nowrap; } /* a touch more air → CTAs sit lower */
  /* both CTAs on ONE row, FULL labels (reference keeps «Получить консультацию») — kept single-line
     by trimming font + side padding (this range is above the ≤1024 nowrap block) */
  .hero-actions .button {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    font-size: clamp(12px, 1.4vh, 13.5px);
    padding-left: clamp(16px, 2vw, 30px);
    padding-right: clamp(16px, 2vw, 30px);
  }
  /* card top aligned with the H1 top (below the eyebrow), like the reference — balanced 2-col */
  .hero-media { align-items: flex-start; justify-content: flex-end; padding-top: clamp(60px, 8vh, 64px); }
  /* Bekaert card a touch smaller here (user: «карточку можно было бы уменьшить») + shorter, so the
     CTA row keeps bottom air even on the shortest (Dev-Inspector-trimmed) heights. */
  .dealer-card { width: min(344px, 100%); padding: clamp(16px, 2.6vh, 24px) clamp(22px, 2.4vw, 30px); gap: clamp(9px, 1.6vh, 14px); }
  .dealer-brand { width: min(236px, 84%); }
  .dealer-role { font-size: clamp(11px, 1.5vh, 12.5px); }
  .dealer-note { font-size: clamp(12px, 1.7vh, 13.5px); }
}

/* ---------- Portrait tablets (560–900 wide): tighten the stacked hero's vertical rhythm and keep
   both CTAs on ONE row so the WHOLE hero — copy + CTAs + the Bekaert strip — fits the screen
   without the plate being clipped at the bottom (real-device browser chrome eats ~100px, so leave
   margin). ---------- */
@media (orientation: portrait) and (min-width: 560px) and (max-width: 900px) {
  .hero-grid {
    padding: clamp(28px, 4vh, 48px) 0 clamp(20px, 3vh, 36px);
    gap: clamp(14px, 2vh, 22px);
  }
  .hero-lead { margin-top: clamp(14px, 2vh, 22px); }
  .hero-bullets { margin-top: clamp(16px, 2.4vh, 26px); }
  .hero-actions { margin-top: clamp(18px, 2.8vh, 34px); flex-wrap: nowrap; }
  /* one row (overrides the ≤680 phone full-width stack for 600/601 small tablets) → saves a row
     so the partner strip clears the fold */
  .hero-actions .button { flex: 1 1 0; min-width: 0; width: auto; }
}


/* ============ CUSTOM SCROLLBAR + SCROLL INDICATOR ============ */
/* Прячем нативную полосу прокрутки — навигацию даёт правый индикатор */
html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Правый индикатор прокрутки — тонкие риски по секциям */
.scroll-progress {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 12px;
  z-index: 90;
  transition: filter 0.3s ease;
}

/* Над фото-фоном hero тонкие риски сливаются — пока рейл над hero,
   даём им небольшую тень для читаемости; на остальных секциях фильтра
   нет (иначе в тёмной теме светлые риски размывались бы ореолом). */
.scroll-progress.over-hero {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.scroll-to-hero {
  width: 30px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wine);
  cursor: var(--cur-hand), pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-to-hero svg {
  width: 24px;
  height: 24px;
  display: block;
}

.scroll-to-hero.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-to-hero:hover {
  transform: translateY(-2px);
}

/* Тонкие элегантные риски; невидимая зона клика крупнее самой риски */
.scroll-tick,
.scroll-tick-minor {
  display: block;
  position: relative;
  width: 28px;
  cursor: var(--cur-hand), pointer;
}

.scroll-tick {
  height: 9px;
}

.scroll-tick-minor {
  height: 6px;
  pointer-events: none;
}

.scroll-tick::before,
.scroll-tick-minor::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 1px;
  border-radius: 4px;
  transition: width 0.25s ease, background-color 0.25s ease;
}

.scroll-tick::before {
  width: 15px;
  background-color: rgba(18, 16, 14, 0.78);
}

.scroll-tick-minor::before {
  width: 7px;
  background-color: rgba(18, 16, 14, 0.5);
}

.scroll-tick:hover::before {
  width: 20px;
  background-color: var(--gold);
}

.scroll-tick.active::before {
  width: 26px;
  height: 4px;
  background-color: var(--wine);
}

/* Подсказка-стрелка «листайте вниз» внизу hero */
.scroll-hint {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate3d(-50%, 6px, 0);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wine);
  cursor: var(--cur-hand), pointer;
  z-index: 80;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
}

.scroll-hint svg {
  width: 40px;
  height: 40px;
  display: block;
}

.scroll-hint.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translate3d(-50%, 0, 0);
  animation: scrollHintBounce 2.4s ease-in-out infinite;
}

.scroll-hint:hover svg {
  transform: scale(1.12);
}

@keyframes scrollHintBounce {
  0%, 100% { transform: translate3d(-50%, -5px, 0); }
  50% { transform: translate3d(-50%, 8px, 0); }
}

/* Индикатор и стрелка — только на десктопе с мышью/трекпадом */
@media (max-width: 1240px) {
  .scroll-progress,
  .scroll-hint {
    display: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .scroll-progress,
  .scroll-hint {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint.is-shown {
    animation: none;
  }
}

/* ============================================================
   ТЁМНАЯ ТЕМА — модификация той же страницы через токены.
   Светлая тема НЕ меняется: всё ниже scoped под [data-theme="dark"].
   ============================================================ */
[data-theme="dark"] {
  --white: #1a1a18;          /* фон страницы/секций — графит */
  --warm-white: #232220;     /* поверхность карточек */
  --soft: #1f1e1c;           /* чередующийся фон секций */
  --soft-2: #211f1d;
  --ink: #ece7df;            /* основной светлый текст */
  --muted: #a8a299;          /* приглушённый светлый */
  --line: rgba(236, 231, 223, 0.16);
  --line-soft: rgba(236, 231, 223, 0.08);
  --card-border: rgba(236, 231, 223, 0.16);
  /* Glass edge for dark theme: a translucent light rim on the dark navy surfaces. */
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  --glass-edge-btn: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 -1px 2px rgba(0, 0, 0, 0.22);
  /* Bottom-weighted glass glint for the dark-theme switch blocks (lit from below). */
  --glass-edge-under: inset 0 -1.5px 0 rgba(255, 255, 255, 0.30), inset 0 -8px 13px -6px rgba(255, 255, 255, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  --card-shadow: var(--glass-edge), 0 16px 40px rgba(0, 0, 0, 0.45);
  --gold: #c2975a;
  --gold-soft: #d6ad6f;
  --gold-tint: rgba(194, 151, 90, 0.14);
  --wine: #7c2230;
  --wine-dark: #52151d;
  --shadow: 0 22px 64px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* Тёмная тема: направленная тень, плотнее и с бОльшим смещением,
   чтобы читалась на тёмном фоне (без свечения/ореола). */
[data-theme="dark"] .ic,
[data-theme="dark"] .card-icon,
[data-theme="dark"] .line-icon,
[data-theme="dark"] .client-icon,
[data-theme="dark"] .work-steps .step-icon {
  filter:
    drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6))
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
}

/* Логотип: единый для обеих тем (Lgo Matteks.webp) */

/* Шапка и навигация */
[data-theme="dark"] .site-header { background: rgba(22, 22, 20, 0.86); }
[data-theme="dark"] .main-nav { color: var(--ink); }
[data-theme="dark"] .header-phone { color: var(--ink); }
[data-theme="dark"] .lang-option,
[data-theme="dark"] .theme-option { color: var(--muted); }
/* Switch border hidden for now (kept for easy restore): was rgba(200,158,98,.6) copper/gold on dark.
   Dark theme: darken the whole switch so it reads as its own recessed panel against the header, and give the
   inactive segments a faint lighter fill (equal height to the active wine pill, no border). */
[data-theme="dark"] .language-switch,
[data-theme="dark"] .theme-switch { border-color: transparent; background: rgba(0, 0, 0, 0.2); }
[data-theme="dark"] .lang-option:not(.is-active):not(:hover),
[data-theme="dark"] .theme-option:not(.is-active):not(:hover) { background: rgba(255, 255, 255, 0.05); }

/* Hero: тёмная вуаль вместо белой (читаемость текста слева) */
[data-theme="dark"] .hero::after {
  background:
    linear-gradient(90deg, rgba(20, 20, 18, 0.97) 0%, rgba(20, 20, 18, 0.92) 34%, rgba(20, 20, 18, 0.6) 56%, rgba(20, 20, 18, 0.08) 84%),
    linear-gradient(180deg, rgba(20, 20, 18, 0.45), rgba(20, 20, 18, 0.04));
}
[data-theme="dark"] .hero-lead { color: #d8d2c9; }

/* Точечные текстовые цвета, захардкоженные под свет */
[data-theme="dark"] .benefit-card h3 { color: var(--ink); }
[data-theme="dark"] .stats-grid span { color: var(--muted); }
[data-theme="dark"] .footer-bottom { color: var(--muted); }
[data-theme="dark"] .footer-bottom a,
[data-theme="dark"] .footer-form .consent a { color: #b9b1a8; }

/* Вино как ТЕКСТ/тонкий элемент плохо читается на графите → золото */
/* Фон под фактоидами (--white:#1a1a18) почти чёрный, поэтому тень нужна максимально
   плотная и многослойная: чёткий контур у глифа + глубокие расширяющиеся «лужи». */
[data-theme="dark"] .stats-grid strong {
  color: var(--gold);
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 1),
    0 3px 4px rgba(0, 0, 0, 1),
    0 7px 12px rgba(0, 0, 0, 1),
    0 14px 26px rgba(0, 0, 0, 0.95),
    0 24px 46px rgba(0, 0, 0, 0.85);
}
html.anim-ready[data-theme="dark"] .stats-grid strong.count-done {
  animation-name: factCountDoneDark;
}

@keyframes factCountDoneDark {
  0% { transform: scale(1); color: var(--gold); }
  45% { transform: scale(1.07); color: #fff8ed; }
  100% { transform: scale(1); color: var(--gold); }
}

[data-theme="dark"] .scroll-hint { color: var(--gold); }
[data-theme="dark"] .scroll-tick.active::before { background-color: var(--gold); }

/* Кнопка «вернуться к началу»: медное вино тонет в графите → золото */
[data-theme="dark"] .scroll-to-hero { color: var(--gold-soft); }

/* Риски индикатора прокрутки — светлые на тёмном */
[data-theme="dark"] .scroll-tick::before { background-color: rgba(236, 231, 223, 0.78); }
[data-theme="dark"] .scroll-tick-minor::before { background-color: rgba(236, 231, 223, 0.5); }

/* Вторичная (outline) кнопка: в тёмной теме hover медный, без белого фона. */
/* Dark theme: gold border+text so «Запросить прайс» is clearly visible and doesn't fight the
   wine-filled primary for attention (white would). Soft shadow for depth. */
[data-theme="dark"] .button-outline {
  color: #fff8ed;              /* cream label (user); gold border keeps it distinct from the primary */
  border-color: rgba(173, 122, 57, 0.42);  /* ещё прозрачней: DPR1 не рисует тоньше 1 физ.px,
                                               «тоньше» = светлее линия (user ×3) */
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}

/* Filled CTAs: same neutral shadow as the outline button on dark — navy glow only on hover. */
[data-theme="dark"] .button-primary,
[data-theme="dark"] .button-secondary {
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .button-primary:hover,
[data-theme="dark"] .button-secondary:hover {
  box-shadow: 0 20px 44px rgba(109, 27, 36, 0.42);
}
[data-theme="dark"] .button-outline:hover {
  background: transparent;
  border-color: #e6c188;
}

/* Тёмная тема: ховер-тень карточек — чисто чёрная. Тёплая rgba(40,38,34,.18) светлой темы
   на тёмном navy-фоне СВЕТЛЕЕ фона → читалась как свечение под карточкой (user: «убрать
   свечение снизу, тень оставить»). Бордер-подсветка на ховере (rgba(255,255,255,.38)) не тронута. */
[data-theme="dark"] .treatment-card:hover,
[data-theme="dark"] .why-grid article:hover,
[data-theme="dark"] .partner-grid article:hover,
[data-theme="dark"] .info-grid article:hover,
[data-theme="dark"] .brand-panel:hover {
  box-shadow: var(--glass-edge), 0 24px 54px rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .consult-inner:hover {
  box-shadow: var(--glass-edge), 0 24px 54px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .fabric-card:hover {
  box-shadow: var(--glass-edge), 0 22px 52px rgba(0, 0, 0, 0.55);
}

/* В тёмной теме автопривлечение CTA отключено: кнопки не должны становиться белыми. */
html.anim-ready[data-theme="dark"] .button-primary.cta-attention,
html.anim-ready[data-theme="dark"] .button-secondary.cta-attention {
  animation: none;
}

html.anim-ready[data-theme="dark"] .button-primary.cta-attention::before,
html.anim-ready[data-theme="dark"] .button-secondary.cta-attention::before {
  opacity: 0;
  animation: none;
}

/* Тёмная тема — hover. Прямые ссылки меняют цвет только при своём наведении. */
[data-theme="dark"] .main-nav a:hover,
[data-theme="dark"] .header-phone:hover {
  color: var(--gold-soft);
}

/* Каталог: заголовок не перекрашивается от hover карточки; только шеврон-индикатор. */
[data-theme="dark"] .fabric-card:hover .card-go {
  color: #fff8ed;
}

@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .ic:hover,
  [data-theme="dark"] .card-icon:hover,
  [data-theme="dark"] .line-icon:hover,
  [data-theme="dark"] .client-icon:hover,
  [data-theme="dark"] .work-steps .step-icon:hover {
    color: #fff8ed;
    filter: drop-shadow(0 10px 18px rgba(255, 248, 237, 0.18));
  }

  [data-theme="dark"] .eyebrow:hover {
    color: #fff8ed;
    text-shadow: 0 8px 18px rgba(255, 248, 237, 0.12);
  }

  [data-theme="dark"] h2:hover,
  [data-theme="dark"] h3:hover,
  [data-theme="dark"] .hero-lead:hover,
  [data-theme="dark"] .hero-bullets li span:hover,
  [data-theme="dark"] .section-head p:not(.eyebrow):hover,
  [data-theme="dark"] .quote-layout p:not(.eyebrow):hover,
  [data-theme="dark"] .benefit-card p:hover,
  [data-theme="dark"] .treatment-card li:hover,
  [data-theme="dark"] .info-grid li:hover,
  [data-theme="dark"] .test-steps .step-text:hover,
  [data-theme="dark"] .why-grid p:hover,
  [data-theme="dark"] .work-steps p:hover,
  [data-theme="dark"] .brand-panel p:not(.eyebrow):hover,
  [data-theme="dark"] .client-tags p:hover,
  [data-theme="dark"] .partner-grid p:hover,
  [data-theme="dark"] .text-stack p:hover,
  [data-theme="dark"] .info-grid p:hover,
  [data-theme="dark"] .consult-inner p:not(.eyebrow):hover,
  [data-theme="dark"] .faq-item > summary:hover,
  [data-theme="dark"] .faq-answer p:hover,
  [data-theme="dark"] .fabric-card p:hover,
  [data-theme="dark"] .treatment-card li:hover b,
  [data-theme="dark"] .info-grid li:hover b,
  [data-theme="dark"] .footer-cta h2:hover,
  [data-theme="dark"] .footer-form label:hover span,
  [data-theme="dark"] .footer-contacts p:hover,
  [data-theme="dark"] .footer-contacts a:hover,
  [data-theme="dark"] .footer-bottom span:hover,
  [data-theme="dark"] .footer-bottom a:hover,
  [data-theme="dark"] .footer-form .consent a:hover {
    color: var(--gold-soft);
    text-shadow: 0 8px 18px rgba(214, 173, 111, 0.12);
  }

  [data-theme="dark"] .fabric-card h3:hover,
  [data-theme="dark"] .fabric-card:hover h3:hover {
    color: #fff8ed;
    text-shadow: 0 8px 18px rgba(255, 248, 237, 0.12);
  }
}