/* ==========================================================
   RESPONSIVE.CSS
========================================================== */

@media (max-width:1200px){

.container{

    max-width:100%;

}

.hero-wrapper{

    grid-template-columns:1fr;

    gap:60px;

}

.hero-content {
    max-width: 100%;

    padding-top: 125px;
    padding-bottom: 32px;
}

.hero-buttons{

    justify-content:center;

}

.hero-features{

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

}

.hero-image{

    max-width:700px;

    margin:auto;

}

.services-grid{

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

}

.advantages-grid{

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

}

.process-grid{

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

}

.quality-grid{

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

}

.statistics-grid{

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

}

.reviews-slider{

    grid-template-columns:1fr;

}

.contacts-wrapper{

    grid-template-columns:1fr;

}

.footer-top{

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

}

.drying-wrapper{

    grid-template-columns:1fr;

}

}
@media (max-width:768px){

section{

    padding:80px 0;

}

.header{

    height:74px;

}

.navigation{

    display:none;

}

.header-buttons{

    display:none;

}

.hero{

    padding-top:120px;

}

.hero h1{

    font-size:40px;

}

.hero p{

    font-size:18px;

}

.hero-buttons{

    flex-direction:column;

}

.hero-buttons .btn{

    width:100%;

}

.hero-features{

    grid-template-columns:1fr;

}

.section-title{

    margin-bottom:45px;

}

.section-title h2{

    font-size:34px;

}

.section-title p{

    font-size:17px;

}

.services-grid{

    grid-template-columns:1fr;

}

.advantages-grid{

    grid-template-columns:1fr;

}

.process-grid{

    grid-template-columns:1fr;

}

.before-after-slider{

    grid-template-columns:1fr;

}

.quality-grid{

    grid-template-columns:1fr;

}

.statistics-grid{

    grid-template-columns:1fr;

}

.contacts-info{

    grid-template-columns:1fr;

}

.footer-top{

    grid-template-columns:1fr;

}

.footer-bottom{

    flex-direction:column;

    gap:12px;

    text-align:center;

}

.drying-gallery{

    grid-template-columns:1fr;

}

.contact-photo{

    order:-1;

}

}
@media (max-width:480px){

.hero h1{

    font-size:32px;

}

.hero p{

    font-size:16px;

}

.logo{

    font-size:22px;

}

.section-title h2{

    font-size:30px;

}

.service-card h3{

    font-size:24px;

}

.advantage-card,

.process-card,

.quality-card,

.review-card,

.contact-card{

    padding:26px;

}

.stat-number{

    font-size:48px;

}

.floating-buttons{

    right:14px;

    bottom:14px;

}

.floating-btn{

    width:56px;

    height:56px;

}

}
/* ==========================
   HERO MOBILE
========================== */

@media (max-width: 992px) {

    .hero-wrapper{
        height:100vh;
    }

    .hero-content{

        left:28px;
        right:28px;

        max-width:none;

    }

    .hero h1{

        font-size:48px;

    }

    .hero p{

        font-size:18px;

        line-height:1.7;

    }

}

@media (max-width:768px){

    .hero-wrapper{

        height:100vh;

    }

    .hero-image img{

        object-position:65% center;

    }

    .hero-overlay{

        background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.70) 0%,
            rgba(0,0,0,.55) 45%,
            rgba(0,0,0,.25) 100%
        );

    }

    .hero-content{

        top:auto;

        bottom:60px;

        left:24px;

        right:24px;

        transform:none;

    }

    .hero h1{

        font-size:36px;

        line-height:1.15;

    }

    .hero p{

        font-size:16px;

        margin-bottom:28px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons .btn{

        width:100%;

        justify-content:center;

    }

    .hero-features{

        display:grid;

        grid-template-columns:1fr;

        gap:12px;

    }

}

@media (max-width:480px){

    .hero h1{

        font-size:30px;

    }

    .hero-badge{

        font-size:13px;

        padding:8px 14px;

    }

}/* =========================================================
   MOBILE — HEADER + HERO
========================================================= */

