/* ===== СБРОС И БАЗОВЫЕ СТИЛИ — точно как на сайте ===== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --blue:#046088;        /* точный цвет с сайта */
  --blue-dark:#0d2f5e;   /* тёмно-синий хедер/футер */
  --blue-light:#e8f3fb;  /* светло-голубой фон секций */
  --blue-mid:#1a6fa8;
  --orange:#e87722;      /* оранжевый акцент кнопок */
  --orange-hover:#c96510;
  --bg:#f5f8fa;          /* фон страницы */
  --text:#222;
  --text-mid:#555;
  --text-light:#888;
  --border:#dde4ea;
  --green:#2e7d32;
  --green-bg:#e6f4ea;
}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.2;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
input, button, textarea {-webkit-appearance: checkbox !important;-moz-appearance: inherit;appearance: auto !important;}
.col-4 {width: auto;}


/* ===== ОБЁРТКА ===== */
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.header-lng {position: fixed;width: 100%;z-index: 10;}
.main-lng {margin-top: 0px;padding-top: 95px;}


/* ===== ШАПКА — двухуровневая, точно как на сайте ===== */
.top-bar{background:#fff;border-bottom:1px solid var(--border);padding:4px 0}
.top-bar .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.top-geo{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--text-mid)}
.top-geo img{width:14px;height:14px;opacity:.7}
.top-rating{display:flex;align-items:center;gap:8px}
.top-rating .stars{color:#f5a623;font-size:14px;letter-spacing:1px}
.top-rating .score{font-weight:700;font-size:14px}
.top-rating .label{font-size:11px;color:var(--text-light)}
.top-right{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;gap:14px;justify-content: center;}
.top-phone-block{text-align: center;}
.top-phone{font-size:18px;font-weight:700;color:var(--blue-dark);display:block;line-height:1.2}
.top-email{font-size:12px;color:var(--text-light)}
.btn--blue-fill{background:var(--blue);color:#fff;padding:11px 22px;border-radius:5px;font-size:14px;font-weight:600;border:none;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:background .18s}
.btn--blue-fill:hover{background:var(--blue-dark)}
.btn-phone-round{width:40px;height:40px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .18s}
.btn-phone-round:hover{background:var(--blue-dark)}
.btn-phone-round svg{color:#fff}
.top-logo {width: 170px;padding: 5px;}

.hdr-main{background:#fff;padding:12px 0}
.hdr-main .wrap{display:flex;align-items:center;gap:20px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
/*.logo img{height:46px}*/
.logo-fallback{display:flex;align-items:center;gap:8px}
.logo-icon-svg{width:44px;height:44px}
.logo-name{font-size:20px;font-weight:800;color:var(--blue-dark);letter-spacing:.5px;line-height:1}
.logo-name sup{font-size:10px;color:var(--orange);vertical-align:super;font-weight:700}
.logo-sub{font-size:9px;color:var(--text-light);text-transform:uppercase;letter-spacing:1px;margin-top:1px}
.hdr-search{flex:1;max-width:380px;position:relative}
.hdr-search input{width:100%;padding:9px 13px 9px 38px;border:1.5px solid var(--border);border-radius:5px;font-size:14px;color:var(--text);background:#fafcfe;outline:none;font-family:inherit}
.hdr-search input:focus{border-color:var(--blue)}
.hdr-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-light);pointer-events:none}

.hdr-nav{background:var(--blue-dark);padding:0}
.hdr-nav .wrap{display:flex;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch}
.nav-link{padding:14px 16px;font-size:12px;font-weight:600;color:rgba(255,255,255,.8);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;transition:color .15s,background .15s;display:block}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.08)}

/* ===== HERO — калькулятор ===== */
.hero-section{background:var(--bg);padding:28px 0 0}
.hero-inner{display:grid;grid-template-columns:1fr 210px;gap:20px;align-items:start;max-width:1180px;margin:0 auto;padding:0 20px}
.hero-wrap {position: relative;z-index: 1;grid-template-columns: 1fr 490px;gap: 24px;align-items: center;display: grid;}
/* Калькулятор-карточка — из CSS оригинала
.oc-card{background:#fff;border-radius:8px;box-shadow:0 2px 20px rgba(0,0,0,.07);padding:24px 28px}
.oc-title{font-size:20px;font-weight:700;color:var(--blue-dark);margin-bottom:4px}
.oc-subtitle{font-size:13px;color:var(--blue);margin-bottom:18px}
.oc-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.oc-tab{padding:8px 16px;border-radius:20px;background:#f0f5f9;border:1.5px solid #dde4ea;font-size:13px;font-weight:600;color:var(--text-mid);cursor:pointer;transition:all .18s}
.oc-tab.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.oc-tab:hover:not(.active){border-color:var(--blue);color:var(--blue)}
.oc-body{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.oc-fields{display:flex;flex-direction:column;gap:14px}
.oc-lbl{display:block;font-size:11px;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:.7px;margin-bottom:5px}
.oc-input{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:5px;font-size:14px;color:var(--text);outline:none;font-family:inherit;transition:border-color .15s}
.oc-input:focus{border-color:var(--blue)}
.oc-select{width:100%;padding:10px 34px 10px 12px;border:1.5px solid var(--border);border-radius:5px;font-size:14px;color:var(--text);outline:none;font-family:inherit;appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 11px center;cursor:pointer}
.oc-select:focus{border-color:var(--blue)}
.oc-seg-group{display:flex;gap:6px;flex-wrap:wrap}
.oc-seg{padding:6px 13px;border-radius:20px;background:#f0f5f9;border:1.5px solid var(--border);font-size:12px;font-weight:600;color:var(--text-mid);cursor:pointer;transition:all .15s;font-family:inherit}
.oc-seg.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.oc-chk-list{display:flex;flex-direction:column;gap:8px}
.oc-chk{display:flex;align-items:flex-start;gap:8px;cursor:pointer}
.oc-chk input{display:none}
.oc-chk-box{width:18px;height:18px;border-radius:4px;border:2px solid var(--border);background:#fff;flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.oc-chk input:checked ~ .oc-chk-box{background:var(--blue);border-color:var(--blue)}
.oc-chk-text{font-size:13px;color:var(--text-mid);line-height:1.4}
.oc-chk-text strong{color:var(--text);display:block;font-size:13px}
.oc-chk-text em{font-style:normal;font-size:11px;color:var(--blue)}
.oc-calc-btn{width:100%;background:var(--blue);color:#fff;padding:13px;border-radius:5px;border:none;font-size:15px;font-weight:700;cursor:pointer;margin-top:4px;transition:background .18s;font-family:inherit}
.oc-calc-btn:hover{background:var(--blue-dark)}
.oc-note{font-size:10px;color:var(--text-light);text-align:center;margin-top:6px} */

/* Панель результатов */
/* .oc-result{background:var(--blue-light);border-radius:7px;padding:18px}
.oc-result.empty{display:flex;align-items:center;justify-content:center;text-align:center;min-height:200px;color:var(--text-light);font-size:13px;flex-direction:column;gap:10px}
.oc-cost-lbl{font-size:11px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px}
.oc-cost-val{font-size:36px;font-weight:800;color:var(--blue-dark);line-height:1;margin-bottom:4px}
.oc-compare{font-size:13px;color:var(--text-light);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.oc-strike{text-decoration:line-through;color:var(--text-light)}
.oc-save-badge{background:var(--green-bg);color:var(--green);border-radius:20px;padding:2px 10px;font-size:12px;font-weight:700}
.oc-divider{border:none;border-top:1px solid #c2dbec;margin:14px 0}
.oc-sect-lbl{font-size:11px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.oc-compact-table{display:flex;flex-direction:column;gap:6px}
.table-row-compact{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.row-name{color:var(--text-mid)}
.row-qty{font-weight:700;color:var(--text);background:#fff;border-radius:4px;padding:2px 8px;font-size:12px}
.oc-includes{list-style:none;display:flex;flex-direction:column;gap:5px}
.oc-includes li{font-size:12px;color:var(--text-mid);display:flex;align-items:center;gap:6px}
.oc-includes li::before{content:'✓';color:var(--blue);font-weight:700;font-size:11px}
.oc-cta-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:8px}
.oc-cta-row{display:flex;gap:8px}
.oc-phone{flex:1;padding:10px 12px;border:1.5px solid var(--border);border-radius:5px;font-size:14px;outline:none;font-family:inherit}
.oc-phone:focus{border-color:var(--blue)}
.oc-phone-large{padding:11px 13px}
.oc-send-btn{background:var(--blue);color:#fff;padding:10px 14px;border-radius:5px;border:none;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;font-family:inherit}
.oc-send-btn-large{padding:11px 16px}
.oc-legal-txt{font-size:10px;color:var(--text-light);margin-top:6px;text-align:center}
.oc-success{display:none;background:var(--green-bg);color:var(--green);border-radius:5px;padding:10px 12px;font-size:13px;font-weight:600;margin-top:8px}

.oc-other-cats{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.oc-other-label{font-size:11px;color:var(--text-light);text-transform:uppercase;letter-spacing:.5px;margin-right:2px;white-space:nowrap}
.oc-other-tag{padding:4px 12px;border-radius:16px;background:#f0f5f9;border:1px solid var(--border);font-size:12px;color:var(--text-mid);cursor:pointer;white-space:nowrap;transition:all .15s}
.oc-other-tag:hover{border-color:var(--blue);color:var(--blue)}

Промо-карточки справа
.hero-side{display:flex;flex-direction:column;gap:12px}
.service-block{background:#fff;border-radius:8px;overflow:hidden;display:block;position:relative;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:box-shadow .2s;cursor:pointer}
.service-block:hover{box-shadow:0 4px 16px rgba(0,0,0,.12)}
.service-block__txt{padding:12px 14px}
.service-block__header{font-size:13px;font-weight:600;color:var(--blue);line-height:1.3}
.service-block .arrow{padding:0 14px 10px;display:flex;align-items:center;gap:6px}
.service-block .arrow svg{color:var(--blue)}
.service-block__img{padding:4px 10px 10px;display:flex;align-items:center;justify-content:center;height:110px}
.service-block__img img{max-height:100px;object-fit:contain}
.promotion-badge{position:absolute;top:8px;right:0;background:var(--orange);color:#fff;font-size:10px;font-weight:700;padding:4px 10px 4px 8px;border-radius:4px 0 0 4px}

Нижние карточки категорий
.bottom-cats{background:#fff;padding:16px 0;border-top:1px solid var(--border)}
.bottom-cats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bcat-card{display:block;border-radius:7px;background:var(--bg);padding:14px;text-align:center;transition:box-shadow .18s;cursor:pointer}
.bcat-card:hover{box-shadow:0 3px 12px rgba(0,0,0,.1)}
.bcat-card img{height:90px;object-fit:contain;margin:0 auto 8px}
.bcat-card-name{font-size:12px;font-weight:600;color:var(--blue);line-height:1.3}
 */
/* ===== СЕКЦИИ ===== */
.section{padding:60px 0}
.section--white{background:#fff}
.section--light{background:var(--bg)}
.section--blue-light{background:var(--blue-light)}
.section--dark{background:var(--blue-dark);color:#fff}
.h2{font-size:26px;font-weight:700;color:var(--text);margin-bottom:6px;line-height:1.25}
.h2--white{color:#fff}
.sub-header{font-size:14px;color:var(--text-mid);margin-bottom:28px}
.sub-header--white{color:rgba(255,255,255,.7)}
.p-b-90 {padding-bottom: 0px;}
.p-t-90 {padding-top: 60px;}
.m-b-90 {margin-bottom: 0px;}
.m-t-90 {margin-top: 0px;}

/* ===== ПРЕИМУЩЕСТВА — как на оригинале ===== */
.features__wrap{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:center}
.features-list{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px}
.features-item-title{font-size:14px;font-weight:700;color:var(--blue);margin-bottom:5px}
.features-item p{font-size:13px;color:var(--text-mid);line-height:1.55}
.sklad-col{position:relative;border-radius:8px;overflow:hidden;min-height:220px}
.sklad-col .bg-img{position:absolute;inset:0}
.sklad-col .bg-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.35)}
.sklad-txt{position:relative;z-index:1;padding:24px;color:#fff;text-align:center;width: 100% !important;padding: 20px !important;}
.sklad-txt p{font-size:13px;font-weight:600;line-height:1.5;margin-bottom:12px}
.sklad-volume{font-size:36px;font-weight:800;line-height:1}
.sklad-volume sup{font-size:16px}
.sklad-txt .note{font-size:11px;margin-top:10px;opacity:.75}
.features .features-col {max-width: none;}
.features .features-item {width: auto;margin-bottom: auto;}
.features .sklad-col {width: auto; flex-shrink: 0;}

/* ===== КАТАЛОГ — как на оригинале ===== */
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid-service-block{display:block;background:#fff;border-radius:8px;border:1.5px solid var(--border);overflow:hidden;cursor:pointer;transition:border-color .18s,box-shadow .18s}
.grid-service-block:hover{border-color:var(--blue);box-shadow:0 4px 14px rgba(4,96,136,.12)}
.grid-service-block__txt{padding:14px 14px 0}
.grid-service-block__header{font-size:13px;font-weight:700;color:var(--blue);line-height:1.35}
.grid-service-block__img{padding:8px 14px 14px;height:130px;display:flex;align-items:center;justify-content:center}
.grid-service-block__img img{max-height:110px;object-fit:contain}

/* ===== ТАБЛИЦА ЦЕН — точно как на оригинале ===== */
.price-table{border-radius:7px;overflow:hidden;border:1px solid var(--border);margin-bottom:22px}
.price-table__row{display:flex;justify-content:space-between;align-items:center;padding:13px 20px;background:#fff;border-bottom:1px solid var(--border)}
.price-table__row:nth-child(even){background:#f9fbfc}
.price-table__row:last-child{border-bottom:none}
.product-title{font-size:14px;color:var(--text)}
.product-price{font-size:15px;font-weight:700;color:var(--blue);white-space:nowrap;margin-left:20px}
.btn--bordered{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--orange);color:var(--orange);background:transparent;padding:10px 20px;border-radius:5px;font-size:13px;font-weight:700;cursor:pointer;letter-spacing:.3px;text-transform:uppercase;transition:all .18s;font-family:inherit}
.btn--bordered:hover{background:var(--orange);color:#fff}
.btn--bordered.dark-blue{border-color:var(--blue);color:var(--blue)}
.btn--bordered.dark-blue:hover{background:var(--blue);color:#fff}
.price-table__cell {background: none;box-shadow: none;padding: 0;line-height: 1;}

/* ===== ТЁМНАЯ ФОРМА-БАННЕР — как на оригинале ===== */
.dark-form-wrap{background:var(--blue-dark);border-radius:8px;padding:36px 40px}
.dark-form-wrap .h2{color:#fff}
.dark-form-wrap p{color:rgba(255,255,255,.8);font-size:14px;margin-bottom:22px}
.dark-form-wrap p a{color:#fff;text-decoration:underline}
.lead-form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:start}
.lead-form .form-field input{width:100%;padding:13px 15px;border:none;border-radius:6px;font-size:14px;outline:none;font-family:inherit}
.btn--fill{background:var(--orange);color:#fff;padding:13px 22px;border-radius:6px;border:none;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .18s}
.btn--fill:hover{background:var(--orange-hover)}
.lead-form .checkbox-container{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.6);margin-top:4px}
.lead-form .checkbox-container input{accent-color:var(--orange)}
.lead-form-wrap {max-width: 100%;margin: 0 auto;padding: 0;background: var(--blue-dark);}
.lead-form-wrap .dark-form-wrap {background: var(--blue-dark);padding: 60px 0px;}


/* ===== ШАГИ ПРОЦЕССА ===== */
.order-process{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.order-process__item{display:flex;gap:12px;align-items:flex-start}
.item-step{width: 34px !important;height: 34px !important;border-radius: 6px;background: var(--blue) !important;color: #fff;font-size: 15px !important;font-weight: 700;display: flex;align-items: center;justify-content: center;flex-shrink: 0;}
.item-txt{font-size:13px;color:var(--text-mid);line-height:1.5}
.item-txt b{color:var(--text)}


/* ===== ГАЛЕРЕЯ ===== */
.gallery-list{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px}
.gallery-img{display:block;border-radius:7px;overflow:hidden;aspect-ratio:1}
.gallery-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.gallery-img:hover img{transform:scale(1.06)}
.gallery-list .gallery-img {width: auto;margin: auto;}

/* ===== БРЕНДЫ ===== */
/* .brands-list{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.logo-wrap{background:#fff;border:1.5px solid var(--border);border-radius:7px;padding:14px;display:flex;align-items:center;justify-content:center;height:66px}
.logo-wrap img{max-height:34px;max-width:100%;object-fit:contain}
 */
 .brands-wrap {padding-top: 60px;}
 
/* ===== FAQ ===== */
.faq-list{display:flex;flex-direction:column;gap:6px}
.faq-item{background:#fff;border-radius:7px;border:1.5px solid var(--border);overflow:hidden}
.faq-q{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:15px;font-weight:600;color:var(--text);user-select:none}
.faq-ico{color:var(--blue);font-size:22px;font-weight:300;line-height:1;transition:transform .22s;flex-shrink:0;margin-left:10px}
.faq-ico.open{transform:rotate(45deg)}
.faq-a{font-size:14px;color:var(--text-mid);line-height:1.6;display:none;padding:0 20px 16px}
.faq-a.open{display:block}

/* ===== ФУТЕР — точно как на оригинале ===== */
.footer{background:var(--blue-dark);color:#fff}
.footer-top{padding:36px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-top .wrap{display:flex;align-items:flex-start;gap:36px;flex-wrap:wrap}
.footer-logo-block{}
.footer-logo img{height:40px}
.footer-logo-fallback{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.footer-logo-name{font-size:17px;font-weight:800;letter-spacing:.5px}
.footer-logo-name sup{font-size:9px;color:var(--orange);vertical-align:super}
.footer-logo-tagline{font-size:9px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:1px}
.footer-socials{display:flex;gap:8px;margin-top:12px}
.social-link{width:30px;height:30px;border-radius:6px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:rgba(255,255,255,.7);transition:background .15s}
.social-link:hover{background:rgba(255,255,255,.2)}
.footer-adr{flex:1;font-size:13px;color:rgba(255,255,255,.55);line-height:1.7}
.footer-contacts{margin-left:auto}
.footer-phone{font-size:19px;font-weight:700}
.footer-phone a{color:#fff}
.footer-email-sm{font-size:12px;color:rgba(255,255,255,.45);margin-top:3px}
.footer-middle{padding:28px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.footer-middle .wrap{display:grid;grid-template-columns:1fr 1fr 1fr 120px;gap:28px}
.footer-main-nav a{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.4);margin-bottom:12px}
.footer-nav-links{display:flex;flex-direction:column;gap:7px}
.footer-nav-links a{font-size:13px;color:rgba(255,255,255,.65);transition:color .15s;line-height:1.3}
.footer-nav-links a:hover{color:#fff}
.footer-bottom{padding:14px 0}
.footer-bottom .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.footer-copy{font-size:12px;color:rgba(255,255,255,.3)}
.footer-legal{display:flex;gap:20px}
.footer-legal a{font-size:12px;color:rgba(255,255,255,.3);transition:color .15s}
.footer-legal a:hover{color:rgba(255,255,255,.6)}

/* ===== МОБИЛЬНЫЙ STICKY ===== */
.mob-cta{display:none}
@media(max-width:680px){
  .mob-cta{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:999;border-top:1px solid rgba(255,255,255,.2);padding:10px 16px;gap:10px;background:var(--blue-dark)}
  .mob-cta a{flex:1;text-align:center;padding:12px;border-radius:7px;font-weight:700;font-size:14px}
  .mob-cta a:first-child{background:rgba(255,255,255,.15);color:#fff;border:1.5px solid rgba(255,255,255,.3)}
  .mob-cta a:last-child{background:var(--orange);color:#fff}
  body{padding-bottom:74px}
}

/* ===== АДАПТИВ ===== */
@media(max-width:960px){
  .hero-wrap {display:block;} 
  .hero-inner{grid-template-columns:1fr;gap:16px}
  .hero-side{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .features__wrap{grid-template-columns:1fr}
  .sklad-col{display:none}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .bottom-cats-grid{grid-template-columns:repeat(2,1fr)}
  .order-process{grid-template-columns:1fr 1fr}
  .gallery-list{grid-template-columns:repeat(2,1fr)}
  .brands-list{grid-template-columns:repeat(3,1fr)}
  .footer-middle .wrap{grid-template-columns:1fr 1fr}
  .lead-form{grid-template-columns:1fr 1fr}
  .lead-form .form-field:last-child{grid-column:1/-1}
}
@media(max-width:680px){
  .hdr-search{display:none}
  .top-rating .label{display:none}
  .features-list{grid-template-columns:1fr}
  .service-grid{grid-template-columns:1fr 1fr}
  .oc-body{grid-template-columns:1fr}
  .h2{font-size:21px}
  .order-process{grid-template-columns:1fr}
  .footer-top .wrap{flex-direction:column;gap:20px}
  .footer-middle .wrap{grid-template-columns:1fr}
  .footer-contacts{margin-left:0}
  .lead-form{grid-template-columns:1fr}
  .brands-list{grid-template-columns:repeat(2,1fr)}
  .hero-side{grid-template-columns:1fr 1fr}
  .top-bar .wrap{gap:8px}
  .hdr-nav .wrap{gap:0}
  .nav-link{padding:12px 10px;font-size:11px}
}
@media(max-width:440px){
  .hero-side{grid-template-columns:1fr}
  .bottom-cats-grid{grid-template-columns:1fr 1fr}
}

/* ===== Форма ОС ===== */
:root {
    --orange: #E65100;
    --text: #1a1a1a;
    --text-mid: #666;
    --text-light: #999;
    --border: #e0e0e0;
    --blue: #046088;
    --success: #28a745;
    --error: #dc3545;
}

.oc-form {
    position: relative;
    transition: all 0.3s ease;
}

.oc-form.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Стили полей */
.oc-lbl {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-mid);
    margin-bottom: 4px;
}

.oc-input,
.oc-select {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background: #fff;
    color: var(--text);
    box-sizing: border-box;
}

.oc-input:focus,
.oc-select:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(230, 81, 0, 0.1);
}

.oc-input.error,
.oc-select.error {
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.oc-input.success {
    border-color: var(--success);
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

/* Маска телефона */
.oc-input[type="tel"] {
    letter-spacing: 0.5px;
}

/* Стили для сообщений */
.oc-form-message {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-weight: 500;
    animation: slideDown 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 10px;
}

.oc-form-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.oc-form-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.oc-form-message .icon {
    font-size: 20px;
    flex-shrink: 0;
}

/* Состояние загрузки */
.oc-form-btn {
    position: relative;
    transition: all 0.3s ease;
}

.oc-form-btn.loading {
    color: transparent !important;
    pointer-events: none;
}

.oc-form-btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Анимации */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Адаптивность */
@media (max-width: 480px) {
    .oc-form {
        padding: 20px !important;
    }
    
    .oc-form [style*="display:grid;grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* ========================================
   Общие стили для блоков utp-cards, sales, terms
   ======================================== */

:root {
  --blue: #046088;
  --blue-dark: #0d2f5e;
  --blue-light: #e8f3fb;
  --orange: #e87722;
  --border: #dde4ea;
  --text: #222;
  --text-light: #888;
  --text-mid: #555;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.section--dark h2, .section--dark .h2, .section--dark h2 {color: #fff;}
.section--dark .sub-header {color: rgba(255, 255, 255, .7);}

/* ========================================
   utp-cards.css — Карточки преимуществ (УТП)
   ======================================== */

#utp-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.utp-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
  padding: 20px 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.utp-card .icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.utp-card .icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2;
}

.utp-card .title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 3px;
}

.utp-card .desc {
  font-size: 12px;
  color: var(--text-light);
  line-height: 1.4;
}

/* ========================================
   sales.css — Секция "Отдел продаж"
   ======================================== */

.sales-section {
  background: var(--blue-dark);
  color: #fff;
  padding: 44px 0;
}

.sales-section .h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.25;
  color: #fff;
}

.sales-section .sub-header {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 20px;
}

#sales-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 22px;
}

.sales-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.sales-card .icon {
  flex-shrink: 0;
  margin-top: 2px;
  stroke: var(--orange);
  fill: none;
  stroke-width: 2;
}

.sales-card .title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
}

.sales-card .desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
}

.sales-cta {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.sales-cta .icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sales-cta .icon-box svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
}

.sales-cta .text {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  flex: 1;
  min-width: 220px;
}

.sales-phones {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.sales-phone {
  display: inline-flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  padding: 10px 20px;
}

.sales-phone .label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.sales-phone .number {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

/* ========================================
   terms.css — Условия работы
   ======================================== */

.terms-section {
  background: #fff;
  padding: 48px 0;
}

.terms-section .h2 {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.25;
}

.terms-section .sub-header {
  font-size: 14px;
  color: var(--text-mid);
  margin-bottom: 28px;
}

#terms-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.terms-card {
  background: #fff;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.06);
  padding: 22px;
}

.terms-card .icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.terms-card .icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2;
}

.terms-card .title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}

.terms-card .desc {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.55;
}

/* ========================================
   Адаптивность
   ======================================== */

@media (max-width: 960px) {
  #utp-cards {
    grid-template-columns: 1fr 1fr !important;
  }
  #sales-cards {
    grid-template-columns: 1fr !important;
  }
  #terms-cards {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 680px) {
  #utp-cards {
    grid-template-columns: 1fr !important;
  }
  .sales-section .h2 {
    font-size: 21px;
  }
  .terms-section .h2 {
    font-size: 21px;
  }
  .sales-cta {
    flex-direction: column;
    text-align: center;
  }
  .sales-phones {
    flex-direction: column;
    width: 100%;
  }
  .sales-phone {
    width: 100%;
    align-items: center;
  }
}

/*-- ===== СТИЛИ КАЛЬКУЛЯТОРА ЛЕНДОСА ===== --*/

    /* Все стили остаются без изменений */
    .oc-card {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 20px rgba(0,0,0,.07);
        padding: 24px 28px;
    }
    .oc-head-title {
        font-size: 20px;
        font-weight: 700;
        color: #0d2f5e;
        margin-bottom: 4px;
    }
    .oc-head-sub {
        font-size: 13px;
        color: #046088;
        margin-bottom: 18px;
    }
    .oc-tabs {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }
    .oc-tab {
        padding: 8px 16px;
        border-radius: 20px;
        background: #f0f5f9;
        border: 1.5px solid #dde4ea;
        font-size: 13px;
        font-weight: 600;
        color: #555;
        cursor: pointer;
        transition: all .18s;
        font-family: inherit;
    }
    .oc-tab.active {
        background: #046088;
        color: #fff;
        border-color: #046088;
    }
    .oc-tab:hover:not(.active) {
        border-color: #046088;
        color: #046088;
    }
    .oc-fields {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .oc-lbl {
        display: block;
        font-size: 11px;
        font-weight: 700;
        color: #888;
        text-transform: uppercase;
        letter-spacing: .7px;
        margin-bottom: 5px;
    }
    .oc-input, .oc-select {
        width: 100%;
        padding: 10px 12px;
        border: 1.5px solid #dde4ea;
        border-radius: 5px;
        font-size: 14px;
        color: #222;
        outline: none;
        font-family: inherit;
        transition: border-color .15s;
        background: #fff;
    }
    .oc-input:focus, .oc-select:focus {
        border-color: #046088;
    }
    .oc-select {
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 11px center;
        cursor: pointer;
    }
    .oc-seg-group {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }
    .oc-seg {
        padding: 6px 13px;
        border-radius: 20px;
        background: #f0f5f9;
        border: 1.5px solid #dde4ea;
        font-size: 12px;
        font-weight: 600;
        color: #555;
        cursor: pointer;
        transition: all .15s;
        font-family: inherit;
    }
    .oc-seg.on {
        background: #046088;
        color: #fff;
        border-color: #046088;
    }
    .oc-chk-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .oc-chk {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        cursor: pointer;
    }
    .oc-chk input {
        display: none;
    }
    .oc-chk-box {
        width: 18px;
        height: 18px;
        border-radius: 4px;
        border: 2px solid #dde4ea;
        background: #fff;
        flex-shrink: 0;
        margin-top: 1px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .15s;
    }
    .oc-chk input:checked ~ .oc-chk-box {
        background: #046088;
        border-color: #046088;
    }
    .oc-chk-text {
        font-size: 13px;
        color: #555;
        line-height: 1.4;
    }
    .oc-chk-text strong {
        color: #222;
        display: block;
        font-size: 13px;
    }
    .oc-chk-text em {
        font-style: normal;
        font-size: 11px;
        color: #046088;
    }
    .oc-divider {
        border: none;
        border-top: 1px solid #c2dbec;
        margin: 14px 0;
    }
    .oc-sect-lbl {
        font-size: 11px;
        font-weight: 700;
        color: #222;
        text-transform: uppercase;
        letter-spacing: .5px;
        margin-bottom: 10px;
    }
    .oc-compact-table {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .table-row-compact {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
    }
    .row-name {
        color: #555;
    }
    .row-qty {
        font-weight: 700;
        color: #222;
        background: #fff;
        border-radius: 4px;
        padding: 2px 8px;
        font-size: 12px;
    }
    .oc-includes {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .oc-includes li {
        font-size: 12px;
        color: #555;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .oc-includes li::before {
        content: '✓';
        color: #046088;
        font-weight: 700;
        font-size: 11px;
    }
    .oc-note {
        font-size: 10px;
        color: #888;
        margin-top: 6px;
    }

    @media (max-width: 960px) {
        .main-promo__top {
            grid-template-columns: 1fr !important;
        }
        #benefit {
            position: static !important;
        }
        .oc-body {
            grid-template-columns: 1fr !important;
        }
    }
    @media (max-width: 680px) {
        .oc-card {
            padding: 16px;
        }
        .oc-tabs {
            gap: 4px;
        }
        .oc-tab {
            font-size: 12px;
            padding: 6px 12px;
        }
        .oc-fields {
            gap: 10px;
        }
    }
    
    
    
    
    
    @media (max-width: 504px) {
  .top-phone-block {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 20px;
  }
}