/* =========================================================
   ДИЗАЙН-СИСТЕМА «КРУПНОБЛОЧНЫЙ БЕНТО»
   Палитра из шаблона: #2c3e50 (синий) + #e74c3c (красный).

   ВАЖНО ПРИ ПРАВКАХ:
   Имена классов и CSS-переменных намеренно оставлены прежними
   (--blue, --amber, .btn-amber, .adv-card ...). В PHP-шаблонах есть
   инлайн-стили вида style="color:var(--blue)", поэтому переименование
   переменных сломает вёрстку в неочевидных местах. Меняются ЗНАЧЕНИЯ,
   а не имена: --blue теперь тёмно-синий #2c3e50, --amber — красный #e74c3c.
   ========================================================= */

:root{
  /* ── палитра ─────────────────────────────────────────── */
  --blue:        #2c3e50;   /* основной тёмно-синий */
  --blue-light:  #eaeef2;   /* светлая подложка синего */
  --blue-dark:   #1d2c39;   /* самый тёмный, для плиток */
  --blue-2:      #34495e;   /* вторичный синий */
  --amber:       #e74c3c;   /* акцент (красный) */
  --amber-light: #fdeceb;   /* светлая подложка акцента */
  --amber-dark:  #c0392b;   /* нажатое состояние */
  --amber-soft:  #ff8b7e;   /* акцент на тёмном фоне */

  --text:        #2c3e50;
  --muted:       #7a8b98;
  --light:       #f2f4f6;   /* фон страницы */
  --white:       #ffffff;
  --border:      rgba(44,62,80,.09);
  --border-2:    rgba(44,62,80,.16);

  /* ── тени: мягкие, рассеянные, без «чёрной подводки» ── */
  --shadow-sm:   0 10px 24px -18px rgba(44,62,80,.30);
  --shadow-md:   0 20px 44px -28px rgba(44,62,80,.26);
  --shadow-lg:   0 34px 70px -34px rgba(44,62,80,.34);
  --shadow-nav:  0 16px 40px -18px rgba(44,62,80,.40);

  --radius:      26px;      /* плитка */
  --radius-sm:   16px;      /* поле ввода, мелкий элемент */
  --radius-pill: 999px;

  --ease:        cubic-bezier(.32,.72,0,1);
  --transition:  all .5s cubic-bezier(.32,.72,0,1);

  --nav-h:       76px;
}

/* =========================================================
   БАЗА
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)}
body{
  margin:0;background:var(--light);color:var(--text);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none;transition:color .4s var(--ease)}
a:hover{color:var(--amber)}
::selection{background:var(--amber);color:#fff}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}

h1,h2,h3,h4,h5,h6,.display{
  font-family:"Unbounded","Manrope",system-ui,sans-serif;
  font-weight:700;letter-spacing:-.045em;line-height:1.1;color:var(--text);margin:0 0 .5em;
}
h1{font-size:clamp(30px,4.4vw,58px);font-weight:800;letter-spacing:-.05em;line-height:1.02}
h2{font-size:clamp(25px,3.4vw,42px)}
h3{font-size:clamp(19px,2vw,24px);letter-spacing:-.04em}
h4{font-size:clamp(17px,1.6vw,20px);letter-spacing:-.035em}
h5,h6{font-size:16px;letter-spacing:-.03em}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
.fw-600{font-weight:600}
strong,b{font-weight:700}

/* Цифры — табличные, чтобы цены не «прыгали» в колонках */
.stat-number,.svc-price,.svc-price--sm,.calc-price-from,.calc-price-to,
.price-badge,.pricing-row span{font-variant-numeric:tabular-nums}

/* =========================================================
   СЕКЦИИ И ЗАГОЛОВКИ
   ========================================================= */
.section{padding:88px 0;position:relative}
.section-sm{padding:56px 0;position:relative}

.section-label{
  display:inline-block;padding:7px 15px;margin-bottom:18px;border-radius:var(--radius-pill);
  background:rgba(44,62,80,.07);color:var(--blue-2);
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}
.section-title{
  font-family:"Unbounded","Manrope",sans-serif;font-weight:700;
  font-size:clamp(25px,3.4vw,42px);letter-spacing:-.045em;line-height:1.1;
  margin:0 0 16px;color:var(--text);
}
.section-subtitle{color:var(--muted);font-size:16.5px;max-width:660px;margin:0 0 40px}
.text-center .section-subtitle,.text-center>.section-subtitle{margin-left:auto;margin-right:auto}

