.header{

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    width: 100%;

    z-index: 1000;

    background:rgba(5,10,20,.70);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border-bottom:1px solid rgba(255,255,255,.06);

    transition:
        background .35s ease,
        backdrop-filter .35s ease,
        box-shadow .35s ease;

}

.header.scrolled{

    background: rgba(5,10,20,.62);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    box-shadow: 0 12px 35px rgba(0,0,0,.28);

}


/* =========================
   TRANSPARENT AT TOP — every page has a hero banner right
   below the header, so the same treatment applies everywhere:
   homepage (video), project pages and service pages (photo).
   Once scrolled, the standard blurred bar returns.
========================= */

.header:not(.scrolled){

    background: transparent;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    border-bottom-color: transparent;

    box-shadow: none;

}


/* =========================
   CONTAINER
========================= */

.header .container{

    display:grid;

    grid-template-columns:
        clamp(130px, 21.6346vw - 91.54px, 220px)
        minmax(0, 1fr)
        clamp(190px, 31.25vw - 130.0px, 320px);

    align-items:center;

    box-sizing:border-box;

    width:100%;
    max-width:1400px;

    margin:0 auto;

    padding:0 clamp(18px, 5.2885vw - 36.15px, 40px);

    height:clamp(68px, 4.8077vw + 18.77px, 88px);

}

.header.scrolled .container{

    height:clamp(68px, 4.8077vw + 18.77px, 88px);

}


/* =========================
   LOGO
========================= */

.logo{

    display:flex;

    align-items:center;

    height:100%;

    padding-top: 0px;

}

.logo img{

    height:clamp(36px, 3.3654vw + 1.54px, 50px);

    transform:scaleY(1.1);

    display:block;

    transition:
        transform .35s ease,
        filter .35s ease;

    filter:
        drop-shadow(0 0 4px rgba(22,123,255,.35))
        drop-shadow(0 0 12px rgba(22,123,255,.18));

}

.logo:hover img{

    transform:scaleY(1.1);


    filter:
        drop-shadow(0 0 6px rgba(22,123,255,.8))
        drop-shadow(0 0 18px rgba(22,123,255,.45))
        drop-shadow(0 0 32px rgba(22,123,255,.2));
}

.header.scrolled .logo img{

    height:clamp(36px, 3.3654vw + 1.54px, 50px);

    transform:scaleY(1.1);

}


/* =========================
   MENU
========================= */

.nav{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:clamp(12px, 5.7692vw - 47.08px, 36px);

    position:relative;

    height:100%;

    margin-left:0;

    transform:none;

}

.nav a{

    position:relative;

    display:flex;

    align-items:center;

    height:40px;

    padding:0 clamp(6px, 1.9231vw - 13.69px, 14px);

    color:#FFFFFF;

    text-decoration:none;

    font-size:clamp(13px, 0.9615vw + 3.15px, 17px);

    font-weight:500;

    border-radius:10px;

    white-space:nowrap;

    transition:
        background .25s ease,
        color .25s ease;

}

.nav a:hover{
    background:transparent;
    color:#fff;
}

.nav a.active{

    background:rgba(22,123,255,.12);

    color:#FFFFFF;

    box-shadow:
        inset 0 0 0 1px rgba(22,123,255,.18),
        0 0 18px rgba(22,123,255,.12);
        border: 1px solid #008cff;

}


/* =========================
   NAV SLIDER
========================= */

.nav-slider{
    display:none;
}


/* =========================
   RIGHT MENU
========================= */

.right-menu{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:clamp(8px, 2.8846vw - 21.54px, 20px);

    height:100%;

    transform:none;

}

.right-menu span{

    color:#fff;

    font-size:clamp(11px, 0.9615vw + 1.15px, 15px);

    font-weight:500;

    white-space:nowrap;

}


/* =========================
   BUTTON
========================= */

.right-menu button{

    display:flex;

    align-items:center;

    justify-content:center;

    height:clamp(40px, 1.9231vw + 20.31px, 48px);

    padding:0 clamp(14px, 3.3654vw - 20.46px, 28px);

    background:transparent;

    border:1px solid #167BFF;

    border-radius:12px;

    color:#ffffff;

    font-size:clamp(11px, 0.9615vw + 1.15px, 15px);

    font-weight:600;

    white-space:nowrap;

    transition:.35s;
}

.right-menu button:hover{

    background:#167BFF;

    border-color:#167BFF;

    transform:none;
}

/* ===== "Связаться с нами" → phone number in the same place =====
   Both labels share one grid cell, so the button keeps the width of
   the longer one and nothing jumps when they swap. */
.header .right-menu button{
    display:inline-grid;
    place-items:center;
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
}

.header .right-menu button > span{
    grid-area:1 / 1;
    font:inherit;
    color:inherit;
    white-space:nowrap;
    transition:opacity .28s ease, transform .28s ease;
}

.header .right-menu .geo-cta-phone{
    opacity:0;
    transform:translateY(8px);
}

.header .right-menu .geo-cta-phone::before{
    content:attr(data-phone);
    letter-spacing:.3px;
}

.header .right-menu button.is-phone .geo-cta-text{
    opacity:0;
    transform:translateY(-8px);
}

.header .right-menu button.is-phone .geo-cta-phone{
    opacity:1;
    transform:none;
}