/*МОБИЛЬНЫЙ-----------------------------------------------------------------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}




img {
    max-width: 100%;
    height: auto;
    display: block;
}
* {
    min-width: 0;
}

html {
   
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    padding-top: 65px;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: 'Montserrat', sans-serif; /* заголовки */
    line-height: 1.2;
    margin-bottom: 0.5em;
}

blockquote, .highlight {
    font-family: 'Playfair Display', serif; /* цитаты, выделенные блоки */
    font-style: italic;
    margin: 10px 0;
}

/* header фиксированный */
/* ================= HEADER ================= */

header {
    padding: 8px 15px;
    background-color: #006600;
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

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

/* логотип */
.logo {
    display: flex;
    align-items: center;
}

.logo-img {
    height: clamp(50px, 5vw, 60px);
    width: auto;
}

/* бургер */
.menu-toggle {
    font-size: 2rem;
    cursor: pointer;
}


/* ================= SIDEBAR ================= */

.sidebar-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 0; 
    height: 100vh;
    background-color: #444;
    z-index: 2000;
    overflow-x: hidden; 

    display: flex;
    flex-direction: column;
    padding-top: 60px; /* под header */

    transition: width 0.3s ease; /*анимируем width */
}

    /* открытие */
    .sidebar-nav.active {
        width: 280px;
    }

    /* меню */
    .sidebar-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .sidebar-nav li {
        border-bottom: 1px solid #555;
    }

        .sidebar-nav li a {
            display: block;
            padding: 15px 20px;
            color: white;
            text-decoration: none;
        }

            .sidebar-nav li a:hover {
                background-color: #555;
            }

.messenger-sidebar{
    width:18px;
    height:18px;
}
/* ================= ТЕЛЕФОНЫ ================= */
.sidebar-phones {
    margin-top: auto; 
    margin-bottom: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.phone-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left:15px;
}

.phone {
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    color: white;
}

.messenger {
    font-size: 13px;
    color: #25D366;
    text-decoration: none;
}
.messenger-link img {
    width: 20px;
    height: 20px;
    display: block;
}



/* ================= КРЕСТИК ================= */

.close-btn {
    align-self: flex-end; 
    font-size: 2rem;
    cursor: pointer;
    color: white;
    margin-bottom: 10px;
}


/* ================= SUCCESS MESSAGE ================= */

.success-message {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 280px;
    max-width: 90%;
    background: linear-gradient(135deg, #2e7d32, #4CAF50);
    color: white;
    padding: 16px 24px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    opacity: 1;
    transition: opacity 0.4s ease;
    z-index: 9999;
}

    .success-message.hide {
        opacity: 0 !important;
    }
/*index.cshtml--------------------------------------------------------------start*/

.grid-container-lerning {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
/*hero------------------------start*/
@media (max-width: 768px) {
    .hero-features {
        display: none !important;
    }
}

/* контейнер */
.grass-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px; 
    overflow: hidden; 

    z-index: 5;
    pointer-events: none;
}

    /* картинка */
    .grass-divider img {
        width: 100%;
        height: auto;
        display: block;
        transform: translateY(-50%); 
    }
.grass-divider {
    border: 2px solid red;
}


.hero {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 1fr;
    gap: 20px;
    justify-content: center;
    align-items: center;
    background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url("/images/backgrondcollor/back-fon-hero.webp");
    background-size: cover;
    background-position: center;
    color: white;
}

.hero-content1 {
    max-width: 480px; 
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}
.hero-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

    .hero-list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 8px;
        line-height: 1.4;
        color: inherit; 
    }

        /* галочка */
        .hero-list li::before {
            content: "✔";
            font-weight: bold;
            color: inherit; 
            min-width: 18px;
            text-align: center;
        }
.btn-outline {
    display: inline-block;
    padding: 10px 18px;
    border: 2px solid #fff; 
    border-radius: 8px;
    background: transparent;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.25s ease;
}

    /* hover эффект */
    .btn-outline:hover {
        background: #fff;
        color: #006600; 
        transform: translateY(-2px);
    }
    /* заголовок */
    .hero-content1 h1 {
        font-size: 2rem;
        line-height: 1.25;
        margin-bottom: 10px;
    }

    /* текст */
    .hero-content1 p {
        font-size: 1rem;
        line-height: 1.5;
        margin-top: 10px;
    }
.hero-list {
    text-align: left; 
}

.hero h1 {
    font-size: 2.2rem;
}

.hero p {
    font-size: 1.1rem;
    margin-top: 10px;
}

.hero-product1 {
    max-width: 480px;
    width: 100%;
    margin: auto;
    max-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .hero-product1 img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    }

.hero-features {
    display: grid;
    gap: 2px; 
    max-width: 400px;
    margin: 5px auto; 
    padding: 0 10px;
}

.feature-w {
    display: flex;
    align-items: center;
    gap: 2px; 

    background: rgba(255, 255, 255, 0.1);
    padding: 8px 12px; 

    border-radius: 6px;
    backdrop-filter: blur(4px);
    color: white;
}

    .feature-w p {
        margin: 0;
        font-size: 0.8rem; 
        line-height: 1.2;
    }

.feature-b {
    display: flex;
    align-items: center;
    gap: 2px; 

    background: rgba(0, 123, 255, 0.1);
    padding: 8px 12px; 

    border-radius: 6px;
    backdrop-filter: blur(4px);
    color: white;
}

    .feature-b p {
        margin: 0;
        font-size: 0.8rem; 
        line-height: 1.2;
    }
.feature-r {
    display: flex;
    align-items: center;
    gap: 2px; 

    background: rgba(255, 59, 48, 0.1);
    padding: 8px 12px; 

    border-radius: 6px;
    backdrop-filter: blur(4px);
    color: white;
}

    .feature-r p {
        margin: 0;
        font-size: 0.8rem; 
        line-height: 1.2;
    }

.icon {
    font-size: 1.1rem; 
}


.hero-buttons {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-primary {
    background: #4CAF50;
    color: white;
    padding: 12px 20px;
    border-radius: 6px;
    text-decoration: none;
}

.btn-secondary {
    border: 2px solid white;
    color: white;
    padding: 12px 20px;
    border-radius: 6px;
    text-decoration: none;
}

.highlight {
    font-weight: 800; 
    color: #4CAF50; 
}
/*hero-------------------------------------end*/

/*problema-------------------------------start*/
.problem {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    background: #f5c400;
}
.warning-industrial {
    order: -1;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    font-weight: 900;
    font-size: 18px; 
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 10px 15px;
    border: 3px solid black; 
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.05);
    color: black;
    font-family: 'Arial Black', sans-serif;
}

.item-problem {
    width: calc(50% - 5px);
    min-width: 0; 
    border: 1px solid;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    background: #f5c400;
    animation: floatWorry 3s ease-in-out infinite;
}