@media (max-width: 1100px) {

    .header .container {
        min-height: 76px;
        padding: 0 25px;
        gap: 20px;
    }

    .header .navigation {
        gap: 16px;
    }

    .header .navigation a {
        font-size: 13px;
    }

    .header .header-buttons {
        gap: 5px;
    }

    .header .header-buttons a {
        padding: 0 9px;
        font-size: 11px;
    }

    .hero-container {
        padding: 0 30px;
    }

    .hero-content {
        max-width: 620px;
    }

    .hero h1 {
        font-size: clamp(44px, 5.5vw, 62px);
    }

    .hero-subtitle {
        font-size: 19px;
    }

}


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

@media (max-width: 900px) {

    .header .navigation {
        display: none;
    }

    .header .header-buttons {
        margin-left: auto;
    }

    .header .burger {
        display: block;
    }

    .hero {
        min-height: 850px;
        height: 100vh;
    }

    .hero-background img {
        object-position: 68% center;
    }

    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.82) 0%,
                rgba(0, 0, 0, 0.60) 55%,
                rgba(0, 0, 0, 0.25) 100%
            );
    }

    .hero-container {
        padding: 0 25px;
    }

    .hero-content {
        max-width: 650px;
        padding-top: 80px;
    }

}


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

/* =========================================================
   FINAL MOBILE HEADER + HERO
   Блеск Clean
========================================================= */

