/* Вставьте этот код в ваш css / style файл */
html { font-size: 100%; }
:root {
    /* Цветовая палитра WhatsApp (Светлая тема) */
    --primary: #25d366; /* Фирменный яркий зеленый WhatsApp */
    --primary-hover: #22bf5b;
    --bg: #fdf9f4; /* Теплый кремовый/молочный фон со скриншота */
    --bg-alt: #ffffff; /* Чисто белые карточки на кремовом фоне */
    
    --text: #1c1e21; /* Глубокий черный текст */
    --text-muted: #5e5e5e;
    --card-border: #e8e5e1; /* Теплая мягкая рамка */
    
    --header-bg: rgba(253, 249, 244, 0.95);
    --footer-bg: #fdf9f4;
    
    --header-h: 6.25rem;
    --narrow: 75rem;
    --radius: 0.5rem; /* Оставляем 8px для строгости B2B */
    --r-but:20rem;
    --transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    --hero-h: 55vh;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.08);
    --f-display: 'Onest', sans-serif;
}

[data-theme='dark'] {
    /* Цветовая палитра WhatsApp (Темная тема) */
    --bg: #111b21; /* Глубокий сине-серый фон (WhatsApp Dark) */
    --bg-alt: #202c33; /* Чуть более светлый фон для карточек */
    
    --text: #ffffff;
    --text-muted: #8696a0; /* Фирменный серо-голубой текст WhatsApp */
    --card-border: #222d34; /* Рамки в тон фона */
    
    --header-bg: rgba(17, 27, 33, 0.95);
    --footer-bg: #111b21;
    
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.5);
    --primary: #25d366; /* Тот же неоновый зеленый */
    --primary-hover: #22bf5b;
}

