/* ============================================================
   ЭкоПласт — Main Stylesheet
   Structure:
   1. CSS Variables & Reset
   2. Typography & Base
   3. Utility Classes
   4. Topbar
   5. Header
   6. Hero
   7. Quiz
   8. Process
   9. Advantages
   10. Works
   11. Reviews
   12. Contact
   13. Footer
   14. Responsive
   ============================================================ */


/* ============================================================
   1. CSS VARIABLES & RESET
   ============================================================ */

:root {
  /* Colors */
  --clr-topbar:      #1B4D2E;
  --clr-header:      #1B4D2E;
  --clr-accent:      #F4744A;
  --clr-accent-dark: #F4744A;
  --clr-bg:          #F0F7F3;
  --clr-card:        #FFFFFF;
  --clr-dark:        #1B4D2E;
  --clr-footer:      #111111;
  --clr-text:        #1C1C1C;
  --clr-text-muted:  #5D7A6A;
  --clr-text-light:  #FFFFFF;
  --clr-green-mid:   #2E7D4F;
  --clr-progress:    #2196F3;
  --clr-border:      #D9EAE0;

  /* Typography */
  --font: 'Golos Text', sans-serif;

  /* Layout */
  --container: 1200px;
  --section-v: 80px;

  /* UI */
  --radius:     10px;
  --radius-sm:  6px;
  --shadow:     0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 24px rgba(0, 0, 0, 0.12);
  --transition: 0.25s ease;
  color-scheme: light only;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light only;
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: #1f1f1f !important;
  background-color: #ffffff !important;
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

:root,
html,
body {
  color-scheme: light only !important;
}

header,
.navbar,
.site-header,
.top-bar,
.hero,
.hero-card,
.contact-bar {
  color-scheme: light only;
}

.site-header,
.header,
.navbar {
  background-color: #ffffff !important;
}

.top-bar,
.contact-bar,
.topbar {
  background-color: #15572f !important;
  color: #ffffff !important;
}

.btn,
.btn--accent,
.cta-button,
.hero-button,
.order-button {
  background-color: #ff7048 !important;
  color: #ffffff !important;
  filter: none !important;
}

img,
svg,
.logo {
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

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

ul { list-style: none; }

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

button {
  cursor: pointer;
  font-family: var(--font);
  border: none;
  background: none;
}


/* ============================================================
   2. TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4 {
  line-height: 1.25;
  font-weight: 700;
}

h1 { font-size: clamp(28px, 4vw, 48px); }
h2 { font-size: clamp(22px, 3vw, 36px); }
h3 { font-size: clamp(18px, 2.5vw, 24px); }


/* ============================================================
   3. UTILITY CLASSES
   ============================================================ */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: max(24px, calc(16px + env(safe-area-inset-left, 0px)))
    max(24px, calc(16px + env(safe-area-inset-right, 0px)));
}

/* Primary accent button (coral) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  transition: background var(--transition), transform var(--transition);
}

.btn--accent {
  background: var(--clr-accent);
  color: #fff;
}

.btn--accent:hover {
  background: var(--clr-accent-dark);
  transform: translateY(-1px);
}

/* Outline button */
.btn--outline {
  border: 2px solid var(--clr-accent);
  color: var(--clr-accent);
}

.btn--outline:hover {
  background: var(--clr-accent);
  color: #fff;
}

/* Dark green button */
.btn--dark {
  background: var(--clr-dark);
  color: #fff;
}

.btn--dark:hover {
  background: #143d23;
  transform: translateY(-1px);
}

/* Section heading */
.section-title {
  margin-bottom: 8px;
}

.section-sub {
  color: var(--clr-text-muted);
  margin-bottom: 40px;
}


/* ============================================================
   4. TOPBAR
   ============================================================ */

.topbar {
  background: var(--clr-topbar);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  padding-top: env(safe-area-inset-top, 0px);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 8px;
}

.topbar__contacts {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.topbar__link {
  color: rgba(255, 255, 255, 0.8);
  transition: color var(--transition);
}

.topbar__link:hover { color: #fff; }

.topbar__socials {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transition: background var(--transition);
}

.topbar__social:hover { background: var(--clr-accent); }
.topbar__social:hover svg { fill: #fff; }

.topbar__social svg {
  width: 14px;
  height: 14px;
  fill: rgba(255, 255, 255, 0.85);
  transition: fill var(--transition);
}

/* Branded icon (img) in topbar — no circle bg, show icon as-is */
.topbar__social:has(img) {
  background: transparent;
  width: auto;
  height: auto;
  border-radius: 0;
}
.topbar__social:has(img):hover { background: transparent; opacity: .82; }
.topbar__social img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: block;
}

.topbar__social--max {
  padding: 0;
}

.topbar__social--max .social-max-label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
  transition: color var(--transition);
}

.topbar__social--max:hover .social-max-label {
  color: #fff;
}


/* ============================================================
   5. HEADER
   ============================================================ */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #FFFFFF;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.10);
}

.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 14px;
}

/* Logo: no background pill — logo readable on white header */
.header__logo {
  display: flex;
  align-items: center;
  transition: opacity var(--transition);
}

.header__logo:hover { opacity: 0.85; }

.header__logo img {
  height: 52px;
  width: auto;
}

.header__nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header__nav-link {
  color: var(--clr-text);
  font-size: 14px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}

.header__nav-link:hover {
  color: var(--clr-dark);
  background: var(--clr-bg);
}

.header__nav-link--active {
  color: var(--clr-dark);
  font-weight: 600;
  background: var(--clr-bg);
}

/* Mobile burger — зона нажатия ~44px */
.header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 10px;
  margin-right: -4px;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  z-index: 160;
}

.header__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--clr-text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

/* Burger open state */
.header__burger--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__burger--open span:nth-child(2) { opacity: 0; }
.header__burger--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer — светлый фон, читаемые ссылки */
.header__nav--mobile-open {
  display: block !important;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  padding: 8px 0 16px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
  border-top: 1px solid var(--clr-border);
  z-index: 150;
  max-height: min(72vh, 560px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.header__nav--mobile-open .header__nav-list {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.header__nav--mobile-open .header__nav-link {
  display: block;
  padding: 14px 24px;
  font-size: 16px;
  border-radius: 0;
}

.header__nav--mobile-open .header__nav-link:hover,
.header__nav--mobile-open .header__nav-link--active {
  background: var(--clr-bg);
  color: var(--clr-dark);
}


/* ============================================================
   6. HERO
   ============================================================ */

.hero {
  min-height: calc(100vh - 125px);
  min-height: calc(100dvh - 125px);
  display: flex;
  align-items: center;
  position: relative;
  background: url('../assets/images/hero-bg.jpg') center center / cover no-repeat;
  padding-block: 32px;
}

/* colour overlay for readability */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(142, 155, 102, 0.50);
  pointer-events: none;
}

/* lift content above the overlay */
.hero .container {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  padding-inline: max(24px, calc(16px + env(safe-area-inset-left, 0px)))
    max(24px, calc(16px + env(safe-area-inset-right, 0px)));
}

.hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 48px);
  min-height: auto;
  width: 100%;
}

