:root {
  --bg:#f4f7fb; 
  --surface:#ffffff; 
  --surface-2:#eef4fb; 
  --text:#15202b; 
  --muted:#5f6b76; 
  --line:#d7e0ea;
  --primary:#246985; 
  --primary-dark:#1b526b; 
  --accent:#459bb8; 
  --success:#187744; 
  --warning:#cf6a12;
  --radius:18px; 
  --radius-sm:12px; 
  --shadow:0 12px 40px rgba(12,31,51,.08); 
  --max:1180px;
}
*{
        box-sizing:border-box
        } 
html{
        scroll-behavior:smooth
        } 
body{
        margin:0;
        font-family:Manrope,Arial,sans-serif;
        color:var(--text);
        background:var(--bg);
        line-height:1.6
        }
a{
        text-decoration:none;
        color:inherit
        } 
img{
        max-width:100%;
        display:block
        } 
.container{
        width:min(var(--max),calc(100% - 32px));
        margin:0 auto
        }
.topbar{
        position:sticky;top:0;
        z-index:50;
        background:rgba(255,255,255,.92);
        backdrop-filter:blur(10px);
        border-bottom:1px solid var(--line)
        }
.topbar-inner{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:16px;
        padding:14px 0
        }
.brand{
        display:flex;
        align-items:center;
        gap:12px;
        font-weight:800
        }
.logo{
        width:42px;
        height:42px;
        border-radius:14px;
        background:linear-gradient(135deg,var(--primary),var(--accent));
        display:grid;place-items:center;
        color:#fff;
        box-shadow:var(--shadow)
        }
.nav{
        display:flex;
        gap:18px;
        flex-wrap:wrap;
        font-size:14px;
        color:var(--muted)
        }
.contact-inline{
        display:flex;
        align-items:center;
        gap:12px;
        flex-wrap:wrap
        } 
.phone{
        font-weight:800;
        color:var(--primary)
        } 
.messengers{
        display:flex;
        align-items:center;
        gap:10px
        } 
.messenger-icon{
        width:42px;
        height:42px;
        border-radius:999px;
        display:grid;
        place-items:center;
        border:1px solid var(--line);
        background:var(--surface);
        box-shadow:var(--shadow)
        } 
.messenger-icon svg{
        width:20px;
        height:20px
        } 
.messenger-icon.tg{
        color:#229ED9
        } 
.messenger-icon.wa{
        color:#25D366
        }
.hero{
        padding:44px 0 28px
        }
.hero-grid{
        display:grid;
        grid-template-columns:1.05fr .95fr;
        gap:28px;
        align-items:stretch
        }
.hero-card, .panel{
        background:var(--surface);
        border:1px solid var(--line);
        border-radius:var(--radius);
        box-shadow:var(--shadow)
        }
.hero-copy{
        padding:34px
        }
.eyebrow{
        display:inline-flex;
        gap:8px;
        align-items:center;
        background:var(--surface-2);
        border:1px solid #dbe7f2;
        padding:8px 12px;
        border-radius:999px;
        font-size:13px;
        color:var(--primary);
        font-weight:700
        }
h1{
        font-size:clamp(34px,5vw,58px);
        line-height:1.04;
        letter-spacing:-.03em;
        margin:18px 0 14px
        } 
h2{
        font-size:clamp(26px,3vw,38px);
        line-height:1.1;
        margin:0 0 14px
        }
p.lead{
        font-size:18px;
        color:var(--muted);
        max-width:58ch
        }
.cta-row{
        display:flex;
        gap:14px;
        flex-wrap:wrap;
        margin:26px 0 18px
        }
.btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height:48px;
        padding:0 22px;
        border:0;
        border-radius:999px;
        appearance:none;
        font:inherit;
        font-weight:800;
        cursor:pointer
        }
.btn-primary{
        background:var(--primary);
        color:#fff
        }
.btn-primary:hover{
        background:var(--primary-dark)
        } 
