/**
 * Агрант-Строй — адаптивная система
 * Breakpoints: 320, 360, 375, 390, 414, 480, 768, 820, 1024, 1280, 1440, 1920+
 */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --touch-min: 44px;
  --vh-full: 100vh;
  --sticky-cta-height: 72px;
  --mobile-nav-offset: calc(var(--header-height) + var(--safe-top));
}

@supports (height: 100dvh) {
  :root {
    --vh-full: 100dvh;
  }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: var(--vh-full);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  overscroll-behavior-y: none;
}

.header {
  padding-top: var(--safe-top);
}

.header__main-inner {
  padding-left: max(0px, var(--safe-left) - var(--space-container-sm));
  padding-right: max(0px, var(--safe-right) - var(--space-container-sm));
}

/* Touch targets */
.burger,
.mobile-nav__expand,
.mobile-nav__close,
.modal__close,
.articles-carousel__btn,
.back-to-top,
.portfolio-filter__btn {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  touch-action: manipulation;
}

.burger {
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  margin-right: calc(-1 * var(--safe-right));
}

.mobile-nav__actions .btn,
.sticky-cta__phone,
.sticky-cta__btn,
.header__cta,
.header__cabinet {
  min-height: var(--touch-min);
}

.btn {
  touch-action: manipulation;
}

@media (max-width: 480px) {
  .btn {
    white-space: normal;
  }

  .header__cta,
  .header__cabinet {
    white-space: normal;
  }
}

/* Forms — prevent iOS zoom on focus, better keyboard */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea,
.calc-form input,
.calc-form select,
.calc-form textarea,
.contact-form input,
.contact-form textarea,
#callbackForm input,
#callbackForm textarea,
.service-form input,
.service-form textarea,
.admin-form input,
.admin-form select,
.admin-form textarea,
.cabinet-editor-card input,
.cabinet-editor-card select,
.cabinet-editor-card textarea,
.estimates-field input,
.estimates-field select,
.estimates-field textarea,
.estimates-search input {
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--radius);
}

input[type="tel"],
input[type="email"],
input[type="number"],
input[inputmode] {
  font-size: 16px;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 44px;
  cursor: pointer;
  touch-action: pan-x;
  background: transparent;
  --range-track: rgba(255, 255, 255, 0.22);
  --range-fill: var(--color-gold);
  --range-thumb: var(--color-gold);
}

.calc-area--light input[type="range"],
.home-calc__panel input[type="range"] {
  --range-track: #d8d4cc;
  --range-fill: var(--color-primary);
  --range-thumb: var(--color-primary);
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: var(--range-track);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--range-thumb);
  border: 2px solid var(--color-white);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--range-track);
  border: none;
}

input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--range-fill);
}

input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--range-thumb);
  border: 2px solid var(--color-white);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

input[type="range"]:focus-visible::-webkit-slider-thumb,
input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--color-accent-light);
  outline-offset: 2px;
}

/* Calculator — area steppers (all viewports) */
.calc-area__value {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calc-area__step {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-gray);
  color: var(--color-text);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.calc-area--light .calc-area__step {
  background: var(--color-white);
}

.calc-panel .calc-area__step {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #f5f4f1;
}

.calc-area__step:hover {
  border-color: var(--color-primary);
}

.calc-area__step:active {
  transform: scale(0.94);
}

.calc-area__head output {
  min-width: 64px;
  text-align: center;
}

/* ===== Mobile menu — premium site style ===== */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 109;
  background: rgba(20, 24, 32, 0.72);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease, visibility 0.32s ease;
}

@media (hover: hover) and (pointer: fine) {
  .mobile-nav-backdrop {
    background: rgba(20, 24, 32, 0.62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

.mobile-nav-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

.mobile-nav-backdrop[hidden] {
  display: none !important;
}

.mobile-nav {
  position: fixed;
  top: var(--mobile-nav-offset);
  left: auto;
  right: 0;
  bottom: 0;
  z-index: 110;
  width: min(360px, 100%);
  max-height: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 16px calc(20px + var(--safe-bottom));
  padding-left: calc(16px + var(--safe-left));
  padding-right: calc(16px + var(--safe-right));
  background: var(--color-bg);
  border-top: none;
  border-left: 3px solid var(--color-gold);
  transform: translateX(100%);
  transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: -16px 0 48px rgba(20, 24, 32, 0.18);
  overscroll-behavior: contain;
}

.mobile-nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-primary) 55%, var(--color-accent) 100%);
  pointer-events: none;
}

.mobile-nav.is-open {
  display: flex;
  transform: translateX(0);
}

/* Шапка меню */
.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0 16px;
  margin-bottom: 8px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.mobile-nav__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-nav__logo .logo__icon {
  width: 48px;
  height: 48px;
}

.mobile-nav__logo .logo__svg {
  width: 48px;
  height: 48px;
}

.mobile-nav__brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mobile-nav__brand-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.2;
}

.mobile-nav__brand-tag {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.mobile-nav__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-text-muted);
  box-shadow: var(--shadow-sm);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.mobile-nav__close:hover,
.mobile-nav__close:focus-visible {
  background: var(--color-bg-gray);
  border-color: var(--color-primary);
  color: var(--color-primary);
  outline: none;
}

.mobile-nav__close:active {
  transform: scale(0.94);
}

/* Список навигации */
.mobile-nav__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 16px;
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-align: left;
  text-decoration: none;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.mobile-nav__link:active {
  transform: scale(0.99);
}

.mobile-nav__link--active {
  color: var(--color-primary);
  background: linear-gradient(135deg, rgba(196, 165, 116, 0.14), rgba(255, 255, 255, 0.98));
  border-color: rgba(168, 137, 90, 0.35);
  box-shadow: inset 3px 0 0 var(--color-primary), var(--shadow-sm);
}

/* Группы с подменю */
.mobile-nav__group {
  border-bottom: none;
  padding-bottom: 0;
}

.mobile-nav__row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.mobile-nav__group.is-open .mobile-nav__row {
  border-color: rgba(168, 137, 90, 0.4);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-md);
}

.mobile-nav__row .mobile-nav__link--parent {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: var(--radius) 0 0 var(--radius);
  box-shadow: none;
  background: transparent;
  padding: 12px 10px 12px 14px;
}

.mobile-nav__row .mobile-nav__link--parent.mobile-nav__link--active {
  background: linear-gradient(135deg, rgba(196, 165, 116, 0.12), transparent);
  box-shadow: none;
  border: none;
}