/* Left column */
.hero__content {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: clamp(28px, 2.5vw, 42px) clamp(24px, 2.5vw, 40px);
  max-width: min(620px, 56vw);
}

.hero__tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-green-mid);
  background: #E8F5EC;       /* fixed: independent of topbar color */
  border: 1px solid var(--clr-border);
  padding: 4px 12px;
  border-radius: 50px;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}

.hero__title {
  margin-bottom: 28px;
  font-size: clamp(36px, 3.4vw, 54px);
  line-height: 1.1;
}

.hero__title-accent {
  color: var(--clr-accent);
  white-space: nowrap;
  display: inline;
  overflow-wrap: anywhere;
  font-size: clamp(31px, 2.9vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  -webkit-text-stroke: 0.6px var(--clr-topbar);
  text-shadow: 0 0 0.5px var(--clr-topbar);
}

@media (max-width: 700px) {
  .hero__title {
    font-size: clamp(30px, 7.8vw, 44px);
    line-height: 1.06;
  }

  .hero__title-accent {
    font-size: clamp(24px, 6.2vw, 34px);
    letter-spacing: -0.015em;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .hero__title {
    font-size: clamp(28px, 8.3vw, 38px);
  }

  .hero__title-accent {
    font-size: clamp(21px, 6.6vw, 30px);
    letter-spacing: -0.02em;
  }
}

.hero__usps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 36px;
}

.hero__usp {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(17px, 1.25vw, 21px);
  font-weight: 600;
}

.hero__usp-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: var(--clr-green-mid);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__usp-icon svg {
  width: 12px;
  height: 12px;
  fill: #fff;
}

.hero__cta {
  width: 100%;
  font-size: clamp(23px, 1.7vw, 28px);
  font-weight: 700;
}

/* Right column: slider */
.hero__slider {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* Circle + arrows */
.hero__slider-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
}

.hero__product-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.hero__product-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.hero__circle {
  width: clamp(320px, 30vw, 460px);
  height: clamp(320px, 30vw, 460px);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border-radius: 50%;
  border: 1px solid #547153;
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 16px;
  box-sizing: border-box;
}

.hero__product-img {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  object-fit: contain;
  transform: none;
  transition: opacity 0.3s ease;
}

.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid #547153;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  z-index: 2;
}

.hero__arrow:hover {
  background: rgba(255, 255, 255, 0.28);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.hero__arrow:hover svg { stroke: #fff; }

.hero__arrow svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  transition: stroke var(--transition);
}

.hero__arrow--prev { left: -20px; }
.hero__arrow--next { right: -20px; }

/* Product name below circle */
.hero__slider-info {
  text-align: center;
  margin-top: 12px;
}

.hero__product-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  color: #fff;
}

.hero__product-name {
  font-size: clamp(15px, 1vw, 17px);
  font-weight: 600;
}

.hero__product-sep {
  opacity: 0.5;
  font-size: 14px;
}

.hero__product-price {
  font-size: clamp(18px, 1.2vw, 22px);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--clr-accent);
  -webkit-text-stroke: 0.6px var(--clr-topbar);
  text-shadow: 0 0 0.5px var(--clr-topbar);
}

/* Thumbnail column */
.hero__thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero__thumb {
  width: clamp(70px, 5vw, 88px);
  height: clamp(70px, 5vw, 88px);
  border-radius: var(--radius);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition), background var(--transition), box-shadow var(--transition);
  padding: 4px;
}

.hero__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
}

.hero__thumb:hover {
  transform: scale(1.07);
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.hero__thumb--active {
  border-color: var(--clr-accent);
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 2px var(--clr-accent);
}

/* Wrapper for stage + product name */
.hero__slider-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}


/* ============================================================
   7. QUIZ
   ============================================================ */

.quiz {
  display: none;
  padding-block: var(--section-v);
  background: #E8F5EC;
  position: relative;
  overflow: hidden;
}

/* ---- Bubble animation inside quiz ---- */
.quiz__bubbles {
  position: absolute;
  inset: -40%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  animation: quiz-bg-drift 18s ease-in-out infinite alternate;
}

.quiz__bubble {
  --size: 380px;
  --x: 10%;
  --y: 20%;
  --duration: 84s;
  --delay: -2s;
  --alpha: 0.55;
  --blur: 24px;
  --bubble-light: 203, 236, 215;
  --bubble-mid: 176, 226, 195;
  --bubble-deep: 151, 214, 176;
  --bubble-glow: 223, 246, 231;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--size) * 1.2);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  opacity: var(--alpha);
  filter: blur(calc(var(--blur) * 1.5));
  background:
    radial-gradient(circle at 38% 35%, rgba(var(--bubble-light), 0.92) 0%, rgba(var(--bubble-mid), 0.86) 60%, rgba(var(--bubble-deep), 0.78) 82%, rgba(var(--bubble-deep), 0) 100%),
    radial-gradient(circle at 68% 62%, rgba(var(--bubble-glow), 0.36) 0%, rgba(var(--bubble-glow), 0) 46%);
  animation: quiz-fly-a calc(var(--duration) * 0.28) linear var(--delay) infinite, quiz-breathe 12.6s ease-in-out var(--delay) infinite alternate;
  will-change: transform;
}

