/* Звук на Волге — фирменный слой поверх сборки сайта.
   Брендбук 1.0: белый ≈70%, глубокий синий #142B49 ≈25%, красный #C92536 ≈5%. Шрифт — Onest. */

:root{
  color-scheme: light;
  --navy: #142B49; --navy-2: #0E1F36; --navy-3: #1D3A61; --red: #C92536; --red-2: #A81D2D;
  --bg: #FFFFFF; --bg-2: #F3F5F8; --paper: #F4F6F9;
  --ink: #142B49; --ink-2: #4B5C74; --ink-3: #7A889B;
  --hairline: #E2E7EE; --hairline-strong: #CAD3DE;
  --accent: #C92536; --accent-ink: #C92536; --on-accent: #fff;
  --glow: rgba(201, 37, 54, .35);
  --dark: #142B49; --dark-ink: #FFFFFF; --dark-ink-2: #B7C3D4; --dark-hairline: #2A4467;
  --focus: #C92536;
  --font-mono: var(--font-sans);
  --tracking-mono: 0;
  --shadow-sm: 0 1px 2px rgba(20, 43, 73, .08);
  --shadow-card: 0 1px 0 rgba(20, 43, 73, .04), 0 22px 44px -28px rgba(20, 43, 73, .35);
  --zv-ease: cubic-bezier(.22, .61, .36, 1);
  --zv-spring: cubic-bezier(.34, 1.56, .64, 1);
}
html[data-zv] body{ background: var(--bg); color: var(--ink); }
::selection{ background: rgba(201, 37, 54, .18); color: var(--navy); }

/* моноширинные подписи → спокойный Onest, обычный регистр */
html[data-zv] .mono{ font-family: var(--font-sans); letter-spacing: 0; font-feature-settings: "tnum" 1; }
.hero__eyebrow, .brands__h, .ftr__h, .mm__group, .cc__badge, .rev__topic{ text-transform: none !important; letter-spacing: 0 !important; }

/* ── логотип ─────────────────────────────────────────────────────────── */
.zvl{ display: inline-block; line-height: 0; }
.zvl svg, .zvl__img{ display: block; height: 100%; width: auto; overflow: visible; }
.hdr .logo .zvl{ height: 58px; }
.hdr__inner{ min-height: 82px !important; }
.ftr .logo .zvl{ height: 92px; }
.zvl--ftr{ height: 92px; }
@media (max-width: 1100px){ .hdr .logo .zvl{ height: 50px; } .hdr__inner{ min-height: 72px !important; } }
@media (max-width: 640px){ .hdr .logo .zvl{ height: 44px; } .hdr__inner{ min-height: 64px !important; } }

/* анимация знака: волна прорисовывается, точка падает с отскоком, храмы поднимаются, буквы выезжают */
.zvl-a .zvl-wavegrp{ clip-path: inset(0 100% 0 0); }
.zvl-a .zvl-dot{ transform: translateY(-260px) scale(.6); opacity: 0; }
.zvl-a .zvl-church, .zvl-a .zvl-dome{ transform: translateY(70px); opacity: 0; }
.zvl-a .zvl-letter{ transform: translateY(46px); opacity: 0; }
.zvl-a .zvl-ring{ opacity: 0; }
.zvl-wave, .zvl-stripe, .zvl-dot, .zvl-church, .zvl-dome, .zvl-letter, .zvl-ring{ transform-box: fill-box; transform-origin: 50% 100%; }
.zvl-dot{ transform-origin: 50% 50%; }
.zvl-ring{ transform-origin: 50% 50%; }

.zvl-play .zvl-wavegrp{ animation: zvl-draw 1.05s cubic-bezier(.45,.05,.25,1) forwards; }
.zvl-play .zvl-dot{ animation: zvl-drop .72s var(--zv-spring) .62s forwards; }
.zvl-play .zvl-church{ animation: zvl-rise .6s var(--zv-ease) forwards; animation-delay: calc(.8s + var(--i, 0) * .07s); }
.zvl-play .zvl-dome{ animation: zvl-rise .55s var(--zv-spring) 1.12s forwards; }
.zvl-play .zvl-letter{ animation: zvl-rise .5s var(--zv-ease) forwards; animation-delay: calc(.95s + var(--i, 0) * .04s); }
.zvl-play .zvl-ring{ animation: zvl-ring 1.1s var(--zv-ease) 1.2s; }
@keyframes zvl-draw{ to{ clip-path: inset(0 0 0 0); } }
@keyframes zvl-drop{ 0%{ transform: translateY(-260px) scale(.6); opacity: 0; } 35%{ opacity: 1; } 100%{ transform: none; opacity: 1; } }
@keyframes zvl-rise{ to{ transform: none; opacity: 1; } }
@keyframes zvl-ring{ 0%{ opacity: .9; transform: scale(.6); } 100%{ opacity: 0; transform: scale(3.4); } }