@keyframes floatWorry {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-3px) rotate(-0.5deg);
    }

    50% {
        transform: translateY(2px) rotate(0.5deg);
    }

    75% {
        transform: translateY(-2px) rotate(-0.3deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

.big-item {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.arrows {
    display: flex;
    justify-content: space-between; 
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    font-size: 28px;
    color: black;
    animation: bounce 1.5s infinite;
}
    

/* лёгкая анимация */
@keyframes bounce {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}
/*анимация выход есть!--------start*/
/* начальное состояние (скрыт) */
.reveal {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
    transition: all 0.8s ease;
}

    /* когда появился */
    .reveal.active {
        opacity: 1;
        transform: translateY(0) scale(1);
    }


.cta-animated {
    font-size: clamp(32px, 6vw, 64px);
    font-weight: 900;
    text-align: center;
    color: black !important; 

    -webkit-text-fill-color: black !important; 

    background: none !important; 

    position: relative;
    display: inline-block;
    overflow: hidden;
    text-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

    /* блик */
    .cta-animated::after {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 120%;
        height: 100%;
        background: linear-gradient( 120deg, transparent, rgba(255,255,255,0.8), transparent );
        animation: shine 3s infinite;
        animation-delay: 1s;
    }

@keyframes shine {
    0% {
        left: -120%;
    }

    100% {
        left: 120%;
    }
}

.item-problem h5 {
    text-align: center;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: clamp(14px, 2.5vw, 18px);
}

.item-problem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/*анимация выход есть!--end*/
/*problema-------------------------------end*/


/*Leonardit-section---------------------start*/
.leonardite-section {
    grid-template-columns: 1fr 1fr;
    /* добавили строку сверху */

    background: url("/images/backgrondcollor/background-leonardit4.png")center/cover no-repeat;
    background-size: cover;
    background-position: center;
}



/* большая ячейка */
.item-top-big {
    border-radius: 6px;
    padding: 10px;
}

/* маленькая ячейка */
.item-top-small {
    border-radius: 6px;
    padding: 10px;
}

.button-details {
    grid-column: span 2;
    display: flex;
    justify-content: center;
    align-self: end;
    padding: 20px;
}

/* базовая кнопка  */
.btn-premium {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #4CAF50, #2e7d32);
    color: white;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

    /*  пульсация включается ТОЛЬКО при классе active */
    .btn-premium.pulse-active {
        animation: pulseBtn 1.8s ease-in-out infinite;
    }

/* анимация */
@keyframes pulseBtn {
    0% {
        transform: scale(1);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 10px 30px rgba(76,175,80,0.5);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }
}
/*grid для кнопки подробнее в секции step-section*/



/*стили кнопки play-----------------------start*/
.play-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* круг */
.play-button {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #e53935;
    cursor: pointer;
}

/* иконка */
.play-icon {
    font-size: 3rem;
    color: #ffffff;
    z-index: 2;
}

/* текст по кругу */
.circle-text {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotate 10s linear infinite;
}

    /* текст */
    .circle-text text {
        font-size: 20px;
        fill: #ffffff;
        letter-spacing: 2px;
    }

/* анимация */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
/*стили кнопки play--------------------end*/
.banner-leonardit {
    grid-column: 1 / -1; /* 🔥 занять ВСЕ колонки */

    width: 100%;
    margin-left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .banner-leonardit img {
        width: 100%;
        height: auto;
        display: block;
    }

.item-leonardite-section-big-left {
    grid-column: span 2;
    display: flex;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 6px;
    padding: 10px;
}

.item-leonardite-section-top {
    grid-column: span 2;
    display: flex;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 6px;
    padding: 10px;
}

.item-leonardite-section-bottom {
    grid-column: span 2;
    display: flex;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 6px;
    padding: 10px;
}

.item-leonardite-section-big-right {
    grid-column: span 2;
    display: flex;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 6px;
    padding: 10px;
}


.leo-title {
    text-align: center;
    margin: 20px 0;
    font-size: 1.5rem;
    color: aqua;
}

/* карточка */
.card {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 5px;
    gap: 8px;
}

    /* заголовки */
    .card h3 {
        font-size: 1.2rem;
        margin-bottom: 5px;
        font-weight: bold;
    }

    /* текст */
    .card p {
        font-size: 1rem;
        line-height: 1.4;
    }

    /* списки */
    .card ul {
        padding-left: 15px;
        font-size: 1rem;
        line-height: 1.4;
    }
.mobile-full {
    grid-column: span 2;
    display: flex; 

   

    justify-content: center; 


    text-align: center;
    padding: 15px;
}

/*Leonardit-section----------------end*/


/*step-section-------------------start*/
.steps-section-desktop{
    display:none;
}
.fon-header {
   
  
    text-align: center;
    background-size: cover;
}
.dino-fermer {
    width: 100%;
}
/* секция */
.steps-section {
    padding: 40px 20px;
    text-align: center;
    background: url("/images/backgrondcollor/fon-stepSection.webp");
    background-size: cover;
}

/* заголовок */
.steps-title {
    font-size: clamp(27px, 5vw, 40px);
    margin-bottom: 30px;
    color: aqua;
}

/* контейнер */
.steps {
   
 
    gap: 20px;
}

/* карточка */
.step {
    margin-bottom:10px;
    background: #f1f8f4;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: 0.3s;
}

    /* hover */
    .step:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }

/*НОРМАЛЬНАЯ ИКОНКА */
.step-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f8f4;
    border-radius: 12px;
}

    /* SVG через IMG */
    .step-icon img {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

/* заголовок */
.step h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

/* текст */
.step p {
    font-size: 14px;
    color: #555;
}

.app-full {
    width: 100%;
}

    .app-full img {
        width: 100%;
        height: auto;
        display: block;
    }
/*step-section-------------------end*/

/*application-section-------------------start*/
.banner-application-desctop{
display:none;
}
.wrapper-text {
    display: none;
}
.application-section {
    padding: 20px 0;
    text-align: center;
    background: linear-gradient( to bottom, rgba(0, 50, 0, 0) 50%, rgba(200, 255, 200, 0.6) 75%, rgba(255, 255, 255, 1) 100% ), url('/images/backgrondcollor/fon-application2.webp');
    background-size: cover;
    background-position: center;
}
    .application-section h3 {
        display: block;
        text-align: center;
        margin: 40px 0 25px;
        padding: 0 10px;
        color: aqua;
        min-width: 0;
        overflow-wrap: break-word;
    }
    .application-section h3 {
        position: relative;
        z-index: 100;
    }
.product-banner-title {
    width: 100%;
    text-align: center;
    margin: 40px auto 25px;
    grid-column: 1 / -1;
}

.app {
    width: 100%;
    overflow: hidden;
}

    .app img {
        width: 100%;
        height: 180px; 
        object-fit: cover; 
        display: block;
    }

.application-text {
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;
    background: url('/images/backgrondcollor/fon-application2.webp');
}

/* вступление */
.intro {
    text-align: center;
    margin-bottom: 15px;
    color: aqua;
}

/* карточки */
.app-block {
    background: white;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

    /* заголовки */
    .app-block h4 {
        margin-bottom: 8px;
        color: #2e7d32;
    }

    /* списки */
    .app-block ul {
        padding-left: 18px;
        margin: 8px 0;
    }

/* плюс/минус */
.pros-cons {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.9rem;
}

.plus {
    color: green;
}

.minus {
    color: red;
}

/* подзаголовок */
.subtitle {
    font-style: italic;
    color: #555;
}
/*Вступление о живе*/
.app-block .spec {
    border: 1px solid rgba(76, 175, 80, 0.3);
    background: #f9fff9;
}

.cert-section {
    margin-top: 12px;
}

    .cert-section h5 {
        margin-bottom: 6px;
        color: #2e7d32;
        font-size: 14px;
    }

/* строки */
.cert-row {
    display: flex;
    flex-direction: column; 
    gap: 2px;
    padding: 6px 0;
    border-bottom: 1px dotted rgba(0,0,0,0.1);
}

    .cert-row span {
        font-size: 12px;
        color: #666;
    }

    .cert-row strong {
        font-size: 14px;
        color: #1b5e20;
    }

.element-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 8px;
    margin-top: 8px;
}

.element-item {
    background: #f1f8f4;
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    border: 1px solid rgba(76,175,80,0.2);
}

    .element-item span {
        display: block;
        font-size: 11px;
        color: #777;
    }

    .element-item strong {
        font-size: 14px;
        color: #2e7d32;
    }



.img-zoom img {
    width: 100%;
    height: auto;
    cursor: zoom-in;
}

.img-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

    .img-modal img {
        max-width: 95%;
        max-height: 95%;
    }
/*кнопка оставить заявку-----------------start*/
/* контейнер */
.button-flex-container {
    display: inline-flex;
    flex-direction:column;
    gap: 10px;
}
.desktop-nav .btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 140px; 
    padding: 14px 0; 


    font-size: 16px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    border-radius: 8px; 
    /*  твой цвет + перелив */
    background: linear-gradient(135deg, #cb11ab, #a10f8f, #e91ec2, #cb11ab);
    background-size: 300% 300%;
    animation: gradientMove 3s ease infinite;
    box-shadow: 0 5px 15px rgba(203,17,171,0.4);
    transition: all 0.2s ease;
}

.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 140px; 
    padding: 14px 0; 


    font-size: 16px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    border-radius: 8px; 
   
    background: linear-gradient(135deg, #cb11ab, #a10f8f, #e91ec2, #cb11ab);
    background-size: 300% 300%;
    animation: gradientMove 3s ease infinite;
    box-shadow: 0 5px 15px rgba(203,17,171,0.4);
    transition: all 0.2s ease;
}
.btn-cta2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 140px; 
    padding: 14px 0; 


    font-size: 16px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    border-radius: 8px; 
   
    background: linear-gradient(135deg, #00c853, #2e7d32, #69f0ae, #00c853);
    background-size: 300% 300%;
    animation: gradientMove 3s ease infinite;
    box-shadow: 0 5px 15px rgba(203,17,171,0.4);
    transition: all 0.2s ease;
}

/* перелив */
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* нажатие */
.btn-cta:active {
    transform: scale(0.97);
}
/*кнопка оставить заявку-----------------start*/

/*application-section---------------------------------------end*/

/*products-section--------------------------------------start*/
.backgrounder {
    background: linear-gradient( 135deg, #3a0ca3 0%, #7209b7 25%, #4361ee 55%, #4cc9f0 100% );
}
#productDrop {
    touch-action: auto;
}

.upload-box {
    touch-action: auto;
}
.product-passport {
    display: none;
}

/* затемнение + blur */
.external-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeIn 0.25s ease;
}

/* окно */
.modal-box {
    background: #ffffff;
    padding: 24px 20px;
    border-radius: 16px;
    max-width: 340px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    animation: scaleIn 0.25s ease;
}

    /* заголовок */
    .modal-box h3 {
        margin-bottom: 10px;
        font-size: 20px;
        font-weight: 600;
        color: #222;
    }

    /* текст */
    .modal-box p {
        font-size: 14px;
        color: #555;
        line-height: 1.4;
    }

/* кнопки */
.modal-buttons {
    margin-top: 18px;
    display: flex;
    gap: 10px;
}

    /* базовая кнопка */
    .modal-buttons button {
        flex: 1;
        padding: 12px;
        border-radius: 10px;
        border: none;
        font-size: 14px;
        cursor: pointer;
        transition: 0.2s;
    }

/* отмена */
#cancelBtn {
    background: #f1f1f1;
}

    #cancelBtn:hover {
        background: #e4e4e4;
    }

/* перейти */
#goBtn {
    background: linear-gradient(135deg, #cb11ab, #a10f8f);
    color: white;
}

    #goBtn:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 12px rgba(203,17,171,0.4);
    }

/* анимации */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* контейнер */
.products-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
   
}

    .products-section h2 {
        text-align: center;
        color: aqua;
    }