.btn-secondary{
        background:var(--surface-2);
        border:1px solid var(--line);
        color:var(--text)
        }
.hero-points{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;margin-top:24px
        }
.point{
        padding:14px;
        border:1px solid var(--line);
        border-radius:16px;
        background:#fbfdff;
        font-size:14px
        }
.hero-media{
        overflow:hidden;
        position:relative
        }
.hero-media img{
        width:100%;
        height:100%;
        object-fit:cover}
.hero-badge{
        position:absolute;
        left:18px;
        bottom:18px;
        background:rgba(255,255,255,.94);
        padding:14px 16px;
        border-radius:16px;
        max-width:270px;
        box-shadow:var(--shadow);
        font-size:14px}
.section{
        padding:30px 0}
.cards{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:18px}
.card{
        background:var(--surface);
        border:1px solid var(--line);
        border-radius:var(--radius);
        padding:24px;
        box-shadow:var(--shadow)}
.card h3{
        margin:0 0 10px;
        font-size:22px}
.muted{
        color:var(--muted)} 
.price{
        font-size:28px;
        font-weight:800;
        color:var(--primary);
        margin-top:12px}
.split{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:18px}
.list{
        display:grid;
        gap:12px}
.list div{
        padding:14px 16px;
        background:var(--surface);
        border:1px solid var(--line);
        border-radius:14px}
.steps{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:16px}
.step{
        padding:22px;
        background:var(--surface);
        border:1px solid var(--line);
        border-radius:18px}
.step b{
        display:inline-grid;
        place-items:center;
        width:34px;
        height:34px;
        border-radius:999px;
        background:var(--surface-2);
        color:var(--primary);
        margin-bottom:12px}
.faq details{
        background:var(--surface);
        border:1px solid var(--line);
        border-radius:16px;
        padding:16px 18px}
.faq{
        display:grid;
        gap:12px}
.faq summary{
        cursor:pointer;
        font-weight:800}
.areas,.brands{
        display:flex;
        flex-wrap:wrap;
        gap:10px}
.chip{
        padding:10px 14px;
        border-radius:999px;
        background:var(--surface);
        border:1px solid var(--line);
        font-size:14px}
.form-box{
        padding:24px}
.contact-map{
        display:block;
        width:100%;
        max-width:100%;
        height:360px;
        border:0;
        border-radius:14px}
.form-grid{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:12px}
.form-grid .full{
        grid-column:1/-1}
input,textarea,select{
        width:100%;
        padding:14px 15px;
        border-radius:14px;
        border:1px solid #8596a8;
        background:#fff;
        font:inherit} 
textarea{
        min-height:120px;
        resize:vertical}
footer{
        padding:26px 0 44px;
        color:var(--muted)}

