/* ═══════════════════════════════════════════════════════════════
   VOVA DETAILING — стили
   Правки цвета/шрифта — в блоке :root ниже, там всё в одном месте.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Цвета */
  --bg:        #0a0a0b;
  --bg-2:      #0f0f11;
  --surface:   #151519;
  --surface-2: #1c1c21;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.16);
  --txt:       #f3f3f5;
  --muted:     #9a9aa4;
  --gold:      #c8a44d;
  --gold-2:    #e6cd90;
  --wa:        #25d366;

  /* Типографика */
  --f-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-disp: 'Oswald', 'Manrope', sans-serif;

  /* Раскладка */
  --wrap: 1240px;
  --pad:  clamp(18px, 4vw, 40px);
  --sec-y: clamp(64px, 9vw, 130px);
  --r:    14px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font:400 clamp(15px,1.05vw,17px)/1.65 var(--f-body);
  letter-spacing:.002em;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; line-height:1.06; letter-spacing:-.02em; font-weight:800; }
p{ margin:0 0 1em; }
ul,ol{ margin:0; padding:0; list-style:none; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:840px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:#000; padding:10px 18px; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

.dot{
  display:inline-block; width:4px; height:4px; border-radius:50%;
  background:var(--gold); vertical-align:middle; margin:0 .5em;
}

.eyebrow{
  font:500 12px/1 var(--f-disp);
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin:0 0 20px;
}

/* ───────────────────────── Кнопки ───────────────────────── */
.btn{
  --btn-bg:var(--gold);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border:1px solid transparent; border-radius:100px;
  background:var(--btn-bg); color:#0a0a0b;
  font:700 14px/1 var(--f-body); letter-spacing:.01em;
  cursor:pointer; white-space:nowrap;
  transition:transform .18s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -10px rgba(200,164,77,.6); }
.btn:active{ transform:translateY(0); }
.btn--lg{ padding:18px 34px; font-size:15px; }
.btn--sm{ padding:11px 20px; font-size:13px; }
.btn--ghost{
  background:transparent; color:var(--txt); border-color:var(--line-2);
}
.btn--ghost:hover{ background:rgba(255,255,255,.06); box-shadow:none; border-color:var(--gold); color:var(--gold-2); }
.btn svg{ flex:none; }

/* ───────────────────────── Шапка ───────────────────────── */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(10,10,11,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
.hdr__in{ display:flex; align-items:center; gap:28px; height:74px; }

.logo{ display:flex; align-items:center; gap:11px; flex:none; }
.logo__mark{
  width:34px; height:34px; border-radius:9px; flex:none;
  display:grid; place-items:center;
  background:linear-gradient(145deg,var(--gold-2),var(--gold));
  color:#0a0a0b; font:600 19px/1 var(--f-disp);
}
.logo__txt{ font:500 15px/1 var(--f-disp); letter-spacing:.16em; }
.logo__txt b{ font-weight:500; color:var(--gold); }
.logo__txt b::before{ content:' '; }

.nav{ display:flex; gap:26px; margin-inline:auto; }
.nav a{
  font-size:14px; color:var(--muted); position:relative; padding:6px 0;
  transition:color .2s ease;
}
.nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right .25s ease;
}
.nav a:hover{ color:var(--txt); }
.nav a:hover::after{ right:0; }

.hdr__cta{ display:flex; align-items:center; gap:16px; flex:none; }
.hdr__phone{ font:600 14px/1 var(--f-body); color:var(--txt); transition:color .2s; }
.hdr__phone:hover{ color:var(--gold); }

.burger{
  display:none; width:42px; height:42px; padding:0; flex:none;
  background:transparent; border:1px solid var(--line-2); border-radius:10px;
  cursor:pointer;
}
.burger span{
  display:block; width:18px; height:1.5px; background:var(--txt); margin:4px auto;
  transition:transform .25s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* ───────────────────────── Герой ───────────────────────── */
.hero{
  position:relative; min-height:min(100svh, 900px);
  display:flex; align-items:flex-end;
  padding:140px 0 clamp(48px,8vw,96px);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 55%;
  filter:saturate(.92) contrast(1.05);
  animation:heroZoom 18s ease-out forwards;
}
@keyframes heroZoom{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
@media (prefers-reduced-motion:reduce){ .hero__media img{ animation:none; } }
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,10,11,.86) 0%, rgba(10,10,11,.30) 32%, rgba(10,10,11,.72) 70%, var(--bg) 100%),
    radial-gradient(120% 80% at 20% 90%, rgba(10,10,11,.85), transparent 60%);
}
.hero__in{ position:relative; z-index:1; }
.hero__h1{
  font-size:clamp(38px, 7.2vw, 92px);
  max-width:16ch; margin-bottom:26px;
}
.hero__h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--gold-2),var(--gold) 60%,#8f7433);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__sub{
  max-width:56ch; font-size:clamp(15px,1.5vw,19px); color:#d3d3d9;
  margin-bottom:34px;
}
.hero__btns{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:22px; }
.hero__note{ font-size:13px; color:var(--muted); margin:0; }

