/* build:20260209-6 */
/* Local font (recommended): place Manrope variable font as:
   /assets/fonts/Manrope-VariableFont_wght.woff2
   This avoids зависания/блокировки Google Fonts у некоторых провайдеров.
*/
@font-face{
  font-family:"Manrope";
  src:url("/assets/fonts/Manrope-VariableFont_wght.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#0b1022;
  --bg2:#070a16;

  --panel: rgba(255,255,255,.07);
  --panel2: rgba(255,255,255,.05);
  --stroke: rgba(255,255,255,.12);

  --text:#eef2ff;
  --muted: rgba(238,242,255,.72);

  --a1:#2ea7ff;
  --a2:#ff8a00;
  --a3:#22c55e;
  --a4:#ff8a00;
  --brand-orange:#ff8a00;
  --brand-blue:#2ea7ff;
  --brand-dark:#0b1022;

  --shadow: 0 20px 70px rgba(0,0,0,.38);
  --r: 20px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background:
    radial-gradient(1000px 560px at 18% 10%, rgba(124,58,237,.28), transparent 60%),
    radial-gradient(1000px 560px at 85% 20%, rgba(6,182,212,.22), transparent 60%),
    radial-gradient(1000px 560px at 50% 95%, rgba(34,197,94,.18), transparent 65%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  min-height:100vh;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
.container{ width:min(1040px, 92vw); margin:0 auto; }
.container--wide{ width:min(1200px, 92vw); margin:0 auto; }

.reveal{ opacity:1; transform:none; }
.js .reveal{ opacity:0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.js .reveal.in{ opacity:1; transform:none; }

/* Topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(7,10,22,.70);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar__row{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 0;
  gap: 12px;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight: 1000; letter-spacing:.2px; }
.brand__mark{
  width:14px; height:14px; border-radius:6px;
  background: linear-gradient(135deg, rgba(0,119,255,.95), rgba(124,58,237,.92));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.nav{ display:flex; gap: 10px; font-weight: 800; color: rgba(238,242,255,.86); }
.nav a{ padding: 10px 12px; border-radius: 999px; }
.nav a:hover{ background: rgba(255,255,255,.08); }

.topbar__actions{ display:flex; align-items:center; gap: 10px; }
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(120deg, rgba(124,58,237,.20), rgba(6,182,212,.16));
  font-weight: 900;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.pill__icon{
  width:16px;
  height:16px;
  display:inline-block;
  flex:0 0 16px;
  object-fit:contain;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.25));
}
.pill--ghost{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }

.burger{
  display:none;
  width:44px; height:44px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  padding: 10px;
}
.burger span{ display:block; height:2px; background: rgba(238,242,255,.92); margin: 6px 0; border-radius: 9px; }

/* Mobile nav */
/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight: 1000;
  cursor:pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); }
.btn:active{ transform: translateY(0); }

.btn--primary{
  background: linear-gradient(120deg, rgba(249,115,22,.22), rgba(124,58,237,.24), rgba(6,182,212,.18));
  box-shadow: 0 12px 34px rgba(0,0,0,.20);
}
.btn--soft{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }

/* Messenger button variants */
.btn--tg{ background: rgba(46,167,255,.14); border-color: rgba(46,167,255,.35); }
.btn--tg:hover{ background: rgba(46,167,255,.20); border-color: rgba(46,167,255,.50); }
.btn--vk{ background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.35); }
.btn--vk:hover{ background: rgba(34,197,94,.20); border-color: rgba(34,197,94,.50); }
.btn--max{ background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.35); }
.btn--max:hover{ background: rgba(59,130,246,.20); border-color: rgba(59,130,246,.50); }

.btn--small{ padding: 10px 12px; border-radius: 14px; font-weight: 900; }
.btn--wide{ width:100%; }

/* Floating */
.float{
  position: fixed;
  right: 14px; bottom: 14px;
  display:flex; flex-direction:column; gap: 10px;
  z-index: 80;
}
.float__btn{
  width:54px; height:54px;
  border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  box-shadow: 0 14px 44px rgba(0,0,0,.30);
  font-size: 20px;
}
.float__btn--main{
  background: linear-gradient(120deg, rgba(124,58,237,.30), rgba(6,182,212,.24));
}

/* Bottom bar (mobile) */
.bbar{
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  display:none;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
  z-index: 79;
}
.bbar__btn{
  flex:1;
  text-align:center;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-weight: 1000;
}
.bbar__btn--main{
  background: linear-gradient(120deg, rgba(124,58,237,.28), rgba(6,182,212,.22));
}

/* Hero */
.hero{ position:relative; padding: 30px 0 18px; overflow:hidden; isolation:isolate; }
.hero__bg{
  position:absolute;
  inset:-80px;
  background:
    linear-gradient(90deg, rgba(7,12,24,.92) 0%, rgba(7,12,24,.70) 52%, rgba(7,12,24,.35) 100%),
    url("assets/workshop-hero.webp") center/cover no-repeat;
  filter: blur(10px) brightness(.85) saturate(1.05);
  transform: scale(1.06);
  z-index: 0;
  pointer-events:none;
}
.hero__grid{
  position:relative;
  z-index: 2;
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 16px;
  align-items:start;
}

.hero__right{
  display:flex;
  flex-direction:column;
  gap: 14px;
  align-items: flex-end;
}
.hero__right .glass,
.hero__sidecard{
  width:100%;
  max-width: 540px;
}

.hero__sidecard{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  box-shadow: var(--shadow);
  overflow:hidden;
}

.sidecard__media img{
  display:block;
  width:100%;
  height: 190px;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
}

.sidecard__body{
  padding: 14px 16px 16px;
}

.sidecard__title{
  font-weight: 1000;
  font-size: 16px;
  margin-bottom: 10px;
}

.sidecard__list{
  margin:0;
  padding-left: 18px;
  color: rgba(238,242,255,.88);
}

.sidecard__list li{
  margin: 6px 0;
}

.sidecard__list a{
  color: #9cd3ff;
  text-decoration: none;
  border-bottom: 1px dashed rgba(156,211,255,.45);
}
.sidecard__list a:hover{ border-bottom-color: rgba(156,211,255,.9); }

