/* ==================================================================
   ВЫКУП БЫТОВОК — тёмный современный стиль
   Сделано по нашему шаблону «библиотека блоков»: у каждой части сайта
   есть варианты оформления, они переключаются классом v-* на секции,
   а данные при этом не трогаются.
   Гамма синяя, как просил владелец: холодная сталь и электрический синий.
   ================================================================== */
:root{
  --fon:#070B12;            /* почти чёрный с синевой */
  --fon2:#0C1320;           /* поверхность блока */
  --fon3:#111A2B;           /* поверхность карточки */
  --tekst:#F2F6FC;
  --tekst2:#93A4BD;
  --akcent:#3B82F6;         /* электрический синий — главный акцент */
  --akcent2:#22D3EE;        /* бирюзовый — второй акцент, для градиентов */
  --akcent-tekst:#04101F;
  --steklo:rgba(255,255,255,.055);
  --kant:rgba(255,255,255,.11);
  --kant2:rgba(59,130,246,.35);
  --uspeh:#34D399;
  --r:16px; --r2:26px; --r3:999px;
  --shrift:"Golos Text","Segoe UI",system-ui,sans-serif;
  --zagolovok:"Onest","Segoe UI",system-ui,sans-serif;
  --polya:clamp(16px,4vw,56px);
  --plavno:cubic-bezier(.22,1,.36,1);
  --shirina:1280px;
}
/* Светлая тема — для тех, кому темнота неудобна. Переключатель в шапке. */
:root[data-theme="light"]{
  --fon:#F4F7FC; --fon2:#FFFFFF; --fon3:#FFFFFF;
  --tekst:#0B1524; --tekst2:#55647C;
  --akcent:#1D5FD8; --akcent2:#0891B2; --akcent-tekst:#FFFFFF;
  --steklo:rgba(11,21,36,.04); --kant:rgba(11,21,36,.12); --kant2:rgba(29,95,216,.3);
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--fon); color:var(--tekst); font-family:var(--shrift);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
::selection{background:var(--akcent); color:#fff}

h1,h2,h3,h4{font-family:var(--zagolovok); line-height:1.06; letter-spacing:-.03em; text-wrap:balance}
h1{font-size:clamp(38px,7.4vw,104px); font-weight:800}
h2{font-size:clamp(27px,3.4vw,46px); font-weight:800}
h3{font-size:clamp(19px,2vw,26px); font-weight:700; letter-spacing:-.02em}
p{margin:0}

.obertka{max-width:var(--shirina); margin:0 auto; padding:0 var(--polya)}
.razdel{padding:clamp(64px,9vw,140px) 0; position:relative}
.nadpis{
  display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--akcent); margin-bottom:18px;
}
.nadpis::before{content:""; width:26px; height:1px; background:var(--akcent)}
.lid{color:var(--tekst2); font-size:clamp(16px,1.5vw,19px); max-width:66ch}

/* ---------- кнопки ---------- */
.knopka{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:17px 32px; border-radius:var(--r3); font-weight:600; font-size:16.5px;
  transition:transform .15s var(--plavno), box-shadow .15s var(--plavno), background .15s ease;
  white-space:nowrap;
}
.knopka--akcent{background:var(--akcent); color:#fff; box-shadow:0 10px 30px rgba(59,130,246,.32)}
.knopka--akcent:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(59,130,246,.44)}
.knopka--steklo{background:var(--steklo); border:1px solid var(--kant); color:var(--tekst); backdrop-filter:blur(10px)}
.knopka--steklo:hover{border-color:var(--kant2); transform:translateY(-3px)}

/* ---------- ШАПКА: варианты v-steklo / v-polosa / v-centr ---------- */
.shapka{position:fixed; top:0; left:0; right:0; z-index:70; padding:14px var(--polya); transition:padding .3s var(--plavno)}
.shapka__telo{
  max-width:var(--shirina); margin:0 auto; display:flex; align-items:center; gap:26px;
  padding:12px 14px 12px 22px; border-radius:var(--r3);
  background:color-mix(in srgb, var(--fon2) 58%, transparent); border:1px solid var(--kant);
  backdrop-filter:blur(20px) saturate(1.4); transition:all .3s var(--plavno);
}
.shapka.uzhe .shapka__telo{background:color-mix(in srgb, var(--fon2) 74%, transparent); box-shadow:0 10px 34px rgba(0,0,0,.38)}
.shapka.v-polosa{padding:0}
.shapka.v-polosa .shapka__telo{border-radius:0; border-width:0 0 1px; max-width:none; padding:16px var(--polya); backdrop-filter:blur(14px)}
.shapka.v-polosa .shapka__telo > .logo{margin-right:auto}
.shapka.v-centr .shapka__telo{flex-direction:column; gap:10px; border-radius:var(--r2); padding:16px}
.shapka.v-centr .menyu{margin:0}
.shapka.v-centr .shapka__prava{margin:0}

.logo{display:flex; align-items:center; gap:11px; font-family:var(--zagolovok); font-weight:800; font-size:19px; letter-spacing:-.02em}
.logo__znak{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:none;
  background:linear-gradient(140deg,var(--akcent),var(--akcent2)); color:#fff;
  box-shadow:0 6px 18px rgba(59,130,246,.4);
}
.logo small{display:block; font:500 11px/1.2 var(--shrift); color:var(--tekst2); letter-spacing:0}
.menyu{display:flex; gap:26px; margin-left:auto; align-items:center}
.menyu a{font-size:15.5px; color:var(--tekst2); transition:color .2s ease; position:relative; padding:4px 0}
.menyu a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:var(--akcent); transition:right .3s var(--plavno)}
.menyu a:hover,.menyu a[aria-current="page"]{color:var(--tekst)}
.menyu a:hover::after,.menyu a[aria-current="page"]::after{right:0}
.shapka__prava{display:flex; align-items:center; gap:12px}
.shapka__tel{font-family:var(--zagolovok); font-weight:700; font-size:17px; white-space:nowrap}
.tema-perekl{width:44px; height:44px; border-radius:50%; border:1px solid var(--kant); display:grid; place-items:center; color:var(--tekst2)}
.tema-perekl:hover{border-color:var(--kant2); color:var(--tekst)}
.burger{display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--kant); place-items:center}
.burger span{display:block; width:20px; height:2.6px; background:var(--tekst); margin:3px 0; border-radius:2px; transition:.3s var(--plavno)}

