/*
Theme Name: The Kitchen
Theme URI: https://thekitchen.msk.ru
Author: Trofimov Denis
Description: Custom theme for The Kitchen — kitchen furniture manufacturer
Version: 2.0.0
Text Domain: thekitchen
Requires at least: 6.0
Requires PHP: 8.0
*/

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  --red:#E31E24;--red-hover:#C4191E;--red-light:#FEF2F2;
  --black:#1E1E1C;--g900:#2D2D2B;--g700:#555;--g500:#8C8C8A;--g300:#C4C4C2;--g100:#F5F5F3;--white:#FFF;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased;scroll-behavior:smooth;overflow-x:clip}
body{font-family:'Figtree',sans-serif;color:var(--black);background:var(--white);overflow-x:clip}
/* overflow-x:clip (не hidden!) — не создаёт scroll context, sticky продолжает работать. */
.container{overflow:visible}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{background:var(--g100);padding:8px 0;font-size:12px;color:var(--g700)}
.topbar-inner{display:flex;justify-content:space-between;align-items:center}
.topbar a{color:var(--g700);margin-left:20px;font-weight:500}
.topbar a:hover{color:var(--red)}

/* ============================================================
   HEADER
   ============================================================ */
.header{background:var(--white);padding:0;position:sticky;top:0;z-index:1000;border-bottom:1px solid var(--g100);transition:box-shadow 0.3s}
.header.scrolled{box-shadow:0 2px 20px rgba(0,0,0,0.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;height:72px}
.logo{flex-shrink:0;display:flex;align-items:center}
.logo img{height:48px;width:auto;display:block}
.main-nav{display:flex;align-items:center;gap:28px;list-style:none;white-space:nowrap;margin:0 auto;height:100%}
.main-nav>li{display:flex;align-items:center;height:100%;position:relative}
.main-nav>li>a{font-size:14px;font-weight:600;color:var(--black);transition:color 0.2s;white-space:nowrap;display:flex;align-items:center;height:100%}
.main-nav>li>a:hover{color:var(--red)}

/* Dropdown parent */
.main-nav>.menu-item-has-children>a::after{content:'';display:inline-block;width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid currentColor;margin-left:5px}

/* Dropdown menu */
.main-nav .sub-menu{display:none;position:absolute;top:100%;left:-16px;background:var(--white);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.1);padding:8px 0;min-width:200px;z-index:100;list-style:none}
.main-nav .menu-item-has-children:hover>.sub-menu{display:block}
.main-nav .sub-menu li{white-space:nowrap}
.main-nav .sub-menu a{display:block;padding:10px 20px;font-size:13px;font-weight:500;color:var(--g700);transition:all 0.15s}
.main-nav .sub-menu a:hover{color:var(--red);background:var(--g100)}
.header-right{display:flex;align-items:center;gap:24px;flex-shrink:0}
.header-phone{font-size:15px;font-weight:700;color:var(--black);white-space:nowrap}
.header-phone:hover{color:var(--red)}
.btn-red{white-space:nowrap}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-red{background:var(--red);color:#fff;padding:10px 20px;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:all 0.25s;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.btn-red:hover{background:var(--red-hover);transform:translateY(-1px);box-shadow:0 4px 12px rgba(227,30,36,0.3)}
.btn-outline{background:transparent;color:var(--black);padding:12px 24px;border:2px solid var(--g300);border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:all 0.25s}
.btn-outline:hover{border-color:var(--g700);background:var(--g100)}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:64px 0 80px}
.hero-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:48px;align-items:center}
.hero-text h1{font-size:42px;font-weight:800;line-height:1.12;letter-spacing:-0.02em;margin-bottom:20px;overflow-wrap:break-word}
.hero-text h1 .accent{color:var(--red);white-space:nowrap}
.hero-text .sub{font-size:17px;color:var(--g700);line-height:1.6;margin-bottom:16px}
.hero-text .promo-tag{display:inline-flex;align-items:center;gap:8px;background:var(--red-light);color:var(--red);font-size:14px;font-weight:700;padding:8px 16px;border-radius:8px;margin-bottom:24px}
.hero-text .promo-tag svg{width:16px;height:16px;fill:var(--red)}
.hero-facts{display:flex;align-items:center;gap:20px;margin-bottom:24px;padding:16px 0;border-top:1px solid var(--g100);border-bottom:1px solid var(--g100)}
.hero-fact{display:flex;flex-direction:column;gap:2px}
.hero-fact-num{font-size:17px;font-weight:800;color:var(--red);white-space:nowrap}
.hero-fact-label{font-size:11px;color:var(--g500);white-space:nowrap}
.hero-fact-divider{width:1px;height:32px;background:var(--g300);flex-shrink:0}
.hero-materials{font-size:13px;color:var(--g500);margin-bottom:20px}
.hero-materials span{color:var(--black);font-weight:600}
.hero-btns{display:flex;gap:12px}

/* Hero slider */
.hero-slider{position:relative}
.hero-slider-track{position:relative;width:100%;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:var(--g100)}
.hero-slide{position:absolute;inset:0;display:block;text-decoration:none;color:inherit;opacity:0;visibility:hidden;transition:opacity 0.5s ease}
.hero-slide.active{opacity:1;visibility:visible;z-index:1}
.hero-slide-img{width:100%;height:100%;object-fit:cover;display:block}
.hero-slide-info{position:absolute;bottom:0;left:0;right:0;padding:24px 28px 28px;background:linear-gradient(0deg,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.1) 70%,transparent 100%);color:#fff}
.hero-slide-info .model{font-size:22px;font-weight:700;margin-bottom:4px;letter-spacing:-0.01em}
.hero-slide-info .model-sub{font-size:14px;opacity:0.85}
.hero-slider-arrow{position:absolute;top:calc(50% - 22px);width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,0.92);color:var(--black);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.25s,background 0.2s,transform 0.2s;z-index:3;box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.hero-slider-arrow:hover{background:#fff;transform:scale(1.08)}
.hero-slider-arrow.prev{left:14px}
.hero-slider-arrow.next{right:14px}
.hero-slider:hover .hero-slider-arrow,.hero-slider:focus-within .hero-slider-arrow{opacity:1}
.slider-dots{display:flex;gap:8px;justify-content:center;margin-top:16px}
.slider-dot{width:8px;height:8px;border-radius:50%;background:var(--g300);cursor:pointer;transition:all 0.3s;border:none;padding:0}
.slider-dot:hover{background:var(--g500)}
.slider-dot.active{background:var(--red);width:24px;border-radius:4px}

/* ============================================================
   MATERIALS
   ============================================================ */
.materials{padding:64px 0;background:var(--g100)}
.materials-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px}
.materials-head h2{font-size:28px;font-weight:800}
.materials-link{font-size:14px;font-weight:600;color:var(--red)}
.materials-link:hover{text-decoration:underline}
.mat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.mat-card{background:var(--white);border:1px solid transparent;border-radius:12px;padding:24px 20px}
.mat-card:hover{border-color:var(--g300);box-shadow:0 4px 16px rgba(0,0,0,0.04)}
.mat-name{font-size:18px;font-weight:700;margin-bottom:8px}
.mat-desc{font-size:13px;color:var(--g500);line-height:1.6}
.mat-info{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mat-info-item{background:var(--white);border-radius:10px;padding:16px;transition:all 0.25s}
.mat-info-item:hover{border-color:var(--g300);box-shadow:0 4px 16px rgba(0,0,0,0.04)}
.mat-info-label{font-size:11px;color:var(--g500);margin-bottom:4px}
.mat-info-value{font-size:14px;font-weight:700}

/* ============================================================
   ADVANTAGES
   ============================================================ */
.advantages{padding:64px 0;border-top:1px solid var(--g100)}
.adv-grid{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:start}
.adv-left h2{font-size:28px;font-weight:800;line-height:1.2;margin-bottom:12px}
.adv-left p{font-size:14px;color:var(--g700);line-height:1.6}
.adv-video{margin-top:20px;border-radius:12px;overflow:hidden;position:relative;cursor:pointer}
.adv-video video{width:100%;display:block;border-radius:12px}
.adv-video-expand{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:rgba(227,30,36,0.9);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.25s}
.adv-video-expand:hover{background:var(--red);transform:translate(-50%,-50%) scale(1.1)}
.adv-video-expand svg{margin-left:2px}

/* Video fullscreen popup */
.video-popup{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all 0.25s}
.video-popup.is-open{opacity:1;visibility:visible}
.video-popup-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.85);cursor:pointer}
.video-popup-inner{position:relative;width:90%;max-width:960px;z-index:1}
.video-popup-inner video{width:100%;border-radius:12px;display:block}
.video-popup-close{position:absolute;top:-40px;right:0;background:none;border:none;color:#fff;font-size:28px;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center}
.adv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.adv-card{padding:24px;border:1px solid var(--g100);border-radius:12px;transition:all 0.25s}
.adv-card:hover{border-color:var(--g300);box-shadow:0 4px 16px rgba(0,0,0,0.04)}
.adv-icon{width:40px;height:40px;border-radius:10px;background:var(--red-light);display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--red);font-size:16px;font-weight:800}
.adv-card h3{font-size:15px;font-weight:700;margin-bottom:6px}
.adv-card p{font-size:13px;color:var(--g700);line-height:1.5}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews{padding:64px 0;background:var(--g100)}
.reviews-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px}
.reviews-head h2{font-size:28px;font-weight:800;margin-bottom:8px}
.ya-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:var(--white);border-radius:8px;font-size:13px}
.ya-badge svg{width:24px;height:24px;flex-shrink:0}
.ya-rating{font-size:20px;font-weight:800}
.ya-stars{color:#FFB800;font-size:14px;letter-spacing:1px}
.reviews-link{font-size:14px;font-weight:600;color:var(--red);white-space:nowrap}
.reviews-link:hover{text-decoration:underline}
.reviews-scroll{display:flex;gap:16px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory}
.reviews-scroll::-webkit-scrollbar{height:4px}
.reviews-scroll::-webkit-scrollbar-thumb{background:var(--g300);border-radius:2px}

/* Video review cards */
.review-video-card{min-width:240px;flex-shrink:0;scroll-snap-align:start}
.review-video-thumb{position:relative;border-radius:12px;overflow:hidden;margin-bottom:10px;cursor:pointer;background:var(--black);aspect-ratio:9/16;max-height:420px}
.review-video-player{width:100%;height:100%;object-fit:cover;display:block;background:var(--black)}
.review-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(227,30,36,0.92);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity 0.25s,background 0.2s,transform 0.2s;box-shadow:0 4px 18px rgba(0,0,0,0.35);pointer-events:auto;z-index:2}
.review-play:hover{background:var(--red);transform:translate(-50%,-50%) scale(1.08)}
.review-play svg{margin-left:3px;width:20px;height:20px}
.review-video-thumb.is-playing .review-play{opacity:0;pointer-events:none}
.review-video-name{font-size:14px;font-weight:700}

/* Yandex reviews header */
.reviews-ya-head{display:flex;justify-content:space-between;align-items:center;margin-top:32px;margin-bottom:16px}
.ya-label{font-size:13px;color:var(--g500)}

/* Text reviews grid */
.reviews-text-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
.reviews-text-scroll{display:flex;gap:14px;overflow-x:auto;padding:8px 0 16px;margin-top:24px;scroll-snap-type:x mandatory;scroll-padding-left:24px}
.reviews-text-scroll::-webkit-scrollbar{height:4px}
.reviews-text-scroll::-webkit-scrollbar-track{background:transparent}
.reviews-text-scroll::-webkit-scrollbar-thumb{background:var(--g300);border-radius:2px}
.reviews-text-scroll .review-text-card{flex:0 0 360px;scroll-snap-align:start}
.review-meta{margin-top:auto;padding-top:14px}