@media (max-width: 980px){
  .hero__right{ align-items: stretch; }
  .hero__right .glass, .hero__sidecard{ max-width: 100%; }
  .sidecard__media img{ height: 160px; }
}
.pillline{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-weight: 900;
  color: rgba(238,242,255,.86);
}
.pillline__dot{
  width:10px; height:10px; border-radius:4px;
  background: linear-gradient(135deg, rgba(0,119,255,.95), rgba(124,58,237,.92));
  box-shadow: 0 0 0 6px rgba(124,58,237,.14);
}
.hero__title{
  margin: 12px 0 10px;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -.9px;
}
.grad{
  background: linear-gradient(120deg, var(--a4), var(--a1), var(--a2), var(--a3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__desc{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.5;
}
.hero__note{ opacity:.9; font-size: 13px; }

.hero__cta{ display:flex; gap: 10px; flex-wrap:wrap; margin: 10px 0 12px; }

.chips{ display:flex; flex-wrap:wrap; gap: 10px; margin: 6px 0 12px; }
.chip{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(238,242,255,.92);
  cursor:pointer;
  font-weight: 1000;
}
.chip:hover{ background: rgba(255,255,255,.09); }

.hero__cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.kpi{
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.kpi b{ display:block; }
.kpi span{ display:block; color: var(--muted); font-size: 13px; margin-top: 4px; }

.promo{
  margin-top: 12px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(120deg, rgba(249,115,22,.12), rgba(124,58,237,.10), rgba(6,182,212,.10));
  display:flex; justify-content:space-between; gap: 12px; align-items:center; flex-wrap:wrap;
}
.promo__tag{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(249,115,22,.12);
  font-weight: 1000;
}
.promo__text b{ font-weight: 1000; }
.promo__text span{ display:block; color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.promo__btn{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight: 1000;
}

/* Glass form */
.glass{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  box-shadow: var(--shadow);
  padding: 16px;
}
.glass__head{ display:flex; justify-content:space-between; gap: 10px; align-items:center; }
.glass__title{ font-weight: 1000; font-size: 18px; }
.glass__sub{ color: var(--muted); margin-top: 4px; font-size: 13px; }
.badge{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(34,197,94,.12);
  font-weight: 1000;
  text-transform: lowercase;
}

.form{ display:grid; gap: 10px; margin-top: 12px; }
.field span{ display:block; font-size: 12px; font-weight: 1000; color: rgba(238,242,255,.82); margin-bottom: 6px; }
input, select{
  width:100%;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(7,10,22,.55);
  color: var(--text);
  outline:none;
}
input:focus, select:focus{ border-color: rgba(6,182,212,.55); box-shadow: 0 0 0 6px rgba(6,182,212,.10); }
.row{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.hint{ color: var(--muted); font-size: 12.5px; text-align:center; }
.hint a{ text-decoration: underline; text-underline-offset: 3px; }

.quick{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 10px; }
.quick__btn{
  flex:1;
  min-width: 130px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(238,242,255,.92);
  font-weight: 1000;
  cursor:pointer;
}
.quick__btn:hover{ background: rgba(255,255,255,.08); }

.trust{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 12px; }
.trust__item{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  font-weight: 900;
  color: rgba(238,242,255,.88);
  font-size: 13px;
}

/* Sections */
.section{ padding: 52px 0; }
.section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.head{
  display:flex; justify-content:space-between;
  gap: 14px; align-items:flex-end; flex-wrap:wrap;
}
.head h2{ margin:0; font-size: 30px; letter-spacing: -.4px; }
.head p{ margin:0; color: var(--muted); max-width: 620px; line-height: 1.35; }
.head__actions{ display:flex; gap: 10px; flex-wrap:wrap; }

/* Grid cards */
.grid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.card{
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.card__top{ display:flex; align-items:center; gap: 10px; }
.ic{
  width:44px; height:44px; border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(120deg, rgba(124,58,237,.16), rgba(6,182,212,.12));
  font-size: 18px;
}
.ul{ margin: 12px 0 0; padding-left: 18px; color: rgba(238,242,255,.84); }
.ul li{ margin: 7px 0; color: rgba(238,242,255,.80); }
.card__cta{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 12px; }

.wide{
  margin-top: 14px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(120deg, rgba(6,182,212,.12), rgba(34,197,94,.10));
  display:flex; justify-content:space-between; gap: 14px; align-items:center; flex-wrap:wrap;
}
.wide h3{ margin:0; }
.wide p{ margin: 6px 0 0; color: var(--muted); }
.wide__btns{ display:flex; gap: 10px; flex-wrap:wrap; }

/* Tags */
.tags{ margin-top: 14px; display:flex; flex-wrap:wrap; gap: 10px; }
.tag{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-weight: 1000;
  color: rgba(238,242,255,.88);
}

/* Steps */
.steps{ margin-top: 16px; display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.step{
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.step__n{
  width:40px; height:40px; border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 1000;
  background: linear-gradient(120deg, rgba(34,197,94,.20), rgba(6,182,212,.16));
  border: 1px solid rgba(255,255,255,.12);
}
.step p{ margin: 8px 0 0; color: var(--muted); }
.step__btns{ margin-top: 10px; display:flex; gap:10px; flex-wrap:wrap; }

.strip{
  margin-top: 14px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  display:flex; justify-content:space-between; gap: 12px; align-items:center; flex-wrap:wrap;
}
.strip__left b{ display:block; }
.strip__left span{ color: var(--muted); }
.strip__right{ display:flex; gap: 10px; flex-wrap:wrap; }

/* Reviews */
.reviews{ margin-top: 16px; display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.review{
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.review p{ margin: 8px 0 0; color: var(--muted); }
.review__btns{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 12px; }

.miniinfo{ margin-top: 12px; display:flex; flex-wrap:wrap; gap: 10px; }
.miniinfo__item{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  font-weight: 900;
  color: rgba(238,242,255,.88);
}

/* Find */
.find{ margin-top: 16px; display:grid; grid-template-columns: 1fr 1.1fr; gap: 12px; align-items:start; }
.photos{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.photo{
  padding:0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  cursor:pointer;
  text-align:left;
}
.photo img{
  width:100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform .25s ease;
}
.photo:hover img{ transform: scale(1.03); }
.photo span{
  display:block;
  padding: 10px 12px;
  font-weight: 1000;
  color: rgba(238,242,255,.86);
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(7,10,22,.35);
}

.addr{ margin-top: 12px; display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.addr__card{
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.addr__card p{ margin: 6px 0 0; color: var(--muted); }
.addr__btns{ margin-top: 10px; display:flex; gap: 10px; flex-wrap:wrap; }

.map{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.map iframe{ width:100%; height: 420px; border:0; display:block; }
.mapbar{ display:flex; gap: 10px; flex-wrap:wrap; padding: 12px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(7,10,22,.30); }

/* FAQ */
.faq{ margin-top: 16px; display:grid; gap: 10px; }
.qa{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  max-height: calc(100vh - 120px);
}

.qa__q{
  width:100%;
  padding: 14px 14px;
  background: transparent;
  border:0;
  color: rgba(238,242,255,.92);
  font-weight: 1000;
  text-align:left;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.qa__q::after{ content:"＋"; opacity:.9; }
.qa.open .qa__q::after{ content:"—"; }
.qa__a{
  padding: 0 14px 14px;
  color: var(--muted);
  line-height: 1.5;
  display:none;
}
.qa.open .qa__a{ display:block; }

/* Leadbox */
.leadbox{
  padding: 18px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(120deg, rgba(249,115,22,.10), rgba(124,58,237,.12), rgba(6,182,212,.10));
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items:start;
}
.leadbox h2{ margin:0; font-size: 28px; }
.leadbox p{ margin: 8px 0 0; color: var(--muted); }
.leadbox__mini{ margin-top: 12px; display:grid; gap: 6px; color: rgba(238,242,255,.86); font-weight: 900; }

.footer{
  margin-top: 18px;
  padding: 14px 0 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; gap: 10px; flex-wrap:wrap;
  color: rgba(238,242,255,.78);
  font-weight: 900;
}
.footer__links{ display:flex; gap: 12px; flex-wrap:wrap; }
.footer__links a{ text-decoration: underline; text-underline-offset: 3px; }

/* Modal */
.modal{
  position: fixed; inset:0;
  background: rgba(0,0,0,.70);
  display:none;
  align-items:center; justify-content:center;
  z-index: 120;
  padding: 18px;
}
.modal.open{ display:flex; }
.modal__img{
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}
.modal__close{
  position:absolute; top: 14px; right: 14px;
  width:44px; height:44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.12);
  color:#fff;
  font-size: 18px;
  cursor:pointer;
}

/* To top */
.toTop{
  position: fixed;
  left: 14px;
  bottom: 14px;
  width:54px; height:54px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  box-shadow: 0 14px 44px rgba(0,0,0,.30);
  color: rgba(238,242,255,.92);
  font-weight: 1000;
  cursor:pointer;
  display:none;
  z-index: 80;
}
.toTop.show{ display:block; }

/* Responsive */
@media (max-width: 1200px){
  .nav{ display:none; }
  .burger{ display:inline-block; }
  .topbar__actions .pill{ display:none; }

  .hero__grid{ grid-template-columns: 1fr; }
  .hero__cards{ grid-template-columns: 1fr; }
  .row{ grid-template-columns: 1fr; }

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

  .reviews{ grid-template-columns: 1fr; }
  .find{ grid-template-columns: 1fr; }
  .photos{ grid-template-columns: repeat(2, 1fr); }
  .addr{ grid-template-columns: 1fr; }
  .map iframe{ height: 360px; }

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

  .bbar{ display:flex; }
  .float{ display:none; }
}


/* Links inside top badge */
.pillline a{
  color: rgba(238,242,255,.92);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pillline a:hover{ opacity: .9; }

/* Consent under forms */
.consent{
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(238,242,255,.72);
}
.consent a{
  color: rgba(238,242,255,.92);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Note in contacts */
.note--workshop{
  margin-top: 14px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.note--workshop p{ margin: 6px 0 0; color: rgba(238,242,255,.80); }
.note--workshop .muted{ color: rgba(238,242,255,.62); }

/* Cookie banner (bottom, always clickable) */
.cookie-banner{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  top: auto;
  z-index: 2147483647;
  pointer-events: auto;

  display: none;
  gap: 12px;
  align-items: center;
  justify-content: space-between;

  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15, 20, 45, .92);
  backdrop-filter: blur(10px);
}
.cookie-banner.is-visible{ display: flex; }
.cookie-banner__text{
  color: rgba(238,242,255,.86);
  font-size: 13px;
  line-height: 1.35;
}
.cookie-banner__text a{
  color: rgba(238,242,255,.95);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookie-banner__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.btn--ghost{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(238,242,255,.92);
}
.btn--ghost:hover{ background: rgba(255,255,255,.12); }

/* Make sure cookie buttons always receive clicks */
.cookie-banner button{ pointer-events: auto; }
@media (max-width: 520px){
  .cookie-banner{ flex-direction: column; align-items: stretch; }
  .cookie-banner__actions{ justify-content: stretch; }
  .cookie-banner__actions .btn{ width: 100%; text-align:center; }
}



/* Workshop badge in address cards */
.badge--workshop{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  margin:8px 0 0;
  font-weight:700;
  font-size:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

/* Nav popover */
.navpop{
  position:absolute;
  width: min(320px, calc(100vw - 32px));
  z-index: 9999;
}
.navpop__content{
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(15, 20, 45, .92);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 70px rgba(0,0,0,.45);
}
.navpop__title{ font-weight:900; margin-bottom:6px; }
.navpop__text{ color: rgba(255,255,255,.78); font-size: 14px; line-height:1.35; }
.navpop__actions{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }

/* MAX modal box */
.modal__box{
  width: min(560px, 92vw);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(15, 20, 45, .95);
  backdrop-filter: blur(12px);
  padding: 18px;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}
.modal__close{
  position:absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
}

/* Cookie banner clickability safety */
.cookie-banner, .cookie-banner *{ pointer-events: auto; }



/* --- Fix: cookie banner always clickable and not blocking content --- */
.cookie-banner {
  pointer-events: all !important;
  z-index: 2147483647 !important;
}
.cookie-banner * {
  pointer-events: auto !important;
}


/* Map card */
.mapcard{
  display:block;
  text-decoration:none;
  color:inherit;
}
.mapcard__frame{
  border:1px solid var(--stroke);
  border-radius: var(--r);
  overflow:hidden;
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
}
.mapcard__hint{
  margin-top:10px;
  color: var(--muted);
  font-weight:600;
}
.mapcard:hover .mapcard__hint{ color: var(--text); }

/* UI modal */
.uimodal{ position:fixed; inset:0; z-index:60; display:none; 
  z-index: 999;
}
.uimodal.open{ display:block; }
.uimodal__backdrop{ position:absolute; inset:0; background: rgba(2,6,23,.62); backdrop-filter: blur(8px); }
.uimodal__panel{
  position:relative;
  width:min(720px, calc(100% - 24px));
  margin: 72px auto;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border:1px solid var(--stroke);
  border-radius: calc(var(--r) + 6px);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  max-height: calc(100vh - 120px);
}

.uimodal__close{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px;
  border-radius: 12px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
}
.uimodal__content{ padding: 22px 18px 18px; max-height: calc(100vh - 180px); overflow: auto; }

.uimodal h3{ margin:0 0 10px; }
.uimodal .muted{ color: var(--muted); }
.uimodal .grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.uimodal .field{ display:flex; flex-direction:column; gap:6px; }
.uimodal input, .uimodal select, .uimodal textarea{
  background: rgba(255,255,255,.06);
  border:1px solid var(--stroke);
  color: var(--text);
  border-radius: 14px;
  padding: 12px 12px;
  outline:none;
}
.uimodal textarea{ min-height:96px; resize:vertical; }
.uimodal .actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; position: sticky; bottom: 0; padding: 12px 0 4px; background: linear-gradient(180deg, rgba(11,16,34,0), rgba(11,16,34,.65) 35%, rgba(11,16,34,.85)); backdrop-filter: blur(10px); }

.uimodal .actions .btn{ flex:1 1 180px; }

/* Responsive */
@media (max-width: 900px){
  .topbar__row{ gap:10px; }
  .nav{ display:none; }
  .burger{ display:inline-flex; }
  .topbar__actions{ gap:8px; flex-wrap:wrap; justify-content:flex-end; }
  .pill{ padding:10px 12px; font-size:14px; }
}
@media (max-width: 640px){
  .container{ width: min(1100px, calc(100% - 20px)); }
  .hero{ grid-template-columns: 1fr; gap:16px; }
  .hero__right{ order:2; }
  .hero__left{ order:1; }
  .chips{ gap:10px; }
  .grid, .grid3{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; }
  .uimodal__panel{ margin: 14px auto; }
  .uimodal .grid2{ grid-template-columns: 1fr; }
}


/* Reveal animation: hide only when JS loaded */
.js .reveal{ opacity:0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.js .reveal.in{ opacity:1; transform: none; }


/* Models modal */
.modelgrid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
@media (min-width: 720px){ .modelgrid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.modelitem{ padding:12px 12px; border-radius:16px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: rgba(238,242,255,.92); font-weight: 1000; cursor:pointer; text-align:left; }
.modelitem:hover{ background: rgba(255,255,255,.09); }
.uimodal .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }

/* === Hotfixes (2026-02) === */
/* 1) "Как работаем" — чтобы заголовки не "уплывали" */
.steps{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:18px; }
.step{ position:relative; padding:18px 16px 16px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); min-height: 210px; }
.step__n{ position:absolute; top:14px; left:14px; width:34px; height:34px; border-radius:999px; display:grid; place-items:center; font-weight:900; background: rgba(61,255,210,.14); border:1px solid rgba(61,255,210,.25); color: rgba(238,242,255,.95); }
.step b{ display:block; margin: 36px 0 10px; font-size: 18px; line-height: 1.15; }
.step p{ margin:0 0 14px; color: rgba(238,242,255,.78); }
.step .btn, .step .pillbtn{ margin-top:auto; }
@media (max-width: 900px){
  .steps{ grid-template-columns: 1fr; }
  .step{ min-height: auto; }
}

/* 2) Верхний блок на ПК — чуть уже и ровнее */
.topbar{ border-bottom:1px solid rgba(255,255,255,.08); }
.topbar__row{ align-items:center; }

/* 3) Популярные проблемы в первом экране */
.hero__problems{ margin-top: 14px; padding: 14px 14px 12px; border-radius: 18px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); }
.hero__problems h4{ margin:0 0 10px; font-size: 14px; letter-spacing:.2px; color: rgba(238,242,255,.92); }
.hero__problems .probgrid{ display:flex; flex-wrap:wrap; gap:10px; }
.hero__problems .prob{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius: 999px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: rgba(238,242,255,.9); font-weight: 800; text-decoration:none; }
.hero__problems .prob:hover{ background: rgba(255,255,255,.09); transform: translateY(-1px); }

/* 4) Блок "Мастера" */
.masters{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.master{ border-radius: 18px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); overflow:hidden; }
.master__img{ width:100%; aspect-ratio: 16 / 10; object-fit: cover; display:block; }
.master__body{ padding: 14px 14px 16px; }
.master__name{ margin:0; font-size: 16px; font-weight: 950; }
.master__role{ margin:6px 0 12px; color: rgba(238,242,255,.74); font-size: 13px; }
.master__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.master__actions a{ text-decoration:none; }
@media (max-width: 900px){ .masters{ grid-template-columns: 1fr; } }

/* 5) Клиенты */
.clientsgrid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.clientimg{ width:100%; border-radius: 18px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); cursor: zoom-in; }
@media (max-width: 900px){ .clientsgrid{ grid-template-columns: 1fr; } }


/* Models modal list area */
.modelswrap{ max-height: 260px; overflow:auto; padding-right: 2px; }
.modelswrap::-webkit-scrollbar{ width: 10px; }
.modelswrap::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.10); border-radius: 10px; }
.modelswrap::-webkit-scrollbar-track{ background: rgba(255,255,255,.03); }



/* v16 additions */
.nav{ align-items:center; flex-wrap:nowrap; }
.nav a{ display:flex; align-items:center; line-height:1; white-space:nowrap; }
.topbar__actions{ align-items:center; }

/* Badge link */
.badge-link{ color: rgba(238,242,255,.92); text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 3px; }
.badge-link:hover{ text-decoration-color: rgba(255,255,255,.55); }

/* Find us: map + photo */
.findgrid{ display:grid; grid-template-columns: 1.3fr .9fr; gap: 16px; align-items: stretch; }
@media (max-width: 920px){ .findgrid{ grid-template-columns: 1fr; } }
.photocard{
  display:block;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.photocard__img img{ width:100%; height:340px; object-fit:cover; display:block; }
@media (max-width: 920px){ .photocard__img img{ height:260px; } }
.photocard__caption{ padding: 14px 14px 16px; color: rgba(238,242,255,.82); }

/* Prices */
.head--split{ display:flex; align-items:flex-end; justify-content:space-between; gap: 18px; }
@media (max-width: 760px){ .head--split{ flex-direction:column; align-items:flex-start; } }
.head__note{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(238,242,255,.82);
}
.pricegrid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 980px){ .pricegrid{ grid-template-columns: 1fr; } }
.pricecard{
  border-radius: 20px;
  padding: 16px 16px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 50px rgba(0,0,0,.30);
}
.pricecard h3{ margin: 4px 0 12px; font-size: 18px; }
.pricelist{ display:flex; flex-direction:column; gap: 10px; }
.pricerow{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px dashed rgba(255,255,255,.12); }
.pricerow:last-child{ border-bottom: none; padding-bottom: 0; }
.pricerow span{ color: rgba(238,242,255,.78); }
.pricerow b{ font-weight: 900; }
.prices__footnote{ margin-top: 12px; color: rgba(238,242,255,.70); font-size: 13px; }

/* Warranty & conditions */
.wcard{
  border-radius: 22px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 60px rgba(0,0,0,.38);
  padding: 16px;
}
.wgrid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 980px){ .wgrid{ grid-template-columns: 1fr; } }
.witem{
  display:flex; gap: 12px;
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.witem__icon{ width: 34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius: 12px; background: rgba(255,255,255,.06); }
.witem h3{ margin: 0 0 6px; font-size: 16px; }
.witem p{ margin:0; color: rgba(238,242,255,.76); line-height: 1.55; }
.wcard__bottom{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
@media (max-width: 760px){ .wcard__bottom{ flex-direction:column; align-items:flex-start; } }
.wsmall{ color: rgba(238,242,255,.72); }
.wactions{ display:flex; gap: 10px; flex-wrap:wrap; }

/* Form buttons colors */
.btn--vk{
  background: linear-gradient(90deg, rgba(34,197,94,.95), rgba(16,185,129,.92));
  border: 1px solid rgba(34,197,94,.35);
  color: #07110a;
  font-weight: 900;
}
.btn--vk:hover{ filter: brightness(1.05); }

.btn--maxblue{
  background: linear-gradient(90deg, rgba(46,167,255,.95), rgba(124,58,237,.85));
  border: 1px solid rgba(46,167,255,.35);
  color: #071021;
  font-weight: 900;
}
.btn--maxblue:hover{ filter: brightness(1.05); }



/* Documents page */
.docgrid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 900px){ .docgrid{ grid-template-columns: 1fr; } }
.doccard{
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 50px rgba(0,0,0,.30);
  padding: 16px;
  display:flex; flex-direction:column; justify-content:space-between;
  min-height: 180px;
}
.doccard__top h3{ margin: 0 0 8px; }
.doccard__top p{ margin:0; color: rgba(238,242,255,.76); line-height:1.55; }
.doccard__actions{ margin-top: 14px; display:flex; gap: 10px; flex-wrap:wrap; }

.btn--soft:hover{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.30); }


/* ===== VK button ===== */
.btn--vk{
  background: linear-gradient(90deg, rgba(0,119,255,.95), rgba(88,164,255,.92));
  border: 1px solid rgba(88,164,255,.35);
  color: #06111f;
  font-weight: 900;
}
.btn--vk:hover{ filter: brightness(1.05); }
.pill--vk{
  background: rgba(0,119,255,.14);
  border-color: rgba(88,164,255,.35);
}
.pill--vk:hover{ background: rgba(0,119,255,.20); border-color: rgba(88,164,255,.50); }

/* ===== Active chips (selected state) ===== */
.chip{
  position: relative;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.chip:active{ transform: scale(.98); }
.chip.active{
  color: rgba(255,255,255,.98);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 0 0 1px rgba(88,164,255,.18), 0 10px 30px rgba(0,0,0,.35);
}
.chip.active::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  padding:1px;
  background: conic-gradient(from 90deg, rgba(0,119,255,.0), rgba(88,164,255,.85), rgba(124,58,237,.85), rgba(0,119,255,.0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: chipBorder 2.8s linear infinite;
  pointer-events:none;
  opacity:.9;
}
@keyframes chipBorder{ to{ transform: rotate(360deg); } }

.chip.active::after{
  content:"✓";
  position:absolute;
  left:12px;
  top:50%;
  transform: translateY(-50%);
  font-weight:900;
  opacity:.9;
}
.chip.active{ padding-left:28px; }

/* Mini chips (problem suggestions) */
.chips--mini{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.chip--mini{
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}
.chip--mini:hover{ background: rgba(255,255,255,.10); }

/* Lead steps hint */
.stepshint{
  margin-top:8px;
  font-size: 12px;
  color: rgba(255,255,255,.70);
}

/* Docs page helpers */
.badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.82);
  font-size: 13px;
}
.grid2{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px; }
@media (max-width: 860px){ .grid2{ grid-template-columns: 1fr; } }
.card--doc h3{ margin:0 0 6px; }
.doclist{ margin:10px 0 0; padding-left:18px; color: rgba(255,255,255,.82); }
.doclist li{ margin:6px 0; }

/* Make primary "Узнать цену" / price buttons readable */
.btn--small{ font-weight:800; }


/* ====== Premium header v3 ====== */
.site-header{ position: sticky; top: 0; z-index: 999; backdrop-filter: blur(14px); }
.mini-bar{ background: rgba(10,14,28,.55); border-bottom:1px solid rgba(255,255,255,.08); }
.mini-bar__row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0; }
.mini-left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mini-right{ display:flex; align-items:center; gap:8px; }
.mini-item{ color: rgba(255,255,255,.85); font-size:13px; text-decoration:none; }
.mini-item:hover{ color:#fff; }
.mini-dot{ color: rgba(255,255,255,.35); }

.mini-pill{ display:inline-flex; align-items:center; justify-content:center; height:30px; padding:0 12px;
  border-radius: 999px; border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.9); font-size:13px; text-decoration:none;
}
.mini-pill:hover{ background: rgba(255,255,255,.10); }
.mini-pill--tg{ border-color: rgba(120,190,255,.25); }
.mini-pill--max{ border-color: rgba(120,120,255,.25); }

.nav-bar{ background: rgba(10,14,28,.72); border-bottom:1px solid rgba(255,255,255,.10); position:relative; top:0; z-index:1000; }
.nav-bar__row{ display:flex; align-items:center; gap:16px; padding: 12px 0; }
.brand--new .brand__mark{ width:10px; height:10px; border-radius:50%; background: linear-gradient(135deg, #4a83ff, #9b5cff); box-shadow: 0 0 0 6px rgba(74,131,255,.10); }
.brand--new{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-weight:900; color:#fff; font-size:14px; letter-spacing:.2px; }
.brand__sub{ font-weight:800; color: rgba(255,255,255,.78); font-size:14px; margin-top:2px; }

.nav{ display:flex; gap:14px; margin-left: 12px; }
.nav a{ color: rgba(255,255,255,.82); text-decoration:none; font-weight:700; font-size:14px; padding:6px 8px; border-radius: 999px; }
.nav a:hover{ background: rgba(255,255,255,.06); color:#fff; }
.nav-cta{ margin-left:auto; display:flex; align-items:center; gap:10px; }

.burger{ display:none; margin-left:auto; width:42px; height:38px; border-radius:12px;
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); cursor:pointer;
  position:relative; z-index:1100; pointer-events:auto;
}
.burger span{ display:block; width:18px; height:2px; background: rgba(255,255,255,.85); margin:4px auto; border-radius:2px; }

.mobile-nav{ display:none; padding:10px 0 16px; border-top:1px solid rgba(255,255,255,.10); }
.mobile-nav a{ display:block; padding:10px 0; color: rgba(255,255,255,.88); text-decoration:none; font-weight:800; }
.mobile-nav__cta{ display:grid; gap:10px; margin-top:10px; }
.mobile-nav.is-open{ display:block; }


/* ===== Mobile menu overlay (fix for iOS/Android) ===== */
body.menu-open{
  overflow:hidden;
  height:100vh;
  touch-action:none;
}
@media (max-width: 1200px){
  /* make dropdown mobile nav a full-screen overlay */
  :root{ --header-h: 64px; }
  .mobile-nav{
    position: fixed;
    left: 0; right: 0;
    top: calc(var(--header-h) + env(safe-area-inset-top));
    bottom: 0;
    height: auto;
    z-index: 2000;
    display: none;
    padding: 16px 16px 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(6,10,20,.97);
    backdrop-filter: blur(14px);
    border-top: none;
  }
  .mobile-nav.is-open{ display:block; }

  /* keep burger above overlay */
  .burger{ z-index: 2100; }

  /* hide floating/bottom CTA when menu is open */
  body.menu-open .floating-actions,
  body.menu-open .bottom-buttons,
  body.menu-open .hero-actions,
  body.menu-open .quick-buttons,
  body.menu-open .nav-cta{
    display:none !important;
  }
}


/* No-JS fallback: show mobile menu only on small screens */
@media (max-width: 900px){
  .no-js .mobile-nav{ display:block; }
}
.no-js .burger{ display:none; }
@media (max-width: 1200px){
  .nav{ display:none; }
  .nav-cta{ display:none; }
  .burger{ display:block; }
  .mini-item{ font-size:12px; }
}


/* ====== Typography polish ====== */
.section h2{ font-size:34px; line-height:1.1; letter-spacing:-0.02em; }
.section h3{ font-size:18px; }
@media (max-width: 980px){
  .section h2{ font-size:26px; }
}
/* ====== Inner hero + content blocks ====== */
.page{ padding-top: 6px; }
.hero--inner{ padding: 46px 0 22px; }
.hero__row{ display:grid; grid-template-columns: 1.4fr .8fr; gap: 18px; align-items: start; }
.hero__left h1{ margin:0; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.6px; }
.lead{ margin-top:10px; color: rgba(255,255,255,.82); max-width: 820px; }
.hero__bullets{ margin:14px 0 0; padding-left: 18px; color: rgba(255,255,255,.82); }
.hero__bullets li{ margin: 6px 0; }
.hero__actions{ margin-top: 16px; display:flex; gap:10px; flex-wrap:wrap; }
.hero__right{ display:grid; gap:10px; }
.note{ padding:14px 14px; border-radius: 18px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.note b{ display:block; }
.note span, .note a{ color: rgba(255,255,255,.82); text-decoration:none; }
.note a:hover{ color:#fff; text-decoration: underline; }

@media (max-width: 980px){
  .hero__row{ grid-template-columns: 1fr; }
}

/* Work examples */
.workgrid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:16px; margin-top:14px; }
.workcard{ margin:0; border-radius: 20px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); }
.workcard img{ width:100%; height:auto; display:block; }
.workcard figcaption{ padding:12px 12px 14px; display:grid; gap:4px; }
.workcard figcaption b{ font-size:15px; }
.workcard figcaption span{ color: rgba(255,255,255,.75); font-size:13px; }

@media (max-width: 980px){
  .workgrid{ grid-template-columns: 1fr; }
}

/* Steps */
.steps{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:14px; margin-top:14px; }
.step{ padding:14px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); }
.step b{ display:block; }
.step span{ color: rgba(255,255,255,.78); font-size:13px; display:block; margin-top:6px; }
@media (max-width: 980px){
  .steps{ grid-template-columns: 1fr; }
}

/* Chips as links */
.chip{ text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }

/* CTA row */
.cta-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }


/* Header refresh */
.mini-bar{ display:none !important; }
.nav-cta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.btn--chip{
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  padding:10px 14px;
  border-radius:999px;
  font-weight:700;
}
.btn-vk{ background: rgba(86,124,255,.22); border-color: rgba(86,124,255,.42); }
.btn-tg{ background: rgba(50,170,255,.22); border-color: rgba(50,170,255,.42); }
.btn-max{ min-width:96px; }
.btn-max{ box-shadow: 0 10px 24px rgba(60,120,255,.12); }

/* Gallery */
.gallery{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
  margin-top:16px;
}
.gcard{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.gcard img{ width:100%; height:260px; object-fit:cover; display:block; }
.gcard figcaption{ padding:12px 14px; color: rgba(255,255,255,.78); font-size:14px; }
@media (max-width: 900px){
  .gallery{ grid-template-columns: 1fr; }
  .gcard img{ height:220px; }
}

/* FAQ */
.faq{ display:grid; gap:10px; margin-top:12px; }
.faq-item{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius:14px;
  padding:10px 12px;
}
.faq-item summary{ cursor:pointer; font-weight:800; }
.faq-item p{ margin:10px 0 0; color: rgba(255,255,255,.78); }

/* Steps */
.steps{ display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:12px; margin-top:14px; }
.step{ border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); border-radius:14px; padding:12px; display:flex; gap:10px; align-items:flex-start; }
.step b{ width:28px; height:28px; border-radius:10px; background: rgba(88,140,255,.18); display:flex; align-items:center; justify-content:center; }
.step span{ color: rgba(255,255,255,.82); font-size:14px; line-height:1.35; }
@media (max-width: 980px){
  .steps{ grid-template-columns: 1fr; }
}


/* --- Fix: "Как проходит ремонт" steps layout (prevents title clipping) --- */
.steps .step{ display:flex; gap:12px; align-items:flex-start; }
.steps .step > b{
  flex: 0 0 auto;
  width:28px;
  height:28px;
  border-radius:10px;
  background: rgba(88,140,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  line-height:1;
}
.steps .step > div{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.steps .step > div > strong{ display:block; font-weight:800; }
.steps .step > div > span{ color: rgba(255,255,255,.82); font-size:14px; line-height:1.35; }


/* === SEO pack: services & problem pages === */
.grid.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
}
@media (max-width: 900px){
  .grid.cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .grid.cards{ grid-template-columns: 1fr; }
}
.card.card--link{
  display:block;
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  text-decoration:none;
}
.card.card--link b{ display:block; margin-bottom:6px; }
.card.card--link p{ margin:0; opacity:.85; }
.card.card--link:hover{ transform: translateY(-1px); }

.bullets{
  margin:14px 0 0;
  padding-left:18px;
  line-height:1.55;
}
.note{
  margin-top:16px;
  padding:14px 16px;
  border-radius:14px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
}

.cta{
  margin-top:18px;
  padding:18px;
  border-radius:18px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
}
.cta__btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }

.faq-list{ margin-top:12px; display:grid; gap:10px; }
.faq-item{
  border-radius:14px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  padding:10px 12px;
}
.faq-item summary{ cursor:pointer; font-weight:600; }
.faq-item p{ margin:10px 0 0; opacity:.9; }

.reviews-mini{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 900px){
  .reviews-mini{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .reviews-mini{ grid-template-columns: 1fr; }
}
.review-card{
  padding:14px;
  border-radius:16px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
}
.review-card p{ margin:8px 0 0; opacity:.9; }

/* Fix: "Как работаем" cards should not overlap / float */
.steps{ align-items:stretch; }
.step{ display:flex; flex-direction:column; }
.step__btns{ margin-top:auto; display:flex; flex-wrap:wrap; gap:8px; }
.step .btn{ white-space:nowrap; }



/* --- Utilities & layout fixes (2026-02) --- */
.mt-lg{ margin-top: 24px; }
.mt-md{ margin-top: 16px; }
.mb-lg{ margin-bottom: 24px; }
.gap-lg{ gap: 18px; }
.muted{ color: var(--muted); }

/* Ensure sections/cards do not "collide" */
main.section .card, main.section .cta{ margin-top: 18px; }
main.section h2{ margin-top: 26px; }
.faq-list{ margin-top: 12px; }
.faq-item + .faq-item{ margin-top: 10px; }

/* Process steps alignment */
.step{ display:flex; flex-direction:column; }
.step__btns{ margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; }
.step > button.btn, .step > a.btn{ margin-top:auto; align-self:flex-start; }
.review__btns{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; }

/* Cards grid helper */
.cards--2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px){
  .cards--2{ grid-template-columns: 1fr; }
}



/* ===== Mobile header fixes (vremonte) ===== */
@media (max-width: 980px){
  .nav-cta{ display:none !important; }
  .nav{ display:none !important; }
  .burger{ display:block !important; position:relative; z-index:1005; pointer-events:auto; }
  .nav-bar{ position:sticky; top:0; z-index:1000; }
}


/* ====== Lightbox (works gallery) ====== */
.lightbox{ position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background: rgba(0,0,0,.72); z-index:2000; padding:18px; }
.lightbox.is-open{ display:flex; }
.lightbox__panel{ max-width:1100px; width:100%; max-height:92vh; border-radius:18px;
  overflow:hidden; border:1px solid rgba(255,255,255,.14); background: rgba(12,16,30,.92); box-shadow: 0 24px 80px rgba(0,0,0,.55); }
.lightbox__top{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.10); }
.lightbox__title{ font-weight:900; color: rgba(255,255,255,.9); font-size:14px; }
.lightbox__close{ width:38px; height:34px; border-radius:12px; border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.9); cursor:pointer; }
.lightbox__imgwrap{ display:flex; align-items:center; justify-content:center; padding:10px; }
.lightbox__img{ max-width:100%; max-height:78vh; border-radius:14px; }


/* Steps alignment fix */
.steps{ align-items: stretch; }
.step{ display:flex; flex-direction:column; }
.step__btns{ margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; }
.step > button.btn, .step > a.btn{ margin-top:auto; }

/* Workshop section */
.workshop{ display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; align-items:start; }
.workshop__grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
.workshop__item{ display:block; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.workshop__item img{ width:100%; height:160px; object-fit:cover; display:block; transform: scale(1.01); }
.workshop__item:hover img{ transform: scale(1.03); }
.workshop__text{ display:flex; flex-direction:column; gap:12px; }
.workshop__bullets{ display:grid; gap:12px; }
.wcard{ border-radius:18px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); padding:14px; }
.wcard b{ display:block; margin:0 0 8px; }
.wcard ul{ margin:0; padding-left:18px; color: rgba(255,255,255,.86); }
.wcard li{ margin:6px 0; }
.workshop__cta{ display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width: 980px){
  .workshop{ grid-template-columns: 1fr; }
  .workshop__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .workshop__item img{ height:150px; }
}
@media (max-width: 520px){
  .workshop__grid{ grid-template-columns: 1fr; }
  .workshop__item img{ height:190px; }
}

/* === 2026-02 UI fixes === */
/* 1) "Как работаем" — фиксируем позиционирование номера и отступы заголовка */
.steps{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:18px; align-items:stretch; }
.step{ position:relative; padding:18px 16px 16px; min-height:220px; }
.step__n{ position:absolute; top:14px; left:14px; width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:999px; font-weight:900; }
.step b{ display:block; margin:38px 0 8px; font-size:18px; line-height:1.15; }
.step p{ margin:0 0 12px; }
.step__btns{ margin-top:auto; }
@media (max-width: 980px){
  .steps{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .steps{ grid-template-columns: 1fr; }
}

/* 2) Чуть ужимаем верхний блок на ПК */
.topbar{ padding:12px 0; }
.topbar__inner{ gap:14px; }
.hero{ padding-top: 18px; }

/* 3) Популярные проблемы — видимый и кликабельный вид */
.heroProblems{ margin-top:14px; }
.heroProblems__title{ font-weight:900; margin:0 0 10px; font-size:14px; color: rgba(255,255,255,.82); display:flex; gap:8px; align-items:center; }
.heroProblems__grid{ display:flex; flex-wrap:wrap; gap:10px; }
.probPill{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.92);
  text-decoration:none; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.probPill:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }
.probPill:active{ transform: translateY(0); }

/* 4) Блоки "Наши мастера" и "Наши клиенты" */
.showcase{ margin-top: 26px; }
.showcase__grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; }
.person{ border-radius:18px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); overflow:hidden; }
.person__img{ width:100%; height:190px; object-fit:cover; display:block; }
.person__body{ padding:14px; display:flex; flex-direction:column; gap:10px; }
.person__name{ font-weight:900; font-size:18px; }
.person__meta{ color: rgba(255,255,255,.75); font-size:13px; }
.person__actions{ margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; }

.clientsGrid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; }
.clientCard{ border-radius:18px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); overflow:hidden; display:block; }
.clientCard img{ width:100%; height:auto; aspect-ratio: 4 / 3; object-fit:contain; display:block; }
@media (max-width: 1200px){
  .showcase__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .clientsGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .showcase__grid{ grid-template-columns: 1fr; }
  .clientsGrid{ grid-template-columns: 1fr; }
  .person__img{ height:210px; }
  .clientCard img{ height:220px; }
}


/* ===== Patch 2026-02-06: Header compact & aligned on desktop ===== */
.nav-bar__row{ flex-wrap:nowrap; }
.nav{ flex-wrap:nowrap; white-space:nowrap; gap:12px; }
.nav a{ padding:7px 9px; font-size:13px; }
.nav-cta{ flex-wrap:nowrap; gap:10px; }
.nav-cta .btn{ padding:9px 12px; }
@media (max-width: 1180px){
  .nav{ gap:10px; }
  .nav a{ padding:7px 8px; }
}
@media (max-width: 1200px){
  .nav{ display:none; }
  .burger{ display:block; }
  .nav-cta{ margin-left:auto; }
}
/* Reduce sticky header height slightly */
.site-header .nav-bar__row{ padding:10px 0; }

/* Popular problems list class fix */
.heroProblems__list{ display:flex; flex-wrap:wrap; gap:10px; }

/* Fix: separate styles for index 'Как работаем' cards vs service-page numbered steps */
.steps--process{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .steps--process{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .steps--process{ grid-template-columns: 1fr; } }

.steps--process .step{ display:block; }
.steps--process .step b{
  display:block;
  width:auto; height:auto;
  background: transparent;
  border-radius:0;
  padding:0;
  justify-content:flex-start;
  margin: 12px 0 8px;
  font-size:18px;
  line-height:1.15;
}
.steps--process .step p{ margin: 0 0 12px; }


/* Popular problems — make it look like a neat card */
.heroProblems{
  padding: 14px;
  border-radius: 20px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.probPill:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); }


/* Prevent long links from breaking layout */
.list a{ word-break: break-word; overflow-wrap: anywhere; }

/* Hotfix: Steps layout stability */
.steps-grid .step-card{height:auto;min-height:220px;display:flex;flex-direction:column;gap:12px;}
.steps-grid .step-card p{overflow-wrap:anywhere;word-break:break-word;}

/* ===== Patch 2026-02-06: Fix "Как работаем" layout + bottom form clickability ===== */
#process .steps--process{ align-items:stretch; }
#process .steps--process .step{
  display:flex;
  flex-direction:column;
  gap: 8px;
  min-height: 230px;
  padding: 18px 16px 16px;
}
#process .steps--process .step__n{
  width: 36px;
  height: 36px;
  top: 14px;
  left: 14px;
}
#process .steps--process .step b{
  margin: 44px 0 8px;
  font-size: 18px;
  line-height: 1.15;
}
#process .steps--process .step p{
  margin: 0 0 12px;
  line-height: 1.45;
}
#process .steps--process .step__btns{ display:flex; gap:10px; flex-wrap:wrap; }
#process .steps--process .step .btn{ align-self:flex-start; }

/* Bottom lead form: ensure nothing blocks clicks */
#lead{ position:relative; z-index: 1; }
#lead .leadbox__right,
#lead #leadForm2{
  position: relative;
  z-index: 5;
  pointer-events: auto;
}
#lead #leadForm2 *{ pointer-events: auto; }

/* "Наши клиенты" are static cards (not buttons) */
.clientCard{ cursor: default; }


/* ===== Patch 2026-02-07: Premium "Популярные проблемы" on homepage ===== */
.heroProblems--premium{
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.heroProblems__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:12px; }
.heroProblems__kicker{ font-weight:900; letter-spacing:.2px; }
.heroProblems__subtitle{ font-size:13px; color: rgba(255,255,255,.70); margin-top:4px; }

.heroProblems__cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.probCard{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px 14px 12px;
  border-radius:18px;
  text-decoration:none;
  color: rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  min-height: 86px;
}
.probCard__icon{ font-size:18px; opacity:.95; }
.probCard__title{ font-weight:900; line-height:1.15; }
.probCard__meta{ font-size:12px; color: rgba(255,255,255,.70); margin-top:auto; }
.probCard:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.probCard:active{ transform: translateY(-1px); }

@media (max-width: 980px){
  .heroProblems__cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .heroProblems__cards{ grid-template-columns: 1fr; }
}



/* === FIXES (2026-02-08) === */
/* Desktop header: keep items on one line, and switch to burger earlier to avoid wrapping */
.nav-bar__row{ flex-wrap: nowrap; }
.nav{ flex-wrap: nowrap; white-space: nowrap; }
.nav a{ white-space: nowrap; }
.nav-cta{ flex-wrap: nowrap; }

/* Allow long text to wrap nicely inside cards */
.step, .serviceCard, .probCard, .priceCard{ overflow-wrap: anywhere; word-break: break-word; }

/* Legacy classes in markup */
.person__ava{ width:100%; height:190px; object-fit:cover; display:block; }
.clients__grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; }
@media (max-width: 980px){
  .clients__grid{ grid-template-columns: 1fr; }
}


/* === Step 15: Problem pages "Как проходит ремонт" === */
.process-section h2{ margin:0 0 6px; }
.process-section .muted{ opacity:.85; }
.process-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.process-card{
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.process-card h3{ margin:2px 0 0; font-size:16px; }
.process-card p{ margin:0; opacity:.9; line-height:1.45; }
.process-media{
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.15);
  aspect-ratio: 16/10;
}
.process-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.process-section .note{ margin-top:10px; font-size:13px; opacity:.75; }

/* Make existing grid modifiers actually work (some pages already use grid--2) */
.grid.grid--2{ grid-template-columns: repeat(2, 1fr); }
.grid.grid--3{ grid-template-columns: repeat(3, 1fr); }
.grid.grid--4{ grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px){
  .process-grid{ grid-template-columns: repeat(2, 1fr); }
  .grid.grid--4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .process-grid{ grid-template-columns: 1fr; }
  .grid.grid--3, .grid.grid--2{ grid-template-columns: 1fr; }
}


/* === Conversion upgrade pack (Variant 1) === */
.urgency{
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,138,0,.10);
  border: 1px solid rgba(255,138,0,.22);
  color: rgba(238,242,255,.92);
}
.urgency b{ color: #fff; }

#quickprice .calcCard{
  margin-top: 14px;
  padding: 18px;
  border-radius: 22px;
  background: var(--panel);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
}
#quickprice .calcGrid{
  display:grid;
  grid-template-columns: 1.1fr 1.1fr .8fr;
  gap: 12px;
  align-items:end;
}
#quickprice .calcPrice{
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
}
#quickprice .calcPrice__val{ font-size: 24px; font-weight: 1000; letter-spacing: -.02em; }
#quickprice .calcPrice__desc{ margin-top: 6px; color: var(--muted); }
#quickprice .calcActions{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 14px; }
#quickprice .hint{ margin-top: 10px; text-align:left; }