/* odd = green, even = orange */
/* odd = green, even = orange */
.quiz__bubble:nth-child(1)  { --size: clamp(455px,48vw,750px); --x: 42%; --y: -8%;  --duration: 69s; --delay: -20s; --alpha: 0.55; --blur: 21px; --bubble-light: 129,199,132; --bubble-mid: 76,175,80;   --bubble-deep: 56,142,60;   --bubble-glow: 165,214,167; animation-name: quiz-fly-a, quiz-breathe; }
.quiz__bubble:nth-child(2)  { --size: clamp(160px,17vw,260px); --x: 78%; --y: -12%; --duration: 60s; --delay: -7s;  --alpha: 0.5;  --blur: 12px; --bubble-light: 255,183,77;  --bubble-mid: 255,152,0;   --bubble-deep: 230,119,0;   --bubble-glow: 255,213,128; animation-name: quiz-fly-b, quiz-breathe; }
.quiz__bubble:nth-child(3)  { --size: clamp(280px,30vw,440px); --x: 58%; --y: 34%;  --duration: 75s; --delay: -15s; --alpha: 0.52; --blur: 26px; --bubble-light: 129,199,132; --bubble-mid: 76,175,80;   --bubble-deep: 56,142,60;   --bubble-glow: 165,214,167; animation-name: quiz-fly-c, quiz-breathe; }
.quiz__bubble:nth-child(4)  { --size: clamp(200px,21vw,330px); --x: 92%; --y: 48%;  --duration: 63s; --delay: -18s; --alpha: 0.48; --blur: 16px; --bubble-light: 255,183,77;  --bubble-mid: 255,152,0;   --bubble-deep: 230,119,0;   --bubble-glow: 255,213,128; animation-name: quiz-fly-d, quiz-breathe; }
.quiz__bubble:nth-child(5)  { --size: clamp(130px,14vw,220px); --x: 52%; --y: 62%;  --duration: 69s; --delay: -13s; --alpha: 0.5;  --blur: 14px; --bubble-light: 129,199,132; --bubble-mid: 76,175,80;   --bubble-deep: 56,142,60;   --bubble-glow: 165,214,167; animation-name: quiz-fly-b, quiz-breathe; }
.quiz__bubble:nth-child(6)  { --size: clamp(240px,26vw,380px); --x: 74%; --y: -20%; --duration: 57s; --delay: -5s;  --alpha: 0.5;  --blur: 22px; --bubble-light: 255,183,77;  --bubble-mid: 255,152,0;   --bubble-deep: 230,119,0;   --bubble-glow: 255,213,128; animation-name: quiz-fly-d, quiz-breathe; }
.quiz__bubble:nth-child(7)  { --size: clamp(300px,34vw,500px); --x: 68%; --y: 72%;  --duration: 78s; --delay: -24s; --alpha: 0.54; --blur: 28px; --bubble-light: 129,199,132; --bubble-mid: 76,175,80;   --bubble-deep: 56,142,60;   --bubble-glow: 165,214,167; animation-name: quiz-fly-a, quiz-breathe; }
.quiz__bubble:nth-child(8)  { --size: clamp(150px,16vw,240px); --x: 48%; --y: 76%;  --duration: 63s; --delay: -11s; --alpha: 0.46; --blur: 8px;  --bubble-light: 255,183,77;  --bubble-mid: 255,152,0;   --bubble-deep: 230,119,0;   --bubble-glow: 255,213,128; animation-name: quiz-fly-c, quiz-breathe; }
.quiz__bubble:nth-child(9)  { --size: clamp(180px,19vw,290px); --x: 64%; --y: 8%;   --duration: 66s; --delay: -9s;  --alpha: 0.5;  --blur: 19px; --bubble-light: 129,199,132; --bubble-mid: 76,175,80;   --bubble-deep: 56,142,60;   --bubble-glow: 165,214,167; animation-name: quiz-fly-d, quiz-breathe; }
.quiz__bubble:nth-child(10) { --size: clamp(120px,13vw,200px); --x: 86%; --y: 24%;  --duration: 54s; --delay: -6s;  --alpha: 0.46; --blur: 10px; --bubble-light: 255,183,77;  --bubble-mid: 255,152,0;   --bubble-deep: 230,119,0;   --bubble-glow: 255,213,128; animation-name: quiz-fly-b, quiz-breathe; }
.quiz__bubble:nth-child(11) { --size: clamp(210px,22vw,330px); --x: 56%; --y: 58%;  --duration: 72s; --delay: -17s; --alpha: 0.5;  --blur: 15px; --bubble-light: 129,199,132; --bubble-mid: 76,175,80;   --bubble-deep: 56,142,60;   --bubble-glow: 165,214,167; animation-name: quiz-fly-a, quiz-breathe; }
.quiz__bubble:nth-child(12) { --size: clamp(140px,15vw,230px); --x: 76%; --y: 82%;  --duration: 60s; --delay: -12s; --alpha: 0.46; --blur: 13px; --bubble-light: 255,183,77;  --bubble-mid: 255,152,0;   --bubble-deep: 230,119,0;   --bubble-glow: 255,213,128; animation-name: quiz-fly-c, quiz-breathe; }
.quiz__bubble:nth-child(13) { --size: clamp(220px,24vw,360px); --x: 18%; --y: 12%;  --duration: 72s; --delay: -8s;  --alpha: 0.42; --blur: 12px; --bubble-light: 129,199,132; --bubble-mid: 76,175,80;   --bubble-deep: 56,142,60;   --bubble-glow: 165,214,167; animation-name: quiz-fly-c, quiz-breathe; }
.quiz__bubble:nth-child(14) { --size: clamp(170px,18vw,280px); --x: 24%; --y: 44%;  --duration: 63s; --delay: -14s; --alpha: 0.44; --blur: 10px; --bubble-light: 255,183,77;  --bubble-mid: 255,152,0;   --bubble-deep: 230,119,0;   --bubble-glow: 255,213,128; animation-name: quiz-fly-b, quiz-breathe; }
.quiz__bubble:nth-child(15) { --size: clamp(140px,15vw,230px); --x: 28%; --y: 72%;  --duration: 57s; --delay: -5s;  --alpha: 0.4;  --blur: 12px; --bubble-light: 129,199,132; --bubble-mid: 76,175,80;   --bubble-deep: 56,142,60;   --bubble-glow: 165,214,167; animation-name: quiz-fly-d, quiz-breathe; }
.quiz__bubble:nth-child(16) { --size: clamp(170px,18vw,280px); --x: 48%; --y: 36%;  --duration: 66s; --delay: -10s; --alpha: 0.44; --blur: 14px; --bubble-light: 255,183,77;  --bubble-mid: 255,152,0;   --bubble-deep: 230,119,0;   --bubble-glow: 255,213,128; animation-name: quiz-fly-b, quiz-breathe; }
.quiz__bubble:nth-child(17) { --size: clamp(220px,23vw,350px); --x: 56%; --y: 44%;  --duration: 72s; --delay: -16s; --alpha: 0.48; --blur: 18px; --bubble-light: 129,199,132; --bubble-mid: 76,175,80;   --bubble-deep: 56,142,60;   --bubble-glow: 165,214,167; animation-name: quiz-fly-c, quiz-breathe; }
.quiz__bubble:nth-child(18) { --size: clamp(180px,20vw,300px); --x: 62%; --y: 54%;  --duration: 60s; --delay: -7s;  --alpha: 0.44; --blur: 18px; --bubble-light: 255,183,77;  --bubble-mid: 255,152,0;   --bubble-deep: 230,119,0;   --bubble-glow: 255,213,128; animation-name: quiz-fly-d, quiz-breathe; }
.quiz__bubble:nth-child(19) { --size: clamp(140px,15vw,230px); --x: 52%; --y: 58%;  --duration: 63s; --delay: -12s; --alpha: 0.42; --blur: 16px; --bubble-light: 129,199,132; --bubble-mid: 76,175,80;   --bubble-deep: 56,142,60;   --bubble-glow: 165,214,167; animation-name: quiz-fly-a, quiz-breathe; }
.quiz__bubble:nth-child(20) { --size: clamp(120px,13vw,210px); --x: 44%; --y: 50%;  --duration: 57s; --delay: -4s;  --alpha: 0.4;  --blur: 17px; --bubble-light: 255,183,77;  --bubble-mid: 255,152,0;   --bubble-deep: 230,119,0;   --bubble-glow: 255,213,128; animation-name: quiz-fly-b, quiz-breathe; }

.quiz > .container,
.quiz > *:not(.quiz__bubbles) {
  position: relative;
  z-index: 1;
}

