/*=========================================
SERVICE PAGE
=========================================*/

.service-page{

    min-height:100vh;

    display:flex;
    flex-direction:column;

}/*=========================================
SERVICE HERO
=========================================*/

.hero.hero-service{

    position:relative;

    min-height:600px;

    display:flex;
    align-items:center;

    padding-top:0;
    padding-bottom:0;

    overflow:hidden;

    background:
        url("../images/backgrounds/service.webp")
        center / cover no-repeat;

}/*-----------------------------------------
HERO CONTAINER
-----------------------------------------*/

.hero.hero-service .hero-container{

    position:relative;
    z-index:2;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:60px;

    width:100%;

    padding-top:170px;

    margin-top:0;

    transform:none;

}/*-----------------------------------------
HERO CONTENT
-----------------------------------------*/

.hero-service .hero-content{

    flex:1;

}.hero-service h1{

    max-width:620px;

    margin:0 0 22px;

    font-size:62px;

    line-height:1.05;

    font-weight:700;

    color:#fff;

}.hero-service .hero-text{

    max-width:620px;

    margin:0 0 34px;

    font-size:22px;

    line-height:1.7;

    color:#C7D1DE;

}/*-----------------------------------------
HERO BUTTONS
-----------------------------------------*/

.hero-service .hero-buttons{

    display:flex;

    gap:18px;

}.hero-service .btn{

    padding:20px 42px;

    font-size:18px;

}/*=========================================
SERVICE HERO IMAGE
=========================================*/

.hero-service .hero-image{

    flex:1;

    position:relative;

    top:-70px;

    width:100%;
    height:430px;

    display:block;

    overflow:hidden;

    border-radius:24px;

    background:#0D1626;

    border:1px solid rgba(120,185,255,.25);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.04),
        0 0 30px rgba(22,123,255,.12),
        0 20px 50px rgba(0,0,0,.28);

    transition:
        box-shadow .45s ease,
        border-color .45s ease;

}/*-----------------------------------------
IMAGE

ВАЖНО:
transform !important отключает
глобальный parallax, который двигал
картинку при скролле.
-----------------------------------------*/

.hero-service .hero-image img{

    display:block;

    width:100%;
    height:100%;

    max-width:none;

    object-fit:cover;

    object-position:center;

    margin:0;
    padding:0;

    transform:scale(1) !important;

    filter:none;

    box-shadow:none;

    will-change:transform;

    transition:
        transform .7s cubic-bezier(.22,1,.36,1);

}/*-----------------------------------------
IMAGE HOVER

Только увеличение.
Никакого движения по Y/X.
-----------------------------------------*/

.hero-service .hero-image:hover img{

    transform:scale(1.05) !important;

}.hero-service .hero-image:hover{

    border-color: rgba(120,185,255,.25);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.04),
        0 0 45px rgba(22,123,255,.28),
        0 20px 50px rgba(0,0,0,.28);

}/*-----------------------------------------
IMAGE OVERLAY
-----------------------------------------*/

.hero-service .hero-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(5,10,20,.35),
            rgba(5,10,20,0)
        );

    pointer-events:none;

}/*=========================================
DISABLE MAIN HERO ELEMENTS
=========================================*/

.hero-service .hero-subtitle,
.hero-service .hero-stats,
.hero-service .hero-bg-logo,
.hero-service .hero-grid{

    display:none;

}/*-----------------------------------------
GLOW
-----------------------------------------*/

.hero-service .hero-glow{

    width:420px;
    height:180px;

    bottom:20px;

    opacity:.28;

}/*=========================================
SERVICE PRODUCTS
=========================================*/

.service-products{

    padding:30px 0 90px;

    background:#030914;

}/*-----------------------------------------
SECTION HEADER
-----------------------------------------*/

.service-section-header{

    margin-bottom:22px;

}.service-section-header h2{

    margin:0;

    font-size:46px;

    line-height:1.2;

    font-weight:700;

    color:#fff;

}.service-section-header h2::after{

    content:"";

    display:block;

    width:36px;
    height:3px;

    margin-top:10px;

    border-radius:10px;

    background:#1683ff;

}/*=========================================
PRODUCT GRID
=========================================*/

.service-products-grid{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:18px;

}/*=========================================
PRODUCT CARD
=========================================*/