#cases .casesGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.caseCard{
  border-radius: 22px;
  padding: 16px;
  background: var(--panel);
  border:1px solid var(--stroke);
  box-shadow: 0 14px 45px rgba(0,0,0,.28);
  display:flex;
  flex-direction:column;
  min-height: 220px;
}
.caseCard__title{ font-weight: 1000; font-size: 16px; }
.caseCard__meta{ margin-top: 6px; color: var(--muted); font-size: 13px; }
.caseCard__body{ margin-top: 12px; color: rgba(238,242,255,.90); line-height:1.45; flex:1; }
.caseCard__cta{ display:flex; gap:10px; margin-top: 14px; flex-wrap:wrap; }

/* Make native dropdown readable on Windows */
select{ color-scheme: dark; }
select option, select optgroup{
  background-color: #0b1022;
  color: #eef2ff;
}

/* Sticky contact bar (mobile) */
.stickyContact{
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 9999;
  display:none;
  gap: 10px;
  padding: 10px;
  border-radius: 22px;
  background: rgba(7,10,22,.78);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}
.stickyContact__btn{
  flex:1;
  text-align:center;
  padding: 12px 10px;
  border-radius: 18px;
  font-weight: 900;
  font-size: 13px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.stickyContact__btn--max{ background: rgba(46,167,255,.14); border-color: rgba(46,167,255,.25); }
.stickyContact__btn--tg{ background: rgba(46,167,255,.10); border-color: rgba(46,167,255,.20); }
.stickyContact__btn--wa{ background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.25); }
.stickyContact__btn--call{ background: rgba(255,138,0,.12); border-color: rgba(255,138,0,.25); }

