/*==================================================
                ШРИФТ
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;400;500;600;700;800&display=swap');


/*==================================================
            ПЕРЕМЕННЫЕ
==================================================*/

:root{

--main:#DC7000;
--main-dark:#c15f00;
--black:#191919;
--white:#ffffff;
--gray:#777;
--light:#f7f8fa;
--border:#ececec;

--shadow:0 12px 35px rgba(0,0,0,.08);
--shadow-hover:0 20px 45px rgba(0,0,0,.15);

--radius:18px;

}


/*==================================================
            СБРОС
==================================================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Libre Franklin',sans-serif;
background:var(--white);
color:var(--black);
line-height:1.7;
overflow-x:hidden;
transition:.35s;

}

img{

display:block;
max-width:100%;

}

a{

text-decoration:none;
color:inherit;

}

ul{

list-style:none;

}

.container{

width:min(1400px,94%);
margin:auto;

}


/*==================================================
            СЕКЦИИ
==================================================*/

.section{

padding:110px 0;

}

.bg-light{

background:var(--light);

}

.section-top{

text-align:center;
margin-bottom:70px;

}

.section-top span{

display:inline-block;
color:var(--main);
font-weight:700;
text-transform:uppercase;
letter-spacing:2px;
margin-bottom:15px;

}

.section-top h2{

font-size:48px;
font-weight:800;

}


/*==================================================
            КНОПКИ
==================================================*/

.btn{

display:inline-flex;
align-items:center;
justify-content:center;

padding:16px 34px;

border-radius:14px;

font-weight:700;

transition:.35s;

cursor:pointer;

}

.btn-main{

background:linear-gradient(135deg,#ff9800,var(--main));
color:white;

box-shadow:0 15px 30px rgba(220,112,0,.25);

}

.btn-main:hover{

transform:translateY(-4px);

box-shadow:0 25px 45px rgba(220,112,0,.35);

}

.btn-white{

background:white;

color:#222;

border:1px solid #e7e7e7;

margin-left:18px;

}

.btn-white:hover{

transform:translateY(-4px);

}


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

header{

position:sticky;

top:0;

z-index:1000;

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

backdrop-filter:blur(12px);

border-bottom:1px solid rgba(0,0,0,.05);

}

.header-flex{

display:flex;

justify-content:space-between;

align-items:center;

height:95px;

}

.logo img{

height:58px;

}

header nav ul{

display:flex;

gap:34px;

align-items:center;

}

header nav a{

font-weight:600;

position:relative;

transition:.3s;

}

header nav a::after{

content:"";

position:absolute;

bottom:-8px;

left:0;

width:0;

height:3px;

background:var(--main);

transition:.35s;

}

header nav a:hover::after{

width:100%;

}

.header-right{

display:flex;

align-items:center;

gap:25px;

}

.phone{

font-weight:700;

}


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

.hero{

padding:90px 0;

}

.hero-wrapper{

display:flex;

align-items:center;

justify-content:space-between;

gap:70px;

}

.hero-text{

flex:1;

}

.hero-subtitle{

display:inline-block;

padding:8px 18px;

border-radius:100px;

background:#fff3e7;

color:var(--main);

font-weight:700;

margin-bottom:30px;

}

.hero h1{

font-size:70px;

line-height:1.1;

font-weight:800;

margin-bottom:30px;

}

.hero p{

font-size:21px;

color:var(--gray);

max-width:650px;

margin-bottom:40px;

}

.hero-buttons{

display:flex;

align-items:center;

}

.hero-image{

flex:1;

display:flex;

justify-content:center;

}

.hero-image img{

width:100%;

max-width:650px;

border-radius:25px;

transition:.45s;

}

.hero-image img:hover{

transform:scale(1.03);

}


/*==================================================
            ТРИ ШАГА
==================================================*/

.steps-grid{

display:grid;

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

gap:35px;

}

.step-card{

position:relative;

background:white;

padding:45px;

border-radius:20px;

box-shadow:var(--shadow);

transition:.35s;

overflow:hidden;

}

.step-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:6px;

background:linear-gradient(to right,#ff9800,var(--main));

}

.step-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-hover);

}