.service-product-card{

    min-height:390px;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    background:#07111f;

    border:1px solid
        rgba(90,120,160,.22);

    border-radius:14px;

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        border-color .35s ease,
        box-shadow .35s ease;

}/*-----------------------------------------
CARD HOVER
-----------------------------------------*/

.service-product-card:hover{

    transform:translateY(-6px);

    border-color:
        rgba(22,131,255,.55);

    box-shadow:
        0 18px 45px rgba(0,0,0,.35);

}/*=========================================
PRODUCT IMAGE
=========================================*/

.service-product-image{

    position:relative;

    height:230px;

    padding:20px;

    display:flex;

    align-items:center;
    justify-content:center;

    overflow:hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(20,100,180,.10),
            transparent 65%
        );

}/*-----------------------------------------
PRODUCT IMAGE IMG
-----------------------------------------*/

.service-product-image img{

    width:100%;
    height:100%;

    display:block;

    object-fit:contain;

    transform:scale(1);

    transition:
        transform .7s cubic-bezier(.22,1,.36,1);

}/*-----------------------------------------
PRODUCT IMAGE HOVER

Как у Project:
картинка увеличивается,
а контейнер остаётся на месте.
-----------------------------------------*/

.service-product-card:hover
.service-product-image img{

    transform:scale(1.05);

}/*=========================================
PRODUCT CONTENT
=========================================*/

.service-product-content{

    padding:0 22px 24px;

}/*-----------------------------------------
TITLE HOVER
-----------------------------------------*/

.service-product-card:hover
.service-product-content h3{

    color:#4AA6FF;

    transform:translateX(3px);

}/*=========================================
SERVICE ICON
=========================================*/

.service-icon{

    margin-bottom:20px;

    font-size:32px;

    color:#167BFF;

}/*=========================================
SERVICE PARTNERS
=========================================*/

.service-partners{

    padding:10px 0 90px;

    background:#030914;

}.service-partners .service-section-header{

    margin-bottom:35px;

}/*-----------------------------------------
PARTNERS GRID
-----------------------------------------*/

.service-partners-grid{

    display:grid;

    grid-template-columns:
        repeat(5,1fr);

    gap:18px;

}/*=========================================
PARTNER CARD
=========================================*/

.service-partner{

    height:120px;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:25px;

    background:#07111f;

    border:1px solid
        rgba(90,120,160,.20);

    border-radius:12px;

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;

}/*-----------------------------------------
PARTNER HOVER
-----------------------------------------*/

.service-partner:hover{

    transform:translateY(0);

    border-color:
        rgba(22,131,255,.5);

    background:#081526;

    box-shadow:
        0 12px 30px rgba(0,0,0,.25);

}/*-----------------------------------------
PARTNER LOGO
-----------------------------------------*/

.service-partner img{

    max-width:100%;
    max-height:55px;

    display:block;

    object-fit:contain;

    opacity:1;

    filter:none;

    transform:scale(1);

    transition:
        transform .3s ease;

}.service-partner:hover img{

    opacity:1;

    filter:grayscale(0%);

    transform:scale(1.03);

}


/*=========================================
TABLET
=========================================*/

@media (max-width:992px) and (hover: none) and (pointer: coarse) {

    /*-------------------------------------
    HERO
    -------------------------------------*/

    .hero.hero-service{

        min-height:auto;

        padding-top:120px;
        padding-bottom:70px;

    }


    .hero.hero-service .hero-container{

        flex-direction:column;

        align-items:center;

        gap:45px;

    }


    .hero-service .hero-content{

        width:100%;

    }


    .hero-service h1{

        max-width:700px;

        font-size:44px;

    }


    .hero-service .hero-text{

        font-size:19px;

    }


    /*-------------------------------------
    HERO IMAGE
    -------------------------------------*/

    .hero-service .hero-image{

        width:100%;

        max-width:700px;

        height:400px;

    }


    /*-------------------------------------
    PRODUCTS
    -------------------------------------*/

    .service-products{

        padding:70px 0;

    }


    .service-products-grid{

        grid-template-columns:
            repeat(2,1fr);

    }


    /*-------------------------------------
    PARTNERS
    -------------------------------------*/

    .service-partners-grid{

        grid-template-columns:
            repeat(3,1fr);

    }

}


/*=========================================
MOBILE
=========================================*/

