/* ОйлПак — лендинг v5: масла и фильтры + подбор запчастей.
   Айдентика: амбер #F4AC24 / графит #0E1013 / сталь #5E6670 / светлый #ECEEF1 */
:root{
  --amber:#F4AC24;
  --amber-hi:#FFC24D;      /* hover-подсветка кнопки */
  --amber-soft:rgba(244,172,36,.12);
  --amber-ink:#8A5A0B;     /* «янтарный» ТЕКСТ на светлом фоне: контраст 5.4:1 (яркий амбер на белом — 1.95:1, не читается) */
  --graphite:#0E1013;
  --graphite-2:#181B20;
  --steel:#5E6670;
  --ink:#14171C;           /* основной текст */
  --muted:#5E6670;         /* вспомогательный текст */
  --bg:#F4F5F7;
  --card:#FFFFFF;
  --line:#E4E7EC;
  --on-amber:#231A05;      /* текст на амбере */
  --on-dark:#ECEEF1;       /* текст на графите */
  --r:16px;
  --shadow:0 18px 50px -22px rgba(14,16,19,.35);
  --wrap:1120px;
  --head-h:68px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  line-height:1.55;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.section{padding:72px 0}
section[id]{scroll-margin-top:calc(var(--head-h) + 8px)}
h1,h2,h3{line-height:1.1;margin:0 0 .4em;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(30px,5vw,54px)}
h2{font-size:clamp(26px,3.4vw,40px)}
h3{font-size:20px;letter-spacing:-.01em}
p{margin:0 0 1em}
.lead{font-size:clamp(17px,2vw,20px);color:var(--muted)}
.eyebrow{display:inline-block;font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber-ink);margin-bottom:14px}
.center{text-align:center}
.muted{color:var(--muted)}
.lnk-amber{color:var(--amber-ink);font-weight:700}
a:focus-visible,.btn:focus-visible,summary:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* Кнопки */
.btn{display:inline-flex;align-items:center;gap:10px;justify-content:center;
  font-weight:800;font-size:17px;padding:16px 26px;border-radius:999px;
  border:0;cursor:pointer;text-decoration:none;transition:transform .12s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
  min-height:54px;line-height:1.1;text-align:center}