.step-number{

font-size:42px;

font-weight:800;

color:#ececec;

margin-bottom:15px;

}

.step-icon{

font-size:55px;

margin-bottom:25px;

}

.step-card h3{

font-size:26px;

margin-bottom:18px;

}

.step-card p{

color:var(--gray);

}
/*==================================================
            НАШИ ПРЕИМУЩЕСТВА
==================================================*/

.advantages-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(270px,1fr));

gap:35px;

}

.advantage-card{

background:#fff;

padding:45px 35px;

border-radius:22px;

box-shadow:var(--shadow);

text-align:center;

transition:.35s;

position:relative;

overflow:hidden;

}

.advantage-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:linear-gradient(to right,#ff9800,var(--main));

transform:scaleX(0);

transition:.4s;

}

.advantage-card:hover::before{

transform:scaleX(1);

}

.advantage-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-hover);

}

.advantage-icon{

font-size:60px;

margin-bottom:25px;

}

.advantage-card h3{

font-size:24px;

margin-bottom:18px;

}

.advantage-card p{

color:var(--gray);

}


/*==================================================
                ПОЧЕМУ МЫ
==================================================*/

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.about-text span{

color:var(--main);

font-weight:700;

text-transform:uppercase;

letter-spacing:2px;

}

.about-text h2{

font-size:52px;

line-height:1.2;

margin:25px 0 45px;

}

.why-list{

display:flex;

flex-direction:column;

gap:30px;

}

.why-item{

display:flex;

gap:25px;

align-items:flex-start;

padding:20px;

border-radius:18px;

transition:.35s;

}

.why-item:hover{

background:#fff;

box-shadow:var(--shadow);

}

.why-number{

width:65px;

height:65px;

background:linear-gradient(135deg,#ff9800,var(--main));

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:22px;

font-weight:700;

color:#fff;

flex-shrink:0;

}

.why-item h3{

margin-bottom:10px;

font-size:24px;

}

.why-item p{

color:var(--gray);

}

.about-image{

display:flex;

justify-content:center;

}

.about-image img{

width:100%;

max-width:620px;

border-radius:25px;

box-shadow:var(--shadow);

transition:.4s;

}

.about-image img:hover{

transform:scale(1.04);

}


/*==================================================
        ГДЕ ИСПОЛЬЗУЕТСЯ
==================================================*/

.usage-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:35px;

}

.usage-card{

background:white;

padding:40px;

border-radius:20px;

box-shadow:var(--shadow);

transition:.35s;

text-align:center;

position:relative;

overflow:hidden;

}

.usage-card::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:100%;

height:5px;

background:var(--main);

transform:scaleX(0);

transition:.4s;

}

.usage-card:hover::after{

transform:scaleX(1);

}

.usage-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-hover);

}

.usage-icon{

font-size:58px;

margin-bottom:20px;

transition:.35s;

}

.usage-card:hover .usage-icon{

transform:scale(1.15);

}

.usage-card h3{

margin-bottom:15px;

font-size:24px;

}

.usage-card p{

color:var(--gray);

}


/*==================================================
        АВТОМАТИКА И ДОМОФОНИЯ
==================================================*/

.automation-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.automation-image{

display:flex;

justify-content:center;

}

.automation-image img{

width:100%;

max-width:650px;

border-radius:25px;

box-shadow:var(--shadow);

transition:.45s;

}

.automation-image img:hover{

transform:scale(1.04);

}

.automation-text span{

color:var(--main);

font-weight:700;

text-transform:uppercase;

letter-spacing:2px;

}

.automation-text h2{

font-size:48px;

margin:20px 0 30px;

line-height:1.2;

}

.automation-text p{

color:var(--gray);

margin-bottom:30px;

font-size:18px;

}

.automation-list{

display:grid;

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

gap:18px;

margin-bottom:35px;

}

.automation-list li{

background:#fff;

padding:16px;

border-radius:12px;

box-shadow:0 8px 18px rgba(0,0,0,.05);

transition:.3s;

}

.automation-list li:hover{

background:var(--main);

color:white;

transform:translateY(-4px);

}