@font-face { font-family: 'Onest'; src: url('/lib/fonts/Onest-Regular.woff2') format('woff2'), url('/lib/fonts/Onest-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Onest'; src: url('/lib/fonts/Onest-Light.woff2') format('woff2'), url('/lib/fonts/Onest-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Onest'; src: url('/lib/fonts/Onest-Bold.woff2') format('woff2'), url('/lib/fonts/Onest-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }

* { box-sizing: border-box; outline: none; }
body { font-family: 'Onest', sans-serif; font-weight: 400; font-style: normal; background: var(--bg); color: var(--text); margin: 0; transition: background .4s ease, color .4s ease; overflow-x: hidden; line-height: 1.5; }
h1, h2, h3 { font-weight: 600; } 
a { color: var(--text); }
h1, h2, h3, h4, h5, h6 { line-height: 1.2; margin-top: 0; }
h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.25rem, 3vw, 2rem); }
h3 { font-size: clamp(1rem, 2vw, 1.25rem); }
p { margin-top: 0; margin-bottom: 1em; }

/* === КНОПКИ === */
.button { display: inline-flex; align-items: center; justify-content: center; height: 3rem; padding: 0.75rem 1.75rem; border: 0; border-radius: 7rem; text-decoration: none; font-weight: 400; transition: var(--transition); letter-spacing: 0.02rem; font-size: inherit; font-family: inherit; cursor: pointer; }

.button-primary { 
    background-color: var(--primary); 
    color:var(--text); 
}
.button-primary:hover { 
    background-color: var(--primary-hover); 
    transform: translateY(-2px); 
    box-shadow: 0 6px 15px rgba(37, 211, 102, 0.25); 
}

.button-outline { 
    border: 1px solid var(--text); /* Черная/Белая рамка как у кнопки "Try it" */
    color: var(--text); 
    background: transparent; 
}
.button-outline:hover { 
    background-color: var(--text); 
    color: var(--bg); 
    transform: translateY(-2px); 
}

/* === HEADER === */
.header { position: relative; width: 100%; height: var(--header-h); background: var(--header-bg); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 1000; border-bottom: 1px solid var(--card-border); display: flex; align-items: center; transition: var(--transition); }
.header-flex { display: flex; align-items: center; width: 90%; margin: 0 auto; position: relative; }
.h-left { flex: 1; }
.h-right { flex: 1; display: flex; justify-content: flex-end; gap: 1.25rem; align-items: center; }
.logo { text-decoration: none; color: var(--text); display: inline-flex; flex-direction: column; width: fit-content; }
.logo-text { font-family: var(--f-display); font-weight: 800; font-size: 2rem; line-height: 1; display: block; letter-spacing: 0.05rem; }
.logo-bar { height: 4px; background: var(--primary); margin-top: 2px; width: 100%; display: block; }
.nav-desktop { display: flex; gap: 2.1875rem; list-style: none; margin: 0; padding: 0; }
.nav-desktop a { text-decoration: none; color: var(--text); text-transform: uppercase; font-size: 0.9rem; font-weight: 600; transition: .3s; position: relative; }
.nav-desktop a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -0.375rem; left: 0; background-color: var(--primary); transition: width .3s ease; }
.nav-desktop a:hover::after { width: 100%; }

/* Тогглер темы */
.theme-toggle { position: relative;display: flex; align-items: center; justify-content: center; overflow: hidden; transition: var(--transition); color: var(--text); flex-shrink: 0; }
.theme-toggle:hover { background: var(--card-border); }
.theme-toggle svg, .theme-toggle .icon-auto { position: absolute; transition: transform .5s cubic-bezier(.68, -.55, .265, 1.55), opacity .4s ease; opacity: 0; transform: translateY(1.25rem) scale(.5); }
.theme-toggle .icon-auto { font-family: var(--f-display); font-weight: 700; font-size: 1rem; display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; background: var(--text); color: var(--bg); border-radius: 50%; line-height: 1; padding-top: 1px; }
html[data-theme-mode='light'] .icon-sun { opacity: 1; transform: translateY(0) scale(1); }
html[data-theme-mode='dark'] .icon-moon { opacity: 1; transform: translateY(0) scale(1); }
html[data-theme-mode='auto'] .icon-auto { opacity: 1; transform: translateY(0) scale(1.1); }
.theme-toggle, #searchToggle {cursor: pointer;width: 2.75rem; height: 2.75rem;  border: 1px solid var(--card-border) !important; border-radius: var(--r-but); background: var(--bg-alt); }
/* Поиск */
.search-panel { position: fixed; top: -11.25rem; left: 0; width: 100%; height: 8.125rem; background: var(--header-bg); z-index: 1001; border-bottom: 3px solid var(--primary); display: flex; align-items: center; transition: var(--transition); visibility: hidden; opacity: 0; backdrop-filter: blur(10px); }
.search-panel.active { top: 0; visibility: visible; opacity: 1; box-shadow: 0 20px 40px rgba(0,0,0,.1); }
.search-container { display: flex; align-items: center; gap: 1.25rem; width: 100%; }
.search-panel input { flex: 1; border: none; background: none; font-family: inherit; font-size: 1.5rem; color: var(--text); padding: 0.625rem 0; border-bottom: 1px solid var(--card-border); transition: border-color .3s; }
.search-panel input:focus { border-color: var(--primary); }
.search-close { background: none; border: none; color: var(--text); cursor: pointer; padding: 0.625rem; font-size: 2.25rem; line-height: 1; transition: .3s; }
.search-close:hover { color: var(--primary); transform: rotate(90deg); }

/* === HERO === */
.hero { position: relative; width: 100%; height: var(--hero-h); min-height: 31.25rem; overflow: hidden; background: #0c0c0c; }
.hero-preloader { position: absolute; inset: 0; background: var(--bg); z-index: 50; display: flex; align-items: center; justify-content: center; transition: opacity .8s ease, visibility .8s ease; }
.spinner { width: 3.75rem; height: 3.75rem; border: 3px solid var(--card-border); border-top: 3px solid var(--primary); border-radius: 50%; animation: spin 1s cubic-bezier(.68, -.55, .265, 1.55) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-slide { position: relative; height: var(--hero-h); min-height: 31.25rem; display: flex !important; align-items: center; justify-content: center; text-align: center; }
.hero-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.15); transition: opacity 1.5s ease, transform 10s cubic-bezier(.2, .8, .2, 1); }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.2) 0%, rgba(0,0,0,.6) 100%); z-index: 2; opacity: 0; transition: opacity 1.5s ease; }
.hero-content { position: relative; z-index: 5; width: 100%; max-width: 56.25rem; padding: 0 1.25rem; transform: translateY(2.5rem); opacity: 0; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1), opacity 1.2s ease; transition-delay: .3s; color: #fff; }
.slick-active .hero-img, .hero-loaded .hero-img { opacity: 1; transform: scale(1); }
.slick-active .hero-overlay, .hero-loaded .hero-overlay { opacity: 1; }
.slick-active .hero-content, .hero-loaded .hero-content { transform: translateY(0); opacity: 1; }
.hero h1 { font-family: inherit; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; margin: 0 0 1.25rem; text-shadow: 0 4px 20px rgba(0,0,0,.5); letter-spacing: -0.03em; }
.hero p { font-size: clamp(1.1rem, 2vw, 1.25rem); line-height: 1.6; margin-bottom: 2.1875rem; text-shadow: 0 2px 10px rgba(0,0,0,.5); opacity: .9; }
.hero-full { width: 100vw; margin-left: calc(-50vw + 50%); border-radius: 0; }