@media (max-width:768px) and (hover: none) and (pointer: coarse) {

    /*-------------------------------------
    HERO
    -------------------------------------*/

    .hero.hero-service{

        padding-top:100px;

        padding-bottom:60px;

    }


    .hero.hero-service .hero-container{

        gap:35px;

    }


    .hero-service h1{

        font-size:36px;

        line-height:1.08;

    }


    .hero-service .hero-text{

        font-size:18px;

        line-height:1.6;

    }


    /*-------------------------------------
    BUTTONS
    -------------------------------------*/

    .hero-service .hero-buttons{

        flex-direction:column;

        gap:12px;

    }


    .hero-service .btn{

        width:100%;

        justify-content:center;

        text-align:center;

    }


    /*-------------------------------------
    HERO IMAGE
    -------------------------------------*/

    .hero-service .hero-image{

        width:100%;

        height:320px;

        border-radius:20px;

    }


    /*-------------------------------------
    PRODUCTS
    -------------------------------------*/

    .service-products{

        padding:55px 0;

    }


    .service-section-header{

        margin-bottom:25px;

    }


    .service-section-header h2{

        font-size:28px;

    }


    .service-products-grid{

        grid-template-columns:1fr;

        gap:14px;

    }


    .service-product-card{

        min-height:0;

    }


    .service-product-image{

        height:210px;

    }


    .service-product-content{

        padding:
            0 18px 22px;

    }


    .service-product-content h3{

        font-size:18px;

    }


    /*-------------------------------------
    PARTNERS
    -------------------------------------*/

    .service-partners{

        padding:55px 0 70px;

    }


    .service-partners-grid{

        grid-template-columns:
            repeat(2,1fr);

        gap:12px;

    }


    .service-partner{

        height:100px;

        padding:18px;

    }

}

/* =========================================
   PARTNERS — TABLET
========================================= */

@media (max-width: 1000px)  and (hover: none) and (pointer: coarse) {

    .service-partners-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}


/* =========================================
   PARTNERS — MOBILE
========================================= */

@media (max-width: 600px)  and (hover: none) and (pointer: coarse) {

    .service-partners {
        padding: 55px 0 70px;
    }

    .service-partners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .service-partner {
        height: 100px;
        padding: 18px;
    }

}/* =====================================================
   НАСОСНОЕ ОБОРУДОВАНИЕ — НОВЫЙ БЛОК
===================================================== */

.pump-equipment{
    position: relative;
    z-index: 1;

    /* Точно такой же фон, как у остальных service-блоков.
       Из-за отдельного #050A14 + radial-gradient здесь появлялся
       заметный шов между hero и контентом. */
    padding: 30px 0 30px;
    background: #030914;
}/* =====================================================
   HEADER
===================================================== */

.pump-equipment-header{
    margin-bottom: 55px;
}.pump-equipment-header span{
    display: block;

    margin-bottom: 14px;

    color: #167BFF;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 2px;
    text-transform: uppercase;
}.pump-equipment-header h2{
    margin: 0;

    color: #fff;

    font-size: 46px;
    line-height: 1.15;
    font-weight: 700;
}/* Синяя акцентная полоска под заголовком «Что поставляем» */
.pump-equipment-header h2::after{
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    margin-top: 10px;
    border-radius: 10px;
    background: #1683ff;
}/* =====================================================
   ОСНОВНАЯ СЕТКА
===================================================== */

.pump-layout{
    display: grid;

    grid-template-columns: 320px minmax(0, 1fr);

    gap: 45px;

    align-items: start;
}/* =====================================================
   ЛЕВОЕ МЕНЮ
===================================================== */

.pump-navigation{
    position: relative;

    display: flex;
    flex-direction: column;

    border-top: 1px solid rgba(255,255,255,.08);
}.pump-nav-item{
    position: relative;

    width: 100%;

    display: flex;
    align-items: center;

    gap: 18px;

    padding: 20px 20px 20px 24px;

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

    background: transparent;

    color: #9BA8BC;

    text-align: left;

    font-family: inherit;

    font-size: 15px;
    font-weight: 500;

    cursor: pointer;

    transition:
        color .3s ease,
        background .35s ease,
        font-weight .1s ease;
}.pump-nav-item span{
    min-width: 24px;

    color: #167BFF;

    font-size: 13px;
    font-weight: 700;

    opacity: .8;
}.pump-nav-item::before{
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background: #167BFF;

    opacity: 0;

    transition: opacity .3s ease;
}.pump-nav-item:hover{
    color: #fff;
}/* Компрессорное оборудование: подсветка пункта при наведении
   (без стрелочки — только фон, чтобы выделить секцию). */