/*==================================================
        ПЛАВНОЕ ПОЯВЛЕНИЕ
==================================================*/

.section{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}/*==================================================
            ПОМОЩЬ С ВЫБОРОМ
==================================================*/

.help-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:35px;

}

.help-card{

background:#fff;

padding:45px;

border-radius:22px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

}

.help-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-hover);

}

.help-icon{

font-size:60px;

margin-bottom:25px;

}

.help-card h3{

font-size:25px;

margin-bottom:18px;

}

.help-card p{

color:var(--gray);

}


/*==================================================
                КАТАЛОГ
==================================================*/

.catalog-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:35px;

}

.catalog-card {
  background: #fff;
  padding: 35px;
  border-radius: 22px;
  box-shadow: var(--shadow);
  text-align: center;
  cursor: pointer;
  transition: .4s;
  border: 2px solid transparent;

}

.catalog-card:hover{

transform:translateY(-12px);

border-color:var(--main);

box-shadow:var(--shadow-hover);

}

.catalog-card img{

width:130px;

height:130px;

object-fit:contain;

margin:auto;

transition:.35s;

}

.catalog-card:hover img{

transform:scale(1.12) rotate(-4deg);

}

.catalog-card h3{

margin-top:25px;

font-size:24px;

}


/*==================================================
            ГОТОВЫЕ РЕШЕНИЯ
==================================================*/

.solution-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(330px,1fr));

gap:40px;

}

.solution-card{

padding:45px;

border-radius:25px;

background:linear-gradient(135deg,#ffffff,#fafafa);

box-shadow:var(--shadow);

transition:.35s;

}

.solution-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-hover);

}

.solution-icon{

font-size:65px;

margin-bottom:25px;

}

.solution-card h3{

font-size:30px;

margin-bottom:20px;

}

.solution-card p{

color:var(--gray);

margin-bottom:30px;

}

.solution-card a{

font-weight:700;

color:var(--main);

}


/*==================================================
                    FAQ
==================================================*/

.faq{

max-width:900px;

margin:auto;

}

.faq-item{

margin-bottom:20px;

border-radius:18px;

overflow:hidden;

background:#fff;

box-shadow:var(--shadow);

}

.faq-question{

width:100%;

padding:25px 30px;

display:flex;

justify-content:space-between;

align-items:center;

font-size:20px;

font-weight:700;

background:#fff;

border:none;

cursor:pointer;

transition:.3s;

}

.faq-question:hover{

background:#fff7ef;

}

.faq-answer{

display:none;

padding:30px;

border-top:1px solid #eee;

}

.faq-item.active .faq-answer{

display:block;

}

.faq-item.active span{

transform:rotate(45deg);

}

.faq-question span{

font-size:32px;

transition:.3s;

color:var(--main);

}
.faq-answer p {
  font-size: 23px; /* было, скорее всего, 16px или меньше */
  line-height: 1;
}


/*==================================================
            ОБРАТНАЯ СВЯЗЬ
==================================================*/

.contact-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.contact-info span{

color:var(--main);

font-weight:700;

}

.contact-info h2{

font-size:48px;

margin:20px 0;

}

.contact-info p{

color:var(--gray);

margin-bottom:35px;

}

.contact-info ul{

display:flex;

flex-direction:column;

gap:18px;

font-size:18px;

}

.contact-form{

display:flex;

flex-direction:column;

gap:22px;

}

.contact-form input,

.contact-form textarea{

padding:18px;

font-size:17px;

border-radius:14px;

border:1px solid #ddd;

outline:none;

transition:.3s;

font-family:inherit;

}

.contact-form textarea{

resize:vertical;

min-height:170px;

}

.contact-form input:focus,

.contact-form textarea:focus{

border-color:var(--main);

box-shadow:0 0 0 4px rgba(220,112,0,.12);

}


/*==================================================
                    FOOTER
==================================================*/

footer{

background:#161616;

color:#ccc;

padding:90px 0 30px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:50px;

margin-bottom:60px;

}

.footer-logo{

width:180px;

margin-bottom:25px;

}

footer h3{

margin-bottom:20px;

color:white;

}

footer li{

margin-bottom:12px;

}

footer a{

transition:.3s;

}