@media (max-width: 920px){
  #quickprice .calcGrid{ grid-template-columns: 1fr; }
  #cases .casesGrid{ grid-template-columns: 1fr; }
}
@media (max-width: 980px){
  .stickyContact{ display:flex; }
  body{ padding-bottom: 86px; }
}

/* ===== Premium Quick Price + Cases (conversion upgrade) ===== */
#quickprice .calcCard--premium{
  padding: 22px;
}
#quickprice .calcGrid--premium{
  grid-template-columns: 1.25fr .75fr;
  gap: 16px;
  align-items: stretch;
}
#quickprice .calcFields{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-content: start;
}
#quickprice .calcFields .field{ margin: 0; }
#quickprice .calcMiniNote{
  grid-column: 1 / -1;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(238,242,255,.86);
}
#quickprice .calcMiniNote .dot{
  width: 8px; height: 8px;
  border-radius: 99px;
  background: rgba(46,167,255,.95);
  box-shadow: 0 0 0 6px rgba(46,167,255,.14);
}
#quickprice .calcPrice--premium{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 18px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
}
#quickprice .calcPrice__kicker{
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(238,242,255,.72);
  font-size: 12px;
  text-transform: uppercase;
}
#quickprice .calcBadges{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 12px;
}
#quickprice .miniBadge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}
#quickprice .calcActions--premium{
  margin-top: 16px;
}