.mobile-nav__expand {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.mobile-nav__expand:hover,
.mobile-nav__expand:focus-visible {
  background: rgba(168, 137, 90, 0.12);
  border-color: rgba(168, 137, 90, 0.45);
  color: var(--color-primary);
  outline: none;
}

.mobile-nav__expand:active {
  transform: scale(0.92);
}

.mobile-nav__chevron {
  display: block;
  flex-shrink: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
}

.mobile-nav__group.is-open .mobile-nav__chevron {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.mobile-nav__group.is-open .mobile-nav__expand {
  color: var(--color-primary);
  background: rgba(168, 137, 90, 0.15);
  border-color: var(--color-primary);
}

.mobile-nav__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav__group.is-open .mobile-nav__sub {
  grid-template-rows: 1fr;
}

.mobile-nav__sub-inner {
  overflow: hidden;
  min-height: 0;
  padding: 6px 8px 10px;
  background: var(--color-bg-gray);
  border: 1px solid rgba(168, 137, 90, 0.25);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
}

.mobile-nav a.mobile-nav__sublink {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 9px 12px;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text-muted);
  text-decoration: none;
  border: none !important;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  transition: color 0.2s ease, background 0.2s ease;
}

.mobile-nav a.mobile-nav__sublink:last-child {
  margin-bottom: 0;
}

.mobile-nav a.mobile-nav__sublink:active {
  background: rgba(255, 255, 255, 0.65);
}

.mobile-nav__sublink::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.mobile-nav__sublink--active,
.mobile-nav__sublink.mobile-nav__link--active {
  color: var(--color-primary);
  font-weight: 600;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.mobile-nav__sublink--active::before,
.mobile-nav__sublink.mobile-nav__link--active::before {
  background: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(168, 137, 90, 0.2);
}

/* Подвал меню */
.mobile-nav__footer {
  flex-shrink: 0;
  padding-top: 14px;
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  background: linear-gradient(180deg, transparent 0%, rgba(235, 232, 226, 0.65) 100%);
}

.mobile-nav__actions {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  gap: 10px;
}

.mobile-nav__actions .btn {
  font-size: 13px;
  padding: 13px 14px;
  min-height: 48px;
  box-shadow: var(--shadow-sm);
}

.mobile-nav__actions .mobile-nav__cabinet {
  border-width: 2px;
}

.mobile-nav a.mobile-nav__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
  padding: 14px 18px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2;
  color: var(--color-gold) !important;
  text-decoration: none;
  border: none !important;
  border-radius: var(--radius-lg);
  background: var(--color-bg-dark);
  box-shadow: 0 8px 24px rgba(20, 24, 32, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mobile-nav__phone:active {
  transform: scale(0.98);
}

.mobile-nav__phone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(196, 165, 116, 0.18);
  color: var(--color-gold);
}

.mobile-nav__phone-text {
  letter-spacing: 0.01em;
}

/* Fixed UI — safe areas */
.sticky-cta {
  padding-bottom: calc(12px + var(--safe-bottom));
  padding-left: calc(16px + var(--safe-left));
  padding-right: calc(16px + var(--safe-right));
}

.back-to-top {
  right: calc(24px + var(--safe-right));
  bottom: calc(24px + var(--safe-bottom));
}

.toast {
  right: calc(24px + var(--safe-right));
  bottom: calc(24px + var(--safe-bottom));
  max-width: min(360px, calc(100vw - 48px - var(--safe-left) - var(--safe-right)));
}

.modal {
  padding: calc(24px + var(--safe-top)) calc(24px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(24px + var(--safe-left));
}

.modal__dialog {
  max-height: calc(var(--vh-full) - 48px - var(--safe-top) - var(--safe-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal__dialog.cabinet-editor-modal {
  max-height: none;
  overflow: hidden;
  height: 100%;
}

/* Prevent horizontal overflow */
main,
article,
.hero__inner,
.container,
.marquee,
.home-articles {
  max-width: 100%;
}

.marquee {
  overflow: hidden;
}

.hero h1,
.page-hero h1,
.section-head h2 {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.badge,
.hero__pills li {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.hero__actions .btn,
.cta-banner__actions .btn {
  white-space: normal;
  text-align: center;
}

/* Price tables — scroll hint */
.price-table-wrap {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.price-table-wrap::after {
  content: '';
  display: block;
  height: 0;
}

/* Retina / HiDPI */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  .hero-visual__main,
  .article-card__img,
  .service-detail__img,
  .service-gallery__img,
  .portfolio-card__img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* ===== System color scheme — mobile (light / dark) ===== */
@media (max-width: 768px) and (prefers-color-scheme: light) {
  html {
    color-scheme: light;
  }

  body {
    -webkit-font-smoothing: auto;
  }
}

@media (max-width: 768px) and (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1e26;
    --color-bg-gray: #242a34;
    --color-text: #f0eeea;
    --color-text-muted: #a8a6a0;
    --color-text-light: rgba(245, 244, 241, 0.9);
    --color-border: #3a404c;
    --color-white: #242a34;
    --bg-body: url('/images/bg-body-dark.svg');
    --bg-section-light: url('/images/bg-section-dark.svg');
    --bg-mesh-gold: radial-gradient(ellipse 75% 55% at 8% 0%, rgba(196, 165, 116, 0.14), transparent 58%);
    --bg-mesh-green: radial-gradient(ellipse 65% 50% at 92% 100%, rgba(64, 145, 108, 0.1), transparent 55%);
    --bg-mesh-light: radial-gradient(ellipse 70% 45% at 50% -10%, rgba(255, 255, 255, 0.04), transparent 60%);
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.45);
  }

  html {
    color-scheme: dark;
    background-color: var(--color-bg);
  }

  html::before {
    background-image: var(--bg-mesh-gold), var(--bg-mesh-green), var(--bg-mesh-light), var(--bg-body);
  }

  body {
    color-scheme: dark;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  .section:not(.section--gray):not(.section--dark)::before {
    background-image:
      radial-gradient(ellipse 55% 40% at 100% 0%, rgba(196, 165, 116, 0.08), transparent 55%),
      radial-gradient(ellipse 45% 35% at 0% 100%, rgba(64, 145, 108, 0.06), transparent 50%);
  }

  .section--gray::before {
    background-color: #1e232c;
    background-image:
      radial-gradient(ellipse 65% 50% at 80% 10%, rgba(196, 165, 116, 0.1), transparent 58%),
      radial-gradient(ellipse 50% 40% at 5% 95%, rgba(64, 145, 108, 0.06), transparent 52%),
      var(--bg-section-light);
  }

  .header,
  .mobile-nav,
  .sticky-cta,
  .modal__dialog,
  .welcome-modal,
  .article-card,
  .service-card:not(.service-card--visual),
  .trust-bar,
  .trust-bar--premium,
  .faq-item,
  .review-card,
  .benefit-card,
  .guarantee-card,
  .contact-card,
  .promo-card--premium,
  .promo-card-page,
  .portfolio-card,
  .calc-services-sheet__dialog,
  .calc-area--light,
  .calc-area__step,
  .calc-service-picker {
    background: #242a34;
  }

  .header__top {
    background: #0f1218;
  }

  .header__main {
    border-bottom-color: var(--color-border);
  }

  .burger span {
    background: var(--color-text);
  }

  .sticky-cta {
    border-top-color: var(--color-border);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
  }

  .sticky-cta__phone {
    color: var(--color-gold);
  }

  .nav__submenu {
    background: #242a34;
    border-color: var(--color-border);
  }

  .calc-form input,
  .calc-form select,
  .calc-form textarea,
  .contact-form input,
  .contact-form textarea,
  #callbackForm input,
  #callbackForm textarea,
  .service-form input,
  .service-form textarea,
  .calc-feedback input,
  .calc-feedback textarea {
    background: #1a1e26;
    border-color: var(--color-border);
    color: var(--color-text);
  }

  .calc-area--light input[type="range"],
  .home-calc__panel input[type="range"] {
    --range-track: #3a404c;
  }

  .calc-area--light .calc-area__step {
    background: #1a1e26;
    border-color: var(--color-border);
    color: var(--color-text);
  }

  .calc-service-picker {
    border-color: var(--color-border);
    color: var(--color-text);
  }

  .calc-services-sheet__head {
    border-bottom-color: var(--color-border);
  }

  .calc-services-sheet__close {
    background: #1a1e26;
    color: var(--color-text-muted);
  }

  .price-table-wrap,
  .price-table th,
  .price-table td {
    background: #242a34;
    border-color: var(--color-border);
  }

  .price-table tbody tr:nth-child(even) td {
    background: #1e232c;
  }

  .mobile-nav-backdrop {
    background: rgba(0, 0, 0, 0.72);
  }

  .mobile-nav__head {
    border-bottom-color: var(--color-border);
  }

  .mobile-nav__close {
    background: #1a1e26;
    border-color: var(--color-border);
    color: var(--color-text-muted);
  }

  .mobile-nav__link,
  .mobile-nav__row {
    background: #1a1e26;
    border-color: var(--color-border);
  }

  .mobile-nav__link--active {
    background: linear-gradient(135deg, rgba(168, 137, 90, 0.2), rgba(26, 30, 38, 0.95));
    border-color: rgba(168, 137, 90, 0.4);
  }

  .mobile-nav__expand {
    background: #242a34;
    border-color: var(--color-border);
  }

  .mobile-nav__sub-inner {
    background: #141820;
    border-color: rgba(168, 137, 90, 0.2);
  }

  .mobile-nav a.mobile-nav__sublink:active {
    background: rgba(36, 42, 52, 0.85);
  }

  .mobile-nav a.mobile-nav__sublink.mobile-nav__link--active {
    background: #242a34;
  }

  .mobile-nav__footer {
    background: linear-gradient(180deg, transparent 0%, rgba(20, 24, 32, 0.85) 100%);
  }

  .section-head p,
  .form-note,
  .breadcrumb {
    color: var(--color-text-muted);
  }

  .faq-item__question {
    color: var(--color-text);
  }

  .faq-item__answer {
    color: var(--color-text-muted);
  }

  .toast {
    background: #242a34;
    color: var(--color-text);
    border: 1px solid var(--color-border);
  }

  .back-to-top {
    background: #242a34;
    border-color: var(--color-border);
    color: var(--color-gold);
  }

  .hero-visual__card,
  .home-design__float {
    background: rgba(36, 42, 52, 0.92);
    border-color: var(--color-border);
    color: var(--color-text);
  }

  .compare-table__row:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
  }

  .cabinet-card,
  .cabinet-progress-card,
  .cabinet-login__form {
    background: #242a34;
    border-color: var(--color-border);
  }

  .footer {
    background: #0f1218;
  }

  .footer__inner {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  /* Hero — always light text on dark background */
  .hero__content,
  .hero h1 {
    color: #ffffff;
  }

  .hero--premium h1 em,
  .hero--premium h1 .hero__price {
    color: var(--color-gold);
  }

  .hero__lead {
    color: rgba(245, 244, 241, 0.88);
  }

  /* Home calculator panel */
  .home-calc__panel {
    background-color: #1e232c;
    background-image: linear-gradient(145deg, rgba(196, 165, 116, 0.12) 0%, transparent 55%);
    border-color: rgba(168, 137, 90, 0.28);
    border-top-color: var(--color-gold);
    box-shadow: var(--shadow-md);
  }

  .home-calc__panel .calc-service {
    background: #242a34;
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--color-text);
  }

  .home-calc__panel .calc-service.is-active {
    background: linear-gradient(145deg, rgba(168, 137, 90, 0.24), rgba(36, 42, 52, 0.98));
    border-color: rgba(196, 165, 116, 0.45);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  }

  .home-calc__panel .calc-service__price {
    color: var(--color-gold);
  }

  .calc-area--light {
    background: transparent;
  }

  .calc-area--light .calc-area__head label {
    color: var(--color-text-muted);
  }

  .calc-area--light .calc-area__head output {
    color: var(--color-gold);
  }

  .calc-area--light .calc-area__scale {
    color: var(--color-text-muted);
  }

  .home-calc__panel .calc-service-picker {
    background: #242a34;
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text);
  }

  .home-calc__panel .calc-service-picker__price {
    color: var(--color-gold);
  }

  .home-calc__perks li {
    background: #242a34;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text);
  }

  .calc-services-sheet .calc-service {
    background: #242a34;
    border-color: var(--color-border);
  }

  .calc-services-sheet .calc-service.is-active {
    background: linear-gradient(145deg, rgba(168, 137, 90, 0.22), rgba(26, 30, 38, 0.98));
    border-color: rgba(196, 165, 116, 0.45);
    box-shadow: none;
  }

  input[type="range"]::-webkit-slider-thumb {
    border-color: #242a34;
  }

  input[type="range"]::-moz-range-thumb {
    border-color: #242a34;
  }

  /* Полезные разделы — кнопки-ссылки */
  .seo-links a,
  .section--gray .seo-links a {
    background: #242a34;
    border-color: var(--color-border);
    color: var(--color-text);
  }

  .seo-links a:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
  }

  /* Мы на связи — карточки соцсетей */
  .home-social::before {
    background-color: #1e232c;
    background-image:
      linear-gradient(180deg, rgba(196, 165, 116, 0.08) 0%, transparent 42%),
      radial-gradient(ellipse 55% 70% at 100% 0%, rgba(64, 145, 108, 0.06), transparent 55%),
      var(--bg-section-light);
  }

  .social-link {
    background-color: #242a34;
    background-image: linear-gradient(145deg, rgba(196, 165, 116, 0.12) 0%, transparent 48%);
    border-color: var(--color-border);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
  }

  .social-link:hover {
    border-color: rgba(196, 165, 116, 0.4);
    box-shadow: var(--shadow-md);
  }

  .social-link__hint {
    color: var(--color-text-muted);
  }

  /* Реквизиты компании */
  .company-legal {
    background-color: #242a34;
    background-image: linear-gradient(145deg, rgba(196, 165, 116, 0.12) 0%, transparent 42%);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
  }

  .company-legal__name {
    border-bottom-color: var(--color-border);
    color: var(--color-text);
  }

  .company-legal__item dt,
  .company-legal__address-label {
    color: var(--color-gold);
  }

  .company-legal__item dd,
  .company-legal__address p {
    color: var(--color-text);
  }

  .company-legal__address {
    border-top-color: var(--color-border);
  }

  /* Личный кабинет администратора (cabinet.html) */
  html.is-admin-cabinet .admin-app {
    --admin-surface: #242a34;
    --admin-surface-2: #1a1e26;
    --admin-border: #3a404c;
    --admin-dark: #0f1218;
    --admin-chrome-text: #f0eeea;
    background: #141820;
  }

  html.is-admin-cabinet .admin-sidebar {
    background: #0f1218;
    border-right-color: rgba(196, 165, 116, 0.45);
    color: #f5f4f1;
  }

  html.is-admin-cabinet .admin-sidebar__brand,
  html.is-admin-cabinet .admin-sidebar__brand-text strong {
    color: #f5f4f1;
  }

  html.is-admin-cabinet .admin-sidebar__brand-text small {
    color: rgba(245, 244, 241, 0.55);
  }

  html.is-admin-cabinet .admin-nav__item {
    color: rgba(245, 244, 241, 0.82);
  }

  html.is-admin-cabinet .admin-nav__item:hover {
    background: rgba(168, 137, 90, 0.18);
    color: #f5f4f1;
  }

  html.is-admin-cabinet .admin-nav__item.is-active {
    background: rgba(168, 137, 90, 0.28);
    color: var(--color-gold);
  }

  html.is-admin-cabinet .admin-sidebar__logout {
    color: rgba(245, 244, 241, 0.78);
    border-color: rgba(245, 244, 241, 0.22);
  }

  html.is-admin-cabinet .admin-sidebar__logout:hover {
    color: var(--color-gold);
    border-color: var(--color-gold);
  }

  html.is-admin-cabinet .admin-sidebar-backdrop {
    background: rgba(0, 0, 0, 0.62);
  }

  html.is-admin-cabinet .admin-bottom-nav {
    background: #0f1218;
    border-top-color: rgba(196, 165, 116, 0.35);
  }

  html.is-admin-cabinet .admin-bottom-nav__item {
    color: rgba(245, 244, 241, 0.62);
  }

  html.is-admin-cabinet .admin-bottom-nav__item.is-active {
    color: var(--color-gold);
    background: rgba(168, 137, 90, 0.18);
  }

  html.is-admin-cabinet .admin-dashboard {
    background: #141820;
  }

  html.is-admin-cabinet .admin-panels {
    background: #141820;
  }

  html.is-admin-cabinet .admin-panel__intro h1,
  html.is-admin-cabinet .admin-panel__intro h2,
  html.is-admin-cabinet .admin-stat__value,
  html.is-admin-cabinet .admin-block__title,
  html.is-admin-cabinet .admin-data-item strong,
  html.is-admin-cabinet .admin-table td {
    color: var(--color-text);
  }

  html.is-admin-cabinet .admin-panel__intro p,
  html.is-admin-cabinet .admin-stat__label,
  html.is-admin-cabinet .admin-block__desc,
  html.is-admin-cabinet .admin-data-item p,
  html.is-admin-cabinet .admin-loading,
  html.is-admin-cabinet .admin-form label span,
  html.is-admin-cabinet .admin-checklist,
  html.is-admin-cabinet .admin-table th {
    color: var(--color-text-muted);
  }

  html.is-admin-cabinet .admin-form input,
  html.is-admin-cabinet .admin-form select,
  html.is-admin-cabinet .admin-form textarea {
    background: #1a1e26;
    border-color: var(--color-border);
    color: var(--color-text);
  }

  html.is-admin-cabinet .admin-block--error {
    background: rgba(198, 40, 40, 0.12);
    border-color: rgba(229, 115, 115, 0.45);
    color: var(--color-text);
  }

  html.is-admin-cabinet .admin-preview-card {
    background: #1a1e26;
    color: var(--color-text);
  }

  html.is-admin-cabinet .admin-preview-card span {
    color: var(--color-text-muted);
  }

  /* Редактор клиентов в cabinet.html */
  html.is-admin-cabinet {
    --editor-bg: #1a1e26;
    --editor-surface: #242a34;
    --editor-dark: #0f1218;
    --editor-border: #3a404c;
    --editor-muted: #a8a6a0;
  }

  html.is-admin-cabinet .admin-block,
  html.is-admin-cabinet .admin-stat,
  html.is-admin-cabinet .admin-chart-wrap,
  html.is-admin-cabinet .admin-table-wrap,
  html.is-admin-cabinet .cabinet-admin-table-wrap {
    background: var(--admin-surface);
    border-color: var(--admin-border);
  }

  html.is-admin-cabinet .admin-btn--outline {
    background: #1a1e26;
    border-color: var(--admin-border);
    color: var(--color-text);
  }

  html.is-admin-cabinet .admin-btn--outline:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
  }

  html.is-admin-cabinet .admin-topbar {
    background: #0f1218;
    border-bottom-color: rgba(196, 165, 116, 0.35);
  }

  html.is-admin-cabinet .admin-analytics-section h4 {
    color: var(--color-text-muted);
  }

  html.is-admin-cabinet .cabinet-editor-modal {
    background: var(--editor-surface);
    border-color: var(--editor-border);
    color: var(--color-text);
  }

  html.is-admin-cabinet .cabinet-editor-form,
  html.is-admin-cabinet .cabinet-editor {
    background: var(--editor-bg);
    color: var(--color-text);
  }

  html.is-admin-cabinet .cabinet-editor__sidebar {
    background: #1a1e26;
    border-color: var(--editor-border);
  }

  html.is-admin-cabinet .cabinet-editor__tab {
    color: var(--color-text-muted);
  }

  html.is-admin-cabinet .cabinet-editor__tab.is-active {
    background: var(--editor-surface);
    color: var(--color-gold);
  }

  html.is-admin-cabinet .cabinet-editor-card {
    background: var(--editor-surface);
    border-color: var(--editor-border);
    color: var(--color-text);
  }

  html.is-admin-cabinet .cabinet-editor-card h4,
  html.is-admin-cabinet .cabinet-editor-card__desc {
    color: var(--color-text-muted);
  }

  html.is-admin-cabinet .cabinet-editor-card input,
  html.is-admin-cabinet .cabinet-editor-card select,
  html.is-admin-cabinet .cabinet-editor-card textarea {
    background: #1a1e26;
    border-color: var(--editor-border);
    color: var(--color-text);
  }

  html.is-admin-cabinet .cabinet-admin-table--responsive tr {
    border-color: var(--editor-border);
  }

  html.is-admin-cabinet .cabinet-admin-table--responsive td::before {
    color: var(--color-text-muted);
  }

  html.is-admin-cabinet .cabinet-admin-hint,
  html.is-admin-cabinet .cabinet-admin-toolbar,
  html.is-admin-cabinet .admin-panel__intro p {
    color: var(--color-text-muted);
  }

  html.is-admin-cabinet .cabinet-material-expenses__table th {
    background: #1a1e26;
    color: var(--color-text-muted);
  }

  html.is-admin-cabinet .cabinet-material-expenses__table td {
    border-color: var(--editor-border);
    color: var(--color-text);
  }

  html.is-admin-cabinet .cabinet-material-expenses__paid-select {
    background: #1a1e26;
    border-color: var(--editor-border);
    color: var(--color-text);
  }

  html.is-admin-cabinet .cabinet-material-expenses__totals-paid strong {
    color: #7dcea0;
  }

  html.is-admin-cabinet .cabinet-material-expenses__totals-debt strong {
    color: #f0a08c;
  }

  /* Модуль смет — тёмная тема */
  html.is-admin-cabinet .estimates-app {
    --est-bg: #1a1e26;
    --est-border: #3a404c;
    --est-graphite: #f0eeea;
  }

  html.is-admin-cabinet .estimates-table-wrap,
  html.is-admin-cabinet .estimates-sheet,
  html.is-admin-cabinet .estimates-catalog,
  html.is-admin-cabinet .estimates-company,
  html.is-admin-cabinet .estimates-history,
  html.is-admin-cabinet .estimates-accordion {
    background: #242a34;
    border-color: var(--est-border);
  }

  html.is-admin-cabinet .estimates-table td {
    border-color: var(--est-border);
    color: var(--color-text);
  }

  html.is-admin-cabinet .estimates-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
  }

  html.is-admin-cabinet .estimates-btn--outline {
    background: #1a1e26;
    border-color: var(--est-border);
    color: var(--color-text);
  }

  html.is-admin-cabinet .estimates-field input,
  html.is-admin-cabinet .estimates-field select,
  html.is-admin-cabinet .estimates-field textarea,
  html.is-admin-cabinet .estimates-search input {
    background: #1a1e26;
    border-color: var(--est-border);
    color: var(--color-text);
  }

  html.is-admin-cabinet .estimates-wizard__step {
    background: #1a1e26;
    color: var(--color-text-muted);
  }

  html.is-admin-cabinet .estimates-totals,
  html.is-admin-cabinet .estimates-price-add {
    background: #1a1e26;
    border-color: var(--est-border);
  }

  html.is-admin-cabinet .estimates-doc__metrics,
  html.is-admin-cabinet .estimates-doc__plan {
    background: #1a1e26;
    border-color: var(--est-border);
  }

  html.is-admin-cabinet .estimates-print-dialog {
    background: #242a34;
    color: var(--color-text);
  }

  /* Управление клиентами (admin-clients.html) */
  body[data-page="admin-clients"] {
    --editor-bg: #1a1e26;
    --editor-surface: #242a34;
    --editor-dark: #0f1218;
    --editor-border: #3a404c;
    --editor-muted: #a8a6a0;
  }

  body[data-page="admin-clients"] .section--gray {
    background: var(--editor-bg);
    color: var(--color-text);
  }

  body[data-page="admin-clients"] .cabinet-admin-table-wrap {
    background: var(--editor-surface);
    border-color: var(--editor-border);
  }

  body[data-page="admin-clients"] .cabinet-admin-table th,
  body[data-page="admin-clients"] .cabinet-admin-table td {
    border-color: var(--editor-border);
    color: var(--color-text);
  }

  body[data-page="admin-clients"] .cabinet-admin-table th {
    background: #1a1e26;
    color: var(--color-text-muted);
  }

  body[data-page="admin-clients"] .cabinet-admin-form input,
  body[data-page="admin-clients"] .cabinet-admin-form select,
  body[data-page="admin-clients"] .cabinet-admin-form textarea {
    background: #1a1e26;
    border-color: var(--editor-border);
    color: var(--color-text);
  }

  body[data-page="admin-clients"] .cabinet-editor-modal {
    background: var(--editor-surface);
    border-color: var(--editor-border);
    color: var(--color-text);
  }

  body[data-page="admin-clients"] .cabinet-editor-form,
  body[data-page="admin-clients"] .cabinet-editor {
    background: var(--editor-bg);
    color: var(--color-text);
  }

  body[data-page="admin-clients"] .cabinet-editor__sidebar {
    background: #1a1e26;
    border-color: var(--editor-border);
  }

  body[data-page="admin-clients"] .cabinet-editor__sidebar button,
  body[data-page="admin-clients"] .cabinet-editor__sidebar label {
    color: var(--color-text-muted);
  }

  body[data-page="admin-clients"] .cabinet-editor__sidebar button.is-active {
    background: var(--editor-surface);
    color: var(--color-gold);
  }
}

/* Keyboard open — iOS/Android visual viewport */
body.keyboard-open .sticky-cta,
body.keyboard-open .back-to-top {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

body.keyboard-open {
  padding-bottom: 0 !important;
}

/* ===== BREAKPOINTS ===== */

/* Large desktop 1920+ */
@media (min-width: 1920px) {
  .container {
    width: min(1320px, calc(100% - var(--space-container) * 2));
  }

  :root {
    --space-section: 96px;
  }

  .hero h1 {
    font-size: 3.5rem;
  }
}

/* Desktop 1440 */
@media (min-width: 1440px) {
  .container {
    width: min(1280px, calc(100% - var(--space-container) * 2));
  }
}

/* Desktop 1280 */
@media (min-width: 1280px) and (max-width: 1439px) {
  .container {
    width: min(1200px, calc(100% - var(--space-container) * 2));
  }
}

/* Tablet landscape / iPad 820–1024 */
@media (min-width: 820px) and (max-width: 1024px) {
  .hero__inner {
    gap: 32px;
  }

  .hero h1 {
    font-size: clamp(1.85rem, 3.5vw, 2.5rem);
  }

  .trust-bar__grid,
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .home-calc__grid {
    gap: 32px;
  }

  .mobile-nav {
    width: min(400px, 88vw);
  }
}

/* Tablet 768 */
@media (min-width: 768px) and (max-width: 819px) {
  .trust-bar__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .calc-services {
    grid-template-columns: repeat(3, 1fr);
  }

  .mobile-nav {
    width: min(380px, 85vw);
  }
}

/* Calculator — 2 columns on medium phones */
@media (min-width: 480px) and (max-width: 768px) {
  .calc-services {
    grid-template-columns: repeat(2, 1fr);
  }

  .calc-service {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 72px;
    padding: 12px 14px;
  }

  .calc-service__price {
    text-align: left;
  }

  .calc-service.is-active::after {
    position: absolute;
    top: 10px;
    right: 10px;
    margin-left: 0;
  }
}

/* Mobile 480 */
@media (max-width: 480px) {
  :root {
    --space-container-sm: 14px;
    --header-height: 64px;
  }

  .hero {
    padding: 36px 0 48px;
  }

  .hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .hero__lead {
    font-size: 16px;
  }

  .hero-visual__card {
    padding: 8px 12px;
  }

  .hero-visual__card--top {
    top: 10px;
    right: 10px;
  }

  .hero-visual__card--bottom {
    bottom: 10px;
    left: 10px;
  }

  .home-calc__panel,
  .calc-panel {
    padding: 18px 14px;
    gap: 14px;
  }

  .calc-service__name {
    font-size: 14px;
  }

  .calc-service__price {
    font-size: 11px;
  }

  .calc-area__step {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .modal__dialog {
    padding: 28px 20px;
  }

  .page-hero {
    padding: 32px 0 28px;
  }

  .page-hero h1 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  .price-table th,
  .price-table td {
    padding: 10px 12px;
    font-size: 13px;
  }

  .sticky-cta__phone {
    font-size: 13px;
  }

  .home-cabinet__layout {
    padding: 16px 12px 14px;
    gap: 12px;
  }

  .home-cabinet__content h2,
  .home-cabinet__intro h2 {
    font-size: clamp(1.05rem, 5vw, 1.15rem);
  }

  .home-cabinet__lead {
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 8px;
  }

  .home-cabinet__tag {
    font-size: 9px;
    padding: 3px 9px;
  }

  .home-cabinet__actions .btn {
    font-size: 13px;
    padding: 10px 14px;
    min-height: 42px;
  }

  .home-cabinet__actions .btn--outline-light {
    font-size: 12px;
  }

  .home-cabinet__showcase {
    max-width: 280px;
    padding: 0 0 6px;
  }

  .home-cabinet__device--laptop {
    display: none;
  }

  .home-cabinet__device--phone {
    position: relative;
    right: auto;
    bottom: auto;
    width: 132px;
    margin: 0 auto;
  }

  .home-cabinet__device-bezel--phone {
    width: 132px;
  }

  .footer__inner {
    gap: 28px;
  }

  .compare-table__head span,
  .compare-table__row span {
    font-size: 14px;
  }
}

/* iPhone Plus 414 */
@media (max-width: 414px) {
  .logo__text {
    font-size: 15px;
  }

  .stat strong {
    font-size: clamp(1.5rem, 8vw, 2rem);
  }

  .promo-card--premium h2 {
    font-size: 1.15rem;
  }
}

/* iPhone 12/13/14 390 */
@media (max-width: 390px) {
  .btn {
    padding: 12px 20px;
    font-size: 14px;
  }

  .btn--lg {
    padding: 14px 22px;
  }

  .section-label {
    font-size: 11px;
  }
}

/* iPhone X/11 375 */
@media (max-width: 375px) {
  .hero h1 {
    font-size: clamp(1.65rem, 7vw, 2rem);
    line-height: 1.18;
  }

  .hero__price {
    font-size: clamp(1.3rem, 6.2vw, 1.75rem);
  }

  .mobile-nav__actions {
    grid-template-columns: 1fr;
  }

  .articles-carousel {
    gap: 8px;
  }
}

/* Android 360 */
@media (max-width: 360px) {
  :root {
    --space-container-sm: 12px;
  }

  .logo__text {
    font-size: 14px;
  }

  .logo__icon,
  .logo__icon .logo__svg {
    width: 34px;
    height: 34px;
  }

  .calc-service__name {
    font-size: 13px;
  }

  .calc-service__price {
    font-size: 11px;
  }
}

/* Small phones 320 */
@media (max-width: 320px) {
  :root {
    --space-container-sm: 10px;
    --header-height: 60px;
    --sticky-cta-height: 128px;
  }

  .btn {
    padding: 11px 16px;
    font-size: 13px;
  }

  .hero__pills li {
    font-size: 11px;
    padding: 5px 10px;
  }

  .sticky-cta {
    flex-direction: column;
    gap: 8px;
  }

  .sticky-cta__phone,
  .sticky-cta__btn {
    width: 100%;
  }
}

/* Landscape phones */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: 24px 0 32px;
  }

  .hero--premium .hero__aside {
    display: none;
  }

  .welcome-modal {
    padding: 24px 20px;
    max-height: calc(var(--vh-full) - 32px);
    overflow-y: auto;
  }

  .mobile-nav {
    padding-bottom: calc(12px + var(--safe-bottom));
  }

  .modal__dialog {
    max-height: calc(var(--vh-full) - 24px);
    padding: 20px;
  }

  .home-faq__intro {
    margin-bottom: 16px;
  }

  .home-faq__cta {
    margin-top: 16px;
  }

  .home-faq .faq-item__question {
    min-height: 48px;
    padding: 12px;
  }
}

/* ===== Mobile typography & components ===== */
@media (max-width: 768px) {
  :root {
    --text-h1-page: clamp(1.5rem, 5.5vw, 2rem);
    --text-h2: clamp(1.35rem, 4.8vw, 1.85rem);
    --text-h3: clamp(1.1rem, 3.8vw, 1.3rem);
    --text-body: 15px;
    --text-small: 13px;
    --text-caption: 12px;
    --text-lead: 16px;
    --space-section-sm: 44px;
  }

  body {
    font-size: var(--text-body);
    line-height: 1.55;
    padding-bottom: calc(var(--sticky-cta-height) + var(--safe-bottom));
  }

  /* Extra header row when admin/client badge is visible */
  .header:has(#headerAdminBadge:not([hidden])),
  .header:has(#headerClientBadge:not([hidden])) {
    --mobile-nav-offset: calc(var(--header-height) + 36px + var(--safe-top));
  }

  /* Headings */
  .hero h1,
  .hero__title {
    font-size: clamp(1.75rem, 6.5vw, 2.35rem);
    line-height: 1.2;
    margin-bottom: 16px;
    hyphens: none;
  }

  .hero__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.28em;
    text-wrap: balance;
  }

  .hero__title-sep {
    display: none !important;
  }

  .hero__price {
    font-size: clamp(1.45rem, 5.8vw, 2rem);
    line-height: 1.15;
  }

  .hero__lead {
    font-size: var(--text-lead);
    line-height: 1.55;
    margin-bottom: 24px;
  }

  .page-hero h1 {
    font-size: var(--text-h1-page);
    line-height: 1.15;
  }

  .page-hero p,
  .page-hero .breadcrumb {
    font-size: var(--text-small);
    line-height: 1.5;
  }

  .section-head {
    margin-bottom: 28px;
  }

  .section-head h2 {
    font-size: var(--text-h2);
    margin-bottom: 12px;
  }

  .section-head p {
    font-size: var(--text-body);
    line-height: 1.55;
  }

  .section-label {
    font-size: var(--text-caption);
    margin-bottom: 10px;
  }

  /* Home FAQ — vertical mobile layout (8px grid) */
  .home-faq {
    --faq-space-xs: 8px;
    --faq-space-sm: 16px;
    --faq-space-md: 24px;
    --faq-card-radius: 12px;
  }

  .home-faq__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .home-faq__intro {
    margin-bottom: var(--faq-space-md);
    text-align: left;
  }

  .home-faq__intro .section-label {
    display: block;
    margin-bottom: var(--faq-space-xs);
  }

  .home-faq__intro h2 {
    font-size: clamp(1.25rem, 5.2vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 var(--faq-space-sm);
    text-wrap: balance;
  }

  .home-faq__lead {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-muted);
    max-width: none;
  }

  .home-faq__grid > .faq-list {
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--faq-space-xs);
  }

  .home-faq .faq-item {
    width: 100%;
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--faq-card-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    box-sizing: border-box;
  }

  .home-faq .faq-item__question {
    width: 100%;
    min-height: 72px;
    padding: var(--faq-space-sm);
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--color-text);
    align-items: center;
    box-sizing: border-box;
  }

  .home-faq .faq-item__question-text {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
    text-wrap: pretty;
  }

  .home-faq .faq-item__question::after {
    content: '+';
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: var(--color-text-muted);
  }

  .home-faq .faq-item__answer p {
    padding: 0 var(--faq-space-sm) var(--faq-space-sm);
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-muted);
  }

  .home-faq__cta {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: var(--faq-space-md) 0 0;
    padding: 0;
  }

  .home-faq__cta .btn {
    width: min(100%, 240px);
    min-height: 44px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    justify-content: center;
    flex: 0 0 auto;
  }

  .home-reviews__hint {
    margin-top: 16px;
    margin-bottom: 16px;
    padding-inline: 4px;
    font-size: 12px;
    line-height: 1.45;
  }

  .home-reviews .section-head {
    margin-bottom: 16px;
  }

  /* FAQ accordion (standalone pages: faq.html, services, etc.) */
  body[data-page="faq"] .faq-list,
  .section .container.faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: none;
    width: 100%;
  }

  body[data-page="faq"] .faq-item,
  .section .container.faq-list .faq-item {
    width: 100%;
    margin: 0;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
  }

  body[data-page="faq"] .faq-item__question,
  .section .container.faq-list .faq-item__question {
    min-height: var(--touch-min);
    padding: 14px 16px;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    align-items: center;
    box-sizing: border-box;
  }

  body[data-page="faq"] .faq-item__question-text,
  .section .container.faq-list .faq-item__question-text {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
    text-wrap: pretty;
  }

  body[data-page="faq"] .faq-item__question::after,
  .section .container.faq-list .faq-item__question::after {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
  }

  body[data-page="faq"] .faq-item__answer p,
  .section .container.faq-list .faq-item__answer p {
    padding: 0 16px 16px;
    font-size: 13px;
    line-height: 1.55;
  }

  body[data-page="faq"] .faq-item.is-open .faq-item__answer,
  .section .container.faq-list .faq-item.is-open .faq-item__answer {
    max-height: 600px;
  }

  /* FAQ accordion (generic fallback) */
  .faq-item {
    margin-bottom: 8px;
  }

  .faq-item__question {
    color: var(--color-text);
    font-size: 14px;
    padding: 11px 14px;
    gap: 10px;
    min-height: var(--touch-min);
  }

  .faq-item__question::after {
    font-size: 18px;
    color: var(--color-text-muted);
  }

  .faq-item__answer p {
    padding: 0 14px 14px;
    font-size: var(--text-small);
    line-height: 1.5;
  }

  /* Cards & blocks */
  .trust-item h3 {
    font-size: var(--text-h3);
  }

  .trust-item p {
    font-size: var(--text-small);
    line-height: 1.5;
  }

  .stat strong {
    font-size: clamp(1.6rem, 7vw, 2.1rem);
  }

  .stat span {
    font-size: var(--text-small);
  }

  .service-card {
    padding: 22px 20px;
  }

  .service-card h3 {
    font-size: var(--text-h3);
  }

  .service-card > p,
  .service-card li {
    font-size: var(--text-small);
    line-height: 1.5;
  }

  .service-card__price {
    font-size: 1.35rem;
  }

  @media (max-width: 400px) {
    .service-card--visual .service-card__img {
      aspect-ratio: 2 / 1;
    }

    .service-card--visual .service-card__body {
      padding: 12px 14px 14px;
    }

    .service-card--visual h3 {
      font-size: 13px;
    }

    .service-card--visual p:not(.service-card__price) {
      font-size: 11px;
      -webkit-line-clamp: 2;
    }
  }

  .promo-card--premium h2,
  .promo-card-page h2 {
    font-size: var(--text-h3);
  }

  .promo-card--premium p,
  .promo-card-page p {
    font-size: var(--text-small);
    line-height: 1.5;
  }

  /* Home services — compact cards on mobile */
  .services-grid--visual {
    gap: 14px;
  }

  .service-card--visual {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    position: relative;
  }

  .service-card--visual .service-card__img {
    width: 100%;
    max-width: none;
    flex-shrink: 0;
    aspect-ratio: 16 / 9;
    min-height: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .service-card--visual .service-card__body {
    padding: 14px 16px 16px;
    gap: 0;
    justify-content: flex-start;
    min-width: 0;
  }

  .service-card--visual .service-card__tag {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-block;
    font-size: 9px;
    padding: 3px 8px;
    margin-bottom: 0;
    box-shadow: 0 2px 10px rgba(20, 24, 32, 0.2);
  }

  .service-card--visual h3 {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 2px;
  }

  .service-card--visual .service-card__price {
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 6px;
  }

  .service-card--visual p:not(.service-card__price) {
    flex: 0 0 auto;
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .service-card--visual .btn {
    padding: 8px 12px;
    font-size: 12px;
    min-height: var(--touch-min);
    white-space: normal;
  }

  /* Calculator — mobile layout */
  .calc-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .calc-info {
    order: 1;
  }

  .calc-panel {
    order: 2;
    padding: 18px 14px;
    gap: 14px;
    display: flex;
    flex-direction: column;
  }

  .home-calc__panel {
    order: 2;
    display: flex;
    flex-direction: column;
  }

  .home-calc__grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .home-calc__intro {
    order: 1;
    text-align: center;
  }

  .home-calc__panel {
    order: 2;
  }

  .home-calc {
    padding-top: var(--space-section-sm);
    padding-bottom: var(--space-section-sm);
  }

  .home-calc__intro h2 {
    font-size: var(--text-h2);
    margin-bottom: 8px;
  }

  .home-calc__intro p {
    font-size: var(--text-small);
    line-height: 1.5;
    margin-bottom: 0;
  }

  .home-calc__perks {
    justify-content: center;
    margin-top: 12px;
    gap: 8px;
  }

  .home-calc__perks li {
    font-size: 11px;
    padding: 6px 10px;
  }

  .calc-service-picker {
    display: flex;
  }

  .calc-services:not(.calc-services--sheet) {
    display: none !important;
  }

  .calc-info h2 {
    font-size: var(--text-h2);
    margin-bottom: 10px;
    text-align: center;
  }

  .calc-info {
    text-align: center;
  }

  .calc-benefits li {
    padding: 10px 12px 10px 28px;
    margin-bottom: 6px;
    font-size: var(--text-small);
    line-height: 1.45;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
  }

  /* Сначала площадь, потом выбор услуги, результат, кнопка */
  .home-calc__panel .calc-area {
    order: 1;
  }

  .home-calc__panel .calc-service-picker,
  .calc-panel .calc-service-picker {
    order: 2;
  }

  .home-calc__panel .calc-services {
    order: 2;
  }

  .home-calc__panel .home-calc__result,
  .calc-panel .calc-result {
    order: 3;
    margin-bottom: 0;
    padding: 14px 14px;
  }

  .home-calc__panel > .btn,
  .calc-panel .calc-feedback .btn {
    order: 4;
  }

  .calc-panel .calc-area {
    order: 1;
  }

  .calc-panel .calc-services {
    order: 2;
  }

  .calc-panel .calc-result {
    order: 3;
  }

  .calc-panel .calc-feedback {
    order: 5;
    padding-top: 12px;
    gap: 10px;
  }

  .home-calc__panel > .btn {
    order: 4;
    min-height: 48px;
    font-size: 15px;
  }

  .home-calc__panel {
    padding: 16px 14px;
    gap: 12px;
  }

  .calc-services {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .calc-services--sheet .calc-service {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    min-height: 52px;
    text-align: left;
  }

  .calc-services--sheet .calc-service__name {
    margin-bottom: 0;
    flex: 1;
    font-size: 15px;
    line-height: 1.35;
    min-width: 0;
  }

  .calc-services--sheet .calc-service__price {
    flex-shrink: 0;
    text-align: right;
    font-size: 12px;
    white-space: nowrap;
  }

  .calc-services--sheet .calc-service.is-active::after {
    content: '✓';
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--color-white);
    background: var(--color-gold);
    border-radius: 50%;
    margin-left: 4px;
  }

  .calc-service {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    min-height: 52px;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
  }

  .calc-service:active {
    transform: scale(0.98);
  }

  .calc-service__name {
    margin-bottom: 0;
    flex: 1;
    font-size: 15px;
    line-height: 1.35;
    min-width: 0;
  }

  .calc-service__price {
    flex-shrink: 0;
    text-align: right;
    font-size: 12px;
    white-space: nowrap;
  }

  .calc-service.is-active::after {
    content: '✓';
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--color-white);
    background: var(--color-gold);
    border-radius: 50%;
    margin-left: 4px;
  }

  .home-calc__panel .calc-service.is-active::after {
    background: var(--color-primary);
  }

  /* Площадь — по центру, крупный слайдер и кнопки ± */
  .calc-area__head {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 12px;
  }

  .calc-area__head label {
    width: auto;
    font-size: var(--text-caption);
    margin-bottom: 8px;
  }

  .calc-area__value {
    gap: 10px;
    margin-left: 0;
    justify-content: center;
    width: 100%;
  }

  .calc-area__step {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }

  .calc-area__head output {
    min-width: 80px;
    text-align: center;
    font-size: clamp(1.35rem, 6vw, 1.65rem);
    font-weight: 800;
  }

  .calc-area input[type="range"] {
    margin: 8px 0 4px;
    padding: 12px 0;
  }

  .calc-area__scale {
    font-size: 11px;
    margin-top: 4px;
  }

  .calc-area--light .calc-area__scale {
    color: var(--color-text-muted);
  }

  .calc-panel .calc-area__scale {
    color: rgba(255, 255, 255, 0.45);
  }

  /* Результат */
  .calc-result {
    padding: 18px 16px;
  }

  .calc-result strong,
  .home-calc__result strong {
    font-size: clamp(1.45rem, 7vw, 1.9rem);
    word-break: break-word;
    line-height: 1.15;
  }

  .calc-result span,
  .calc-result small,
  .home-calc__result span,
  .home-calc__result p {
    font-size: var(--text-small);
    line-height: 1.45;
  }

  .home-calc__result {
    padding: 18px 16px;
  }

  /* Форма заявки */
  .calc-feedback {
    gap: 12px;
    padding-top: 16px;
  }

  .calc-feedback__title {
    font-size: 1.05rem;
  }

  .calc-feedback__desc {
    font-size: var(--text-small);
    line-height: 1.5;
  }

  .calc-feedback input,
  .calc-feedback textarea {
    min-height: 48px;
    font-size: 16px;
  }

  .calc-feedback textarea {
    min-height: 96px;
  }

  .calc-feedback .btn {
    min-height: 52px;
    font-size: 15px;
  }

  .calc-feedback .form-note {
    font-size: var(--text-caption);
    line-height: 1.45;
  }

  body[data-page="calculator"] .section--dark {
    padding-top: 36px;
    padding-bottom: 44px;
  }

  /* Portfolio filter — horizontal scroll */
  .portfolio-filter {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 6px;
    margin-bottom: 20px;
    scrollbar-width: none;
  }

  .portfolio-filter::-webkit-scrollbar {
    display: none;
  }

  .portfolio-filter__btn {
    flex-shrink: 0;
    font-size: 13px;
    padding: 10px 16px;
    min-height: var(--touch-min);
    white-space: nowrap;
  }

  /* Reviews / 2GIS widget */
  .home-reviews-widget {
    padding: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .home-reviews-widget__frame {
    overflow: hidden;
  }

  .home-reviews-widget__iframe {
    min-height: 320px;
  }

  .home-reviews-widget__cta {
    margin-top: 16px;
    padding-inline: 4px;
  }

  .home-reviews-widget__cta .btn {
    width: 100%;
  }

  .home-reviews-widget__fallback-head {
    margin-bottom: 16px;
  }

  .home-reviews-widget--loading .home-reviews-widget__frame {
    min-height: 240px;
  }

  .home-reviews-widget__fallback-track .review-card--premium {
    flex: 0 0 min(300px, 88vw);
  }

  .review-card {
    padding: 20px 18px;
  }

  .review-card p {
    font-size: var(--text-small);
    line-height: 1.55;
  }

  .review-card strong {
    font-size: 14px;
  }

  /* Compare table */
  .compare-table__head span,
  .compare-table__row span {
    font-size: var(--text-small);
    line-height: 1.45;
  }

  /* Service detail */
  .service-detail__content h2 {
    font-size: var(--text-h2);
  }

  .service-detail__content p,
  .service-detail__content li {
    font-size: var(--text-body);
    line-height: 1.55;
  }

  /* Forms */
  .modal__dialog h2 {
    font-size: var(--text-h3);
  }

  .modal__dialog > p {
    font-size: var(--text-small);
  }

  .form-note,
  .form-note--modal {
    font-size: var(--text-caption);
    line-height: 1.45;
  }

  /* Footer */
  .footer__col strong {
    font-size: 13px;
  }

  .footer__col a,
  .footer__brand p {
    font-size: var(--text-small);
  }

  .footer__bottom p {
    font-size: var(--text-caption);
  }

  /* Sticky CTA */
  .sticky-cta__phone,
  .sticky-cta__btn {
    font-size: 14px;
    min-height: 48px;
  }

  /* Articles */
  .article-card h3 {
    font-size: 1rem;
  }

  .article-card__body > p {
    font-size: var(--text-small);
  }

  /* Before/after slider */
  .before-after__handle {
    width: 48px;
    min-height: 48px;
  }

  .before-after__tab {
    font-size: 13px;
    padding: 10px 14px;
    min-height: var(--touch-min);
  }

  /* Process */
  .process-step h3 {
    font-size: var(--text-h3);
  }

  .process-step p {
    font-size: var(--text-small);
  }

  /* Price table scroll hint */
  .price-table-wrap {
    position: relative;
  }

  .price-table-wrap::before {
    content: '';
    position: sticky;
    left: 0;
    display: block;
    height: 0;
    pointer-events: none;
  }

  /* Home cabinet promo */
  .home-cabinet {
    padding-top: var(--space-section-sm);
    padding-bottom: var(--space-section-sm);
  }

  /* Cabinet page */
  body[data-page="cabinet"] .cabinet-card h2,
  body[data-page="cabinet"] .cabinet-progress-card h2 {
    font-size: var(--text-h3);
  }

  body[data-page="cabinet"] .cabinet-dl dt,
  body[data-page="cabinet"] .cabinet-dl dd {
    font-size: var(--text-small);
  }

  /* Toast */
  .toast {
    font-size: 14px;
    padding: 14px 18px;
  }

  .back-to-top {
    bottom: calc(var(--sticky-cta-height) + 56px + var(--safe-bottom));
    right: calc(16px + var(--safe-right));
  }

  .toast {
    bottom: calc(var(--sticky-cta-height) + var(--safe-bottom));
    left: calc(16px + var(--safe-left));
    right: calc(16px + var(--safe-right));
  }

  .site-admin-bar {
    bottom: calc(var(--sticky-cta-height) + 64px + var(--safe-bottom));
  }

  .hero__actions .btn--outline {
    border-width: 2px;
  }

  .process-timeline {
    grid-template-columns: 1fr;
  }

  .marquee__track {
    animation-duration: 28s;
  }

  .marquee__track span {
    font-size: 11px;
  }

  .cta-banner h2 {
    font-size: var(--text-h2);
  }

  .cta-banner p {
    font-size: var(--text-body);
    line-height: 1.55;
  }

  .check-list li {
    font-size: var(--text-small);
    line-height: 1.5;
  }

  .benefit-card h3 {
    font-size: var(--text-h3);
  }

  .benefit-card p {
    font-size: var(--text-small);
  }

  .contact-card h3 {
    font-size: var(--text-caption);
  }

  .contact-card a,
  .contact-card p {
    font-size: var(--text-body);
  }

  .guarantee-card h3 {
    font-size: var(--text-h3);
  }

  .guarantee-card p {
    font-size: var(--text-small);
  }

  .portfolio-card h3 {
    font-size: 1rem;
  }

  .portfolio-card p {
    font-size: var(--text-small);
  }

  .portfolio-detail__gallery-wrap {
    padding: 14px;
  }

  .portfolio-detail__gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .portfolio-detail__gallery-item:first-child {
    grid-column: span 2;
    min-height: 220px;
  }

  .portfolio-detail__gallery-item:first-child img {
    min-height: 220px;
  }

  .portfolio-card__img {
    height: 220px;
  }

  .portfolio-lightbox__hint {
    display: none;
  }

  .content-block,
  .design-content p,
  .service-form-info > p {
    font-size: var(--text-body);
    line-height: 1.55;
  }

  .cabinet-login__form h2 {
    font-size: var(--text-h2);
  }

  .cabinet-login__form p,
  .cabinet-login__hint {
    font-size: var(--text-small);
  }

  .before-after__tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .before-after__tabs::-webkit-scrollbar {
    display: none;
  }

  .before-after__tab {
    flex-shrink: 0;
  }

  .before-after__range {
    min-height: 48px;
  }

  .before-after__handle {
    width: 52px;
    height: 52px;
  }
}

/* Home FAQ — tablet (769–1023): single-column layout, desktop grid from 1024px */
@media (min-width: 769px) and (max-width: 1023px) {
  .home-faq {
    --faq-space-xs: 8px;
    --faq-space-sm: 16px;
    --faq-space-md: 24px;
    --faq-card-radius: 12px;
  }

  .home-faq__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .home-faq__intro {
    margin-bottom: var(--faq-space-md);
    text-align: left;
  }

  .home-faq__grid > .faq-list {
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--faq-space-xs);
  }

  .home-faq .faq-item {
    width: 100%;
    margin: 0;
    border-radius: var(--faq-card-radius);
    box-shadow: var(--shadow-sm);
  }

  .home-faq .faq-item__question {
    min-height: 56px;
    padding: var(--faq-space-sm);
    font-size: 15px;
  }

  .home-faq__cta {
    display: flex;
    justify-content: center;
    margin: var(--faq-space-md) 0 0;
  }
}