footer a:hover{

color:#fff;

}

.footer-bottom{

display:flex;

justify-content:space-between;

align-items:center;

padding-top:25px;

}

.socials{

display:flex;

gap:20px;

}


/*==================================================
                ТЁМНАЯ ТЕМА
==================================================*/

body.dark{

background:#111;

color:white;

}

body.dark header{

background:rgba(20,20,20,.95);

}

body.dark .bg-light{

background:#181818;

}

body.dark .step-card,

body.dark .advantage-card,

body.dark .usage-card,

body.dark .catalog-card,

body.dark .solution-card,

body.dark .help-card,

body.dark .faq-item,

body.dark .automation-list li{

background:#232323;

color:white;

}

body.dark .contact-form input,

body.dark .contact-form textarea{

background:#232323;

border:1px solid #333;

color:white;

}

body.dark p{

color:#b8b8b8;

}

body.dark .btn-white{

background:#232323;

color:white;

border:1px solid #444;

}


/*==================================================
                АДАПТИВ
==================================================*/

@media(max-width:1100px){

.hero-wrapper,
.about-grid,
.automation-grid,
.contact-wrapper{

grid-template-columns:1fr;

display:grid;

}

.hero{

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.header-flex{

flex-direction:column;

height:auto;

padding:20px 0;

gap:25px;

}

header nav ul{

flex-wrap:wrap;

justify-content:center;

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

}
/*==================================================
  HIDE/SHOW LOGIC
==================================================*/
.hidden-section {
  display: none; /* Полностью скрывает блок */
  opacity: 0;
  pointer-events: none; /* Чтобы нельзя было кликнуть по скрытому блоку */
}

.visible-section {
  display: block;
  opacity: 1;
  animation: fadeIn .6s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/*==================================================
  ABOUT STYLES (без тёмной темы)
==================================================*/
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 50px;
}

.about-text p {
  color: var(--gray);
  margin-bottom: 24px;
  line-height: 1.7;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}

.stat-item { text-align: center; }
.stat-number {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: var(--main);
}
.stat-label {
  display: block;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray);
}

.about-features { display: flex; flex-direction: column; gap: 20px; }

.feature-card {
  background: white;
  padding: 30px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  align-items: flex-start;
  gap: 20px;
  transition: transform .3s, box-shadow .3s;
}
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}
.feature-icon { font-size: 28px; flex-shrink: 0; }
.feature-card h4 { margin: 0 0 8px 0; color: var(--black); }
.feature-card p { margin: 0; color: var(--gray); font-size: 15px; }

/*==================================================
  REVIEWS STYLES (без тёмной темы)
==================================================*/
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
  margin-top: 50px;
}

.review-card {
  background: white;
  padding: 35px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.review-bubble {
  background: #fff3e7; /* Лёгкий акцентный фон под цитату (как в hero-subtitle) */
  padding: 25px;
  border-radius: 16px;
  color: var(--black);
  line-height: 1.6;
  position: relative;
}

.review-bubble::before {
  content: '"';
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 40px;
  opacity: 0.2;
  font-family: serif;
}

.review-meta strong {
  display: block;
  color: var(--black);
  font-size: 18px;
}
.review-meta span {
  display: block;
  color: var(--gray);
  font-size: 14px;
}

.review-card:hover {
  box-shadow: var(--shadow-hover);
}

@media(max-width:768px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: 1fr; }
}
/* ===================================================
   ПРАВКА ЛОГОТИПА (Страховка)
   =================================================== */
.logo {
    display: inline-block;
    text-decoration: none;
    z-index: 2000; /* Поднимаем выше всех слоев */
    position: relative;
}

.logo img {
    display: block;
    height: 58px; /* Твоя высота */
    width: auto;
    pointer-events: auto; /* Гарантируем, что клик работает */
}

/* ===================================================
   СТИЛИ КНОПКИ "ОСТАВИТЬ ЗАЯВКУ" (если вдруг слетели)
   =================================================== */
#submit-btn {
    width: 100%; /* Растягиваем на всю ширину формы */
    margin-top: 20px;
    font-size: 18px;
    padding: 18px 0;
}