/* фоновые варианты секций */
.bg-light-custom{background:var(--light)}
.bg-contact{background:var(--blue);color:#fff}
/* h4–h6 тоже обязаны быть светлыми: заголовки карточек «Оставить заявку»
   и «Наши контакты» иначе остаются тёмно-синими на тёмно-синем фоне. */
.bg-contact .section-title,.bg-contact h1,.bg-contact h2,.bg-contact h3,
.bg-contact h4,.bg-contact h5,.bg-contact h6{color:#fff}
.bg-contact .form-label{color:rgba(255,255,255,.8)}
.bg-contact .contact-form-card h4,.bg-contact .contact-info-block h4{
  display:flex;align-items:center;gap:10px;margin:0 0 24px;
  font-family:"Unbounded",sans-serif;font-size:19px;font-weight:700;letter-spacing:-.04em;
}
.bg-contact .section-subtitle{color:rgba(255,255,255,.72)}
.bg-contact .section-label{background:rgba(255,255,255,.14);color:rgba(255,255,255,.9)}

/* Волна-разделитель из старого дизайна не нужна: блоки разделяются
   воздухом и плитками. Прячем, чтобы не трогать разметку. */
.divider-wave{display:none}

/* Появление при скролле.
   Порядок классов важен: .reveal сам по себе ВИДИМ — если JS не отработает
   (ошибка, старый браузер, блокировщик), контент останется на экране.
   Скрывает только .will-animate, который навешивает скрипт в layout.php,
   а IntersectionObserver затем добавляет .visible. */
.reveal{opacity:1;transform:none;transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.will-animate{opacity:0;transform:translateY(38px)}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.will-animate{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* =========================================================
   ПЛИТКА — базовый кирпич всей вёрстки
   ========================================================= */
.tile,.adv-card,.svc-card,.stat-card,.pricing-card,.master-card,.review-card,
.city-card,.model-card,.faq-item,.contact-form-card,.contact-info-block,
.calc-wrap,.step-item,.seo-inner{
  background:var(--white);border-radius:var(--radius);
  box-shadow:var(--shadow-md);border:none;
}
.adv-card,.svc-card,.stat-card,.master-card,.city-card,.model-card{
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.adv-card:hover,.svc-card:hover,.master-card:hover,.city-card:hover,.model-card:hover{
  transform:translateY(-4px);box-shadow:var(--shadow-lg);
}
.tile-dark{background:var(--blue);color:#fff}
.tile-accent{background:var(--amber);color:#fff}

/* =========================================================
   КНОПКИ
   ========================================================= */
.btn-amber,.btn-blue,.btn-outline-blue,.btn-outline-white{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:var(--radius-pill);border:none;cursor:pointer;
  font-family:"Manrope",sans-serif;font-size:15px;font-weight:700;line-height:1;
  text-decoration:none;white-space:nowrap;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease),color .5s var(--ease);
}
.btn-amber{background:var(--amber);color:#fff}
.btn-amber:hover{background:var(--amber);color:#fff;box-shadow:0 16px 34px -12px rgba(231,76,60,.62)}
.btn-amber:active{transform:scale(.975)}

.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-dark);color:#fff;box-shadow:0 16px 34px -12px rgba(44,62,80,.55)}
.btn-blue:active{transform:scale(.975)}

.btn-outline-blue{background:transparent;color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--border-2)}
.btn-outline-blue:hover{background:var(--blue);color:#fff;box-shadow:none}
.btn-outline-blue:active{transform:scale(.975)}

.btn-outline-white{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.32)}
.btn-outline-white:hover{background:#fff;color:var(--blue);box-shadow:none}
.btn-outline-white:active{transform:scale(.975)}

/* иконка внутри кнопки живёт в своём кружке и реагирует на наведение */
.btn-amber i,.btn-blue i,.btn-outline-blue i,.btn-outline-white i{
  display:grid;place-items:center;width:26px;height:26px;flex:0 0 auto;
  border-radius:var(--radius-pill);background:rgba(255,255,255,.2);font-size:.85em;
  transition:transform .5s var(--ease);
}
.btn-outline-blue i{background:rgba(44,62,80,.09)}
.btn-amber:hover i,.btn-blue:hover i,.btn-outline-white:hover i{transform:translate(2px,-2px) scale(1.07)}
.btn-outline-blue:hover i{background:rgba(255,255,255,.2);transform:translate(2px,-2px) scale(1.07)}

/* =========================================================
   ШАПКА — плавающий остров
   ========================================================= */
#navbar{
  position:fixed;top:14px;left:0;right:0;z-index:1030;
  padding:0 16px;background:none;border:none;transition:top .5s var(--ease);
}
#navbar .container{padding:0}
/* Тёмный остров вместо белого стеклянного: перекликается с плиткой hero
   и отделяет шапку от светлого фона страницы. */
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  height:62px;padding:0 10px 0 24px;border-radius:var(--radius-pill);
  background:rgba(24,37,49,.90);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.10);box-shadow:var(--shadow-nav);
  transition:background .5s var(--ease),box-shadow .5s var(--ease);
}
#navbar.scrolled .nav-inner{background:rgba(20,32,43,.97);box-shadow:0 22px 48px -20px rgba(10,18,25,.6)}

.nav-logo{
  font-family:"Unbounded",sans-serif;font-weight:800;font-size:18px;letter-spacing:-.05em;
  color:#fff;white-space:nowrap;
}
.nav-logo:hover{color:var(--amber-soft)}

.nav-links{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.nav-links>li{position:relative}
.nav-links a{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.76);white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-mega-trigger i{transition:transform .5s var(--ease)}
.nav-mega-wrap:hover .nav-mega-trigger{color:#fff}
.nav-mega-wrap:hover .nav-mega-trigger i{transform:rotate(180deg)}

.nav-right{display:flex;align-items:center;gap:12px}
.nav-phone{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;color:#fff}
.nav-phone i{color:var(--amber-soft);font-size:.9em}
.nav-phone:hover{color:var(--amber-soft)}
.nav-right .btn-amber{padding:11px 20px !important;font-size:14px !important}

.hamburger{
  display:none;place-items:center;width:42px;height:42px;flex:0 0 auto;
  border:none;border-radius:var(--radius-pill);background:rgba(255,255,255,.12);
  color:#fff;font-size:20px;cursor:pointer;transition:background .4s var(--ease);
}
.hamburger:hover{background:rgba(255,255,255,.2)}

/* ── мега-меню ─────────────────────────────────────────── */
/* Селектор обязан быть не слабее, чем .nav-links>li{position:relative} выше:
   у того специфичность (0,1,1), у голого .nav-mega-wrap — (0,1,0). При проигрыше
   контейнером для панели становится узкий <li> «Услуги», и мега-меню
   схлопывается в вертикальную полоску шириной в пункт меню. */
.nav-links>li.nav-mega-wrap{position:static}
.nav-mega-trigger{display:inline-flex;align-items:center}

/* Позиционирующая обёртка прозрачна; сама панель — .nav-mega-inner.
   Так панель держится в ширине контейнера, а не растягивается на весь экран. */
.nav-mega{
  position:absolute;top:calc(100% + 12px);left:0;right:0;z-index:1040;padding:0 16px;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s;
}
.nav-mega-wrap:hover .nav-mega,.nav-mega-wrap:focus-within .nav-mega{opacity:1;visibility:visible;transform:none}

.nav-mega-inner{
  display:grid;grid-template-columns:280px 1fr;max-width:1320px;margin:0 auto;
  border-radius:var(--radius);overflow:hidden;background:var(--white);
  box-shadow:0 40px 90px -34px rgba(20,32,43,.55);
}
/* Левая колонка — разделы */
.nav-mega-aside{
  display:flex;flex-direction:column;gap:2px;padding:16px;
  background:var(--light);border-right:1px solid var(--border);
}
.nav-mega-tab{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:11px 14px;border:none;border-radius:12px;background:none;
  font-family:"Manrope",sans-serif;font-size:14px;font-weight:600;color:var(--blue-2);
  text-align:left;cursor:pointer;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.nav-mega-tab i{font-size:12px;opacity:0;transform:translateX(-6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.nav-mega-tab:hover{background:rgba(44,62,80,.06)}
.nav-mega-tab.active{background:var(--blue);color:#fff}
.nav-mega-tab.active i{opacity:1;transform:none;color:var(--amber-soft)}

/* Правая колонка — ссылки активного раздела */
.nav-mega-panes{position:relative;padding:26px 30px;min-height:270px}
.nav-mega-pane{display:none}
.nav-mega-pane.active{display:block;animation:megaIn .45s cubic-bezier(.32,.72,0,1) both}
@keyframes megaIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.nav-mega-pane-head{
  display:flex;align-items:center;gap:10px;margin-bottom:18px;
  font-family:"Unbounded",sans-serif;font-size:15px;font-weight:700;
  letter-spacing:-.03em;color:var(--text);
}
.nav-mega-pane-head span{
  display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;
  border-radius:var(--radius-pill);background:var(--amber-light);color:var(--amber);
  font-family:"Manrope",sans-serif;font-size:11px;font-weight:700;letter-spacing:0;
}
.nav-mega-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px 24px;
}
.nav-mega-list a{
  display:block;padding:7px 10px;margin-left:-10px;border-radius:9px;
  font-size:14px;font-weight:500;color:var(--blue-2);line-height:1.4;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.nav-mega-list a:hover{background:var(--amber-light);color:var(--amber-dark)}

/* ── мобильная шторка ──────────────────────────────────── */
.mobile-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(400px,88vw);z-index:1060;
  padding:20px 22px 40px;overflow-y:auto;background:var(--white);
  box-shadow:-24px 0 60px -30px rgba(44,62,80,.5);
  transform:translateX(100%);transition:transform .6s var(--ease);
}
.mobile-drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;margin-bottom:12px;border-bottom:1px solid var(--border)}
.drawer-close{
  display:grid;place-items:center;width:40px;height:40px;border:none;
  border-radius:var(--radius-pill);background:rgba(44,62,80,.07);color:var(--text);
  font-size:16px;cursor:pointer;transition:background .4s var(--ease);
}
.drawer-close:hover{background:var(--amber);color:#fff}
.drawer-link{display:block;padding:14px 0;font-size:16.5px;font-weight:600;color:var(--text);border-bottom:1px solid var(--border)}
.drawer-link:hover{color:var(--amber)}
.drawer-mega-section{border-bottom:1px solid var(--border)}
.drawer-mega-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:14px 0;border:none;background:none;color:var(--text);
  font-family:inherit;font-size:16.5px;font-weight:600;text-align:left;cursor:pointer;
}
.drawer-mega-toggle i{color:var(--muted);font-size:.8em;transition:transform .5s var(--ease)}
.drawer-mega-toggle.open i{transform:rotate(180deg);color:var(--amber)}
.drawer-mega-list{
  list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;opacity:0;
  transition:max-height .6s var(--ease),opacity .6s var(--ease),padding .6s var(--ease);
}
.drawer-mega-list.open{max-height:1200px;opacity:1;padding:0 0 14px}
.drawer-mega-list a{display:block;padding:8px 0 8px 14px;font-size:15px;color:var(--blue-2);border-left:2px solid var(--border)}
.drawer-mega-list a:hover{color:var(--amber);border-left-color:var(--amber)}

body.drawer-open{overflow:hidden}
.drawer-backdrop{
  position:fixed;inset:0;z-index:1050;background:rgba(44,62,80,.5);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
}
.drawer-backdrop.open{opacity:1;visibility:visible}

/* =========================================================
   ГЛАВНЫЙ ЭКРАН
   ========================================================= */
#main-content{padding-top:calc(var(--nav-h) + 14px)}

/* Секции с собственным фоном.
   В прежнем дизайне это были полосы во всю ширину экрана; здесь они стали
   скруглёнными плитками с полями по бокам — это и есть основной приём стиля.
   Селекторы по id сохранены: разметка партиалов не менялась. */
#hero,#mini-cta,#cities{
  position:relative;overflow:hidden;margin:0 16px;
  border-radius:var(--radius);
}
/* Тёмные плитки */
#hero,#mini-cta{background:var(--blue);color:#fff}
#hero h1,#hero h2,#mini-cta h2,#mini-cta h3,#mini-cta .section-title{color:#fff}
#mini-cta p{color:rgba(255,255,255,.75)}

/* Между плитками обязателен вертикальный зазор, иначе тёмная секция
   контактов и плитка городов сливаются в одно пятно, а скругление
   выглядит случайным. */
#mini-cta{margin-top:34px;margin-bottom:34px}

#hero{padding:60px 0 68px}
/* Красное свечение в углу — тот же приём, что в плитке hero из макета */
#hero::after{
  content:'';position:absolute;right:-140px;bottom:-200px;
  width:560px;height:560px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(231,76,60,.30) 0%,transparent 68%);
}
#hero .lead{margin:20px 0 0;max-width:520px;font-size:17.5px;color:rgba(255,255,255,.74)}

#stats{padding:52px 0}
#calculator{padding:88px 0}

#mini-cta{padding:52px 0}
#mini-cta::after{
  content:'';position:absolute;left:-120px;top:-160px;
  width:420px;height:420px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(231,76,60,.28) 0%,transparent 68%);
}
#mini-cta .container{position:relative;z-index:2}

/* Города — светлая плитка. Выше по странице идёт тёмная секция контактов,
   и второй тёмный блок подряд сливался бы с ней в сплошное пятно. */
#cities{
  margin-top:34px;margin-bottom:34px;padding:52px 0;
  background:var(--white);color:var(--text);box-shadow:var(--shadow-md);
}
#cities .container{position:relative;z-index:2}
#cities h2{
  font-family:"Unbounded",sans-serif;font-size:clamp(25px,3.2vw,38px);
  font-weight:700;letter-spacing:-.045em;color:var(--text);margin:0 0 12px;
}
#cities .cities-label{color:var(--muted)}
#cities .cities-sub{color:var(--muted);margin-bottom:0}
#cities .cities-note{color:var(--muted)}

.cities-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:32px;
}
.cities-head-text{max-width:660px}
.cities-head-actions{display:flex;gap:10px;flex:0 0 auto;flex-wrap:wrap}

#seo-text{padding:64px 0}

.hero-content{position:relative;z-index:2}
/* Была полупрозрачная пилюля с точкой-иконкой и микро-текстом капсом
   вразрядку — самый узнаваемый шаблонный приём, тот же что на исходном сайте.
   Стало: красная вертикальная черта, обычный регистр, город отдельной меткой. */
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:12px;margin-bottom:22px;
  padding:2px 0 2px 14px;border-left:2px solid var(--amber);
  background:none;border-radius:0;
  color:rgba(255,255,255,.80);font-size:14.5px;font-weight:500;
  letter-spacing:0;text-transform:none;
}
.hero-eyebrow span{
  padding:4px 11px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.14);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
}
.hero-checks{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.hero-check{
  display:inline-flex;align-items:center;gap:9px;padding:10px 17px;
  border-radius:var(--radius-pill);background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.92);font-size:13.5px;font-weight:600;
}
.hero-check i{color:var(--amber-soft)}
.hero-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
/* Телефон и кнопка заявки в одной строке.
   min-height у обоих одинаковый, иначе плашка с номером (62px из-за круглой
   иконки) была бы заметно выше кнопки и строка выглядела бы ступенькой. */
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px}
.hero-actions .hero-phone-badge{margin-top:0}
.hero-actions .btn-amber{min-height:62px;padding:0 28px}
.hero-phone-badge{
  display:inline-flex;align-items:center;gap:12px;margin-top:22px;min-height:62px;
  padding:12px 22px 12px 14px;
  border-radius:var(--radius-pill);background:rgba(255,255,255,.12);
  color:#fff;font-size:19px;font-weight:800;font-family:"Unbounded",sans-serif;letter-spacing:-.04em;
  transition:background .5s var(--ease);
}
.hero-phone-badge:hover{background:rgba(255,255,255,.2);color:#fff}
.hero-phone-badge i{
  display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;
  border-radius:var(--radius-pill);background:var(--amber);font-size:16px;
}

/* сцена с устройством */
.device-stage{position:relative;display:grid;place-items:center;min-height:300px}
.device-glow{
  position:absolute;inset:0;margin:auto;width:74%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(231,76,60,.32) 0%,transparent 68%);
  filter:blur(10px);pointer-events:none;
}
.device-img{position:relative;z-index:2;border-radius:var(--radius);max-height:440px;object-fit:contain}