/* Text review cards */
.review-text-card{background:var(--white);border:1px solid transparent;border-radius:12px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;transition:all 0.25s}
.review-text-card:hover{border-color:var(--g300);box-shadow:0 4px 16px rgba(0,0,0,0.04)}
.review-stars{color:#FFB800;font-size:14px;letter-spacing:1px;margin-bottom:12px}
.review-quote{font-size:14px;color:var(--g700);line-height:1.6;margin-bottom:16px}
.review-author{font-size:14px;font-weight:700}
.review-source{font-size:12px;color:var(--g500)}

/* ============================================================
   ACTIONS
   ============================================================ */
.actions{padding:48px 0}
.actions-compact{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.actions-compact-item{background:var(--g100);border-radius:12px;padding:20px;transition:all 0.25s}
.actions-compact-item:hover{box-shadow:0 4px 16px rgba(0,0,0,0.04)}
.action-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--red);margin-bottom:8px;display:block}
.actions-compact-text{font-size:14px;color:var(--g700);line-height:1.5}
.actions-compact-text strong{color:var(--black);font-weight:700}

/* ============================================================
   CATALOG
   ============================================================ */
.catalog{padding:64px 0}
.catalog-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px}
.catalog-header h2{font-size:28px;font-weight:800}
.catalog-tabs{display:flex;gap:8px}
.tab{padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--g300);background:transparent;font-family:inherit;transition:all 0.2s}
.tab:hover,.tab.active{background:var(--black);color:#fff;border-color:var(--black)}
.catalog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.p-card{border:1px solid var(--g100);border-radius:12px;overflow:hidden;transition:all 0.3s}
.p-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.08);transform:translateY(-3px)}
.p-img{height:200px;position:relative;background:var(--g100);display:flex;align-items:center;justify-content:center;color:var(--g500);font-size:13px}
.p-badge{position:absolute;top:10px;left:10px;background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:4px 8px;border-radius:4px}
.p-fav{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.9);display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;color:var(--g500);font-size:14px}
.p-body{padding:14px}
.p-title{font-size:15px;font-weight:700;margin-bottom:2px}
.p-cat{font-size:11px;color:var(--g500);margin-bottom:8px}
.p-price-row{display:flex;align-items:baseline;gap:6px;margin-bottom:12px}
.p-price{font-size:18px;font-weight:800}
.p-old{font-size:12px;color:var(--g500);text-decoration:line-through}
.p-discount-tag{font-size:11px;font-weight:700;color:var(--red);background:var(--red-light);padding:2px 6px;border-radius:4px}
.p-btns{display:flex;gap:6px}
.p-btns button,.p-btns a{flex:1;padding:8px;font-size:12px;font-weight:600;border-radius:6px;cursor:pointer;font-family:inherit;transition:all 0.2s;text-align:center;text-decoration:none;display:block;box-sizing:border-box}
.p-btn-primary{background:var(--red);color:#fff;border:none}
.p-btn-primary:hover{background:var(--red-hover)}
.p-btn-ghost{background:transparent;color:var(--black);border:1px solid var(--g300)}
.p-btn-ghost:hover{border-color:var(--g700)}

/* ============================================================
   CATALOG PAGE (archive)
   ============================================================ */
.catalog-page{padding:20px 0 80px}
.catalog-page-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px}
.catalog-page-head h1{font-size:32px;font-weight:800;margin-bottom:4px}
.catalog-page-count{font-size:14px;color:var(--g500)}
.catalog-sort{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--g500)}
.catalog-sort select{padding:8px 14px;border:1px solid var(--g300);border-radius:8px;font-family:inherit;font-size:13px;font-weight:600;background:var(--white);cursor:pointer}

.catalog-layout{display:grid;grid-template-columns:240px 1fr;gap:28px}

/* Filters */
.catalog-filters{position:sticky;top:80px;align-self:start}
.filter-group{margin-bottom:24px}
.filter-title{font-size:13px;font-weight:700;margin-bottom:10px}
.filter-pills{display:flex;flex-wrap:wrap;gap:6px}
.filter-pill{padding:8px 16px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;border:1.5px solid var(--g100);background:var(--white);font-family:inherit;transition:all 0.2s;color:var(--g700)}
.filter-pill:hover{border-color:var(--g300);background:var(--g100)}
.filter-pill.active{border-color:var(--red);background:var(--red-light);color:var(--red)}
.filter-price{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.filter-price input{width:100%;padding:10px 12px;border:1.5px solid var(--g100);border-radius:10px;font-size:13px;font-family:inherit;transition:border-color 0.2s}
.filter-price input:focus{outline:none;border-color:var(--red)}
.filter-price-sep{color:var(--g300);font-size:14px}
.filter-apply{width:100%;padding:10px;border:none;border-radius:10px;background:var(--black);color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:all 0.2s}
.filter-apply:hover{background:var(--g900)}
.filter-reset{display:block;text-align:center;font-size:13px;color:var(--g500);margin-top:16px;text-decoration:underline}
.filter-reset:hover{color:var(--red)}

/* Filter CTA */
.filter-cta{background:var(--g100);border-radius:14px;padding:20px;margin-top:24px}
.filter-cta-title{font-size:14px;font-weight:700;margin-bottom:6px}
.filter-cta p{font-size:12px;color:var(--g500);line-height:1.5;margin-bottom:12px}

/* Product grid (archive) */
.catalog-products .catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.catalog-products .p-card{border:1px solid var(--g100);border-radius:12px;overflow:hidden;transition:all 0.3s}
.catalog-products .p-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.08);transform:translateY(-3px)}
.p-img-link{display:block;position:relative;background:var(--g100)}
.p-img-link img{width:100%;height:220px;object-fit:cover;display:block}
.p-img-placeholder{height:220px;display:flex;align-items:center;justify-content:center;color:var(--g500);font-size:13px;background:var(--g100)}
.catalog-products .p-title{display:block;font-size:15px;font-weight:700;margin-bottom:2px;color:var(--black);text-decoration:none}
.catalog-products .p-title:hover{color:var(--red)}
.catalog-products .p-btns a{flex:1;padding:8px;font-size:12px;font-weight:600;border-radius:6px;text-align:center;text-decoration:none;display:block;transition:all 0.2s}

/* Pagination */
.catalog-pagination{display:flex;justify-content:center;gap:4px;margin-top:32px}
.catalog-pagination .page-numbers{padding:8px 14px;border-radius:8px;font-size:14px;font-weight:600;color:var(--g700);border:1px solid var(--g100);transition:all 0.2s}
.catalog-pagination .page-numbers:hover{border-color:var(--g300)}
.catalog-pagination .page-numbers.current{background:var(--red);color:#fff;border-color:var(--red)}

/* Empty state */
.catalog-empty{text-align:center;padding:64px 0}
.catalog-empty h3{font-size:20px;font-weight:700;margin-bottom:8px}
.catalog-empty p{font-size:14px;color:var(--g500);margin-bottom:20px}

/* ============================================================
   SINGLE PRODUCT
   ============================================================ */
.product-page{padding:20px 0 80px}

/* Gallery */
.product-gallery-wrap{margin-bottom:28px}
.product-main-photo-wrap{position:relative;border-radius:14px;overflow:hidden;background:var(--g100);margin-bottom:12px}
.product-main-img{width:100%;max-height:520px;object-fit:contain;display:block;margin:0 auto}
.product-photo-placeholder{height:400px;display:flex;align-items:center;justify-content:center;color:var(--g500);font-size:14px}
.product-main-photo-wrap .p-badge{position:absolute;top:16px;left:16px;font-size:13px;padding:6px 12px}

/* Thumbnails */
.product-thumbs{display:flex;gap:8px;overflow-x:auto}
.product-thumb{width:80px;height:80px;border-radius:10px;overflow:hidden;border:2px solid var(--g100);cursor:pointer;padding:0;background:var(--g100);flex-shrink:0;transition:border-color 0.2s}
.product-thumb.active{border-color:var(--red)}
.product-thumb:hover{border-color:var(--g300)}
.product-thumb img{width:100%;height:100%;object-fit:cover}

/* Info layout */
.product-info{display:grid;grid-template-columns:1fr 380px;gap:40px}

/* Details (left) */
.product-meta-line{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.product-discount{font-size:12px;font-weight:700;color:var(--red);background:var(--red-light);padding:4px 10px;border-radius:4px}
.product-title{font-size:28px;font-weight:800}
.product-tags{font-size:13px;color:var(--g500);margin-bottom:20px}
.product-description{font-size:14px;color:var(--g700);line-height:1.7;margin-bottom:28px}
.product-description p{margin-bottom:10px}
.product-specs-title{font-size:16px;font-weight:700;margin-bottom:12px}
.product-specs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.product-spec{background:var(--g100);border-radius:10px;padding:14px}
.product-spec-label{font-size:11px;color:var(--g500);margin-bottom:3px}
.product-spec-value{font-size:14px;font-weight:700}

/* Sidebar (right) */
.product-sidebar{position:sticky;top:80px;align-self:start}
.product-price-card{background:var(--g100);border-radius:16px;padding:28px}
.product-price-row{display:flex;align-items:center;gap:10px}
.product-price-main{font-size:30px;font-weight:800}
.product-price-old{font-size:15px;color:var(--g500);text-decoration:line-through;margin-bottom:20px}
.product-cta-btn{width:100%;margin-bottom:8px;padding:14px;font-size:14px}
.product-perks{margin-top:16px}
.product-perk{font-size:12px;color:var(--g500);line-height:1.8}

/* ============================================================
   PORTFOLIO
   ============================================================ */
.portfolio{padding:64px 0;background:var(--g100)}
.portfolio-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px}
.portfolio-header h2{font-size:28px;font-weight:800}
.portfolio-header .count{font-size:14px;color:var(--g500)}
.portfolio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.port-card{border-radius:12px;overflow:hidden;background:var(--white);transition:all 0.3s}
.port-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.08);transform:translateY(-3px)}
.port-img{height:180px;background:var(--g100);display:flex;align-items:center;justify-content:center;color:var(--g500);font-size:13px}
.port-body{padding:14px}
.port-title{font-size:14px;font-weight:700;margin-bottom:2px}
.port-meta{font-size:12px;color:var(--g500)}

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section{padding:80px 0}
.cta-card{background:var(--black);border-radius:20px;padding:56px;display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:center}
.cta-card h2{font-size:28px;font-weight:800;color:#fff;line-height:1.2;margin-bottom:14px}
.cta-card>div>p{font-size:14px;color:var(--g500);line-height:1.6;margin-bottom:20px}
.cta-list{list-style:none;margin:0 0 24px}
.cta-list li{font-size:13px;color:var(--g300);line-height:1.7;padding-left:18px;position:relative;margin-bottom:6px}
.cta-list li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--red)}
.cta-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cta-stat{background:rgba(255,255,255,0.06);border-radius:10px;padding:14px}
.cta-stat .num{font-size:22px;font-weight:800;color:var(--red);margin-bottom:2px}
.cta-stat .label{font-size:11px;color:var(--g500)}
.cta-form{background:var(--white);border-radius:16px;padding:28px}
.field{margin-bottom:12px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:4px}
.field input,.field textarea{width:100%;padding:12px 16px;border:2px solid var(--g300);border-radius:8px;font-size:15px;font-family:inherit;transition:border-color 0.2s;box-sizing:border-box}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--red)}
.field input::placeholder,.field textarea::placeholder{color:var(--g500)}
.field textarea{resize:vertical;min-height:100px;line-height:1.5}

