/* ===========================================================
   DashiD LLC — Premium Selling Theme (UTF-8, ASCII, no BOM)
   Совместимо с текущей разметкой index.html
   =========================================================== */

/* ---- Design tokens ---- */
: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 }
}

/* ===========================================================
   HERO
   =========================================================== */
.hero{
  position:relative; padding:40px 16px; overflow:hidden;
  background:linear-gradient(180deg,#ffffff 0%,#e9f2ff 100%);
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(circle at 60% 40%, rgba(10,102,194,.15), transparent 60%);
}
.hero--refinishing{ display:grid; grid-template-columns:1.05fr .95fr; gap:24px; align-items:center }
.hero__content, .hero__image{ position:relative; z-index:1 }
.hero__content h1{
  margin:0 0 10px; color:var(--primary-color);
  font-size:clamp(28px, 2.2vw + 14px, 40px); line-height:1.2;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}
.hero__lead{ margin:0 0 14px; color:var(--text-dark); font-size:17px }
.hero__benefits{ margin:0 0 14px; padding:0; list-style:none; display:grid; gap:8px }
.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__cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px }
.hero__image img{ border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.12); background:#e9eef6 }

@media (max-width:960px){
  .hero--refinishing{ grid-template-columns:1fr }
  .hero__image{ order:-1 }
}

/* buttons */
.btn{ display:inline-block; padding:.85rem 1.2rem; border-radius:10px; font-weight:800; transition:filter .2s, box-shadow .2s, background .2s, color .2s }
.btn--primary{ background:linear-gradient(145deg,#ffcc40,#f5b600); color:#111; box-shadow:0 4px 20px rgba(245,182,0,.4) }
.btn--primary:hover{ filter:brightness(1.1) }
.btn--outline{ background:#fff; border:2px solid var(--primary-color); color:var(--primary-color); box-shadow:0 0 10px rgba(10,102,194,.15) }
.btn--outline:hover{ background:rgba(10,102,194,.08); color:#083366 }

/* ===========================================================
   TRUST STRIP / MICRO PRICING / STATS
   =========================================================== */
.trust-strip{ padding:10px 16px 0 }
.trust-strip__inner{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; max-width:var(--max-width); margin:0 auto }
.trust-item{
  background:#fff; border-radius:18px; padding:12px 14px; text-align:center; font-weight:800; color:#2a2a2a;
  box-shadow:0 8px 24px rgba(0,0,0,.06); transition:.2s;
}
.trust-item:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.08) }

.micro-pricing{ padding:10px 16px }
.micro-pricing__grid{ max-width:var(--max-width); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px }
.mp-card{
  background:#fff; border-radius:18px; padding:14px; text-align:center; font-weight:800;
  box-shadow:0 8px 24px rgba(0,0,0,.06); transition:.2s;
}
.mp-card h3{ margin:0 0 4px; color:var(--primary-color) }
.mp-card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.08) }