/* «бит»: точка пульсирует, волна чуть подпрыгивает, от точки расходится кольцо */
.zvl-beat .zvl-dot{ animation: zvl-pulse .62s var(--zv-ease); }
.zvl-beat .zvl-wavegrp{ animation: zvl-bounce .62s var(--zv-ease); }
.zvl-beat .zvl-ring{ animation: zvl-ring 1.1s var(--zv-ease); }
@keyframes zvl-pulse{ 0%{ transform: scale(1); } 22%{ transform: scale(1.32); } 55%{ transform: scale(.94); } 100%{ transform: scale(1); } }
@keyframes zvl-bounce{ 0%{ transform: scaleY(1); } 22%{ transform: scaleY(1.07); } 55%{ transform: scaleY(.985); } 100%{ transform: scaleY(1); } }
.zvl-wavegrp{ transform-box: fill-box; transform-origin: 50% 100%; }

/* ── шапка ───────────────────────────────────────────────────────────── */
.hdr:before{ background: color-mix(in srgb, #fff 90%, transparent) !important; }
.hdr{ border-bottom-color: var(--hairline) !important; transition: box-shadow .25s var(--zv-ease); }
.hdr.zv-scrolled{ box-shadow: 0 10px 30px -22px rgba(20, 43, 73, .45); }
.nav-link{ position: relative; color: var(--navy); font-weight: 500; }
.nav-link::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--zv-ease); }
.nav-link:hover::after, .nav-item:hover > .nav-link::after{ transform: scaleX(1); }
.hdr__cta{ position: relative; overflow: hidden; }
.dropdown{ box-shadow: 0 30px 60px -30px rgba(20, 43, 73, .4) !important; }

/* ── первый экран ────────────────────────────────────────────────────── */
.hero{ position: relative; overflow: hidden; border-bottom: 0 !important; padding-bottom: clamp(5rem, 3rem + 6vw, 8rem) !important; }
.hero__inner{ position: relative; z-index: 2; }
.hero__eyebrow{ display: inline-flex; align-items: center; gap: .55rem; color: var(--navy) !important; font-weight: 500; font-size: var(--step-0) !important; }
.hero__eyebrow::before{ content: ""; width: .62em; height: .62em; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(201, 37, 54, .5); animation: zv-dot 2.4s var(--zv-ease) infinite; }
@keyframes zv-dot{ 0%{ box-shadow: 0 0 0 0 rgba(201, 37, 54, .45); } 70%{ box-shadow: 0 0 0 .7em rgba(201, 37, 54, 0); } 100%{ box-shadow: 0 0 0 0 rgba(201, 37, 54, 0); } }
.hero__title{ color: var(--navy); font-weight: 600; }
.hero__title .zv-brand{ color: var(--navy); }
.hero__sub{ color: var(--navy); }
.hero__plate{ border: 0 !important; background: var(--navy) !important; border-radius: 22px !important; box-shadow: 0 40px 80px -40px rgba(20, 43, 73, .55) !important; }
.hero__plate::after{ background: linear-gradient(180deg, rgba(20, 43, 73, 0) 40%, rgba(20, 43, 73, .55)) !important; }
.hero__media{ filter: none !important; }
.hero__corner{ display: none !important; }
.hero__caption a{ color: var(--red) !important; }

/* фирменная волна внизу первого экрана */
.zv-hero-wave{ position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(70px, 9vw, 150px); z-index: 1; pointer-events: none; }
.zv-hero-wave path{ vector-effect: non-scaling-stroke; }