/* Адаптив для мобильных (чтобы кнопка не была гигантской) */
@media (max-width: 768px) {
    .hero-wrapper {
        flex-direction: column;
        text-align: center;
    }
    .hero-buttons {
        justify-content: center;
        margin-top: 20px;
    }
    .btn-white {
        margin-left: 0;
        margin-top: 10px;
    }
}
/*==================================================
                КАТАЛОГ
==================================================*/

.catalog-page{
    background:#f7f8fa;
}

.catalog-page .section-top p{
    color:var(--gray);
    margin-top:15px;
    font-size:18px;
}

.catalog-layout{

    display:grid;

    grid-template-columns:300px 1fr;

    gap:40px;

    align-items:start;

}

/*=========================
        ЛЕВОЕ МЕНЮ
=========================*/

.catalog-sidebar{

    position:relative;

    top:120px;

    display:flex;

    flex-direction:column;

    gap:12px;
  z-index: 9999;

}

.category{

    width:100%;

    padding:18px 22px;

    background:white;

    border:1px solid var(--border);

    border-radius:16px;

    font-size:17px;

    font-weight:600;

    text-align:left;

    cursor:pointer;

    transition:.35s;

}

.category:hover{

    transform:translateX(6px);

    color:white;

    background:linear-gradient(135deg,#ff9800,var(--main));

    box-shadow:0 15px 30px rgba(220,112,0,.25);

}

.category.active{

    color:white;

    background:linear-gradient(135deg,#ff9800,var(--main));

    box-shadow:0 15px 30px rgba(220,112,0,.30);

}

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

.products-grid{

    display:grid;

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

    gap:28px;

}

/*=========================
        КАРТОЧКА
=========================*/

.product-card{

    background:white;

    border-radius:22px;

    padding:28px;

    box-shadow:var(--shadow);

    transition:.35s;

    border:2px solid transparent;

    display:flex;

    flex-direction:column;

}

.product-card:hover{

    transform:translateY(-10px);

    border-color:var(--main);

    box-shadow:var(--shadow-hover);

}

.product-card img{

    width:170px;

    height:170px;

    object-fit:contain;

    margin:auto;

    transition:.35s;

}

.product-card:hover img{

    transform:scale(1.08);

}

.product-card h3{

    margin-top:25px;

    margin-bottom:18px;

    font-size:22px;

    font-weight:700;

    text-align:center;

    min-height:55px;

}

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

.product-card ul{

    margin-bottom:25px;

}

.product-card li{

    list-style:none;

    margin-bottom:12px;

    padding-left:28px;

    position:relative;

    color:var(--gray);

}

.product-card li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--main);

    font-weight:bold;

}

/*=========================
      КНОПКА
=========================*/

.product-card .btn{

    margin-top:auto;

    width:100%;

    padding:14px;

    border-radius:12px;

}

/*=========================
      ПОЛОСКА СВЕРХУ
=========================*/