.stats{ padding:6px 16px }
.stats__grid{ max-width:var(--max-width); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px }
.stat{ background:#fff; border-radius:18px; padding:16px; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.06) }
.stat__num{ display:block; font-weight:900; font-size:32px; color:#0a66c2; line-height:1; text-shadow:0 0 6px rgba(10,102,194,.15) }
.stat__lbl{ display:block; opacity:.95; font-weight:700 }

/* ===========================================================
   PROCESS (How it works)
   =========================================================== */
.process{ padding:24px 16px; background:#fff; border-radius:18px; box-shadow:0 6px 20px rgba(0,0,0,.06); max-width:var(--max-width); margin:22px auto }
.section-title{ color:var(--primary-color); text-align:center; margin:0 0 12px }
.process__list{ counter-reset:step; list-style:none; padding:0; margin:0; display:grid; gap:12px }
.process__list li{
  position:relative; counter-increment:step;
  background:#f2f7ff; border:1px solid rgba(10,102,194,.08); border-radius:18px;
  padding:16px 18px 16px 56px; box-shadow:0 1px 0 rgba(0,0,0,.04); line-height:1.45;
}
.process__list li::before{
  content:counter(step); position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg,#0a66c2,#0055aa); color:#fff; display:grid; place-items:center; font-weight:900;
  box-shadow:0 8px 16px rgba(10,102,194,.25);
}
.process__list li strong{ color:#111; font-weight:800; margin-right:.15em }
.process__list li:hover{ background:#eaf2ff; box-shadow:0 6px 18px rgba(10,102,194,.08); transition:.15s }
@media (max-width:600px){ .process__list li{ padding:14px 14px 14px 52px } .process__list li::before{ left:12px; width:26px; height:26px } }

/* ===========================================================
   GUARANTEES (grid + icon chips)
   =========================================================== */
.guarantee{ padding:48px 16px; background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%); border-radius:18px; box-shadow:0 6px 20px rgba(0,0,0,.06); max-width:var(--max-width); margin:22px auto }
.guarantee__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; text-align:center }
.g-card{ background:#fff; border-radius:20px; padding:28px 22px; box-shadow:0 10px 26px rgba(0,0,0,.06); transition:transform .2s, box-shadow .2s }
.g-card:hover{ transform:translateY(-6px); box-shadow:0 18px 36px rgba(10,102,194,.15) }
.g-ico{ width:56px; height:56px; border-radius:999px; display:grid; place-items:center; margin:0 auto 10px; background:radial-gradient(circle at 30% 30%,#fff 0%,#eaf2ff 90%); box-shadow:0 6px 14px rgba(10,102,194,.1) }
.g-ico::before{ content:""; width:24px; height:24px; background:linear-gradient(180deg,#0a66c2,#004c99); -webkit-mask-repeat:no-repeat; -webkit-mask-size:contain; -webkit-mask-position:center; mask-repeat:no-repeat; mask-size:contain; mask-position:center }
.g-ico--license::before{ -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a2 2 0 012 2v12a2 2 0 01-2 2h-2l-3 4-3-4H7a2 2 0 01-2-2V4a2 2 0 012-2zm3 5h7v2h-7V7zm0 4h7v2h-7v-2zM7 7h2v2H7V7zm0 4h2v2H7v-2z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a2 2 0 012 2v12a2 2 0 01-2 2h-2l-3 4-3-4H7a2 2 0 01-2-2V4a2 2 0 012-2zm3 5h7v2h-7V7zm0 4h7v2h-7v-2zM7 7h2v2H7V7zm0 4h2v2H7v-2z'/%3E%3C/svg%3E") }
.g-ico--shield::before{ -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l7 3v6c0 4.97-3.43 9.54-7 10-3.57-.46-7-5.03-7-10V5l7-3zm-1 12l-2-2 1.4-1.4L11 11.2l3.6-3.6L16 9l-5 5z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l7 3v6c0 4.97-3.43 9.54-7 10-3.57-.46-7-5.03-7-10V5l7-3zm-1 12l-2-2 1.4-1.4L11 11.2l3.6-3.6L16 9l-5 5z'/%3E%3C/svg%3E") }
.g-ico--sparkle::before{ background:linear-gradient(180deg,#f5b600,#df9c00); -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.2 4.7L19 9l-4.7 2.3L12 16l-2.3-4.7L5 9l4.7-2.3L12 2zM19 12l1.3 2.7L23 16l-2.7 1.3L19 20l-1.3-2.7L15 16l2.7-1.3L19 12zM5 13l1 2 2 1-2 1-1 2-1-2-2-1 2-1 1-2z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.2 4.7L19 9l-4.7 2.3L12 16l-2.3-4.7L5 9l4.7-2.3L12 2zM19 12l1.3 2.7L23 16l-2.7 1.3L19 20l-1.3-2.7L15 16l2.7-1.3L19 12zM5 13l1 2 2 1-2 1-1 2-1-2-2-1 2-1 1-2z'/%3E%3C/svg%3E") }
@media (max-width:700px){ .guarantee__grid{ grid-template-columns:1fr } }

/* ===========================================================
   AREAS (chips + search + toggle)
   =========================================================== */
.areas{
  margin:22px auto; padding:28px 18px;
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  border-radius:18px; box-shadow:0 6px 20px rgba(0,0,0,.06); text-align:center; max-width:var(--max-width)
}
.areas__toolbar{ display:flex; justify-content:center; gap:8px; margin:8px auto 14px }
.areas__search{
  width:min(560px,90%); padding:10px 34px 10px 12px;
  border-radius:12px; border:1px solid rgba(10,102,194,.18); background:#fff; font-weight:600;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.04)
}
.areas__clear{ display:none; width:36px; height:36px; border-radius:10px; border:1px solid rgba(10,102,194,.18); background:#fff; cursor:pointer; font-size:18px; line-height:1; color:#2a2a2a }
.areas__list{ list-style:none; padding:0; margin:0 auto; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center; max-width:var(--max-width) }
.area-chip{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  padding:12px 16px; border-radius:16px; background:#fff; color:#1b1b1b; font-weight:800;
  border:1px solid rgba(10,102,194,.12);
  box-shadow:0 8px 18px rgba(0,0,0,.06), inset 0 0 0 1px rgba(255,255,255,.6);
  transition:transform .15s, box-shadow .15s, background .15s
}
.area-chip:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(10,102,194,.12) }
.area-chip::before{
  content:""; width:16px; height:16px; background:linear-gradient(180deg,#0a66c2,#004c99);
  -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 2c3.86 0 7 3.14 7 7 0 5.25-7 13-7 13S5 14.25 5 9c0-3.86 3.14-7 7-7zm0 9.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%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 2c3.86 0 7 3.14 7 7 0 5.25-7 13-7 13S5 14.25 5 9c0-3.86 3.14-7 7-7zm0 9.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E") center/contain no-repeat
}
.area-chip.is-active{ background:linear-gradient(145deg,#ffdd66,#f5b600); color:#111; border-color:rgba(245,182,0,.4); box-shadow:0 10px 26px rgba(245,182,0,.25) }
.areas__list .is-more{ display:none }
.areas__actions{ margin-top:12px }
.areas__toggle{ border:1px solid rgba(10,102,194,.18); background:#fff; color:#0a66c2; font-weight:900; padding:10px 14px; border-radius:12px; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.06) }
.areas--expanded .areas__list .is-more{ display:list-item }
.areas--expanded .areas__toggle{ color:#111 }

/* ===========================================================
   REVIEWS / BEFORE-AFTER
   =========================================================== */
.reviews{ padding:24px 16px; background:var(--bg-light); border-radius:18px; box-shadow:0 6px 20px rgba(0,0,0,.06); max-width:var(--max-width); margin:22px auto }
.reviews .section-title{ margin-bottom:12px }
.reviews__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px }
.reviews blockquote{
  position:relative; margin:0; background:#fff; border-radius:18px; padding:18px 16px 16px 36px;
  box-shadow:0 8px 24px rgba(0,0,0,.06); font-weight:600; border-left:4px solid #0a66c2
}
.reviews blockquote::before{ content:"\201C"; position:absolute; left:10px; top:4px; font-size:40px; line-height:1; color:rgba(10,102,194,.25) }

.ba{ padding:24px 16px; background:#fff; border-radius:18px; box-shadow:0 6px 20px rgba(0,0,0,.06); max-width:var(--max-width); margin:22px auto }
.ba .wrap{ max-width:var(--max-width); margin:0 auto }
.ba h2{ color:var(--primary-color); 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:var(--bg-light) }
.ba__cta{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center }

/* ===========================================================
   FEATURES (cards)
   =========================================================== */
.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; max-width:var(--max-width) }
.features .section-title{ margin-bottom:10px }
.features .wrap > p{ max-width:980px; margin:0 auto 18px; color:var(--text) }
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px }
.card{ background:#fff; border-radius:18px; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,.06); transition:.2s }
.card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.08) }
.card h3{ color:var(--primary-color); margin:10px 0 }

/* ===========================================================
   SEO INTRO (readable SEO copy)
   =========================================================== */
.seo-intro{ padding:32px 18px 40px; background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%); border-radius:18px; box-shadow:0 8px 24px rgba(0,0,0,.06); max-width:var(--max-width); margin:24px auto; text-align:center }
.seo-intro p{ max-width:900px; margin:0 auto 12px; color:var(--text-dark) }
.seo-intro strong{ color:var(--primary-color) }
.seo-bullets{ list-style:none; padding:0; margin:16px auto; display:inline-block; text-align:left }
.seo-bullets li{ margin-bottom:6px; font-weight:600; color:var(--text-dark) }

/* ===========================================================
   FAQ (accordion)
   =========================================================== */
.faq{ margin:22px auto; padding:28px 18px; background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%); border-radius:18px; box-shadow:0 6px 20px rgba(0,0,0,.06); max-width:var(--max-width) }
.faq .section-title{ text-align:center; margin-bottom:12px }
.faq-item{ border-radius:16px; background:#fff; border:1px solid rgba(10,102,194,.10); box-shadow:0 6px 16px rgba(0,0,0,.05); overflow:hidden; margin:10px 0; transition:box-shadow .2s, transform .2s, background .2s }
.faq-item[open]{ box-shadow:0 10px 26px rgba(10,102,194,.12); background:linear-gradient(180deg,#fff 0%,#f6faff 100%) }
.faq-item summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:28px 1fr 24px; align-items:center; gap:10px; padding:16px }
.faq-item summary::-webkit-details-marker{ display:none }
.faq-icon{ width:28px; height:28px; border-radius:999px; background:radial-gradient(circle at 30% 30%, #fff 0%, #eaf2ff 90%); box-shadow:0 6px 12px rgba(10,102,194,.12), inset 0 0 0 1px rgba(10,102,194,.18); position:relative }
.faq-icon::before{
  content:""; position:absolute; inset:0; margin:auto; width:16px; height:16px;
  background:linear-gradient(180deg,#0a66c2,#004c99);
  -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 2a10 10 0 100 20 10 10 0 000-20zm1 5v5.3l3.2 1.9-.9 1.6L11 13V7h2z'/%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 2a10 10 0 100 20 10 10 0 000-20zm1 5v5.3l3.2 1.9-.9 1.6L11 13V7h2z'/%3E%3C/svg%3E") center/contain no-repeat
}
.faq-chevron{ width:18px; height:18px; position:relative }
.faq-chevron::before{
  content:""; position:absolute; inset:0; transform:rotate(0deg); transition:transform .2s;
  background:linear-gradient(180deg,#0a66c2,#004c99);
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5'/%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='M7 10l5 5 5-5'/%3E%3C/svg%3E") center/contain no-repeat
}
.faq-item[open] .faq-chevron::before{ transform:rotate(180deg) }
.faq-a{ padding:0 16px 16px 54px; color:var(--text); display:grid; grid-template-rows:0fr; transition:grid-template-rows .25s }
.faq-item[open] .faq-a{ grid-template-rows:1fr }
.faq-a > *{ overflow:hidden }
.faq-q{ color:#111; font-weight:900 }

/* ===========================================================
   SERVICES (std grid)
   =========================================================== */
section.std{ padding:24px 16px; max-width:var(--max-width); margin:22px auto }
section.std .wrap{ max-width:var(--max-width); margin:0 auto }
section.std .section-title{ text-align:center }

/* ===========================================================
   FINAL CTA (dark gradient)
   =========================================================== */
.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:var(--max-width); margin:22px auto }
.cta-final__inner{ max-width:var(--max-width); margin:0 auto; background:transparent; border-radius:18px; padding:22px 18px; text-align:center }
.cta-final h2{ margin:0 0 6px; color:#fff }
.cta-final p{ margin:0 0 12px }
.cta-final .btn--outline{ border-color:#fff; color:#fff }
.cta-final .btn--outline:hover{ background:#fff; color:#0a66c2 }

/* ===========================================================
   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 } }

/* ===========================================================
   UTILITIES
   =========================================================== */
main h1, main h2, main h3, main h4, main h5, main h6{ text-align:center }
main .btn{ display:inline-block; margin:0 auto; text-align:center }
.center-buttons{ text-align:center }

/* ===========================================================
   FLOATING RATING BADGE (Thumbtack)
   =========================================================== */
.fr-badge{
  position:fixed; left:12px; bottom:calc(90px + env(safe-area-inset-bottom)); z-index:1100;
  display:flex; align-items:center; gap:6px; padding:6px 10px; font-size:13px;
  background:rgba(255,255,255,.9); backdrop-filter:saturate(1.1) blur(6px);
  border-radius:999px; box-shadow:0 6px 16px rgba(0,0,0,.12); color:#1b1b1b
}
.fr-badge .fr-link{ display:flex; align-items:center; gap:6px; font-weight:800 }
.fr-logo{ width:14px; height:14px; flex:0 0 14px }
.fr-stars{ color:#F5B600; letter-spacing:1px; font-size:12px }
.fr-score{ font-weight:900; font-size:13px }
@media (hover:hover){ .fr-badge:hover{ box-shadow:0 8px 22px rgba(245,182,0,.35); transform:translateY(-2px); transition:.2s } }
@media (max-width:480px){ .fr-badge{ left:10px; bottom:calc(90px + env(safe-area-inset-bottom)); padding:5px 8px; font-size:12px; gap:5px } .fr-stars{ font-size:11px; letter-spacing:.5px } }
/* --- FIX: outline на темном фоне: прозрачный фон + белый текст --- */
.cta-final .btn--outline,
.site-footer .btn--outline.btn--on-dark{
  background: transparent;          /* было #fff */
  border-color: #fff;
  color: #fff;
}
.cta-final .btn--outline:hover,
.site-footer .btn--outline.btn--on-dark:hover{
  background: #fff;                 /* инвертируем на ховере */
  color: #0a66c2;
}
/* ==== 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; }
}
.footer__credits{
  text-align:center;
  padding:10px 0 14px;
  font-size:14px;
  color:rgba(255,255,255,.85);
  background:linear-gradient(180deg,rgba(10,102,194,.05),transparent);
}
.footer__credits a{
  color:#f5b600;
  font-weight:700;
  text-decoration:none;
}
.footer__credits a:hover{
  text-decoration:underline;
  color:#ffd84b;
}
/* ===== Restore vs Replace — visuals ===== */
.restore-vs-replace .hero-compare,
.restore-vs-replace .media-wide,
.restore-vs-replace .media-duo,
.restore-vs-replace .mini-gallery { margin: 24px 0; }

.restore-vs-replace figure { text-align: center; }
.restore-vs-replace img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.08); }

.restore-vs-replace .hero-compare img { aspect-ratio: 16/7; object-fit: cover; }
.restore-vs-replace .media-wide img   { aspect-ratio: 16/9; object-fit: cover; }

.restore-vs-replace .media-duo { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 780px){
  .restore-vs-replace .media-duo { grid-template-columns: 1fr 1fr; }
}

.restore-vs-replace .mini-gallery { display: grid; grid-template-columns: 1fr; gap: 16px; }
.restore-vs-replace .mini-gallery figure { margin: 0; }
.restore-vs-replace figcaption { font-size: .9rem; color: #5b6275; margin-top: 8px; }

@media (min-width: 768px){
  .restore-vs-replace .mini-gallery { grid-template-columns: repeat(3, 1fr); }
}
.cta { margin-top: 40px; text-align: center; line-height: 1.5; }
.cta .btn { 
  display: inline-block;
  background: var(--sw-primary, #4a66ff);
  color: #fff;
  padding: 14px 34px;
  border-radius: 40px;
  font-weight: 600;
  transition: all .3s ease;
}
.cta .btn:hover { background: #394ad8; transform: translateY(-2px); }
.cta small { display: block; margin-top: 10px; color: var(--sw-muted, #5b6275); font-size: .9rem; }
/* ===== Process Gallery ===== */
.process-gallery { text-align:center; margin:40px 0; }
.process-gallery h3 { margin-bottom:16px; font-size:1.4rem; }
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
}
/* ===== Process Gallery (uniform look) ===== */
.process-gallery{margin:32px 0;text-align:center}
.process-gallery h3{margin-bottom:16px;font-size:1.4rem}
.process-gallery .caption{margin-top:12px;color:var(--sw-muted,#5b6275)}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr); /* 4 в ряд на десктопе */
  gap:18px;
}
@media (max-width:1024px){ .gallery-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:768px){  .gallery-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){  .gallery-grid{grid-template-columns:1fr;} }

.g-card{
  margin:0; background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 10px 24px rgba(16,24,40,.10);
}
.g-card img{
  display:block; width:100%;
  height:240px;                 /* единая высота карточек */
  object-fit:cover;             /* вертикальные кадры заполняют без «полос» */
  transition:transform .3s ease, filter .3s ease;
}
@media (min-width:1280px){ .g-card img{ height:280px; } }  /* немного больше на широких экранах */
.g-card:hover img{ transform:scale(1.03); filter:saturate(1.05); }

/* ===== Modal: keep natural aspect ratio + pro nav/zoom ===== */
.modal{
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(0,0,0,.92); z-index:1000; padding:28px;
}
.modal.open{ display:grid; }

/* ключевой блок — никаких жёстких width/height */
.modal .modal-content{
  display:block;
  width:auto;                 /* важно: не 100% */
  height:auto;                /* важно: не 100% */
  max-width:92vw;             /* вписываемся в вьюпорт */
  max-height:82vh;
  object-fit:contain;         /* сохраняем пропорции */
  border-radius:14px;
  box-shadow:0 20px 40px rgba(0,0,0,.35);
  transform: translateZ(0);   /* сглаживает GPU */
}

/* zoom mode */
.modal .modal-content.zoomed{
  cursor:grab;
  max-width:none; 
  max-height:none;
  /* стартовый зум: 1.6x, можно менять в JS */
  transform:scale(1.6);
}

/* подпись и кнопки как были */
#mCaption{ color:#d2d6e0; text-align:center; margin-top:10px; font-size:.95rem }

.m-btn{
  position:absolute; background:rgba(255,255,255,.12);
  color:#fff; border:0; width:44px; height:44px; border-radius:999px;
  display:grid; place-items:center; font-size:26px; cursor:pointer;
  backdrop-filter:blur(2px); transition:background .2s ease, transform .2s ease;
}
.m-btn:hover{ background:rgba(255,255,255,.2); transform:scale(1.06); }
.m-close{ top:16px; right:16px; font-size:30px; }
.m-prev{ left:16px; top:50%; transform:translateY(-50%); }
.m-next{ right:16px; top:50%; transform:translateY(-50%); }

@media (max-width:640px){
  .m-btn{ width:40px; height:40px; font-size:22px; }
  .m-prev{ left:8px; } .m-next{ right:8px; } .m-close{ top:8px; right:8px; }
}
.promo-sec {
  padding: 50px 0;
}

.promo-sec__wrap {
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 15px;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 40px;
  align-items: center;
}

.promo-sec__text h2 {
  font-size: 1.8rem;
  margin-bottom: 12px;
  color: #0a3b8f;
}

.promo-sec__text p {
  font-size: 1rem;
  margin-bottom: 18px;
  line-height: 1.5;
}

.promo-sec__imgbox img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
}

/* Mobile */
@media (max-width: 900px) {
  .promo-sec__wrap {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .promo-sec__imgbox {
    max-width: 420px;
    margin: 0 auto;
  }
}