#cases .casesGrid--premium{
  gap: 16px;
}
#cases .caseCard--premium{
  padding: 0;
  overflow:hidden;
}
#cases .caseCard__media{
  position:relative;
  display:block;
  height: 170px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
#cases .caseCard__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.02);
}
#cases .casePill{
  position:absolute;
  left: 12px;
  top: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  background: rgba(7,10,22,.72);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}
#cases .caseCard__content{
  padding: 16px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  min-height: 210px;
}
#cases .caseCard__meta{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 0;
}
#cases .casesFoot{
  margin-top: 10px;
}

/* Better desktop layout */
@media (max-width: 920px){
  #quickprice .calcGrid--premium{ grid-template-columns: 1fr; }
  #quickprice .calcFields{ grid-template-columns: 1fr; }
  #cases .caseCard__media{ height: 160px; }
}


/* Toast (lead saved / step hint) */
.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(15, 20, 35, .92);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .2px;
  max-width: min(520px, calc(100vw - 28px));
  box-shadow: 0 14px 30px rgba(0,0,0,.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 99999;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* Trust bar under hero */
.trustbar{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.trustbar__item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
}
.trustbar__item:hover{
  background: rgba(255,255,255,.10);
}


/* ====== PATCH 2026-02-18: UI fixes (trustbar, hero KPI, popular problems, workshop) ====== */

/* Trustbar (Отзывы / Курьер / Гарантия) — аккуратно и без вылезания текста */
.trustbar{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.trustbar__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  min-height:48px;
  overflow:hidden;
  text-decoration:none;
}
.trustbar__item .tb__title{
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:75%;
}
.trustbar__item .tb__action{
  font-size:12px;
  opacity:.8;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  white-space:nowrap;
}
@media (max-width: 980px){
  .trustbar{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .trustbar__item .tb__title{ max-width:70%; }
}
@media (max-width: 520px){
  .trustbar{ grid-template-columns: 1fr; }
}

/* Hero KPI blocks — плотнее, “дороже” */
.hero__cards{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}
.hero__cards .kpi{
  padding:14px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
}
.hero__cards .kpi b{
  display:block;
  font-size:14px;
  line-height:1.2;
  margin-bottom:6px;
}
.hero__cards .kpi span{
  display:block;
  font-size:12.5px;
  opacity:.85;
  line-height:1.25;
}
@media (max-width: 1100px){
  .hero__cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .hero__cards{ grid-template-columns: 1fr; }
}

/* Популярные проблемы — сетка/отступы/ховер */
.heroProblems{
  margin-top:18px;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.heroProblems__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.heroProblems__kicker{
  font-weight:800;
  letter-spacing:.2px;
  font-size:16px;
}
.heroProblems__subtitle{
  margin-top:4px;
  opacity:.8;
  font-size:13px;
  line-height:1.25;
}
.heroProblems__cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
.probCard{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  text-decoration:none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  min-height:78px;
}
.probCard:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
}
.probCard__title{
  font-weight:800;
  line-height:1.15;
}
.probCard__meta{
  opacity:.75;
  font-size:12.5px;
}
@media (max-width: 980px){
  .heroProblems__cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .heroProblems__cards{ grid-template-columns: 1fr; }
  .heroProblems__head{ align-items:flex-start; }
}

/* Workshop images: мягкая заглушка, если изображение не найдено */
.workshop__item img{
  background: rgba(255,255,255,.03);
  border-radius: 16px;
}
.workshop__item img:not([src]), 
.workshop__item img[src=""]{
  min-height:140px;
}



/* --- In-section mini navigation (problem pages) --- */
.subnav{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0;padding:10px 12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);border-radius:14px}
.subnav__link{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;text-decoration:none;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.02);color:inherit;font-size:14px}
.subnav__link:hover{background:rgba(255,255,255,.06)}