@media (max-width: 600px) {

    /* =========================
       HEADER
    ========================= */

    .header {
        position: absolute !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        height: 64px !important;

        background: rgba(0, 0, 0, 0.35) !important;

        border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;

        z-index: 9999 !important;

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .header .container {
        width: 100% !important;
        height: 64px !important;
        min-height: 64px !important;

        padding: 0 16px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        gap: 0 !important;
    }


    /* ЛОГОТИП */

    .header .logo {
        display: inline-flex !important;
        align-items: center !important;

        margin: 0 !important;

        font-size: 21px !important;
        line-height: 1 !important;

        color: #fff !important;

        white-space: nowrap !important;

        z-index: 2 !important;
    }

    .header .logo span {
        color: #18b64b !important;
    }


    /* НАВИГАЦИЯ */

    .header .navigation {
        display: none !important;
    }


    /* БЛОК КНОПОК */

    .header .header-buttons {
        display: flex !important;
        align-items: center !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 8px !important;

        flex: 0 0 auto !important;
    }


    /* Скрываем Telegram / WhatsApp / телефон */

    .header .header-buttons .telegram-btn,
    .header .header-buttons .whatsapp-btn,
    .header .header-buttons .phone-btn {
        display: none !important;
    }


    /* MAX */

    .header .header-buttons .max-btn {
        display: inline-flex !important;

        width: auto !important;
        min-width: 52px !important;
        height: 36px !important;
        min-height: 36px !important;

        padding: 0 13px !important;

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

        border-radius: 10px !important;

        background: #7b4cff !important;

        color: #fff !important;

        font-size: 11px !important;
        font-weight: 700 !important;

        line-height: 1 !important;

        text-decoration: none !important;
    }


    /* BURGER */

    .header .burger {
        display: flex !important;

        position: relative !important;

        width: 40px !important;
        height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        background: transparent !important;

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

        flex-direction: column !important;

        gap: 5px !important;

        cursor: pointer !important;

        z-index: 10 !important;
    }

    .header .burger span {
        display: block !important;

        width: 23px !important;
        height: 2px !important;

        margin: 0 !important;

        border-radius: 2px !important;

        background: #fff !important;
    }


    /* =========================
       HERO
    ========================= */

    .hero {
        position: relative !important;

        width: 100% !important;

        min-height: 100svh !important;
        height: 100svh !important;

        padding: 0 !important;

        overflow: hidden !important;
    }


    /* ФОН */

    .hero-background {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        z-index: 0 !important;
    }

    .hero-background img {
        width: 100% !important;
        height: 100% !important;

        display: block !important;

        object-fit: cover !important;

        /* Человек остаётся справа,
           диван и оборудование остаются видны */

        object-position: 67% center !important;
    }


    /* Затемнение */

    .hero-overlay {
        position: absolute !important;

        inset: 0 !important;

        z-index: 1 !important;

        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.55) 0%,
                rgba(0, 0, 0, 0.38) 30%,
                rgba(0, 0, 0, 0.60) 65%,
                rgba(0, 0, 0, 0.88) 100%
            ) !important;
    }


    /* КОНТЕЙНЕР HERO */

    .hero-container {
        position: relative !important;

        z-index: 5 !important;

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;

        padding: 0 16px !important;

        display: flex !important;

        align-items: flex-start !important;

        box-sizing: border-box !important;
    }


    /* КОНТЕНТ */

    .hero-content {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        /*
           64px — высота Header
           + запас 25px
        */

        padding-top: 89px !important;
        padding-bottom: 24px !important;

        box-sizing: border-box !important;
    }


    /* BADGE */

    .hero-badge {
        display: inline-flex !important;

        margin: 0 0 14px !important;

        padding: 7px 12px !important;

        border-radius: 30px !important;

        font-size: 11px !important;
        line-height: 1.2 !important;
    }


    /* H1 */

    .hero h1 {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 0 16px !important;

        font-size: 34px !important;

        line-height: 1.04 !important;

        letter-spacing: -0.8px !important;

        text-align: left !important;
    }

    .hero h1 span {
        display: block !important;
    }


    /* ТЕКСТ */

    .hero-subtitle {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 0 9px !important;

        font-size: 15px !important;

        line-height: 1.4 !important;

        text-align: left !important;
    }

    .hero-description {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 0 20px !important;

        font-size: 12px !important;

        line-height: 1.45 !important;

        text-align: left !important;
    }


    /* КНОПКИ */

    .hero-actions {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 8px !important;

        margin: 0 0 18px !important;
    }

    .hero-btn {
        width: 100% !important;

        min-height: 49px !important;

        height: 49px !important;

        padding: 0 16px !important;

        border-radius: 10px !important;

        font-size: 14px !important;

        box-sizing: border-box !important;
    }


    /* ПРЕИМУЩЕСТВА */

    .hero-features {
        width: 100% !important;

        display: grid !important;

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

        gap: 6px !important;

        margin: 0 !important;
    }

    .hero-feature {
        min-width: 0 !important;

        min-height: 48px !important;

        padding: 6px 5px !important;

        display: flex !important;

        align-items: center !important;

        gap: 5px !important;

        border-radius: 9px !important;
    }

    .hero-feature-icon {
        flex: 0 0 22px !important;

        width: 22px !important;
        height: 22px !important;

        font-size: 10px !important;
    }

    .hero-feature strong {
        font-size: 9px !important;

        line-height: 1.15 !important;
    }

    .hero-feature small {
        font-size: 8px !important;

        line-height: 1.1 !important;
    }

}


/* =========================
   ОЧЕНЬ МАЛЕНЬКИЕ ТЕЛЕФОНЫ
========================= */

@media (max-width: 380px) {

    .header .container {
        padding: 0 13px !important;
    }

    .header .logo {
        font-size: 19px !important;
    }

    .hero-container {
        padding: 0 13px !important;
    }

    .hero-content {
        padding-top: 86px !important;
    }

    .hero h1 {
        font-size: 31px !important;
    }

    .hero-subtitle {
        font-size: 14px !important;
    }

    .hero-description {
        font-size: 11px !important;
    }

    .hero-feature strong {
        font-size: 8px !important;
    }

    .hero-feature small {
        font-size: 7px !important;
    }

}
@media (max-width: 600px) {

    /* Убираем плавающие кнопки связи с правой стороны */
    .floating-contacts,
    .floating-buttons,
    .floating-social,
    .fixed-contacts,
    .contact-float,
    .social-float {
        display: none !important;
    }

}
/* =========================================================
   MOBILE BURGER MENU
========================================================= */