/* ===== GRID ===== */

.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 10px;
    max-height: 75vh; 
    overflow-y: auto; 

    padding-right: 4px;
}

/* ===== CARD ===== */

.product-card {
    background: white;
    border-radius: 12px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* ===== IMAGES ===== */

.product-images {
    position: relative;
    width: 100%;
    height: 150px; 
    overflow: hidden;
    pointer-events: auto;
}

    /* ВСЕ ФОТО */
    .product-images img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: contain; 

        opacity: 0;
        transition: opacity 0.3s ease;
    }

        /* активное */
        .product-images img.active {
            opacity: 1;
        }

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

.buy-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #cb11ab, #a10f8f);
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* ===== MODAL ===== */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-img {
    max-width: 95%;
    max-height: 80%;
    object-fit: contain;
}

/* стрелки */
.modal-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px;
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    padding: 8px;
}

    .modal-arrow.left {
        left: 10px;
    }

    .modal-arrow.right {
        right: 10px;
    }

/* крестик */
.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 28px;
    color: white;
    cursor: pointer;
}

/*products-section--------------------end*/

/*REVIEWS----------------------------------------------START*/
/* Секция */
.reviews {
    padding: 40px 15px;
   
}

/* заголовок */
.reviews-title {
    font-size: 22px;
    text-align: center;
    margin-bottom: 20px;
    color:aqua;
}

/* ОБЕРТКА (для стрелок) */
.reviews-wrapper {
    position: relative;
}

/* Слайдер */
.reviews-slider {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 10px;
}

    /* скрываем скролл */
    .reviews-slider::-webkit-scrollbar {
        display: none;
    }

/* Карточка */
.review-card {
    min-width: 90%;
    max-width: 90%;
    height: 260px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    padding: 10px;
}

/*  БЛОК КАРТИНКИ (ВАЖНО) */
.review-image {
    width: 100%;
    height: 120px;
    border-radius: 8px;
    display: flex;
    justify-content: center; 
    align-items: center; 

    background: #f5f5f5; 
    overflow: hidden;
}

    /* сама картинка */
    .review-image img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain; 

        cursor: pointer;
    }

/* текст */
.review-text {
    font-size: 13px;
    margin: 8px 0;
    overflow-y: auto; 
    flex: 1; 

    line-height: 1.4;
}
/* автор */
.review-author {
    font-size: 13px;
    font-weight: 600;
    margin-top: auto;
}

/*  МОДАЛКА */
.review-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

    .review-modal img {
        max-width: 90%;
        max-height: 90%;
        border-radius: 10px;
    }

/* СТРЕЛКИ */
.reviews-arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    background: #fff;
    border: 1px solid #ddd;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    font-size: 20px;
}

    .reviews-arrow.left {
        left: -10px;
    }

    .reviews-arrow.right {
        right: -10px;
    }
.review-stars {
    font-size: 14px;
    margin-top: 5px;
}

    .review-stars span {
        color: #f5b50a;
    }

    .review-stars .empty {
        color: #ddd;
    }

/* скрываем стрелки на мобилке */
@media (max-width: 768px) {
    .reviews-arrow {
        display: none;
    }
}
/*REVIEWS----------------------------------------------END*/
/*deliver------------------------------------------start*/
.delivery {
    text-align: center;
    padding: 30px 10px;
    background: url('/images/backgrondcollor/fon-delivery.webp');
    overflow: hidden;
}

    .delivery h3 {
        color: black;
        font-weight: 700;
    }
/* СЦЕНА */
.animation-line {
    position: relative;
    width: 100%;
    max-width: 500px; 
    height: 170px;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 16px;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #7209b7, #4cc9f0) border-box;
}

/* ОБЪЕКТЫ */
.item {
    position: absolute;
    bottom: 0;
    left: -120px; 
    height: 160px; 
    opacity: 0;
}

/* ---------- ЗАПУСК ---------- */

.animate .ship {
    animation: shipMove 4s linear forwards;
}

.animate .train {
    animation: trainMove 4s linear forwards;
    animation-delay: 2s;
}

.animate .truck {
    animation: truckMove 4s linear forwards;
    animation-delay: 4s;
}

.animate .courier {
    animation: courierMove 4s linear forwards;
    animation-delay: 6s;
}

/* ---------- АНИМАЦИИ ---------- */


@keyframes shipMove {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(300%);
        opacity: 1;
    }
}


@keyframes trainMove {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(300%);
        opacity: 1;
    }
}


@keyframes truckMove {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(300%);
        opacity: 1;
    }
}


@keyframes courierMove {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    70% {
        transform: translateX(75%);
        opacity: 1;
    }

    100% {
        transform: translateX(75%);
        opacity: 1;
    }
}