/* === КАРТОЧКИ ПРОДУКЦИИ (НОВЫЙ СТИЛЬ) === */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.25rem; margin: 3.125rem 0; }
.p-card { background: var(--bg-alt); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; color: inherit; transition: var(--transition); display: flex; flex-direction: column; box-shadow: var(--shadow); position: relative; top: 0; }
.p-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--card-border); /* Убрали зеленую рамку, оставили строгую */ }
.p-img { width: 100%; height: 16rem; background: var(--bg-alt); overflow: hidden; position: relative; display: block; border-bottom: 1px solid var(--card-border); /* Прямой жесткий срез */ }
.p-card .p-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.p-card:hover .p-img img { transform: scale(1.05); }
.p-body { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; gap: 1rem; z-index: 1; }
.p-title { font-weight: 700; font-size: 1.125rem; line-height: 1.4; margin: 0; font-family: inherit; transition: color .3s; }
.p-meta { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 0.5rem; }

/* Строгий ГОСТ тег */
.p-gost { text-transform: uppercase;color: var(--text-muted); border: 1px solid var(--card-border); border-radius: var(--r-but); padding: 0.25rem 0.5rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05rem; }

/* Кнопки в карточке выровнены по низу */
.p-card-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; /* Прижимает блок к низу */ }
.p-arrow-btn { min-width: 2.75rem; height: 2.75rem; border-radius: 100px; background: transparent; border: 1px solid var(--card-border); display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: var(--transition); text-decoration: none; }
.p-arrow-btn:hover { background: var(--bg-alt); color: var(--text); border-color: var(--text-muted); }

/* === ТАБЛИЦЫ === */
.table-wrapper { overflow-x: auto; margin: 1.875rem 0; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--bg); border-left: 3px solid var(--primary); }
table { width: 100%; border-collapse: collapse; min-width: 37.5rem; font-variant-numeric: tabular-nums; }
th { background: var(--bg-alt); color: var(--text); font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 0.75rem; padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid var(--card-border); white-space: nowrap; }
td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--card-border); font-size: 0.875rem; line-height: 1.5; vertical-align: middle; }
tbody tr:hover td { background: var(--bg-alt); }

/* === FOOTER === */
.footer { background: var(--footer-bg); color: var(--text-muted); padding: 5rem 0 2.5rem; border-top: 1px solid var(--card-border); position: relative; }
.footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--primary); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3.75rem; margin-bottom: 3.75rem; }
.footer h4 { font-family: var(--f-display); font-size: 0.875rem; color: var(--text); margin-bottom: 1.5625rem; text-transform: uppercase; letter-spacing: 0.05rem; font-weight: 700; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.9375rem; }
.footer-links a { text-decoration: none; color: inherit; font-size: 0.9375rem; transition: .3s; display: inline-block; }
.footer-links a:hover { color: var(--text); transform: translateX(4px); }