.hero__scroll{
  position:absolute; left:50%; bottom:22px; z-index:1;
  width:22px; height:36px; border:1px solid var(--line-2); border-radius:12px;
  transform:translateX(-50%);
}
.hero__scroll span{
  display:block; width:2px; height:6px; border-radius:2px; background:var(--gold);
  margin:7px auto 0; animation:scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{ 0%,100%{ transform:translateY(0); opacity:1; } 50%{ transform:translateY(11px); opacity:.2; } }

/* ───────────────────────── Цифры ───────────────────────── */
.stats{ background:var(--bg); border-block:1px solid var(--line); }
.stats__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
}
.stat{ padding:clamp(24px,3.4vw,42px) 0; text-align:center; position:relative; }
.stat + .stat::before{
  content:''; position:absolute; left:0; top:22%; bottom:22%; width:1px; background:var(--line);
}
.stat b{
  display:block; font:500 clamp(21px,2.5vw,32px)/1 var(--f-disp);
  color:var(--gold-2); letter-spacing:.01em; margin-bottom:8px;
}
.stat span{ font-size:13px; color:var(--muted); }

/* ───────────────────────── Секции ───────────────────────── */
.sec{ padding-block:var(--sec-y); position:relative; }
.sec--dark{ background:var(--bg-2); }
.sec__head{ max-width:720px; margin-bottom:clamp(36px,4.5vw,64px); }
.sec__head--center{ margin-inline:auto; text-align:center; }
.sec__h2{ font-size:clamp(28px,4.4vw,54px); margin-bottom:18px; }
.sec__lead{ color:var(--muted); font-size:clamp(15px,1.3vw,17px); margin:0; }
.sec__foot{ margin:36px 0 0; color:var(--muted); font-size:15px; }
.sec__foot a{ color:var(--gold-2); border-bottom:1px solid rgba(200,164,77,.4); }
.sec__foot a:hover{ border-color:var(--gold-2); }

