*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:#1d1d1f;line-height:1.5;background:#fff;overflow-x:hidden}
.container{max-width:1080px;margin:0 auto;padding:0 24px}
.wide{max-width:1280px}
a{text-decoration:none;color:inherit;transition:color .2s}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}

/* === PROMO BAR === */
.promo-bar{background:#f0f4f8;color:#424245;text-align:center;font-size:11px;padding:6px 16px;letter-spacing:.1px;border-bottom:1px solid #e8ecf0}
.promo-bar a{color:#3b7dd8;font-weight:500;margin-left:4px}
.promo-bar a:hover{text-decoration:underline}

/* === HEADER === */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid #d2d2d7}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:52px}
.site-logo{font-size:17px;font-weight:700;letter-spacing:-.3px;color:#1d1d1f}
.site-logo span{font-weight:400;color:#86868b;margin-left:6px;font-size:13px}
.site-nav{display:flex;gap:28px}
.site-nav a{font-size:13px;color:#424245;font-weight:400}
.site-nav a:hover,.site-nav a.active{color:#3b7dd8}
.header-phone{font-size:13px;color:#424245;display:flex;align-items:center;gap:6px}
.header-phone:hover{color:#3b7dd8}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px}
.burger svg{width:18px;height:18px}

/* === LINKS === */
.link{color:#3b7dd8;font-size:15px;font-weight:400;display:inline-flex;align-items:center;gap:4px}
.link:hover{text-decoration:underline}
.link::after{content:'›';font-size:18px;line-height:1}
.link-sm{font-size:13px}

/* === BUTTONS === */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:980px;font-size:15px;font-weight:400;border:none;cursor:pointer;transition:background .2s,transform .1s}
.btn:active{transform:scale(.98)}
.btn-blue{background:#3b7dd8;color:#fff}
.btn-blue:hover{background:#4a8ae0}
.btn-outline{background:transparent;border:1px solid #d2d2d7;color:#1d1d1f}
.btn-outline:hover{border-color:#86868b}
.btn-dark{background:#1d1d1f;color:#fff}
.btn-dark:hover{background:#333}

/* === HERO === */
.hero{padding:56px 0 40px;text-align:center}
.hero-label{font-size:13px;color:#86868b;font-weight:400;margin-bottom:12px}
.hero h1{font-size:clamp(40px,6vw,64px);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:#1d1d1f;margin-bottom:16px}
.hero h1 br+*,.hero h1::after{color:#3b7dd8}
.hero-sub{font-size:19px;color:#424245;font-weight:400;max-width:540px;margin:0 auto 28px;line-height:1.5}
.hero-links{display:flex;justify-content:center;gap:24px;margin-bottom:24px;flex-wrap:wrap}
.hero-image{max-width:680px;margin:0 auto;overflow:hidden}
.hero-image img{width:100%;height:auto;margin-top:-15%}

/* === SECTION === */
.section{padding:80px 0}
.section-gray{background:#f5f5f7}
.section-title{font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:-.02em;color:#1d1d1f;margin-bottom:8px}
.section-sub{font-size:17px;color:#86868b;font-weight:400;margin-bottom:40px}
.section-center{text-align:center}
.section-center .section-sub{max-width:500px;margin-left:auto;margin-right:auto;margin-bottom:48px}

/* === CATEGORIES === */
.categories{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat-item{text-align:center;padding:20px 12px;border-radius:18px;transition:background .2s;cursor:pointer}
.cat-item:hover{background:#f5f5f7}
.cat-item img{width:100%;max-width:160px;height:140px;object-fit:contain;margin:0 auto 16px}
.cat-item h3{font-size:15px;font-weight:600;color:#1d1d1f;margin-bottom:4px}
.cat-item p{font-size:12px;color:#86868b;line-height:1.4}

/* === PRODUCT GRID === */
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px}
.product-item{text-align:center}
.product-item-img{aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:24px;margin-bottom:16px;border-radius:18px;background:#f5f5f7;transition:background .3s}
.product-item:hover .product-item-img{background:#eef4fb}
.product-item-img img{max-height:180px;object-fit:contain;transition:transform .4s}
.product-item:hover .product-item-img img{transform:scale(1.04)}
.product-item h3{font-size:15px;font-weight:600;color:#1d1d1f;margin-bottom:4px}
.product-item h3 a{color:inherit}
.product-item h3 a:hover{color:#3b7dd8}
.product-item .short{font-size:13px;color:#86868b;margin-bottom:8px;line-height:1.4}
.product-item .price{font-size:15px;font-weight:600;color:#1d1d1f}
.product-item .price-old{font-size:13px;color:#86868b;text-decoration:line-through;margin-left:8px;font-weight:400}

/* === SHOWCASE (full-width product blocks) === */
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:60px 0}
.showcase-text h2{font-size:32px;font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
.showcase-text p{font-size:17px;color:#424245;line-height:1.6;margin-bottom:20px}
.showcase-img{display:flex;align-items:center;justify-content:center;padding:32px;background:#f5f5f7;border-radius:24px}
.showcase-img img{max-height:300px;object-fit:contain}
.showcase.reverse{direction:rtl}
.showcase.reverse>*{direction:ltr}

/* === CTA === */
.cta{text-align:center;padding:80px 0}
.cta h2{font-size:32px;font-weight:700;margin-bottom:12px}
.cta p{font-size:17px;color:#86868b;margin-bottom:28px}
.cta-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

/* === FEATURES === */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature{text-align:center;padding:32px 20px}
.feature-icon{font-size:28px;color:#1d1d1f;margin-bottom:16px}
.feature h3{font-size:15px;font-weight:600;color:#1d1d1f;margin-bottom:8px}
.feature p{font-size:13px;color:#86868b;line-height:1.6}

/* === CATALOG PAGE === */
.catalog-layout{display:grid;grid-template-columns:200px 1fr;gap:48px;padding:48px 0}
.catalog-nav h4{font-size:13px;font-weight:600;color:#1d1d1f;margin-bottom:16px;text-transform:uppercase;letter-spacing:.5px}
.catalog-nav a{display:block;font-size:14px;color:#424245;padding:8px 0;border-bottom:1px solid transparent}
.catalog-nav a:hover,.catalog-nav a.active{color:#3b7dd8}
.page-top{padding:40px 0 0}
.page-top h1{font-size:32px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
.page-top p{font-size:15px;color:#86868b}
.breadcrumb{font-size:12px;color:#86868b;margin-bottom:12px;display:flex;gap:6px;align-items:center}
.breadcrumb a{color:#86868b}
.breadcrumb a:hover{color:#3b7dd8}

/* === PRODUCT DETAIL === */
.detail{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;padding:48px 0;align-items:start}
.detail-img{background:#f5f5f7;border-radius:24px;padding:48px;display:flex;align-items:center;justify-content:center;min-height:400px}
.detail-img img{max-height:360px;object-fit:contain}
.detail-info .product-cat{font-size:13px;color:#86868b;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.detail-info h1{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:16px}
.detail-info .detail-price{font-size:28px;font-weight:700;margin-bottom:8px}
.detail-info .detail-price .price-old{font-size:17px;color:#86868b;text-decoration:line-through;font-weight:400;margin-left:12px}
.detail-info .detail-desc{font-size:15px;color:#424245;line-height:1.7;margin-bottom:28px}
.detail-features{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-bottom:32px}
.detail-features span{font-size:13px;color:#424245;padding:6px 0;border-bottom:1px solid #f5f5f7;display:block}
.detail-actions{display:flex;gap:12px;flex-wrap:wrap}

/* === ABOUT === */
.about-content{max-width:680px;margin:0 auto;padding:64px 0}
.about-content h2{font-size:28px;font-weight:700;margin:40px 0 12px;letter-spacing:-.02em}
.about-content p{font-size:16px;color:#424245;line-height:1.8;margin-bottom:16px}
.about-content strong{color:#1d1d1f}

/* === CONTACTS === */
.contacts-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:48px 0}
.contact-list{display:flex;flex-direction:column;gap:16px}
.contact-item{display:flex;gap:14px;align-items:flex-start}
.contact-item i{color:#86868b;font-size:16px;margin-top:3px;width:18px}
.contact-item h4{font-size:14px;font-weight:600;color:#1d1d1f;margin-bottom:2px}
.contact-item p{font-size:13px;color:#86868b}
.contact-item a{color:#3b7dd8}
.form-card{background:#f5f5f7;border-radius:18px;padding:32px}
.form-card h3{font-size:19px;font-weight:600;margin-bottom:24px}
.form-group{margin-bottom:16px}
.form-group label{font-size:12px;font-weight:500;color:#86868b;display:block;margin-bottom:5px}
.form-group input,.form-group textarea{width:100%;padding:11px 14px;border:1px solid #d2d2d7;border-radius:10px;font-size:14px;font-family:inherit;background:#fff;transition:border-color .2s}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#3b7dd8}
.form-group textarea{resize:vertical;min-height:80px}

/* === FOOTER === */
.site-footer{border-top:1px solid #d2d2d7;padding:32px 0;margin-top:64px}
.footer-inner{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;font-size:13px;color:#86868b}
.footer-col h4{font-size:12px;font-weight:600;color:#1d1d1f;margin-bottom:12px;text-transform:uppercase;letter-spacing:.3px}
.footer-col ul{display:flex;flex-direction:column;gap:8px}
.footer-col a{color:#424245;font-size:13px}
.footer-col a:hover{color:#3b7dd8}
.footer-brand p{line-height:1.6;margin-top:8px}
.footer-bottom{margin-top:24px;padding-top:16px;border-top:1px solid #f5f5f7;font-size:12px;color:#86868b}

/* === WHATSAPP FLOAT === */
.wa-btn{position:fixed;bottom:24px;right:24px;z-index:90;width:52px;height:52px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;box-shadow:0 2px 12px rgba(37,211,102,.3);transition:transform .2s}
.wa-btn:hover{transform:scale(1.08)}

/* === ALERTS === */
.alert{padding:12px 16px;border-radius:10px;font-size:14px;margin-bottom:20px}
.alert-success{background:#e8f5e9;color:#2e7d32}

/* === RESPONSIVE === */
@media(max-width:900px){
    .categories{grid-template-columns:repeat(2,1fr)}
    .products{grid-template-columns:repeat(2,1fr)}
    .showcase{grid-template-columns:1fr;gap:24px}
    .showcase.reverse{direction:ltr}
    .detail{grid-template-columns:1fr;gap:32px}
    .features{grid-template-columns:1fr}
    .catalog-layout{grid-template-columns:1fr}
    .contacts-grid{grid-template-columns:1fr;gap:32px}
    .footer-inner{grid-template-columns:1fr 1fr;gap:24px}
}
@media(max-width:600px){
    .site-nav{display:none}
    .site-nav.open{display:flex;flex-direction:column;position:absolute;top:52px;left:0;right:0;background:#fff;padding:20px 24px;gap:16px;border-bottom:1px solid #d2d2d7}
    .burger{display:block}
    .hero h1{font-size:34px}
    .categories{grid-template-columns:1fr 1fr;gap:8px}
    .products{grid-template-columns:repeat(2,1fr);gap:16px}
    .hero-links{flex-direction:column;align-items:center;gap:12px}
    .detail-actions{flex-direction:column}
    .footer-inner{grid-template-columns:1fr}
    .cta-buttons{flex-direction:column;align-items:center}
}