/* --- Related problems --- */
.related{margin-top:22px}
.relgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
@media(max-width:900px){.relgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.relgrid{grid-template-columns:1fr}}
.relcard{display:block;padding:14px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);text-decoration:none;color:inherit}
.relcard:hover{background:rgba(255,255,255,.06)}
.relcard__title{font-weight:700;line-height:1.25}
.relcard__meta{margin-top:6px;opacity:.75;font-size:13px}

/* Price hint (calculator-orientir) */
.pricehint{
  margin-top:18px;
  padding:16px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(255,255,255,.04);
}
.pricehint h2{ margin:0 0 8px; font-size:20px; }
.pricehint .muted{ margin:0 0 12px; opacity:.85; }
.phgrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}
.phcard{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.12);
}
.phcard__title{ font-weight:700; line-height:1.25; }
.phcard__meta{ margin-top:6px; opacity:.85; font-size:14px; }

@media (max-width:720px){
  .phgrid{ grid-template-columns:1fr; }
}

/* === Call-to-action: green "Позвонить" button (added) === */
.btn-call{
  position: relative;
  background: linear-gradient(135deg, rgba(34,197,94,.95), rgba(22,163,74,.95));
  border-color: rgba(34,197,94,.55);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(34,197,94,.18);
  animation: callPulse 2.2s ease-in-out infinite;
  will-change: transform, box-shadow;
}