@keyframes quiz-breathe {
  0%   { opacity: calc(var(--alpha) - 0.12); filter: blur(calc(var(--blur) * 1.5 - 2px)); }
  100% { opacity: calc(var(--alpha) + 0.1);  filter: blur(calc(var(--blur) * 1.5 + 1px)); }
}
@keyframes quiz-fly-a {
  0%   { transform: translate3d(-6vw,  -18vh, 0) scale(0.9);  }
  25%  { transform: translate3d(34vw,   24vh, 0) scale(1.18); }
  50%  { transform: translate3d(52vw,  -12vh, 0) scale(1.02); }
  75%  { transform: translate3d(12vw,  -34vh, 0) scale(1.12); }
  100% { transform: translate3d(-6vw,  -18vh, 0) scale(0.9);  }
}
@keyframes quiz-fly-b {
  0%   { transform: translate3d( 24vw, -18vh, 0) scale(1);    }
  25%  { transform: translate3d(-18vw,  30vh, 0) scale(1.16); }
  50%  { transform: translate3d(-26vw,   4vh, 0) scale(1.02); }
  75%  { transform: translate3d( 26vw, -34vh, 0) scale(1.12); }
  100% { transform: translate3d( 24vw, -18vh, 0) scale(1);    }
}
@keyframes quiz-fly-c {
  0%   { transform: translate3d(-10vw,  22vh, 0) scale(0.92); }
  25%  { transform: translate3d( 30vw, -34vh, 0) scale(1.14); }
  50%  { transform: translate3d( 44vw,  14vh, 0) scale(1.02); }
  75%  { transform: translate3d(  8vw,  38vh, 0) scale(1.12); }
  100% { transform: translate3d(-10vw,  22vh, 0) scale(0.92); }
}
@keyframes quiz-fly-d {
  0%   { transform: translate3d( 18vw,  18vh, 0) scale(0.94); }
  25%  { transform: translate3d(-10vw, -30vh, 0) scale(1.12); }
  50%  { transform: translate3d(-20vw,  26vh, 0) scale(1.04); }
  75%  { transform: translate3d( 30vw,  40vh, 0) scale(1.16); }
  100% { transform: translate3d( 18vw,  18vh, 0) scale(0.94); }
}
@keyframes quiz-bg-drift {
  0%   { transform: translate3d(4vw, -3vh, 0) scale(1.02); }
  100% { transform: translate3d(9vw,  4vh, 0) scale(1.08); }
}

.quiz__card {
  background: #547153;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 48px;
  max-width: 100%;
  margin-inline: auto;
  color: #bcd4ba;
}

.quiz__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
}

/* Progress bar */
.quiz__bar-track {
  height: 4px;
  background: var(--clr-border);
  border-radius: 2px;
  margin-bottom: 32px;
  overflow: hidden;
}

.quiz__bar-fill {
  height: 100%;
  background: var(--clr-progress);
  border-radius: 2px;
  transition: width 0.4s ease;
  width: 33%;
}

.quiz__step { display: none; }
.quiz__step--active { display: block; }

.quiz__step h3 {
  margin-bottom: 24px;
}

/* Option rows */
.quiz__options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.quiz__option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 2px solid rgba(255,255,255,0.35);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  font-size: 15px;
  font-weight: 500;
  color: #bcd4ba;
}

.quiz__option:hover {
  border-color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.1);
}

.quiz__option input[type="radio"] { display: none; }

/* Custom radio circle */
.quiz__option-dot {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  transition: border-color var(--transition), background var(--transition);
}

.quiz__option input:checked ~ .quiz__option-dot {
  border-color: var(--clr-progress);
  background: var(--clr-progress);
}

.quiz__option--selected {
  border-color: #fff;
  background: rgba(255,255,255,0.15);
}

.quiz__next {
  padding: 13px 32px;
  border-radius: 50px;
  background: var(--clr-progress);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  transition: background var(--transition), opacity var(--transition);
}

.quiz__next:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.quiz__next:not(:disabled):hover { background: #1976D2; }

/* Final step: thank-you message */
.quiz__thanks {
  text-align: center;
  padding: 16px 0;
}

.quiz__thanks h3 { margin-bottom: 12px; }
.quiz__thanks p  { color: rgba(255,255,255,0.75); }


/* ============================================================
   8. PROCESS
   ============================================================ */

.process {
  padding-block: var(--section-v);
  background: #fafffb;
  border: 1px solid #547153;
}

.process__header {
  text-align: center;
  margin-bottom: 48px;
}

/* Vertical stack of step cards */
.process__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 720px;
  margin-inline: auto;
  position: relative;
}

/* Connecting line */
.process__list::before {
  content: '';
  position: absolute;
  left: 28px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: var(--clr-border);
  z-index: 0;
}

.process__item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
  background: var(--clr-card);
  border: 1px solid #547153;
  border-radius: var(--radius);
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  position: relative;
  z-index: 1;
}

.process__item:last-child { margin-bottom: 0; }

.process__num {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--clr-dark);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.process__body h3 {
  margin-bottom: 6px;
  font-size: 18px;
}

.process__body p {
  color: var(--clr-text-muted);
  font-size: 14px;
}


/* ============================================================
   9. ADVANTAGES
   ============================================================ */

.advantages {
  padding-block: var(--section-v);
  background: #E8F5EC;
  color: var(--clr-text);
}

.advantages__header {
  text-align: center;
  margin-bottom: 48px;
}

.advantages__header h2 { color: var(--clr-dark); }

.advantages__header p {
  color: var(--clr-text-muted);
}

.advantages__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 800px;
  margin-inline: auto;
}

.advantages__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: rgba(255,255,255,0.55);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.4);
}

.advantages__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--clr-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.advantages__icon svg {
  width: 16px;
  height: 16px;
  fill: #fff;
}

.advantages__text strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--clr-dark);
}

.advantages__text span {
  font-size: 13px;
  color: var(--clr-text-muted);
}


/* ============================================================
   10. WORKS
   ============================================================ */

.works {
  padding-block: var(--section-v);
  background: #fafffb;
  border: 1px solid #547153;
}

.works__header {
  text-align: center;
  margin-bottom: 40px;
}

/* Carousel container */
.works__carousel {
  position: relative;
}

.works__track-wrapper {
  overflow: hidden;
  border-radius: var(--radius);
}

.works__track {
  display: flex;
  gap: 20px;
  transition: transform 0.4s ease;
}

.works__slide {
  flex-shrink: 0;
  width: calc((100% - 40px) / 3);
}

.works__slide img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.works__slide-caption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--clr-text-muted);
  font-weight: 500;
}

/* Carousel nav */
.works__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}

.works__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  color: var(--clr-text);
  background: var(--clr-card);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}

.works__btn:hover {
  background: var(--clr-accent);
  color: #fff;
}

.works__btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  flex-shrink: 0;
}

.works__btn svg polyline {
  stroke: currentColor;
}

/* Dot indicators */
.works__dots {
  display: flex;
  gap: 8px;
}

.works__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clr-border);
  transition: background var(--transition), width var(--transition);
}

.works__dot--active {
  background: var(--clr-accent);
  width: 24px;
  border-radius: 4px;
}


/* ============================================================
   11. REVIEWS
   ============================================================ */

.reviews {
  padding-block: var(--section-v);
  background: #E8F5EC;
}

.reviews__header {
  text-align: center;
  margin-bottom: 16px;
}

/* Overall rating badge */
.reviews__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
}

