/* База */
* { margin: 0; padding: 0; box-sizing: border-box;  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }
:root{ --header-h: 56px; }
main{
    min-height: calc(100vh);
}
/*--------------------------- ХЕАДЕР -------------------------*/
header {
    position: fixed; top: 0; z-index: 50;
    left: 0; right: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 16px; background: #fff; border-bottom: 1px solid #e7e7e7;
}
.logo { font-size: 20px; font-weight: 700; color: #444; }
header .btn{
    transition: .2s ease;
}
nav { display: flex; gap: 30px; font-weight: bold}
/*фиксим щааааааааааа*/
nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.mobile-nav{
    position: relative;
}
nav a { text-decoration: none; color: #333; font-size: 14px; transition: color .2s; }
nav a:hover { color: #005eff; }

.header-actions { display: flex; align-items: center; gap: 14px; }
header .btn { padding: 8px 40px; border-radius: 6px; border: none; cursor: pointer; font-size: 14px; }
.btn-order { background: #005eff; color: #fff; font-weight: 700; }

.socials { display: flex; gap: 10px; align-items: center;}

.socials a {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
}

.logo {
    font-size: 22px;
    font-weight: 700;
    color: #005eff;
}
.logo-dot {
    color: #000;
}

.socials a svg { fill: #333; transition: fill .2s; }
.socials a:hover svg { fill: #005eff; }

.socials a img { transition: filter .2s; }
.socials a:hover img {
    filter: invert(28%) sepia(92%) saturate(2763%) hue-rotate(205deg) brightness(96%) contrast(101%);
}

.burger { display: none; background: none; border: none; cursor: pointer; padding: 6px; margin-right: 8px; }
.burger span { display: block; width: 22px; height: 2px; background: #333; margin: 4px 0; transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] .l1 { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .l2 { opacity: 0; }
.burger[aria-expanded="true"] .l3 { transform: translateY(-6px) rotate(-45deg); }

.btn-order:hover{
    background: #0044bf;
    transform: scale(102%);
}
.mobile-panel { display: none; }

@media (max-width: 1024px) {
    nav a { font-size: 13px; }
    .btn { padding: 6px 12px; font-size: 13px; }
}
@media (max-width: 1080px) {
    .socials{
        display: none;
    }
}

@media (max-width: 900px) {
    .socials{
        display: block;
    }
    #btn-order-header { display: none; }

    header { gap: 10px; }
    nav { display: none; }
    .burger { display: inline-block; }

    /* новая реализация: fixed-оверлей под хедером */
    .mobile-panel{
        position: absolute;
        display: none;
        top: var(--header-h, 56px);
        left: 0; right: 0;
        z-index: 999;                       /* поверх контента */
        background: #fff;
        border-top: 1px solid #eee;

        /* размеры и прокрутка содержимого */
        max-height: calc(100dvh - var(--header-h, 56px));
        overflow: auto;
    }
    .mobile-panel.open{
        opacity: 1;
        display: block;
        transition-delay: 0s;
    }

    .mobile-inner { padding: 12px 16px; display: grid; gap: 15px;}
    .mobile-nav { display: grid; gap: 15px; }
    .mobile-nav a { text-decoration: none; color: #333; font-weight: bold; }
    .mobile-nav a:hover { color: #005eff; }
    .btn-order { width: 100%; text-align: center; padding: 8px 16px; font-size: 15px; }
}
@media (max-width: 480px) {
    .logo { font-size: 18px; }
}
/*--------------------------- ФУТЕР -------------------------*/
:root{
    --brand:#005eff;
    --bg:#111827;
    --text: #ffffff;
    --muted:#b7bbc3;
}

footer .container{max-width:1200px;margin:0 auto;padding:0 16px}

footer{background:var(--bg);color:var(--text);padding:40px 0 20px}

.grid{display:grid;gap:28px;grid-template-columns:repeat(12,1fr)}
.col{display:flex;flex-direction:column;gap:8px}
.col h4{margin:0 0 10px;font-size:15px;font-weight:800;color:#fff}
.col a{color:#cfd2d8;text-decoration:none;font-size:14px}
.col a:hover{color:#fff}

.contacts .contact{display:flex;align-items:center;gap:10px}
.contacts .contact svg{width:18px;height:18px;fill:#9aa0a6}
.contacts .value{font-size:18px;font-weight:800;color:#fff}
.contacts .value a{color:#fff;text-decoration:none}
.contacts .value a:hover{color:#9fc1ff}
.contacts .sub{margin-top:4px;color:var(--muted);font-size:14px}

.request form{display:flex;gap:8px;flex-wrap:wrap}
.request input[type="email"]{flex:1 1 260px;background:#fff;border:none;border-radius:6px;padding:10px 12px;font-size:14px}
.request button{background:var(--brand);color:#fff;border:none;border-radius:6px;padding:10px 16px;font-weight:700;cursor:pointer;transition: .2s ease;}
.request button:hover{background:#0044bf;transform: scale(102%)}

.icons{display:flex;gap:10px;margin-top:6px}
.icons a{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#444;transition:background .2s}
.icons a:hover{background:var(--brand)}
.icons a svg{fill:#fff}

.pay{display:flex;align-items:center;gap:24px;margin-top:28px;padding-top:18px;border-top:1px solid #45484e;color:var(--muted);font-size:14px;flex-wrap:wrap}
.pay .logos{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-inline: auto;justify-content: space-evenly}
.pay .logos img,.pay .logos svg{height:50px}

.about{grid-column:span 3}
.client{grid-column:span 2}
.jobs{grid-column:span 2}
.contacts{grid-column:span 3}
.social{grid-column:span 2}
.request{grid-column:span 12}
footer input{
    max-height: 3rem;
}
@media (max-width:1024px){
    .about{grid-column:span 4}
    .client{grid-column:span 4}
    .jobs{grid-column:span 4}
    .contacts{grid-column:span 6}
    .social{grid-column:span 6}
}
@media (max-width:640px){
    .grid{grid-template-columns:repeat(6,1fr)}
    .col{grid-column:span 6}
    .request form{flex-direction:column}
    .request button{width:100%}
    .pay .logos{
        gap:8px;
    }
}
/* 1) Никогда не шире вьюпорта + срезаем горизонтальный скролл */
html, body { max-width: 100vw; overflow-x: clip; } /* вместо hidden — clip, чтобы не ломать sticky */
header, footer { width: 100%; max-width: 100vw; }

/* 2) Безопасные отступы по краям (iOS вырез, и чтобы паддинги не «вылезали») */
header, footer {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    box-sizing: border-box;
}

/* 3) Центр-меню не должно расширять header из-за transform/абсолютного позиционирования */
header nav {
    max-width: calc(100vw - 32px); /* минус паддинги хедера */
    overflow: hidden;              /* на всякий случай, если пунктов много */
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 4) Соц-иконки и любые картинки/логотипы во footer не ломают ширину */
footer img, footer svg { max-width: 100%; height: auto; }

/* 5) Контейнеры внутри footer/headers всегда в рамках вьюпорта */
footer .container { max-width: min(1200px, 100vw); box-sizing: border-box; }

/* 6) Мобильная панель тоже в рамках экрана */
@media (max-width: 900px) {
    .mobile-panel {
        left: 0; right: 0;
        max-width: 100vw;
        overflow-x: hidden;
    }
}