/*
Theme Name: BKB
Theme URI: https://bkb.za48.online
Author: ООО БКБ-СБ
Description: Тема для ООО «БКБ-СБ» — пожарная безопасность и видеонаблюдение. Все блоки редактируются через ACF.
Version: 1.0.0
Requires PHP: 8.0
Text Domain: bkb
*/
:root{
  --red:#d7261e;--red-d:#a3150f;--gold:#f6a623;--gold-l:#ffc85a;--dark:#0e0f12;--dark-2:#16181d;--dark-3:#1f232a;
  --ink:#1a1c20;--muted:#6b7280;--line:rgba(255,255,255,.1);--light:#f5f3ef;--white:#fff;
  --pad:clamp(16px,5vw,180px);--gap:clamp(16px,1.6vw,48px);--r:clamp(12px,1vw,28px);
  --sec:clamp(56px,7vw,200px);
  --grad:linear-gradient(120deg,var(--red) 0%,#ec5a1c 55%,var(--gold) 100%);
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:clamp(15px,.45vw + 11px,30px);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Manrope","Inter","Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--white);line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--red-d)}
h1,h2,h3,h4{font-family:"Unbounded","Manrope",Arial,sans-serif;line-height:1.12;margin:0 0 .6em;letter-spacing:-.01em;font-weight:800}
h1{font-size:clamp(2rem,4.2vw,5.4rem)}
h2{font-size:clamp(1.6rem,2.8vw,3.6rem)}
h3{font-size:clamp(1.1rem,1.25vw,1.7rem)}
p{margin:0 0 1em}
.wrap{padding-inline:var(--pad)}
.section{padding-block:var(--sec);position:relative}
.section--dark{background:var(--dark);color:#e8e8ea}
.section--dark h2,.section--dark h3{color:#fff}
.section--light{background:var(--light)}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:1rem}
.eyebrow::before{content:"";width:2.2em;height:2px;background:var(--grad)}
.section--dark .eyebrow{color:var(--gold)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--gap);align-items:end;margin-bottom:clamp(28px,3.5vw,90px)}
.sec-head p{color:var(--muted);font-size:1.05rem;margin:0}
.section--dark .sec-head p{color:#a5a8b0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:1em 1.8em;border-radius:999px;font-weight:700;font-size:.95rem;border:0;cursor:pointer;transition:.25s;white-space:nowrap;font-family:inherit;line-height:1.2}
.btn--primary{background:var(--grad);color:#fff;box-shadow:0 10px 30px -10px rgba(215,38,30,.7)}
.btn--primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(215,38,30,.9)}
.btn--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn--dark{background:var(--dark);color:#fff}.btn--dark:hover{color:var(--gold)}
.ico{width:1.2em;height:1.2em;flex:none}
/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(14,15,18,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);color:#fff}
.topbar{display:flex;gap:var(--gap);justify-content:space-between;align-items:center;padding-block:.45rem;font-size:.8rem;color:#a5a8b0;border-bottom:1px solid var(--line)}
.topbar span{display:inline-flex;align-items:center;gap:.4em}
.topbar .ico{color:var(--gold)}
.hdr{display:flex;align-items:center;gap:var(--gap);padding-block:.8rem}
.brand{display:flex;align-items:center;gap:.8rem;color:#fff;flex:none}
.brand img{height:clamp(44px,3.4vw,96px);width:auto}
.brand b{font-family:"Unbounded",sans-serif;font-size:clamp(1rem,1.1vw,1.5rem);display:block;line-height:1.1;color:#fff}
.brand small{display:block;font-size:.72rem;color:#a5a8b0;max-width:22ch;line-height:1.3}
.nav{margin-left:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(12px,1.6vw,44px)}
.nav li{position:relative}
.nav a{color:#e8e8ea;font-weight:600;font-size:.92rem;padding:.4em 0;display:block}
.nav a:hover,.nav .current-menu-item>a,.nav .current-menu-ancestor>a{color:var(--gold)}
.nav .sub-menu{position:absolute;top:100%;left:-1rem;min-width:18rem;background:var(--dark-2);border:1px solid var(--line);border-radius:var(--r);padding:.6rem 1rem;flex-direction:column;gap:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;box-shadow:0 30px 60px -20px #000}
.nav li:hover>.sub-menu{opacity:1;visibility:visible;transform:none}
.hdr-phone{color:#fff;font-weight:800;font-size:1.05rem;white-space:nowrap;display:flex;align-items:center;gap:.4em}
.hdr-phone:hover{color:var(--gold)}
.burger{display:none;background:none;border:0;color:#fff;width:44px;height:44px;cursor:pointer;padding:8px}
.burger span{display:block;height:2px;background:currentColor;margin:6px 0;transition:.3s}
/* hero */
.hero{position:relative;min-height:clamp(560px,88vh,2000px);display:flex;align-items:center;color:#fff;background:var(--dark);overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;animation:kb 24s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.08)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,15,18,.95) 0%,rgba(14,15,18,.75) 45%,rgba(14,15,18,.2) 100%),linear-gradient(0deg,rgba(14,15,18,.9),transparent 40%)}
.hero__in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:calc(var(--gap)*2);align-items:center;width:100%;padding-block:clamp(60px,8vw,220px)}
.hero h1{max-width:18ch}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__lead{font-size:clamp(1.05rem,1.15vw,1.6rem);color:#c9cbd1;max-width:52ch}
.hero__btns{display:flex;gap:1rem;flex-wrap:wrap;margin:2rem 0}
.hero__bul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;color:#d7d8dc;font-size:.92rem}
.hero__bul li{display:flex;align-items:center;gap:.5em}
.hero__bul .ico{color:var(--gold)}
.hero__card{background:rgba(22,24,29,.7);border:1px solid var(--line);backdrop-filter:blur(12px);border-radius:calc(var(--r)*1.5);padding:clamp(20px,2vw,56px)}
.hero__card h3{margin-bottom:.4em}
.hero__card p{color:#a5a8b0;font-size:.92rem}
.hero__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:1px;background:var(--line);border-radius:var(--r);overflow:hidden;margin-top:clamp(30px,4vw,100px)}
.hero__stats div{background:rgba(14,15,18,.75);padding:1.2rem 1.4rem}
.hero__stats b{display:block;font-family:"Unbounded",sans-serif;font-size:clamp(1.5rem,2.2vw,3.2rem);color:var(--gold);line-height:1}
.hero__stats span{font-size:.82rem;color:#a5a8b0}
/* services */
.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(260px,21vw,640px)),1fr))}
.svc{position:relative;display:flex;flex-direction:column;border-radius:calc(var(--r)*1.3);overflow:hidden;background:var(--dark-2);color:#fff;min-height:clamp(340px,26vw,720px);isolation:isolate;transition:.35s}
.svc__img{position:absolute;inset:0;z-index:-2}
.svc__img img{width:100%;height:100%;object-fit:cover;transition:.6s;opacity:.55}
.svc::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(14,15,18,.97) 25%,rgba(14,15,18,.3))}
.svc:hover{transform:translateY(-6px);color:#fff}
.svc:hover .svc__img img{transform:scale(1.06);opacity:.75}
.svc__ic{width:3.4rem;height:3.4rem;border-radius:1rem;background:var(--grad);display:grid;place-items:center;margin:clamp(20px,1.8vw,48px)}
.svc__ic .ico{width:1.7rem;height:1.7rem;color:#fff}
.svc__body{margin-top:auto;padding:clamp(20px,1.8vw,48px)}
.svc__body p{color:#b8bac1;font-size:.95rem}
.svc__more{display:inline-flex;align-items:center;gap:.4em;color:var(--gold);font-weight:700;font-size:.9rem}
.svc__price{position:absolute;top:clamp(20px,1.8vw,48px);right:clamp(20px,1.8vw,48px);background:rgba(255,255,255,.1);border:1px solid var(--line);padding:.35em .9em;border-radius:999px;font-size:.8rem;font-weight:700}
/* features */
.feat{background:#fff;border:1px solid #ece9e3;border-radius:calc(var(--r)*1.2);padding:clamp(22px,2vw,56px);transition:.3s;position:relative;overflow:hidden}
.section--light .feat{border-color:transparent}
.feat:hover{box-shadow:0 30px 60px -30px rgba(215,38,30,.35);transform:translateY(-4px)}
.feat__ic{width:3.2rem;height:3.2rem;border-radius:.9rem;display:grid;place-items:center;background:rgba(215,38,30,.08);color:var(--red);margin-bottom:1.2rem}
.feat__ic .ico{width:1.6rem;height:1.6rem}
.feat p{color:var(--muted);margin:0;font-size:.95rem}
.feat__n{position:absolute;right:1rem;top:.4rem;font-family:"Unbounded",sans-serif;font-size:3.6rem;font-weight:800;color:rgba(215,38,30,.06)}
.section--dark .feat{background:var(--dark-2);border-color:var(--line)}
.section--dark .feat p{color:#a5a8b0}
.section--dark .feat__ic{background:rgba(246,166,35,.12);color:var(--gold)}
/* split */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(var(--gap)*2.2);align-items:center}
.split--rev .split__media{order:2}
.split__media{position:relative}
.split__media img{border-radius:calc(var(--r)*1.5);width:100%;aspect-ratio:4/3;object-fit:cover}
.split__badge{position:absolute;left:-1rem;bottom:-1rem;background:var(--grad);color:#fff;padding:1.2rem 1.6rem;border-radius:var(--r);box-shadow:0 20px 40px -15px rgba(215,38,30,.7)}
.split__badge b{font-family:"Unbounded",sans-serif;font-size:2.2rem;display:block;line-height:1}
.split__txt{font-size:1.02rem}
.split__txt ul{list-style:none;padding:0}
.split__txt li{padding-left:1.8em;position:relative;margin:.5em 0}
.split__txt li::before{content:"";position:absolute;left:0;top:.45em;width:1em;height:1em;border-radius:50%;background:var(--grad);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/100% no-repeat}
/* steps */
.steps{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,clamp(220px,15vw,460px)),1fr));counter-reset:s}
.step{position:relative;padding-top:4.4rem}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;top:0;left:0;font-family:"Unbounded",sans-serif;font-size:2.6rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.step::after{content:"";position:absolute;top:1.6rem;left:5rem;right:0;height:1px;background:linear-gradient(90deg,rgba(246,166,35,.6),transparent)}
.step p{color:#a5a8b0;font-size:.95rem}
.section:not(.section--dark) .step p{color:var(--muted)}
/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:var(--gap)}
.stat{border-left:3px solid;border-image:var(--grad) 1;padding-left:1.4rem}
.stat b{display:block;font-family:"Unbounded",sans-serif;font-size:clamp(2.2rem,3.6vw,5.6rem);line-height:1;margin-bottom:.3rem}
.stat span{color:var(--muted)}
.section--dark .stat span{color:#a5a8b0}
/* cta */
.cta{position:relative;color:#fff;overflow:hidden;isolation:isolate;background:var(--dark)}
.cta__bg{position:absolute;inset:0;z-index:-2}.cta__bg img{width:100%;height:100%;object-fit:cover;opacity:.55}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,15,18,.92),rgba(163,21,15,.55))}
.cta__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:calc(var(--gap)*2);align-items:center}
.cta p{color:#d0d1d6;font-size:1.05rem}
.formbox{background:#fff;color:var(--ink);border-radius:calc(var(--r)*1.4);padding:clamp(22px,2.2vw,60px);box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.formbox h3{color:var(--ink)}
.formbox--dark{background:var(--dark-2);color:#fff;border:1px solid var(--line)}
.formbox--dark h3{color:#fff}
/* faq */
.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,clamp(320px,36vw,1100px)),1fr));gap:1rem var(--gap)}
.faq details{background:#fff;border-radius:var(--r);padding:1.2rem 1.5rem;border:1px solid #ece9e3;align-self:start}
.faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.6rem;line-height:1;color:var(--red);transition:.25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details div{color:var(--muted);padding-top:.8rem;font-size:.95rem}
/* reviews */
.revs{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(280px,24vw,700px)),1fr))}
.rev{background:var(--dark-2);border:1px solid var(--line);border-radius:calc(var(--r)*1.2);padding:clamp(22px,2vw,56px);display:flex;flex-direction:column}
.rev__stars{color:var(--gold);letter-spacing:.15em;margin-bottom:.8rem}
.rev p{color:#c9cbd1;flex:1}
.rev b{color:#fff;display:block}.rev small{color:#8b8e96}
/* page header */
.phead{background:var(--dark);color:#fff;position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(50px,7vw,200px) clamp(40px,4vw,120px)}
.phead__bg{position:absolute;inset:0;z-index:-2}.phead__bg img{width:100%;height:100%;object-fit:cover;opacity:.4}
.phead::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,15,18,.95),rgba(14,15,18,.5))}
.phead h1{max-width:22ch}
.phead p{color:#c9cbd1;font-size:1.1rem;max-width:60ch}
.crumbs{font-size:.82rem;color:#a5a8b0;margin-bottom:1.4rem}
.crumbs a{color:#d0d1d6}.crumbs a:hover{color:var(--gold)}
.content{font-size:1.04rem;max-width:min(100%,90ch)}
.content h2{font-size:clamp(1.4rem,2vw,2.6rem);margin-top:1.4em}
.content ul{padding-left:1.2em}
.content img{border-radius:var(--r)}
.layout-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,clamp(320px,26vw,640px));gap:calc(var(--gap)*2);align-items:start}
.layout-side aside{position:sticky;top:7rem}
/* contacts */
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:var(--gap);margin-bottom:var(--gap)}
.citem{display:flex;gap:1rem;align-items:flex-start;background:var(--light);border-radius:var(--r);padding:1.4rem}
.citem .ico{width:2.6rem;height:2.6rem;padding:.6rem;border-radius:.8rem;background:var(--grad);color:#fff}
.citem small{display:block;color:var(--muted);font-size:.8rem}
.citem b,.citem a{font-size:1.05rem;color:var(--ink);font-weight:700}
.map{border-radius:calc(var(--r)*1.3);overflow:hidden;min-height:clamp(320px,30vw,800px);background:var(--dark-3)}
.map iframe{width:100%;height:100%;min-height:inherit;border:0;display:block}
/* footer */
.site-footer{background:#08090b;color:#a5a8b0;padding-top:clamp(50px,5vw,140px);font-size:.92rem}
.ftop{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:calc(var(--gap)*1.5);padding-bottom:clamp(40px,4vw,100px)}
.site-footer h4{color:#fff;font-size:1rem;margin-bottom:1.2rem;font-family:"Manrope",sans-serif}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:.5em 0}
.site-footer a{color:#a5a8b0}.site-footer a:hover{color:var(--gold)}
.fbig{font-family:"Unbounded",sans-serif;font-size:clamp(1.3rem,1.6vw,2.4rem);color:#fff;font-weight:800;display:block;margin:.6rem 0}
.socials{display:flex;gap:.6rem;margin-top:1rem}
.socials a{width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:.75rem;font-weight:800;color:#fff}
.socials a:hover{background:var(--grad);border-color:transparent;color:#fff}
.fbot{border-top:1px solid var(--line);padding-block:1.4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem}
/* modal */
.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;background:rgba(8,9,11,.75);backdrop-filter:blur(6px);padding:1rem}
.modal.is-open{display:grid}
.modal__box{position:relative;width:min(100%,34rem);max-height:calc(100vh - 2rem);overflow:auto}
.modal__x{position:absolute;right:1rem;top:.6rem;background:none;border:0;font-size:2rem;cursor:pointer;color:var(--muted)}
.fab{position:fixed;right:clamp(14px,1.5vw,40px);bottom:clamp(14px,1.5vw,40px);z-index:40;width:3.6rem;height:3.6rem;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px -5px rgba(215,38,30,.7);animation:pulse 2.4s infinite}
.fab:hover{color:#fff}.fab .ico{width:1.6rem;height:1.6rem}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(215,38,30,.6)}70%{box-shadow:0 0 0 18px rgba(215,38,30,0)}100%{box-shadow:0 0 0 0 rgba(215,38,30,0)}}
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}
.logos{display:flex;flex-wrap:wrap;gap:1rem}
.chip{padding:.5em 1.1em;border-radius:999px;border:1px solid #e3e0da;font-weight:600;font-size:.9rem;background:#fff}
.section--dark .chip{background:transparent;border-color:var(--line);color:#d0d1d6}
/* responsive */
@media (max-width:1180px){
 .hero__in,.cta__in,.split,.sec-head,.layout-side{grid-template-columns:1fr}
 .split--rev .split__media{order:0}
 .layout-side aside{position:static}
 .ftop{grid-template-columns:1fr 1fr}
 .hdr-phone span{display:none}
}
@media (max-width:1439px){
 .burger{display:block;margin-left:auto}
 .nav{position:fixed;inset:0 0 0 auto;top:0;width:min(86vw,380px);background:var(--dark);padding:5rem 1.6rem 2rem;transform:translateX(100%);transition:.35s;overflow:auto;margin:0;border-left:1px solid var(--line)}
 .nav.is-open{transform:none}
 .nav ul{flex-direction:column;gap:.2rem}
 .nav a{font-size:1.1rem;padding:.6em 0}
 .nav .sub-menu{position:static;opacity:1;visibility:visible;transform:none;background:none;border:0;padding:0 0 0 1rem;box-shadow:none;min-width:0}
 .nav .sub-menu a{font-size:.95rem;color:#a5a8b0}
 .hdr .btn{display:none}
 .topbar{display:none}
 body.nav-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
 body.nav-open .burger span:nth-child(2){opacity:0}
 body.nav-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
 .burger{position:relative;z-index:60}
}
@media (max-width:600px){
 .ftop{grid-template-columns:1fr}
 .brand small{display:none}
 .hero{min-height:auto}
 .split__badge{left:.6rem;bottom:.6rem}
 .hdr-phone{font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
.screen-reader-text{position:absolute;left:-9999px}.screen-reader-text:focus{left:1rem;top:1rem;z-index:200;background:#fff;padding:.6rem 1rem}
h1,h2{hyphens:auto;overflow-wrap:break-word}
@media (max-width:600px){h1{font-size:clamp(1.55rem,7.4vw,2.2rem)}.hero__btns .btn{width:100%}}
h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.grid--svc{grid-template-columns:repeat(auto-fit,minmax(min(100%,clamp(280px,27vw,1000px)),1fr))}