.btn-amber{background:var(--amber);color:var(--on-amber);box-shadow:0 12px 30px -10px rgba(244,172,36,.65)}
.btn-amber:hover{background:var(--amber-hi);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--line)}
.btn-ghost:hover{border-color:var(--amber);color:var(--graphite)}
.btn-line{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.28)}
.btn-line:hover{border-color:var(--amber);color:var(--amber)}
.btn-wa{background:#25D366;color:#06331b}
.btn-wa:hover{background:#2ee877;transform:translateY(-2px)}
.btn-dark{background:var(--graphite);color:#fff}
.btn-dark:hover{background:#000;transform:translateY(-2px)}
.btn-lg{font-size:19px;padding:19px 34px}
.btn-block{display:flex;width:100%}

/* Хедер */
.head{position:sticky;top:0;z-index:50;background:rgba(244,245,247,.9);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
.head .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--head-h);gap:16px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:20px;letter-spacing:-.01em;text-decoration:none;color:var(--graphite)}
.brand .wm-2{color:var(--amber)}
.brand svg{width:34px;height:34px;flex:0 0 auto}
.head-nav{display:flex;gap:24px;font-weight:700;font-size:15px}
.head-nav a{text-decoration:none;color:var(--ink);white-space:nowrap}
.head-nav a:hover{color:var(--amber-ink)}
.head-cta{display:flex;align-items:center;gap:20px}
.head-phone{display:flex;flex-direction:column;font-weight:800;font-size:15px;line-height:1.25;
  color:var(--graphite);text-decoration:none;white-space:nowrap}
.head-phone small{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.head-phone:hover{color:var(--amber-ink)}
.head .btn{padding:11px 20px;min-height:44px;font-size:15px}
@media(max-width:1180px){.head-nav{display:none}}
@media(max-width:860px){.head-phone{display:none}}

/* Hero */
.hero{position:relative;overflow:hidden;background:var(--bg)}
.hero-bg{position:absolute;inset:0;background-image:url('../images/hero.jpg');
  background-size:cover;background-position:center right}
.hero-veil{position:absolute;inset:0;background:linear-gradient(90deg,
  rgba(247,248,250,.975) 0%, rgba(247,248,250,.94) 34%, rgba(247,248,250,.76) 56%,
  rgba(247,248,250,.40) 76%, rgba(247,248,250,.12) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:64px;padding-bottom:56px}
.hero-inner{max-width:680px}
/* акцент в заголовке — «маркером»: тёмный текст на янтарной подложке (читается при любом фоне) */
.hero h1 span{color:var(--ink);background:linear-gradient(180deg,transparent 56%,rgba(244,172,36,.62) 56%,rgba(244,172,36,.62) 92%,transparent 92%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em}
.hero .lead{max-width:620px;color:#3F4650}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0 18px}
.hero-note{font-size:14px;color:var(--muted);margin:18px 0 0}

/* Две «двери»: масла / запчасти */
.dirs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px;max-width:1000px}
.dir{display:flex;flex-direction:column;gap:18px;border-radius:20px;padding:24px;box-shadow:var(--shadow)}
.dir-oil{background:#fff;border:1px solid var(--line)}
.dir-parts{background:linear-gradient(180deg,var(--graphite),var(--graphite-2));color:var(--on-dark);border:1px solid #262a31}
.dir-top{display:flex;gap:14px;align-items:flex-start}
.dir-ic{flex:0 0 auto;width:52px;height:52px;border-radius:14px;background:var(--amber-soft);
  display:flex;align-items:center;justify-content:center;font-size:26px}
.dir-parts .dir-ic{background:rgba(244,172,36,.18)}
.dir-top p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.5}
.dir-top .dir-h{font-size:22px;font-weight:800;letter-spacing:-.01em;margin:0 0 4px;line-height:1.2;color:var(--ink)}
.dir-parts .dir-top p{color:#B7BDC5}
.dir-parts .dir-top .dir-h{color:#fff}
.dir-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.dir-cta .btn{padding:14px 20px;min-height:50px;font-size:16px}
.dir-phone{font-weight:800;font-size:15px;text-decoration:none;color:var(--ink)}
.dir-parts .dir-phone{color:#fff}
.dir-phone:hover{color:var(--amber-ink)}
.dir-parts .dir-phone:hover{color:var(--amber)}

/* Полоса доверия */
.trust{background:var(--graphite);color:var(--on-dark)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:34px 20px}
.stat{text-align:center}
.stat b{display:block;font-size:clamp(26px,3vw,36px);font-weight:800;color:var(--amber);line-height:1.05;margin-bottom:6px}
.stat span{font-size:14px;color:#AAB0B8}

/* Сетки и карточки */
.grid{display:grid;gap:22px}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.card .ic{width:48px;height:48px;border-radius:12px;background:var(--amber-soft);
  display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:14px}
.card p{color:var(--muted);margin:0}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:9px 15px;font-weight:700;font-size:14px}

/* Янтарная заливка секции */
.tint-amber{background:linear-gradient(180deg,#FEF6E7 0%,#FBEDD1 100%)}

/* Проблема */
.problem{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pain{display:flex;gap:14px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.pains{max-width:940px;margin:0 auto}
.pain .x{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:#fdeaea;color:#c0392b;
  display:flex;align-items:center;justify-content:center;font-weight:800}

/* Мини-шаги (масла) */
.mini-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.ms{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.7);border:1px solid #F1D9A6;border-radius:14px;padding:14px 16px}
.ms span{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--graphite);color:var(--amber);
  display:flex;align-items:center;justify-content:center;font-weight:800}
.ms p{margin:0;font-size:15px}

/* Механизм «почему дешевле» */
.why{background:linear-gradient(180deg,var(--graphite),var(--graphite-2));color:var(--on-dark)}
.why .eyebrow{color:var(--amber)}
.why h2{color:#fff}
.why .lead{color:#B7BDC5}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.why-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:var(--r);padding:24px}
.why-card .ic{width:48px;height:48px;border-radius:12px;background:rgba(244,172,36,.16);
  display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:14px}
.why-card h3{color:#fff}
.why-card p{color:#AEB4BC;margin:0}
.why-note{margin-top:26px;background:var(--amber-soft);border:1px solid rgba(244,172,36,.4);
  border-radius:var(--r);padding:18px 22px;color:#F4E6C9;font-weight:600}

/* Запчасти */
.parts{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.parts-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:36px;align-items:start;margin-top:40px}
.sub-h{font-size:22px;margin-bottom:16px}
.v{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--amber);color:var(--on-amber);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
.check-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check-list li{display:flex;gap:12px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;font-weight:600;font-size:16px;line-height:1.4}
.origin{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.origin .chip{background:var(--bg)}
.origin-l{font-weight:700;font-size:14px;color:var(--muted);align-self:center;margin-right:2px}
.spec{background:linear-gradient(180deg,var(--graphite),var(--graphite-2));color:var(--on-dark);
  border-radius:22px;padding:28px;box-shadow:var(--shadow);position:sticky;top:calc(var(--head-h) + 20px)}
.spec-top{display:flex;gap:16px;align-items:center}
.ava{flex:0 0 auto;width:72px;height:72px;border-radius:50%;background:var(--amber);color:var(--on-amber);
  font-weight:800;font-size:32px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 6px rgba(244,172,36,.16);overflow:hidden}
.ava img{width:100%;height:100%;object-fit:cover}
.spec-name{font-size:24px;font-weight:800;color:#fff;margin:0;line-height:1.2}
.spec-role{margin:2px 0 0;color:#B7BDC5;font-size:15px}
.spec-phone{display:block;margin:22px 0 6px;font-size:clamp(26px,3vw,32px);font-weight:800;letter-spacing:-.01em;
  color:var(--amber);text-decoration:none;white-space:nowrap}
.spec-note{margin:0 0 18px;color:#AEB4BC;font-size:14.5px;line-height:1.5}
.spec .btn+.btn{margin-top:10px}
.howto{margin-top:64px}
.howto-h{font-size:clamp(22px,2.6vw,30px);margin:0}
.result-note{margin:26px auto 0;max-width:820px;text-align:center;background:var(--amber-soft);
  border:1px solid rgba(244,172,36,.45);border-radius:14px;padding:16px 20px;font-weight:700}
.xsell{margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:linear-gradient(180deg,#FEF6E7,#FBEDD1);border:1px solid #F1D9A6;border-radius:18px;padding:20px 24px}
.xsell p{margin:0;font-size:17px;flex:1 1 380px}
.xsell .btn{flex:0 0 auto}

/* Шаги */
.steps{counter-reset:st;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;position:relative}
.step:before{counter-increment:st;content:counter(st);position:absolute;top:-16px;left:22px;
  width:40px;height:40px;border-radius:50%;background:var(--amber);color:var(--on-amber);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px}
.step h3{margin-top:8px}
.step p{margin:0;color:var(--muted)}

/* Форма заявки */
.lead-form{background:var(--card);border:1px solid var(--line);border-radius:22px;
  padding:34px;box-shadow:var(--shadow)}
.form-side{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;margin-bottom:18px;
  background:var(--bg);border:1px solid var(--line);border-radius:14px}
.seg label{position:relative;display:flex;align-items:center;justify-content:center;min-height:50px;padding:6px 10px;
  border-radius:10px;font-weight:800;font-size:15px;line-height:1.2;text-align:center;color:var(--muted);cursor:pointer;
  transition:background .15s,color .15s,box-shadow .15s}
.seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg label.on{background:#fff;color:var(--ink);box-shadow:0 6px 16px -8px rgba(14,16,19,.35)}
.seg label:has(input:focus-visible){outline:3px solid var(--amber);outline-offset:2px}
#leadForm.is-parts .only-oil,#leadForm:not(.is-parts) .only-parts{display:none}
.field{margin-bottom:14px}
.field label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.field input,.field select{width:100%;padding:15px 16px;border:1.5px solid var(--line);
  border-radius:12px;font-size:16px;font-family:inherit;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus{outline:0;border-color:var(--amber);box-shadow:0 0 0 4px var(--amber-soft)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.consent{font-size:13px;color:var(--muted);margin:12px 0 0}
.consent a{color:var(--muted)}
.form-alt{margin-top:16px;font-size:15px;color:var(--muted);text-align:center}
.form-msg{margin-top:14px;font-weight:700;text-align:center;display:none}
.form-msg.ok{display:block;color:#1a7a3c}
.form-msg.err{display:block;color:#c0392b}
.ul-check{list-style:none;padding:0;margin:0}
.ul-check li{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;font-size:17px}
.contacts-2{margin-top:18px;display:grid;gap:6px}
.contacts-2 p{margin:0;font-size:15.5px}
.contacts-2 a{font-weight:800;text-decoration:none}
.contacts-2 a.lnk-amber{text-decoration:underline}

/* FAQ */
.faq-group{margin:30px 0 14px;font-size:15px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:0 22px;margin-bottom:12px}
.faq summary{cursor:pointer;list-style:none;font-weight:700;font-size:18px;padding:20px 0;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--amber);font-size:26px;font-weight:800;line-height:1}
.faq details[open] summary:after{content:"–"}
.faq details p{color:var(--muted);padding:0 0 20px;margin:0}
.faq details a{color:var(--ink)}

/* Финал */
.final{background:
  radial-gradient(900px 400px at 50% 120%, rgba(244,172,36,.22), transparent 60%),
  var(--graphite);color:var(--on-dark);text-align:center}
.final h2{color:#fff;max-width:820px;margin-left:auto;margin-right:auto}
.final .lead{color:#B7BDC5;max-width:620px;margin:0 auto 26px}
.final .hero-cta{justify-content:center}

/* Футер */
.foot{background:var(--graphite-2);color:#AEB4BC;font-size:14px;padding:38px 0}
.foot a{color:#CDD2D8}
.foot .row{display:flex;flex-wrap:wrap;gap:18px 26px;justify-content:space-between;align-items:flex-start}
.foot-contacts{display:flex;flex-wrap:wrap;gap:14px 40px}
.foot-contacts p{margin:0;line-height:1.6}
.foot-contacts span{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8D949D;font-weight:700}
.foot .foot-tel{font-weight:800;font-size:17px;text-decoration:none;color:#fff}
.foot .req{max-width:680px;line-height:1.6}

/* Нижняя панель связи — только на телефоне */
.mbar{display:none}

/* Показывать SMS только там, где есть SMS (телефон/планшет); на компьютере — заявку */
@media (hover:hover) and (pointer:fine){.only-touch{display:none!important}}
@media (hover:none),(pointer:coarse){.only-fine{display:none!important}}

/* Появление при прокрутке */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* Адаптив */
@media(max-width:1000px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .parts-grid{grid-template-columns:1fr;gap:28px}
  .spec{position:static;order:-1}
}
@media(max-width:900px){
  .g-3,.why-grid,.steps{grid-template-columns:repeat(2,1fr)}
  .trust .wrap{grid-template-columns:repeat(2,1fr);gap:26px}
  .hero-veil{background:linear-gradient(180deg, rgba(247,248,250,.94) 0%, rgba(247,248,250,.88) 58%, rgba(247,248,250,.82) 100%)}
  .hero-bg{background-position:center}
  .form-side{grid-template-columns:1fr;gap:26px}
}
@media(max-width:860px){
  .dirs{grid-template-columns:1fr}
}
@media(max-width:720px){
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr;gap:8px;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(14,16,19,.95);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 -10px 30px -12px rgba(0,0,0,.5)}
  .mbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:52px;border-radius:14px;
    text-decoration:none;font-weight:800;font-size:16px;line-height:1.15}
  .mbar small{font-size:12px;font-weight:600;opacity:.85;margin-top:2px}
  .mbar-oil{background:#25D366;color:#06331b}
  .mbar-parts{background:var(--amber);color:var(--on-amber)}
  body.has-mbar{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .mini-steps{grid-template-columns:1fr}
}
@media(max-width:580px){
  .section{padding:52px 0}
  .g-4,.g-3,.g-2,.why-grid,.steps,.check-list{grid-template-columns:1fr}
  .hero .wrap{padding-top:28px;padding-bottom:36px}
  .hero-cta .btn,.dir-cta .btn{flex:1 1 100%}
  .dir{padding:20px}
  .lead-form{padding:22px}
  .spec{padding:22px}
  .xsell{padding:18px}
  .xsell .btn{width:100%}
  .steps{gap:30px}
}
@media(max-width:380px){
  h1{font-size:28px}
  .btn-lg{font-size:17px;padding:17px 22px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{transition:none;opacity:1;transform:none}
}