/*карточка предприятия start*/
.company-card {
    margin: 20px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

/* HEADER (кликабельный) */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: linear-gradient(135deg, #4CAF50, #2e7d32);
    color: white;
    cursor: pointer;
}

    .card-header h3 {
        margin: 0;
        font-size: 18px;
    }

/* стрелка */
.arrow {
    font-size: 18px;
    transition: transform 0.3s ease;
}

/* контент */
.card-grid {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: #f9fff9;
}

/* открытое состояние */
.company-card.open .card-grid {
    max-height: 2000px; 
    padding: 10px;
}

/* поворот стрелки */
.company-card.open .arrow {
    transform: rotate(180deg);
}

/* строки */
.row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    background: white;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 8px;
}

    /* большие */
    .row.full {
        flex-direction: column;
    }

    .row span {
        font-size: 12px;
        color: #777;
    }

    .row strong {
        font-size: 14px;
    }

/*карточка предприятия end*/

/*сертификаты----start*/
.certificates {
    padding: 20px;
    text-align: center;
}

/* Сетка */
.cert-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Карточка */
.cert-item {
    border: 2px solid #4CAF50;
    border-radius: 12px;
    overflow: hidden;
    background: white;
    cursor: zoom-in;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

    /* Картинка */
    .cert-item img {
        width: 100%;
        height: auto;
        display: block;
    }

/* FULLSCREEN */
.cert-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

    .cert-modal img {
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
        cursor: grab;
        transition: transform 0.1s ease;
    }

/* крестик */
.cert-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 32px;
    color: white;
    cursor: pointer;
}
/*сертификаты----end*/
#hederic {
    margin-top: 30px;
}