/* Narrow phones — home design single column */
@media (max-width: 560px) {
  .home-design__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "visual"
      "details";
    gap: 20px;
  }

  .home-design__intro h2 {
    font-size: clamp(1.2rem, 5vw, 1.45rem);
  }

  .home-design__float--top {
    top: 12px;
    right: 12px;
  }

  .home-design__float--bottom {
    bottom: 12px;
    left: 12px;
  }
}

/* Smallest phones — panel centering & modal */
@media (max-width: 320px) {
  .welcome-modal {
    padding: 28px 18px;
    border-radius: 16px;
  }
}

/* CLS — reserve space for lazy images */
img[loading="lazy"],
img:not([width]):not([height]) {
  aspect-ratio: attr(width) / attr(height);
}

.hero-visual__main,
.article-card__img {
  background-color: var(--color-bg-gray);
}

.is-bg-loaded {
  background-color: transparent;
}

/* Swipe carousel hint */
.articles-carousel__viewport {
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}

.articles-carousel__viewport.is-dragging {
  cursor: grabbing;
}

/* Safari 100vh fix */
@supports (-webkit-touch-callout: none) {
  .mobile-nav {
    max-height: -webkit-fill-available;
  }

  .modal__dialog {
    max-height: -webkit-fill-available;
  }
}

/* Home cabinet — mobile stack: intro → phone → buttons */
@media (max-width: 768px) {
  .home-cabinet__layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "showcase"
      "actions";
    gap: 10px;
    padding: 14px 12px 16px;
    align-items: center;
    justify-items: center;
  }

  .home-cabinet__content {
    display: contents;
  }

  .home-cabinet__intro {
    grid-area: intro;
    width: 100%;
    text-align: center;
  }

  .home-cabinet__showcase {
    grid-area: showcase;
    max-width: 168px;
    padding: 0;
  }

  .home-cabinet__actions {
    grid-area: actions;
    width: 100%;
    max-width: 280px;
  }

  .home-cabinet__features {
    display: none !important;
  }
}

/* Reduced motion — mobile menu */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav,
  .mobile-nav-backdrop {
    transition: none;
  }

  .home-reviews-widget--loading .home-reviews-widget__frame {
    animation: none;
  }
}