.pump-nav-item:hover{
    background: linear-gradient(90deg, rgba(22,123,255,.15), rgba(22,123,255,0));
}.pump-nav-item.active{
    color: #fff;

    font-weight: 700;

    background:
        linear-gradient(90deg, rgba(22,123,255,.15), rgba(22,123,255,0));
}.pump-nav-item.active::before{
    opacity: 1;
}/* =====================================================
   ПРАВАЯ ЧАСТЬ
===================================================== */

.pump-content{
    min-width: 0;

    /* Все панели находятся в одной grid-ячейке.
       Неактивные панели НЕ удаляются из layout, поэтому все они
       участвуют в расчёте высоты. Высота правого блока всегда равна
       самой высокой панели, а «Наши партнёры» и footer не прыгают
       при переключении пунктов меню. */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: start;
}/* =====================================================
   ПАНЕЛЬ
===================================================== */

.pump-panel{
    display: block;
    grid-area: 1 / 1;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    position: relative;

    padding: 42px;

    background:
        linear-gradient(
            rgba(5, 14, 28, .72),
            rgba(5, 14, 28, .78)
        ),
        url("../images/backgrounds/pump-bg.webp")
        center / cover no-repeat;

    border: 1px solid rgba(89, 154, 255, .18);

    border-radius: 18px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.025);
}.pump-panel.active{
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    z-index: 1;

    animation: pumpFade .4s ease;
}


@keyframes pumpFade {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}/* =====================================================
   ВЕРХ ПАНЕЛИ
===================================================== */

.pump-panel-top{
    display: flex;

    align-items: flex-start;

    gap: 24px;

    margin-bottom: 38px;

    padding-bottom: 30px;

    border-bottom: 1px solid rgba(255,255,255,.08);
}.pump-number{
    display: flex;

    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    flex-shrink: 0;

    border: 1px solid rgba(22,123,255,.4);

    border-radius: 50%;

    color: #167BFF;

    font-size: 15px;
    font-weight: 700;

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

    box-shadow:
        0 0 25px rgba(22,123,255,.08);
}.pump-label{
    display: block;

    margin-bottom: 9px;

    color: #7F8CA3;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}.pump-panel h3{
    margin: 0;

    color: #fff;

    font-size: 32px;
    line-height: 1.2;

    font-weight: 700;
}/* =====================================================
   СПИСОК
===================================================== */

.pump-list{
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px 22px;
}.pump-list-item{
    position: relative;

    display: flex;
    align-items: center;

    min-height: 58px;

    padding: 15px 18px 15px 48px;

    background: rgba(255,255,255,.025);

    border: 1px solid rgba(255,255,255,.055);

    border-radius: 10px;

    color: #D6DEEA;

    font-size: 15px;
    line-height: 1.55;

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;
}.pump-list-item::before{
    content: "◆";

    position: absolute;
    left: 20px;

    color: #167BFF;

    font-size: 9px;
}.pump-list-item:hover{
    transform: translateY(-2px);

    border-color: rgba(22,123,255,.35);

    background: rgba(22,123,255,.06);
}/* =====================================================
   ОПИСАНИЕ
===================================================== */

.pump-description{
    position: relative;

    margin-top: 32px;

    padding: 25px 28px 25px 30px;

    border-left: 3px solid #167BFF;

    background:
        linear-gradient(
            90deg,
            rgba(22,123,255,.09),
            rgba(22,123,255,.015)
        );

    color: #AAB6C8;

    font-size: 15px;

    line-height: 1.8;

    border-radius: 0 10px 10px 0;
}


/* =====================================================
   ADAPTIVE
===================================================== */