.reviews__score {
  font-size: 40px;
  font-weight: 900;
  color: var(--clr-text);
}

.reviews__stars {
  display: flex;
  gap: 4px;
}

.reviews__stars svg {
  width: 22px;
  height: 22px;
  fill: #FFBB00;
}

.reviews__source {
  font-size: 13px;
  color: var(--clr-dark);
}

/* Grid of review cards */
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.reviews__card {
  padding: 24px;
  background: #FFFFFF;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--shadow);
}

.reviews__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.reviews__author {
  font-weight: 600;
  font-size: 15px;
}

.reviews__date {
  font-size: 12px;
  color: var(--clr-text-muted);
  margin-top: 2px;
}

.reviews__card-stars {
  display: flex;
  gap: 3px;
}

.reviews__card-stars svg {
  width: 16px;
  height: 16px;
  fill: #FFBB00;
}

.reviews__text {
  font-size: 14px;
  color: var(--clr-text);
  line-height: 1.65;
}


/* ============================================================
   12. CONTACT
   ============================================================ */

.contact {
  padding-block: var(--section-v);
  background: #fafffb;
  border: 1px solid #547153;
  color: var(--clr-text);
}

.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* Left: title + contacts */
.contact__title {
  font-size: clamp(24px, 3vw, 36px);
  margin-bottom: 12px;
  color: var(--clr-dark);
}

.contact__sub {
  color: var(--clr-text-muted);
  margin-bottom: 36px;
  font-size: 15px;
}

.contact__details {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact__detail {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 500;
  color: var(--clr-text);
  transition: color var(--transition);
}

.contact__detail:hover { color: var(--clr-dark); }

.contact__detail-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(27, 77, 46, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact__detail-icon svg {
  width: 18px;
  height: 18px;
  fill: var(--clr-dark);
}

/* Right: form */
.contact__form-card {
  background: var(--clr-card);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow-md);
}

.contact__form-card h3 {
  color: var(--clr-text);
  margin-bottom: 4px;
}

.contact__form-card p {
  color: var(--clr-text-muted);
  font-size: 14px;
  margin-bottom: 28px;
}

.form__group {
  margin-bottom: 16px;
}

.form__input,
.form__textarea {
  width: 100%;
  padding: 13px 16px;
  border: 2px solid var(--clr-border);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 15px;
  color: var(--clr-text);
  background: var(--clr-bg);
  transition: border-color var(--transition);
  outline: none;
}

.form__input:focus,
.form__textarea:focus {
  border-color: var(--clr-green-mid);
}

.form__textarea {
  height: 100px;
  resize: vertical;
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: #A0B4A8;
}

.form__submit {
  width: 100%;
  margin-top: 8px;
}

.form__note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--clr-text-muted);
  text-align: center;
}

.form__consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--clr-text-muted);
  margin-bottom: 12px;
  cursor: pointer;
  line-height: 1.4;
}

.form__consent input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--clr-green-mid);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.form__consent-link {
  color: var(--clr-green-mid);
  text-decoration: underline;
}


/* ============================================================
   13. FOOTER
   ============================================================ */

.footer {
  background: #FFFFFF;
  color: var(--clr-text-muted);
  padding-block: 56px 28px;
  border-top: 1px solid var(--clr-border);
}

.footer__top {
  display: grid;
  grid-template-columns: 240px repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: 28px;
}

.footer__brand img {
  height: 48px;
  width: auto;
  margin-bottom: 12px;
  opacity: 1;
}

.footer__brand p {
  font-size: 13px;
  line-height: 1.6;
}

.footer__col-title {
  color: var(--clr-dark);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__link {
  font-size: 14px;
  color: var(--clr-text-muted);
  transition: color var(--transition);
}

.footer__link:hover { color: var(--clr-dark); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--clr-text-muted);
}

.footer__socials {
  display: flex;
  gap: 10px;
}

.footer__social {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}

.footer__social:hover { background: var(--clr-accent); }

.footer__social svg {
  width: 15px;
  height: 15px;
  fill: var(--clr-text-muted);
  transition: fill var(--transition);
}

.footer__social:hover svg { fill: #fff; }

.footer__social:has(img) {
  background: transparent;
  width: auto;
  height: auto;
  border-radius: 0;
}
.footer__social:has(img):hover { background: transparent; opacity: .82; }
.footer__social img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: block;
}

.footer__social--max {
  padding: 0;
}

.footer__social--max .social-max-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--clr-text-muted);
  transition: color var(--transition);
}

.footer__social--max:hover .social-max-label {
  color: #fff;
}


/* ============================================================
   14. RESPONSIVE
   ============================================================ */

/* Планшеты и «широкие» телефоны: меню-бургер, иначе 7 пунктов ломают шапку */
@media (max-width: 900px) {
  .header__nav { display: none; }
  .header__burger { display: flex; }
}