/* HERO с групповым фото «от пола» плитки.
   Включается модификатором .hero--floor, который ставит только главная
   (через $GLOBALS['HERO_IMG_FLOOR'] в views/home.php). Вместо устройства по
   центру колонки фото прижимается к правому нижнему углу #hero и подрезается
   его overflow:hidden — люди «стоят» на нижней границе плитки.
   Страницы категорий/брендов класса не получают, их hero не меняется.
   Ширину и запас высоты удобно крутить двумя переменными ниже.
   z-index:1 держит фото под текстом (.hero-content имеет z-index:2), поэтому
   даже при узком экране надпись всегда читается поверх изображения.
   Приём включается только от 1200px. На 992–1199px колонка текста узкая:
   лид переносится в пять строк, а кнопки встают в столбик, поэтому плитка
   вытягивается, и фото там не работает ни в одном варианте — прижатое к низу
   выглядит огрызком, а по центру колонки шеренга с обрезанными ногами просто
   висит в воздухе. Поэтому на этом диапазоне картинку убираем совсем. */
@media (min-width:992px) and (max-width:1199.98px){
  /* !important обязателен: у колонки стоит bootstrap-утилита d-lg-block,
     а она объявлена с !important и иначе перебивает это правило — картинка
     не скрывается, а съезжает под текст отдельной строкой. */
  .hero--floor .hero-figure{display:none !important}
  /* Без этого от скрытой картинки осталась бы пустая половина плитки.
     Лид держит свой max-width, так что строки не расползаются. */
  .hero--floor .hero-copy{flex:0 0 100%;max-width:100%}
}
@media (min-width:1200px){
  #hero.hero--floor{--hero-floor-w:62%;--hero-floor-max:900px;min-height:580px}
  .hero--floor .device-stage{
    position:absolute;right:0;bottom:0;z-index:1;
    display:block;min-height:0;pointer-events:none;
    width:min(var(--hero-floor-w),var(--hero-floor-max));height:100%;
  }
  /* Круглое красное пятно рассчитано на силуэт одного устройства: за группой
     людей оно читается как клякса. Общее свечение #hero::after остаётся. */
  .hero--floor .device-glow{display:none}
  /* Высота людей при contain равна «ширина бокса ÷ 2,11» (пропорции кадра),
     поэтому крупнее группу делает именно ширина — она же уводит фото под текст.
     Чтобы буквы не легли на лица, левый край растворяем маской: под лидом и
     кнопками остаётся чистый фон плитки, а группа проявляется правее. */
  .hero--floor .device-img{
    width:100%;height:100%;max-height:none;
    border-radius:0;object-fit:contain;object-position:right bottom;
    -webkit-mask-image:linear-gradient(to right,transparent 0,transparent 14%,rgba(0,0,0,.45) 26%,#000 40%);
            mask-image:linear-gradient(to right,transparent 0,transparent 14%,rgba(0,0,0,.45) 26%,#000 40%);
  }
}
/* На 1200–1400px колонка текста узкая, кнопки шире — фото сужаем, иначе
   группа наезжает на них слишком глубоко даже с маской. На больших экранах
   места хватает, и шеренгу показываем во всю высоту плитки. */
@media (min-width:1200px) and (max-width:1399.98px){
  #hero.hero--floor{--hero-floor-w:56%;--hero-floor-max:720px}
}
@media (min-width:1600px){
  #hero.hero--floor{--hero-floor-w:62%;--hero-floor-max:1120px}
}

/* HERO с панорамной фолбэк-картинкой (витрина техники, ~2:1).
   Класс hero--wide ставит _hero.php, когда картинка не найдена по контексту и
   подставлен общий /assets/img/tehnik.webp — то есть на страницах брендов и
   категорий без собственного изображения. Механика та же, что у hero--floor:
   при contain высота равна «ширина ÷ 2,09», поэтому крупнее её делает только
   ширина, а она же уводит картинку под текст. Левый край растворяем маской,
   чтобы под заголовком и кнопками остался чистый фон плитки.
   Категории со своей картинкой (телефон, ноутбук ≈ квадрат) класса не получают. */  
@media (min-width:1200px){
  #hero.hero--wide{--hero-wide-w:64%;--hero-wide-max:1080px;min-height:560px}
  .hero--wide .device-stage{position:static}
  .hero--wide .device-glow{display:none}
  .hero--wide .device-img{
    position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:1;
    width:min(var(--hero-wide-w),var(--hero-wide-max));
    max-width:none;height:auto;max-height:calc(100% - 40px);
    border-radius:0;object-fit:contain;pointer-events:none;
    -webkit-mask-image:linear-gradient(to right,transparent 0,transparent 4%,rgba(0,0,0,.45) 14%,#000 26%);
            mask-image:linear-gradient(to right,transparent 0,transparent 4%,rgba(0,0,0,.45) 14%,#000 26%);
  }
}
/* На 1200–1400px колонка текста узкая — сужаем, иначе витрина лезет на кнопки. */
@media (min-width:1200px) and (max-width:1399.98px){
  #hero.hero--wide{--hero-wide-w:58%;--hero-wide-max:700px}
}

/* =========================================================
   СЧЁТЧИКИ
   ========================================================= */
.stat-card{padding:28px 26px;text-align:left;height:100%}
.stat-number{
  display:block;font-family:"Unbounded",sans-serif;font-weight:800;
  font-size:clamp(26px,2.7vw,38px);letter-spacing:-.05em;line-height:1;color:var(--text);
}
.stat-label{display:block;margin-top:9px;color:var(--muted);font-size:13.5px;font-weight:500}

/* =========================================================
   ПРЕИМУЩЕСТВА
   ========================================================= */
.adv-card{padding:32px;height:100%}
.adv-icon{
  display:grid;place-items:center;width:56px;height:56px;margin-bottom:20px;
  border-radius:18px;background:var(--amber-light);color:var(--amber);font-size:24px;
  transition:transform .6s var(--ease),background .6s var(--ease),color .6s var(--ease);
}
.adv-card:hover .adv-icon{background:var(--amber);color:#fff;transform:rotate(-6deg) scale(1.05)}
.adv-card h3,.adv-card h4{margin-bottom:10px}
.adv-card p{color:var(--muted);font-size:14.5px;margin:0}

/* фото-блок с наложением */
.adv-photo-wrap{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.adv-photo-wrap img{display:block;width:100%;height:100%;object-fit:cover}
.adv-photo-overlay{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 38%,rgba(44,62,80,.86) 100%);
}
.adv-photo-stat{
  position:absolute;left:22px;bottom:22px;right:22px;z-index:2;
  display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:20px;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:var(--shadow-md);
}
.adv-photo-stat i{color:var(--amber);font-size:24px;flex:0 0 auto}
.adv-photo-stat b,.adv-photo-stat strong{
  font-family:"Unbounded",sans-serif;font-weight:800;letter-spacing:-.04em;color:var(--text);
}

/* =========================================================
   УСЛУГИ
   ========================================================= */
.svc-card{display:flex;flex-direction:column;height:100%;overflow:hidden}
.svc-card-photo{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--light)}
.svc-card-photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.svc-card:hover .svc-card-photo img{transform:scale(1.05)}
.svc-card-body{display:flex;flex-direction:column;flex:1;padding:26px}
.svc-card--sm .svc-card-body{padding:20px}
.svc-card-title{
  font-family:"Unbounded",sans-serif;font-size:17px;font-weight:700;letter-spacing:-.04em;
  line-height:1.25;margin:0 0 8px;color:var(--text);
}
.svc-card--sm .svc-card-title{font-size:15px}
.svc-card p{color:var(--muted);font-size:14px;margin:0 0 16px}
.svc-icon,.svc-icon--sm{
  display:grid;place-items:center;width:50px;height:50px;margin-bottom:16px;
  border-radius:16px;background:var(--blue-light);color:var(--blue);font-size:22px;
  transition:background .6s var(--ease),color .6s var(--ease),transform .6s var(--ease);
}
.svc-icon--sm{width:42px;height:42px;font-size:18px;border-radius:14px}
.svc-card:hover .svc-icon,.svc-card:hover .svc-icon--sm{background:var(--amber);color:#fff;transform:rotate(-6deg)}
.svc-price,.svc-price--sm{
  margin-top:auto;font-family:"Unbounded",sans-serif;font-weight:800;
  font-size:18px;letter-spacing:-.045em;color:var(--amber);
}
.svc-price--sm{font-size:15px}
.svc-price small,.svc-price--sm small{
  display:block;font-family:"Manrope",sans-serif;font-weight:500;
  font-size:12px;color:var(--muted);letter-spacing:0;margin-top:3px;
}

/* =========================================================
   ЦЕНЫ
   ========================================================= */
/* Тёмной шапки-плашки больше нет: карточка светлая целиком, а роль якоря
   играет крупная минимальная цена справа в шапке. */
.pricing-card{overflow:hidden;height:100%;display:flex;flex-direction:column}
.pricing-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:26px 26px 20px;background:none;color:var(--text);
  border-bottom:1px solid var(--border);
}
.pricing-head-main{display:flex;align-items:flex-start;gap:14px;min-width:0}
.pricing-icon{
  display:grid;place-items:center;width:46px;height:46px;flex:0 0 auto;
  border-radius:14px;background:var(--amber-light);color:var(--amber);font-size:20px;
  transition:background .6s var(--ease),color .6s var(--ease),transform .6s var(--ease);
}
.pricing-card:hover .pricing-icon{background:var(--amber);color:#fff;transform:rotate(-6deg)}
.pricing-head-text{min-width:0}
.pricing-head h5,.pricing-head h6{
  font-family:"Unbounded",sans-serif;font-size:17px;font-weight:700;
  letter-spacing:-.04em;line-height:1.2;margin:0 0 5px;color:var(--text);
}
.pricing-head-text span{display:block;font-size:12.5px;line-height:1.4;color:var(--muted)}
.pricing-from{flex:0 0 auto;text-align:right}
.pricing-from b{
  display:block;font-family:"Unbounded",sans-serif;font-size:22px;font-weight:800;
  letter-spacing:-.055em;line-height:1;color:var(--amber);white-space:nowrap;
}
.pricing-from span{
  display:block;margin-top:5px;font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.pricing-note{
  margin:0;padding:16px 26px;border-bottom:1px solid var(--border);
  background:var(--light);color:var(--muted);font-size:13.5px;
}

.pricing-row{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px 26px;border-top:1px solid var(--border);
  font-size:15px;transition:padding-left .5s var(--ease),background .5s var(--ease);
}
.pricing-row:first-of-type{border-top:none}
.pricing-row:hover{padding-left:34px;background:rgba(44,62,80,.025)}
.pricing-row .name{color:var(--blue-2);font-weight:500}
.pricing-row .price,.pricing-row b{
  font-family:"Unbounded",sans-serif;font-weight:800;font-size:15px;
  letter-spacing:-.045em;color:var(--amber);white-space:nowrap;
}
/* Подвал карточки — переход в категорию */
.pricing-more{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;padding:17px 26px;border-top:1px solid var(--border);
  font-size:13.5px;font-weight:700;color:var(--blue);
  transition:color .5s var(--ease),background .5s var(--ease);
}
.pricing-card:hover .pricing-more{color:var(--amber);background:var(--amber-light)}
.pricing-more i{transition:transform .5s var(--ease)}
.pricing-card:hover .pricing-more i{transform:translateX(5px)}

/* ── Призыв под прайсом ────────────────────────────────────
   Раньше это были две кнопки по центру — ровно как на исходном сайте.
   Стало тёмной плиткой: текст слева, действия справа. */
.pricing-cta{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  margin-top:34px;padding:30px 36px;border-radius:var(--radius);
  background:var(--blue);color:#fff;
}
.pricing-cta::after{
  content:'';position:absolute;right:-130px;bottom:-190px;
  width:440px;height:440px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(231,76,60,.28) 0%,transparent 68%);
}
.pricing-cta-text{position:relative;z-index:1;max-width:560px}
.pricing-cta-text b{
  display:block;margin-bottom:6px;color:#fff;
  font-family:"Unbounded",sans-serif;font-size:20px;font-weight:700;letter-spacing:-.04em;
}
.pricing-cta-text span{color:rgba(255,255,255,.72);font-size:14.5px;line-height:1.55}
.pricing-cta-actions{
  position:relative;z-index:1;display:flex;gap:12px;flex:0 0 auto;flex-wrap:wrap;
}

/* ── Плитка услуги на внутренних страницах ────────────────── */
.svc-tile{display:flex;flex-direction:column;padding:24px;height:100%}
.svc-tile-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}
.svc-tile-head h6{
  margin:0;font-family:"Unbounded",sans-serif;font-size:16px;font-weight:700;
  letter-spacing:-.04em;line-height:1.25;color:var(--text);
}
.svc-tile-price{
  flex:0 0 auto;font-family:"Unbounded",sans-serif;font-size:16px;font-weight:800;
  letter-spacing:-.05em;color:var(--amber);white-space:nowrap;
}
.svc-tile-desc{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6}
.svc-tile-more{
  display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:16px;
  font-size:13px;font-weight:700;color:var(--blue);
}
.svc-tile:hover .svc-tile-more{color:var(--amber)}
.svc-tile-more i{transition:transform .5s var(--ease)}
.svc-tile:hover .svc-tile-more i{transform:translateX(5px)}
.price-badge{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;
  border-radius:var(--radius-pill);background:var(--amber-light);color:var(--amber-dark);
  font-size:12.5px;font-weight:700;
}

/* Таблица прайса на страницах категорий (views/dynamic.php, класс .table от Bootstrap) */
.table{--bs-table-bg:transparent;margin:0;color:var(--text)}
.table>:not(caption)>*>*{padding:15px 18px;border-bottom-color:var(--border);background:transparent}
.table>thead>tr>th{
  font-family:"Manrope",sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--border);
}
.table>tbody>tr:last-child>*{border-bottom:none}
.table-hover>tbody>tr:hover>*{--bs-table-accent-bg:transparent;background:rgba(44,62,80,.03)}
.table-wrap,.table-responsive{border-radius:var(--radius);background:var(--white);box-shadow:var(--shadow-md);overflow:hidden}

/* =========================================================
   БРЕНДЫ, МОДЕЛИ, ЧИПСЫ
   ========================================================= */
.brands-grid{display:flex;flex-wrap:wrap;gap:10px}
.brand-chip{
  display:inline-flex;align-items:center;gap:8px;padding:11px 20px;
  border-radius:var(--radius-pill);background:var(--white);color:var(--blue-2);
  font-size:14px;font-weight:600;box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease),background .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease);
}
.brand-chip:hover{background:var(--blue);color:#fff;transform:translateY(-3px);box-shadow:var(--shadow-md)}
.brand-chip.active,.brand-chip.current{background:var(--amber);color:#fff}
.brand-chip img{max-height:22px;width:auto}

.model-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.model-card{display:flex;flex-direction:column;padding:18px;text-align:center;height:100%}
.model-card img{margin:0 auto 12px;max-height:96px;object-fit:contain}
.model-card-name{font-size:14.5px;font-weight:600;color:var(--text);line-height:1.35}
.model-card:hover .model-card-name{color:var(--amber)}

/* =========================================================
   НЕИСПРАВНОСТИ
   ========================================================= */
/* Доска на главной: две колонки строк одинаковой высоты внутри одной белой
   плитки. Прежние скруглённые чипсы давали рваные ряды — названия
   неисправностей сильно разной длины, а радиус 999px превращал двухстрочные
   в «кляксы». Заполнение сетки идёт по строкам: 1-я и 2-я строки — верхний ряд. */
.issues-board{
  display:grid;grid-template-columns:1fr 1fr;gap:0 44px;
  padding:10px 32px;border-radius:var(--radius);
  background:var(--white);box-shadow:var(--shadow-md);
}
.issue-row{
  display:flex;align-items:center;gap:14px;padding:17px 0;min-height:62px;
  border-top:1px solid var(--border);
}
.issue-row:nth-child(1),.issue-row:nth-child(2){border-top:none}
.issue-row>i{
  flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;
  border-radius:11px;background:var(--amber-light);color:var(--amber);font-size:15px;
  transition:background .5s var(--ease),color .5s var(--ease),transform .5s var(--ease);
}
.issue-row:hover>i{background:var(--amber);color:#fff;transform:rotate(-6deg)}
.issue-row-name{
  flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--text);line-height:1.35;
  transition:color .5s var(--ease);
}
.issue-row:hover .issue-row-name{color:var(--amber)}
.issue-row-dev{
  flex:0 0 auto;padding:5px 12px;border-radius:var(--radius-pill);
  background:var(--light);color:var(--muted);
  font-size:11.5px;font-weight:600;white-space:nowrap;
}
/* Ссылка-призыв справа в шапке блока */
.issues-cta{
  display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;padding-bottom:4px;
  font-size:14px;font-weight:700;color:var(--blue);white-space:nowrap;
}
.issues-cta i{transition:transform .5s var(--ease)}
.issues-cta:hover{color:var(--amber)}
.issues-cta:hover i{transform:translateX(5px)}

.issue-chip-wrap{display:flex;flex-wrap:wrap;gap:12px}
.issue-chip{
  display:inline-flex;align-items:center;gap:11px;padding:14px 20px;
  border-radius:var(--radius-pill);background:var(--white);color:var(--blue-2);
  font-size:14.5px;font-weight:600;box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.issue-chip:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.issue-chip i{color:var(--amber);font-size:1.1em;flex:0 0 auto}
.issue-chip--desc{
  flex-direction:column;align-items:flex-start;gap:5px;
  padding:20px 24px;border-radius:20px;text-align:left;
}
.issue-desc{color:var(--muted);font-size:12.5px;font-weight:500}

/* =========================================================
   ШАГИ РАБОТЫ
   ========================================================= */
.steps-wrapper{position:relative}
/* Пунктирная линия между шагами из старого дизайна убрана —
   в бенто-сетке шаги разделяются самими плитками. */
.steps-line{display:none}
.step-item{position:relative;padding:30px 26px;height:100%;text-align:left}
.step-num{
  display:inline-block;margin-bottom:22px;
  font-family:"Unbounded",sans-serif;font-size:13px;font-weight:800;
  letter-spacing:.1em;color:var(--amber);
}
.step-item h3,.step-item h4,.step-item h5{margin:0 0 10px;font-size:18px}
.step-item p{color:var(--muted);font-size:14px;margin:0}
/* каждый четвёртый шаг — акцентная плитка, чтобы ряд не был монотонным */
.step-item:nth-child(4n){background:var(--amber);color:#fff}
.step-item:nth-child(4n) .step-num{color:#fff}
.step-item:nth-child(4n) h3,.step-item:nth-child(4n) h4,.step-item:nth-child(4n) h5{color:#fff}
.step-item:nth-child(4n) p{color:rgba(255,255,255,.78)}

/* =========================================================
   КАЛЬКУЛЯТОР
   ========================================================= */
.calc-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:0;overflow:hidden}
.calc-left{padding:34px}
.calc-right{padding:34px;background:var(--blue);color:#fff;display:flex;flex-direction:column}
.calc-devices{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.calc-dev-tab{
  display:inline-flex;align-items:center;gap:9px;padding:11px 19px;
  border:none;border-radius:var(--radius-pill);background:var(--light);color:var(--blue-2);
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
  transition:background .5s var(--ease),color .5s var(--ease),transform .5s var(--ease);
}
.calc-dev-tab:hover{transform:translateY(-2px)}
.calc-dev-tab.active{background:var(--amber);color:#fff}
.calc-repairs-list{display:flex;flex-direction:column;gap:8px}
.calc-repair-item{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 20px;border-radius:var(--radius-sm);background:var(--light);
  font-size:14.5px;font-weight:600;cursor:pointer;
  transition:background .5s var(--ease),color .5s var(--ease),transform .5s var(--ease);
}
.calc-repair-item:hover{transform:translateX(4px)}
.calc-repair-item.active{background:var(--blue);color:#fff}
.calc-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;text-align:center;color:rgba(255,255,255,.6)}
.calc-placeholder-icon{
  display:grid;place-items:center;width:64px;height:64px;margin-bottom:16px;
  border-radius:var(--radius-pill);background:rgba(255,255,255,.1);font-size:26px;color:rgba(255,255,255,.75);
}
.calc-detail{display:flex;flex-direction:column;flex:1}
.calc-detail-service{font-family:"Unbounded",sans-serif;font-size:19px;font-weight:700;letter-spacing:-.04em;margin-bottom:18px}
.calc-price-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.calc-price-from{font-family:"Unbounded",sans-serif;font-size:clamp(30px,3.6vw,46px);font-weight:800;letter-spacing:-.055em;line-height:1}
.calc-price-to{font-size:18px;font-weight:600;color:rgba(255,255,255,.65)}
.calc-price-note{margin-top:8px;font-size:13px;color:rgba(255,255,255,.62)}
.calc-includes{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column;gap:10px}
.calc-include-item{display:flex;align-items:flex-start;gap:11px;font-size:14px;color:rgba(255,255,255,.86)}
.calc-include-item i{color:var(--amber-soft);flex:0 0 auto;margin-top:3px}
.calc-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:22px}
.calc-badge{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;
  border-radius:var(--radius-pill);background:rgba(255,255,255,.12);
  font-size:12.5px;font-weight:600;color:rgba(255,255,255,.9);
}
.calc-badge i{color:var(--amber-soft)}

/* =========================================================
   МАСТЕРА
   ========================================================= */
/* Портретная плитка: фото занимает всю карточку, данные лежат поверх
   градиента снизу. Отдельного белого «тела» под фото больше нет. */
.master-card{position:relative;overflow:hidden;aspect-ratio:3/4;height:auto}
.master-photo{position:absolute;inset:0;overflow:hidden;background:var(--blue-dark)}
.master-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.master-card:hover .master-photo img{transform:scale(1.06)}
.master-photo-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,42,55,0) 28%,rgba(28,42,55,.62) 58%,rgba(20,32,43,.95) 100%);
}
.master-exp-badge{
  position:absolute;left:16px;top:16px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;
  border-radius:var(--radius-pill);background:var(--amber);color:#fff;
  font-size:12px;font-weight:700;
}
.master-body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;padding:22px 20px;color:#fff;
}
.master-name{font-family:"Unbounded",sans-serif;font-size:17px;font-weight:700;letter-spacing:-.04em;margin:0 0 4px;color:#fff}
.master-role{color:var(--amber-soft);font-size:12.5px;font-weight:700;margin-bottom:10px}
.master-desc{
  color:rgba(255,255,255,.74);font-size:13px;line-height:1.5;margin:0 0 12px;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.master-skills{display:flex;flex-wrap:wrap;gap:6px}
.master-skill{
  padding:5px 11px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.16);color:#fff;font-size:11.5px;font-weight:600;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

/* =========================================================
   ОТЗЫВЫ
   ========================================================= */
.reviews-outer{position:relative}
.reviews-viewport{overflow:hidden}
.reviews-track{display:flex;min-width:100%;transition:transform .8s var(--ease);will-change:transform}
/* ВНИМАНИЕ: только flex-shrink, без flex-basis.
   Ширину слайда считает JS (initMultiSlider → setSlideSizes) и ставит инлайном:
   1/2/3 карточки для отзывов, 2/2/4 для мастеров. Любой flex-basis здесь
   перебьёт инлайновый width, и карусель растянется в одну карточку на экран.
   Проценты ниже — только фолбэк до того, как отработает скрипт. */
.review-slide{flex-shrink:0;width:100%;padding:6px 8px;box-sizing:border-box}
@media (min-width:768px){.review-slide{width:50%}}
@media (min-width:1200px){.review-slide{width:33.333%}}
.review-card{
  position:relative;overflow:hidden;height:100%;
  display:flex;flex-direction:column;gap:14px;padding:30px 28px 26px;
}
/* Кавычка — крупный водяной знак в углу, вне потока.
   В потоке она занимала бы отдельную пустую строку. */
.review-quote{
  position:absolute;right:16px;bottom:-26px;z-index:0;
  pointer-events:none;-webkit-user-select:none;user-select:none;
  font-family:"Unbounded",sans-serif;font-size:150px;line-height:1;font-weight:800;
  color:var(--blue-light);
}
/* Платформа — метка в правом верхнем углу, а не блок над текстом.
   align-self нужен, иначе inline-flex растянется во всю ширину колоночного флекса. */
.review-platform{
  position:absolute;top:22px;right:22px;z-index:2;align-self:flex-start;
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  border-radius:var(--radius-pill);background:var(--light);
  font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--blue-2);
}
.review-stars{position:relative;z-index:1;color:var(--amber);font-size:13px;letter-spacing:3px}
.review-text{position:relative;z-index:1;color:var(--blue-2);font-size:15.5px;line-height:1.65;flex:1;margin:0}
.review-author{
  position:relative;z-index:1;display:flex;align-items:center;gap:13px;
  margin-top:auto;padding-top:18px;border-top:1px solid var(--border);
}
.review-avatar-photo{
  width:42px;height:42px;flex:0 0 auto;border-radius:var(--radius-pill);
  object-fit:cover;background:var(--amber);
}
.review-name{font-size:14.5px;font-weight:700;color:var(--text);margin:0}
.review-meta{font-size:12px;color:var(--muted)}

/* Чётные карточки — тёмные. Лента перестаёт быть однородной простынёй белых плиток. */
.review-slide:nth-child(even) .review-card{background:var(--blue)}
.review-slide:nth-child(even) .review-text{color:rgba(255,255,255,.86)}
.review-slide:nth-child(even) .review-name{color:#fff}
.review-slide:nth-child(even) .review-meta{color:rgba(255,255,255,.55)}
.review-slide:nth-child(even) .review-stars{color:var(--amber-soft)}
.review-slide:nth-child(even) .review-quote{color:rgba(255,255,255,.09)}
.review-slide:nth-child(even) .review-author{border-top-color:rgba(255,255,255,.16)}
.review-slide:nth-child(even) .review-platform{background:rgba(255,255,255,.14);color:rgba(255,255,255,.88)}
/* ── Шапка ленты: заголовок слева, стрелки справа ──────────
   Раньше стрелки стояли по бокам от карточек — типовой вид карусели.
   Теперь это строка-заголовок, а под лентой идёт полоса прогресса. */
.slider-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:34px;
}
.slider-head-text{max-width:660px}
.slider-head-text .section-subtitle{margin-bottom:0}
.slider-nav{display:flex;gap:10px;flex:0 0 auto;padding-bottom:4px}

.slider-btn{
  display:grid;place-items:center;width:50px;height:50px;flex:0 0 auto;
  border:none;border-radius:16px;background:var(--blue);color:#fff;
  font-size:17px;cursor:pointer;
  transition:background .5s var(--ease),color .5s var(--ease),transform .5s var(--ease);
}
.slider-btn:hover:not(:disabled){background:var(--amber);transform:translateY(-2px)}
.slider-btn:active:not(:disabled){transform:scale(.95)}
.slider-btn:disabled{background:var(--border);color:var(--muted);cursor:default}

/* Точки превратились в сегментную полосу: сразу видно длину ленты и позицию */
.slider-dots{display:flex;gap:5px;margin-top:26px}
.slider-dot{
  flex:1;min-width:0;height:4px;padding:0;border:none;border-radius:2px;
  background:var(--border-2);cursor:pointer;transition:background .5s var(--ease);
}
.slider-dot:hover{background:var(--muted)}
.slider-dot.active{background:var(--amber)}

/* =========================================================
   FAQ
   ========================================================= */
/* Состояния задаёт скрипт в layout.php: класс .open вешается на .faq-question
   и на соседний .faq-answer (НЕ на .faq-item). Иконка — <i class="bi bi-plus faq-icon">. */
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{overflow:hidden}
.faq-question{
  display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;
  padding:22px 26px;border:none;background:none;color:var(--text);
  font-family:"Manrope",sans-serif;font-size:16.5px;font-weight:700;text-align:left;cursor:pointer;
  transition:color .5s var(--ease);
}
.faq-question:hover{color:var(--amber)}
.faq-question.open{color:var(--amber)}
.faq-icon{
  display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;
  border-radius:var(--radius-pill);background:var(--light);color:var(--amber);font-size:15px;
  transition:transform .6s var(--ease),background .6s var(--ease),color .6s var(--ease);
}
.faq-question.open .faq-icon{transform:rotate(45deg);background:var(--amber);color:#fff}
.faq-answer{
  max-height:0;overflow:hidden;padding:0 26px;
  color:var(--muted);font-size:15px;line-height:1.75;
  transition:max-height .65s var(--ease),padding .65s var(--ease);
}
.faq-answer.open{max-height:640px;padding:0 26px 24px}

/* =========================================================
   КОНТАКТЫ И ФОРМЫ
   ========================================================= */
.contact-form-card{padding:34px}
.bg-contact .contact-form-card{background:rgba(255,255,255,.08);box-shadow:none}
.contact-info-block{padding:34px;height:100%}
.bg-contact .contact-info-block{background:rgba(255,255,255,.08);box-shadow:none;color:#fff}
.contact-info-row{display:flex;align-items:flex-start;gap:15px;padding:17px 0;border-top:1px solid var(--border)}
.contact-info-row:first-of-type{border-top:none}
.bg-contact .contact-info-row{border-color:rgba(255,255,255,.16)}
.contact-info-row i{
  display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto;
  border-radius:14px;background:var(--amber-light);color:var(--amber);font-size:18px;
}
.bg-contact .contact-info-row i{background:rgba(255,255,255,.14);color:var(--amber-soft)}
/* ВНИМАНИЕ на роли тегов: в <strong> лежит ЗНАЧЕНИЕ (номер, почта, адрес),
   в <span> — пояснение к нему. Раньше здесь было наоборот: strong оформлялся
   как микро-подпись капсом, из-за чего номер телефона выглядел мельче,
   чем режим работы под ним. */
.contact-info-row strong,.contact-info-row b{
  display:block;margin-bottom:3px;
  font-size:16.5px;font-weight:700;letter-spacing:-.01em;
  text-transform:none;color:var(--text);line-height:1.3;
}
.contact-info-row span{
  display:block;font-size:13px;font-weight:500;color:var(--muted);line-height:1.45;
}
.bg-contact .contact-info-row strong,.bg-contact .contact-info-row b{color:#fff}
.bg-contact .contact-info-row span{color:rgba(255,255,255,.6)}
/* Телефон и почта — кликабельные, подчёркиваем это цветом при наведении */
.contact-info-row a{color:inherit}
.contact-info-row a:hover strong{color:var(--amber)}
/* ВНИМАНИЕ: флекс вешаем только на .wh-row.
   Прежнее правило .working-hours>div раскладывало в строку саму обёртку,
   из-за чего три строки расписания вставали в ряд и текст слипался. */
.working-hours{margin-top:22px;padding-top:20px;border-top:1px solid var(--border);font-size:14.5px}
.bg-contact .working-hours{border-top-color:rgba(255,255,255,.16)}
.working-hours>strong{
  display:block;margin-bottom:12px;font-size:10.5px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--muted);
}
.bg-contact .working-hours>strong{color:rgba(255,255,255,.6)}
.wh-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:7px 0}
.wh-row span:first-child{color:var(--muted)}
.bg-contact .wh-row span:first-child{color:rgba(255,255,255,.6)}
.wh-row span:last-child{font-weight:600;white-space:nowrap}

/* Подписи и сноски формы */
.form-optional{
  margin-left:6px;font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.contact-submit{font-size:16px;padding:16px}
.form-note-secure{
  margin:14px 0 0;text-align:center;font-size:12.5px;color:var(--muted);
}
.form-note-secure i{color:var(--amber);margin-right:5px}
.form-note-legal{
  margin:10px 0 0;text-align:center;font-size:11.5px;line-height:1.5;color:var(--muted);
}
.form-note-legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.form-note-legal a:hover{color:var(--amber)}
.bg-contact .form-note-secure,.bg-contact .form-note-legal{color:rgba(255,255,255,.55)}

/* поля ввода — общий вид для всех форм сайта */
.form-control,.form-select,.modal-input{
  width:100%;padding:14px 18px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  background:var(--white);color:var(--text);
  font-family:"Manrope",sans-serif;font-size:15px;line-height:1.4;
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease);
}
.form-control:focus,.form-select:focus,.modal-input:focus:focus{
  outline:none;border-color:var(--amber);box-shadow:0 0 0 4px rgba(231,76,60,.12);background:var(--white);
}
.form-control::placeholder,.modal-input::placeholder::placeholder{color:var(--muted)}
.bg-contact .form-control,.bg-contact .form-select{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff;
}
.bg-contact .form-control::placeholder{color:rgba(255,255,255,.55)}
.bg-contact .form-control:focus,.bg-contact .form-select:focus{
  background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.55);box-shadow:none;color:#fff;
}
.modal-field-label{
  display:block;margin-bottom:7px;font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}

/* =========================================================
   МОДАЛЬНОЕ ОКНО ЗАЯВКИ
   ========================================================= */
.modal-hero-content{
  border:none;border-radius:var(--radius);overflow:hidden;
  background:var(--white);box-shadow:0 50px 100px -40px rgba(44,62,80,.6);
}
.modal-hero-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:30px 32px;background:var(--blue);color:#fff;
}
.modal-hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;padding:6px 13px;
  border-radius:var(--radius-pill);background:rgba(255,255,255,.14);
  font-size:10.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
}
.modal-hero-eyebrow i{color:var(--amber-soft)}
.modal-hero-title{
  margin:0 0 6px;color:#fff;font-family:"Unbounded",sans-serif;
  font-size:24px;font-weight:700;letter-spacing:-.045em;
}
.modal-hero-sub{margin:0;color:rgba(255,255,255,.72);font-size:14.5px}
.modal-hero-close{
  display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;
  border:none;border-radius:var(--radius-pill);background:rgba(255,255,255,.14);
  color:#fff;font-size:15px;cursor:pointer;transition:background .4s var(--ease);
}
.modal-hero-close:hover:hover{background:var(--amber)}
.modal-hero-body{padding:30px 32px 32px}
.modal-trust{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.modal-trust-chip{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;
  border-radius:var(--radius-pill);background:var(--light);
  font-size:12px;font-weight:600;color:var(--blue-2);
}
.modal-trust-chip i{color:var(--amber)}

/* =========================================================
   ГОРОДА
   ========================================================= */
/* Города — не сетка карточек, а плотное облако пилюль.
   Шестнадцать одинаковых карточек занимали пол-экрана и читались как список
   товаров; пилюли дают тот же выбор в четыре раза компактнее. */
.cities-grid{display:flex;flex-wrap:wrap;gap:9px}
.city-card{
  display:inline-flex;align-items:center;gap:9px;padding:11px 18px;position:relative;
  border-radius:var(--radius-pill);background:var(--light);box-shadow:none;
  transition:background .5s var(--ease),transform .5s var(--ease),color .5s var(--ease);
}
.city-card:hover{background:var(--blue);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.city-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:auto;height:auto;flex:0 0 auto;border-radius:0;background:none;
  color:var(--amber);font-size:14px;transition:color .5s var(--ease);
}
.city-card:hover .city-icon{background:none;color:var(--amber-soft)}
.city-info{min-width:0}
.city-name{font-size:14.5px;font-weight:600;color:var(--blue-2);line-height:1.2;white-space:nowrap}
.city-card:hover .city-name{color:#fff}
.city-region{font-size:12px;color:var(--muted)}
/* Текущий город — заливка акцентом, отдельная плашка «Вы здесь» не нужна */
.city-card.city-current{background:var(--amber)}
.city-card.city-current .city-name,.city-card.city-current .city-icon{color:#fff}
.city-card.city-current:hover{background:var(--amber-dark);transform:none}
.city-card.city-current:hover .city-name,.city-card.city-current:hover .city-icon{color:#fff}
.city-current-badge{display:none}
/* Плитка #cities светлая, поэтому все три подписи — приглушённо-серые.
   Раньше здесь стояли белые цвета от тёмной версии блока; они шли ниже по файлу
   и перебивали светлые правила из секции #cities — текст сливался с фоном. */
.cities-label{
  display:flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px;
}
.cities-label i{color:var(--amber);font-size:12px;letter-spacing:0}
.cities-sub{color:var(--muted);font-size:16px;margin-bottom:0}
.cities-note{
  margin-top:26px;padding-top:20px;border-top:1px solid var(--border);
  color:var(--muted);font-size:13.5px;
}
.cities-note a{color:var(--amber);font-weight:600}

/* =========================================================
   SEO-БЛОК
   ========================================================= */
.seo-inner{padding:36px}
.seo-collapse{position:relative;max-height:260px;overflow:hidden;transition:max-height .8s var(--ease)}
.seo-collapse::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:110px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),var(--white));
  transition:opacity .5s var(--ease);
}
.seo-collapse.open{max-height:5000px}
.seo-collapse.open::after{opacity:0}
.seo-inner h2,.seo-inner h3,.seo-inner h4{margin-top:1.4em}
.seo-inner h2:first-child,.seo-inner h3:first-child{margin-top:0}
.seo-inner p,.seo-inner li{color:var(--blue-2);font-size:15px;line-height:1.75}
.seo-inner ul,.seo-inner ol{padding-left:20px}
.seo-inner a{color:var(--amber);text-decoration:underline;text-underline-offset:3px}
.seo-toggle{
  display:inline-flex;align-items:center;gap:9px;margin-top:18px;padding:11px 22px;
  border:none;border-radius:var(--radius-pill);background:var(--light);color:var(--blue-2);
  font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;
  transition:background .5s var(--ease),color .5s var(--ease);
}
.seo-toggle:hover{background:var(--blue);color:#fff}

/* =========================================================
   ХЛЕБНЫЕ КРОШКИ
   ========================================================= */
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;font-size:13px;background:none}
.breadcrumb-item{display:flex;align-items:center;gap:8px;color:var(--muted)}
.breadcrumb-item+.breadcrumb-item::before{content:'/';color:var(--border-2);padding:0}
.breadcrumb-item a{color:var(--muted);font-weight:500}
.breadcrumb-item a:hover{color:var(--amber)}
.breadcrumb-item.active{color:var(--blue-2);font-weight:600}

/* =========================================================
   ПОДВАЛ
   ========================================================= */
footer{margin-top:34px;padding:0 16px 34px;background:none;color:var(--text)}
footer>.container{padding:54px 48px;border-radius:var(--radius);background:var(--blue);color:#fff}
.footer-logo{
  font-family:"Unbounded",sans-serif;font-size:22px;font-weight:800;
  letter-spacing:-.05em;color:#fff;margin-bottom:14px;
}
.footer-desc{color:rgba(255,255,255,.62);font-size:14.5px;max-width:300px}
footer h6{
  margin-bottom:18px;color:rgba(255,255,255,.5);
  font-family:"Manrope",sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;
}
.footer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.footer-links a,.footer-links span{color:rgba(255,255,255,.82);font-size:14.5px}
.footer-links a:hover{color:var(--amber-soft)}

/* Контакты в подвале.
   Раньше цвета стояли инлайном в layout.php, и телефону доставался var(--blue) —
   ровно тот же #2c3e50, что у фона подвала, поэтому номер сливался. Здесь фон
   всегда тёмный, значит и палитра своя: белый текст и --amber-soft вместо
   --amber (красный #e74c3c на тёмно-синем читается плохо). */
.footer-phone{font-size:16px !important;font-weight:700;color:#fff !important;letter-spacing:-.01em}
.footer-phone:hover{color:var(--amber-soft) !important}
.footer-links .bi{color:var(--amber-soft)}
.footer-note{color:rgba(255,255,255,.55) !important;font-size:13px !important}
.footer-bottom{
  margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.58);font-size:12.5px;
}
.footer-bottom a{color:rgba(255,255,255,.62);text-decoration:underline;text-underline-offset:3px}
.footer-bottom a:hover{color:var(--amber-soft)}
.footer-social{
  display:grid;place-items:center;width:42px;height:42px;
  border-radius:var(--radius-pill);background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.85);font-size:19px;
  transition:background .5s var(--ease),color .5s var(--ease),transform .5s var(--ease);
}
.footer-social:hover{background:var(--amber);color:#fff;transform:translateY(-3px)}
.footer-extra{color:rgba(255,255,255,.46);font-size:11.5px;line-height:1.75}
.footer-extra a{color:rgba(255,255,255,.62)}

/* городские ссылки в подвале */
footer .brand-chip{background:rgba(255,255,255,.11);color:rgba(255,255,255,.85);box-shadow:none}
footer .brand-chip:hover{background:#fff;color:var(--blue)}
footer .brand-chip.active,footer .brand-chip.current{background:var(--amber);color:#fff}
footer .city-card{background:rgba(255,255,255,.08);box-shadow:none}
footer .city-card:hover{background:rgba(255,255,255,.14)}
footer .city-name{color:#fff}
footer .city-region{color:rgba(255,255,255,.55)}
footer .city-icon{background:rgba(255,255,255,.12);color:#fff}
footer .cities-label{color:rgba(255,255,255,.5)}

/* =========================================================
   СЛУЖЕБНОЕ: наверх, cookie
   ========================================================= */
#back-top{
  position:fixed;right:20px;bottom:20px;z-index:1020;
  display:grid;place-items:center;width:50px;height:50px;
  border:none;border-radius:var(--radius-pill);background:var(--blue);color:#fff;
  font-size:19px;cursor:pointer;box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s,background .4s var(--ease);
}
#back-top.show{opacity:1;visibility:visible;transform:none}
#back-top:hover{background:var(--amber)}

#cookie-bar{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:1040;
  padding:18px 24px;border-radius:22px;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:var(--shadow-lg);
  transform:translateY(140%);transition:transform .7s var(--ease);
}
#cookie-bar.show{transform:none}
#cookie-bar .container{padding:0}
#cookie-bar p{margin:0;font-size:13.5px;color:var(--blue-2)}
#cookie-bar a{color:var(--amber);font-weight:600}

/* =========================================================
   ПЕРЕОПРЕДЕЛЕНИЯ BOOTSTRAP
   ========================================================= */
.modal-content{border:none;border-radius:var(--radius)}
.modal-backdrop.show{opacity:.55;background:#2c3e50}
.card{border:none;border-radius:var(--radius);box-shadow:var(--shadow-md)}
.badge{border-radius:var(--radius-pill);font-weight:700}
.btn:focus,.btn:active:focus{box-shadow:none}
.text-primary{color:var(--blue) !important}
.text-warning{color:var(--amber) !important}
.bg-primary{background-color:var(--blue) !important}
.bg-warning{background-color:var(--amber) !important}
.container{max-width:1320px}

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width:1199.98px){
  .nav-mega-cols{grid-template-columns:repeat(3,1fr)}
  .calc-wrap{grid-template-columns:1fr}
}
@media (max-width:991.98px){
  :root{--nav-h:70px}
  .section{padding:64px 0}
  .section-sm{padding:44px 0}
  .nav-links{display:none}
  .hamburger{display:grid}
  .nav-mega{display:none}
  footer>.container{padding:40px 28px}
  .device-stage{min-height:0}
}
@media (max-width:767.98px){
  :root{--radius:20px;--radius-sm:14px}
  body{font-size:15.5px}
  .section{padding:52px 0}
  .section-sm{padding:36px 0}
  #navbar{top:10px;padding:0 12px}
  .nav-inner{height:56px;padding:0 8px 0 18px}
  .nav-logo{font-size:16px}
  .nav-right .btn-amber{padding:10px 16px !important;font-size:13px !important}
  .nav-right .btn-amber i{display:none}
  .adv-card,.contact-form-card,.contact-info-block,.review-card,.seo-inner,.calc-left,.calc-right{padding:24px}
  .step-item{padding:24px 22px}
  .modal-hero-head,.modal-hero-body{padding:24px 22px}
  .model-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .cities-grid{grid-template-columns:1fr}
  footer{padding:0 12px 24px}
  footer>.container{padding:32px 22px}
  #cookie-bar{left:12px;right:12px;bottom:12px;padding:16px 18px}
  #back-top{right:14px;bottom:78px;width:46px;height:46px}
  .pricing-row{padding:14px 20px}
  .pricing-row:hover{padding-left:24px}
  .pricing-head{padding:22px 20px}
  .hero-phone-badge{font-size:17px}
  /* Одна колонка: во второй строки становились бы слишком узкими,
     и название неисправности снова переносилось бы на две строки. */
  .pricing-cta{flex-direction:column;align-items:flex-start;gap:22px;padding:26px 22px}
  .pricing-cta-actions{width:100%}
  .issues-board{grid-template-columns:1fr;padding:6px 22px}
  .issue-row{padding:15px 0;min-height:56px;gap:12px}
  .issue-row-dev{display:none}
  .cities-head{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:26px}
  .cities-head-actions{width:100%}
  .slider-head{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:26px}
  .slider-nav{padding-bottom:0}
  .slider-btn{width:44px;height:44px;border-radius:14px;font-size:15px}
  .review-card{padding:26px 22px 22px}
  .review-quote{font-size:110px;right:10px;bottom:-20px}
  /* Только боковые поля ужимаем; вертикальный зазор между плитками
     обязан остаться, иначе на мобильном блоки снова слипнутся. */
  #hero{margin:0 12px}
  #mini-cta,#cities{margin:24px 12px}
  #hero{padding:44px 0 48px}
  #mini-cta,#cities{padding:40px 0}
  #stats,#seo-text{padding:40px 0}
  #calculator{padding:52px 0}
}
@media (max-width:575.98px){
  .hero-checks{gap:8px}
  .hero-check{font-size:12.5px;padding:9px 14px}
  .btn-amber,.btn-blue,.btn-outline-blue,.btn-outline-white{width:100%;justify-content:center}
  .nav-right .btn-amber{width:auto}
  .hero-buttons>*,.hero-actions>*{width:100%}
  .hero-actions .hero-phone-badge{justify-content:center}
}

/* печать */
@media print{
  #navbar,.mobile-drawer,#back-top,#cookie-bar,.drawer-backdrop{display:none !important}
  body{background:#fff}
  #main-content{padding-top:0}
}