.btn-call:hover{
  transform: translateY(-1px) scale(1.03);
  border-color: rgba(34,197,94,.85);
  box-shadow: 0 14px 34px rgba(34,197,94,.28);
}

.btn-call:active{
  transform: translateY(0) scale(1.01);
}

.btn-call::after{
  content:"";
  display:none;
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 10px;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(34,197,94,.16);
  border: 1px solid rgba(34,197,94,.35);
  color: rgba(236,253,245,.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  letter-spacing: .02em;
  pointer-events: none;
}


@keyframes callPulse{
  0%{
    box-shadow: 0 10px 24px rgba(34,197,94,.18), 0 0 0 0 rgba(34,197,94,.35);
  }
  70%{
    box-shadow: 0 10px 24px rgba(34,197,94,.22), 0 0 0 14px rgba(34,197,94,0);
  }
  100%{
    box-shadow: 0 10px 24px rgba(34,197,94,.18), 0 0 0 0 rgba(34,197,94,0);
  }
}

@media (max-width: 560px){
  .btn-call::after{ display:none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn-call{ animation: none; }
}


/* ===== Messenger buttons upgrade ===== */
.call-big{
background:linear-gradient(135deg,#22c55e,#16a34a);
color:#fff;
font-weight:700;
font-size:18px;
text-align:center;
margin-bottom:12px;
animation:pulseCall 2s infinite;
box-shadow:0 10px 25px rgba(34,197,94,.35);
}
.call-big:hover{transform:scale(1.03);}

.btn--tg{
background:linear-gradient(135deg,#2AABEE,#229ED9)!important;
color:#fff;
}

.btn--vk{
background:linear-gradient(135deg,#4C75A3,#3B5F8A)!important;
color:#fff;
}

.btn--max{
background:linear-gradient(135deg,#7C3AED,#6D28D9)!important;
color:#fff;
}

@keyframes pulseCall{
0%{box-shadow:0 0 0 0 rgba(34,197,94,.6);}
70%{box-shadow:0 0 0 14px rgba(34,197,94,0);}
100%{box-shadow:0 0 0 0 rgba(34,197,94,0);}
}


/* Premium: call button with number (no overflow) */
.btn-call{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
}

.btn-call .call-btn__icon{
  font-size:16px;
  line-height:1;
  opacity:.95;
}

.btn-call .call-btn__text{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}

.btn-call .call-btn__title{
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
  opacity:.92;
}

.btn-call .call-btn__num{
  font-size:14px;
  font-weight:900;
  white-space:nowrap;
}

/* keep header from overflowing */
.nav-cta{ flex-wrap:wrap; justify-content:flex-end; }
@media (max-width: 1180px){
  .btn-call .call-btn__num{ display:none; }
}

/* hard guard against horizontal scroll */
html, body{ overflow-x:hidden; }