@media (max-width: 980px) {
  .hero__circle {
    width: 300px;
    height: 300px;
  }

  .hero__product-img {
    width: 220px;
    height: 220px;
  }

  .hero__thumb {
    width: 64px;
    height: 64px;
  }

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

@media (max-width: 700px) {
  :root { --section-v: 56px; }

  /* Topbar: compact rows on small screens */
  .topbar__inner {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    text-align: center;
    padding-block: 6px;
  }

  .topbar__contacts {
    justify-content: center;
    gap: 12px;
  }

  .topbar__social {
    min-width: 30px;
    min-height: 30px;
  }

  .topbar__social svg {
    width: 14px;
    height: 14px;
  }

  .topbar__social--max {
    padding: 0;
  }

  /* Hero: stack vertically */
  .hero__inner {
    flex-direction: column;
    justify-content: center;
    min-height: auto;
    gap: 36px;
  }

  .hero__content {
    max-width: 100%;
  }

  .hero__slider {
    flex-direction: column;
    gap: 20px;
  }

  .hero__circle {
    width: 260px;
    height: 260px;
  }

  .hero__thumbs {
    flex-direction: row;
    justify-content: center;
  }

  .hero__arrow {
    width: 38px;
    height: 38px;
  }

  .hero__arrow--prev { left: 2px; }
  .hero__arrow--next { right: 2px; }

  .hero__product-pill {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    text-align: center;
  }

  /* Quiz */
  .quiz__card { padding: 28px 20px; }

  /* Contact */
  .contact__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Works: show 1 slide */
  .works__slide {
    width: 100%;
  }

  .works__controls {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    padding-inline: 6px;
    overflow: hidden;
  }

  .works__btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    border: 1px solid #d6e7de;
    background: #ffffff;
    color: #355b47;
    box-shadow: 0 2px 10px rgba(17, 37, 28, 0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
  }

  .works__dots {
    min-width: 0;
    gap: 6px;
    justify-content: center;
    overflow: hidden;
  }

  .works__dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
  }

  .works__dot--active {
    width: 18px;
  }

  .works__btn svg {
    width: 20px;
    height: 20px;
  }

  .works__btn svg polyline {
    stroke-width: 2.2;
  }

  .works__btn:active {
    transform: scale(0.97);
  }

  /* Reviews: 1 column */
  .reviews__grid {
    grid-template-columns: 1fr;
  }

  /* Advantages: 1 column */
  .advantages__grid {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .page-hero {
    padding-block: 40px 28px;
  }

  .page-hero__breadcrumb {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .product-detail__card {
    padding: 20px 18px;
  }

  .product-card__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .product-card__btn {
    width: 100%;
    text-align: center;
  }

  .product-category-card__head {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .footer__top { grid-template-columns: 1fr; }
  .reviews__grid { grid-template-columns: 1fr; }
  .topbar__inner { gap: 2px; }
  .topbar__contacts {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
  }

  .topbar__link {
    font-size: 12px;
    line-height: 1.25;
  }

  .container {
    padding-inline: max(16px, calc(12px + env(safe-area-inset-left, 0px)))
      max(16px, calc(12px + env(safe-area-inset-right, 0px)));
  }

  .hero .container {
    padding-inline: max(16px, calc(12px + env(safe-area-inset-left, 0px)))
      max(16px, calc(12px + env(safe-area-inset-right, 0px)));
  }

  .product-table--simple th {
    width: auto;
    min-width: 96px;
    max-width: 42%;
  }

  .hero__cta {
    width: 100%;
    max-width: 360px;
  }

  .form__submit {
    width: 100%;
  }

  .form__input,
  .form__textarea {
    min-height: 48px;
    font-size: 16px;
  }

  .form__textarea {
    min-height: 120px;
  }

  .product-detail__price {
    font-size: clamp(20px, 6vw, 26px);
  }

  .product-detail__meta .btn--accent {
    display: flex;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }

  .product-table-wrap {
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .product-source__disclaimer,
  .product-source > .product-source__disclaimer:first-of-type {
    font-size: 15px !important;
    line-height: 1.35;
    padding-inline: 4px;
  }

  .contacts-map iframe {
    height: min(52vh, 380px);
  }

  .page-hero {
    padding-inline: max(0px, env(safe-area-inset-left, 0px))
      max(0px, env(safe-area-inset-right, 0px));
  }

  .page-hero__title {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}


/* ============================================================
   15. PAGE HERO — reusable inner-page banner
   ============================================================ */

/* ============================================================
   PRODUCTS PAGE
   ============================================================ */

.products-catalog {
  padding-block: var(--section-v);
  background: #fafffb;
  border: 1px solid #547153;
}

.products-category-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.product-category-card {
  background: #fff;
  border: 1px solid #547153;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: box-shadow var(--transition), transform var(--transition);
}

.product-category-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}

.product-category-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.product-category-card__img {
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E8F5EC;
  overflow: hidden;
}

.product-category-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
}

.product-category-card__img--placeholder svg {
  width: 72px;
  height: 72px;
  stroke: #547153;
  fill: none;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}

.product-category-card__body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.product-category-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.product-category-card__title {
  margin: 0;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  color: var(--clr-text);
}

.product-category-card__description {
  max-width: 760px;
  margin: 0;
  color: var(--clr-text-muted);
  font-size: 15px;
  line-height: 1.55;
}

.product-category-card__count {
  flex: 0 0 auto;
  min-width: 42px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #E8F5EC;
  color: #547153;
  font-weight: 700;
  text-align: center;
}

.product-category-card__open {
  display: block;
  margin-top: auto;
  width: 100%;
  padding: 11px 16px;
  border: 1px solid #547153;
  border-radius: var(--radius-sm);
  background: #547153;
  color: #fff;
  cursor: pointer;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  transition: background var(--transition);
}

.product-category-card__open:hover {
  background: #3d5540;
}

.products-category-products {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.products-category-back {
  width: fit-content;
  color: #547153;
  font-weight: 700;
}

.products-category-back:hover {
  color: #3d5540;
}

a.site-contact-hidden {
  display: none !important;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.product-card {
  background: var(--clr-card);
  border: 1px solid #547153;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}

.product-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.product-card[hidden] { display: none; }

.product-card__img {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E8F5EC;
  overflow: hidden;
}

.product-card__img-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.product-card__img-link:focus-visible {
  outline: 2px solid #547153;
  outline-offset: -4px;
}

.product-card__img-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
}

.product-card__img--placeholder {
  background: linear-gradient(135deg, #E8F5EC 0%, #d4ecd4 100%);
}

.product-card__img--placeholder svg {
  width: 64px;
  height: 64px;
  stroke: #547153;
  fill: none;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}

.product-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-card__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.35;
}

.product-card__price {
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-accent);
}

.product-card__actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

.product-card__btn {
  flex: 1;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  border: 1px solid #547153;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  font-family: var(--font);
}

.product-card__btn--primary {
  background: #547153;
  color: #fff;
  border-color: #547153;
}

.product-card__btn--primary:hover { background: #3d5540; }

.product-card__btn--secondary {
  background: transparent;
  color: var(--clr-text);
}

.product-card__btn--secondary:hover {
  background: #E8F5EC;
}

@media (max-width: 1100px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .products-category-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .products-category-list { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .products-grid { grid-template-columns: 1fr; }
  .product-category-card__img { height: 200px; }
}

.product-detail {
  padding-block: var(--section-v);
  background: #fafffb;
  border: 1px solid #547153;
}

.product-detail__card {
  background: #fff;
  border: 1px solid #547153;
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}

.product-detail__head {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 28px;
  margin-bottom: 28px;
}

.product-detail__image {
  border: 1px solid #547153;
  border-radius: var(--radius);
  background: #E8F5EC;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-detail__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
}

.product-detail__image--empty {
  color: var(--clr-text-muted);
  font-size: 15px;
}

.product-detail__tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid #547153;
  background: #E8F5EC;
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-dark);
  margin-bottom: 10px;
}

.product-detail__name {
  font-size: clamp(28px, 3.4vw, 42px);
  color: #2c5a3b;
  margin-bottom: 10px;
}

.product-detail__price {
  color: var(--clr-accent);
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 12px;
}

.product-detail__desc {
  color: #47614f;
  margin-bottom: 20px;
}

.product-detail__meta .btn--accent {
  background: var(--clr-accent);
}

.product-detail__meta .btn--accent:hover {
  background: var(--clr-accent-dark);
}

.product-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.product-docs__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid #547153;
  border-radius: var(--radius-sm);
  background: #E8F5EC;
  color: var(--clr-text);
  font-size: 14px;
  font-weight: 700;
}

.product-docs__link::before {
  content: attr(data-type);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 22px;
  border-radius: 6px;
  background: #547153;
  color: #fff;
  font-size: 11px;
}

.product-docs__link:hover {
  background: #dcefe2;
}

.product-detail__section-title {
  margin: 26px 0 12px;
  font-size: clamp(20px, 2.6vw, 30px);
  color: var(--clr-dark);
}

.product-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.product-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
  font-size: 14px;
  background: #fff;
}

.product-table th,
.product-table td {
  border: 1px solid #547153;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.product-table thead th {
  background: #E8F5EC;
  color: var(--clr-dark);
  font-weight: 700;
}

.product-table tbody tr:nth-child(even) {
  background: #fafffb;
}

.product-table--simple {
  min-width: 100%;
}

.product-table--simple th {
  width: 240px;
  background: #E8F5EC;
}

.product-source {
  color: #47614f;
  overflow-x: visible;
  padding-inline: 0;
}

.product-source h1,
.product-source h2,
.product-source h3,
.product-source h4 {
  font-size: clamp(19px, 2vw, 28px);
  margin: 22px 0 10px;
  color: var(--clr-dark);
}

.product-source p,
.product-source li {
  font-size: 15px;
  line-height: 1.7;
}

.product-source s {
  color: #7f8c8d;
  text-decoration-line: line-through;
  text-decoration-color: #d13a3a;
  text-decoration-thickness: 2px;
}

.product-source td.product-source__new-price {
  font-weight: 700;
}

.product-source td.product-source__new-price--orange {
  color: #5fae63;
}

.product-source td.product-source__new-price--green {
  color: #5fae63;
}

.product-source ul {
  list-style: disc;
  padding-left: 20px;
}

.product-source .table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 14px 0 0;
}

.product-source table {
  width: 100%;
  display: table;
  border-collapse: collapse;
  table-layout: fixed;
  border-left: 1px solid #547153;
  border-right: 1px solid #547153;
  margin: 0 0 24px;
}

.product-source th,
.product-source td {
  border: 1px solid #547153;
  padding: clamp(4px, 0.6vw, 8px) clamp(4px, 0.6vw, 8px);
  text-align: center;
  vertical-align: middle;
  font-size: clamp(11px, 0.9vw, 14px);
  font-weight: 600;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.product-source thead th {
  background: #E8F5EC;
  color: var(--clr-dark);
  font-weight: 700;
}

.product-source table tbody tr:first-child > th,
.product-source table tbody tr:first-child > td {
  background: #E8F5EC;
  color: var(--clr-dark);
  font-weight: 700;
}

/* td.th = header cell used anywhere in tbody (first row headers, section separators) */
.product-source table td.th {
  background: #E8F5EC;
  color: var(--clr-dark);
  font-weight: 700;
}

/* td.active-td = first-column row label (model name etc.) */
.product-source table td.active-td {
  background: #f4faf5;
  color: var(--clr-dark);
  font-weight: 600;
  text-align: left;
  white-space: normal;
  min-width: 100px;
}

.product-source table tbody tr:first-child td.th:first-child {
  white-space: normal;
  min-width: 86px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 13px;
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: normal;
}

.product-source__table-wrap {
  width: 100%;
  overflow: visible;
  margin: 0 0 18px;
}

.product-source__table-wrap table {
  margin: 0;
  width: 100%;
}

.product-source__table-cards {
  display: none;
}

.product-source__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.product-source__disclaimer {
  text-align: center;
  font-size: 20px !important;
  font-weight: 700;
  color: #47614f;
  margin: 18px 0 14px;
}

.product-source > .product-source__disclaimer:first-of-type {
  font-size: 20px !important;
}

.product-source__gallery a {
  display: block;
  border: 1px solid #547153;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

.product-source__gallery img {
  width: 100%;
  height: 220px;
  object-fit: contain;
  object-position: center;
  display: block;
  background: #fff;
}

.product-source__note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--clr-text-muted);
}

.product-source__note a {
  color: var(--clr-green-mid);
}

@media (max-width: 860px) {
  .product-detail__head {
    grid-template-columns: 1fr;
  }

  .product-source th,
  .product-source td {
    font-size: clamp(10px, 1.8vw, 12px);
    padding: clamp(3px, 1vw, 6px) clamp(3px, 1vw, 6px);
  }

  .product-source__gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .product-source__table--mobile-hidden {
    display: none !important;
  }

  .product-source__table-cards {
    display: grid;
    gap: 10px;
    margin: 0 0 18px;
  }

  .product-source__table-card {
    border: 1px solid #547153;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #fff;
  }

  .product-source__table-card-head {
    background: #E8F5EC;
    color: var(--clr-dark);
    font-weight: 700;
    padding: 9px 12px;
    font-size: 14px;
    text-align: left;
  }

  .product-source__table-card-body {
    display: grid;
    gap: 1px;
    background: #547153;
  }

  .product-source__table-card-item {
    display: grid;
    grid-template-columns: minmax(130px, 42%) 1fr;
    gap: 1px;
    background: #547153;
  }

  .product-source__table-card-label,
  .product-source__table-card-value {
    background: #fff;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.35;
  }

  .product-source__table-card-label {
    font-weight: 700;
    color: #345745;
  }

  .product-source__table-card-value {
    font-weight: 600;
    color: #3f6250;
    white-space: nowrap;
  }

  /* Last item in a card = price — highlight it */
  .product-source__table-card-item:last-child .product-source__table-card-value {
    color: #1B4D2E;
    font-weight: 700;
    font-size: 14px;
  }

  /* Full-width value row (shared spanning rows like Dвх/вых) */
  .product-source__table-card-item[style*="grid-template-columns:1fr"] {
    background: transparent;
  }
}

@media (max-width: 480px) {
  .product-source th,
  .product-source td {
    font-size: clamp(9px, 2.5vw, 11px);
    padding: 3px 4px;
  }

  .product-source__gallery {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 6px;
  }

  .product-source__gallery a {
    flex: 0 0 min(84vw, 320px);
    scroll-snap-align: start;
  }
}

.page-hero {
  background: var(--clr-header);
  color: #fff;
  padding-block: 56px 48px;
}

.page-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}