/* File upload */
.file-upload{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.file-upload-btn{cursor:pointer;padding:10px 20px;font-size:14px;display:inline-block}
.file-upload-name{font-size:13px;color:var(--g500)}

/* Service popup (compact) */
.popup-content--service{max-width:540px;padding:28px 32px}
.popup-service-title{font-size:22px;font-weight:800;margin-bottom:6px;line-height:1.2;padding-right:48px}
.popup-service-sub{font-size:13px;color:var(--g500);line-height:1.5;margin-bottom:18px}
.tk-form--compact .field{margin-bottom:10px}
.tk-form--compact .field label{font-size:12px;margin-bottom:3px}
.tk-form--compact .field input,.tk-form--compact .field textarea{padding:9px 12px;font-size:14px;border-width:1px}
.tk-form--compact .field textarea{min-height:72px}
.tk-form--compact .service-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tk-form--compact .service-row .field{margin-bottom:0}
.tk-form--compact .field--inline{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tk-form--compact .file-upload-btn-sm{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;background:var(--g100);color:var(--g700);border-radius:6px;font-size:13px;cursor:pointer;transition:background 0.2s;font-weight:500}
.tk-form--compact .file-upload-btn-sm:hover{background:var(--g300)}
.tk-form--compact .field-checkbox{margin:10px 0 12px}
.tk-form--compact .field-checkbox label{font-size:11px;line-height:1.4}
.tk-form--compact .submit-btn{padding:12px;font-size:15px}
.field-checkbox{margin:14px 0;display:flex;align-items:center;gap:8px}
.field-checkbox input[type="checkbox"]{flex-shrink:0;width:16px;height:16px;accent-color:var(--red);cursor:pointer}
.field-checkbox label{font-size:12px;color:var(--g500);line-height:1.4;cursor:pointer}
.field-checkbox a{color:var(--red);text-decoration:underline}
.submit-btn{width:100%;padding:14px;margin-top:4px}

/* ============================================================
   PRODUCTION PAGE
   ============================================================ */
.prod-hero{padding:48px 0 56px}
.prod-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.prod-hero h1{font-size:36px;font-weight:800;line-height:1.15;margin-bottom:14px}
.prod-hero p{font-size:15px;color:var(--g700);line-height:1.7;margin-bottom:24px}
.prod-hero-btns{display:flex;gap:10px}
.prod-hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.prod-stat{text-align:center;padding:24px;background:var(--g100);border-radius:14px}
.prod-stat-num{font-size:28px;font-weight:800;color:var(--red)}
.prod-stat-label{font-size:12px;color:var(--g500);margin-top:4px}

/* Video */
.prod-video{padding:0 0 56px}
.prod-video-wrap{position:relative;border-radius:16px;overflow:hidden;cursor:pointer}
.prod-video-wrap video{width:100%;display:block;border-radius:16px}
.prod-video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(227,30,36,0.9);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.25s}
.prod-video-play:hover{background:var(--red);transform:translate(-50%,-50%) scale(1.1)}
.prod-video-play svg{margin-left:3px}

/* Timeline */
.prod-timeline,.prod-steps{padding:56px 0;background:var(--g100)}
.prod-timeline h2,.prod-steps h2{font-size:28px;font-weight:800;margin-bottom:40px}
.timeline{position:relative;padding-left:40px;border-left:3px solid var(--g300);margin-top:24px}
.timeline-item{position:relative;padding-bottom:40px;padding-top:4px}
.timeline-item:last-child{padding-bottom:0}
.timeline-dot{position:absolute;left:-50px;top:12px;width:20px;height:20px;border-radius:50%;background:var(--red);border:4px solid var(--g100)}
.timeline-row{display:grid;grid-template-columns:1fr 220px;gap:20px;align-items:center}
.timeline-step{font-size:12px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px}
.timeline-content h3{font-size:20px;font-weight:700;margin-bottom:8px}
.timeline-content p{font-size:14px;color:var(--g700);line-height:1.7}
.timeline-img{height:140px;border-radius:12px;background:var(--white)}

/* Materials */
.prod-materials{padding:56px 0}
.prod-materials h2{font-size:28px;font-weight:800;margin-bottom:24px}
.prod-materials-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.prod-mat-card{border:1px solid var(--g100);border-radius:14px;padding:24px;transition:all 0.25s}
.prod-mat-card:hover{border-color:var(--g300);box-shadow:0 4px 16px rgba(0,0,0,0.04)}
.prod-mat-card h3{font-size:16px;font-weight:700;margin-bottom:8px}
.prod-mat-card p{font-size:13px;color:var(--g500);line-height:1.6}

/* Production CTA */
.prod-cta{padding:0 0 80px}
.prod-cta-card{background:var(--black);border-radius:20px;padding:48px;text-align:center}
.prod-cta-card h2{font-size:24px;font-weight:800;color:#fff;margin-bottom:10px}
.prod-cta-card p{font-size:14px;color:var(--g500);margin-bottom:24px;max-width:500px;margin-left:auto;margin-right:auto;line-height:1.6}
.prod-cta-btns{display:flex;gap:10px;justify-content:center}
.prod-cta-btns .btn-outline{color:#fff;border-color:var(--g500)}
.prod-cta-btns .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,0.1)}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-hero{padding:48px 0 32px}
.about-hero h1{font-size:36px;font-weight:800;margin-bottom:10px}
.about-hero-sub{font-size:17px;color:var(--red);font-weight:600;margin-bottom:14px}
.about-hero-intro{font-size:15px;color:var(--g700);line-height:1.6;max-width:720px}

.about-section{padding:40px 0}
.about-section--alt{background:var(--g100)}
.about-text-block{max-width:920px}
.about-text-block h2{font-size:22px;font-weight:800;margin-bottom:12px}
.about-text-block p{font-size:15px;color:var(--g700);line-height:1.75;margin:0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.about-grid--reverse{direction:rtl}
.about-grid--reverse>*{direction:ltr}
.about-section h2{font-size:22px;font-weight:800;margin-bottom:12px}
.about-section p{font-size:14px;color:var(--g700);line-height:1.7;margin-bottom:12px}

.about-video-wrap{position:relative;border-radius:14px;overflow:hidden}
.about-video-wrap video{width:100%;display:block;border-radius:14px}
.about-video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(227,30,36,0.9);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.25s}
.about-video-play:hover{background:var(--red);transform:translate(-50%,-50%) scale(1.1)}
.about-video-play svg{margin-left:2px}

/* Stats */
.about-stats{padding:32px 0}
.about-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.about-stat{background:var(--g100);border-radius:14px;padding:24px;text-align:center}
.about-stat-num{font-size:28px;font-weight:800;color:var(--red)}
.about-stat-label{font-size:12px;color:var(--g500);margin-top:4px}

/* Best works slider */
.about-slider-section{padding:32px 0}
.about-slider-section h2{font-size:24px;font-weight:800;margin-bottom:20px}
.about-slider{display:flex;gap:14px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory}
.about-slider::-webkit-scrollbar{height:4px}
.about-slider::-webkit-scrollbar-thumb{background:var(--g300);border-radius:2px}
.about-slide{flex-shrink:0;width:320px;border-radius:14px;overflow:hidden;position:relative;scroll-snap-align:start;display:block;text-decoration:none;color:inherit}
.about-slide-img{width:100%;height:220px;object-fit:cover;display:block;transition:transform 0.3s}
.about-slide:hover .about-slide-img{transform:scale(1.03)}
.about-slide-info{position:absolute;bottom:0;left:0;right:0;padding:14px;background:linear-gradient(0deg,rgba(0,0,0,0.7),transparent);color:#fff}
.about-slide-title{font-size:14px;font-weight:700}

/* Features grid */
.about-features{padding:48px 0;background:var(--g100)}
.about-features h2{font-size:28px;font-weight:800;margin-bottom:6px}
.about-features-sub{font-size:15px;color:var(--g500);margin-bottom:28px}
.about-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.about-feat{background:var(--white);border-radius:14px;padding:24px 22px;position:relative;overflow:hidden;transition:box-shadow 0.25s}
.about-feat::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--red);opacity:0;transition:opacity 0.25s}
.about-feat:hover{box-shadow:0 4px 20px rgba(0,0,0,0.06)}
.about-feat:hover::before{opacity:1}
.about-feat h3{font-size:15px;font-weight:700;margin-bottom:6px;color:var(--black)}
.about-feat p{font-size:13px;color:var(--g500);line-height:1.55;margin:0}

/* Contacts */
.about-contacts{padding:48px 0}
.about-contacts-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.about-contacts h2{font-size:24px;font-weight:800;margin-bottom:20px}
.about-contact-item{margin-bottom:16px}
.about-contact-label{font-size:12px;color:var(--g500);margin-bottom:3px}
.about-contact-value{font-size:15px;font-weight:600;color:var(--black);text-decoration:none;display:block}
a.about-contact-value:hover{color:var(--red)}
.about-contact-cta{background:var(--g100);border-radius:16px;padding:32px}
.about-contact-cta h3{font-size:18px;font-weight:700;margin-bottom:6px}
.about-contact-cta p{font-size:14px;color:var(--g500);line-height:1.6;margin-bottom:16px}

/* ============================================================
   MATERIALS PAGE
   ============================================================ */
.mat-hero{padding:48px 0 16px}
.mat-hero h1{font-size:36px;font-weight:800;margin-bottom:6px}
.mat-hero-sub{font-size:15px;color:var(--g500)}

.mat-section{padding:40px 0}
.mat-section--alt{background:var(--g100)}
.mat-section-title{font-size:28px;font-weight:800;margin-bottom:4px}
.mat-section-sub{font-size:14px;color:var(--g500);margin-bottom:28px}

.mat-block-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.mat-block-header h2{font-size:24px;font-weight:800;margin:0}
.mat-badge{background:var(--red-light);color:var(--red);font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px}
.mat-block-desc{font-size:14px;color:var(--g700);line-height:1.7;max-width:720px}

.mat-block-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mat-block-grid--2{grid-template-columns:repeat(2,1fr)}
.mat-block-card{background:var(--white);border:1px solid var(--g100);border-radius:14px;padding:24px}
.mat-section--alt .mat-block-card{border-color:var(--g300)}
.mat-block-card h3{font-size:15px;font-weight:700;margin-bottom:6px}
.mat-block-card p{font-size:13px;color:var(--g500);line-height:1.55;margin:0}
.mat-brand{display:inline-block;font-size:18px;font-weight:800;color:var(--black);margin-bottom:8px}
.mat-brands-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.mat-brand-tag{display:inline-block;padding:8px 18px;background:var(--white);border:1px solid var(--g300);border-radius:20px;font-size:15px;font-weight:700;color:var(--black)}
.mat-section--alt .mat-brand-tag{border-color:var(--g300);background:var(--white)}

/* Levels (3-col pricing-style cards) */
.mat-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mat-level{background:var(--white);border:1px solid var(--g100);border-radius:14px;padding:28px 24px;text-align:center;transition:box-shadow 0.25s}
.mat-level:hover{box-shadow:0 4px 20px rgba(0,0,0,0.06)}
.mat-level--accent{border:2px solid var(--red);position:relative}
.mat-level--accent::after{content:'Популярный';position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:2px 14px;border-radius:10px;white-space:nowrap}
.mat-level-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--g500);margin-bottom:12px}
.mat-level h3{font-size:18px;font-weight:800;margin-bottom:8px}
.mat-level p{font-size:13px;color:var(--g500);line-height:1.55;margin:0}

/* ============================================================
   SERVICE PAGE
   ============================================================ */
.serv-hero{padding:48px 0 32px}
.serv-hero h1{font-size:36px;font-weight:800;margin-bottom:6px}
.serv-hero-sub{font-size:15px;color:var(--g500)}

.serv-directions{padding:32px 0}
.serv-dir-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.serv-dir-card{border:1px solid var(--g100);border-radius:14px;padding:24px;transition:all 0.25s}
.serv-dir-card:hover{border-color:var(--g300);box-shadow:0 4px 16px rgba(0,0,0,0.04)}
.serv-dir-dot{width:10px;height:10px;border-radius:50%;background:var(--red);margin-bottom:12px}
.serv-dir-card h3{font-size:16px;font-weight:700;margin-bottom:6px}
.serv-dir-card p{font-size:13px;color:var(--g500);line-height:1.5}

.serv-about{padding:32px 0}
.serv-about-content{max-width:800px}
.serv-about h2{font-size:24px;font-weight:800;margin-bottom:16px}
.serv-about p{font-size:14px;color:var(--g700);line-height:1.7;margin-bottom:12px}