.best-price,
.best-price-cta,
.best-price.premium {
    background: linear-gradient(135deg, #e8f5e9, #ffffff);
    border-radius: 12px;
    padding: 20px;
    margin: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

    .best-price h3,
    .best-price-cta h3 {
        margin-bottom: 10px;
        color: #2e7d32;
    }

    .best-price ul {
        list-style: none;
        padding: 0;
    }

        .best-price ul li {
            margin-bottom: 6px;
        }

    .best-price-cta .big {
        font-size: 18px;
        font-weight: bold;
    }

    .best-price-cta span {
        color: #4CAF50;
    }
/*delivery---------------------------------end*/

/*photo-gallery--------------------------start*/

.photo-gallery {
    padding: 20px;
    color: white;
    text-align: center;
}

.gallery-stack {
    position: relative;
    width: 100%;
    height: 320px;
    margin-top: 20px;
    perspective: 1000px;
    overflow: hidden;
}

/* карточка */
.gallery-card {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.35s ease;
    border: 2px solid rgba(255,255,255,0.2);
    background: #000;
}

    /* картинка */
    .gallery-card img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    /* эффект стопки СПРАВА */
    .gallery-card:nth-child(1) {
        transform: translateX(0) scale(1);
        z-index: 5;
    }

    .gallery-card:nth-child(2) {
        transform: translateX(15px) scale(0.96);
        z-index: 4;
        opacity: 0.9;
    }

    .gallery-card:nth-child(3) {
        transform: translateX(30px) scale(0.92);
        z-index: 3;
        opacity: 0.8;
    }

    .gallery-card:nth-child(4) {
        transform: translateX(45px) scale(0.88);
        z-index: 2;
        opacity: 0.7;
    }

    .gallery-card:nth-child(5) {
        transform: translateX(60px) scale(0.84);
        z-index: 1;
        opacity: 0.6;
    }

/*photo-gallery--------------------------end*/

/* mem-section-----------------------start*/
/* секция без отступов */
.meme-section {
    width: 100%;
    margin: 0;
    padding: 0;
}

    /* картинка во всю ширину */
    .meme-section img {
        width: 100%;
        height: auto;
        display: block;
    }
/* mem-section-----------------------end*/

/* SEO-SECTION-----------------------start*/
.btn-foot {
    display: block; 
    width: fit-content; 

    margin: 0 auto 0; 
  
    padding: 12px 20px;
    border: 2px solid #000;
    border-radius: 8px;
    background: transparent;
    color: #000;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.25s ease;
}

    .btn-foot:hover {
        background: #000;
        color: #fff;
        transform: translateY(-2px);
    }

/* СЕКЦИЯ */
.seo-block {
    background: #f9f9f9;
    margin-top: -100px; 
    padding-top: 80px;
    position: relative;
    z-index: 1;
}

/* КОНТЕНТ */
.seo-container {
    max-width: 860px; 
    margin: 0 auto;
    padding: 32px 18px;
    color: #0d0d0d; 
    font-weight: 500;
    line-height: 1.7; 
}

    /* заголовки */
    .seo-container h2 {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .seo-container h3 {
        font-size: 18px;
        margin-top: 24px;
        margin-bottom: 10px;
    }
    .seo-container h2,
    .seo-container h3 {
        font-weight: 700; 
        color: #000;
    }
    /* текст */
    .seo-container p {
        margin-bottom: 14px;
    }

    /* списки */
    .seo-container ul {
        padding-left: 18px;
    }

    .seo-container li {
        margin-bottom: 6px;
    }

/* ПЛАВНЫЙ ПЕРЕХОД */
.seo-block::before {
    content: "";
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient( to bottom, rgba(242,242,242,0), #f2f2f2 );
    z-index: 1; /* НЕ -1 */
}
/* SEO-SECTION-----------------------end*/

/*footer-----------------------------------------------------------start*/
.footer-pro {
    background: radial-gradient(circle at top, #1e293b, #020617);
    color: white;
    padding: 60px 20px 20px;
}

/* сетка */
.footer-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 30px;
}

/* мобилка */
.footer-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* логотип */
.footer-logo {
    width: 140px;
}

/* текст */
.footer-desc {
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.5;
}

/* заголовки */
.footer-col h4 {
    color: #4cc9f0;
    margin-bottom: 10px;
}

/* ссылки */
.footer-col ul {
    list-style: none;
    padding: 0;
}

    .footer-col ul li a {
        color: #cbd5f5;
        text-decoration: none;
        transition: 0.25s;
    }

        .footer-col ul li a:hover {
            color: #4cc9f0;
            transform: translateX(5px);
        }

/* соцсети */
.footer-socials {
    display: flex;
    gap: 12px;
}

    .footer-socials img {
        width: 28px;
        transition: 0.3s;
    }

        .footer-socials img:hover {
            transform: scale(1.2);
        }

/* кнопка */
.footer-cta {
    margin-top: 10px;
    display: inline-block;
    padding: 12px 20px;
    border-radius: 8px;
    background: linear-gradient(135deg, #cb11ab, #7b1fa2);
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: 0.25s;
}

    .footer-cta:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(203,17,171,0.5);
    }

/* карта */
.footer-map {
    display: flex;
    justify-content: center; 
    margin-top: 40px;
    border-radius: 14px;
    overflow: hidden;
}
    .footer-map iframe {
        width: 100%;
        max-width: 400px; 
        height: 200px;
    }

/* низ */
.footer-bottom {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #94a3b8;
}

/* ДЕСКТОП */
@media (min-width: 768px) {

    .footer-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }
}

/*footer-----------------------------------------------------------end*/
/*Модально окно видео----start*/
.video {
    filter: contrast(1.05) brightness(1.05);
}
/* затемнение */

.video-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

/* окно видео */
.video-content video {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: contain;
    background: black;
}

/* iframe */
.video-content iframe {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

/* крестик */
.close-modal {
    position: absolute;
    top: -30px;
    right: 0;
    font-size: 30px;
    color: white;
    cursor: pointer;
}


.hero-content2 {
    display: none;
}

.hero-product2 {
    display: none;
}

.desktop-nav {
    display: none; 
}
/*ПЛАНШЕТ-----------------------------------------------------------------------------*/
@media (min-width: 768px) {
    body {
        font-size: 18px; 
        padding: 20px; 
    }

    h1 {
        font-size: 2rem; 
    }

    h2 {
        font-size: 1.5rem; 
    }

    h3 {
        font-size: 1.25rem; 
    }

    blockquote {
        font-size: 1.2rem;
        margin: 15px 0;
    }
}
/*ДЕСКТОП-----------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media (min-width: 1200px) {
    body {
        font-size: 20px; /
        padding: 40px;
    }

    header {
        width: 100%;
        display: flex;
        justify-content: center; 
    }

    .header-container {
        width: 100%;
        max-width: 1500px; 
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
    }

    .messenger-item img {
        width: 18px;
        height: 18px;
        object-fit: contain;
    }

    .phones-desktop {
        display: flex;
        flex-direction: column;
        margin-left: 20px;
        gap: 2px;
    }

    .phone-item {
        display: flex;
        gap: 2px;
        font-size: 14px;
    }

    /* sidebar телефоны скрываем */
    .sidebar-phones {
        display: none;
    }


    h1 {
        font-size: 3rem; /* ~48px */
    }

    h2 {
        font-size: 2rem; /* ~32px */
    }

    h3 {
        font-size: 1.5rem; /* ~24px */
    }

    blockquote {
        font-size: 1.4rem;
        margin: 20px 0;
    }

    /* стили для header и навигации ДЕСКТОП-start */
    /* Скрываем гамбургер на десктопе */
    .menu-toggle {
        display: none;
    }

    /* Сайдбар скрыт на десктопе */
    .sidebar-nav {
        display: none !important;
    }

    .desktop-nav {
        display: block;
        z-index: 1001;
    }

        .desktop-nav ul {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            gap: 15px;
        }

        .desktop-nav li {
            display: block;
        }

            .desktop-nav li a {
                display: block;
                color: white; /* текст белый */
                text-decoration: none; /* убираем подчёркивание */
                font-family: 'Roboto', sans-serif;
                font-weight: 500;
                padding: 2px 15px; /* делаем кликабельной область больше */
                background-color: transparent;
            }

                .desktop-nav li a:hover {
                    color: #000000;
                }
    /* стили для header и навигации ДЕСКТОП----end */

    /*index.cshtml----------------------------start*/
    .grid-container-lerning {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 20px;
        margin-top: 60px;
    }
    /*hero-----------------start*/
    .hero {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
            "hero-content1 hero-product1 hero-product1"
            "d h hero-features"
            "g s .";
        justify-items: stretch;
        background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("/images/backgrondcollor/back-fon-hero.webp");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .btn-outline {
        display: inline-block;
        padding: 10px 18px;
        border: 2px solid #fff; 
        border-radius: 8px;
        background: transparent;
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        font-size: 14px;
        transition: all 0.25s ease;
    }

        /* hover эффект */
        .btn-outline:hover {
            background: #fff;
            color: #006600; 
            transform: translateY(-2px);
        }

    .hero {
    }

    .hero-content1 {
        grid-area: hero-content1;
        margin-left: 120px;
        font-weight: bold;
        margin-top:10px;
    }

    .hero h1 {
        font-weight: bold;
    }

    .hero p {
    }

    .hero-product1 {
        grid-area: hero-product1;
        margin-left: auto; 
        margin-right: -20px;
        max-width: 700px;
        margin-top:50px;
    }

        .hero-product1 img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.4);
        }

    .hero-product2 {
        display: none;
        grid-area: hero-product2;
        margin-left: auto;
        margin-right: -20px;
        max-width: 700px;
    }

        .hero-product2 img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.4);
        }

    .hero-features {
        grid-area: hero-features;
        align-self: start;
        margin-top: -50px;
        background: rgba(255,255,255,0.1);
    }

    .feature-w {
        background: rgba(255, 255, 255, 0.8);
        color: black;
    }

        .feature-w p {
            font-size: 15px;
            font-weight: bold;
        }

    .feature-b {
        background: rgba(0, 123, 255, 0.8);
        color: black;
    }

        .feature-b p {
            font-size: 15px;
            font-weight: bold;
        }

    .feature-r {
        background: rgba(255, 59, 48, 0.8);
        color: black;
    }

        .feature-r p {
            font-size: 15px;
            font-weight: bold;
        }

    .hero-features h2 {
        font-weight: bold;
    }
    /*hero-------------------------------------end*/
    /*problema-------------------------------start*/
    .problem {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        background: #f5c400;
        padding: 20px;
    }

    .warning-industrial {
        grid-column: 1 / -1; 

        justify-self: center; 
        margin-bottom: 10px;
        display: inline-block;
        font-weight: 800;
        font-size: 22px;
        letter-spacing: 3px;
        padding: 12px 24px;
        border: 4px solid black;
        color: black;
        text-transform: uppercase;
        font-family: 'Arial Black', sans-serif;
        position: relative;
    }

        .warning-industrial::before {
            content: "";
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient( 45deg, transparent, transparent 6px, rgba(0,0,0,0.08) 6px, rgba(0,0,0,0.08) 12px );
            pointer-events: none;
        }

    .item-problem {
        width: 100%;
        border: 1px solid;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        background: #f5c400;
        animation: floatWorry 3s ease-in-out infinite;
    }

    @keyframes floatWorry {
        0% {
            transform: translateY(0) rotate(0deg);
        }

        25% {
            transform: translateY(-3px) rotate(-0.5deg);
        }

        50% {
            transform: translateY(2px) rotate(0.5deg);
        }

        75% {
            transform: translateY(-2px) rotate(-0.3deg);
        }

        100% {
            transform: translateY(0) rotate(0deg);
        }
    }

    .big-item {
        grid-column: 2 / 4;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .arrows {
        display: flex;
        justify-content: space-between;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        font-size: 28px;
        color: black;
        animation: bounce 1.5s infinite;
    }

    /* лёгкая анимация */
    @keyframes bounce {
        0%,100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(8px);
        }
    }
    /*анимация выход есть!--------start*/
    /* начальное состояние (скрыт) */
    .reveal {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
        transition: all 0.8s ease;
    }

        /* когда появился */
        .reveal.active {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

    /* твой стиль текста */
    .cta-animated {
        font-size: clamp(32px, 6vw, 50px);
        font-weight: 900;
        text-align: center;
        background: linear-gradient(135deg, #66bb6a, #2e7d32);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: relative;
        display: inline-block;
        overflow: hidden;
        text-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

        /* блик */
        .cta-animated::after {
            content: "";
            position: absolute;
            top: 0;
            left: -120%;
            width: 120%;
            height: 100%;
            background: linear-gradient( 120deg, transparent, rgba(255,255,255,0.6), transparent );
            animation: shine 3s infinite;
            animation-delay: 1s;
        }

    @keyframes shine {
        0% {
            left: -120%;
        }

        100% {
            left: 120%;
        }
    }



    .item-problem img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /*анимация выход есть!--end*/
    /*problema-------------------------------end*/

    /*Leonardit-section---------------------start*/
    item-top-big {
        display: none;
    }

    .mobile-full {
        display: contents; /* 🔥 скрыт на десктопе */
    }

    .leonardite-section {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas: "item-top-big-desctop banner-leonardit banner-leonardit play-wrapper"
            "item-leonardite-section-top item-leonardite-section-big-left item-leonardite-section-big-left item-leonardite-section-big-right"
            "item-leonardite-section-bottom item-leonardite-section-big-left item-leonardite-section-big-left  item-leonardite-section-big-right"
            "m button-grid button-grid p ";
        width: 100%; 
        max-width: none; 
        background: url("/images/backgrondcollor/background-leonardit4.png");
        background-size: cover;
        background-position: center;
    }

    .button-grid {
        grid-area: button-grid;
    }
    /* большая ячейка */
    .item-top-big-desctop {
        grid-area: item-top-big-desctop;
        border-radius: 6px;
        padding: 10px;
    }

    .leo-title-img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }

    /* маленькая ячейка */
    .item-top-small {
        border-radius: 6px;
        padding: 10px;
    }

    .button-details {
        grid-column: span 2;
        display: flex;
        justify-content: center;
        align-self: end;
        padding: 20px;
    }

    /* базовая кнопка  */
    .btn-premium {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 14px 28px;
        background: linear-gradient(135deg, #4CAF50, #2e7d32);
        color: white;
        border-radius: 50px;
        text-decoration: none;
        font-weight: 600;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

        /*  пульсация включается ТОЛЬКО при классе active */
        .btn-premium.pulse-active {
            animation: pulseBtn 1.8s ease-in-out infinite;
        }

    .button-flex-container {
        display: flex; 
        flex-direction: row; 

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

        gap: 10px; 
    }

    /* анимация */
    @keyframes pulseBtn {
        0% {
            transform: scale(1);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        50% {
            transform: scale(1.05);
            box-shadow: 0 10px 30px rgba(76,175,80,0.5);
        }

        100% {
            transform: scale(1);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
    }
    /*grid для кнопки подробнее в секции step-section*/


    /*стили кнопки play-----------------------start*/
    .play-wrapper {
        grid-area: play-wrapper;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
    }

    /* круг */
    .play-button {
        position: relative;
        width: 120px;
        height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background: #e53935;
        cursor: pointer;
    }

    /* иконка */
    .play-icon {
        font-size: 3rem;
        color: #ffffff;
        z-index: 2;
    }

    /* текст по кругу */
    .circle-text {
        position: absolute;
        width: 100%;
        height: 100%;
        animation: rotate 10s linear infinite;
    }

        /* текст */
        .circle-text text {
            font-size: 20px;
            fill: #ffffff;
            letter-spacing: 2px;
        }

    /* анимация */
    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
    /*стили кнопки play--------------------end*/
    .banner-leonardit {
        grid-area: banner-leonardit;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .banner-leonardit img {
            width: 100%;
            height: auto; 
            display: block;
            max-height: 400px;
        }

    .item-leonardite-section-big-left {
        grid-area: item-leonardite-section-big-left;
        display: flex;
        width: 100%;
        height: 100%;
        background: transparent;
        border-radius: 6px;
        padding: 10px;
    }

    .item-leonardite-section-top {
        grid-area: item-leonardite-section-top;
        display: flex;
        width: 100%;
        height: 100%;
        background: transparent;
        border-radius: 6px;
        padding: 10px;
    }

    .item-leonardite-section-bottom {
        grid-area: item-leonardite-section-bottom;
        display: flex;
        width: 100%;
        height: 100%;
        background: transparent;
        border-radius: 6px;
        padding: 10px;
    }

    .item-leonardite-section-big-right {
        grid-area: item-leonardite-section-big-right;
        display: flex;
        width: 100%;
        height: 100%;
        background: transparent;
        border-radius: 6px;
        padding: 10px;
    }


    .leo-title {
        text-align: center;
        margin: 20px 0;
        font-size: 1.5rem;
        color: aqua;
    }

    /* карточка */
    .card {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 5px;
        gap: 8px;
    }

        /* заголовки */
        .card h3 {
            font-size: 1.2rem;
            margin-bottom: 5px;
            font-weight: bold;
        }

        /* текст */
        .card p {
            font-size: 1rem;
            line-height: 1.4;
        }

        /* списки */
        .card ul {
            padding-left: 15px;
            font-size: 1rem;
            line-height: 1.4;
        }
    /*Leonardit-section----------------end*/

    /*STEP-SECTION-DESCTOP--------------start*/
    .dino-fermer {
        width: 30%;
    }

    .mobile-step-section {
        display: none;
    }

    .steps-section-desktop {
        position: relative;
        height: 100vh;
        background: url("/images/banner/work-leonardit.webp") center/cover no-repeat;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* контейнер */
    .steps-stack {
        position: relative;
        width: 100%;
        max-width: 1800px;
        height: 400px;
    }

    /* ===== БАЗА КАРТОЧЕК ===== */

    .step-desctop {
        position: absolute;
        width: 220px;
        height: 280px;
        top: 50%;
        left: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        /* ❗ ТОЛЬКО ПОЗИЦИЯ */
        transform: translate(-50%, -50%) scale(0.85);
        transition: transform 3s cubic-bezier(0.2, 0.8, 0.2, 1);
        overflow: visible;
        cursor: pointer;
    }

        /* блик */
        .step-desctop::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.3), transparent 70%);
            transform: rotate(25deg);
            pointer-events: none;
        }

        .step-desctop::before {
            content: none;
        }

        /* ===== ПОЗИЦИИ ===== */

        .step-desctop:nth-child(1) {
            --x: -590px;
            z-index: 6;
        }

        .step-desctop:nth-child(2) {
            --x: -360px;
            z-index: 5;
        }

        .step-desctop:nth-child(3) {
            --x: -120px;
            z-index: 4;
        }

        .step-desctop:nth-child(4) {
            --x: 120px;
            z-index: 3;
        }

        .step-desctop:nth-child(5) {
            --x: 360px;
            z-index: 2;
        }

        .step-desctop:nth-child(6) {
            --x: 590px;
            z-index: 1;
        }

    /* ===== РАЗЪЕЗД ===== */

    .steps-section-desktop.active .step-desctop {
        transform: translate(-50%, -50%) translateX(var(--x));
    }

    /* ===== ВЫЛЕТ (БЕЗ SCALE ❗) ===== */

    .step-desctop.active {
        z-index: 999;
        transform: translate(-50%, -50%) translateX(var(--x)) scale(1.5);
    }

    /* ===== НОВЫЙ FLIP ===== */

    .step-desctop {
        perspective: 1400px;
    }

    .card-3d {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
        transition-delay: 0.2s;
        transform-origin: center;
        will-change: transform;
    }


    .card-front,
    .card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 1px; 

        text-align: center;
        background: linear-gradient(145deg, #2b2b2b, #1a1a1a);
        color: #f5e6c8;
        border: 1px solid rgba(255, 215, 120, 0.3);
        box-shadow: inset 0 0 10px rgba(255,255,255,0.05), 0 10px 25px rgba(0,0,0,0.5);
        border-radius: 12px;
    }

    .card-front {
        transform: rotateY(0deg);
    }

    .card-back {
        transform: rotateY(180deg);
        overflow: hidden;
        align-items: stretch;
    }

        /* КОНТЕНТ */
        .card-back .card-content {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            text-align: left;
            gap: 10px; 
        }

            /* ЗАГОЛОВОК */
            .card-back .card-content h3 {
                font-size: 16px;
                margin: 0;
                color: #ffd778;
            }

            /* ТЕКСТ */
            .card-back .card-content p {
                font-size: 12px;
                line-height: 1.4;
                margin: 0;
                opacity: 0.9;
                text-align: justify; 
            }
            

    /* переворот */
    .step-desctop.active .card-3d {
        transform: rotateY(180deg);
    }

 


    /* затемнение */
    .steps-section-desktop.card-open::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.6);
        z-index: 10;
    }

    /* текст */
    .step-desctop h3 {
        font-size: 16px;
        margin: 6px 0;
        border-bottom: 1px solid #f5e6c8;
        padding-bottom: 6px;
    }

    .step-desctop p {
        font-size: 14px;
    }

    /* иконка */
    .step-icon img {
        width: 40px;
        height: 40px;
    }

    .steps-section-desktop.active .step-desctop.active {
        transform: translate(-50%, -50%) scale(1.5);
    }



    .card-content {
        transform: scale(1);
    }

    /* компенсация масштаба */
    .step-desctop.active .card-content {
        transform: scale(0.67);
    }


    /*STEP-SECTION-DESCTOP--------------end*/
    /*дуга-анимация*/
    /* .step-desctop {
        transform: translate(-50%, -50%) scale(0.9);
    }

    .steps-section-desktop.active .step-desctop:nth-child(1) {
        transform: translate(-50%, -60%) translateX(-450px);
    }

    .steps-section-desktop.active .step-desctop:nth-child(6) {
        transform: translate(-50%, -60%) translateX(450px);
    } */

    /*анимация разьезд---end*/


    /*STEP-SECTION-DESCTOP---------------end*/

    /*Application-section-desctop---------------------------------------------------------start*/
    .application-text {
        display: contents;
    }

    .wrapper-text {
        display: block;
    }

    .app-block-desc-wrapper-bottom {
        display: block;
    }

    .app {
        display: none;
    }

    .button-wrapper {
        display: none;
    }

    .app-block.spec {
        display: none;
    }

    .img-zoom {
        display: none;
    }


    .application-section {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-template-areas: "a dino-aplication c"
            "wrapper-left desctop-wrapper wrapper-rigth"
            "g wrapper-bottom i"
            "product-banner-title product-banner-title product-banner-title"
            "banner-application banner-application banner-application"
            "product-passport product-passport product-passport"
            "button-flex-container button-flex-container button-flex-container";
        background: url('/images/backgrondcollor/soil_1200.webp');
        background-size: cover;
        background-position: center;
        gap: 20px;
    }

    .dino-aplication {
        grid-area: dino-aplication;
        width: 100%;
    }

    .apple-title-img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }
    .product-banner-title {
        grid-area: product-banner-title;
    }

    .desctop-wrapper {
        grid-area: desctop-wrapper;
        background: white;
        padding: 12px;
        margin-bottom: 12px;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        position: relative;
        max-width: 700px;
        margin: 0 auto;
        height: 240px;
    }

    .app-block-desc-wrapper-left {
        grid-area: wrapper-left;
        width: 80%;
        height: auto;
        min-width: 0;
    }

    .app-block h4 {
        font-size: clamp(16px, 1.5vw, 22px);
    }

    .app-block p,
    .app-block li {
        font-size: clamp(14px, 1.2vw, 18px);
    }

    .app-block {
        word-break: break-word;
        overflow-wrap: break-word;
        line-height: 1.4;
    }

    .app-block-desc-wrapper-rigth {
        grid-area: wrapper-rigth;
        width: 80%;
        height: auto;
        min-width: 0;
        justify-self: end;
    }

    .app-block-desc-wrapper-bottom {
        background: white;
        padding: 12px;
        margin-bottom: 12px;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        grid-area: wrapper-bottom;
    }



    /* ================= КАРТОЧКА (ЦЕНТР) ================= */

    .compass-card {
        display: grid;
        height: 100%;
        padding: 16px 12px;
        grid-template-rows: 1fr auto auto;
        position: relative;
        color: #000; /* всё чёрное */
    }

    /* ================= ЦЕНТР (ТЕКСТ) ================= */

    .compass-card__center {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0 8px;
    }

        .compass-card__center h3 {
            font-size: clamp(18px, 1.6vw, 22px);
            line-height: 1.4;
            font-weight: 500;
            color: #000;
        }

    /* ================= РЯД (СУХОЙ / ЖИДКИЙ) ================= */

    .compass-card__row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 8px;
        margin-top: 10px;
    }

    /* стороны */
    .compass-card__side {
        font-size: 16px; 
        font-weight: 700; 
        white-space: nowrap;
        color: #000; 
        opacity: 1; 
    }

    /* ================= НИЗ ================= */

    .compass-card__bottom {
        text-align: center;
        font-size: 16px; 
        font-weight: 700; 
        color: #000;
        opacity: 1;
        margin-top: 10px;
    }

    /* ================= ЛИНИИ ================= */

    .compass-card::before {
        content: "";
        position: absolute;
        left: 12%;
        right: 12%;
        top: 55%;
        height: 1px;
        background: rgba(0,0,0,0.15);
    }

    .compass-card::after {
        content: "";
        position: absolute;
        top: 55%;
        left: 50%;
        width: 1px;
        height: 30%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.15);
    }

    /* ================= ХОВЕР ================= */

    .compass-card__side,
    .compass-card__bottom {
        transition: 0.2s;
    }

        .compass-card__side:hover,
        .compass-card__bottom:hover {
            transform: scale(1.08);
        }
    /* ================= ЕДИНЫЙ ШРИФТ ================= */

    .application-section {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
        color: #1f2937;
    }

    /* ================= ВСЕ КАРТОЧКИ ================= */

    .desctop-wrapper,
    .app-block,
    .app-block-desc-wrapper-bottom {
        background: rgba(255,255,255,0.92);
        backdrop-filter: blur(6px);
        border-radius: 14px;
        padding: 16px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
        border: 1px solid rgba(0,0,0,0.04);
        transition: all 0.25s ease;
    }

        /* ================= HOVER ================= */

        .desctop-wrapper:hover,
        .app-block:hover,
        .app-block-desc-wrapper-bottom:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 28px rgba(0,0,0,0.12), 0 4px 6px rgba(0,0,0,0.06);
        }

        /* ================= ЗАГОЛОВКИ ================= */

        .app-block h4,
        .app-block-desc-wrapper-bottom h4 {
            font-size: 18px;
            font-weight: 600;
            color: #166534; 
            margin-bottom: 8px;
        }

    /* центр */
    .compass-card__center h3 {
        font-size: 16px;
        font-weight: 500;
        color: #000;
    }

    /* ================= ТЕКСТ ================= */

    .app-block p,
    .app-block li {
        font-size: 14px;
        line-height: 1.5;
        color: #374151;
    }

    /* списки */
    .app-block ul {
        padding-left: 16px;
        margin: 8px 0;
    }

    .app-block li {
        margin-bottom: 4px;
    }

    /* ================= ПЛЮС / МИНУС ================= */

    .pros-cons {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        font-size: 13px;
    }

    .plus {
        color: #16a34a;
        font-weight: 500;
    }

    .minus {
        color: #dc2626;
        font-weight: 500;
    }

    /* ================= КОМПАС ================= */

    .compass-card__side,
    .compass-card__bottom {
        font-size: 12px;
        color: #6b7280;
    }

    /* линии тоньше и аккуратнее */
    .compass-card::before {
        background: rgba(0,0,0,0.06);
    }

    .compass-card::after {
        background: rgba(0,0,0,0.06);
    }

    /* ================= МЕЛКИЕ УЛУЧШЕНИЯ ================= */

    .app-block strong {
        font-weight: 600;
        color: #111827;
    }

    /* аккуратные маркеры */
    .app-block li::marker {
        color: #9ca3af;
    }

    .app-block-desc-wrapper-left,
    .app-block-desc-wrapper-rigth,
    .desctop-wrapper {
        background: white;
        padding: 12px;
        border-radius: 10px;
    }
    /* ================= PASSPORT ================= */

    .product-passport {
        grid-area: product-passport;
        max-width: 1050px;
        height: auto;
        margin: 0 auto;
        padding: 20px;
        display: grid;
        grid-template-columns: 1.2fr 2fr 1fr;
        grid-template-rows: auto auto;
        gap: 20px;
        background: rgba(255,255,255,0.95);
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        overflow: visible;
        position: relative;
        z-index: 1;
    }

    /* левая часть */
    .passport-info {
        display: flex;
        flex-direction: column;
        gap: 10px;
        font-size: 14px;
        line-height: 1.4;
    }

    /* таблица */
    .passport-table {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .table-block {
        background: rgba(0,0,0,0.03);
        padding: 10px;
        border-radius: 10px;
    }

        .table-block h4 {
            text-align: center;
            margin-bottom: 8px;
            font-size: 14px;
        }

    /* строки */
    .row {
        display: flex;
        justify-content: space-between;
        padding: 4px 0;
        font-size: 13px;
        border-bottom: 1px solid rgba(0,0,0,0.08);
    }

    /* элементы */
    .elements {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }

        .elements span {
            background: rgba(0,0,0,0.05);
            padding: 4px;
            border-radius: 5px;
            font-size: 12px;
        }



    .passport-dropdown {
        min-width: 0;
        background: rgba(0,0,0,0.03);
    }


    .dropdown-wrapper {
        position: relative;
    }

    /* кнопка */
    .dropdown-btn {
        width: 100%;
        padding: 10px;
        background: #2e6b52;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* выпадающий блок */
    .dropdown-content {
        position: absolute;
        top: calc(100% + 8px); 
        left: 0;
        width: 100%;
        display: none;
        background: white;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        z-index: 100;
    }

        /* открыто */
        .dropdown-content.open {
            display: block;
        }

    /* стрелка */
    .arrow-down {
        transition: transform 0.3s ease;
    }

    /* активная кнопка */
    .dropdown-btn.active .arrow-down {
        transform: rotate(180deg);
    }

    .banner-application-desctop {
        grid-area: banner-application;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(255,255,255,0.05);
    }

        .banner-application-desctop img {
            width: 60%;
            height: auto;
            filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
        }

    .button-flex-container {
        grid-area: button-flex-container;
    }
    /*Анимвация выезжающих карточек---------------start*/
    /* ================= НАЧАЛЬНОЕ СОСТОЯНИЕ (СТОПКА) ================= */

    .app-block-desc-wrapper-left,
    .app-block-desc-wrapper-rigth,
    .app-block-desc-wrapper-bottom {
        transform: translate(0, 120px) scale(0.9);
        opacity: 0;
        transition: all 6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* немного смещаем для эффекта стопки */
    .app-block-desc-wrapper-left {
        transform: translate(120px, 120px) scale(0.9);
        z-index: 1;
    }

    .app-block-desc-wrapper-rigth {
        transform: translate(-120px, 120px) scale(0.9);
        z-index: 2;
    }

    .app-block-desc-wrapper-bottom {
        transform: translate(0, 120px) scale(0.9);
        z-index: 3;
    }

    /* ================= АКТИВНОЕ СОСТОЯНИЕ ================= */

    .application-section.cards-active .app-block-desc-wrapper-left,
    .application-section.cards-active .app-block-desc-wrapper-rigth,
    .application-section.cards-active .app-block-desc-wrapper-bottom {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    .application-section.cards-active .app-block-desc-wrapper-bottom {
        transition-delay: 0.4s;
    }

    .application-section.cards-active .app-block-desc-wrapper-left {
        transition-delay: 0.4s;
    }

    .application-section.cards-active .app-block-desc-wrapper-rigth {
        transition-delay: 0.4s;
    }
    /*Анимвация выезжающих карточек---------------end*/
    /*Application-section-desctop---------------------------------------------------------end*/

    /*Products-section-desctop---------------------------------------------------------start*/
    .external-modal {
        display: none; /* скрыта по умолчанию */

        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.7);
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }
    /* ===== GRID ===== */
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 20px;
        max-height: 80vh;
        overflow-y: auto;
    }

    /* ===== CARD ===== */
    .product-card {
        align-items: stretch;
        padding: 12px;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

        /* hover эффект */
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.25);
        }

    /* ===== IMAGES ===== */
    .product-images {
        height: 220px;
    }

        .product-images img {
            object-fit: contain; /* 🔥 без обрезки */
        }

    /* ===== BUTTON ===== */
    .buy-btn {
        margin-top: auto;
        font-size: 15px;
        padding: 12px;
    }

    /* ===== MODAL ===== */
    .modal-img {
        max-width: 80%;
        max-height: 85%;
    }

    .modal-arrow {
        font-size: 36px;
        padding: 12px;
    }

    .modal-close {
        font-size: 34px;
    }
    /*Products-section-desctop---------------------------------------------------------end*/

    
    /*REVIEWS-DESCTOP-----------------------------------------------------------------START*/
    reviews {
        padding: 60px 20px;
    }

    .reviews-title {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .review-card {
        min-width: 300px;
        max-width: 300px;
        height: 280px;
    }

    .review-image {
        height: 140px;
    }

    /*gallery---------------------------------------------------------start*/
    .photo-gallery {
        padding: 60px 40px;
    }

        .photo-gallery h3 {
            font-size: 42px;
            margin-bottom: 30px;
        }

    .gallery-stack {
        position: relative;
        width: 100%;
        perspective: 1500px;
        max-width: 1100px;
        height: 500px;
        margin: 30px auto 0;
    }

    .gallery-card {
        border-radius: 24px;
    }
    .gallery-card {
        position: absolute;
        width: 370px;
        height: 100%;
        border-radius: 24px;
        overflow: hidden;
        transition: all 0.35s ease;
        border: 2px solid rgba(255,255,255,0.2);
    }

        .gallery-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .gallery-card:nth-child(1) {
            transform: translateX(0) scale(1);
            z-index: 5;
        }

        .gallery-card:nth-child(2) {
            transform: translateX(40px) scale(0.97);
            z-index: 4;
            opacity: 0.9;
        }

        .gallery-card:nth-child(3) {
            transform: translateX(80px) scale(0.94);
            z-index: 3;
            opacity: 0.8;
        }

        .gallery-card:nth-child(4) {
            transform: translateX(120px) scale(0.91);
            z-index: 2;
            opacity: 0.7;
        }

        .gallery-card:nth-child(5) {
            transform: translateX(160px) scale(0.88);
            z-index: 1;
            opacity: 0.6;
        }
    /*gallery---------------------------------------------------------end*/



}

/* большие экраны */
@media (min-width: 1200px) {
    .review-card {
        min-width: 25%;
    }
    /*REVIEWS-DESCTOP-----------------------------------------------------------------END*/
    /*delivery---------------------------------------------------------start*/
    .delivery {
        background: url('/images/backgrondcollor/big-fon-delivery.png') no-repeat center center;
        background-size: cover;
    }

    .gallery-stack {
        width: 100%;
        max-width: 400px;
        height: 500px;
        margin: 0 auto;
    }

    .gallery-card img {
        user-select: none;
        -webkit-user-drag: none;
        pointer-events: none;
    }

    .delivery {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }

    .animation-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 40px 0;
    }
}
.animation-line {
    position: relative;
    width: 100%;
    max-width: 900px;
    min-width: 320px;
    height: 170px;
    margin: 20px auto;
}
.animation-wrapper {
    display: flex;
    justify-content: center;
}