/* ---------- ПЕРВЫЙ ЭКРАН: v-kino / v-split / v-video ---------- */
.hero{position:relative; min-height:100svh; min-height:100vh; display:flex; align-items:flex-end; overflow:hidden;
  padding-top:clamp(110px,15vw,170px); padding-bottom:clamp(40px,6vw,90px)}
.hero__fon{position:absolute; inset:0; z-index:0}
.hero__fon img,.hero__fon video{position:absolute; inset:0}
.hero__fon img,.hero__fon video{width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s ease}
.hero__fon img.vidno,.hero__fon video.vidno{opacity:1}
.hero__zatemnenie{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(7,11,18,.55) 0%, rgba(7,11,18,.28) 24%, rgba(7,11,18,.34) 46%, rgba(7,11,18,.86) 84%, rgba(7,11,18,.96) 100%),
    linear-gradient(90deg, rgba(7,11,18,.45) 0%, rgba(7,11,18,.12) 52%, transparent 78%);
}
:root[data-theme="light"] .hero__zatemnenie{background:linear-gradient(180deg, rgba(6,14,28,.62) 0%, rgba(6,14,28,.5) 45%, rgba(6,14,28,.86) 100%)}
.hero .obertka{position:relative; z-index:2; width:100%}
.hero h1{color:#fff; max-width:16ch}
.hero__lid{color:rgba(255,255,255,.82); font-size:clamp(16px,1.7vw,20px); max-width:56ch; margin:22px 0 30px}
.hero__knopki{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:34px}
.hero__cifry{display:flex; flex-wrap:wrap; gap:34px; padding-top:26px; border-top:1px solid rgba(255,255,255,.16)}
.hero__cifra b{display:block; font-family:var(--zagolovok); font-size:clamp(24px,3vw,38px); font-weight:800; color:#fff; letter-spacing:-.03em}
.hero__cifra span{font-size:13.5px; color:rgba(255,255,255,.66)}
/* точки слайдера */
.hero__tochki{
  position:absolute; left:50%; transform:translateX(-50%); bottom:18px; z-index:5;
  display:flex; gap:10px; padding:9px 14px; border-radius:999px;
  background:rgba(7,11,18,.42); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(8px);
}
.hero__tochki button{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.38); transition:.3s var(--plavno)}
.hero__tochki button:hover{background:rgba(255,255,255,.7)}
.hero__tochki button[aria-current="true"]{background:var(--akcent); width:28px; border-radius:5px}
/* вариант «текст и медиа» */
.hero.v-split{align-items:center; min-height:auto; padding:clamp(120px,14vw,190px) 0 clamp(60px,8vw,110px)}
.hero.v-split .hero__fon{position:relative; height:clamp(280px,44vw,520px); border-radius:var(--r2); overflow:hidden}
.hero.v-split .hero__zatemnenie{border-radius:var(--r2); background:linear-gradient(180deg,transparent 40%,rgba(7,11,18,.6))}
.hero.v-split .obertka{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(28px,4vw,60px); align-items:center}
.hero.v-split h1{font-size:clamp(34px,4.6vw,64px); color:var(--tekst)}
.hero.v-split .hero__lid{color:var(--tekst2)}
.hero.v-split .hero__cifra b{color:var(--tekst)}
.hero.v-split .hero__cifra span{color:var(--tekst2)}
.hero.v-split .hero__cifry{border-top-color:var(--kant)}
.hero.v-split .hero__tochki{display:none}

/* ---------- ОЦЕНКА ---------- */
.ocenka{
  background:var(--fon3); border:1px solid var(--kant); border-radius:var(--r2);
  padding:clamp(22px,2.6vw,34px); box-shadow:0 30px 70px rgba(0,0,0,.35);
}
.ocenka__vopros{margin-top:20px}
.ocenka__vopros > span{display:block; font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--tekst2); margin-bottom:10px}
.vybor{display:flex; flex-wrap:wrap; gap:8px}
.vybor button{
  padding:11px 16px; border-radius:var(--r3); border:1px solid var(--kant); background:var(--steklo);
  font-size:15px; transition:.22s var(--plavno);
}
.vybor button:hover{border-color:var(--kant2); transform:translateY(-2px)}
.vybor button[aria-pressed="true"]{background:var(--akcent); border-color:var(--akcent); color:#fff; font-weight:600}
.ocenka__itog{margin-top:24px; padding:20px 22px; border-radius:var(--r); background:linear-gradient(135deg, rgba(59,130,246,.16), rgba(34,211,238,.08)); border:1px solid var(--kant2)}
.ocenka__cena{font-family:var(--zagolovok); font-weight:800; font-size:clamp(28px,3.6vw,40px); letter-spacing:-.03em}
.ocenka__cena em{font-style:normal; color:var(--akcent2)}
.ocenka__pod{font-size:13.5px; color:var(--tekst2); margin-top:8px}

/* ---------- ГАЛЕРЕЯ: v-setka / v-bento / v-karusel / v-lenta ---------- */
.galereya{display:grid; gap:16px}
.galereya.v-setka{grid-template-columns:repeat(3,1fr)}
.galereya.v-bento{grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(0,200px)}
.galereya.v-bento .karta:nth-child(1){grid-column:span 2; grid-row:span 2}
.galereya.v-bento .karta:nth-child(4){grid-column:span 2}
.galereya.v-bento .karta:nth-child(6){grid-column:span 2}
.galereya.v-karusel{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:16px; padding-bottom:14px; scrollbar-width:thin}
.galereya.v-karusel .karta{flex:0 0 clamp(240px,32vw,380px); scroll-snap-align:start}
.galereya.v-lenta{display:flex; gap:16px; overflow:hidden}
.galereya.v-lenta .karta{flex:0 0 clamp(220px,26vw,320px)}
.karta{
  position:relative; border-radius:var(--r2); overflow:hidden; background:var(--fon3);
  border:1px solid var(--kant); min-height:280px; transition:transform .22s var(--plavno), border-color .2s ease;
}
.karta:hover{transform:translateY(-6px); border-color:var(--kant2)}
.karta img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
.karta__tekst{position:relative; z-index:2; margin-top:auto; padding:20px 22px; background:linear-gradient(transparent, rgba(7,11,18,.9) 46%)}
.karta{display:flex; flex-direction:column}
.karta__tekst b{display:block; font-family:var(--zagolovok); font-size:18px; color:#fff}
.karta__tekst span{font-size:13.5px; color:rgba(255,255,255,.72)}
.karusel-strelki{display:flex; gap:10px; margin-top:18px}
.karusel-strelki button{width:46px; height:46px; border-radius:50%; border:1px solid var(--kant); display:grid; place-items:center; transition:.25s var(--plavno)}
.karusel-strelki button:hover{border-color:var(--akcent); background:var(--steklo); transform:translateY(-2px)}

/* ---------- УСЛУГИ бенто ---------- */
.uslugi{display:grid; grid-template-columns:repeat(6,1fr); gap:16px}
.usluga{
  grid-column:span 2; background:var(--fon2); border:1px solid var(--kant); border-radius:var(--r2);
  padding:28px; position:relative; overflow:hidden; transition:.2s var(--plavno);
}
.usluga::after{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .35s ease; pointer-events:none;
  background:radial-gradient(70% 90% at 15% 0%, rgba(59,130,246,.18), transparent 70%);
}
.usluga:hover{transform:translateY(-5px); border-color:var(--kant2)}
.usluga:hover::after{opacity:1}
.usluga--bolshaya{grid-column:span 3}
.usluga--glavnaya{grid-column:span 6; background:linear-gradient(135deg, rgba(59,130,246,.22), rgba(34,211,238,.1)), var(--fon2)}
.usluga__znak{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--steklo); border:1px solid var(--kant); color:var(--akcent); margin-bottom:18px}
.usluga p{color:var(--tekst2); font-size:15.5px; margin-top:8px}
.usluga__cena{margin-top:16px; font-family:var(--zagolovok); font-weight:800; font-size:22px; color:var(--akcent2)}
.usluga__cena small{display:block; font:500 12.5px/1.4 var(--shrift); color:var(--tekst2); letter-spacing:0}

/* ---------- ШАГИ: v-tri / v-spisok ---------- */
.shagi.v-tri{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.shagi.v-spisok{display:grid; gap:0}
.shag{background:var(--fon2); border:1px solid var(--kant); border-radius:var(--r2); padding:28px; transition:.2s var(--plavno)}
.shag:hover{border-color:var(--kant2); transform:translateY(-5px)}
.shag__n{font-family:var(--zagolovok); font-size:13px; font-weight:800; letter-spacing:.1em; color:var(--akcent); margin-bottom:16px; display:block}
.shag p{color:var(--tekst2); font-size:15.5px; margin-top:8px}
.shagi.v-spisok .shag{border-radius:0; border-width:0 0 1px; background:none; padding:26px 0; display:grid; grid-template-columns:80px minmax(0,1fr) minmax(0,1.1fr); gap:24px; align-items:baseline}
.shagi.v-spisok .shag:hover{transform:none; background:linear-gradient(90deg, var(--steklo), transparent)}
.shagi.v-spisok .shag__n{margin:0}

/* ---------- ТАБЛИЦА позиций ---------- */
.tablica{width:100%; border-collapse:collapse; font-size:15.5px}
.tablica th{
  text-align:left; padding:16px 18px; font-weight:600; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tekst2); border-bottom:1px solid var(--kant);
}
.tablica td{padding:17px 18px; border-bottom:1px solid var(--kant); vertical-align:top; color:var(--tekst2)}
.tablica td:first-child{color:var(--tekst); font-weight:600; width:32%}
.tablica tr:hover td{background:var(--steklo)}

/* ---------- ЦИФРЫ ---------- */
.cifry{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.cifra{padding:30px 26px; border-radius:var(--r2); border:1px solid var(--kant); background:var(--fon2)}
.cifra b{display:block; font-family:var(--zagolovok); font-weight:800; font-size:clamp(30px,3.6vw,46px); letter-spacing:-.03em;
  background:linear-gradient(120deg,var(--akcent),var(--akcent2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.cifra span{color:var(--tekst2); font-size:14.5px}

/* ---------- ОТЗЫВЫ ---------- */
.otzyvy{display:flex; overflow-x:auto; gap:18px; padding-bottom:10px;
  scrollbar-width:none; -ms-overflow-style:none; cursor:grab}
.otzyvy::-webkit-scrollbar{display:none; height:0}
.otzyvy.tyanut{cursor:grabbing; user-select:none}
.otzyvy > .otzyv{flex:0 0 clamp(280px, 30vw, 480px)}
.otzyvy.v-setka{display:grid; grid-template-columns:repeat(3,1fr); overflow:visible; cursor:default}
.otzyvy.v-setka > .otzyv{flex:none}
.otzyv{padding:28px; border-radius:var(--r2); border:1px solid var(--kant); background:var(--fon2)}
.otzyv__zv{color:var(--akcent2); letter-spacing:3px; margin-bottom:14px}
.otzyv p{color:var(--tekst2); font-size:15.5px}
.otzyv__kto{margin-top:18px; padding-top:16px; border-top:1px solid var(--kant)}
.otzyv__kto b{font-size:15px} .otzyv__kto span{display:block; color:var(--tekst2); font-size:13px}

/* ---------- ВОПРОСЫ ---------- */
.vopros{border-bottom:1px solid var(--kant)}
.vopros summary{list-style:none; cursor:pointer; padding:24px 50px 24px 0; position:relative; font-family:var(--zagolovok); font-weight:700; font-size:clamp(17px,1.7vw,21px)}
.vopros summary::-webkit-details-marker{display:none}
.vopros summary::after{content:""; position:absolute; right:10px; top:50%; width:14px; height:14px; margin-top:-7px;
  background:linear-gradient(var(--akcent),var(--akcent)) no-repeat center/14px 1.6px, linear-gradient(var(--akcent),var(--akcent)) no-repeat center/1.6px 14px;
  transition:transform .3s var(--plavno)}
.vopros[open] summary::after{transform:rotate(45deg)}
.vopros__otv{padding:0 0 26px; color:var(--tekst2); max-width:82ch}

/* ---------- ФОРМА ---------- */
.zayavka{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(28px,4vw,64px); align-items:start}
.forma{background:var(--fon2); border:1px solid var(--kant); border-radius:var(--r2); padding:clamp(24px,3vw,36px)}
.forma label{display:block; font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tekst2); margin-bottom:8px}
.forma input,.forma textarea{
  width:100%; padding:15px 17px; border-radius:var(--r); border:1px solid var(--kant); background:var(--fon3);
  color:var(--tekst); font:400 16px/1.4 var(--shrift); margin-bottom:16px; transition:border-color .2s ease;
}
.forma input:focus,.forma textarea:focus{outline:none; border-color:var(--akcent)}
.forma .knopka{width:100%}
.forma__soglasie{font-size:12.5px; color:var(--tekst2); text-align:center; margin-top:14px}
.kontakt-stroka{display:flex; gap:14px; align-items:center; padding:18px 0; border-bottom:1px solid var(--kant)}
.kontakt-stroka i{width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:var(--steklo); border:1px solid var(--kant); color:var(--akcent); flex:none; font-style:normal}
.kontakt-stroka b{display:block; font-family:var(--zagolovok); font-size:17px}
.kontakt-stroka span{color:var(--tekst2); font-size:13.5px}

/* ---------- ПОДВАЛ ---------- */
.podval{border-top:1px solid var(--kant); padding:clamp(50px,6vw,84px) 0 34px; background:var(--fon2)}
.podval__setka{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:34px}
.podval h4{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--tekst2); margin-bottom:16px}
.podval ul{list-style:none; display:grid; gap:11px; font-size:15px}
.podval a{color:var(--tekst2); transition:color .2s} .podval a:hover{color:var(--akcent)}
.podval__gigant{font-family:var(--zagolovok); font-weight:800; font-size:clamp(40px,11vw,150px); letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1px var(--kant); margin:44px 0 20px; line-height:.9; user-select:none}
.podval__niz{display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between; color:var(--tekst2); font-size:13.5px; padding-top:22px; border-top:1px solid var(--kant)}

/* ---------- КНОПКА СВЯЗИ ---------- */
.svyaz{position:fixed; right:22px; bottom:96px; z-index:60; width:60px; height:60px; border-radius:50%;
  background:linear-gradient(140deg,var(--akcent),var(--akcent2)); color:#fff; display:grid; place-items:center;
  box-shadow:0 14px 34px rgba(59,130,246,.45); transition:transform .25s var(--plavno)}
.svyaz:hover{transform:scale(1.08)}
.svyaz::before{content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--akcent); animation:volna 2.6s ease-out infinite}
@keyframes volna{0%{transform:scale(.92); opacity:.55} 100%{transform:scale(1.6); opacity:0}}
.svyaz-okno{position:fixed; inset:0; z-index:90; display:none; place-items:center; padding:20px; background:rgba(4,9,18,.72); backdrop-filter:blur(6px)}
.svyaz-okno.otkryto{display:grid}
.svyaz-karta{background:var(--fon2); border:1px solid var(--kant); border-radius:var(--r2); padding:30px; width:min(440px,100%); animation:vsplyt .3s var(--plavno)}
@keyframes vsplyt{from{opacity:0; transform:translateY(18px) scale(.96)} to{opacity:1; transform:none}}
.svyaz-spisok{display:grid; gap:10px; margin-top:20px}
.svyaz-punkt{display:flex; align-items:center; gap:14px; padding:15px 17px; border-radius:var(--r); border:1px solid var(--kant); background:var(--fon3); transition:.24s var(--plavno)}
.svyaz-punkt:hover{transform:translateX(5px); border-color:var(--kant2)}
.svyaz-punkt i{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-style:normal; color:#fff; flex:none; font-weight:700}
.svyaz-punkt b{display:block; font-size:16px} .svyaz-punkt span{font-size:13px; color:var(--tekst2)}
.svyaz-punkt.tg i{background:#2AABEE} .svyaz-punkt.max i{background:#8B5CF6}
.svyaz-punkt.wa i{background:#25D366} .svyaz-punkt.tel i{background:var(--akcent)}
.svyaz-zakryt{width:100%; margin-top:16px; padding:10px; color:var(--tekst2); font-size:15px}

/* ---------- ПУЛЬТ вариантов ---------- */
.pult{
  display:none;              /* виден только администратору — см. sayt.js */
  position:fixed; right:18px; top:38%; transform:translateY(-50%); z-index:75; width:248px;
  background:color-mix(in srgb, var(--fon2) 92%, transparent); border:1px solid var(--kant);
  border-radius:var(--r2); padding:16px; backdrop-filter:blur(14px); font-size:13.5px;
  box-shadow:0 20px 50px rgba(0,0,0,.4); transition:transform .35s var(--plavno);
}
.pult.svernut{transform:translate(calc(100% + 18px),-50%)}
.pult h4{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--tekst2); margin-bottom:12px}
.pult__stroka{display:flex; align-items:center; gap:10px; margin-bottom:9px}
.pult__stroka span{flex:0 0 84px; color:var(--tekst2); font-size:12.5px}
.pult select{flex:1; min-width:0; padding:8px 10px; border-radius:10px; border:1px solid var(--kant); background:var(--fon3); color:var(--tekst); font-size:12.5px}
.pult__svorot{position:absolute; left:-38px; top:50%; transform:translateY(-50%); width:34px; height:56px;
  border-radius:12px 0 0 12px; border:1px solid var(--kant); border-right:none; background:color-mix(in srgb, var(--fon2) 92%, transparent);
  display:grid; place-items:center; color:var(--tekst2); backdrop-filter:blur(14px)}

/* ---------- появление ---------- */
.poyav{opacity:0; transform:translateY(26px); transition:opacity .8s var(--plavno), transform .8s var(--plavno)}
.poyav.vidno{opacity:1; transform:none}

/* ---------- 404 ---------- */
.oshibka{min-height:100svh; min-height:100vh; display:grid; place-items:center; text-align:center; position:relative; overflow:hidden; padding:var(--polya)}
.oshibka__fon{position:absolute; inset:0; z-index:0}
.oshibka__fon img{width:100%; height:100%; object-fit:cover; opacity:.5}
.oshibka__telo{position:relative; z-index:2; max-width:660px}
.oshibka__nomer{font-family:var(--zagolovok); font-weight:800; font-size:clamp(90px,22vw,240px); line-height:.85; letter-spacing:-.06em;
  background:linear-gradient(120deg,var(--akcent),var(--akcent2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.oshibka__ssylki{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:30px}

/* ---------- узкие экраны ---------- */
@media (max-width:1200px){
  .pult{display:none}   /* пульт мешает на узких экранах, он для показа на большом */
}

/* ---- ПЛАНШЕТ: 901–1200 ----
   Меню целиком не помещается рядом с телефоном и кнопкой, поэтому уводим его
   в шторку, как на телефоне: иначе шапка расползается шире экрана. */
@media (max-width:1200px){
  .menyu{
    position:fixed; inset:0 0 auto; top:0; padding:110px var(--polya) 44px; flex-direction:column;
    gap:0; background:var(--fon2); transform:translateY(-102%); z-index:-1;
    visibility:hidden; opacity:0;
    transition:transform .4s var(--plavno), visibility 0s linear .4s, opacity .3s ease;
  }
  .menyu.otkryto{transform:none; visibility:visible; opacity:1; box-shadow:0 26px 60px rgba(0,0,0,.5);
    transition:transform .4s var(--plavno), visibility 0s, opacity .25s ease}
  .menyu a{width:100%; padding:17px 0; border-bottom:1px solid var(--kant); font-size:18px}
  .menyu a::after{display:none}
  .burger{display:flex}
  .shapka__prava{margin-left:auto}
  .logo span{white-space:nowrap}
}
/* Сетки на планшете — ровно два столбца, без «то два, то три» */
@media (max-width:1200px){
  .uslugi{grid-template-columns:repeat(2,1fr)}
  .usluga,.usluga--bolshaya{grid-column:span 1}
  .usluga--glavnaya{grid-column:span 2}
  .galereya.v-bento{grid-template-columns:repeat(2,1fr)}
  .shagi.v-tri{grid-template-columns:repeat(2,1fr)}
  .cifry{grid-template-columns:repeat(2,1fr)}
  .otzyvy{grid-template-columns:repeat(2,1fr)}
  .otzyvy .otzyv:last-child{grid-column:span 2}
  .podval__setka{grid-template-columns:repeat(2,1fr)}
  .sovety{grid-template-columns:repeat(2,1fr)}
}
/* Узкий планшет и большой телефон: один столбец, всё подряд */
@media (max-width:820px){
  .zayavka{grid-template-columns:1fr}
  .ocenka-setka{grid-template-columns:1fr!important}
  .hero.v-split .obertka{grid-template-columns:1fr}
  .shapka__tel{display:none}
}
@media (max-width:700px){
  body{font-size:16px}
  .uslugi,.shagi.v-tri,.cifry,.otzyvy,.podval__setka,.sovety,
  .galereya.v-setka,.galereya.v-bento{grid-template-columns:1fr}
  .usluga--glavnaya,.otzyvy .otzyv:last-child{grid-column:span 1}
  .knopka{width:100%}
  .hero__cifry{gap:18px 26px}
  .hero__tochki{bottom:12px}
  .shagi.v-spisok .shag{grid-template-columns:1fr; gap:8px}
  .tablica td:first-child{width:auto}
  .tablica th,.tablica td{padding:12px 10px; font-size:14.5px}
}
@media (max-width:600px){
  .svyaz{width:54px; height:54px; right:14px; bottom:86px}
  .shapka__prava .knopka{display:none}
  .shapka__telo{padding:10px 10px 10px 14px; gap:10px}
  .logo{font-size:16px}
  .logo small{font-size:10.5px}
  .podval__gigant{font-size:clamp(34px,13vw,80px)}
}
html{overflow-x:clip}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  .poyav{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* На телефоне в шапке остаются только логотип, тема и бургер: кнопка «Оценить»
   не помещалась и вылезала за экран. Сама кнопка есть в первом экране. */
@media (max-width:600px){
  .svyaz{width:54px; height:54px; right:14px; bottom:86px}
  .shapka__prava .knopka{display:none}
  .shapka__telo{padding:10px 10px 10px 14px; gap:10px}
  .logo{font-size:16px}
  .logo small{font-size:10.5px}
  .podval__gigant{font-size:clamp(34px,13vw,80px)}
}
/* clip вместо hidden: горизонтальной прокрутки нет, а прилипание шапки не ломается */
html{overflow-x:clip}

/* Раскладки, которые раньше стояли прямо в разметке. В стилях ими можно управлять
   по ширине экрана — в разметке это было невозможно. */
.ocenka-setka{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(28px,4vw,64px); align-items:center}
.sovety{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px}
@media (max-width:900px){
  .ocenka-setka{grid-template-columns:1fr}
}
@media (max-width:700px){
  .sovety{grid-template-columns:1fr}
}

/* Шапка: при прокрутке под капсулой появлялась тёмная полоса — сквозь прозрачные
   поля шапки был виден уезжающий контент. Закрываем её мягкой подложкой. */
/* Шапка остаётся прозрачной: стеклянная капсула и ничего больше.
   Чтобы над ней не оставалось полосы уезжающего контента, при прокрутке
   капсула прижимается к самому верху экрана. */
.shapka.uzhe{padding-top:0}
.shapka.uzhe .shapka__telo{border-radius:0 0 var(--r2) var(--r2)}


/* Бургер и переключатель темы — одной высоты, иначе шапка выглядит неровной */
.burger{width:44px; height:44px; border-radius:12px; flex-direction:column;
  align-items:center; justify-content:center; gap:3px}
.burger span{width:19px; height:2.4px; margin:1.4px 0}

/* Подвал. Движок пересобирает подвал по-своему и теряет блочность списков:
   пункты слипались в сплошную строку («Бытовки и вагончикиМеталл и металлопрокат…»),
   а телефон с почтой шли рядом. Поэтому задаём правила по тегам, а не по нашим классам —
   после пересборки классы не сохраняются. */
.podval ul{display:grid!important; gap:11px!important; list-style:none!important; margin:0!important; padding:0!important}
.podval li{display:block!important; width:100%!important; float:none!important; white-space:normal!important}
/* Движок пересобирает колонки подвала в <div class="fcol"> со ссылками подряд, без обёрток —
   из-за этого пункты слипались в сплошную строку. Каждая ссылка занимает свою строку. */
.podval .fcol a{display:block!important; margin-bottom:11px; line-height:1.45}
.podval .fcol a:last-child{margin-bottom:0}
.podval .fcol h4{margin-bottom:15px}
.podval__tihiy{color:var(--tekst2)}
.podval .fcol{min-width:0}
@media (max-width:700px){
  .podval__setka{gap:26px}
  .podval ul{gap:12px!important}
}

/* Появление по очереди: дети блока ждут своей секунды, а не выскакивают разом. */
.poyav .usluga, .poyav .shag, .poyav .karta, .poyav .otzyv, .poyav .cifra, .poyav .vopros{
  opacity:0; transform:translateY(16px);
}
.poyav .usluga.vidno-rebenok, .poyav .shag.vidno-rebenok, .poyav .karta.vidno-rebenok,
.poyav .otzyv.vidno-rebenok, .poyav .cifra.vidno-rebenok, .poyav .vopros.vidno-rebenok{
  opacity:1; transform:none;
}
@media (prefers-reduced-motion:reduce){
  .poyav .usluga, .poyav .shag, .poyav .karta, .poyav .otzyv, .poyav .cifra, .poyav .vopros{opacity:1; transform:none}
}

/* Гигантская надпись в подвале была только контуром и почти не читалась.
   Делаем её полупрозрачной заливкой — видно, но не спорит с текстом.
   В светлой теме та же надпись светлыми буквами пропадала на белом,
   поэтому там она тёмная. */
.podval__gigant{
  -webkit-text-stroke:0; color:transparent;
  background:linear-gradient(180deg, rgba(242,246,252,.16), rgba(242,246,252,.04));
  -webkit-background-clip:text; background-clip:text;
}
:root[data-theme="light"] .podval__gigant{
  background:linear-gradient(180deg, rgba(11,21,36,.15), rgba(11,21,36,.05));
  -webkit-background-clip:text; background-clip:text;
}

/* Крупный знак в подвале рядом с названием */
.podval__shapka{display:flex; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap}
.podval__znak{width:clamp(88px,9vw,124px); height:auto; flex:none;
  filter:drop-shadow(0 8px 20px rgba(59,130,246,.28))}
.podval__shapka .logo{font-size:20px}

/* Знак в шапке — наша бытовка вместо нарисованного кубика.
   Подложка и градиент тут не нужны: у знака свой цвет и прозрачный фон. */
.logo__znak--kartinka{
  width:auto; height:38px; border-radius:0; background:none; box-shadow:none; padding:0;
  filter:drop-shadow(0 4px 12px rgba(59,130,246,.35));
}
@media (max-width:600px){ .logo__znak--kartinka{height:32px} }

/* Полоски бургера — вплотную друг к другу, как просил владелец */
.burger span{margin:0 !important}   /* расстояние задаёт gap у самой кнопки */

/* На телефоне название заезжало под значок темы: текст длинный, а места мало.
   Логотип оставляем прежнего размера (владельцу нравится), поэтому ужимаем текст:
   подпись под названием на узких экранах прячем, само название не переносим
   и при нехватке места обрезаем многоточием — наезда не будет никогда. */
@media (max-width:560px){
  .logo{min-width:0; overflow:hidden}
  .logo > span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .logo small{display:none}
  .shapka__prava{flex:none}
  .shapka__telo{gap:10px}
}

/* ---------- Длинные списки позиций ----------
   На большом экране раздел раскрыт и выглядит как обычный заголовок с таблицей.
   На телефоне такие таблицы занимают экран за экраном, поэтому там они свёрнуты
   в кнопку. Текст остаётся в разметке всегда — поисковые системы читают
   содержимое свёрнутого блока, так что на выдаче это не сказывается. */
.spisok-razdel{margin-bottom:26px}
.spisok-razdel > summary{
  list-style:none; cursor:default; display:flex; align-items:center; gap:14px;
  padding:0 0 14px; font-family:var(--zagolovok); font-weight:700;
  font-size:clamp(19px,2vw,26px); letter-spacing:-.02em;
}
.spisok-razdel > summary::-webkit-details-marker{display:none}
.spisok-razdel__znak{display:none}
.spisok-razdel__telo{overflow-x:auto}

@media (max-width:820px){
  .spisok-razdel{
    border:1px solid var(--kant); border-radius:var(--r); background:var(--fon2);
    margin-bottom:12px; overflow:hidden;
  }
  .spisok-razdel > summary{
    cursor:pointer; padding:18px 20px; font-size:18px; gap:12px;
    transition:background .2s var(--plavno);
  }
  .spisok-razdel > summary:hover{background:var(--steklo)}
  .spisok-razdel__zag{flex:1; min-width:0}
  .spisok-razdel__znak{
    display:block; width:26px; height:26px; border-radius:50%; flex:none; position:relative;
    background:var(--steklo); border:1px solid var(--kant);
  }
  .spisok-razdel__znak::before,.spisok-razdel__znak::after{
    content:""; position:absolute; left:50%; top:50%; background:var(--akcent); border-radius:2px;
    transform:translate(-50%,-50%); transition:transform .25s var(--plavno);
  }
  .spisok-razdel__znak::before{width:12px; height:2px}
  .spisok-razdel__znak::after{width:2px; height:12px}
  .spisok-razdel[open] .spisok-razdel__znak::after{transform:translate(-50%,-50%) scaleY(0)}
  .spisok-razdel__telo{padding:0 14px 16px}
  .spisok-razdel .tablica{font-size:14.5px}
}

/* Страница с правовым текстом */
.pravo h2{font-size:clamp(20px,2.2vw,27px); margin:36px 0 14px}
.pravo p{color:var(--tekst2); margin-bottom:14px; max-width:78ch}
.pravo ul{margin:0 0 18px; padding-left:22px; color:var(--tekst2)}
.pravo li{margin-bottom:9px; max-width:76ch}
.pravo b{color:var(--tekst)}
.pravo a{color:var(--akcent)}
.razdel-politika{padding-top:clamp(120px,15vw,180px)}

/* Города: где мы работаем. Заодно это честные ключевые слова для поиска. */
.goroda{display:flex; flex-wrap:wrap; gap:9px}
.gorod{
  padding:9px 16px; border-radius:var(--r3); background:var(--fon2);
  border:1px solid var(--kant); color:var(--tekst2); font-size:15px;
  transition:.18s var(--plavno);
}
.gorod:hover{border-color:var(--akcent); color:var(--tekst); transform:translateY(-2px)}
a.gorod{text-decoration:none}

/* ---------- «Показать полностью» ----------
   Длинный блок на телефоне обрезается по высоте и плавно растворяется книзу.
   Текст остаётся в разметке целиком — это важно и для человека, и для поиска. */
.svertka{position:relative}
.svertka > *:first-child{max-height:330px; overflow:hidden; display:block}
.svertka--otkryta > *:first-child{max-height:none}
.svertka::after{
  content:""; position:absolute; left:0; right:0; bottom:44px; height:110px; pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--fon) 82%);
  transition:opacity .3s var(--plavno);
}
.razdel[style*="--fon2"] .svertka::after,
.razdel--tihiy .svertka::after{background:linear-gradient(180deg, transparent, var(--fon2) 82%)}
.svertka--otkryta::after{opacity:0}
.svertka__knopka{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:10px;
  padding:14px; border-radius:var(--r); border:1px solid var(--kant); background:var(--fon2);
  color:var(--akcent); font:600 15.5px/1 var(--shrift); position:relative; z-index:2;
}
.svertka__knopka:hover{border-color:var(--kant2)}

/* ---------- Оценка на телефоне: компактнее ----------
   На узком экране блок расползался: крупные отступы, длинные подписи, кнопки в три строки. */
@media (max-width:820px){
  .ocenka{padding:18px 16px; border-radius:var(--r)}
  .ocenka h3{font-size:18px}
  .ocenka__vopros{margin-top:14px}
  .ocenka__vopros > span{font-size:11.5px; margin-bottom:7px}
  .vybor{gap:6px}
  .vybor button{padding:9px 12px; font-size:14px; flex:1 1 calc(50% - 3px); min-width:0}
  .ocenka__itog{margin-top:16px; padding:14px 16px}
  .ocenka__cena{font-size:26px}
  .ocenka__pod{font-size:12.5px; margin-top:6px}
  .ocenka .knopka{margin-top:14px; padding:15px}
  .ocenka ul{font-size:14.5px !important; padding-left:17px !important}
  .ocenka ul li{margin-bottom:7px}
}

/* Пульт вариантов показываем только тому, кто вошёл в панель. Обычный посетитель
   его не видит: это инструмент настройки, а не часть сайта. */
body.admin .pult{display:block}

/* ---------- Карусель работ: листается мышью, без полосы прокрутки ----------
   Владелец: полоса выглядит некрасиво, хочется тянуть картинки мышкой,
   и чтобы в ряд помещалось почти четыре карточки. */
.galereya.v-karusel{
  scrollbar-width:none; -ms-overflow-style:none; cursor:grab;
  scroll-snap-type:none;      /* при перетаскивании прилипание мешает */
}
.galereya.v-karusel::-webkit-scrollbar{display:none; height:0}
.galereya.v-karusel.tyanut{cursor:grabbing; scroll-behavior:auto; user-select:none}
.galereya.v-karusel.tyanut img{pointer-events:none}

/* Широкие блоки: карусель и отзывы выходят за колонку текста примерно на треть,
   так в ряд помещается больше карточек и страница выглядит просторнее. */
@media (min-width:1100px){
  /* обёртка обычная — заголовки вровень со всеми блоками;
     наружу выходит только лента карточек */
  .razdel--shiroko .galereya, .razdel--shiroko .otzyvy{
    --vylet:calc((min(1680px, 96vw) - var(--shirina)) / 2);
    width:calc(100% + var(--vylet) * 2);
    margin-left:calc(var(--vylet) * -1);
    padding-left:0;
    padding-right:var(--vylet);
  }
  /* заголовок и подпись остаются в общей колонке, вылет их не касается */
  .razdel--shiroko .obertka > .nadpis,
  .razdel--shiroko .obertka > h2,
  .razdel--shiroko .obertka > .lid{margin-left:0}
  .galereya.v-karusel .karta{flex:0 0 clamp(300px, 31vw, 500px); min-height:clamp(320px, 27vw, 420px)}
  .otzyvy{grid-template-columns:repeat(3,1fr); gap:20px}
}

/* Отзывы вариантом «лента»: тоже листаются мышью */
.otzyvy.v-lenta{
  display:flex; overflow-x:auto; gap:20px; padding-bottom:12px;
  scrollbar-width:none; cursor:grab;
}
.otzyvy.v-lenta::-webkit-scrollbar{display:none; height:0}
.otzyvy.v-lenta.tyanut{cursor:grabbing; user-select:none}
.otzyvy.v-lenta .otzyv{flex:0 0 clamp(280px, 26vw, 420px)}
.otzyvy.v-krupno{grid-template-columns:1fr; gap:18px}
.otzyvy.v-krupno .otzyv{padding:34px}
.otzyvy.v-krupno .otzyv p{font-size:18px; line-height:1.6}

/* ---------- Оценка на компьютере вровень с текстом ----------
   Блок был заметно выше соседней колонки. Теперь колонки одной высоты,
   а текст слева распределяется по ней. */
@media (min-width:900px){
  .ocenka-setka{align-items:stretch}
  .ocenka-setka > div:first-child{display:flex; flex-direction:column; justify-content:center}
  .ocenka{display:flex; flex-direction:column; justify-content:center}
  .ocenka__vopros{margin-top:16px}
  .ocenka .vybor button{padding:10px 15px; font-size:15px}
  .ocenka__itog{margin-top:18px; padding:16px 18px}
}

/* Карточки работ на большом экране — крупнее: они несут фотографии,
   и мелкими их разглядывать неудобно. */
@media (min-width:1100px){
  .galereya.v-karusel .karta{min-height:380px}
  .karta__tekst{padding:24px 26px}
  .karta__tekst b{font-size:20px}
  .karta__tekst span{font-size:14.5px}
}

/* Оценка на компьютере была вдвое выше соседней колонки: слева текст занимал
   верхнюю половину, а калькулятор — всю высоту. Ужимаем сам блок. */
@media (min-width:900px){
  .ocenka{padding:24px}
  .ocenka h3{font-size:20px}
  .ocenka__vopros{margin-top:14px}
  .ocenka__vopros > span{margin-bottom:7px; font-size:11.5px}
  .ocenka .vybor{gap:7px}
  .ocenka .vybor button{
    flex:1 1 calc(50% - 3.5px); min-width:0; padding:9px 12px; font-size:14.5px;
    text-align:center;
  }
  .ocenka__itog{margin-top:16px; padding:14px 16px}
  .ocenka__cena{font-size:30px}
  .ocenka__pod{font-size:13px; margin-top:5px}
  .ocenka .knopka{margin-top:14px; padding:15px}
}

/* ПРАВКА 3. Между заголовком отзывов и карточками было слишком просторно. */
@media (min-width:900px){
  #otzyvy .otzyvy, #otzyvy-metall .otzyvy, #otzyvy-opalubka .otzyvy{margin-top:24px !important}
  #otzyvy, #otzyvy-metall, #otzyvy-opalubka{padding-bottom:clamp(48px,5vw,80px)}
}

/* Текст рядом с калькулятором набираем чуть плотнее — так колонки сходятся по высоте. */
@media (min-width:900px){
  .ocenka-setka .lid{font-size:17px; line-height:1.55}
  .ocenka-setka > div:first-child h2{margin-bottom:4px}
}

/* Видео-подложка первого экрана (пульт → «Эффекты» → «Видео на первом экране») */
.hero__podlozhka{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.hero__podlozhka video{width:100%; height:100%; object-fit:cover; opacity:.28; filter:saturate(.85)}
.hero__podlozhka::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--fon) 72%,transparent),var(--fon) 88%)}
@media (max-width:760px){ .hero__podlozhka video{opacity:.2} }

/* Посёлки и деревни рядом (блок внизу страницы города) */
.ryadom{padding:clamp(28px,4vw,54px) 0}
.ryadom .obertka{max-width:1160px;margin:0 auto;padding:0 20px}
.ryadom__zag{font-size:clamp(20px,2.2vw,28px);margin:0 0 12px}
.ryadom__tekst{margin:0;max-width:900px;line-height:1.7;color:var(--tekst-tusklyy,#9aa4b8);
  font-size:clamp(14px,1.1vw,16px)}
.ryadom__p{color:var(--tekst,#e8ecf4);white-space:nowrap}
@media (max-width:760px){ .ryadom{padding:26px 0} }