@media (max-width: 1100px) {

    .pump-layout {
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 30px;
    }

    .pump-panel {
        padding: 32px;
    }

    .pump-list {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 800px) {

    .pump-equipment {
        padding: 80px 0 100px;
    }

    .pump-layout {
        grid-template-columns: 1fr;
    }

    .pump-navigation {
        position: relative;

        top: auto;

        flex-direction: row;

        overflow-x: auto;
    }

    .pump-nav-item {
        min-width: 220px;

        border-top: none;
    }

    .pump-equipment-header h2 {
        font-size: 38px;
    }

}


@media (max-width: 560px) {

    .pump-equipment-header h2 {
        font-size: 32px;
    }

    .pump-panel {
        padding: 25px 20px;
    }

    .pump-panel-top {
        gap: 15px;
    }

    .pump-number {
        width: 48px;
        height: 48px;
    }

    .pump-panel h3 {
        font-size: 25px;
    }

    .pump-list-item {
        padding-left: 42px;
    }

}/* =====================================================
   EQUIPMENT TABLE
   Empty table placeholder for service pages
===================================================== */

.equipment-table{
    margin-top: 32px;
}.equipment-table-grid th:last-child{
    border-right: none;
}

@media (max-width: 560px) {
    .equipment-table-title {
        font-size: 16px;
    }

    .equipment-table-grid th {
        padding: 12px 10px;
        font-size: 10px;
        letter-spacing: .4px;
    }
}/* =====================================================
   PARTNERS — AUTOMATIC CAROUSEL
===================================================== */

.service-partners-grid{
    display: flex;
    grid-template-columns: none;
    gap: 18px;
    overflow: hidden;
    width: 100%;
    will-change: transform;
}.service-partners-grid .service-partner{
    flex: 0 0 calc((100% - 72px) / 5);
    min-width: 0;
}.service-partners-grid.is-animating{
    transition: transform 0.65s cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 1000px) {
    .service-partners-grid .service-partner {
        flex-basis: calc((100% - 36px) / 3);
    }
}

@media (max-width: 600px) {
    .service-partners-grid {
        gap: 12px;
    }

    .service-partners-grid .service-partner {
        flex-basis: calc((100% - 12px) / 2);
    }
}/* =====================================================
   PARTNERS — SMOOTH CAROUSEL FIX
   Отдельное окно отвечает за обрезку, а лента — за движение.
===================================================== */
.partners-carousel-viewport{
    width: 100%;
    overflow: hidden;
}.partners-carousel-viewport .service-partners-grid{
    overflow: visible;
    width: 100%;
}


/* =====================================================
   ЕДИНЫЙ ФОРМАТ СТРАНИЦ НАПРАВЛЕНИЙ
   Насосное оборудование — эталон
===================================================== */

@media (min-width: 993px) {
    .hero.hero-service {
        min-height: 600px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .hero.hero-service .hero-container {
        min-height: 600px;
        padding-top: 120px;
        padding-bottom: 0;
        margin-top: 0;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 60px;
    }

    .hero-service .hero-content,
    .hero-service .hero-image {
        flex: 1 1 0;
    }

    .hero-service .hero-image {
        width: 100%;
        height: 430px;
        top: -70px;
        flex-shrink: 0;
    }

    .pump-layout {
        align-items: start;
    }

    .pump-navigation,
    .pump-content {
        align-self: start;
    }
}.hero.hero-service.electric-motors .hero-container{
    padding-top: 145px;
}.hero.hero-service.compressor .hero-container{
    padding-top: 145px;
}.hero.hero-service.integrated-supply .hero-container{
    padding-top: 145px;
    }.hero.hero-service.reengineering .hero-container{
    padding-top: 145px;
}.hero.hero-service.hero-pumping .hero-container{
    padding-top: 145px;
}.hero.hero-service.hero-pumping .hero-image{
    transform: translateY(0px);
}.hero.hero-service.electric-motors .hero-image{
    transform: translateY(0px);
}.hero.hero-service.compressor .hero-image{
    transform: translateY(0px);
}.hero.hero-service.integrated-supply .hero-image{
    transform: translateY(0px);
}.hero.hero-service.reengineering .hero-image{
    transform: translateY(0px);
}/* =========================================================
   SERVICE CONTENT BEFORE FOOTER
   Точно такое же перекрытие, как у главной страницы.
========================================================= */

.service-partners{
    position: relative;
    z-index: 2;
    margin-bottom: -64px;
    padding-bottom: 154px;
    border-radius: 0 0 64px 64px;
    overflow: hidden;
}/* =====================================================
   PARTNERS — endless draggable marquee
===================================================== */
.partners-carousel-viewport.is-marquee{
    cursor:grab;
    touch-action:pan-y;              /* vertical page scroll still works on phones */
    -webkit-user-select:none;
    user-select:none;
    /* soft fade at both edges */
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    padding:6px 0;                   /* room for the card hover lift */
}.partners-carousel-viewport.is-marquee.is-dragging{ cursor:grabbing; }.partners-carousel-viewport.is-marquee .service-partners-grid{
    transition:none !important;
    will-change:transform;
}.partners-carousel-viewport.is-marquee .service-partner img{ pointer-events:none; }