/* ── кнопки ──────────────────────────────────────────────────────────── */
.btn--primary, .hdr__cta, .mcta__main, .mm__cta{ background: var(--red) !important; color: #fff !important; }
.btn--primary{ position: relative; overflow: hidden; box-shadow: 0 14px 30px -16px rgba(201, 37, 54, .7) !important; }
.btn--primary:hover, .hdr__cta:hover{ background: var(--red-2) !important; transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(201, 37, 54, .75) !important; }
.btn--ghost{ color: var(--navy) !important; border-color: var(--hairline-strong) !important; background: #fff !important; }
.btn--ghost:hover{ border-color: var(--navy) !important; background: var(--navy) !important; color: #fff !important; }
.zv-wave-btn{ position: absolute; border-radius: 50%; pointer-events: none; border: 2px solid rgba(255, 255, 255, .7); transform: translate(-50%, -50%) scale(0); animation: zv-wave-btn .8s var(--zv-ease) forwards; }
@keyframes zv-wave-btn{ to{ transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* ── полоса доверия ──────────────────────────────────────────────────── */
.rb{ background: var(--bg) !important; border-bottom: 1px solid var(--hairline); position: relative; z-index: 3; }
.rb__icon{ color: var(--red) !important; }
.rb__t{ color: var(--navy); }

/* ── секции ──────────────────────────────────────────────────────────── */
.section--paper{ background: var(--paper) !important; }
.section--dark{ background: var(--navy) !important; position: relative; }
.section--dark .section__title, .section--dark h2, .section--dark h3{ color: #fff; }
.section--dark::before, .ftr::before{ content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 46px; pointer-events: none;
  background: var(--zv-edge-bg, #fff);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v8c-120 22-260 34-420 24S760 2 600 4 300 34 160 36 40 26 0 18z'/%3E%3C/svg%3E") top/100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v8c-120 22-260 34-420 24S760 2 600 4 300 34 160 36 40 26 0 18z'/%3E%3C/svg%3E") top/100% 100% no-repeat; }
.section__title{ color: var(--navy); font-weight: 600; text-wrap: balance; }
.section__lead{ color: var(--ink-2); text-wrap: pretty; }
.section--dark .section__lead{ color: var(--dark-ink-2) !important; }
p, li{ text-wrap: pretty; }
h1, h2, h3{ text-wrap: balance; }

/* карточки */
[class*="card"], .cc, .rev__card{ border-color: var(--hairline) !important; }
.section--light [class*="__card"], .section--paper [class*="__card"]{ background: #fff; box-shadow: var(--shadow-card); }
.cc__badge{ background: rgba(20, 43, 73, .72) !important; border-color: rgba(255, 255, 255, .22) !important; font-size: .68rem !important; font-weight: 600; }

/* бренды */
.brands{ background: #fff !important; }
.brands__item img{ filter: brightness(0) !important; opacity: .42 !important; }
.brands__item img:hover{ opacity: .9 !important; }
.brands__h{ color: var(--ink-2) !important; font-size: var(--step-0) !important; font-weight: 500; }

/* отзывы */
.rev__topic{ color: var(--red) !important; font-weight: 600; font-size: .8rem !important; }
.rev__quote{ color: var(--red) !important; }
.rev__author{ color: var(--ink-3) !important; }

/* форма */
input, select, textarea{ background: #fff !important; color: var(--navy) !important; border-color: var(--hairline-strong) !important; }
input:focus, select:focus, textarea:focus{ border-color: var(--navy) !important; box-shadow: 0 0 0 3px rgba(20, 43, 73, .12) !important; outline: none; }
input::placeholder, textarea::placeholder{ color: var(--ink-3) !important; }

/* подвал */
.ftr{ background: var(--navy) !important; position: relative; }
.ftr a:hover{ color: #fff !important; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
.ftr__bottom{ border-top-color: var(--dark-hairline) !important; }
.ftr__h{ color: var(--dark-ink-2) !important; font-size: var(--step-0) !important; }

/* нижняя панель на телефоне */
.mcta{ background: rgba(255, 255, 255, .94) !important; border-top: 1px solid var(--hairline) !important; }
.mcta__call{ color: var(--navy) !important; }

/* ── появление при прокрутке ─────────────────────────────────────────── */
html.zv-motion [data-zv-rv]{ opacity: 0; transform: translateY(26px); transition: opacity .7s var(--zv-ease), transform .7s var(--zv-ease); transition-delay: calc(var(--zv-d, 0) * 70ms); }
html.zv-motion [data-zv-rv].zv-in{ opacity: 1; transform: none; }
.zv-title-line{ display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }   /* строка заголовка — своя маска */
html.zv-motion .zv-title-line > span{ display: inline-block; transform: translateY(105%); transition: transform .9s var(--zv-ease); transition-delay: calc(.15s + var(--zv-d, 0) * 90ms); }
html.zv-motion .zv-in .zv-title-line > span, html.zv-motion .zv-title-line.zv-in > span{ transform: none; }
.zv-tilt{ transition: transform .35s var(--zv-ease), box-shadow .35s var(--zv-ease); will-change: transform; }

/* подчёркивание заголовков секций — короткая «звуковая» волна */
.zv-squiggle{ display: block; width: 64px; height: 12px; margin-top: .9rem; overflow: visible; }
.zv-squiggle path{ stroke-dasharray: 90; stroke-dashoffset: 90; transition: stroke-dashoffset 1s var(--zv-ease) .25s; }
.zv-in .zv-squiggle path, .zv-squiggle.zv-in path{ stroke-dashoffset: 0; }
html:not(.zv-motion) .zv-squiggle path{ stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce){
  .zvl-a .zvl-wavegrp, .zvl-a .zvl-dot, .zvl-a .zvl-church, .zvl-a .zvl-dome, .zvl-a .zvl-letter{ clip-path: none; transform: none; opacity: 1; }
  .hero__eyebrow::before{ animation: none; }
}

/* ── правки после первого просмотра ─────────────────────────────────── */
html[data-zv] .mono{ text-transform: none !important; }
.pos__esc-h{ color: var(--red) !important; font-weight: 600; font-size: var(--step-0) !important; }
/* фото-карточки услуг: текст на синей вуали — белый */
.svc__card, .svc__card .svc__t, .svc__card .svc__d{ color: #fff !important; }
.svc__card .svc__d{ color: rgba(255, 255, 255, .86) !important; }
.svc__card .svc__link{ color: #fff !important; font-weight: 600; }
.svc__card .svc__link svg{ color: var(--red); }
.svc__card .svc__icon{ align-self: flex-start; width: 44px; height: 44px; align-items: center; justify-content: center; color: #fff !important; background: var(--red); border-radius: 12px; filter: none !important; box-shadow: 0 10px 22px -12px rgba(201,37,54,.9); }
/* причины доверия: вместо номеров — красная точка из знака */
.trust__num{ font-size: 0 !important; width: 14px; flex: 0 0 14px; }
.trust__num::before{ content: ""; display: block; width: 14px; height: 14px; margin-top: .5rem; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(201, 37, 54, .18); }
.trust__item{ border-color: var(--dark-hairline) !important; }
/* шаги: номер — синим, полоска сверху — красная */
.proc__num{ color: var(--navy) !important; font-weight: 600; font-size: var(--step-2) !important; }
/* плашка на карточках работ — в правый верхний угол, не налезает на название */
.cc__badge{ left: auto !important; right: .7rem !important; }
.hdr .logo .zvl{ height: 62px; }
@media (max-width: 1100px){ .hdr .logo .zvl{ height: 54px; } }
@media (max-width: 640px){ .hdr .logo .zvl{ height: 48px; } }

/* страницы услуг: первый экран на фото под синей вуалью */
.shero{ border-bottom: 0 !important; }
.shero::after{ background-image: linear-gradient(90deg, rgba(20,43,73,.95), rgba(20,43,73,.86) 42%, rgba(20,43,73,.55)), var(--shero-img) !important; }
@media (max-width: 900px){ .shero::after{ background-image: linear-gradient(180deg, rgba(20,43,73,.9), rgba(20,43,73,.93)), var(--shero-img) !important; } }
.shero, .shero__h1{ color: #fff !important; }
.shero__lead{ color: rgba(255,255,255,.84) !important; }
.shero .crumbs, .shero .crumbs a{ color: rgba(255,255,255,.62) !important; }
.shero .crumbs__cur{ color: #fff !important; }
.shero .btn--ghost{ background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.45) !important; }
.shero .btn--ghost:hover{ background: #fff !important; color: var(--navy) !important; }
.shero__case{ color: #fff !important; text-decoration-color: var(--red) !important; }

/* первый экран любой страницы — с фирменной волной снизу */
.zv-has-wave{ position: relative; overflow: hidden; border-bottom: 0 !important; padding-bottom: calc(var(--zv-pb, 3rem) + clamp(60px, 8vw, 130px)) !important; }
.zv-has-wave > .container{ position: relative; z-index: 2; }

/* номера пунктов (кроме шагов процесса) — красные точки из знака */
.zv-dotnum{ font-size: 0 !important; width: 14px; flex: 0 0 14px; color: transparent !important; }
.zv-dotnum::before{ content: ""; display: block; width: 12px; height: 12px; margin-top: .55rem; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(201,37,54,.14); }
.sbtn--primary{ background: var(--red) !important; color: #fff !important; box-shadow: 0 14px 30px -16px rgba(201,37,54,.7) !important; }
.sbtn--primary:hover{ background: var(--red-2) !important; }
.sbtn--ghost{ color: var(--navy) !important; border-color: var(--hairline-strong) !important; }
.shero .sbtn--ghost{ color: #fff !important; background: transparent !important; border-color: rgba(255,255,255,.45) !important; }
.shero .sbtn--ghost:hover{ background: #fff !important; color: var(--navy) !important; }
.svc__card .svc__icon svg, .svc__card .svc__icon svg *{ color: #fff !important; stroke: #fff; }

/* лесенка: короткие подписи и заголовки карточек — ровные строки (balance, до шести строк);
   абзацы и вводки — pretty: браузер не оставляет одно слово в последней строке */
.cc__car, .cc__task, .bcard__title, .pl__name, .rb__t, .rb__d, .proc__t, .trust__t, .svc__t, .esc__label, .lf__title,
.dropdown__title, .rev__topic, .faq summary, figcaption, dd, .hero__sub{ text-wrap: balance; }
.section__lead, .hero__lead, .shero__lead, .phero__lead, .ahero__lead, .hero__note, .hub__d, .cc__details, .bcard__lead, .steps__d,
.sproc__d, .proc__d, .trust__d, .svc__d, .pf__d, .avoid__d, .adv__d, .choose__d, .two__lead, .pos__esc-note, .ptext__item,
.rev__text, .ftr__about, .dropdown__desc, .ptext p{ text-wrap: pretty; }

/* карточки работ: подпись наверху и шире (была зажата в 46% рядом с машиной), плашка — вниз слева */
.cc__label{ top: 0 !important; bottom: auto !important; max-width: 68% !important; padding: .95rem 1.05rem !important; }
.cc__plate::after{ background: linear-gradient(180deg, rgba(14,31,54,.9) 0%, rgba(20,43,73,.6) 30%, rgba(20,43,73,.08) 58%, rgba(20,43,73,.3) 100%) !important; }
.cc__badge{ top: auto !important; bottom: .7rem !important; left: .7rem !important; right: auto !important; }
.cc__car{ text-wrap: balance; }
.pl__note{ display: block; margin-top: .2rem; line-height: 1.35; }
/* заголовок первого экрана: кегль, при котором «автозвук и комфорт» помещается одной строкой — ровная лесенка */
.hero__title{ font-size: clamp(2rem, 1.15rem + 2.7vw, 3.4rem) !important; }

/* цены на страницах услуг (под первым экраном) */
.zv-prices .section__head{ margin-bottom: 1.5rem; }
.zv-pl{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); column-gap: 3rem; background: #fff; border-radius: 18px; padding: .5rem 1.5rem; box-shadow: var(--shadow-card); }
.zv-pl__row{ display: flex; align-items: baseline; gap: .75rem; padding: .9rem 0; border-bottom: 1px solid var(--hairline); }
.zv-pl__name{ color: var(--navy); font-size: var(--step-0); line-height: 1.35; text-wrap: balance; }
.zv-pl__dots{ flex: 1; min-width: 1.5rem; border-bottom: 1px dotted var(--hairline-strong); transform: translateY(-.3em); }
.zv-pl__price{ color: var(--navy); font-weight: 700; font-size: var(--step-1); white-space: nowrap; }
.zv-pl__more{ margin-top: 1rem; }
.zv-pl__more a{ color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.zv-seller{ width: 100%; opacity: .85; }
@media (max-width: 640px){ .zv-pl{ padding: .25rem 1rem; } .zv-pl__price{ font-size: var(--step-0); } }