.page-hero__breadcrumb a {
  color: rgba(255,255,255,0.6);
  transition: color var(--transition);
}

.page-hero__breadcrumb a:hover { color: #fff; }

.page-hero__breadcrumb-sep {
  font-size: 11px;
  opacity: 0.4;
}

.page-hero__title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.page-hero__sub {
  font-size: 16px;
  color: rgba(255,255,255,0.75);
  max-width: 600px;
  margin-top: 4px;
}


/* ============================================================
   16. COMPANY PAGE
   ============================================================ */

/* About intro */
.company-about {
  padding-block: var(--section-v);
  background: #E8F5EC;
}

.company-about__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.company-about__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.company-about__body p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--clr-text);
}

.company-about__image {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid #547153;
  box-shadow: var(--shadow-md);
}

.company-about__image img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

/* Stats strip */
.company-stats {
  padding-block: var(--section-v);
  background: #fafffb;
  border: 1px solid #547153;
}

.company-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}

.company-stat__number {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 900;
  color: var(--clr-dark);
  line-height: 1;
  margin-bottom: 8px;
}

.company-stat__number span {
  color: var(--clr-accent);
}

.company-stat__label {
  font-size: 14px;
  color: var(--clr-text-muted);
  line-height: 1.4;
}

/* Production range */
.company-products {
  padding-block: var(--section-v);
  background: #E8F5EC;
}