/* Результат отправки формы */
.feedback-page{min-height:100vh}
.feedback-main{max-width:760px;padding-top:48px;padding-bottom:48px}
.feedback-result{padding:clamp(24px,5vw,48px)}
.feedback-result h1{font-size:clamp(28px,5vw,42px);line-height:1.15;margin:24px 0 16px}
.feedback-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:var(--surface-2);color:var(--success);font-size:34px;font-weight:800}
.feedback-icon-error{color:var(--warning)}
.feedback-contact{margin-top:28px;padding:20px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
.feedback-contact .phone{display:block;width:fit-content;font-size:clamp(18px,4vw,24px);margin-top:6px}
.feedback-contact p{margin:10px 0 0;font-size:14px}
.feedback-return{font-size:14px;margin-bottom:0}

/* Reviews */
.reviews-grid{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:18px}
.review-card{
        background:var(--surface);
        border:1px solid var(--line);
        border-radius:var(--radius);
        padding:24px;
        box-shadow:var(--shadow);
        display:flex;
        flex-direction:column;
        gap:14px}
.review-stars{
        display:flex;
        gap:2px}
.star{
        font-size:18px;
        color:var(--line)}
.star.filled{
        color:#b77900}
.review-text{
        margin:0;
        font-size:15px;
        line-height:1.65;
        color:var(--text);
        flex:1}
.review-meta{
        display:flex;
        align-items:center;
        gap:12px;
        padding-top:14px;
        border-top:1px solid var(--line)}
.review-avatar{
        width:42px;
        height:42px;
        border-radius:999px;
        background:linear-gradient(135deg,var(--primary),#397d9d);
        color:#fff;
        display:grid;
        place-items:center;
        font-weight:800;
        font-size:14px;
        flex-shrink:0}
.review-name{
        font-weight:700;
        font-size:15px}
.review-service{
        font-size:13px;
        margin-top:2px}

/* SEO collapsible block */
.seo-block .seo-details{
        background:var(--surface);
        border:1px solid var(--line);
        border-radius:16px;
        padding:16px 18px}
.seo-summary{
        cursor:pointer;
        font-weight:800}
.seo-content{
        padding-top:14px}
.seo-content h3{
        font-size:20px;
        margin:24px 0 10px;
        color:var(--text)}
.seo-content h3:first-child{
        margin-top:0}
.seo-content p{
        color:var(--muted);
        line-height:1.75;
        margin:0 0 8px;
        font-size:15px}

/* Отзыв Яндекс block */
  .yandex-rating-box {
      text-align: center;
      padding: 32px 24px;
    }

    .yandex-rating-content {
      max-width: 760px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 28px;
    }

    .yandex-rating-text {
      flex: 1 1 520px;
    }

    .yandex-rating-text h2 {
      margin: 0 0 10px;
    }

    .yandex-rating-text p {
      margin: 0;
      line-height: 1.6;
    }

    .yandex-rating-widget {
      flex: 0 0 150px;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 50px;
      padding: 10px 14px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.65);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    }

    .yandex-rating-widget iframe {
      display: block;
      border: 0;
      border-radius: 8px;
    }

   
@media (max-width: 980px){
.hero-grid,.cards,.split,.steps,.reviews-grid{
        grid-template-columns:1fr 1fr}
.nav{
        display:none}
}

@media (max-width: 700px){
  .yandex-rating-box { padding: 26px 18px; }
  .yandex-rating-content { flex-direction: column; gap: 18px; }
  .yandex-rating-text { flex-basis: auto; }
}

@media (max-width: 680px){
.contact-map{
        height:280px}
.hero-grid,.cards,.split,.steps,.form-grid,.reviews-grid{
        grid-template-columns:1fr}
.hero-copy{
        padding:24px}
.topbar-inner{
        align-items:flex-start;
        flex-direction:column}
.phone{
        font-size:18px}
}

/* Меню страниц доступно также на планшетах и телефонах. */
@media (min-width:681px) and (max-width:980px){.topbar-inner{flex-wrap:wrap}.topbar .nav{display:flex;order:3;width:100%;gap:12px 18px}}
@media (max-width:680px){.topbar .nav{display:flex;gap:10px 16px}.topbar .nav a{padding:5px 0}}

#services .card,.service-cards .card{display:flex;flex-direction:column}#services .service-more,.service-cards .service-more{display:block;margin-top:auto;padding-top:18px;font-weight:800;color:var(--primary)}#services .service-more:hover,.service-cards .service-more:hover{text-decoration:underline}.topbar .brand:focus-visible{outline:3px solid var(--accent);outline-offset:4px}

/* Общие состояния светлых кнопок. */
.btn-secondary,.button.secondary,.messenger-icon{transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.btn.btn-secondary:hover,.button.secondary:hover,.messenger-icon:hover{background:#e0edf6;border-color:#b0ccde;color:var(--primary-dark)}
.btn.btn-secondary:focus-visible,.button.secondary:focus-visible,.messenger-icon:focus-visible{background:#e0edf6;border-color:#b0ccde;outline:2px solid var(--primary);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.btn-secondary,.button.secondary,.messenger-icon{transition:none}}

/* Единый мастер-логотип: только пропорциональное масштабирование. */
.topbar{height:72px}
.topbar-inner{height:100%;padding:0;flex-direction:row;flex-wrap:nowrap;align-items:center}
.topbar .brand-master{display:block;flex:0 0 auto;width:auto;height:48px;max-width:100%;min-width:0}
.topbar .brand-master img{display:block;width:auto;height:100%;max-width:100%;object-fit:contain}
.header-menu{display:flex;flex:1;justify-content:flex-end;align-items:center;gap:28px;min-width:0}
.topbar .contact-inline{flex-wrap:nowrap;gap:12px}
.topbar .phone{font-size:14px;white-space:nowrap}
.topbar .header-mobile-phone{display:none}
@media(min-width:1280px){.topbar .phone{font-size:18.2px}}
.topbar .messenger-icon{width:32px;height:32px}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:10px;border:0;border-radius:8px;background:transparent;color:var(--text);cursor:pointer}
.nav-toggle[hidden]{display:none}
.nav-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media(max-width:1279px){
  .topbar-inner{gap:8px}
  .topbar .header-mobile-phone{display:block;margin-left:auto;flex:none}
  .nav-toggle{flex:none}
  .nav-toggle:not([hidden]){display:flex}
  .header-menu{display:none;position:absolute;top:100%;left:0;right:0;max-height:calc(100dvh - 72px);overflow-y:auto;padding:16px;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .topbar.menu-open .header-menu{display:flex;flex-direction:column;align-items:stretch;gap:16px}
  .topbar .nav{display:flex;flex-direction:column;order:initial;width:100%;gap:0;font-size:14px}
  .topbar .nav a{padding:10px 0;border-bottom:1px solid var(--line)}
  .topbar .contact-inline{justify-content:space-between;flex-wrap:wrap}
}
@media(max-width:1023px){
  .topbar{height:64px}
  .topbar .brand-master{height:44px}
  .header-menu{max-height:calc(100dvh - 64px)}
}
html{scroll-padding-top:88px}
@media(max-width:380px){
  .topbar-inner{gap:6px}
  .topbar .brand-master{height:36px}
  .topbar .header-mobile-phone{font-size:12px}
  .nav-toggle{width:40px}
}

/* Общая мобильная панель связи: высота как на Стол-АРТ, цвета и шрифт сайта. */
.mobile-contact-bar{display:none}
@media(max-width:1023px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  html{scroll-padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  .mobile-contact-bar{display:flex;position:fixed;inset:auto 0 0;z-index:60;min-height:64px;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--primary);box-shadow:0 -2px 12px rgba(12,31,51,.12)}
  .mobile-contact-bar a{display:flex;flex:1;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:64px;padding:12px;color:white;background:var(--primary);font-family:inherit;font-size:16px;font-weight:800;line-height:1.4}
  .mobile-contact-bar a:last-child{background:var(--primary-dark)}
  .mobile-contact-bar a:hover{background:#17445b}
  .mobile-contact-bar a:focus-visible{outline:3px solid white;outline-offset:-5px}
  .mobile-contact-bar svg{flex:none}
  .header-menu{max-height:calc(100dvh - 128px - env(safe-area-inset-bottom,0px))}
}

/* Прямые ссылки остаются доступны независимо от загрузки внешних виджетов. */
.yandex-rating-widget{flex-direction:column;flex-basis:190px;gap:10px}
.yandex-rating-widget iframe{width:150px;height:50px;flex:none}
.yandex-direct-link{display:inline-block;margin-top:10px;color:var(--primary-dark);font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.yandex-rating-widget .yandex-direct-link{margin-top:0}
.yandex-direct-link:hover{color:var(--primary)}
.yandex-direct-link:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
#yandex-rating{scroll-margin-top:140px}

/* Общая ширина ответов FAQ на всех страницах. */
.faq details p{max-width:70ch;line-height:1.7}