/* ───────────────────────── Карточки услуг ───────────────────────── */
.cards{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
}
.card{
  position:relative; padding:30px 28px 28px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  display:flex; flex-direction:column;
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.card:hover{ border-color:rgba(200,164,77,.45); transform:translateY(-4px); background:var(--surface-2); }
.card__ico{
  width:46px; height:46px; margin-bottom:20px; border-radius:12px;
  display:grid; place-items:center;
  background:rgba(200,164,77,.10); border:1px solid rgba(200,164,77,.22);
}
.card__ico svg{
  width:23px; height:23px; fill:none; stroke:var(--gold-2);
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.card h3{ font-size:19px; font-weight:800; margin-bottom:10px; letter-spacing:-.01em; }
.card p{ color:var(--muted); font-size:14.5px; margin-bottom:18px; }
.card__price{
  margin:auto 0 0 !important; padding-top:16px; border-top:1px solid var(--line);
  color:var(--muted) !important; font-size:13px !important;
}
.card__price b{ font:500 21px/1 var(--f-disp); color:var(--txt); margin-left:4px; }
.card__link{ margin-top:14px; font-size:13.5px; color:var(--gold-2); }
.card__link:hover{ text-decoration:underline; }
.card--hot{
  background:linear-gradient(160deg, rgba(200,164,77,.10), var(--surface) 45%);
  border-color:rgba(200,164,77,.35);
}

/* ───────────────────────── Блок «Фары» ───────────────────────── */
.hl{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px,5vw,72px); align-items:center; }
.hl__txt p{ color:var(--muted); }
.hl__txt .sec__h2{ margin-bottom:20px; }
.ticks{ margin:26px 0 30px; display:grid; gap:12px; }
.ticks li{ position:relative; padding-left:32px; font-size:15px; color:#d3d3d9; }
.ticks li::before{
  content:''; position:absolute; left:0; top:.42em;
  width:16px; height:9px; border-left:1.7px solid var(--gold); border-bottom:1.7px solid var(--gold);
  transform:rotate(-45deg);
}
.hl__gal{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hl__gal figure{ margin:0; position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); }
.hl__gal img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .5s ease; }
.hl__gal figure:hover img{ transform:scale(1.05); }
.hl__gal figcaption{
  position:absolute; inset:auto 0 0 0; padding:26px 14px 12px;
  background:linear-gradient(transparent, rgba(0,0,0,.85));
  font-size:12.5px; color:#e7e7ea;
}

/* ───────────────────────── До / После ───────────────────────── */
.bas{ display:grid; gap:22px; grid-template-columns:repeat(2,1fr); }
/* одна пара — не растягиваем на всю ширину */
.bas:has(.bapair:only-child){ grid-template-columns:minmax(0,760px); justify-content:center; }
.bapair{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--surface); transition:border-color .25s ease;
}
.bapair:hover{ border-color:rgba(200,164,77,.4); }
.bapair__imgs{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); }
.bapair__imgs figure{ margin:0; position:relative; overflow:hidden; background:var(--surface); }
.bapair__imgs img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.bas:has(.bapair:only-child) .bapair__imgs img{ aspect-ratio:1/1; }
.bapair__imgs .ph-slot{ border-radius:0; }
.bapair__tag{
  position:absolute; left:12px; top:12px; z-index:2;
  font:500 10px/1 var(--f-disp); letter-spacing:.18em; text-transform:uppercase;
  padding:7px 12px; border-radius:100px;
  background:rgba(10,10,11,.78); border:1px solid var(--line-2); color:#e7e7ea;
  backdrop-filter:blur(6px);
}
.bapair__tag--a{ background:var(--gold); border-color:transparent; color:#0a0a0b; }
.bapair__cap{
  margin:0; padding:20px 22px 22px;
  font-weight:700; font-size:15.5px; letter-spacing:-.01em;
}
.bapair__cap span{
  display:block; margin-top:6px;
  font-weight:400; font-size:13.5px; line-height:1.55; color:var(--muted);
}

/* ───────────────────────── Портфолио ───────────────────────── */
.gal{
  display:grid; gap:14px;
  grid-template-columns:repeat(4,1fr);
}
.gal--slots{ margin-top:14px; }
.gal__i{
  margin:0; position:relative; overflow:hidden; border-radius:var(--r);
  border:1px solid var(--line); cursor:zoom-in; background:var(--surface);
}
.gal__i--wide{ grid-column:span 2; }
.gal__i img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1), filter .3s; filter:saturate(.95); }
.gal__i:hover img{ transform:scale(1.06); filter:saturate(1.05); }
.gal__i figcaption{
  position:absolute; inset:auto 0 0 0; padding:34px 16px 14px;
  background:linear-gradient(transparent, rgba(0,0,0,.88));
  font-weight:600; font-size:14px;
}
.gal__i figcaption span{ display:block; font-weight:400; font-size:12.5px; color:var(--gold-2); margin-top:2px; }

/* ───────────────────────── Процесс ───────────────────────── */
.steps{ display:grid; gap:16px; grid-template-columns:repeat(4,1fr); counter-reset:s; }
.step{
  padding:30px 26px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); position:relative; overflow:hidden;
  transition:border-color .25s, transform .25s;
}
.step:hover{ border-color:rgba(200,164,77,.4); transform:translateY(-4px); }
.step__n{
  display:block; font:500 13px/1 var(--f-disp); letter-spacing:.2em;
  color:var(--gold); margin-bottom:22px;
}
.step h3{ font-size:18px; margin-bottom:10px; }
.step p{ color:var(--muted); font-size:14.5px; margin:0; }

/* ───────────────────────── Отзывы ───────────────────────── */
.revs{ display:grid; gap:16px; grid-template-columns:repeat(3,1fr); }
.rev{
  margin:0; padding:30px 28px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line);
  display:flex; flex-direction:column;
}
.rev blockquote{ margin:0 0 22px; font-size:15.5px; line-height:1.6; color:#d9d9de; }
.rev blockquote::before{
  content:'“'; display:block; font:500 46px/0.7 var(--f-disp);
  color:var(--gold); margin-bottom:14px;
}
.rev cite{ margin-top:auto; font-style:normal; font-weight:700; font-size:14.5px; }
.rev cite span{ display:block; font-weight:400; font-size:13px; color:var(--muted); margin-top:2px; }
/* Слот под будущий реальный отзыв */
.rev.slot{ border-style:dashed; border-color:var(--line-2); background:transparent; }
.rev.slot blockquote{ color:var(--muted); }

/* ───────────────────────── FAQ ───────────────────────── */
.faq details{
  border-bottom:1px solid var(--line);
}
.faq summary{
  list-style:none; cursor:pointer; padding:24px 44px 24px 0; position:relative;
  font-weight:700; font-size:clamp(16px,1.5vw,18.5px); letter-spacing:-.01em;
  transition:color .2s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--gold-2); }