.company-products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.company-product-card {
  background: var(--clr-card);
  border: 1px solid #547153;
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.company-product-card__icon {
  width: 48px;
  height: 48px;
  background: #E8F5EC;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.company-product-card__icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--clr-dark);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.company-product-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--clr-text);
}

.company-product-card p {
  font-size: 14px;
  color: var(--clr-text-muted);
  line-height: 1.6;
}

/* Values */
.company-values {
  padding-block: var(--section-v);
  background: #fafffb;
  border: 1px solid #547153;
}

.company-values__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.company-value {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--clr-card);
  border: 1px solid #547153;
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.company-value__dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--clr-accent);
  margin-top: 6px;
}

.company-value h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.company-value p {
  font-size: 14px;
  color: var(--clr-text-muted);
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 840px) {
  .company-about__inner { grid-template-columns: 1fr; }
  .company-about__image { display: none; }
  .company-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .company-products__grid { grid-template-columns: repeat(2, 1fr); }
  .company-values__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .company-stats__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .company-products__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   DELIVERY PAGE
   ============================================================ */

.delivery-options__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.delivery-card {
  background: var(--clr-card);
  border: 1px solid #547153;
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.delivery-card__icon {
  width: 52px;
  height: 52px;
  background: #E8F5EC;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delivery-card__icon svg {
  width: 26px;
  height: 26px;
  stroke: #547153;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.delivery-card h3 { font-size: 17px; font-weight: 700; }
.delivery-card p  { font-size: 14px; color: var(--clr-text-muted); line-height: 1.65; }

.payment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.payment-card {
  background: var(--clr-card);
  border: 1px solid #547153;
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  box-shadow: var(--shadow);
}

.payment-card__num {
  font-size: 64px;
  font-weight: 900;
  color: var(--clr-dark);
  line-height: 1;
  margin-bottom: 10px;
}

.payment-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.payment-card p  { font-size: 13px; color: var(--clr-text-muted); line-height: 1.6; }

@media (max-width: 700px) {
  .delivery-options__grid { grid-template-columns: 1fr; }
  .payment-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   INSTALLATION PAGE
   ============================================================ */

.install-intro__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.install-intro__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.install-intro__body p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--clr-text);
}

.install-types {
  margin-top: 4px;
}

.install-types__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--clr-dark);
  margin-bottom: 12px;
}

.install-types__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.install-types__item {
  border: 1px solid #547153;
  background: #E8F5EC;
  color: #2c5a3b;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.install-intro__image {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid #547153;
  box-shadow: var(--shadow-md);
}

.install-intro__image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}

.install-guarantees__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.install-guarantee {
  background: var(--clr-card);
  border: 1px solid #547153;
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  text-align: center;
}

.install-guarantee__value {
  font-size: 60px;
  font-weight: 900;
  color: var(--clr-dark);
  line-height: 1;
  margin-bottom: 8px;
}

.install-guarantee__value span { color: var(--clr-accent); }
.install-guarantee h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.install-guarantee p  { font-size: 13px; color: var(--clr-text-muted); line-height: 1.5; }

@media (max-width: 840px) {
  .install-intro__inner { grid-template-columns: 1fr; }
  .install-intro__image { display: none; }
  .install-guarantees__grid { grid-template-columns: 1fr 1fr; }
  .install-types__item { font-size: 13px; }
}

@media (max-width: 480px) {
  .install-guarantees__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   COOPERATION PAGE
   ============================================================ */

.coop-intro__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.coop-intro__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.coop-intro__body p { font-size: 16px; line-height: 1.75; }

.coop-terms__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.coop-term {
  background: var(--clr-card);
  border: 1px solid #547153;
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.coop-term__num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #E8F5EC;
  border: 1px solid #547153;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--clr-dark);
}

.coop-term h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.coop-term p  { font-size: 14px; color: var(--clr-text-muted); line-height: 1.6; }

@media (max-width: 840px) {
  .coop-intro__inner { grid-template-columns: 1fr; }
  .coop-terms__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   CONTACTS PAGE
   ============================================================ */

.contacts-info {
  padding-block: var(--section-v);
  background: #E8F5EC;
}

.contacts-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

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

.contacts-card {
  background: var(--clr-card);
  border: 1px solid #547153;
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contacts-card__icon {
  width: 44px;
  height: 44px;
  background: #E8F5EC;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contacts-card__icon svg {
  width: 22px;
  height: 22px;
  stroke: #547153;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contacts-card__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-text-muted);
}

.contacts-card__value {
  font-size: 15px;
  font-weight: 600;
  color: var(--clr-text);
  line-height: 1.5;
}

.contacts-card__value a {
  color: inherit;
  transition: color var(--transition);
}

.contacts-card__value a:hover { color: var(--clr-dark); }

.contacts-map-form {
  padding-block: var(--section-v);
  background: #fafffb;
  border: 1px solid #547153;
}

.contacts-map-form__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.contacts-map {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid #547153;
  box-shadow: var(--shadow);
}

.contacts-map iframe {
  width: 100%;
  height: 420px;
  border: none;
  display: block;
}

.contacts-requisites {
  padding: 28px 24px;
  background: var(--clr-card);
  border: 1px solid #547153;
  border-radius: var(--radius);
  margin-top: 24px;
}

.contacts-requisites h3 { font-size: 16px; font-weight: 700; margin-bottom: 14px; }

.contacts-requisites dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 20px;
  font-size: 14px;
}

.contacts-requisites dt { color: var(--clr-text-muted); white-space: nowrap; }
.contacts-requisites dd { font-weight: 600; }

@media (max-width: 840px) {
  .contacts-cards { grid-template-columns: repeat(2, 1fr); }
  .contacts-addresses { grid-template-columns: 1fr; }
  .contacts-map-form__inner { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .contacts-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   FAQ SECTION
   ============================================================ */
.faq__list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq__item {
  background: var(--clr-card);
  border: 1px solid #d4e8d5;
  border-radius: var(--radius);
  overflow: hidden;
}

.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  list-style: none;
  gap: 12px;
  color: var(--clr-dark);
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
  content: '+';
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 300;
  color: var(--clr-green-mid);
  transition: transform .25s;
}

.faq__item[open] .faq__q::after {
  content: '−';
}

.faq__a {
  padding: 0 24px 18px;
  color: var(--clr-text-muted);
  line-height: 1.7;
  font-size: 15px;
}

.faq__a p + p {
  margin-top: 8px;
}

@media (max-width: 600px) {
  .faq__q { font-size: 14px; padding: 14px 16px; }
  .faq__a { padding: 0 16px 14px; font-size: 14px; }
}

/* ============================================================
   BOTTOM NAV — mobile (≤768px), replaces burger
   ============================================================ */
.bottom-nav { display: none; }

@media (max-width: 768px) {
  .header__burger { display: none !important; }
  .header__nav { display: none !important; }

  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

  .bottom-nav {
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 200;
    background: var(--clr-topbar);
    border-top: 1px solid rgba(255,255,255,.15);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(58px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
  }

  .bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 2px;
    color: rgba(255,255,255,.75);
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    transition: color .15s;
  }

  .bottom-nav__item:hover,
  .bottom-nav__item--active { color: #fff; }

  .bottom-nav__item svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }

  .bottom-nav__item--call {
    background: var(--clr-accent);
    border-radius: 12px 12px 0 0;
    color: #fff;
    margin: 0 4px;
    padding-top: 10px;
  }
}