.card-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; 

    padding: 15px;
    background: linear-gradient(135deg, #4CAF50, #2e7d32);
    color: white;
    cursor: pointer;
}
    .card-header h3 {
        margin: 0;
        text-align: center;
    }

    .card-header .arrow {
        position: absolute;
        right: 15px; 
        top: 50%;
        transform: translateY(-50%);
    }
.card-header {
    padding: 15px 40px; 
}
.company-card.open .arrow {
    transform: translateY(-50%) rotate(180deg);
}
.meme-section {
    width: 100%;
    height: 100vh; 

    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
    .meme-section img {
        max-width: 100%;
        max-height: 100vh; 

        width: auto;
        height: auto;
        object-fit: contain; 
    }
.btn-foot {
    display: block; 
    width: fit-content; 

    margin: 30px auto 0; 

    padding: 12px 20px;
    border: 2px solid #000;
    border-radius: 8px;
    background: transparent;
    color: #000;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.25s ease;
}

    .btn-foot:hover {
        background: #000;
        color: #fff;
        transform: translateY(-2px);
    }
/* ОБЩИЙ ФОН как у картинки */
/* ===== ОБЩИЙ БЛОК ===== */
.seo-block {
    background: #fff; 
    margin-top: -100px;
    padding-top: 80px;
    position: relative;
    z-index: 2;
}

/* ===== КОНТЕЙНЕР ===== */
.seo-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 30px 20px;
    box-sizing: border-box;
    color: #0d0d0d; 
    font-weight: 500;
    line-height: 1.7;
}

    .seo-container p {
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
        margin-bottom: 14px;
    }

    .seo-container li {
        text-align: left;
    }
    .seo-container h2,
    .seo-container h3 {
        font-weight: 700; 
        color: #000;
    }

/* ===== ГРАДИЕНТ (ПЛАВНЫЙ И БЕЗ ПОЛОС) ===== */
.seo-block::before {
    content: "";
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient( to bottom, rgba(255,255,255,0), rgba(255,255,255,1) );
    z-index: 1;
    pointer-events: none;
}
/*delivery---------------------------------------------------------end*/


@media (max-width: 1000px) {
    .app-block.spec {
        grid-template-columns: 1fr;
    }

        .app-block.spec > *,
        .app-block.spec .cert-section {
            grid-column: 1 !important;
        }
}