/* === МОБИЛЬНОЕ МЕНЮ === */
.overlay-bg { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1040; opacity: 0; visibility: hidden; transition: .4s ease; backdrop-filter: blur(5px); }
.overlay-bg.active { opacity: 1; visibility: visible; }
.burger { display: none; background: none; border: none; cursor: pointer; padding: 0; z-index: 1100; width: 2.75rem; height: 2.75rem; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.burger span { display: block; width: 1.25rem; height: 2px; background: var(--text); border-radius: 20rem transition: .4s cubic-bezier(.68, -.55, .265, 1.55); }
.burger.active span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.burger.active span:nth-child(2) { opacity: 0; transform: translateX(-10px); }
.burger.active span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }
.mobile-nav { position: fixed; top: 0; right: -100%; width: 85%; max-width: 22rem; height: 100vh; background: var(--header-bg); backdrop-filter: blur(20px); z-index: 1050; padding: 6rem 2.5rem; transition: .5s cubic-bezier(.16, 1, .3, 1); display: flex; flex-direction: column; gap: 0; box-shadow: -20px 0 40px rgba(0,0,0,.1); border-left: 1px solid var(--card-border); }
.mobile-nav.active { right: 0; }
.mobile-nav a { font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; text-decoration: none; color: var(--text); padding: 1rem 0; border-bottom: 1px solid var(--card-border); transition: .3s; text-transform: uppercase; }
.mobile-nav a:hover { color: var(--primary); padding-left: 10px; }

/* Партнеры */
.partners-full { width: 100vw; margin-left: calc(-50vw + 50%); margin-top: 6.25rem; margin-bottom: 5rem; padding: 2.5rem 0; border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); background: var(--bg-alt); }
.partners-slider { margin-top: 2.5rem; }
.partners-slider img { max-height: 4rem; width: auto; margin: 0 auto; opacity: .4; transition: var(--transition); filter: grayscale(100%); mix-blend-mode: multiply; }
[data-theme='dark'] .partners-slider img { filter: grayscale(100%) invert(1); mix-blend-mode: screen; opacity: 0.6; }
.partners-slider img:hover { opacity: 1; filter: grayscale(0%); transform: scale(1.05); mix-blend-mode: normal; }

.container-narrow { max-width: var(--narrow); margin: 0 auto; padding: 1.25rem; }
main { padding: 4rem 0; min-height: 50vh; }

@media (max-width: 68.75rem) {
    .nav-desktop { display: none; }
    .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .search-panel { height: 6.25rem; }
    .search-panel input { font-size: 1.125rem; }
    .header { height: 4rem; }
    .header-flex { width: 100%; padding: 0 0.875rem; }
    .h-left { position: absolute; left: 50%; transform: translateX(-50%); flex: none; z-index: 1; }
    .logo-text { font-size: 1.5rem; }
    .burger { display: flex; border: 1px solid var(--card-border) !important; background: var(--bg-alt); border-radius: var(--r-but); position: relative; z-index: 2; }
    .h-right { gap: 0.375rem; position: relative; z-index: 2; }
    .theme-toggle, #searchToggle {width: 2.375rem; height: 2.375rem; min-width: 2.375rem;  border: 1px solid var(--card-border) !important; border-radius: var(--r-but); background: var(--bg-alt); padding: 0; display: flex; align-items: center; justify-content: center; }
    .tel-desktop { display: none !important; }
    .h-tel-icon { display: flex !important; border-radius: var(--r-but) !important; }
}

@media (max-width: 48rem) {
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
    .p-img { height: 12.5rem; }
    .p-body { padding: 1.25rem; }
    .p-title { font-size: 1rem; }
}