.product-card::before{

    content:"";

    display:block;

    width:100%;

    height:5px;

    border-radius:10px;

    margin:-28px -28px 25px -28px;

    background:linear-gradient(to right,#ff9800,var(--main));

}

/*=========================
        СКРОЛЛ
=========================*/

.catalog-sidebar::-webkit-scrollbar{

    width:5px;

}

.catalog-sidebar::-webkit-scrollbar-thumb{

    background:var(--main);

    border-radius:50px;

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

.hero-wrapper,
.about-grid,
.automation-grid,
.contact-wrapper{
    display:grid;
    grid-template-columns:1fr;
    gap:50px;
}

.hero-text,
.about-text,
.automation-text,
.contact-info{
    text-align:center;
}

.hero-buttons{
    justify-content:center;
}

.hero-image,
.about-image,
.automation-image{
    order:-1;
}

.header-flex{
    flex-direction:column;
    height:auto;
    padding:18px 0;
    gap:18px;
}

header nav ul{
    justify-content:center;
    flex-wrap:wrap;
    gap:18px;
}

.footer-grid{
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

}

/* Адаптив: на телефонах делаем одну колонку */
  .footer-col-logo {
    text-align: center;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
/* ==========================================================
   MOBILE FIX v1
   Не меняет дизайн ПК
========================================================== */

@media (max-width: 768px){

html{
    overflow-x:hidden;
}

body{
    overflow-x:hidden;
}

.container{
    width:94%;
    padding:0;
}

.section{
    padding:70px 0;
}

/* ---------- HEADER ---------- */

.header-flex{
    flex-direction:column;
    height:auto;
    gap:20px;
    padding:15px 0;
}

.logo img{
    height:48px;
}

header nav{
    width:100%;
}

header nav ul{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:16px;
}

.header-right{
    flex-direction:column;
    gap:10px;
}

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

.hero{
    padding:50px 0;
}

.hero-wrapper{
    display:flex;
    flex-direction:column;
    gap:40px;
}

.hero-text{
    order:2;
    text-align:center;
}

.hero-image{
    order:1;
}

.hero-image img{
    width:100%;
    max-width:100%;
}

.hero h1{
    font-size:38px;
    line-height:1.2;
}

.hero p{
    font-size:17px;
    max-width:100%;
}

.hero-buttons{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.btn,
.btn-main,
.btn-white{
    width:100%;
    margin:0;
}

/* ---------- Заголовки ---------- */

.section-top{
    margin-bottom:45px;
}

.section-top h2{
    font-size:34px;
}

/* ---------- GRID ---------- */

.steps-grid,
.advantages-grid,
.usage-grid,
.help-grid,
.catalog-grid,
.solution-grid{
    grid-template-columns:1fr;
    gap:24px;
}

/* ---------- ABOUT ---------- */

.about-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:40px;
}

.about-image{
    order:-1;
}

.about-text h2{
    font-size:34px;
}

.about-stats{
    grid-template-columns:1fr;
}

/* ---------- AUTOMATION ---------- */

.automation-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:40px;
}

.automation-image{
    order:-1;
}

.automation-text h2{
    font-size:34px;
}

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

/* ---------- CONTACT ---------- */

.contact-wrapper{
    display:grid;
    grid-template-columns:1fr;
    gap:40px;
}

.contact-info h2{
    font-size:34px;
}

.contact-form input,
.contact-form textarea{
    width:100%;
}

/* ---------- FAQ ---------- */

.faq-question{
    font-size:18px;
    padding:18px;
}

.faq-answer{
    padding:20px;
}

/* ---------- FOOTER ---------- */

.footer-grid{
    grid-template-columns:1fr;
    text-align:center;
}

.footer-bottom{
    flex-direction:column;
    gap:20px;
}

.socials{
    justify-content:center;
}

/* ---------- IMAGES ---------- */

img{
    max-width:100%;
    height:auto;
}

}
  /* ==========================================================
   MOBILE FIX v2
   КАТАЛОГ + КАРТОЧКИ
========================================================== */

@media (max-width:768px){

.catalog-layout{
    display:flex;
    flex-direction:column;
    gap:30px;
}

.catalog-sidebar{
    position:relative;
    top:auto;
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin-bottom:10px;
}

.category{
    width:100%;
    padding:14px 10px;
    font-size:14px;
    text-align:center;
    border-radius:12px;
}

.products-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:22px;
}

.product-card{
    display:flex;
    flex-direction:column;
    padding:20px;
    border-radius:18px;
}

.product-card::before{
    margin:-20px -20px 20px;
}

.product-card img{
    width:100%;
    height:220px;
    object-fit:contain;
}

.product-card h3{
    font-size:22px;
    text-align:center;
    min-height:auto;
}

.product-card ul{
    margin:20px 0;
}

.product-card li{
    font-size:15px;
    line-height:1.5;
}

.product-card .btn{
    width:100%;
}

.catalog-card{
    padding:25px;
}

.catalog-card img{
    width:120px;
    height:120px;
}

.catalog-card h3{
    font-size:20px;
}

/* ---------- карточки преимуществ ---------- */

.step-card,
.advantage-card,
.usage-card,
.help-card,
.solution-card{

    padding:28px;

}

.step-icon,
.advantage-icon,
.usage-icon,
.help-icon,
.solution-icon{

    font-size:48px;

}

.step-card h3,
.advantage-card h3,
.usage-card h3,
.help-card h3{

    font-size:22px;

}

.solution-card h3{

    font-size:24px;

}

/* ---------- статистика ---------- */

.stat-number{

    font-size:30px;

}

.stat-label{

    font-size:13px;

}

/* ---------- feature ---------- */

.feature-card{

    flex-direction:column;
    text-align:center;
    padding:24px;

}

.feature-icon{

    font-size:42px;

}

/* ---------- reviews ---------- */

.reviews-grid{

    grid-template-columns:1fr;
    gap:24px;

}

.review-card{

    padding:24px;

}

.review-bubble{

    padding:20px;

}

/* ---------- таблицы ---------- */

table{

    display:block;
    overflow-x:auto;

}

/* ---------- iframe ---------- */

iframe{

    width:100%;

}

/* ---------- видео ---------- */

video{

    width:100%;
    height:auto;

}

/* ---------- картинки ---------- */

.hero-image img,
.about-image img,
.automation-image img{

    border-radius:18px;

}

}
  /* ==========================================================
   MOBILE FIX v3
   ФИНАЛЬНАЯ АДАПТАЦИЯ МОБИЛЬНОЙ ВЕРСИИ
========================================================== */

@media (max-width:768px){

/* ---------- Типографика ---------- */

body{
    font-size:16px;
    line-height:1.6;
}

p{
    font-size:16px;
    line-height:1.7;
}

.section-top span{
    font-size:13px;
    letter-spacing:1px;
}

.section-top h2{
    font-size:30px;
    line-height:1.2;
}

.hero h1,
.about-text h2,
.automation-text h2,
.contact-info h2{
    font-size:30px;
    line-height:1.2;
}

/* ---------- Кнопки ---------- */

.btn,
.btn-main,
.btn-white{

    width:100%;
    min-height:54px;
    padding:16px;
    font-size:16px;

}

/* ---------- Отступы ---------- */

.step-card,
.advantage-card,
.usage-card,
.help-card,
.catalog-card,
.solution-card,
.review-card,
.feature-card{

    margin:0;

}

/* ---------- WHY ---------- */

.why-item{

    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:24px;

}

.why-number{

    width:58px;
    height:58px;
    font-size:20px;

}

/* ---------- CONTACT ---------- */

.contact-info ul{

    gap:12px;
    font-size:16px;

}

.contact-form{

    gap:16px;

}

.contact-form input,
.contact-form textarea{

    border-radius:12px;

}

/* ---------- FOOTER ---------- */

.footer-logo{

    margin:auto;
}

.footer-title{

    display:block;
}

.footer-list li{

    margin-bottom:12px;

}

.socials{

    flex-wrap:wrap;

}

/* ---------- Анимации ---------- */

.step-card:hover,
.advantage-card:hover,
.catalog-card:hover,
.solution-card:hover,
.review-card:hover,
.help-card:hover,
.usage-card:hover,
.product-card:hover{

    transform:none;

}

/* ---------- Hover отключаем ---------- */

.hero-image img:hover,
.about-image img:hover,
.automation-image img:hover{

    transform:none;

}

/* ---------- Видео ---------- */

iframe,
video,
canvas{

    max-width:100%;

}

/* ---------- SVG ---------- */

svg{

    max-width:100%;

}

/* ---------- Формы ---------- */

input,
textarea,
button,
select{

    max-width:100%;

}

/* ---------- Длинные слова ---------- */

h1,
h2,
h3,
p,
li,
span{

    word-wrap:break-word;
    overflow-wrap:break-word;

}

/* ---------- Любые Grid ---------- */

[class*="grid"]{

    width:100%;

}

/* ---------- Любые изображения ---------- */

[class*="image"]{

    width:100%;

}

/* ---------- Любые карточки ---------- */

[class*="card"]{

    width:100%;

}

/* ---------- Любые flex ---------- */

[class*="flex"]{

    width:100%;

}

}
/* ==========================
   ПЕРЕКЛЮЧЕНИЕ КАТЕГОРИЙ
========================== */

.product-card.hidden{
    display:none !important;
}

.product-card.visible{
    display:flex !important;
}