/* ===========================================================
   Services page CSS (scoped, conflict-safe)
   =========================================================== */
:root{
  --primary-color:#0a66c2;      /* blue trust */
  --accent-color:#f5b600;       /* gold shine */
  --bg-light:#f5f9ff;           /* soft section background */
  --text:#333;
  --text-dark:#222;
  --max-width:1200px;
}

/* ---- Base ---- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#ffffff 0%,#f3f8ff 100%);
  line-height:1.6;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* ===========================================================
   HEADER / NAV
   =========================================================== */
header{
  position:sticky; top:0; z-index:1000;
  background:linear-gradient(90deg,#0049a5,#0a66c2);
  color:#fff; padding:10px 16px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.nav-wrap{
  max-width:var(--max-width); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}

/* logo (icon + text in one line) */
.logo{display:flex; align-items:center; gap:10px; color:#fff; font-weight:900; font-size:1.2rem; line-height:1}
.logo img{
  width:42px; height:42px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff 0%, #dbeaff 45%, #b3d1ff 100%);
  box-shadow:inset 0 2px 6px rgba(255,255,255,.6), 0 4px 12px rgba(0,0,0,.25), 0 0 10px rgba(255,255,255,.25);
  padding:4px; object-fit:contain;
}
.logo span{ text-shadow:0 1px 2px rgba(0,0,0,.3) }

/* nav */
nav ul{margin:0; padding:0; list-style:none; display:flex; gap:14px}
nav a{color:#fff; font-weight:600}
nav a:hover, nav a:focus{text-decoration:underline}

/* burger (mobile) */
.burger{display:none; flex-direction:column; gap:4px; cursor:pointer}
.burger span{width:24px; height:3px; background:#fff; border-radius:2px; transition:transform .25s}

/* mobile menu layer */
@media (max-width:960px){
  .burger{display:flex; position:relative; z-index:1002}
  #nav-list{
    position:fixed; top:56px; left:0; right:0; bottom:0; z-index:1001;
    display:none; flex-direction:column; align-items:center; gap:16px;
    padding:20px 14px 24px; overflow:auto;
    background:rgba(255,255,255,.75); -webkit-backdrop-filter:blur(8px) saturate(1.2); backdrop-filter:blur(8px) saturate(1.2);
  }
  #nav-list.active{ display:flex }
  #nav-list a{
    display:block; width:92%; max-width:640px; text-align:center;
    padding:16px 22px; border-radius:18px; font-weight:800; letter-spacing:.2px;
    background:#fff; color:#1b1b1b; box-shadow:0 12px 26px rgba(0,0,0,.10);
  }
  #nav-list li:first-child a{ background:var(--primary-color); color:#fff; box-shadow:0 16px 32px rgba(10,102,194,.25) }
  body.menu-open{ overflow:hidden }
}
/* ==== MOBILE MENU HARD OVERRIDE (<=960px) ==== */
@media (max-width:960px){

  /* высота шапки и базовая геометрия */
  header{ --hdr-h:56px; }

  /* слой меню: фикс под шапкой, всегда поверх */
  header nav ul#nav-list{
    position:fixed !important;
    top:var(--hdr-h) !important; left:0 !important; right:0 !important; bottom:0 !important;
    z-index:1001 !important;

    display:none !important;       /* по умолчанию скрыт */
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:14px !important;

    padding:18px 14px 28px !important;
    margin:0 !important;
    max-height:calc(100vh - var(--hdr-h)) !important;
    overflow:auto !important;

    background:rgba(255,255,255,.78) !important;
    -webkit-backdrop-filter:blur(10px) saturate(1.15) !important;
            backdrop-filter:blur(10px) saturate(1.15) !important;
    box-shadow:0 12px 28px rgba(0,0,0,.10) inset !important;
  }
  header nav ul#nav-list.active{ display:flex !important; }

  /* каждая строка */
  header nav ul#nav-list > li{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
  }

  /* кнопки-«таблетки» */
  header nav ul#nav-list > li > a{
    display:block !important;
    width:min(520px,88%) !important;
    text-align:center !important;
    padding:14px 20px !important;
    border-radius:16px !important;
    font-weight:800 !important;
    font-size:18px !important;
    letter-spacing:.2px !important;

    background:#fff !important;
    color:#1b1b1b !important;
    box-shadow:0 10px 22px rgba(0,0,0,.10) !important;
    transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease !important;
  }
  header nav ul#nav-list > li > a:active{ transform:scale(.99) !important; }

  /* активный пункт (если добавлен .is-active или aria-current) */
  header nav ul#nav-list > li > a.is-active,
  header nav ul#nav-list > li > a[aria-current="page"]{
    background:#0a66c2 !important;
    color:#fff !important;
    box-shadow:0 14px 28px rgba(10,102,194,.22) !important;
  }

  /* запрет прокрутки контента под меню */
  body.menu-open{ overflow:hidden !important; }
}