.faq summary::after{
  content:''; position:absolute; right:8px; top:50%; width:12px; height:12px;
  margin-top:-9px; border-right:1.7px solid var(--gold); border-bottom:1.7px solid var(--gold);
  transform:rotate(45deg); transition:transform .25s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; }
.faq details > div{ padding:0 0 26px; }
.faq p{ color:var(--muted); font-size:15px; margin:0; }
.faq a{ color:var(--gold-2); border-bottom:1px solid rgba(200,164,77,.4); }

/* ───────────────────────── CTA / Контакты ───────────────────────── */
.sec--cta{
  background:
    radial-gradient(90% 120% at 15% 0%, rgba(200,164,77,.13), transparent 55%),
    var(--bg-2);
  border-top:1px solid var(--line);
}
.cta{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:start; }
.cta__lead{ color:var(--muted); max-width:44ch; margin-bottom:32px; }
.cta__btns{ display:flex; flex-wrap:wrap; gap:14px; }

.info{ margin:0 0 24px; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.info > div{ background:var(--bg-2); padding:20px 24px; display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:baseline; }
.info dt{ font:500 11px/1.4 var(--f-disp); letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.info dd{ margin:0; font-size:15px; }
.info__sub{ display:inline-block; margin-top:4px; font-size:13px; color:var(--muted); }
.info dd a:hover{ color:var(--gold-2); }

.map{
  aspect-ratio:16/10; border-radius:var(--r); border:1px dashed var(--line-2);
  background:var(--surface); position:relative;
}
.map::after{
  content:attr(data-label); position:absolute; inset:0;
  display:grid; place-items:center; text-align:center; padding:20px;
  font-size:13px; color:var(--muted);
}
.map iframe{ width:100%; height:100%; border:0; border-radius:var(--r); }
.map:has(iframe){ border-style:solid; }
.map:has(iframe)::after{ display:none; }

/* ───────────────────────── Подвал ───────────────────────── */
.ftr{ border-top:1px solid var(--line); padding-block:44px; background:var(--bg); }
.ftr__in{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.ftr__nav{ display:flex; gap:22px; margin-inline:auto; flex-wrap:wrap; }
.ftr__nav a{ font-size:14px; color:var(--muted); }
.ftr__nav a:hover{ color:var(--txt); }
.ftr__copy{ margin:0; font-size:13px; color:var(--muted); }

/* ───────────────────────── Мобильная плашка ───────────────────────── */
.mobbar{
  display:none; position:fixed; inset:auto 0 0 0; z-index:90;
  gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(10,10,11,.9); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}
.mobbar__call{
  flex:1; display:grid; place-items:center; border-radius:100px;
  border:1px solid var(--line-2); font-weight:700; font-size:14px; padding:14px;
}
.mobbar__wa{ flex:1.4; }

/* ───────────────────────── Лайтбокс ───────────────────────── */
.lb{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(6,6,7,.94); backdrop-filter:blur(8px); padding:70px 20px;
}
.lb[hidden]{ display:none; }
.lb__img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; }
.lb__cap{ position:absolute; left:0; right:0; bottom:24px; text-align:center; font-size:14px; color:#cfcfd6; margin:0; }
.lb__close,.lb__nav{
  position:absolute; background:rgba(255,255,255,.07); border:1px solid var(--line-2);
  color:var(--txt); cursor:pointer; border-radius:50%; width:48px; height:48px;
  font-size:26px; line-height:1; display:grid; place-items:center;
  transition:background .2s, border-color .2s;
}
.lb__close:hover,.lb__nav:hover{ background:rgba(200,164,77,.2); border-color:var(--gold); }
.lb__close{ top:22px; right:22px; }
.lb__nav{ top:50%; margin-top:-24px; font-size:32px; }
.lb__nav--prev{ left:22px; }
.lb__nav--next{ right:22px; }

/* ───────────────────────── Заглушка вместо фото ─────────────────────────
   Если файла нет, JS подставляет аккуратную плашку с подписью.
   Положи файл с нужным именем — плашка сама заменится на фото.          */
.ph-slot{
  display:grid; place-items:center; text-align:center; padding:18px;
  width:100%; aspect-ratio:4/3; border-radius:inherit;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 10px, transparent 10px 20px),
    var(--surface);
}
.ph-slot::before{
  content:attr(data-label); max-width:24ch; overflow-wrap:anywhere;
  font:500 11px/1.6 var(--f-disp); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
figure:has(.ph-slot) figcaption{ display:none; }
.hero__media .ph-slot{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; }


section[id]{ scroll-margin-top:86px; }

/* ───────────────────────── Появление при скролле ───────────────────────── */
.rv{ opacity:0; transform:translateY(22px); }
.rv.in{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; } }

/* ───────────────────────── Режим черновика ─────────────────────────
   Пока DRAFT:true в script.js — все заглушки подсвечены.
   Перед запуском поставь DRAFT:false.                                */
body.draft [data-ph]{
  outline:1px dashed rgba(200,164,77,.7); outline-offset:3px; border-radius:3px;
}
body.draft [data-ph]::after{
  content:attr(data-ph); font:500 9px/1 var(--f-disp); letter-spacing:.1em;
  text-transform:uppercase; color:#0a0a0b; background:var(--gold);
  padding:2px 5px; border-radius:3px; margin-left:6px; vertical-align:super;
  white-space:nowrap;
}
body.draft .rev.slot::after{
  content:'СЛОТ ПОД РЕАЛЬНЫЙ ОТЗЫВ'; margin-top:16px;
  font:500 10px/1 var(--f-disp); letter-spacing:.14em; color:var(--gold);
}
.draftbar{
  position:fixed; left:14px; bottom:14px; z-index:150;
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; border-radius:100px;
  background:rgba(10,10,11,.9); border:1px solid rgba(200,164,77,.4);
  backdrop-filter:blur(10px);
  font:500 11px/1 var(--f-disp); letter-spacing:.12em; text-transform:uppercase; color:var(--gold);
}
.draftbar b{ color:var(--txt); font-weight:500; }

/* ═══════════════════════════ Адаптив ═══════════════════════════ */
@media (max-width:1200px){
  .hdr__in{ gap:20px; }
  .nav{ gap:18px; }
}
@media (max-width:1060px){
  .hdr__phone{ display:none; }
}

@media (max-width:1080px){
  .gal{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .revs{ grid-template-columns:1fr; }
  .bas{ grid-template-columns:1fr; }
  .hl{ grid-template-columns:1fr; }
  .cta{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .nav{
    position:fixed; inset:74px 0 auto 0;
    flex-direction:column; gap:0; margin:0; padding:8px var(--pad) 22px;
    background:rgba(10,10,11,.97); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    transform:translateY(-130%); transition:transform .35s cubic-bezier(.2,.7,.3,1);
  }
  .nav.is-open{ transform:none; }
  .nav a{ padding:15px 0; border-bottom:1px solid var(--line); font-size:16px; color:var(--txt); }
  .nav a::after{ display:none; }
  .hdr__in{ gap:14px; }
  .hdr__cta{ margin-inline-start:auto; }
  .hdr__phone{ display:none; }
  .burger{ display:block; margin-inline-start:0; }
  .logo__txt{ font-size:13px; letter-spacing:.12em; }
  .hdr.is-stuck,.nav.is-open ~ *{}
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(3)::before{ display:none; }
  .stat:nth-child(n+3){ border-top:1px solid var(--line); }
  .mobbar{ display:flex; }
  body{ padding-bottom:76px; }
  .draftbar{ bottom:86px; }
  .info > div{ grid-template-columns:1fr; gap:6px; }
}

@media (max-width:640px){
  /* Кнопка в шапке не влезает — внизу всё равно есть плашка с WhatsApp */
  .hdr__cta{ display:none; }
  .burger{ margin-inline-start:auto; }
  .hero{ min-height:88svh; padding-top:120px; }
  .gal{ grid-template-columns:1fr; }
  .gal__i--wide{ grid-column:span 1; }
  .steps{ grid-template-columns:1fr; }
  .hl__gal{ grid-template-columns:1fr 1fr; }
  .btn--lg{ width:100%; }
  .hero__btns{ flex-direction:column; align-items:stretch; }
  .lb__nav{ width:42px; height:42px; }
  .lb__nav--prev{ left:8px; } .lb__nav--next{ right:8px; }
  .bapair__cap{ padding:16px 18px 18px; font-size:14.5px; }
}