/* ==========================================================================
   СТО Пріоритет — landing page styles
   Design language follows avenorcars.site: light theme, Inter type,
   blue brand accent, pill badges, numbered service cards, rounded panels.
   Amber accent reserved for GBO-specific (fuel/gas) content only.
   ========================================================================== */

:root{
  --bg:          #FFFFFF;
  --bg-alt:      #F5F7FA;
  --bg-card:     #FAFBFC;
  --ink:         #14181F;
  --ink-soft:    #4B5563;
  --ink-faint:   #8A93A1;
  --blue:        #0066FF;
  --blue-dark:   #0052CC;
  --blue-tint:   #EBF2FF;
  --blue-tint-border: #C0D8FF;
  --amber:       #E8912F;
  --amber-dark:  #C97A22;
  --amber-tint:  #FDF1E3;
  --border:      #E4E7EC;
  --panel-dark:  #14181F;
  --panel-dark-2:#1D222C;

  --font: 'Inter', sans-serif;

  --container: 1160px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; font-size:1rem; }

h1,h2,h3,h4{
  font-family:var(--font);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.1;
}

:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(52px, 8vw, 96px); }
.section--tight{ padding-block:clamp(28px, 4vw, 48px); }
.on-alt{ background:var(--bg-alt); }
.on-dark{ background:var(--panel-dark); color:#fff; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.82rem; font-weight:600; color:var(--blue);
  background:var(--blue-tint); border:1px solid var(--blue-tint-border);
  padding:.35em .9em; border-radius:999px;
}
.on-dark .eyebrow{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#8FB7FF; }

.section-head{ max-width:640px; margin-bottom:clamp(28px, 4vw, 44px); }
.section-head .eyebrow{ margin-bottom:14px; }
.section-head h2{ font-size:clamp(1.7rem, 3.2vw, 2.5rem); }
.section-head p{ margin-top:.9em; color:var(--ink-soft); font-size:1.05rem; }
.on-dark .section-head p{ color:#B7BFCC; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.9em 1.6em; border-radius:999px;
  font-family:var(--font); font-weight:700; font-size:.98rem;
  border:2px solid transparent; white-space:nowrap;
  transition:transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--blue{ background:var(--blue); color:#fff; }
.btn--blue:hover{ background:var(--blue-dark); }
.btn--outline{ background:transparent; border-color:var(--border); color:var(--ink); }
.btn--outline:hover{ border-color:var(--blue); color:var(--blue); }
.btn--outline-dark{ background:transparent; border-color:rgba(255,255,255,.24); color:#fff; }
.btn--outline-dark:hover{ border-color:#fff; }
.btn--block{ width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- Top bar ---------- */
.topbar{ background:var(--panel-dark); color:#B7BFCC; font-size:.82rem; }
.topbar .container{ display:flex; align-items:center; justify-content:space-between; height:38px; gap:16px; }
.topbar-info{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.topbar-info a{ color:#B7BFCC; }
.topbar-info a:hover{ color:#fff; }
.topbar .lang-switch a{ color:#8A93A1; }
.topbar .lang-switch a.is-active{ color:#fff; }

/* ---------- Header ---------- */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:74px; gap:16px; }
.brand{ display:flex; flex-direction:column; line-height:1.05; }
.brand strong{ font-size:1.3rem; font-weight:800; letter-spacing:-.02em; }
.brand strong span{ color:var(--blue); }
.brand small{ font-size:.72rem; color:var(--ink-faint); margin-top:2px; font-weight:500; }

.main-nav{ display:none; align-items:center; gap:26px; }
.main-nav a{ font-size:.95rem; font-weight:500; color:var(--ink-soft); }
.main-nav a:hover{ color:var(--blue); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.tel-link{ display:none; align-items:center; gap:.5em; font-weight:700; font-size:.98rem; color:var(--ink); }
.tel-link svg{ color:var(--blue); }

.nav-toggle{
  display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--ink);
}
.nav-toggle svg{ width:20px; height:20px; }

.mobile-nav{ display:none; flex-direction:column; background:var(--bg); border-bottom:1px solid var(--border); }
.mobile-nav.is-open{ display:flex; }
.mobile-nav a{ padding:14px var(--gutter); color:var(--ink); border-top:1px solid var(--border); font-size:1rem; font-weight:500; }

@media (min-width:900px){
  .main-nav{ display:flex; }
  .tel-link{ display:inline-flex; }
  .nav-toggle{ display:none; }
}

/* ---------- Hero ---------- */
.hero{ padding-block:clamp(44px, 7vw, 80px) clamp(36px,5vw,64px); position:relative; overflow:hidden; }
.hero::before{
  content:''; position:absolute; top:-140px; right:-120px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,102,255,.09) 0%, transparent 70%); pointer-events:none;
}
.hero .container{ position:relative; max-width:760px; }
.hero h1{ font-size:clamp(2.1rem, 5vw, 3.3rem); max-width:16ch; }
.hero-lede{ margin-top:1.1em; font-size:1.12rem; color:var(--ink-soft); max-width:56ch; }
.hero-actions{ margin-top:1.8em; }
.hero-meta{ margin-top:1.8em; display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; font-size:.92rem; color:var(--ink-soft); }
.hero-meta span{ display:inline-flex; align-items:center; gap:.5em; }
.hero-meta svg{ width:16px; height:16px; color:var(--blue); flex:none; }

.hero-icons{ margin-top:2.6em; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:520px; }
@media (min-width:640px){ .hero-icons{ grid-template-columns:repeat(4,1fr); } }
.hero-icons div{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.hero-icons svg{ width:24px; height:24px; color:var(--blue); }
.hero-icons span{ font-size:.86rem; font-weight:600; color:var(--ink); }

/* ---------- Numbered services ---------- */
.svc-grid{ display:grid; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-top:12px; }
@media (min-width:720px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .svc-grid{ grid-template-columns:repeat(3,1fr); } }
.svc-card{ background:var(--bg); padding:28px; display:flex; flex-direction:column; gap:10px; }
.svc-num{ font-size:.85rem; font-weight:700; color:var(--blue); }
.svc-card h3{ font-size:1.12rem; font-weight:700; letter-spacing:-.01em; }
.svc-card p{ font-size:.92rem; color:var(--ink-soft); flex:1; }
.svc-card a{ margin-top:6px; font-size:.88rem; font-weight:600; color:var(--blue); display:inline-flex; align-items:center; gap:.35em; }
.svc-card a:hover{ color:var(--blue-dark); }

/* ---------- Rules / checklist + stat callout ---------- */
.rules-grid{ display:grid; gap:44px; align-items:start; }
@media (min-width:960px){ .rules-grid{ grid-template-columns:1.1fr .9fr; } }
.checklist{ margin-top:22px; display:flex; flex-direction:column; gap:14px; }
.checklist li{ display:flex; align-items:flex-start; gap:12px; font-size:1rem; }
.checklist li svg{ width:20px; height:20px; flex:none; margin-top:2px; color:var(--blue); }

.stat-box{ background:var(--amber-tint); border:1px solid #F0D8B0; border-radius:var(--radius-lg); padding:clamp(24px,3vw,34px); }
.stat-box .stat-num{ font-size:clamp(2.6rem,5vw,3.4rem); font-weight:800; color:var(--amber-dark); line-height:1; }
.stat-box p{ margin-top:12px; color:var(--ink-soft); font-size:.98rem; }
.stat-box .fuel-compare{ display:flex; gap:22px; margin-top:18px; }
.stat-box .fuel-compare .val{ font-weight:700; font-size:1.25rem; }
.stat-box .fuel-compare .lbl{ font-size:.8rem; color:var(--ink-soft); margin-top:2px; }
.stat-box .btn{ margin-top:20px; }

/* ---------- Pricing panels ---------- */
.price-grid{ display:grid; gap:20px; margin-top:8px; }
@media (min-width:720px){ .price-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .price-grid{ grid-template-columns:repeat(4,1fr); } }
.price-panel{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; display:flex; flex-direction:column; }
.price-panel h3{ font-size:1.05rem; padding-bottom:14px; border-bottom:1px solid var(--border); }
.price-panel .price-row{ display:flex; justify-content:space-between; gap:12px; padding-block:12px; border-bottom:1px solid var(--border); font-size:.92rem; }
.price-panel .price-row:last-of-type{ border-bottom:none; }
.price-panel .price-item{ color:var(--ink); }
.price-panel .price-value{ font-weight:700; white-space:nowrap; color:var(--blue); }
.price-panel a{ margin-top:16px; font-size:.88rem; font-weight:600; color:var(--blue); }
.price-note{ margin-top:26px; font-size:.88rem; color:var(--ink-faint); max-width:70ch; }

/* ---------- Brand strip ---------- */
.brand-strip{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.brand-strip .container{ padding-block:26px; }
.brand-strip p{ text-align:center; font-size:.82rem; font-weight:600; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; margin-bottom:18px; }
.brand-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:28px 40px; }
.brand-row span{ font-family:var(--font); font-weight:800; font-size:1.05rem; letter-spacing:-.01em; color:var(--ink-faint); }

/* ---------- Local area + symptom chips ---------- */
.chip-row{ margin-top:18px; display:flex; flex-wrap:wrap; gap:10px; }
.chip-row a{
  font-size:.88rem; font-weight:600; padding:.55em 1.1em; border-radius:999px;
  border:1px solid var(--border); color:var(--ink);
}
.chip-row a:hover{ border-color:var(--blue); color:var(--blue); }

.area-grid{ display:grid; gap:20px; margin-top:26px; }
@media (min-width:720px){ .area-grid{ grid-template-columns:repeat(3,1fr); } }
.area-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px; }
.area-tag{ display:flex; align-items:center; gap:.5em; font-weight:700; font-size:.94rem; color:var(--blue); margin-bottom:6px; }
.area-tag svg{ width:16px; height:16px; flex:none; }
.area-card p{ font-size:.9rem; color:var(--ink-soft); }

/* ---------- Numbered steps list ---------- */
.steps-list{ margin-top:22px; display:flex; flex-direction:column; gap:20px; }
.steps-list li{ display:flex; gap:16px; align-items:flex-start; }
.steps-list .num{
  flex:none; width:34px; height:34px; border-radius:50%; background:var(--blue-tint); color:var(--blue);
  font-weight:800; font-size:.92rem; display:flex; align-items:center; justify-content:center;
}
.steps-list strong{ display:block; font-size:1rem; margin-bottom:2px; }
.steps-list p{ font-size:.92rem; color:var(--ink-soft); }

/* ---------- Detail panels (repair breakdown) ---------- */
.detail-grid{ display:grid; gap:20px; margin-top:8px; }
@media (min-width:720px){ .detail-grid{ grid-template-columns:repeat(2,1fr); } }
.detail-panel{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; }
.detail-panel h3{ font-size:1.1rem; display:flex; align-items:center; gap:.55em; padding-bottom:16px; border-bottom:1px solid var(--border); }
.detail-panel h3 svg{ width:22px; height:22px; color:var(--blue); }
.detail-panel .checklist{ margin-top:16px; gap:11px; }
.detail-panel .checklist li{ font-size:.94rem; }

/* ---------- Trust grid (qualitative, no numbers) ---------- */
.trust-grid{ display:grid; gap:20px; margin-top:8px; }
@media (min-width:720px){ .trust-grid{ grid-template-columns:repeat(2,1fr); } }
.trust-item{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; display:flex; gap:16px; align-items:flex-start; }
.trust-item svg{ width:26px; height:26px; flex:none; color:var(--blue); margin-top:2px; }
.trust-item h4{ font-size:1.02rem; font-weight:700; }
.trust-item p{ margin-top:6px; font-size:.92rem; color:var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq-list{ display:flex; flex-direction:column; max-width:780px; margin-top:8px; }
.faq-item{ border-bottom:1px solid var(--border); }
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px;
  background:none; border:none; text-align:left; padding:22px 0; color:var(--ink);
  font-weight:700; font-size:1.02rem;
}
.faq-q svg{ width:22px; height:22px; flex:none; color:var(--blue); transition:transform .2s ease; }
.faq-item.is-open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-item.is-open .faq-a{ max-height:320px; }
.faq-a p{ padding-bottom:22px; color:var(--ink-soft); max-width:65ch; font-size:.98rem; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; gap:40px; }
@media (min-width:960px){ .contact-grid{ grid-template-columns:1fr 1fr; } }
.contact-cards{ display:flex; flex-direction:column; gap:14px; margin-top:22px; }
.contact-card{
  display:flex; align-items:center; gap:14px; padding:18px 20px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-md);
}
.contact-card svg{ width:22px; height:22px; flex:none; color:#8FB7FF; }
.contact-card strong{ display:block; font-size:1.02rem; }
.contact-card span{ display:block; font-size:.82rem; color:#B7BFCC; margin-top:2px; }

.map-embed{ margin-top:20px; border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-md); overflow:hidden; }
.map-embed iframe{ width:100%; height:240px; border:0; display:block; filter:grayscale(.1) contrast(1.05); }

.form-card{ background:#fff; color:var(--ink); padding:clamp(24px,4vw,36px); border-radius:var(--radius-lg); }
.form-card h3{ font-size:1.3rem; }
.form-card > p{ margin-top:8px; color:var(--ink-soft); font-size:.94rem; }
.field{ margin-top:16px; display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:.85rem; color:var(--ink-soft); font-weight:500; }
.field input, .field textarea{
  padding:.85em 1em; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; color:var(--ink);
}
.field input:focus, .field textarea:focus{ border-color:var(--blue); }
.form-actions{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.form-hint{ font-size:.8rem; color:var(--ink-faint); }
.form-status{ font-size:.9rem; margin-top:10px; }
.form-status.is-error{ color:#D14343; }
.form-status.is-ok{ color:#1E9E5A; }

/* ---------- Footer ---------- */
.site-footer{ padding-block:44px 96px; }
@media (min-width:900px){ .site-footer{ padding-block:44px 28px; } }
.footer-top{ display:flex; flex-direction:column; gap:28px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.12); }
@media (min-width:760px){ .footer-top{ flex-direction:row; justify-content:space-between; align-items:center; } }
.footer-brand strong{ font-size:1.2rem; font-weight:800; }
.footer-brand strong span{ color:#8FB7FF; }
.footer-brand p{ margin-top:8px; color:#B7BFCC; font-size:.92rem; max-width:34ch; }
.footer-cols{ display:flex; gap:48px; flex-wrap:wrap; margin-top:32px; }
.footer-col h5{ font-size:.85rem; color:#8A93A1; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.footer-col ul{ margin-top:14px; display:flex; flex-direction:column; gap:10px; }
.footer-col a, .footer-col span{ font-size:.92rem; color:#D8DEE7; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  margin-top:28px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  font-size:.82rem; color:#8A93A1;
}

/* ---------- Sticky mobile action bar ---------- */
.mobile-actionbar{
  display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:#fff; border-top:1px solid var(--border); box-shadow:0 -4px 16px rgba(0,0,0,.06);
}
.mobile-actionbar a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:.5em;
  padding:14px 0; font-weight:700; font-size:.94rem;
}
.mobile-actionbar a:first-child{ background:var(--blue); color:#fff; }
.mobile-actionbar a:last-child{ color:var(--ink); }
.mobile-actionbar svg{ width:18px; height:18px; }
@media (min-width:900px){ .mobile-actionbar{ display:none; } }

/* ---------- Misc ---------- */
.skip-link{ position:absolute; left:-999px; top:0; background:var(--blue); color:#fff; padding:10px 16px; z-index:200; border-radius:0 0 8px 0; }
.skip-link:focus{ left:0; top:0; }