@media (max-width: 600px) {

    /* Само меню */
    .mobile-menu {
        position: fixed !important;

        top: 64px !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        padding: 20px 18px 24px !important;

        background: rgba(10, 10, 10, 0.97) !important;

        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;

        border-top: 1px solid rgba(255,255,255,0.12) !important;

        z-index: 9998 !important;

        opacity: 0 !important;
        visibility: hidden !important;

        transform: translateY(-15px) !important;

        transition:
            opacity 0.25s ease,
            visibility 0.25s ease,
            transform 0.25s ease !important;
    }


    /* Открытое меню */
    .mobile-menu.active {
        opacity: 1 !important;
        visibility: visible !important;

        transform: translateY(0) !important;
    }


    /* Ссылки */
    .mobile-menu a {
        display: flex !important;

        width: 100% !important;

        min-height: 48px !important;

        align-items: center !important;

        padding: 0 4px !important;

        color: #fff !important;

        font-size: 17px !important;
        font-weight: 500 !important;

        text-decoration: none !important;

        border-bottom: 1px solid rgba(255,255,255,0.10) !important;
    }


    .mobile-menu a:last-child {
        border-bottom: none !important;
    }


    .mobile-menu a:active {
        opacity: 0.7 !important;
    }


    /* Бургер */
    .header .burger.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg) !important;
    }

    .header .burger.active span:nth-child(2) {
        opacity: 0 !important;
    }

    .header .burger.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg) !important;
    }


    .header .burger span {
        transition:
            transform 0.25s ease,
            opacity 0.2s ease !important;
    }

}


/* На компьютере мобильное меню вообще не показываем */
@media (min-width: 601px) {

    .mobile-menu {
        display: none !important;
    }

}
/* =========================================================
   ПЛАВАЮЩАЯ КНОПКА ЗВОНКА — MOBILE
========================================================= */

.mobile-call-button {
    display: none;
}


@media (max-width: 600px) {

    .mobile-call-button {

        position: fixed;

        right: 20px;
        bottom: 22px;

        width: 64px;
        height: 64px;

        display: flex;

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

        border-radius: 50%;

        background: #19c45b;

        text-decoration: none;

        z-index: 10000;

        box-shadow:
            0 8px 25px rgba(0, 0, 0, 0.30);

        animation: phone-button-pulse 2.5s infinite;
    }


    /* Иконка */

    .mobile-call-icon {

        position: relative;

        width: 64px;
        height: 64px;

        display: flex;

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

        border-radius: 50%;

        background: #19c45b;

        z-index: 3;
    }


    .mobile-call-icon svg {

        width: 30px;
        height: 30px;

        fill: #ffffff;

        transform: rotate(-18deg);

        animation: phone-icon-shake 2.8s ease-in-out infinite;
    }


    /* Анимированные кольца */

    .mobile-call-ring {

        position: absolute;

        left: 50%;
        top: 50%;

        width: 64px;
        height: 64px;

        border-radius: 50%;

        border: 2px solid #19c45b;

        transform: translate(-50%, -50%);

        pointer-events: none;

        z-index: 1;

        opacity: 0;
    }


    .ring-1 {
        animation: phone-ring 2.5s ease-out infinite;
    }


    .ring-2 {
        animation: phone-ring 2.5s ease-out infinite 1.25s;
    }


    /* Пульсация самой кнопки */

    @keyframes phone-button-pulse {

        0% {
            transform: scale(1);
        }

        8% {
            transform: scale(1.06);
        }

        16% {
            transform: scale(1);
        }

        100% {
            transform: scale(1);
        }
    }


    /* Расходящиеся кольца */

    @keyframes phone-ring {

        0% {
            width: 64px;
            height: 64px;
            opacity: 0.65;
        }

        100% {
            width: 112px;
            height: 112px;
            opacity: 0;
        }
    }


    /* Небольшая анимация телефонной трубки */

    @keyframes phone-icon-shake {

        0%,
        75%,
        100% {
            transform: rotate(-18deg);
        }

        80% {
            transform: rotate(-28deg);
        }

        85% {
            transform: rotate(-8deg);
        }

        90% {
            transform: rotate(-25deg);
        }

        95% {
            transform: rotate(-12deg);
        }
    }


    /* Когда открыто Burger-меню,
       кнопка остаётся под меню */

    .mobile-menu.active ~ .mobile-call-button {
        z-index: 9997;
    }

}