.serv-tasks{padding:32px 0;background:var(--g100);border-radius:0}
.serv-tasks h2{font-size:24px;font-weight:800;margin-bottom:24px}
.serv-tasks-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.serv-tasks-col h3{font-size:16px;font-weight:700;margin-bottom:12px}
.serv-tasks-col ul{list-style:none}
.serv-tasks-col li{font-size:14px;color:var(--g700);line-height:1.7;padding-left:18px;position:relative;margin-bottom:6px}
.serv-tasks-col li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--red)}

.serv-cta{padding:48px 0 80px}
.serv-cta-card{background:var(--black);border-radius:20px;padding:48px;text-align:center}
.serv-cta-card h2{font-size:24px;font-weight:800;color:#fff;margin-bottom:8px}
.serv-cta-card p{font-size:14px;color:var(--g500);margin-bottom:24px}
.serv-cta-btns{display:flex;gap:12px;justify-content:center}
.serv-wa-btn{display:inline-flex;align-items:center;gap:8px;color:#fff;border-color:var(--g500)}
.serv-wa-btn:hover{border-color:#25D366;background:rgba(37,211,102,0.1)}

/* ============================================================
   PROMOTIONS PAGE
   ============================================================ */
.promo-hero{padding:48px 0 16px}
.promo-hero h1{font-size:36px;font-weight:800;margin-bottom:6px}
.promo-hero-sub{font-size:15px;color:var(--g500)}
.promo-section{padding:24px 0 48px}
.promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.promo-card{border:1px solid var(--g100);border-radius:16px;padding:28px;display:flex;flex-direction:column;transition:all 0.25s}
.promo-card:hover{border-color:var(--g300);box-shadow:0 4px 16px rgba(0,0,0,0.04)}
.promo-badge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--red);margin-bottom:10px}
.promo-card h3{font-size:20px;font-weight:700;margin-bottom:8px}
.promo-desc{font-size:14px;color:var(--g700);line-height:1.6;margin-bottom:16px}
.promo-desc p{margin-bottom:8px}

/* ============================================================
   CONTACTS PAGE
   ============================================================ */
.contacts-hero{padding:48px 0 16px}
.contacts-hero h1{font-size:36px;font-weight:800;margin-bottom:6px}
.contacts-section{padding:24px 0 48px}
.contacts-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.contacts-info{display:flex;flex-direction:column;gap:20px}
.contacts-item-label{font-size:12px;color:var(--g500);margin-bottom:3px}
.contacts-item-value{font-size:16px;font-weight:600}
a.contacts-item-value{color:var(--black);text-decoration:none}
a.contacts-item-value:hover{color:var(--red)}
.contacts-socials{display:flex;gap:10px;margin-top:4px}
.contacts-social{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--g100);border-radius:8px;font-size:13px;font-weight:600;color:var(--black);text-decoration:none;transition:all 0.2s}
.contacts-social:hover{background:var(--g300)}
.contacts-map{border-radius:16px;overflow:hidden;background:var(--g100);min-height:400px}
.contacts-map iframe{width:100%;height:400px;border:0;display:block}

/* ============================================================
   404 PAGE
   ============================================================ */
.page-404{padding:80px 0 120px}
.page-404-inner{text-align:center;max-width:480px;margin:0 auto}
.page-404-code{font-size:120px;font-weight:900;color:var(--red);line-height:1;margin-bottom:12px;opacity:0.15}
.page-404 h1{font-size:28px;font-weight:800;margin-bottom:8px}
.page-404 p{font-size:15px;color:var(--g500);margin-bottom:28px}
.page-404-btns{display:flex;gap:12px;justify-content:center}

/* ============================================================
   THANK YOU PAGE
   ============================================================ */
.page-thankyou{padding:80px 0 120px}
.page-thankyou-inner{text-align:center;max-width:480px;margin:0 auto}
.page-thankyou-icon{margin-bottom:20px}
.page-thankyou h1{font-size:28px;font-weight:800;margin-bottom:8px}
.page-thankyou p{font-size:15px;color:var(--g500);margin-bottom:28px}
.page-thankyou-info{background:var(--g100);border-radius:14px;padding:20px 24px;margin-bottom:28px;display:flex;gap:32px;justify-content:center}
.page-thankyou-item{display:flex;flex-direction:column;gap:2px}
.page-thankyou-item .label{font-size:12px;color:var(--g500)}
.page-thankyou-item .value{font-size:14px;font-weight:600;color:var(--black);text-decoration:none}
a.value:hover{color:var(--red)}
.page-thankyou-btns{display:flex;gap:12px;justify-content:center}

/* ============================================================
   BLOG
   ============================================================ */
.blog-hero{padding:48px 0 16px}
.blog-hero h1{font-size:36px;font-weight:800;margin-bottom:6px}
.blog-hero-sub{font-size:15px;color:var(--g500)}
.blog-section{padding:24px 0 48px}
.blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.blog-card{border:1px solid var(--g100);border-radius:16px;overflow:hidden;transition:all 0.3s;text-decoration:none;color:inherit;display:block}
.blog-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.08);transform:translateY(-3px)}
.blog-card-img{height:220px;background:var(--g100);overflow:hidden}
.blog-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card-body{padding:20px}
.blog-card-cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--red);margin-bottom:8px}
.blog-card-title{font-size:18px;font-weight:700;margin-bottom:8px;line-height:1.3}
.blog-card-excerpt{font-size:13px;color:var(--g500);line-height:1.6;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-card-meta{font-size:12px;color:var(--g500)}
.blog-card-link{font-size:13px;font-weight:600;color:var(--red)}
.blog-card-placeholder{width:100%;height:100%;background:var(--g100)}

/* Blog tabs */
.blog-tabs{display:flex;gap:8px;margin-bottom:28px;flex-wrap:wrap}
.blog-tab{padding:8px 20px;border-radius:20px;font-size:14px;font-weight:600;color:var(--g700);background:var(--g100);transition:all 0.2s;text-decoration:none}
.blog-tab:hover{color:var(--black);background:var(--g300)}
.blog-tab.active{background:var(--black);color:var(--white)}

/* Single article */
.article-hero{padding:48px 0 16px;max-width:760px;margin:0 auto}
.article-cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--red);margin-bottom:8px}
.article-title{font-size:32px;font-weight:800;line-height:1.2;margin-bottom:12px}
.article-meta{font-size:13px;color:var(--g500);margin-bottom:24px}
.article-featured{border-radius:16px;overflow:hidden;margin-bottom:32px;max-width:760px;margin-left:auto;margin-right:auto}
.article-featured img{width:100%;display:block}
.article-content{max-width:760px;margin:0 auto;padding-bottom:48px;font-size:16px;color:var(--g700);line-height:1.8}
.article-content h2{font-size:24px;font-weight:800;color:var(--black);margin:32px 0 12px}
.article-content h3{font-size:20px;font-weight:700;color:var(--black);margin:24px 0 10px}
.article-content p{margin-bottom:16px}
.article-content ul,.article-content ol{margin:0 0 16px 20px}
.article-content li{margin-bottom:6px}
.article-content blockquote{border-left:4px solid var(--red);padding:16px 24px;margin:24px 0;background:var(--g100);border-radius:0 12px 12px 0;font-style:italic}
.article-content img{border-radius:12px;margin:20px 0}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--black);padding:48px 0 24px;color:var(--g500)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.footer-col h4{color:var(--white);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:16px}
.footer-col a{display:block;font-size:13px;color:var(--g500);margin-bottom:8px;transition:color 0.2s}
.footer-col a:hover{color:var(--white)}
.footer-logo{display:block;margin-bottom:12px}
.footer-logo img{height:56px;width:auto}
.footer-desc{font-size:13px;line-height:1.6;margin-bottom:16px}
.footer-social{display:flex;gap:10px;flex-wrap:wrap}
.footer-social a{width:36px;height:36px;border-radius:8px;background:var(--g900);display:flex;align-items:center;justify-content:center;color:var(--g500);transition:all 0.2s;font-size:12px;font-weight:700}
.footer-social a:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.18)}
.footer-social-tg{background:#2AABEE !important}
.footer-social-vk{background:#0077FF !important}
.footer-social-wa{background:#25D366 !important}
.footer-social-max{background:linear-gradient(135deg,#4cf 0%,#53e 60%,#93d 100%) !important}
.footer-bottom{border-top:1px solid var(--g900);padding-top:20px;display:flex;justify-content:space-between;font-size:12px}
.footer-bottom a{color:var(--g700)}
.footer-bottom a:hover{color:var(--white)}

/* ============================================================
   FAQ SECTION
   ============================================================ */
.faq-section{padding:64px 0;background:var(--g100)}
.faq-section h2{font-size:28px;font-weight:800;margin-bottom:28px;text-align:center}
.faq-list{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-item{background:var(--white);border-radius:12px;padding:0;overflow:hidden;transition:box-shadow 0.2s}
.faq-item[open]{box-shadow:0 4px 16px rgba(0,0,0,0.06)}
.faq-item summary{padding:18px 24px;font-size:16px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--black)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:24px;font-weight:300;color:var(--red);transition:transform 0.25s;flex-shrink:0}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--red)}
.faq-answer{padding:0 24px 20px;font-size:14px;color:var(--g700);line-height:1.6}

/* ============================================================
   SEO TEXT BLOCK (bottom of front page)
   ============================================================ */
.seo-text{padding:48px 0;background:var(--white)}
.seo-text-inner{max-width:920px;margin:0 auto}
.seo-text h2{font-size:22px;font-weight:700;margin-bottom:16px;color:var(--black)}
.seo-text p{font-size:14px;color:var(--g700);line-height:1.75;margin-bottom:14px}
.seo-text a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.seo-text a:hover{color:var(--red-hover)}
.seo-text strong{color:var(--black);font-weight:600}

/* ============================================================
   COOKIE CONSENT
   ============================================================ */
.cookie-bar{position:fixed;bottom:0;left:0;right:0;z-index:3000;background:var(--black);padding:16px 0;transform:translateY(100%);transition:transform 0.4s ease;display:block}
.cookie-bar.is-visible{transform:translateY(0)}
.cookie-bar-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:20px;justify-content:space-between}
.cookie-bar p{font-size:13px;color:var(--g300);line-height:1.5;margin:0}
.cookie-bar a{color:var(--white);text-decoration:underline}
.cookie-bar a:hover{color:var(--red)}
.cookie-accept{white-space:nowrap;flex-shrink:0;padding:10px 24px;font-size:13px}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumbs{background:var(--g100);padding:10px 0;font-size:12px;color:var(--g500);margin-top:16px}
.breadcrumbs a{color:var(--g700);transition:color 0.2s}
.breadcrumbs a:hover{color:var(--red)}
.breadcrumbs span{margin:0 8px}

/* ============================================================
   POPUPS
   ============================================================ */
.popup{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all 0.25s}
.popup.is-open{opacity:1;visibility:visible}
body.popup-open{overflow:hidden}
.popup-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);cursor:pointer}
.popup-content{position:relative;background:var(--white);border-radius:16px;padding:40px;max-width:480px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 16px 48px rgba(0,0,0,0.16);transform:translateY(20px);transition:transform 0.25s}
.popup.is-open .popup-content{transform:translateY(0)}
.popup-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border:none;background:var(--g100);border-radius:9999px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--g700);transition:all 0.15s}
.popup-close:hover{background:var(--g300)}
.popup-title{font-size:20px;font-weight:700;margin-bottom:8px;text-align:center}
.popup-subtitle{font-size:14px;color:var(--g500);text-align:center;margin-bottom:24px}