/* === ДОСТАВКА === */
.delivery-block { padding: 3rem; }
.delivery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.delivery-text h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; margin-bottom: 2rem; }
.delivery-text h4 { font-size: 1.125rem; margin-bottom: 0.5rem; color: var(--text); font-weight: 700; }
.delivery-text p { color: var(--text-muted); margin-bottom: 2rem; font-size: 1rem; line-height: 1.6; }
.delivery-img { border-radius: var(--radius); height: 100%; min-height: 25rem; overflow: hidden; border: 1px solid var(--card-border); }
.delivery-img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 48rem) { .delivery-grid { grid-template-columns: 1fr; gap: 2rem; } .delivery-img { min-height: 15rem; } }

/* === FAQ === */
.faq-section { margin: 60px 0; }
.faq-item { background: var(--bg); border: 1px solid var(--card-border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; transition: 0.3s; }
.faq-item.active { border-color: var(--text-muted); box-shadow: var(--shadow); }
.faq-question { padding: 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 17px; user-select: none; color: var(--text); }
.faq-question svg { width: 24px; height: 24px; color: var(--text-muted); transition: transform 0.3s; flex-shrink: 0; margin-left: 15px; }
.faq-item.active .faq-question svg { transform: rotate(180deg); color: var(--text); }
.faq-answer { display: none; padding: 0 20px 20px; line-height: 1.6; color: var(--text-muted); font-size: 15px; }

/* === ПРЕИМУЩЕСТВА === */
.adv-section {
    background-color: var(--primary); /* Фирменный зеленый фон */
    background-image: linear-gradient(90deg, rgb(34, 106, 87) 0%, rgb(3, 176, 94) 100%);
    padding: 4rem 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%); /* Вытягивает фон на всю ширину экрана */
    color: #ffffff;
}

.adv-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.adv-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.adv-icon {
    width: 3.5rem;
    height: 3.5rem;
    background: rgba(255, 255, 255, 0.15); /* Полупрозрачный круг */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: #ffffff;
}

.adv-icon svg {
    width: 2rem;
    height: 2rem;
}

.adv-item h4 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    font-family: var(--f-display);
    line-height: 1.3;
}

.adv-item p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85); /* Чуть приглушенный белый для читаемости */
    margin: 0;
}

/* Адаптив для преимуществ */
@media (max-width: 62rem) /* ~992px */ {
    .adv-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem 2rem;
    }
}

@media (max-width: 36rem) /* ~576px */ {
    .adv-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .adv-item {
        align-items: center;
        text-align: center;
    }
}

/* === ОТЗЫВЫ === */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.review-card { background: var(--bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 2rem; display: flex; flex-direction: column; transition: transform .3s; box-shadow: var(--shadow); }
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.review-stars { display: flex; gap: 4px; margin-bottom: 1.25rem; color: var(--primary); fill: var(--primary); }
.review-stars svg { width: 1.2rem; height: 1.2rem; }
.review-text { font-size: 0.9375rem; color: var(--text); line-height: 1.6; margin-bottom: 2rem; flex-grow: 1; }
.review-author { display: flex; align-items: center; gap: 1rem; border-top: 1px solid var(--card-border); padding-top: 1.25rem; }
.review-avatar { width: 2.5rem; height: 2.5rem; background: var(--bg-alt); color: var(--text); border: 1px solid var(--card-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; }
.review-name { font-weight: 700; font-size: 0.9375rem; color: var(--text); }
.review-role { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; margin-top: 2px; font-weight: 600; }
@media (max-width: 62rem) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 48rem) { .reviews-grid { grid-template-columns: 1fr; } .review-card { padding: 1.5rem; } }

/* Скелетон загрузки */
@keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } }
.img-loading-skeleton { background: linear-gradient(90deg, var(--bg-alt) 0%, var(--card-border) 50%, var(--bg-alt) 100%); background-size: 1000px 100%; animation: shimmer 2s infinite linear; position: relative; overflow: hidden; }
img.lazy-fade { opacity: 0; transition: opacity 0.4s ease-in-out; }
img.lazy-fade.loaded { opacity: 1; }