@media (min-width: 601px) {

    .mobile-call-button {
        display: none !important;
    }

}
/* =========================================
   МОБИЛЬНАЯ ШАПКА — MAX + TELEGRAM + WHATSAPP
========================================= */

@media (max-width: 600px) {

    .header .container {
        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 8px;
    }

    .header-buttons {
        display: flex;
        align-items: center;
        gap: 6px;

        margin-left: auto;
        margin-right: 8px;
    }

    /* MAX */

    .header-buttons .max-btn {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 52px;
        height: 42px;

        padding: 0;

        border-radius: 12px;

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

    /* Telegram */

    .header-buttons .telegram-btn {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 42px;
        height: 42px;

        padding: 0;

        border-radius: 12px;

        font-size: 0;
    }

    /* WhatsApp */

    .header-buttons .whatsapp-btn {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 42px;
        height: 42px;

        padding: 0;

        border-radius: 12px;

        font-size: 0;
    }

    /* Телефон в шапке на мобильном не нужен —
       остаётся большая плавающая кнопка снизу */

    .header-buttons .phone-btn {
        display: none;
    }

}
/* =====================================================
   ФИНАЛЬНАЯ МОБИЛЬНАЯ ШАПКА
   MAX + TELEGRAM + WHATSAPP + BURGER
===================================================== */

@media (max-width: 600px) {

    /* Шапка */
    .header .container {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* Блок кнопок */
    .header .header-buttons {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 7px !important;
        margin-left: auto !important;
        margin-right: 8px !important;
    }

    /* Скрываем телефон */
    .header .header-buttons .phone-btn {
        display: none !important;
    }

    /* -------------------------
       MAX
    ------------------------- */

    .header .header-buttons .max-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 72px !important;
        height: 48px !important;

        padding: 0 !important;
        margin: 0 !important;

        border-radius: 14px !important;

        flex: 0 0 72px !important;

        font-size: 14px !important;
        line-height: 1 !important;
    }


    /* -------------------------
       TELEGRAM
    ------------------------- */

    .header .header-buttons .telegram-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 40px !important;
        height: 40px !important;

        padding: 0 !important;
        margin: 0 !important;

        border-radius: 50% !important;

        flex: 0 0 40px !important;

        background: #229ED9 !important;

        overflow: hidden !important;
    }

    .header .header-buttons .telegram-btn svg {
        display: block !important;

        width: 21px !important;
        height: 21px !important;

        margin: 0 !important;
        padding: 0 !important;

        fill: #ffffff !important;
    }


    /* -------------------------
       WHATSAPP
    ------------------------- */

    .header .header-buttons .whatsapp-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 40px !important;
        height: 40px !important;

        padding: 0 !important;
        margin: 0 !important;

        border-radius: 50% !important;

        flex: 0 0 40px !important;

        background: #25D366 !important;

        overflow: hidden !important;
    }

    .header .header-buttons .whatsapp-btn svg {
        display: block !important;

        width: 22px !important;
        height: 22px !important;

        margin: 0 !important;
        padding: 0 !important;

        fill: #ffffff !important;
    }


    /* -------------------------
       BURGER
    ------------------------- */

    .header .burger {
        display: flex !important;

        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        width: 40px !important;
        height: 40px !important;

        padding: 0 !important;
        margin: 0 !important;

        flex: 0 0 40px !important;
    }

}
/* Фикс белой полосы (смещения экрана из-за анимации кнопки) */
html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative !important;
}