/* Quiz popup */
.popup-content--quiz{max-width:520px;padding:32px 36px}
.quiz-progress{height:4px;background:var(--g100);border-radius:2px;margin-bottom:28px}
.quiz-progress-bar{height:100%;background:var(--red);border-radius:2px;transition:width 0.3s}
.quiz-step{display:none}
.quiz-step.active{display:block}
.quiz-step-num{font-size:12px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:8px}
.quiz-title{font-size:20px;font-weight:800;margin-bottom:6px}
.quiz-hint{font-size:13px;color:var(--g500);margin-bottom:16px}
.quiz-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.quiz-opt{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 12px;border:2px solid var(--g100);border-radius:12px;background:var(--white);cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:var(--black);transition:all 0.2s}
.quiz-opt:hover{border-color:var(--g300);background:var(--g100)}
.quiz-opt.selected{border-color:var(--red);background:var(--red-light);color:var(--red)}
.quiz-opt svg{color:var(--g500);transition:color 0.2s}
.quiz-opt:hover svg,.quiz-opt.selected svg{color:var(--red)}
.quiz-options--list{grid-template-columns:1fr;gap:8px}
.quiz-options--list .quiz-opt{flex-direction:row;padding:14px 20px;font-size:14px;justify-content:flex-start}
/* Messenger select */
.messenger-select{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
.msg-opt{cursor:pointer}
.msg-opt input{display:none}
.msg-btn{display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 6px;border:2px solid var(--g100);border-radius:8px;font-size:11px;font-weight:600;color:var(--g700);transition:all 0.2s;background:var(--white);width:100%}
.msg-opt input:checked+.msg-btn{border-color:var(--red);background:var(--red-light);color:var(--red)}
.msg-btn:hover{border-color:var(--g300)}
.msg-btn svg{flex-shrink:0}

.quiz-back{display:inline-flex;align-items:center;gap:4px;margin-top:16px;padding:0;border:none;background:none;font-size:13px;font-weight:600;color:var(--g500);cursor:pointer;font-family:inherit}
.quiz-back:hover{color:var(--black)}

/* Wide popup (zamер) */
.popup-content--wide{max-width:900px;padding:0;overflow:hidden}
.popup-content--wide .popup-close{top:16px;right:16px;z-index:10}
.popup-cta{background:var(--black);border-radius:16px;padding:48px;display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:center}
.popup-cta h3{font-size:28px;font-weight:800;color:#fff;line-height:1.2;margin-bottom:14px}
.popup-cta>div:first-child>p{font-size:14px;color:var(--g500);line-height:1.6;margin-bottom:20px}
.popup-cta .cta-list{margin:0 0 24px}
.popup-cta .cta-list li{font-size:13px;color:var(--g300)}
.popup-cta .cta-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.popup-cta .cta-stat{background:rgba(255,255,255,0.06);border-radius:10px;padding:14px}
.popup-cta .cta-stat .num{font-size:22px;font-weight:800;color:var(--red);margin-bottom:2px}
.popup-cta .cta-stat .label{font-size:11px;color:var(--g500)}
.popup-cta .cta-form{background:var(--white);border-radius:16px;padding:28px}

/* ============================================================
   MOBILE MENU
   ============================================================ */
.menu-toggle{display:none;width:44px;height:44px;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;justify-content:center;gap:5px}
.header-call-mobile{display:none;width:36px;height:36px;border-radius:50%;background:var(--red-light);color:var(--red);align-items:center;justify-content:center;flex-shrink:0;transition:all 0.2s;text-decoration:none}
.header-call-mobile svg{width:16px;height:16px}
.header-call-mobile:hover{background:var(--red);color:#fff}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--black);border-radius:1px;transition:all 0.25s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

.mobile-menu{position:fixed;top:72px;left:0;right:0;bottom:0;background:var(--black);z-index:999;transform:translateX(100%);transition:transform 0.25s;overflow-y:auto}
.mobile-menu.is-open{transform:translateX(0)}
.mobile-menu-inner{padding:32px 24px}
.mobile-nav{list-style:none;margin-bottom:32px}
.mobile-nav li{border-bottom:1px solid var(--g900)}
.mobile-nav a{display:block;color:var(--white);font-size:18px;font-weight:600;padding:16px 0;transition:color 0.15s}
.mobile-nav a:hover{color:var(--red)}
.mobile-phone{display:block;color:var(--white);font-size:24px;font-weight:800;margin-bottom:8px}
body.menu-open{overflow:hidden}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ---- ≤ 1024px (tablet landscape) ---- */
@media(max-width:1024px){
  .hero-grid{grid-template-columns:1fr}
  .hero-slider{display:none}
  .mat-grid{grid-template-columns:1fr 1fr 1fr}
  .mat-info{grid-template-columns:repeat(2,1fr)}
  .reviews-text-grid{grid-template-columns:repeat(2,1fr)}
  .actions-compact{grid-template-columns:repeat(2,1fr)}
  .catalog-layout{grid-template-columns:200px 1fr}
  .catalog-products .catalog-grid{grid-template-columns:repeat(2,1fr)}
  .product-info{grid-template-columns:1fr 320px}
  .product-gallery-main img,.product-gallery-single img{height:320px}
  .adv-grid{grid-template-columns:1fr}
  .adv-left .photo{display:none}
  .catalog-grid{grid-template-columns:repeat(2,1fr)}
  .portfolio-grid{grid-template-columns:repeat(2,1fr)}
  .cta-card{grid-template-columns:1fr;padding:40px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .main-nav{display:none}
  .header-phone{display:none}
  .menu-toggle{display:flex}
  .header-call-mobile{display:inline-flex}
  /* Хедер: кнопка замера компактнее + отступ от правого края */
  .header-right{gap:10px;align-items:center;margin-right:12px}
  .header-right .btn-red{padding:9px 14px;font-size:13px}
  .menu-toggle{width:36px;height:36px;padding:8px}
  /* H1 размеры для планшета */
  .hero-text h1{font-size:28px;line-height:1.25}
  .about-hero h1,.mat-hero h1,.serv-hero h1,.prod-hero h1,.contacts-hero h1,.promo-hero h1,.blog-hero h1{font-size:28px}
  /* Hero кнопки — центр, ширина по контенту */
  .hero-btns{justify-content:center;flex-wrap:wrap}
  .hero-btns .btn-red,.hero-btns .btn-outline{flex:1 1 auto;min-width:180px;max-width:320px;text-align:center;display:inline-flex;align-items:center;justify-content:center}
  /* Hero-facts компакт на планшете */
  .hero-facts{flex-wrap:nowrap;overflow-x:auto;gap:18px;padding:12px 0;scrollbar-width:none}
  .hero-facts::-webkit-scrollbar{display:none}
  .hero-fact{flex-shrink:0}
  .hero-fact-divider{display:none}
  /* Новые блоки */
  .about-grid{grid-template-columns:1fr;gap:24px}
  .about-grid--reverse{direction:ltr}
  .about-features-grid{grid-template-columns:repeat(2,1fr)}
  .about-stats-grid{grid-template-columns:repeat(2,1fr)}
  .prod-hero-grid{grid-template-columns:1fr}
  .prod-hero-stats{grid-template-columns:repeat(4,1fr)}
  .prod-materials-grid{grid-template-columns:1fr 1fr}
  .mat-block-grid{grid-template-columns:repeat(2,1fr)}
  .mat-levels{grid-template-columns:1fr}
  .serv-dir-grid{grid-template-columns:repeat(2,1fr)}
  .contacts-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .popup-cta{grid-template-columns:1fr;gap:24px}
}

/* ---- ≤ 768px (tablet portrait) ---- */
@media(max-width:768px){
  .container{padding:0 20px}
  /* Главная */
  .hero{padding:28px 0 20px}
  .hero-text h1{font-size:26px;line-height:1.25}
  .hero-facts{flex-wrap:nowrap;gap:14px;overflow-x:auto;padding:12px 0;scrollbar-width:none;-ms-overflow-style:none}
  .hero-facts::-webkit-scrollbar{display:none}
  .hero-fact{flex-shrink:0}
  .hero-fact-num{font-size:14px}
  .hero-fact-label{font-size:11px}
  .hero-fact-divider{display:none}
  .hero-btns{flex-direction:row;gap:10px;justify-content:center;flex-wrap:wrap}
  .hero-btns .btn-red,.hero-btns .btn-outline{flex:0 1 auto;min-width:150px;max-width:240px;text-align:center;padding:12px 18px!important;font-size:14px!important}
  .materials{padding:40px 0}
  .materials h2{font-size:22px}
  .mat-grid{grid-template-columns:1fr 1fr;gap:10px}
  .mat-info{grid-template-columns:repeat(2,1fr)}
  .advantages{padding:40px 0}
  .advantages h2{font-size:22px}
  .adv-cards{grid-template-columns:1fr 1fr;gap:10px}
  .adv-left h2 br{display:none}
  .reviews{padding:32px 0}
  .reviews h2{font-size:22px!important}
  .reviews-ya-head{flex-direction:column;align-items:flex-start;gap:12px}
  .ya-badge{padding:6px 14px;font-size:12px}
  .catalog{padding:32px 0}
  .catalog h2{font-size:22px}
  .catalog-grid{grid-template-columns:1fr 1fr;gap:10px}
  .faq-section{padding:40px 0}
  .faq-section h2{font-size:22px;margin-bottom:18px}
  .faq-item summary{padding:14px 18px;font-size:14px;gap:12px}
  .faq-answer{padding:0 18px 16px;font-size:13px}
  .seo-text{padding:32px 0 24px}
  .seo-text h2{font-size:18px}
  .seo-text p{font-size:13px;line-height:1.7}
  /* О нас */
  .about-hero{padding:32px 0 16px}
  .about-hero h1{font-size:26px;line-height:1.2}
  .about-hero-sub{font-size:15px}
  .about-hero-intro{font-size:14px}
  .about-section{padding:28px 0}
  .about-section h2,.about-text-block h2{font-size:20px}
  .about-features h2{font-size:22px}
  .about-features{padding:36px 0}
  .about-features-grid{grid-template-columns:1fr;gap:10px}
  .about-feat{padding:18px}
  .about-stats-grid{grid-template-columns:repeat(2,1fr)}
  .about-slider-section{padding:24px 0}
  .about-slider-section h2{font-size:22px;margin-bottom:14px}
  .about-slide{width:260px}
  .about-slide-img{height:180px}
  /* Производство */
  .prod-hero{padding:32px 0 20px}
  .prod-hero h1{font-size:28px;line-height:1.2}
  .prod-hero-btns{flex-direction:column;gap:10px}
  .prod-hero-btns .btn-red,.prod-hero-btns .btn-outline{width:100%;text-align:center}
  .prod-hero-stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .prod-stat{padding:16px}
  .prod-stat-num{font-size:22px}
  .prod-video{padding:24px 0}
  .prod-timeline,.prod-steps{padding:40px 0}
  .prod-timeline h2,.prod-steps h2{font-size:22px;margin-bottom:28px}
  .timeline{padding-left:28px}
  .timeline-dot{left:-37px;width:16px;height:16px}
  .timeline-item{padding-bottom:28px}
  .timeline-content h3{font-size:17px}
  .timeline-content p{font-size:13px}
  /* Материалы */
  .mat-hero{padding:32px 0 16px}
  .mat-hero h1{font-size:26px}
  .mat-section{padding:28px 0}
  .mat-section-title,.mat-block-header h2{font-size:20px}
  .mat-block-grid{grid-template-columns:1fr;gap:10px}
  .mat-block-grid--2{grid-template-columns:1fr}
  .mat-levels{grid-template-columns:1fr}
  .mat-block-card{padding:18px}
  .mat-level{padding:20px}
  .mat-block-desc{font-size:13px}
  /* Служба сервиса */
  .serv-hero{padding:32px 0 20px}
  .serv-hero h1{font-size:26px}
  .serv-dir-grid{grid-template-columns:repeat(2,1fr)}
  .serv-tasks-grid{grid-template-columns:1fr}
  .serv-cta-card{padding:32px 24px;text-align:center}
  .serv-cta-card h2{font-size:22px}
  /* Контакты */
  .contacts-hero h1{font-size:26px}
  .contacts-map iframe{height:300px}
  /* Акции */
  .promo-hero h1{font-size:26px}
  .promo-grid{grid-template-columns:1fr}
  /* Блог */
  .blog-hero h1{font-size:26px}
  .blog-tabs{gap:6px}
  .blog-tab{padding:6px 14px;font-size:13px}
  .blog-card-img{height:180px}
  /* Каталог / товар */
  .product-gallery-main img,.product-gallery-single img{height:280px}
  /* CTA */
  .cta-card{padding:28px 24px}
  .cta-card h2{font-size:22px}
  /* .cta-card h2 br — оставляем как перенос строки (иначе слова склеиваются) */
  .cta-stats{grid-template-columns:repeat(3,1fr);gap:8px}
  .cta-stats .num{font-size:18px}
  .cta-stats .label{font-size:11px}
  .cta-list li{font-size:13px}
  /* Попапы */
  .popup-content{padding:28px 22px;border-radius:14px;width:92%}
  .popup-content--quiz{padding:24px 20px}
  .popup-content--wide{padding:28px 22px}
  .popup-content--service{padding:24px 22px}
  .popup-service-title{font-size:20px}
  .popup-title{font-size:18px}
  .tk-form--compact .service-row{grid-template-columns:1fr}
  .quiz-options{grid-template-columns:1fr 1fr}
  /* Футер */
  .footer{padding:32px 0 16px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}
  .footer-col h4{font-size:12px;margin-bottom:10px}
  /* Cookie */
  .cookie-bar-inner{flex-direction:column;align-items:flex-start;gap:12px}
  .cookie-bar p{font-size:12px}
  /* 404 / Спасибо */
  .page-404,.page-thankyou{padding:48px 0 80px}
  .page-404-code{font-size:80px}
  .page-404 h1,.page-thankyou h1{font-size:22px}
  .page-404-btns,.page-thankyou-btns{flex-direction:column;gap:10px}
  .page-404-btns .btn-red,.page-404-btns .btn-outline,.page-thankyou-btns .btn-red,.page-thankyou-btns .btn-outline{width:100%;text-align:center}
  .page-thankyou-info{flex-direction:column;gap:12px;padding:16px}
  /* Breadcrumbs */
  .breadcrumbs{font-size:11px;padding:8px 0}
  /* Reviews scroll — узкие карточки */
  .reviews-text-scroll .review-text-card{flex:0 0 280px}
}

/* ---- ≤ 640px (phone) ---- */
@media(max-width:640px){
  .topbar{display:none}
  .main-nav{display:none}
  /* === HERO для мобилки — чистая пересборка === */
  .hero{padding:24px 0 20px}
  .hero-text h1{font-size:24px;line-height:1.3;margin-bottom:16px;overflow-wrap:break-word;hyphens:manual;-webkit-hyphens:manual}
  .hero-text h1 .accent{white-space:nowrap}
  .hero-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 16px;padding:14px 0;border-top:1px solid var(--g100);border-bottom:1px solid var(--g100);margin-bottom:20px;overflow:visible;flex-wrap:initial}
  .hero-fact{display:flex;flex-direction:column;gap:2px;min-width:0}
  .hero-fact-num{font-size:14px;font-weight:800;color:var(--red);white-space:nowrap}
  .hero-fact-label{font-size:11px;color:var(--g500);white-space:normal;line-height:1.2}
  .hero-fact-divider{display:none}
  .hero-btns{display:flex;flex-direction:column;gap:10px;align-items:stretch}
  .hero-btns .btn-red,.hero-btns .btn-outline{width:100%;padding:14px 20px!important;font-size:15px!important;text-align:center;min-width:0;max-width:none;flex:none}
  /* === /HERO === */
  .materials-head{flex-direction:column;align-items:flex-start;gap:8px}
  .mat-grid{grid-template-columns:1fr}
  .mat-info{grid-template-columns:1fr 1fr}
  .reviews-head{flex-direction:column;align-items:flex-start;gap:8px}
  .reviews-text-grid{grid-template-columns:1fr}
  .actions-compact{grid-template-columns:1fr}
  .catalog-page-head{flex-direction:column;align-items:flex-start;gap:12px}
  .catalog-layout{grid-template-columns:1fr}
  .product-gallery{flex-direction:column}
  .product-gallery-main img,.product-gallery-single img{height:240px}
  .product-gallery-side{flex-direction:row}
  .product-info{grid-template-columns:1fr}
  .product-sidebar{position:static}
  .product-specs{grid-template-columns:1fr}
  .catalog-filters{position:static}
  .filter-pills{flex-wrap:wrap}
  .catalog-products .catalog-grid{grid-template-columns:1fr}
  .adv-cards{grid-template-columns:1fr}
  .catalog-grid{grid-template-columns:1fr}
  .portfolio-grid{grid-template-columns:1fr}
  .cta-card{padding:24px 20px}
  .footer-grid{grid-template-columns:1fr;gap:20px}
  .catalog-header{flex-direction:column;align-items:flex-start;gap:16px}
  .portfolio-header{flex-direction:column;align-items:flex-start;gap:8px}
  /* Новые блоки */
  .about-features-grid{grid-template-columns:1fr}
  .about-stats-grid{grid-template-columns:1fr 1fr}
  .prod-hero-stats{grid-template-columns:1fr 1fr;gap:8px}
  .serv-dir-grid{grid-template-columns:1fr}
  /* Popup «Заказать замер» — компактная мобилка */
  .popup-content--wide{padding:24px 20px}
  .popup-cta{gap:14px!important}
  .popup-cta > div:first-child > h3{font-size:20px;line-height:1.25;margin-bottom:8px;padding-right:48px}
  .quiz-title{padding-right:48px}
  .popup-cta > div:first-child > p{font-size:13px;line-height:1.5;margin-bottom:14px}
  .popup-cta .cta-list{display:none}
  .popup-cta .cta-stats{grid-template-columns:repeat(3,1fr);gap:6px;padding:0;margin-bottom:4px}
  .popup-cta .cta-stats .cta-stat{padding:10px 6px;background:rgba(255,255,255,0.05);border-radius:10px;text-align:center}
  .popup-cta .cta-stats .num{font-size:13px;line-height:1.2}
  .popup-cta .cta-stats .label{font-size:10px;line-height:1.2;margin-top:2px}
  .popup-cta .cta-form{padding-top:4px}
  .popup-cta .cta-form .field{margin-bottom:10px}
  .popup-cta .cta-form .field label{font-size:12px}
  .popup-cta .cta-form .field input{padding:10px 14px;font-size:14px}
  .mat-brands-row{gap:8px}
  .mat-brand-tag{padding:6px 14px;font-size:13px}
  .quiz-options{grid-template-columns:1fr}
  .messenger-select{grid-template-columns:1fr 1fr}
  .reviews-text-scroll .review-text-card{flex:0 0 88%}
}

/* ---- ≤ 480px (narrow phones) ---- */
@media(max-width:480px){
  .container{padding:0 16px}
  .header-right{gap:8px}
  .header-right .btn-red{padding:8px 12px;font-size:12px}
  .hero-text h1{font-size:22px}
  .about-hero h1,.mat-hero h1,.serv-hero h1,.prod-hero h1,.contacts-hero h1,.promo-hero h1,.blog-hero h1{font-size:22px}
  .cta-card h2{font-size:20px}
  .popup-title{font-size:16px}
  .popup-service-title{font-size:18px}
  .popup-content,.popup-content--wide,.popup-content--quiz,.popup-content--service{padding:22px 18px}
  .cta-stats{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .cta-stats .num{font-size:16px}
  .cta-stats .cta-stat{padding:8px 4px}
  .ya-rating{font-size:16px}
  .faq-item summary{font-size:13px}
  .timeline-step{font-size:11px}
  .timeline-content h3{font-size:15px}
  .timeline-content p{font-size:12px;line-height:1.6}
  .reviews-text-scroll .review-text-card{flex:0 0 92%;padding:18px}
  .review-quote{font-size:13px}
  .review-video-card{flex:0 0 200px}
  .review-video-thumb{max-height:356px}
}

/* ============================================================
   LANDING PAGES — /landing/calculator, /landing/zamer, /landing/catalog
   ============================================================ */
body.landing-page{background:#fff}
body.landing-page .header,
body.landing-page .mobile-menu,
body.landing-page .breadcrumbs{display:none !important}

/* --- Landing Header --- */
.lp-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #F5F5F3}
.lp-header-inner{display:flex;align-items:center;justify-content:space-between;min-height:80px;padding-top:12px;padding-bottom:12px}
.lp-logo img{height:52px;width:auto;display:block}
.lp-header-right{display:flex;align-items:center;gap:20px}
.lp-header-phone-block{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.lp-header-phone{font-size:18px;font-weight:700;color:#1E1E1C;text-decoration:none}
.lp-header-phone:hover{color:#E31E24}
.lp-header-schedule{font-size:12px;color:#8C8C8A;margin-top:2px}
.lp-header-cta{padding:12px 22px;font-size:14px}
.lp-header-call-mobile{display:none;width:36px;height:36px;border-radius:50%;background:#FEF2F2;color:#E31E24;align-items:center;justify-content:center;text-decoration:none}

/* --- Landing Hero --- */
.lp-hero{padding:48px 0 64px;background:linear-gradient(180deg,#FFF8F7 0%,#fff 100%)}
.lp-hero-inner{display:grid;grid-template-columns:1fr 420px;gap:48px;align-items:start}
.lp-badge{display:inline-block;background:#FEF2F2;color:#E31E24;font-weight:600;font-size:13px;padding:6px 14px;border-radius:20px;margin-bottom:20px}
.lp-badge--green{background:#F0FDF4;color:#16A34A}
.lp-hero h1{font-size:44px;line-height:1.15;font-weight:800;color:#1E1E1C;margin:0 0 18px;letter-spacing:-0.02em}
.lp-hero h1 .accent{color:#E31E24}
.lp-hero-sub{font-size:17px;line-height:1.55;color:#4A4A48;margin:0 0 28px;max-width:560px}
.lp-hero-bullets{list-style:none;padding:0;margin:0 0 32px;display:flex;flex-direction:column;gap:12px}
.lp-hero-bullets li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.5;color:#1E1E1C}
.lp-dot{flex-shrink:0;display:inline-block;width:8px;height:8px;background:#E31E24;border-radius:50%;margin-top:7px}
.lp-hero-trust{display:flex;gap:32px;flex-wrap:wrap;padding-top:24px;border-top:1px solid #F5F5F3}
.lp-trust-item{display:flex;flex-direction:column;gap:2px}
.lp-trust-item b{font-size:24px;font-weight:800;color:#1E1E1C;line-height:1.1}
.lp-trust-item span{font-size:13px;color:#8C8C8A}

/* --- Landing Form (hero) --- */
.lp-hero-form{position:sticky;top:96px}
.lp-form{background:#fff;border:1px solid #F0F0EE;border-radius:16px;padding:28px;box-shadow:0 8px 32px rgba(0,0,0,0.06)}
.lp-form-title{font-size:22px;font-weight:800;color:#1E1E1C;margin-bottom:6px}
.lp-form-sub{font-size:13px;color:#8C8C8A;margin:0 0 20px;line-height:1.4}
.lp-field{display:block;margin-bottom:14px}
.lp-field > span{display:block;font-size:13px;color:#4A4A48;margin-bottom:6px;font-weight:500}
.lp-field input[type="text"],
.lp-field input[type="tel"],
.lp-field input[type="email"],
.lp-field select{width:100%;padding:13px 16px;font-size:15px;font-family:inherit;border:1px solid #E5E5E3;border-radius:10px;background:#fff;color:#1E1E1C;transition:border-color 0.15s}
.lp-field input:focus,.lp-field select:focus{outline:none;border-color:#E31E24}
.lp-field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3e%3cpath d='M1 1l5 5 5-5' stroke='%231E1E1C' stroke-width='2' stroke-linecap='round'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;cursor:pointer}
.lp-form-btn{width:100%;margin-top:8px;padding:16px;font-size:16px;font-weight:700}
.lp-form-gift{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:14px;background:#FEF2F2;border-radius:10px;font-size:13px;line-height:1.45;color:#1E1E1C}
.lp-form-gift b{color:#E31E24}
.lp-agree{display:flex;align-items:flex-start;gap:8px;margin-top:16px;font-size:12px;line-height:1.4;color:#8C8C8A;cursor:pointer}
.lp-agree input{margin-top:2px;flex-shrink:0}
.lp-agree a{color:#E31E24;text-decoration:underline}
.lp-form-footer{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:14px;border-top:1px solid #F5F5F3;font-size:12px;color:#8C8C8A}
.lp-agree-inline{margin:10px 0 0;font-size:11px;color:#8C8C8A;line-height:1.4;text-align:center}
.lp-agree-inline a{color:#E31E24}

/* --- Common section styles --- */
.lp section{padding:64px 0}
.lp h2{font-size:36px;line-height:1.2;font-weight:800;color:#1E1E1C;margin:0 0 40px;letter-spacing:-0.02em;text-align:center}
.lp-section-head{text-align:center;margin-bottom:40px}
.lp-section-head h2{margin-bottom:8px}
.lp-section-head p{font-size:16px;color:#8C8C8A;margin:0}

/* --- Benefits --- */
.lp-benefits{background:#FAFAF8}
.lp-benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.lp-benefits-grid--5{grid-template-columns:repeat(5,1fr)}
.lp-benefit{background:#fff;border-radius:16px;padding:28px 24px;text-align:left;border:1px solid #F0F0EE}
.lp-benefit-icon{width:56px;height:56px;background:#FEF2F2;color:#E31E24;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.lp-benefit h3{font-size:17px;line-height:1.3;font-weight:700;color:#1E1E1C;margin:0 0 8px}
.lp-benefit p{font-size:14px;line-height:1.55;color:#4A4A48;margin:0}

/* --- Examples (products grid) --- */
.lp-examples-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:36px}
.lp-examples-cta{text-align:center}

/* --- Process --- */
.lp-process{background:#1E1E1C;color:#fff}
.lp-process h2{color:#fff}
.lp-process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.lp-step{padding:28px 24px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px}
.lp-step-num{font-size:14px;font-weight:800;color:#E31E24;letter-spacing:0.05em;margin-bottom:14px}
.lp-step h3{font-size:18px;line-height:1.3;font-weight:700;color:#fff;margin:0 0 10px}
.lp-step p{font-size:14px;line-height:1.55;color:rgba(255,255,255,0.7);margin:0}

/* --- Guarantees --- */
.lp-guarantees-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.lp-guarantee{padding:24px;background:#FAFAF8;border-radius:16px;border:1px solid #F0F0EE}
.lp-guarantee b{display:block;font-size:22px;font-weight:800;color:#E31E24;margin-bottom:8px;line-height:1.2}
.lp-guarantee span{font-size:14px;line-height:1.55;color:#4A4A48}

/* --- FAQ --- */
.lp-faq{background:#FAFAF8}
.lp-faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.lp-faq-item{background:#fff;border:1px solid #F0F0EE;border-radius:12px;overflow:hidden}
.lp-faq-item summary{padding:20px 24px;font-size:16px;font-weight:600;color:#1E1E1C;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:background 0.15s}
.lp-faq-item summary::-webkit-details-marker{display:none}
.lp-faq-item summary:hover{background:#FAFAF8}
.lp-faq-item summary::after{content:"+";font-size:24px;font-weight:400;color:#E31E24;flex-shrink:0;transition:transform 0.2s}
.lp-faq-item[open] summary::after{content:"−"}
.lp-faq-answer{padding:0 24px 22px;font-size:15px;line-height:1.6;color:#4A4A48}

/* --- Final CTA --- */
.lp-final-cta{background:linear-gradient(135deg,#E31E24 0%,#B9181D 100%);color:#fff;padding:72px 0}
.lp-final-cta-inner{display:grid;grid-template-columns:1fr 440px;gap:48px;align-items:center}
.lp-final-cta h2{color:#fff;text-align:left;margin:0 0 12px;font-size:34px}
.lp-final-cta-text p{font-size:17px;line-height:1.5;margin:0;color:rgba(255,255,255,0.9);max-width:460px}
.lp-form--final{background:#fff;color:#1E1E1C;padding:24px}
.lp-form--final .lp-field{margin-bottom:10px}

/* --- Landing Footer --- */
.lp-footer{background:#1E1E1C;color:#fff;padding:48px 0 24px}
.lp-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,0.1)}
.lp-footer-logo img{height:56px;width:auto;display:block;margin-bottom:14px}
.lp-footer-desc{font-size:14px;line-height:1.55;color:rgba(255,255,255,0.6);margin:0;max-width:360px}
.lp-footer-col{display:flex;flex-direction:column;gap:8px}
.lp-footer-label{font-size:13px;font-weight:600;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px}
.lp-footer-phone{font-size:17px;font-weight:700;color:#fff;text-decoration:none}
.lp-footer-phone:hover{color:#E31E24}
.lp-footer-schedule,.lp-footer-addr{font-size:14px;color:rgba(255,255,255,0.6);line-height:1.5}
.lp-footer-col span{font-size:14px;color:rgba(255,255,255,0.6);line-height:1.5}
.lp-footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-size:13px;color:rgba(255,255,255,0.5)}
.lp-footer-bottom a{color:rgba(255,255,255,0.7);text-decoration:none}
.lp-footer-bottom a:hover{color:#fff}

/* --- Thanks popup --- */
.popup-content--thanks{max-width:460px;padding:40px 32px;text-align:center}
.popup-thanks-icon{display:inline-flex;margin-bottom:20px}
.popup-content--thanks h3{font-size:24px;font-weight:800;color:#1E1E1C;margin:0 0 12px}
.popup-content--thanks p{font-size:15px;line-height:1.55;color:#4A4A48;margin:0 0 24px}
.popup-content--thanks .btn-red{padding:14px 28px}

/* ============================================================
   RESPONSIVE — Landings
   ============================================================ */
@media (max-width:1024px){
  .lp-hero-inner{grid-template-columns:1fr 380px;gap:32px}
  .lp-hero h1{font-size:36px}
  .lp-benefits-grid,.lp-benefits-grid--5{grid-template-columns:repeat(2,1fr)}
  .lp-examples-grid{grid-template-columns:repeat(3,1fr);gap:20px}
  .lp-process-grid{grid-template-columns:repeat(2,1fr)}
  .lp-guarantees-grid{grid-template-columns:repeat(2,1fr)}
  .lp-final-cta-inner{grid-template-columns:1fr;gap:24px}
  .lp-final-cta h2{text-align:center}
  .lp-final-cta-text{text-align:center}
  .lp-final-cta-text p{margin:0 auto}
}

@media (max-width:768px){
  .lp-header-inner{min-height:60px}
  .lp-header-cta,
  .lp-header-phone-block{display:none}
  .lp-header-call-mobile{display:inline-flex}
  .lp-logo img{height:48px}

  .lp section{padding:44px 0}
  .lp h2{font-size:26px;margin-bottom:28px}
  .lp-hero{padding:32px 0 44px}
  .lp-hero-inner{grid-template-columns:1fr;gap:28px}
  .lp-hero h1{font-size:28px;line-height:1.18}
  .lp-hero-sub{font-size:15px;margin-bottom:20px}
  .lp-hero-bullets li{font-size:14px}
  .lp-hero-trust{gap:20px}
  .lp-trust-item b{font-size:20px}
  .lp-hero-form{position:static}
  .lp-form{padding:22px;border-radius:14px}
  .lp-form-title{font-size:19px}

  .lp-benefits-grid,.lp-benefits-grid--5{grid-template-columns:1fr;gap:14px}
  .lp-benefit{padding:22px 20px}
  .lp-examples-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .lp-process-grid{grid-template-columns:1fr;gap:14px}
  .lp-guarantees-grid{grid-template-columns:1fr;gap:12px}
  .lp-guarantee b{font-size:18px}

  .lp-faq-item summary{padding:16px 18px;font-size:15px}
  .lp-faq-answer{padding:0 18px 18px;font-size:14px}

  .lp-final-cta{padding:44px 0}
  .lp-final-cta h2{font-size:24px}
  .lp-final-cta-text p{font-size:15px}

  .lp-footer{padding:32px 0 20px}
  .lp-footer-grid{grid-template-columns:1fr;gap:28px;padding-bottom:24px}
  .lp-footer-bottom{flex-direction:column;gap:10px;text-align:center}

  .popup-content--thanks{padding:32px 24px;max-width:92%}
  .popup-content--thanks h3{font-size:20px}
}

@media (max-width:480px){
  .lp-hero h1{font-size:24px}
  .lp h2{font-size:22px}
  .lp-examples-grid{grid-template-columns:1fr}
  .lp-hero-trust{gap:14px;flex-direction:column;align-items:flex-start}
}

/* ============================================================
   QUIZ LANDINGS — /quiz/* (Marquiz-style fullscreen)
   ============================================================ */
body.quiz-page{background:#FAFAF8;margin:0;height:100vh;overflow:hidden}
body.quiz-page .lp-footer,
body.quiz-page .lp-header{display:none !important}
body.quiz-page.popup-open{overflow:hidden}

.q-app{height:100vh;display:flex;flex-direction:column;background:#FAFAF8;overflow:hidden}

/* --- Header --- */
.q-header{display:flex;flex-direction:column;gap:8px;padding:8px 24px;background:#fff;border-bottom:1px solid #F0F0EE;flex-shrink:0;z-index:10}
.q-header-row{display:flex;align-items:center;justify-content:space-between;gap:20px}
.q-logo img{height:26px;width:auto;display:block}
.q-progress{height:4px;background:#F0F0EE;border-radius:2px;overflow:hidden;width:100%}
.q-progress-fill{height:100%;background:linear-gradient(90deg,#E31E24,#FF3B30);border-radius:2px;width:0;transition:width 0.4s cubic-bezier(0.4,0,0.2,1)}
.q-header-phone{display:flex;align-items:center;gap:8px;color:#1E1E1C;text-decoration:none;font-weight:700;font-size:14px}
.q-header-phone:hover{color:#E31E24}
.q-header-phone svg{flex-shrink:0;color:#E31E24;width:16px;height:16px}

/* --- Ya badge in header --- */
.q-ya-badge--header{margin:0;padding:4px 12px;box-shadow:none;border:1px solid #F0F0EE;flex-shrink:0}
.q-ya-badge--header img{width:18px;height:18px}
.q-ya-badge--header b{font-size:13px}
.q-ya-badge--header .q-ya-stars{font-size:12px}
.q-ya-badge--header .q-ya-label{font-size:12px}

/* --- Screens --- */
.q-screen{flex:1;display:none;align-items:center;justify-content:center;padding:18px 32px;animation:qFadeIn 0.35s cubic-bezier(0.4,0,0.2,1);overflow:hidden;min-height:0}
.q-screen.is-active{display:flex}
@keyframes qFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.q-container{width:100%;max-width:900px;margin:0 auto}

/* --- Welcome screen --- */
.q-welcome .q-container{text-align:center}
.q-badge{display:inline-block;background:#FEF2F2;color:#E31E24;font-weight:600;font-size:12px;padding:4px 10px;border-radius:20px;margin-bottom:10px}
.q-badge-green{background:#F0FDF4;color:#16A34A}
.q-welcome h1{font-size:30px;line-height:1.15;font-weight:800;color:#1E1E1C;margin:0 0 10px;letter-spacing:-0.02em}
.q-accent{color:#E31E24}
.q-lead{font-size:15px;line-height:1.45;color:#4A4A48;margin:0 0 14px;max-width:560px;margin-left:auto;margin-right:auto}
.q-bullets{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:6px;text-align:left;max-width:480px;margin-left:auto;margin-right:auto}
.q-bullets li{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.4;color:#1E1E1C}
.q-check{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#F0FDF4;color:#16A34A;font-weight:800;font-size:11px}
.q-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 32px;font-family:inherit;font-size:15px;font-weight:700;border:none;border-radius:10px;cursor:pointer;transition:all 0.2s;text-decoration:none}
.q-btn-primary{background:#E31E24;color:#fff;box-shadow:0 4px 20px rgba(227,30,36,0.25)}
.q-btn-primary:hover{background:#B9181D;transform:translateY(-1px);box-shadow:0 8px 28px rgba(227,30,36,0.35)}
.q-trust{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;padding-top:14px;margin-top:14px;border-top:1px solid #E5E5E3}
.q-trust-item{display:flex;flex-direction:column;gap:1px;align-items:center}
.q-trust-item b{font-size:16px;font-weight:800;color:#1E1E1C;line-height:1.1}
.q-trust-item span{font-size:11px;color:#8C8C8A}

/* --- Step screens --- */
.q-step-label,.q-contact .q-step-label{font-size:13px;font-weight:600;color:#E31E24;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:12px;text-align:center}
.q-question{font-size:34px;line-height:1.18;font-weight:800;color:#1E1E1C;margin:0 0 14px;letter-spacing:-0.015em;text-align:center}
.q-sub{font-size:17px;line-height:1.5;color:#4A4A48;margin:0 0 28px;text-align:center;max-width:640px;margin-left:auto;margin-right:auto}

/* --- Options (icon grid) --- */
.q-options-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.q-options-grid .q-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:28px 14px;background:#fff;border:2px solid #F0F0EE;border-radius:16px;cursor:pointer;font-family:inherit;color:#1E1E1C;transition:all 0.15s;min-height:150px}
.q-options-grid .q-opt svg{color:#8C8C8A;transition:color 0.15s;width:40px;height:40px}
.q-options-grid .q-opt span{font-size:17px;font-weight:600;text-align:center}
.q-opt:hover{border-color:#E31E24;background:#FEF2F2;transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.06)}
.q-opt:hover svg{color:#E31E24}
.q-opt.is-selected{border-color:#E31E24;background:#FEF2F2;color:#E31E24}
.q-opt.is-selected svg{color:#E31E24}

/* --- Options (wide list) --- */
.q-options-list{display:flex;flex-direction:column;gap:10px}
.q-opt-wide{display:flex;align-items:center;justify-content:space-between;padding:22px 28px;background:#fff;border:2px solid #F0F0EE;border-radius:14px;cursor:pointer;font-family:inherit;color:#1E1E1C;transition:all 0.15s;text-align:left;width:100%;gap:20px;min-height:68px}
.q-opt-title{font-size:18px;font-weight:600;line-height:1.3}
.q-opt-hint{font-size:14px;color:#8C8C8A;margin-left:auto;text-align:right;flex-shrink:0}
.q-opt-wide:hover{border-color:#E31E24;background:#FEF2F2;transform:translateX(4px);box-shadow:0 4px 16px rgba(0,0,0,0.05)}
.q-opt-wide:hover .q-opt-hint{color:#E31E24}

/* --- Back button --- */
.q-back{display:inline-flex;align-items:center;gap:6px;margin-top:20px;padding:8px 14px;background:transparent;border:none;color:#8C8C8A;font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;border-radius:8px;transition:all 0.15s}
.q-back:hover{color:#E31E24;background:#FEF2F2}

/* --- Contact form --- */
.q-contact .q-container{max-width:460px}
.q-form{margin-top:16px}
.q-contact .lp-field{margin-bottom:10px}
.q-contact .lp-field > span{font-size:12px;margin-bottom:4px}
.q-contact .lp-field input,.q-contact .lp-field select{padding:11px 14px;font-size:14px}
.q-contact .lp-form-gift{margin-top:10px;padding:10px;font-size:12px}
.q-contact .lp-agree{margin-top:10px;font-size:11px}
.q-submit{width:100%;margin-top:4px}

/* --- Quiz Welcome: 2-column with image --- */
.q-welcome .q-container.q-welcome-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;max-width:1360px;align-items:center}
.q-welcome-grid .q-welcome-content{text-align:left;min-width:0}
.q-welcome-grid .q-welcome-content h1{font-size:44px;line-height:1.1;margin-bottom:18px;text-align:left}
.q-welcome-grid .q-welcome-content .q-lead{text-align:left;margin-left:0;margin-right:0;font-size:18px;line-height:1.5;margin-bottom:20px;max-width:none}
.q-welcome-grid .q-bullets{margin-left:0;margin-right:0;max-width:none;gap:10px;margin-bottom:24px}
.q-welcome-grid .q-bullets li{font-size:15px;line-height:1.5}
.q-welcome-grid .q-check{width:22px;height:22px;font-size:12px}
.q-welcome-grid .q-btn-primary{padding:16px 36px;font-size:16px}
.q-welcome-grid .q-trust{justify-content:flex-start;gap:36px;padding-top:20px;margin-top:20px}
.q-welcome-grid .q-trust-item b{font-size:18px}
.q-welcome-grid .q-trust-item span{font-size:12px}
.q-welcome-image{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.18);aspect-ratio:4/5;max-height:calc(100vh - 120px);margin:0 auto;width:100%}
.q-welcome-image img{width:100%;height:100%;object-fit:cover;display:block}
.q-welcome-image-caption{position:absolute;left:16px;bottom:16px;right:16px;display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,0.95);backdrop-filter:blur(8px);border-radius:11px;color:#1E1E1C;font-size:14px;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,0.08)}
.q-welcome-image-caption svg{color:#E31E24;flex-shrink:0}

/* --- Shrink welcome on low-height desktops --- */
@media (max-height:760px) and (min-width:900px){
  .q-welcome h1{font-size:24px;margin-bottom:8px}
  .q-lead{font-size:14px;margin-bottom:10px}
  .q-bullets{margin-bottom:12px;gap:5px}
  .q-bullets li{font-size:12px}
  .q-btn{padding:12px 28px;font-size:14px}
  .q-trust{padding-top:10px;margin-top:10px;gap:18px}
  .q-trust-item b{font-size:15px}
}

/* ============================================================
   RESPONSIVE — Quiz
   ============================================================ */
@media (max-width:900px){
  body.quiz-page{overflow:auto;height:auto;min-height:100vh}
  .q-app{height:auto;min-height:100vh;overflow:visible}
  .q-screen{overflow:visible}

  .q-welcome .q-container.q-welcome-grid{grid-template-columns:1fr;gap:20px}
  .q-welcome-image{aspect-ratio:16/10;order:-1;max-height:200px}
  .q-welcome-grid .q-welcome-content h1,
  .q-welcome-grid .q-welcome-content .q-lead{text-align:center;margin-left:auto;margin-right:auto}
  .q-welcome-grid .q-bullets{margin-left:auto;margin-right:auto}
  .q-welcome-grid .q-trust{justify-content:center}
  .q-welcome-grid .q-welcome-content{text-align:center}
}

@media (max-width:768px){
  .q-header{padding:8px 14px;gap:8px}
  .q-header-row{gap:10px}
  .q-header-phone span{display:none}
  .q-header-phone{width:36px;height:36px;border-radius:50%;background:#FEF2F2;justify-content:center}
  .q-logo img{height:26px}
  /* Ya badge в шапке на мобилке — только рейтинг + звёзды */
  .q-ya-badge--header{padding:5px 10px;gap:6px}
  .q-ya-badge--header .q-ya-label{display:none}
  .q-ya-badge--header img{width:16px;height:16px}

  .q-screen{padding:20px 16px}
  .q-welcome h1{font-size:24px;margin-bottom:10px}
  .q-lead{font-size:14px;margin-bottom:14px}
  .q-bullets{margin-bottom:18px;gap:6px}
  .q-bullets li{font-size:13px}
  .q-btn{padding:14px 28px;font-size:15px;width:100%}
  .q-trust{gap:16px;padding-top:16px;margin-top:18px}
  .q-trust-item b{font-size:16px}
  .q-trust-item span{font-size:11px}

  .q-question{font-size:20px;margin-bottom:8px}
  .q-sub{font-size:13px;margin-bottom:14px}

  .q-options-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .q-options-grid .q-opt{padding:16px 10px;min-height:100px;gap:8px}
  .q-options-grid .q-opt svg{width:32px;height:32px}
  .q-options-grid .q-opt span{font-size:13px}

  .q-opt-wide{padding:12px 16px;flex-direction:column;align-items:flex-start;gap:2px}
  .q-opt-title{font-size:14px}
  .q-opt-hint{margin-left:0;text-align:left;font-size:11px}

  .q-welcome-image{max-height:160px;border-radius:12px}
  .q-welcome-image-caption{font-size:11px;padding:6px 10px;left:10px;right:10px;bottom:10px}
}

@media (max-width:480px){
  .q-welcome h1{font-size:22px}
  .q-question{font-size:18px}
  .q-options-grid{grid-template-columns:1fr}
  .q-options-grid .q-opt{flex-direction:row;justify-content:flex-start;min-height:auto;padding:12px 18px;gap:14px}
  .q-options-grid .q-opt svg{width:28px;height:28px}
  .q-welcome-image{max-height:140px}
}

/* --- Quiz Yandex reviews badge --- */
.q-ya-badge{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;background:#fff;border:1px solid #F0F0EE;border-radius:12px;text-decoration:none;color:#1E1E1C;margin:0 0 28px;transition:all 0.15s;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.q-ya-badge:hover{border-color:#FC3F1D;transform:translateY(-1px);box-shadow:0 6px 16px rgba(252,63,29,0.12)}
.q-ya-badge img{flex-shrink:0}
.q-ya-badge b{font-size:16px;font-weight:800;color:#1E1E1C}
.q-ya-stars{color:#FFB400;letter-spacing:1px;font-size:14px;line-height:1}
.q-ya-label{font-size:13px;color:#4A4A48;font-weight:500}

@media (max-width:900px){
  .q-welcome-grid .q-ya-badge{margin-left:auto;margin-right:auto}
}
@media (max-width:480px){
  .q-ya-badge{padding:8px 12px;gap:8px;flex-wrap:wrap;justify-content:center}
  .q-ya-label{font-size:12px}
  .q-ya-badge b{font-size:14px}
}

/* ============================================================
   ARTICLE LAYOUT + TABLE OF CONTENTS (blog single)
   ============================================================ */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:48px;padding-top:24px;padding-bottom:40px}
.article-layout .article-content{min-width:0;max-width:760px;margin:0;padding-bottom:24px}
.article-layout .article-hero{max-width:none;margin:0 0 16px;padding:16px 0 8px}
.article-layout .article-featured{max-width:none;margin:0 0 24px}

/* Table of contents — wrapper растягивается на всю строку grid (прозрачный),
   а внутренний блок .article-toc sticky — прилипает и едет с прокруткой.
   max-height + overflow-y: если оглавление длиннее экрана, появляется внутренний скролл
   (JS ниже автоматом доскроллит до активного пункта). */
.article-toc-wrap{position:relative}
.article-toc{position:sticky;top:96px;background:#FAFAF8;border:1px solid #F0F0EE;border-radius:14px;padding:20px 22px;max-height:calc(100vh - 120px);overflow-y:auto;scrollbar-width:none}
.article-toc::-webkit-scrollbar{display:none;width:0;height:0}
.article-toc-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#8C8C8A;margin-bottom:14px}
.article-toc-list{display:flex;flex-direction:column;gap:2px}
.article-toc-link{display:block;padding:8px 12px;font-size:13px;line-height:1.4;color:#4A4A48;text-decoration:none;border-radius:8px;border-left:2px solid transparent;transition:all 0.15s}
.article-toc-link:hover{color:#1E1E1C;background:#fff}
.article-toc-link--h3{padding-left:24px;font-size:12.5px;color:#8C8C8A}
.article-toc-link.is-active{color:#E31E24;background:#fff;border-left-color:#E31E24;font-weight:600}
.article-toc-link.is-active.article-toc-link--h3{font-weight:500}

/* Якоря — учитываем sticky header */
.article-content h2[id],
.article-content h3[id]{scroll-margin-top:96px}

/* Responsive */
@media (max-width:1024px){
  .article-layout{grid-template-columns:1fr;gap:24px}
  .article-toc-wrap{order:-1;margin-bottom:16px}
  .article-toc{position:static;max-height:none}
  .article-toc-list{max-height:220px;overflow-y:auto}
}
@media (max-width:768px){
  .article-toc{padding:14px 16px}
  .article-toc-title{margin-bottom:8px}
  .article-toc-link{padding:6px 10px;font-size:12px}
}