/* =====================================================================================================
   Редизайн «v2 + старый autoclub8.ru и лендинг» (10.11.2026) — слой поверх site.css, ~40% вида заново.
   Логика, блоки и разметка — site-v2 (разметка не меняется, кроме иконок/логотипов — inc/skin.php).
   Источники вида: старый сайт (Web Archive) и лендинг — фирменные #1D886E / #171F2B, Fira Sans,
   зелёная полоса меню, тёмный первый экран с белой карточкой записи, заголовки по центру прописными,
   иконки в белых кругах «над» карточками, почти квадратные карточки с тенью, тёмно-синие подвал и верхняя полоса.
   Отключить: inc/skin.php → AC8_SKIN = false.
   ===================================================================================================== */
:root{
  --brand:#1D886E;--brand-d:#166B57;--brand-soft:#D5E7E3;--brand-2:#4CC9A4;
  --ink:#171F2B;--ink-2:#3A4250;--muted:#69717E;--navy:#171F2B;--navy-2:#202A38;
  --bg:#FAFAFA;--bg-2:#F0F3F2;--soft:#F0F3F2;--line:#E3E7E6;--card-line:#E7EAE9;
  --r-s:4px;--r:6px;--r-l:8px;
  --shadow-old:0 0 14px 2px rgba(0,0,0,.07);
  --b:"Fira Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
html{scroll-padding-top:150px}
body{font-size:16.5px;background:var(--bg)}
h1,h2,h3{color:var(--ink)}

/* ================= Верхняя полоса и шапка ================= */
.topbar{background:var(--navy);color:#AEB6C2;border-bottom:0}
.topbar a{color:#D9DEE5}.topbar a:hover{color:#fff}
.site-header{background:#fff;backdrop-filter:none}
@media (min-width:1025px){
  .masthead{flex-wrap:wrap;row-gap:0;min-height:0;padding-top:10px}
  .masthead > .brand,.masthead > .header-contact{min-height:66px}
  .header-contact{margin-left:auto}
  /* меню — зелёная полоса во всю ширину (фон — подложка ::before, без обрезки: выпадающие панели видны) */
  .main-nav{order:10;flex:0 0 100%;margin:10px 0 0;padding:0;gap:0;position:relative;z-index:1}
  .main-nav::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--brand);z-index:-1}
  .main-nav > a,.main-nav .nav-drop__btn{color:#fff;font-weight:500;padding:16px 20px;border-radius:0}
  .main-nav > a:hover,.main-nav > a.is-current,.main-nav .nav-drop__btn:hover,.main-nav .nav-drop__btn.is-current,.main-nav .nav-drop:hover > .nav-drop__btn,.main-nav .nav-drop.is-open > .nav-drop__btn{background:var(--brand-d);color:#fff}
  .main-nav a.is-accent{background:#fff;color:var(--brand);border-radius:999px;padding:9px 18px;margin:7px 0 7px 8px}
  .main-nav .nav-list a,.main-nav .nav-list a:hover{color:var(--ink);border-radius:var(--r-s)}
  .nav-panel{left:0;margin-top:0;border:0;border-radius:0 0 var(--r-l) var(--r-l);box-shadow:0 24px 48px rgba(16,18,22,.18)}
  .nav-list{margin-top:0;border-radius:0 0 var(--r-l) var(--r-l)}
  .nav-panel__grid a{border-radius:var(--r-s)}
  .site-header{border-bottom:0}
}
@media (max-width:1024px){.site-header{border-bottom:3px solid var(--brand)}}

/* ================= Типографика разделов: по центру, прописными (как «АКЦИИ», «НАШИ УСЛУГИ») ================= */
main .section h2:not(.prose h2):not(.prose *){text-transform:uppercase;font-weight:800;letter-spacing:0;font-size:clamp(24px,2.9vw,38px);line-height:1.15}
.cta-band h2{font-size:clamp(24px,2.6vw,34px)!important}
.eyebrow{text-transform:none;letter-spacing:0;font:500 15px/1.2 var(--b)}
.eyebrow::before{display:none}
.section-head{flex-direction:column;align-items:center;text-align:center;gap:14px}
.section-head > div:first-child{max-width:860px;display:flex;flex-direction:column;align-items:center}
.section-head .lead{max-width:720px}
.section-head .link-arrow{color:var(--brand)}
.section + .section{border-top:0}
.section--tint{background:#fff}

/* ================= Кнопки ================= */
.btn{font-weight:600}
.btn--ghost{border-color:var(--brand);color:var(--brand)}
.btn--ghost:hover{background:var(--brand);border-color:var(--brand);color:#fff}

/* ================= Первый экран главной и услуг — тёмный, во всю ширину (как у старого сайта) ================= */
.hero--blur{background:var(--navy);color:#fff}
.hero--blur .hero__veil{backdrop-filter:none;-webkit-backdrop-filter:none;
  background:linear-gradient(90deg,rgba(15,21,30,.94) 0%,rgba(15,21,30,.82) 42%,rgba(15,21,30,.35) 75%,rgba(15,21,30,.15) 100%)}
.hero--blur .hero__fade{background:linear-gradient(0deg,rgba(15,21,30,.9),rgba(15,21,30,0));height:160px}
.hero--blur h1,.hero--blur .hero__alt a{color:#fff}
.hero--blur h1 em,.hero--blur .eyebrow{color:var(--brand-2)}
.hero--blur .hero__lead,.hero--blur .lead,.hero--blur .hero__alt{color:rgba(255,255,255,.82)}
.hero--blur .breadcrumbs,.hero--blur .breadcrumbs a{color:rgba(255,255,255,.7)}
.hero--blur .breadcrumbs a:hover{color:#fff}
.hero--blur .hero-form{background:#fff;border:0;border-radius:var(--r-l);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.hero--blur .price-tag,.hero--blur .price-tag b{color:#fff}
.hero--blur .price-tag span,.hero--blur .price-tag small{color:rgba(255,255,255,.75)}
.hero--blur .offer-points,.hero--blur .offer-points li{color:rgba(255,255,255,.85)}
.hero--blur .offer-points .ico{color:var(--brand-2)}
.hero--blur .btn--ghost{background:transparent!important;border-color:#fff;color:#fff}   /* у кнопки телефона в разметке инлайн-фон (как у эталона) */
.hero--blur .btn--ghost:hover{background:#fff;color:var(--ink)}
.hero--blur .msg{background:rgba(255,255,255,.12)}
/* цифры — крупные, без рамок, с зелёной чертой (как «10 лет · 132 тысячи · 180 дней») */
.hero--blur .kpi{background:transparent!important;border:0;border-left:3px solid var(--brand-2);border-radius:0;box-shadow:none;padding:4px 0 4px 18px}
.hero--blur .kpi strong{color:#fff;font-size:clamp(26px,2.6vw,36px)}
.hero--blur .kpi strong em{color:var(--brand-2)}
.hero--blur .kpi span{color:rgba(255,255,255,.7)}
@media (max-width:900px){
  .hero__mobile-img::after{background:linear-gradient(0deg,var(--navy) 8%,rgba(23,31,43,0))}
}

/* простые страницы (контакты, о компании, блог): тёмная полоса заголовка */
.page-hero{background:var(--navy);color:#fff;border-bottom:4px solid var(--brand)}
.page-hero h1{color:#fff}
.page-hero .lead,.page-hero p{color:rgba(255,255,255,.8)}
.page-hero .breadcrumbs,.page-hero .breadcrumbs a{color:rgba(255,255,255,.65)}
.page-hero .eyebrow{color:var(--brand-2)}
.page-hero .btn--ghost{border-color:#fff;color:#fff}

/* ================= Карточки: почти квадратные, белые, с мягкой тенью ================= */
.tile,.svc-card,.card,.review,.offer,.step,.faq details,.post-grid .svc-card{border-color:transparent;box-shadow:var(--shadow-old);background:#fff}
.tile:hover,.svc-card:hover{border-color:transparent;box-shadow:0 8px 28px rgba(29,136,110,.22)}
.svc-card__body strong,.tile:not(.tile--accent) strong{color:var(--ink)}
/* зелёная плитка «все» и тёмная акция — свой фон сохраняют */
.tile.tile--accent{background:var(--brand);color:#fff}
.tile.tile--accent:hover{background:var(--brand-d);color:#fff}
.offer.offer--dark{background:var(--navy)}

/* обещания: иконка в белом круге «над» карточкой, текст по центру */
.cards-4{padding-top:34px;row-gap:50px}
.card{position:relative;text-align:center;padding-top:52px}
.card__ico{position:absolute;top:-34px;left:50%;transform:translateX(-50%);width:68px;height:68px;margin:0;border-radius:50%;background:#fff;box-shadow:var(--shadow-old)}
.card__ico .ico{width:30px;height:30px}

/* шаги: крупный зелёный номер в круге */
.step::before{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--brand);color:#fff;font-size:18px;margin-bottom:18px}

/* ================= Плитки услуг — как на старом сайте: иконка в круге над карточкой, текст по центру ================= */
.tile-grid:has(.tile__media--icon){padding-top:34px;row-gap:50px}
.tile--media:has(.tile__media--icon){position:relative;align-items:center;text-align:center;justify-content:flex-start;gap:6px;padding:48px 14px 18px}
.tile--media:has(.tile__media--icon) > .ico{display:none}
.tile__media{display:flex;align-items:center;justify-content:center;flex:none;width:68px;height:68px;border-radius:50%;background:#fff;box-shadow:var(--shadow-old)}
.tile__media--icon{position:absolute;top:-34px;left:50%;transform:translateX(-50%)}
.tile__media img{width:40px;height:40px;object-fit:contain}
.tile--media small{margin-top:auto}
/* марки — логотип по центру, как сетка марок лендинга */
.tile--media:has(.tile__media--logo){align-items:center;text-align:center;gap:8px;padding:20px 14px 16px}
.tile--media:has(.tile__media--logo) > .ico{display:none}
.tile__media--logo{width:auto;height:50px;border-radius:0;background:none;box-shadow:none}
.tile__media--logo img{width:auto;height:46px;max-width:130px}
.tile__media--text{font:800 19px/1 var(--h);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.tile--accent{justify-content:center;text-align:center;align-items:center}
@media (max-width:720px){
  .tile-grid:has(.tile__media--icon){padding-top:28px;row-gap:40px}
  .tile__media{width:56px;height:56px}
  .tile__media--icon{top:-28px}
  .tile__media img{width:32px;height:32px}
  .tile--media:has(.tile__media--icon){padding-top:38px}
  .tile__media--logo{height:38px}
  .tile__media--logo img{height:34px;max-width:100px}
  .cards-4{row-gap:46px}
}

/* фото-карточки услуг: значок раздела в белом круге на краю фото */
.svc-card__badge{position:relative;z-index:1;align-self:flex-start;display:flex;align-items:center;justify-content:center;
  width:62px;height:62px;margin:-31px 0 -14px 16px;border-radius:50%;background:#fff;box-shadow:var(--shadow-old)}
.svc-card__badge-in{display:flex}
.svc-card__badge img{width:38px;height:38px;object-fit:contain}
@media (max-width:720px){
  .svc-card__badge{width:52px;height:52px;margin:-26px 0 -12px 12px}
  .svc-card__badge img{width:32px;height:32px}
}

/* ================= Акции: заголовки прописными, как у старого сайта ================= */
.offer h3{text-transform:uppercase;letter-spacing:0}
.offer__tag{border-radius:var(--r-s)}

/* ================= Баннер «Скидка» — как акция старого сайта: тёмное фото двигателя, «10» и «%» в белом круге ================= */
.cta-band{background:var(--navy);border-radius:var(--r-l);border-top:5px solid var(--brand);box-shadow:0 18px 50px rgba(23,31,43,.25);
  padding:clamp(28px,4.2vw,60px);gap:clamp(24px,4vw,56px)}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--cta-photo,none) right center/cover no-repeat}
.cta-band::after{inset:0;right:0;top:0;width:auto;height:auto;border-radius:0;z-index:-1;
  background:linear-gradient(90deg,rgba(15,21,30,.96) 0%,rgba(15,21,30,.88) 45%,rgba(15,21,30,.55) 100%)}
.cta-band__big{display:flex;align-items:flex-start;gap:10px;font-size:clamp(72px,9vw,128px);line-height:.85;color:#fff;margin-bottom:18px}
.cta-band__pct{display:grid;place-items:center;flex:none;font-size:.32em;width:1.45em;height:1.45em;margin-top:.55em;border-radius:50%;background:#fff;color:var(--ink);line-height:1;letter-spacing:0;font-weight:800}
.cta-band h2{color:#fff}
.cta-band .lead{color:rgba(255,255,255,.82);max-width:560px}
.cta-band__contacts{color:rgba(255,255,255,.7)}
.cta-band__contacts a{color:var(--brand-2)}
.cta-band .msg--label{background:transparent;border:1.5px solid rgba(255,255,255,.55)!important;color:#fff}
.cta-band .msg--label:hover{background:#fff;color:var(--ink)}
/* форма — белая карточка с тенью; поля в столбик, кнопка во всю ширину */
.cta-band .form{position:relative;padding:28px 26px 22px;border-radius:var(--r-l);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.cta-band .form::before{content:"";position:absolute;left:26px;right:26px;top:0;height:4px;border-radius:0 0 4px 4px;background:var(--brand)}
.cta-band .form .form__fields{grid-template-columns:1fr}
.cta-band .form button[type=submit]{width:100%}
@media (max-width:720px){
  .cta-band{padding:28px 20px}
  .cta-band::after{background:linear-gradient(180deg,rgba(15,21,30,.9),rgba(15,21,30,.96))}
  .cta-band .form{padding:24px 16px 18px}
}

/* ================= Частые вопросы: белые строки, зелёный «+» ================= */
.faq summary::after{background:var(--brand-soft);color:var(--brand)}
.faq details[open] summary::after{background:var(--brand);color:#fff}

/* ================= Карта: зелёная карточка контактов ================= */
.map-card{background:var(--brand);color:#fff;border:0}
.map-card__row > .ico{color:#fff}
.map-card__row b,.map-card__phone{color:#fff}
.map-card__row span,.map-card__row a.sub{color:rgba(255,255,255,.8)}
.map-card .btn--primary{background:#fff;color:var(--brand)}
.map-card .btn--primary:hover{background:var(--brand-soft);color:var(--brand-d)}
.map-card .btn--ghost{border-color:#fff;color:#fff}
.map-card .btn--ghost:hover{background:#fff;color:var(--brand)}
.map-frame{border:0;box-shadow:var(--shadow-old)}

/* ================= Подвал — тёмно-синий ================= */
.site-footer{background:var(--navy);color:#C4CAD3;border-top:4px solid var(--brand)}
.site-footer h2,.footer-tag,.footer-phone{color:#fff!important}
.site-footer a{color:#C4CAD3}
.site-footer a:hover{color:#fff}
.footer-brand img{box-sizing:content-box;padding:10px 14px;border-radius:var(--r);background:#fff}
.footer-bottom{border-top-color:rgba(255,255,255,.12);color:#8C95A3}
.footer-bottom a{color:#8C95A3}
.site-footer .msg{background:rgba(255,255,255,.08)}