/* ---------- Utility scope (optional) ---------- */
.services-page main { max-width: 1200px; margin: 0 auto; }

/* HERO */
.hero--inner{text-align:center;padding:40px 16px;background:linear-gradient(180deg,#fff 0%,#f7fbff 100%)}
.hero--inner .hero__lead{max-width:760px;margin:0 auto 12px;color:#222;font-size:17px}

/* GRID of benefits */
.features{max-width:1200px;margin:0 auto 24px;padding:24px 16px;text-align:center}
.features .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.features .card{background:#fff;border-radius:18px;padding:18px;box-shadow:0 6px 18px rgba(0,0,0,.06);transition:.2s}
.features .card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.08)}

/* Comparison table */
.compare{max-width:960px;margin:0 auto 32px;padding:0 16px}
.compare table{width:100%;border-collapse:collapse;font-size:15px}
.compare th,.compare td{border:1px solid #ddd;padding:.75rem;text-align:left}
.compare th{background:#0a66c2;color:#fff}

/* Reviews */
.reviews{background:#f7fbff;padding:24px 16px;text-align:center}
.reviews__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;max-width:1000px;margin:0 auto}
.reviews blockquote{background:#fff;border-left:4px solid #0a66c2;border-radius:10px;padding:18px 16px;box-shadow:0 6px 18px rgba(0,0,0,.06)}

/* CTA */
.cta-final{padding:28px 16px;background:linear-gradient(180deg,#0a66c2 0%,#003c88 100%);color:#fff;text-align:center;border-radius:18px;margin:32px auto;max-width:1200px}
.cta-final h2{margin:0 0 8px}
.cta-final p{margin:0 0 12px}
.cta-final .btn--outline{border-color:#fff;color:#fff;background:transparent}
.cta-final .btn--outline:hover{background:#fff;color:#0a66c2}

/* SEO intro */
.seo-intro{max-width:1000px;margin:0 auto 32px;padding:24px 16px;background:#fff;border-radius:18px;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.seo-intro h2{color:#0a66c2;text-align:center;margin:0 0 12px}
/* ================================
   COMPARISON: Refinishing vs Replacement
   ================================ */
.compare{
  max-width: 980px;
  margin: 22px auto 28px;
  padding: 18px 16px 22px;
  background: linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
.compare .section-title{
  margin: 0 0 12px;
  color: #0a66c2;
  text-align: left;
}
.compare table{
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background:#fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
.compare thead th{
  background:#0a66c2;
  color:#fff;
  text-align:left;
  padding:.85rem .9rem;
  font-weight:900;
}
.compare thead th:first-child{ width:38% }
.compare td{
  padding:.85rem .9rem;
  border-top:1px solid #eef2f6;
  vertical-align:top;
}
.compare tbody tr:nth-child(odd) td{ background:#fafcff }
.compare tbody tr:hover td{ background:#f3f8ff }
@media (max-width:720px){
  .compare table{ font-size:14px }
  .compare thead th:first-child{ width:40% }
}

/* маленькие бейджи-подсказки (опционально внутри ячеек) */
.compare .badge{
  display:inline-block; padding:3px 8px; border-radius:10px;
  background:#e8f2ff; color:#0a66c2; font-weight:800; font-size:12px;
  border:1px solid rgba(10,102,194,.18);
}

/* ================================
   REVIEWS: What Our Clients Say
   ================================ */
.reviews{
  max-width: 1100px;
  margin: 0 auto 32px;
  padding: 24px 16px;
  background: linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
.reviews .section-title{
  margin: 0 0 12px;
  color: #0a66c2;
  text-align: left;
}

/* карточки-цитаты */
.reviews__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 14px;
}
.reviews blockquote{
  position: relative;
  margin: 0;
  background:#fff;
  border-radius: 14px;
  padding: 16px 16px 16px 40px;
  border-left: 4px solid #0a66c2;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  font-weight: 600;
  color:#222;
  line-height:1.55;
}
.reviews blockquote::before{
  content: "“";
  position: absolute;
  left: 10px; top: 6px;
  font-size: 40px; line-height: 1;
  color: rgba(10,102,194,.25);
}

/* строка "5.0★ Google Rated" (если добавишь над цитатами) */
.reviews .rating-strip{
  display:flex; align-items:center; gap:8px;
  margin: 0 0 10px;
  font-weight:900; color:#111;
}
.reviews .rating-strip .star{
  width:16px; height:16px; display:inline-block;
  background: linear-gradient(180deg,#ffd84b,#f5b600);
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.2L22 9.3l-5 4.8 1.2 6.7L12 17.8 5.8 20.8 7 14.1 2 9.3l7.1-1.1L12 2z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.2L22 9.3l-5 4.8 1.2 6.7L12 17.8 5.8 20.8 7 14.1 2 9.3l7.1-1.1L12 2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ===========================================================
   FOOTER (premium)
   =========================================================== */
.site-footer{ position:relative; margin-top:40px; color:#fff; background:linear-gradient(180deg,#0a66c2 0%, #003c88 100%); border-top:1px solid rgba(255,255,255,.15); overflow:hidden }
.site-footer a{ color:#fff } .site-footer a:hover{ text-decoration:underline }
.footer-wave{ position:absolute; left:0; right:0; top:-18px; height:36px; background:radial-gradient(1200px 24px at 50% 18px, rgba(255,255,255,.35), transparent 70%) top/100% 36px no-repeat; opacity:.4; pointer-events:none }
.site-footer .logo{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:1.25rem }
.site-footer .logo img{ width:44px; height:44px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #fff 0%, #dbeaff 45%, #b3d1ff 100%); box-shadow:inset 0 2px 6px rgba(255,255,255,.6), 0 4px 12px rgba(0,0,0,.25); padding:4px }
.footer__top{ max-width:var(--max-width); margin:22px auto 12px; padding:0 16px; display:grid; gap:10px; justify-items:start }
.footer__tagline{ margin:0; opacity:.95 } .footer__cta{ display:flex; gap:10px; flex-wrap:wrap } .btn--on-dark{ border-color:#fff; color:#fff } .btn--on-dark:hover{ background:#fff; color:#0a66c2 }
.footer__grid{ max-width:var(--max-width); margin:10px auto 0; padding:14px 16px 10px; display:grid; gap:22px; grid-template-columns:repeat(4,minmax(220px,1fr)) }
.footer__col h4{ margin:0 0 10px; font-weight:900; letter-spacing:.2px; border-bottom:2px solid rgba(255,255,255,.2); padding-bottom:6px }
.footer-list{ list-style:none; padding:0; margin:0; display:grid; gap:6px; opacity:.95 } .footer-list li{ line-height:1.5 }
.badges{ list-style:none; padding:0; margin:0; display:grid; gap:6px }
.badges li{ position:relative; padding-left:18px }
.badges li::before{
  content:""; position:absolute; left:0; top:.35em; width:12px; height:12px;
  background:linear-gradient(180deg,#ffd84b,#f5b600); border-radius:3px;
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat
}
.areas-mini{ list-style:none; padding:0; margin:0 0 8px; display:flex; flex-wrap:wrap; gap:8px }
.areas-mini a{ display:inline-block; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); font-weight:800 }
.areas-mini a:hover{ background:#fff; color:#0a66c2 }
.areas-mini__more{ display:inline-block; opacity:.9 }
.footer__bottom{ max-width:var(--max-width); margin:6px auto 0; padding:10px 16px 18px; border-top:1px solid rgba(255,255,255,.15); display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; opacity:.95 }
.footer__legal a{ opacity:.9 } .footer__legal a:hover{ opacity:1 }
@media (max-width:960px){ .footer__grid{ grid-template-columns:1fr 1fr } }
@media (max-width:600px){ .footer__top{ justify-items:center; text-align:center } .footer__grid{ grid-template-columns:1fr } .footer__bottom{ justify-content:center; text-align:center; gap:6px } }
/* ---------- HERO (inner) ---------- */
.services-page .hero--inner,
.hero--inner{
  background: linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  padding: 40px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero--inner .hero__content{ max-width: 980px; margin: 0 auto; }
.hero--inner .hero__lead{ color:#222; font-size: 17px; margin: 0 0 14px; }
.hero--inner .hero__benefits{
  list-style: none; padding: 0; margin: 0 0 14px;
  display: grid; gap: 8px; justify-items: center;
}
.hero--inner .hero__benefits li{
  background:#fff; border-radius: 999px; padding: 10px 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,.06); font-weight: 700; color:#2b2b2b;
}
.hero--inner .hero__cta{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* ===== WHY page — buttons hard fix (scoped) ===== */
.why-page .hero--inner .hero__cta{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  margin-top:12px;
}

/* Базовый вид кнопок для этой страницы */
.why-page .btn{
  display:inline-block;
  padding:.85rem 1.2rem;
  border-radius:10px;
  font-weight:800;
  text-decoration:none !important;  /* убрать подчёркивание */
  line-height:1;
  transition:filter .2s, box-shadow .2s, background .2s, color .2s;
}

/* Primary (золотая) */
.why-page .btn--primary{
  background:linear-gradient(145deg,#ffcc40,#f5b600);
  color:#111;
  box-shadow:0 4px 20px rgba(245,182,0,.35);
}
.why-page .btn--primary:hover{ filter:brightness(1.1) }

/* Outline (синяя окантовка на светлом фоне) */
.why-page .btn--outline{
  background:#fff;
  border:2px solid #0a66c2;
  color:#0a66c2;
  box-shadow:0 0 10px rgba(10,102,194,.12);
}
.why-page .btn--outline:hover{
  background:rgba(10,102,194,.08);
  color:#083366;
}

/* На тёмном фоне (если CTA тёмный) — белая окантовка */
.why-page .cta-final .btn--outline{
  background:transparent;
  border-color:#fff;
  color:#fff;
}
.why-page .cta-final .btn--outline:hover{
  background:#fff; color:#0a66c2;
}
.trust-strip{padding:14px 16px;text-align:center;background:linear-gradient(180deg,#fff 0%,#f8fbff 100%)}
.trust-strip__inner{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.trust-item{background:#fff;border-radius:12px;padding:10px 14px;font-weight:700;color:#0a66c2;box-shadow:0 4px 12px rgba(0,0,0,.05)}
.mission{max-width:900px;margin:28px auto;padding:20px 16px;text-align:center;background:#fff;border-radius:18px;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.mission p{font-size:17px;color:#333}
/* ===========================================================
   Process page (scoped) — no conflicts with other pages
   =========================================================== */

.process-page main{ max-width:1200px; margin:0 auto }

/* HERO */
.process-page .hero--inner{
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  padding:40px 16px; text-align:center; position:relative; overflow:hidden
}
.process-page .hero--inner .hero__content{ max-width:980px; margin:0 auto }
.process-page .hero--inner .hero__lead{ color:#222; font-size:17px; margin:0 0 14px }
.process-page .hero--inner .hero__cta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap }

/* STEPS */
.steps{ max-width:1200px; margin:0 auto 32px; padding:24px 16px; text-align:center }
.steps .section-title{ color:#0a66c2; margin:0 0 12px }
.steps__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px }
.step{ background:#fff; border-radius:18px; padding:18px; box-shadow:0 6px 18px rgba(0,0,0,.06); position:relative; transition:.2s }
.step:hover{ transform:translateY(-3px); box-shadow:0 12px 24px rgba(0,0,0,.08) }
.step__num{
  position:absolute; left:14px; top:14px; width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg,#0a66c2,#004c99); color:#fff; font-weight:900; display:grid; place-items:center
}
.step h3{ margin:18px 0 6px; color:#0a66c2; font-size:1.05rem }
.step p{ margin:0; color:#333 }

/* WHAT YOU GET */
.features{ margin:22px auto; padding:28px 18px 32px; background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%); border-radius:18px; box-shadow:0 6px 20px rgba(0,0,0,.06); text-align:center }
.features .section-title{ margin-bottom:10px; color:#0a66c2 }
.features .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px }
.features .card{ background:#fff; border-radius:18px; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,.06); transition:.2s }
.features .card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.08) }

/* BEFORE/AFTER */
.ba{ padding:24px 16px; background:#fff; border-radius:18px; box-shadow:0 6px 20px rgba(0,0,0,.06); max-width:1200px; margin:22px auto }
.ba h2{ color:#0a66c2; text-align:center; margin:0 0 12px }
.ba__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px }
.ba__card{ background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.08); transition:.2s }
.ba__card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.1) }
.ba__card figcaption{ padding:8px 10px; font-weight:800; text-align:center; background:#f5f9ff }

/* CTA FINAL */
.cta-final{ padding:28px 16px; background:linear-gradient(180deg,#0a66c2 0%, #003c88 100%); color:#fff; border-radius:18px; box-shadow:0 6px 30px rgba(10,102,194,.3); max-width:1200px; margin:22px auto }
.cta-final__inner{ text-align:center }
.cta-final h2{ margin:0 0 8px }
.cta-final p{ margin:0 0 12px }
.cta-final .btn--outline{ border-color:#fff; color:#fff; background:transparent }
.cta-final .btn--outline:hover{ background:#fff; color:#0a66c2 }

/* Buttons fallback (если глобальные не загрузились) */
.process-page .btn{ display:inline-block; padding:.85rem 1.2rem; border-radius:10px; font-weight:800; text-decoration:none }
.process-page .btn--primary{ background:linear-gradient(145deg,#ffcc40,#f5b600); color:#111; box-shadow:0 4px 20px rgba(245,182,0,.35) }
.process-page .btn--primary:hover{ filter:brightness(1.08) }
.process-page .btn--outline{ border:2px solid #0a66c2; color:#0a66c2; background:#fff }
.process-page .btn--outline:hover{ background:rgba(10,102,194,.08); color:#083366 }

/* Responsive tweaks */
@media (max-width:960px){
  .process-page .hero--inner{ padding:32px 16px }
  .step h3{ font-size:1rem }
}
/* ===== FIX: step numbers alignment ===== */
.step{
  position:relative;
  padding:36px 18px 18px; /* больше отступ сверху под номер */
}

.step__num{
  position:absolute;
  top:-14px;                /* цифра чуть выходит за границы карточки */
  left:50%;
  transform:translateX(-50%);
  width:40px; height:40px;
  border-radius:50%;
  background:linear-gradient(135deg,#0a66c2,#004c99);
  color:#fff;
  font-weight:900;
  font-size:18px;
  display:grid;
  place-items:center;
  box-shadow:0 4px 8px rgba(0,0,0,.15);
}

/* для плавного hover-эффекта */
.step:hover .step__num{
  transform:translateX(-50%) scale(1.05);
  box-shadow:0 8px 14px rgba(10,102,194,.25);
}

/* мобильное выравнивание */
@media (max-width:720px){
  .step{padding-top:42px}
  .step__num{width:36px;height:36px;font-size:16px}
}
.gallery{
  max-width:1200px;margin:24px auto;padding:28px 16px;
  background:linear-gradient(180deg,#fff 0%,#f7fbff 100%);
  border-radius:18px;box-shadow:0 6px 20px rgba(0,0,0,.06);text-align:center;
}
.gallery .section-title{color:#0a66c2;margin-bottom:16px}
.gallery__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;justify-items:center;
}
.gallery__grid figure{
  background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.06);transition:.25s;
}
.gallery__grid figure:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.08)}
.gallery__grid img{width:100%;height:auto;display:block}
.gallery__grid figcaption{padding:8px 0;font-weight:700;background:#f5f9ff}
/* =============== Lightbox (Process page only) =============== */
.lb{
  position:fixed; inset:0; z-index:1200;
  display:none; opacity:0; transition:opacity .2s ease;
}
.lb.is-open{ display:block; opacity:1 }
.lb__backdrop{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(3,6,15,.85),rgba(0,10,30,.88));
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
          backdrop-filter: blur(6px) saturate(1.1);
}

/* центральный блок */
.lb__figure{
  position:absolute; inset:60px 60px 90px 60px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  margin:0;
}
.lb__img{
  max-width: min(92vw, 1200px);
  max-height: 70vh;
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  background:#0b1a2b;
  object-fit:contain;
}
.lb__cap{
  margin-top:10px; color:#e5e7eb; text-align:center; font-weight:600;
  text-shadow:0 1px 0 rgba(0,0,0,.6);
}

/* кнопки */
.lb__btn{
  position:absolute; z-index:1;
  width:44px; height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.12); color:#fff; font-weight:900; font-size:26px;
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:transform .12s ease, background .12s ease, color .12s ease;
}
.lb__btn:hover{ transform:translateY(-2px); background:rgba(255,255,255,.2) }
.lb__close{ top:16px; right:16px; font-size:22px }
.lb__nav{ top:50%; transform:translateY(-50%) }
.lb__prev{ left:16px }
.lb__next{ right:16px }

@media (max-width: 800px){
  .lb__figure{ inset:56px 14px 100px 14px }
  .lb__img{ max-height: 62vh }
  .lb__prev{ left:8px } .lb__next{ right:8px }
  .lb__btn{ border-radius:10px }
}

/* блокировка прокрутки страницы, когда открыт lb */
body.lb-open{ overflow:hidden }
.faq{max-width:1000px;margin:24px auto;padding:22px 16px;background:#fff;border-radius:18px;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.faq .section-title{color:#0a66c2;margin:0 0 10px;text-align:center}
.faq details{background:#f7fbff;border:1px solid #e6eef8;border-radius:12px;padding:10px 12px;margin-bottom:8px}
.faq summary{cursor:pointer;font-weight:800}
.faq p{margin:8px 0 0;color:#333}
/* Pricing page (scoped) */
.pricing-page main{ max-width:1200px; margin:0 auto }

/* HERO */
.pricing-page .hero--inner{
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  padding:40px 16px; text-align:center
}
.pricing-page .hero--inner .hero__content{ max-width:980px; margin:0 auto }
.pricing-page .hero--inner .hero__lead{ color:#222; font-size:17px; margin:0 0 14px }
.pricing-page .hero--inner .hero__cta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap }

/* PRICING CARDS */
.pricing-cards{ padding:24px 16px }
.pgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px }
.pcard{
  background:#fff; border-radius:18px; padding:18px;
  box-shadow:0 8px 24px rgba(0,0,0,.06); transition:.2s; text-align:center
}
.pcard:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.1) }
.pcard h2{ margin:8px 0 6px; color:#0a66c2; font-size:1.15rem }
.pcard .price{ margin-bottom:8px; font-size:15px; color:#111 }
.pcard .price strong{ font-size:1.4rem }

/* BUNDLES */
.features{ margin:16px auto 12px; padding:24px 16px; background:linear-gradient(180deg,#fff 0%,#f7fbff 100%); border-radius:18px; box-shadow:0 6px 20px rgba(0,0,0,.06); text-align:center }
.features .section-title{ color:#0a66c2; margin:0 0 10px }
.features .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px }
.features .card{ background:#fff; border-radius:18px; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,.06); transition:.2s }
.features .card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.08) }

/* COMPARISON */
.compare{ max-width:980px; margin:16px auto 20px; padding:18px 16px; background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%); border-radius:18px; box-shadow:0 6px 20px rgba(0,0,0,.06) }
.compare .section-title{ margin:0 0 12px; color:#0a66c2 }
.compare table{ width:100%; border-collapse:collapse; font-size:15px; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.05) }
.compare th,.compare td{ padding:.85rem .9rem; border-top:1px solid #eef2f6; text-align:left }
.compare thead th{ background:#0a66c2; color:#fff; border-top:none }
.compare .badge{ display:inline-block; padding:3px 8px; border-radius:10px; background:#e8f2ff; color:#0a66c2; font-weight:800; font-size:12px; border:1px solid rgba(10,102,194,.18) }

/* FAQ */
.faq{ max-width:1000px; margin:18px auto 24px; padding:22px 16px; background:#fff; border-radius:18px; box-shadow:0 6px 18px rgba(0,0,0,.06) }
.faq .section-title{ color:#0a66c2; margin:0 0 10px; text-align:center }
.faq details{ background:#f7fbff; border:1px solid #e6eef8; border-radius:12px; padding:10px 12px; margin-bottom:8px }
.faq summary{ cursor:pointer; font-weight:800 }
.faq p{ margin:8px 0 0; color:#333 }

/* CTA FINAL */
.cta-final{ padding:28px 16px; background:linear-gradient(180deg,#0a66c2 0%, #003c88 100%); color:#fff; border-radius:18px; box-shadow:0 6px 30px rgba(10,102,194,.3); max-width:1200px; margin:22px auto }
.cta-final__inner{ text-align:center }
.cta-final h2{ margin:0 0 8px }
.cta-final p{ margin:0 0 12px }
.cta-final .btn--outline{ border-color:#fff; color:#fff; background:transparent }
.cta-final .btn--outline:hover{ background:#fff; color:#0a66c2 }

/* Buttons fallback (если глобальные не загрузились) */
.pricing-page .btn{ display:inline-block; padding:.85rem 1.2rem; border-radius:10px; font-weight:800; text-decoration:none }
.pricing-page .btn--primary{ background:linear-gradient(145deg,#ffcc40,#f5b600); color:#111; box-shadow:0 4px 20px rgba(245,182,0,.35) }
.pricing-page .btn--primary:hover{ filter:brightness(1.08) }
.pricing-page .btn--outline{ border:2px solid #0a66c2; color:#0a66c2; background:#fff }
.pricing-page .btn--outline:hover{ background:rgba(10,102,194,.08); color:#083366 }

/* Notes */
.pricing-cards .note{ max-width:900px; margin:10px auto 0; text-align:center; color:#333 }
/* =========================================
   MINI QUOTE FORM (scoped, no conflicts)
   ========================================= */

.pricing-page form.mini-quote,
form.mini-quote{
  --mq-bg: rgba(255,255,255,.9);
  --mq-border: rgba(10,102,194,.18);
  --mq-focus: #0a66c2;
  --mq-text: #1b1b1b;
  --mq-muted: #6b7280;

  display: grid;
  grid-template-columns: repeat(12,1fr);
  gap: 12px;
  max-width: 800px;
  margin: 20px auto 0;
  padding: 16px;
  border-radius: 18px;
  background: var(--mq-bg);
  backdrop-filter: blur(8px) saturate(1.1);
  border: 1px solid var(--mq-border);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* Layout: 2 cols on desktop */
form.mini-quote input[type="text"],
form.mini-quote input[type="tel"],
form.mini-quote input[type="email"],
form.mini-quote select,
form.mini-quote button{
  grid-column: span 6;
}

@media (max-width:720px){
  form.mini-quote{
    grid-template-columns:1fr;
    padding:14px;
  }
  form.mini-quote > *{
    grid-column:1 / -1;
  }
}

/* Inputs & Selects */
form.mini-quote input,
form.mini-quote select{
  width:100%;
  height:46px;
  border-radius:12px;
  border:1px solid var(--mq-border);
  background:#fff;
  padding:0 14px;
  font-size:16px;
  color:var(--mq-text);
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
form.mini-quote input::placeholder{color:var(--mq-muted);opacity:.9}

/* Focus ring */
form.mini-quote input:focus,
form.mini-quote select:focus{
  border-color:var(--mq-focus);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--mq-focus) 25%, transparent);
}

/* Button */
form.mini-quote button{
  grid-column: span 12;
  justify-self:center;
  padding:.85rem 1.4rem;
  border-radius:10px;
  font-weight:800;
  font-size:16px;
  background:linear-gradient(145deg,#ffcc40,#f5b600);
  color:#111;
  box-shadow:0 4px 20px rgba(245,182,0,.35);
  border:none;
  cursor:pointer;
  transition:filter .2s;
}
form.mini-quote button:hover{ filter:brightness(1.1) }

/* Consent checkbox */
form.mini-quote .mini-ack{
  grid-column: span 12;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; color:var(--mq-muted);
}
form.mini-quote .mini-ack input[type="checkbox"]{
  width:18px; height:18px; flex:0 0 18px;
  accent-color: var(--mq-focus);
}

/* Sending state (optional JS hook .is-sending) */
form.mini-quote.is-sending button{
  pointer-events:none; opacity:.7; position:relative;
}
form.mini-quote.is-sending button::after{
  content:""; position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.5); border-top-color:#fff;
  animation: mq-spin .8s linear infinite;
}
@keyframes mq-spin{to{transform:rotate(360deg)}}
/* Contact page (scoped) */
.contact-page main{ max-width:1200px; margin:0 auto }

/* HERO */
.contact-page .hero--inner{
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  padding:40px 16px; text-align:center
}
.contact-page .hero__content{ max-width:980px; margin:0 auto }
.contact-page .hero__lead{ color:#222; font-size:17px; margin:0 0 14px }
.contact-page .hero__benefits{
  list-style:none; padding:0; margin:10px auto 0; display:grid; gap:8px; justify-items:center
}
.contact-page .hero__benefits li{
  background:#fff; border-radius:999px; padding:10px 14px;
  box-shadow:0 1px 0 rgba(0,0,0,.06); font-weight:700; color:#2b2b2b
}
.contact-page .hero__cta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap }

/* WRAP: form + info */
.contact-wrap{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:18px;
  padding:22px 16px
}
@media (max-width:960px){ .contact-wrap{ grid-template-columns:1fr } }

/* FORM */
.quote-form{
  background:#fff; border-radius:18px; box-shadow:0 8px 24px rgba(0,0,0,.06);
  border:1px solid #e6eef8; padding:20px 16px
}
.quote-form .section-title{ color:#0a66c2; margin:0 0 10px; text-align:center }
.quote-form .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 } /* honeypot */
.form-grid{ display:grid; grid-template-columns: repeat(12,1fr); gap:12px }
.field{ grid-column: span 6 }
.span-2{ grid-column: span 12 }
@media (max-width:720px){ .field{ grid-column: 1 / -1 } }

.field label{ display:block; font-weight:800; margin:0 0 6px; color:#222 }
.field .req{ color:#e11d48; margin-left:4px }
.field input, .field textarea, .field select{
  width:100%; border:1px solid #e0e7f1; border-radius:12px; background:#fff;
  height:46px; padding:0 14px; font-size:16px; color:#1b1b1b; outline:none;
  transition:border-color .2s, box-shadow .2s
}
.field textarea{ height:auto; padding:10px 14px; resize:vertical; min-height:104px }
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:#0a66c2; box-shadow:0 0 0 3px rgba(10,102,194,.18)
}
.hint{ display:block; margin-top:4px; color:#6b7280; font-size:12px }
.ack{ display:flex; align-items:center; justify-content:center; gap:10px }
.actions{ text-align:center }
.quote-form .btn{ display:inline-block; padding:.85rem 1.4rem; border-radius:10px; font-weight:800; text-decoration:none }
.quote-form .btn.btn--primary{
  background:linear-gradient(145deg,#ffcc40,#f5b600); color:#111; box-shadow:0 4px 20px rgba(245,182,0,.35); border:none; cursor:pointer
}
.quote-form .btn.btn--primary:hover{ filter:brightness(1.08) }
.secure-note{ color:#6b7280; margin:6px 0 0 }

/* CONTACT INFO */
.contact-info{
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  border-radius:18px; box-shadow:0 8px 24px rgba(0,0,0,.06);
  border:1px solid #e6eef8; padding:20px 16px
}
.contact-info .section-title{ color:#0a66c2; margin:0 0 10px; text-align:center }
.ci-list{ list-style:none; padding:0; margin:0 0 12px; display:grid; gap:8px }
.ci-list a{ color:#0a66c2; font-weight:800; text-decoration:none }
.ci-list a:hover{ text-decoration:underline }
.trust-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin:10px 0 14px }
.trust-item{ background:#fff; border-radius:12px; padding:10px 14px; text-align:center; font-weight:800; color:#2a2a2a; box-shadow:0 6px 16px rgba(0,0,0,.06) }

.map-wrap{ border-radius:14px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.06); background:#e9eef6 }
.map-wrap iframe{ width:100%; height:260px; border:0 }

/* Footer credits (если используешь общий футер) */
.footer__credits{ text-align:center; padding:10px 0 14px; font-size:14px; color:rgba(255,255,255,.85) }
.footer__credits a{ color:#f5b600; font-weight:700; text-decoration:none }
.footer__credits a:hover{ text-decoration:underline; color:#ffd84b }