@font-face{font-family:Iran;src:url(../fonts/IRANSansWeb-FaNum.woff2) format("woff2");font-display:swap}
@font-face{font-family:Iran;src:url(../fonts/IRANSansWeb-FaNum-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Solid;src:url(../fonts/solid.woff2) format("woff2");font-display:block}
@font-face{font-family:Brands;src:url(../fonts/brands.woff2) format("woff2");font-display:block}
.ico,.brand-icon{display:inline-block;font:normal 1em/1 Solid;text-rendering:auto}.brand-icon{font-family:Brands}
.pin::before{content:"\f3c5"}.clock::before{content:"\f017"}.phone::before{content:"\f095"}.down::before{content:"\f078"}.camera::before{content:"\f03d"}.bell::before{content:"\f0f3"}.gate::before{content:"\f52a"}.bars::before{content:"\f0c9"}.arrow::before{content:"\f060"}.shield::before{content:"\f3ed"}.home::before{content:"\f015"}.bag::before{content:"\f290"}.book::before{content:"\f02d"}.up::before{content:"\f062"}.close::before{content:"\f00d"}.tools::before{content:"\f7d9"}.whatsapp::before{content:"\f232"}.instagram::before{content:"\f16d"}
.search::before{content:"\f002"}.user::before{content:"\f007"}.cart::before{content:"\f07a"}
:root{color-scheme:light;--paper:#f8f5f2;--ink:#19191d;--muted:#5e5658;--red:#cb211c;--bright:#ff726a;--line:#e8dfdb;--radius:28px;--ease:cubic-bezier(.2,.75,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.85 Iran,Tahoma,sans-serif}body:has(dialog[open]){overflow:hidden}img{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}button,summary{cursor:pointer}button{font:inherit;color:inherit}button[hidden]{display:none}summary{list-style:none}summary::-webkit-details-marker{display:none}:focus-visible{outline:3px solid #e6463c;outline-offset:4px}h1,h2,h3,p{margin:0}h2{font-size:clamp(22px,3vw,31px);line-height:1.55}p{color:var(--muted)}.shell{width:min(1220px,calc(100% - 64px));margin-inline:auto}.skip{position:fixed;top:0;right:16px;transform:translateY(-120%);z-index:99;background:white;padding:8px}.skip:focus{transform:none}
.header{position:sticky;top:0;z-index:5;padding-bottom:8px;background:var(--paper)}.top{display:flex;justify-content:space-between;padding:8px 12px;color:var(--muted);font-size:14px}.top i{color:var(--red);margin-inline-end:5px}.navbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:11px 16px;box-shadow:0 7px 24px #27141709}.identity{display:flex;align-items:center;gap:10px;flex-shrink:0}.identity img,.footer img{object-fit:contain}.identity h1{font-size:19px;line-height:1.55}.desktop{display:flex;align-items:center;gap:clamp(10px,2vw,27px);font-size:15px;white-space:nowrap}.desktop>a,.mega>summary{padding-block:9px}.desktop>a:hover,.desktop>a[aria-current],.mega>summary:hover{color:var(--red)}.down{font-size:.72em;margin-inline-start:4px;transition:transform .25s}.mega[open]>summary .down,.drawer-nav details[open]>summary .down{transform:rotate(180deg)}.mega-panel{position:absolute;top:calc(100% + 8px);inset-inline:0;background:#fff;border:1px solid var(--line);box-shadow:0 15px 45px #22141424;border-radius:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:15px;animation:pop .25s var(--ease) both}.mega-panel>div{display:grid;gap:4px;background:var(--paper);border-radius:16px;padding:12px}.mega-panel a{padding:6px 8px;border-radius:9px}.mega-panel a:hover{background:white;color:var(--red)}.category{font-weight:700;color:var(--red)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 17px;border:1px solid transparent;border-radius:14px;font-weight:700;font-size:15px;min-height:48px;transition:background .2s,transform .2s}.button:hover{transform:translateY(-2px)}.dark{background:var(--ink);color:white}.primary{background:var(--red);color:#fff}.primary:hover{background:#a81917}.outline{border-color:#ffffff57;color:#fff}.outline:hover{background:#ffffff17}.menu-trigger,.drawer-close{display:none;border:0;background:#faeeeb;color:var(--red);border-radius:14px;width:46px;height:46px}
.hero{display:grid;grid-template-columns:1.04fr 1fr;align-items:center;gap:12px;padding:12px;margin-top:16px;background:radial-gradient(ellipse at 90% 110%,#51211f,transparent 57%),#19191d;border-radius:36px;color:#fff;overflow:hidden}.hero-copy{padding:clamp(16px,4vw,56px);animation:pop .55s var(--ease) both}.signal{display:inline-flex;align-items:center;gap:8px;border:1px solid #ffffff33;padding:5px 11px;border-radius:99px;color:#fff0ec;font-size:14px}.signal b{background:#ff776f;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 4px #ff776f25;animation:pulse 2.6s ease-out 3}.hero h2{font-size:clamp(33px,4.25vw,60px);line-height:1.42;letter-spacing:-.055em;margin:18px 0 12px}.hero em{font-style:normal;color:var(--bright)}.hero p{color:#e8dedd;max-width:37ch}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.hero-visual{position:relative;overflow:hidden;border-radius:27px;background:#21191b;display:grid;place-items:center}.hero-visual img{width:100%;aspect-ratio:1;object-fit:contain}.view-tag{position:absolute;bottom:13px;right:13px;display:flex;align-items:center;gap:9px;color:#fff;background:#1b191deb;border:1px solid #ffffff32;padding:8px 12px;border-radius:13px;font-size:14px}.view-tag i{color:var(--bright)}.scan{position:absolute;inset:10% 8%;border-radius:24px;pointer-events:none;overflow:hidden}.scan::after{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,#ff7364,transparent);box-shadow:0 0 20px 3px #ff382b65;animation:scan 3.8s ease-in-out 3 both}
.proof{margin-top:12px;display:flex;justify-content:space-between;gap:14px;background:#fff;border:1px solid var(--line);border-radius:21px;padding:15px clamp(13px,3vw,32px)}.proof>div{display:flex;align-items:center;flex-wrap:wrap;gap:9px}.proof i{color:var(--red)}.proof b{font:700 clamp(20px,3vw,29px)/1.4 system-ui}.proof small{color:var(--red)}
.section{margin-block:clamp(46px,7vw,86px)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-bottom:19px}.eyebrow{display:block;color:var(--red);font-size:14px;font-weight:700;margin-bottom:4px}.text-link{display:inline-flex;align-items:center;gap:8px;color:#a91d19;font-weight:700;font-size:15px}.text-link i{transition:transform .22s}.text-link:hover i{transform:translateX(-4px)}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.card{border:1px solid var(--line);background:#fff;border-radius:var(--radius);padding:8px;transition:transform .25s var(--ease),box-shadow .25s}.card:hover{transform:translateY(-5px);box-shadow:0 12px 25px #4d241517}.card-image{display:block;overflow:hidden;border-radius:20px;background:#f1ece9}.card-image img{width:100%;aspect-ratio:16/10;object-fit:contain}.card-body{padding:16px 15px}.card h3{font-size:21px;margin:8px 0 3px}.card p{margin-bottom:13px}.icon-box,.guides>a>.ico:first-child{display:inline-grid;place-items:center;width:39px;height:39px;border-radius:13px;background:#fbe8e5;color:#b7211d;flex:none}
.process{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:clamp(21px,5vw,52px);border-radius:32px;background:radial-gradient(ellipse at 90% 120%,#521e20,transparent 65%),var(--ink);color:#fff}.process .eyebrow{color:var(--bright)}.process p{color:#e3d6d6;margin:8px 0 17px}.process ol{list-style:none;padding:0;margin:0;display:grid;gap:8px}.process li{display:flex;align-items:center;gap:13px;padding:10px 13px;border:1px solid #ffffff30;border-radius:17px;color:#e8dddd}.process li b{color:var(--bright);font-size:21px}.process li strong{display:block;color:white}
.guides{display:grid;grid-template-columns:1fr 1fr;gap:12px}.guides a{display:flex;gap:11px;align-items:center;background:white;border:1px solid var(--line);border-radius:20px;padding:12px;transition:border-color .2s}.guides a:hover{border-color:var(--red)}.guides .arrow{margin-inline-start:auto;color:var(--red)}
.footer{background:#f0e9e4;border:1px solid var(--line);border-radius:30px;padding:clamp(16px,4vw,38px);margin-bottom:30px}.footer-main{display:grid;grid-template-columns:1.5fr 1fr;gap:18px}.footer-main h2{font-size:clamp(19px,2.4vw,25px);margin-top:9px}.contacts{display:grid;gap:3px;justify-items:start}.contacts i,.social i{color:var(--red);margin-inline-end:5px}.contacts a:hover,.social:hover{text-decoration:underline}.social{display:inline-block;margin-top:8px}.ap-footer-bottom{display:flex;flex-wrap:wrap;gap:7px 21px;justify-content:space-between;border-top:1px solid #d9ccc5;padding-top:14px;margin-top:20px;color:var(--muted);font-size:14px}.footer-credit a{color:#a41e1b;font-weight:700}
.float{position:fixed;z-index:4;bottom:max(16px,env(safe-area-inset-bottom));width:49px;height:49px;display:grid;place-items:center;border:0;border-radius:17px;box-shadow:0 5px 20px #20171832;font-size:21px;transition:transform .2s}.float:hover{transform:translateY(-4px)}.whatsapp-float{left:14px;background:#166746;color:white;font-size:27px;animation:pulse 2.7s 3}.up-float{right:14px;background:var(--ink);color:#fff}.mobile-tabs{display:none}
dialog{display:none}dialog[open]{display:block}dialog::backdrop{background:#1a1014a8;animation:fade .26s both}dialog.closing::backdrop{animation:fade-out .22s both}
@keyframes pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes scan{0%{opacity:0;transform:translateY(0)}12%{opacity:.75}90%{opacity:.75}100%{opacity:0;transform:translateY(420px)}}@keyframes pulse{70%{box-shadow:0 0 0 10px transparent}}@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes slide{from{transform:translateX(102%)}to{transform:none}}@keyframes slide-out{to{transform:translateX(102%)}}
.inner-page{min-height:60vh}.subhero{border-radius:28px;background:var(--ink);color:white;margin-top:12px;padding:clamp(18px,5vw,46px)}.subhero .eyebrow{color:var(--bright)}.subhero h1{font-size:clamp(24px,4vw,42px);margin:5px 0}.subhero p{color:#ede2e2}.subhero a{color:#fff;text-decoration:underline}.catalog article,.article{border:1px solid var(--line);background:#fff;border-radius:24px;padding:clamp(15px,3vw,28px);margin-bottom:14px}.catalog img{background:#f5f0ed;border-radius:18px;aspect-ratio:16/10;width:min(100%,350px);object-fit:contain}.catalog article dl{margin:9px 0 16px}.catalog dt{font-weight:700;margin-top:8px}.catalog dd{margin:0;color:var(--muted)}.article h2{margin-bottom:7px}.article+.article{margin-top:16px}
@media(max-width:1050px){.desktop,.header-call{display:none}.menu-trigger,.drawer-close{display:grid;place-items:center}.top{padding-inline:4px}.mobile-tabs{position:fixed;z-index:6;inset:auto 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fffcfa;border-top:1px solid var(--line);padding:4px 5px calc(4px + env(safe-area-inset-bottom));box-shadow:0 -5px 18px #25151b12}.mobile-tabs a{display:grid;justify-items:center;align-content:center;gap:2px;font-size:14px;min-height:52px;border-radius:13px}.mobile-tabs i{font-size:17px}.mobile-tabs a[aria-current]{color:#a91d19;background:#fbe9e6;font-weight:700}.float{bottom:calc(69px + env(safe-area-inset-bottom))}body{padding-bottom:calc(61px + env(safe-area-inset-bottom))}dialog{position:fixed;inset:0 0 0 auto;margin:0;width:min(100%,390px);height:100%;height:100dvh;max-height:none;max-width:none;border:0;border-radius:26px 0 0 26px;padding:0;background:#fffaf8;color:var(--ink);box-shadow:-12px 0 50px #23151834;overflow:hidden}dialog[open]{animation:slide .32s var(--ease) both}dialog[open].closing{animation:slide-out .23s var(--ease) both}.drawer-inner{height:100%;display:flex;flex-direction:column;padding:calc(15px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));gap:12px}.drawer-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:3px 2px 11px}.drawer-head h2{font-size:23px}.drawer-nav{min-height:0;overflow-y:auto;overscroll-behavior:contain;flex:1;display:block;padding:3px}.drawer-nav>a,.drawer-nav summary,.drawer-groups a{display:flex;align-items:center;gap:9px;padding:10px;border-radius:12px;min-height:45px}.drawer-nav>a,.drawer-nav>details{background:white;border:1px solid var(--line);border-radius:13px;margin-bottom:7px}.drawer-nav .down{margin-inline-start:auto}.drawer-nav i:not(.down){color:var(--red)}.drawer-groups{padding:0 8px 8px}.drawer-groups details{margin-bottom:5px;background:#f8eeeb;border-radius:12px}.drawer-groups a{padding-inline-start:17px;font-size:15px}.drawer-groups a:focus-visible{outline-offset:-3px}.drawer-action{flex-shrink:0}.drawer-nav details::details-content{block-size:0;overflow:clip;transition:content-visibility .25s allow-discrete,block-size .25s var(--ease)}.drawer-nav details[open]::details-content{block-size:auto}.drawer-nav{interpolate-size:allow-keywords}}
@media(max-width:720px){.shell{width:calc(100% - 24px)}.hero{grid-template-columns:1fr;border-radius:25px;padding:8px;gap:4px;margin-top:8px}.hero-copy{padding:16px 12px 13px}.hero h2{margin-block:12px 6px}.hero-visual{border-radius:20px}.actions{margin-top:16px}.proof{font-size:14px}.section-head{flex-wrap:wrap}.cards,.process,.guides{grid-template-columns:1fr}.card-image img{max-height:235px}.footer-main{grid-template-columns:1fr}.footer{margin-bottom:18px}.navbar{padding:7px 9px;border-radius:18px}.identity h1{font-size:17px}.identity img{width:42px;height:42px}.view-tag{font-size:13px}}
@media(max-width:360px){.actions>.button{width:100%}.top{font-size:13px}.proof{flex-direction:column}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.scan{display:none}}
.identity .brand-name{font-size:19px;font-weight:700;line-height:1.55}
@media(max-width:720px){.identity .brand-name{font-size:17px}}
/* Brand campaigns and product discovery */
:root{--paper:#f7f4f0;--red:#bf1e1b}
body{background:radial-gradient(ellipse at 8% 8%,#f5e5dc 0,transparent 32rem),var(--paper)}
.header{background:#f7f4f0ee}
.hero{border:1px solid #39262c;box-shadow:0 25px 65px -40px #64130d}
.hero h2{letter-spacing:-.04em}.hero-visual{isolation:isolate}
.hero-note{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.hero-note span{display:inline-flex;gap:8px;align-items:center;padding:7px 13px;background:#fff;border:1px solid var(--line);border-radius:99px;font-size:14px}.hero-note i{color:var(--red)}
.brand-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.brand-card{position:relative;isolation:isolate;overflow:hidden;display:grid;justify-items:start;align-content:start;gap:5px;min-height:246px;padding:clamp(20px,4vw,38px);border-radius:30px;color:#fff;transition:transform .25s var(--ease),box-shadow .25s}
.brand-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px #50221925}
.brand-card::before,.brand-card::after{content:"";position:absolute;z-index:-1;pointer-events:none;border:1px solid #fff4;border-radius:50%;aspect-ratio:1;width:min(49%,260px);left:-6%;bottom:-35%;transform:rotate(-25deg) scaleY(.65);box-shadow:0 0 0 15px #fff1,0 0 0 35px #fff1,0 0 0 60px #fff1}
.brand-card::after{left:1%;bottom:-30%;transform:rotate(25deg) scaleY(.65)}
.dahua{background:linear-gradient(135deg,#8d141b,#c52223 77%,#9a141b)}
.briton{background:linear-gradient(135deg,#23232c,#36324a 80%,#442536)}
.brand-kicker{font-size:14px;border:1px solid #fff7;border-radius:99px;padding:3px 10px}.brand-card strong{font:800 clamp(48px,7vw,83px)/1.08 system-ui;letter-spacing:-.07em}.brand-card strong span{color:#ffb7a6}.brand-copy{font-weight:700}.brand-cta{display:inline-flex;align-items:center;gap:9px;margin-top:10px;font-size:14px;background:#14081137;border:1px solid #fff4;border-radius:12px;padding:6px 11px}.brand-cta i{transition:transform .2s}.brand-card:hover .brand-cta i{transform:translateX(-4px)}
#services .card-image{position:relative}.card-image img,.product-image img{transition:transform .3s var(--ease)}.card:hover img,.product:hover img{transform:scale(.96)}.card-body{position:relative}.card-body .icon-box{margin-top:-32px;position:relative;box-shadow:0 0 0 5px white}
.category-rail{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}.category-rail a{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid #edd4cd;border-radius:99px;background:#fff5f1;color:#8b201b;font-size:14px;font-weight:700;transition:background .2s}.category-rail a:hover{background:#f8ded6}
.showcase .section-head p{margin-top:4px}.showcase{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.showcase>.section-head,.showcase>.category-rail,.product-group:first-of-type{grid-column:1/-1}.showcase>.section-head,.showcase>.category-rail{margin-bottom:0}
.product-group{min-width:0;padding:clamp(12px,2.5vw,22px);border:1px solid var(--line);border-radius:26px;background:#efe8e4}.product-group h3{font-size:21px;margin-bottom:10px}.product-group:target,.product:target,.product-specs dt:target{outline:2px solid var(--red);outline-offset:3px}
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:10px}.product-group:not(:first-of-type) .product-grid{grid-template-columns:1fr}.product{min-width:0;background:#fff;border:1px solid #e5d9d3;border-radius:21px;transition:border-color .2s,box-shadow .2s}.product:hover,.product[open]{border-color:#ca7770;box-shadow:0 8px 26px #582b1610}.product summary{display:block;padding:6px}.product-image{display:block;overflow:hidden;background:#f1ece9;border-radius:15px}.product-image img{width:100%;aspect-ratio:1.56;object-fit:contain;max-height:220px}.product-summary{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:9px}.product-summary small{display:block;color:var(--muted);font-size:14px}.product-summary strong{font-size:16px}.product-arrow{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:13px;color:#9e201c;background:#fae6df}.product-arrow .down{margin:0}.product[open] .down{transform:rotate(180deg)}.product-detail{padding:0 15px 14px}.product-detail p{margin-bottom:7px}.product-specs{margin:12px 0 0}.product-specs dt{font-weight:700}.product-specs dd{margin:0 0 7px;color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:720px){.brand-grid,.showcase{grid-template-columns:1fr}.brand-card{min-height:196px;border-radius:24px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.product-summary{padding:6px;align-items:end}.product-arrow{width:32px;height:32px}.product-summary strong{font-size:15px}}
@media(max-width:390px){.product-grid{grid-template-columns:1fr}}

.hero-carousel{min-width:0;align-self:stretch;display:grid;align-content:center;gap:7px}
.hero-stage{position:relative;overflow:hidden;border-radius:27px;aspect-ratio:1;background:#21191b}
.hero-slide{position:relative;height:100%;animation:slide-reveal .48s var(--ease) both}
.hero-slide[hidden],.slide-controls[hidden]{display:none}
.hero-slide img{width:100%;height:100%;object-fit:contain}
.hero-slide .view-tag:hover{border-color:#ff958c}
.slide-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-inline:2px}
.slide-picker{display:flex;gap:5px}
.slide-controls button{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;border:1px solid #ffffff45;background:#33262b;color:white;font-size:15px;line-height:1;transition:background .2s}
.slide-controls button:hover,.slide-controls button[aria-pressed="true"]{background:#a8201d;border-color:#ff9b93}
.slide-toggle span{font-size:13px}
@keyframes slide-reveal{from{opacity:.55;transform:scale(.99)}to{opacity:1;transform:none}}

.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.guide-grid .article{margin:0}.guide-grid img{width:100%;height:clamp(135px,24vw,224px);object-fit:contain;background:#eee7e3;border-radius:15px;margin-bottom:12px}
@media(max-width:720px){.hero-stage{border-radius:20px}.guide-grid{grid-template-columns:1fr}.slide-controls{padding-inline:3px}}

/* High-contrast opening and consistent type hierarchy */
:root{--paper:#f5f5f3;--ink:#17171c;--muted:#55545e;--red:#bb1d2b;--bright:#ff6570;--line:#e2e1e4}
body{background:var(--paper);font-size:16px;line-height:1.85}
.header{background:var(--paper)}.top{font-size:14px;color:#494853}
.navbar{background:#fff;border-color:#e6e5e8;box-shadow:0 6px 22px #17171c0b}
.identity h1{font-size:19px;font-weight:700}.desktop{font-size:15px}
.hero{position:relative;isolation:isolate;align-items:stretch;grid-template-columns:.94fr 1.06fr;gap:0;padding:0;border:1px solid #292731;border-radius:34px;background:#131218;box-shadow:0 28px 62px -43px #2a1b24}
.hero-copy{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(24px,4.2vw,66px);background:radial-gradient(ellipse at 75% 110%,#481827 0,transparent 66%);z-index:1}
.hero-copy::before{content:"";position:absolute;top:14%;right:0;width:3px;height:29%;border-radius:3px;background:linear-gradient(transparent,#ff5663,transparent);animation:edge-light .9s var(--ease) both}
.hero .signal{color:#ffd9dd;border-color:#ff87934a;background:#ff51631a;font-size:14px}
.hero h2{font-size:clamp(32px,4vw,56px);font-weight:700;line-height:1.42;letter-spacing:-.035em;margin:17px 0 10px;color:#fff}
.hero h2 em{color:#ff7884}.hero p{font-size:clamp(16px,1.5vw,18px);line-height:1.85;color:#e2dce4;max-width:38ch}
.hero .actions{margin-top:21px}.hero .primary{background:#c52235}.hero .primary:hover{background:#a91629}
.hero-index{display:flex;flex-wrap:wrap;align-items:center;gap:10px 19px;color:#e6dbe2;border-top:1px solid #ffffff2b;margin-top:24px;padding-top:12px;width:100%;font-size:14px}.hero-index strong{color:#ff8993;font-size:24px;margin-inline-end:4px}.hero-index a{display:inline-flex;align-items:center;gap:6px}.hero-index a:hover{color:#ff8993}
.hero-carousel{position:relative;display:block;align-self:center;margin:9px 0 9px 9px;overflow:hidden;border-radius:25px;background:#1a181e}.hero-stage{border-radius:inherit}.hero-slide .view-tag{right:12px;bottom:64px;background:#141218ed}
.slide-controls{position:absolute;inset:auto 9px 8px;z-index:2;padding:0;pointer-events:none}.slide-controls button{pointer-events:auto;background:#18151ded}.slide-controls button[aria-pressed="true"],.slide-controls button:hover{background:#a21c2a}
.section-head h2,.showcase h2{font-size:clamp(23px,3vw,34px);font-weight:700;color:var(--ink);letter-spacing:-.028em}.section-head p{font-size:16px}.eyebrow{font-size:14px;color:#9c2030}.process .eyebrow{color:#ff8a95}
.brand-card.dahua{background:linear-gradient(125deg,#701023,#bc2337)}.brand-card.briton{background:linear-gradient(125deg,#1a1926,#372e47)}
.card,.product{box-shadow:0 8px 22px -18px #28192544}.card p,.product-detail p,.article p{font-size:16px;color:var(--muted)}
.card h3,.product-group h3{font-size:21px;line-height:1.5}.product-summary strong{font-size:16px;color:var(--ink)}.product-summary small{color:#625f6b}
.card-image,.product-image,.guide-grid img{background:#ebe9ed}.product-group{background:#eae9ed}.category-rail a{background:#fff;border-color:#dfdce4;color:#8e1a2b}
.process{background:radial-gradient(ellipse at 82% 110%,#4f192a,transparent 60%),#17161e}.footer{background:#eae9ed}
@keyframes edge-light{from{opacity:0;transform:scaleY(.35)}to{opacity:1;transform:scaleY(1)}}
@media(max-width:720px){.identity h1{font-size:17px}.hero{grid-template-columns:1fr;border-radius:25px}.hero-copy{padding:20px 15px 14px}.hero-carousel{margin:0 7px 7px;border-radius:18px}.hero h2{font-size:clamp(29px,8vw,38px);margin-block:12px 7px}.hero-index{margin-top:15px;padding-top:7px}.hero .actions{margin-top:14px}}

.header-actions,.social-icons,.footer-social{display:flex;align-items:center;gap:8px}
.social-icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;border:1px solid transparent;font-size:21px;transition:transform .2s,background .2s}
.social-icon:hover{transform:translateY(-2px)}
.social-instagram{color:#9e2557;background:#f9e7f0;border-color:#f0cddf}.social-instagram:hover{background:#f3d4e4}
.social-whatsapp{color:#176446;background:#e4f4ea;border-color:#c5e6d3}.social-whatsapp:hover{background:#d1ebdc}
.footer-social{margin-top:11px;flex-wrap:wrap}.contacts .whatsapp{color:#176446}
.drawer-social{justify-content:center;padding-top:8px;border-top:1px solid var(--line);flex-shrink:0}
@media(max-width:1160px){.header-social{display:none}}
@media(max-width:1050px){.header-actions{display:none}}

/* Motion cues use transforms and opacity, with existing imagery for depth. */
.slide-progress{position:absolute;inset:auto 0 0;height:3px;z-index:2;background:#ff6976;transform:scaleX(0);transform-origin:right;pointer-events:none}
.hero-slide .view-tag{animation:tag-arrive .34s .12s var(--ease) both}.hero-slide .view-tag .arrow{transition:transform .18s}.hero-slide .view-tag:hover .arrow{transform:translateX(-4px)}
.hero-copy .signal,.hero-copy h2,.hero-copy p,.hero-copy .actions{animation:pop .38s var(--ease) both}.hero-copy h2{animation-delay:.06s}.hero-copy p{animation-delay:.11s}.hero-copy .actions{animation-delay:.16s}
.hero .primary .brand-icon,.whatsapp-float .brand-icon{transition:transform .22s var(--ease)}.hero .primary:hover .brand-icon,.whatsapp-float:hover .brand-icon{transform:rotate(-12deg) scale(1.12)}
@keyframes tag-arrive{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}


.brand-card:hover::after,.brand-card:focus-visible::after{opacity:.48;transform:scale(1.035)}
.card .icon-box,.product-arrow,.category-rail .ico{transition:transform .24s var(--ease)}
.card:hover .icon-box,.card:focus-within .icon-box{transform:translateY(-4px) rotate(-6deg)}.category-rail a:hover .ico{transform:translateY(-2px)}.product[open] .product-arrow{transform:rotate(-8deg)}
.product[open] .product-detail{animation:pop .22s var(--ease) both}
.process{position:relative;isolation:isolate;overflow:hidden}

.process-track{position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,transparent,#ff5267,transparent);transform:scaleX(0);transform-origin:right;pointer-events:none}
.process.entered .process-track{animation:draw-track .58s var(--ease) both}.process.entered li{animation:tag-arrive .3s var(--ease) both}.process.entered li:nth-child(2){animation-delay:.07s}.process.entered li:nth-child(3){animation-delay:.14s}
@keyframes draw-track{to{transform:scaleX(1)}}
.guide-grid .article{transition:border-color .2s}.guide-grid .article:hover,.guide-grid .article:focus-within{border-color:#c57780}
@media(prefers-reduced-motion:reduce){.hero-copy .signal,.hero-copy h2,.hero-copy p,.hero-copy .actions,.hero-slide .view-tag,.process.entered li,.process.entered .process-track,.product[open] .product-detail{animation:none}.slide-progress{display:none}}

.showcase{grid-template-columns:minmax(0,1fr)}
.showcase .product-group .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.showcase .product-group[hidden],.product-controls[hidden]{display:none}
.category-rail a[aria-selected="true"]{background:#a91c2c;color:#fff;border-color:#a91c2c}
.product-controls{display:none}
@media(max-width:720px){
 .showcase .product-group .product-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:#bd626c transparent;padding:4px 4px 9px}
 .product-grid>.product{flex:0 0 min(85%,340px);scroll-snap-align:start;scroll-margin-inline:4px}
 .product-controls{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:8px}
 .product-controls button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #ddd2d7;border-radius:14px;background:#fff;color:#9e2030}
 .product-controls button:first-child i{transform:rotate(180deg)}
 .product-controls button:disabled{opacity:.4;cursor:default}
 .product-count{font-size:14px;font-weight:700}
}

.top{align-items:center;gap:8px;padding:9px 12px;color:#55515b}
.top-location,.top-hours{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.top .ico{margin:0;color:var(--red);font-size:.95em}
.top-location strong{color:var(--ink)}
.top-hours strong{color:#9c2030;margin-inline-start:2px}
.top-hours::before{content:"";width:13px;height:1px;margin-inline-end:3px;background:linear-gradient(to left,#c45262,transparent)}
@media(max-width:420px){.top{padding-inline:3px;font-size:13px}.top-location,.top-hours{gap:4px}.top-hours::before{display:none}}

.whatsapp-float{isolation:isolate;animation:none}
.whatsapp-float::before,.whatsapp-float::after{content:"";position:absolute;inset:0;border:2px solid #25986b;border-radius:inherit;pointer-events:none;opacity:0;animation:whatsapp-wave 5s ease-out infinite}
.whatsapp-float::after{animation-delay:.23s}
.whatsapp-float .brand-icon{animation:whatsapp-nudge 5s ease-in-out infinite}
.whatsapp-float:hover .brand-icon,.whatsapp-float:focus-visible .brand-icon{animation:none;transform:rotate(-12deg) scale(1.12)}
@keyframes whatsapp-wave{0%{opacity:.65;transform:scale(1)}20%,100%{opacity:0;transform:scale(1.45)}}
@keyframes whatsapp-nudge{0%,20%,100%{transform:none}5%{transform:translateY(-3px) rotate(-10deg)}11%{transform:translateY(-1px) rotate(7deg)}}
@media(prefers-reduced-motion:reduce){.whatsapp-float::before,.whatsapp-float::after,.whatsapp-float .brand-icon{animation:none}}

/* Keep the document viewport separate from the horizontally scrolling product track. */
@media(max-width:1050px){
 html,body{max-inline-size:100%;overflow-x:clip}
 .mobile-tabs{width:100%;max-width:100%;inset-inline:0}
 .header .navbar,.header .top{min-inline-size:0}
}
@media(max-width:720px){
 .shell{width:auto;max-inline-size:100%;margin-inline:12px}
 .hero,.brand-grid,.showcase,.guide-grid,.process,.cards{grid-template-columns:minmax(0,1fr)}
 .showcase .product-group,.showcase .product-grid{min-inline-size:0;max-inline-size:100%}
 .showcase .product-group .product-grid{inline-size:100%;overflow-x:auto;overscroll-behavior-x:contain}
 .hero-stage,.hero-carousel,.section-head,.footer-main{min-inline-size:0}
 .top-location,.top-hours{white-space:normal;line-height:1.55}
}

/* Quiet security-inspired patterns, drawn entirely in CSS. */
body{background:#f5f5f3}
.header{background:var(--paper)}
.showcase,.process,#guides{position:relative;isolation:isolate}
.showcase::before,#guides::before{
 content:"";position:absolute;inset:0;z-index:-1;border-radius:26px;pointer-events:none;
 background:radial-gradient(circle,#a5203922 1px,transparent 1.5px) top left/14px 14px;
 mask-image:linear-gradient(105deg,#000,transparent 62%)
}
.showcase > .section-head,#guides > .section-head{padding:12px 4px 8px}
.process{padding:clamp(21px,5vw,52px);background:radial-gradient(ellipse at 82% 110%,#4f192a,transparent 60%),#17161e}
.process::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:repeating-radial-gradient(circle at 7% 60%,transparent 0 22px,#f59ca21c 23px 24px,transparent 25px 38px);
 mask-image:linear-gradient(90deg,#000,transparent 56%)
}
.brand-card::before,.brand-card::after{opacity:.48}
@media(max-width:720px){.showcase::before,#guides::before{mask-image:linear-gradient(110deg,#0007,transparent 58%)}}


.showcase > .section-head,#guides > .section-head{position:relative;isolation:isolate;overflow:hidden;min-height:158px;padding:16px clamp(12px,3vw,28px);border-radius:20px;background:#f0edf0}
.section-head>.section-watermark{position:absolute;inset:0 auto 0 0;width:60%;height:100%;object-fit:cover;object-position:center;opacity:.52;mask-image:linear-gradient(90deg,#000 24%,transparent 96%);pointer-events:none}
.section-head>.section-watermark+div{position:relative;z-index:1}
@media(max-width:720px){
 .showcase > .section-head,#guides > .section-head{min-height:130px}
 .section-head>.section-watermark{width:58%;opacity:.44}
}

.section-head>.section-watermark{z-index:0;opacity:.66;object-fit:contain;object-position:left center;mask-image:linear-gradient(90deg,#000 52%,transparent 100%)}
.showcase > .section-head,#guides > .section-head{min-height:170px}
@media(max-width:720px){.section-head>.section-watermark{opacity:.59;width:48%}.showcase > .section-head,#guides > .section-head{min-height:148px}}


/* A sparse lens motif in the margins around selected sections. */
body{background:#f5f5f3}
.header{background:var(--paper)}
#services,#guides{position:relative;isolation:isolate}
#services::after,#guides::after{content:"";position:absolute;z-index:-1;width:230px;height:230px;pointer-events:none;background:url(../images/security-pattern.svg) center/contain no-repeat}
#services::after{top:-94px;left:0}
#guides::after{bottom:-73px;right:0}
.section-head>.section-watermark{opacity:.27}
@media(max-width:720px){
 #services::after,#guides::after{width:144px;height:144px}
 #services::after{top:-65px}
 #guides::after{bottom:-46px}
 .section-head>.section-watermark{opacity:.23}
}

.showcase>.section-head{display:grid;grid-template-columns:minmax(0,1fr) clamp(86px,22vw,128px);gap:12px}
.showcase-photo{grid-column:2;grid-row:1;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:14px}
.showcase-photo+div{grid-column:1;grid-row:1;min-width:0}

/* A restrained architectural grid below the hero. */
.lower-content{position:relative;display:flow-root;isolation:isolate}
.lower-content::before,.lower-content::after{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
}
.lower-content::before{
 background:
  radial-gradient(ellipse 450px 225px at 9% 25%,#e7dce1,transparent),
  radial-gradient(ellipse 420px 235px at 94% 67%,#e4e1e7,transparent);
}
.lower-content::after{
 background-image:linear-gradient(to right,#6960711f 1px,transparent 1px),linear-gradient(to bottom,#6960711f 1px,transparent 1px);
 background-size:52px 52px;
 mask-image:radial-gradient(ellipse 61% 47% at 8% 34%,#000 5%,transparent 95%),radial-gradient(ellipse 55% 34% at 96% 73%,#000 5%,transparent 96%);
}
#services::after,#guides::after{content:none}
@media(max-width:720px){
 .lower-content::after{background-size:34px 34px}
}
.hero .signal b{position:relative;animation:none}
.hero .signal b::after{content:"";position:absolute;inset:-3px;border:1px solid #ff7884;border-radius:50%;opacity:0;animation:recording-ripple 2.4s ease-out 3}
@keyframes recording-ripple{0%{opacity:.8;transform:scale(.78)}46%,100%{opacity:0;transform:scale(1.7)}}
@media(prefers-reduced-motion:reduce){.hero .signal b::after{animation:none}}

@media(max-width:720px){
 .footer{padding:18px 16px;border-radius:22px}
 .footer-main{grid-template-columns:minmax(0,1fr);gap:16px}
 .footer-main h2{margin-top:6px;line-height:1.65}
 .footer-social{margin-top:10px}
 .footer-main .contacts{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px;align-items:center;justify-items:stretch;border-top:1px solid #d8d5dd;padding-top:13px}
 .contacts h3{grid-column:1/-1;font-size:17px}
 .contacts a,.contacts span{display:flex;align-items:center;gap:5px;min-width:0;font-size:14px}
 .contacts a{min-height:44px}
 .contacts i{margin:0;flex:none}
 .ap-footer-bottom{display:grid;grid-template-columns:1fr;gap:5px;margin-top:15px;padding-top:11px;border-color:#d8d5dd}
 .footer-credit{display:flex;gap:6px;align-items:baseline;justify-content:space-between}
 .footer-copyright{margin-top:5px;text-align:center;font-size:13px;overflow-wrap:anywhere}
}
@media(max-width:360px){.footer-main .contacts{grid-template-columns:1fr}}

/* Consistent, readable type scale across viewport widths. */
body{font-size:16px}
.identity h1{font-size:18px}
.hero h2{font-size:clamp(28px,3.4vw,42px);line-height:1.48}
h2,.section-head h2,.showcase h2{font-size:clamp(21px,2.35vw,28px);line-height:1.55}
.card h3,.product-group h3,.footer-main h2{font-size:clamp(18px,1.8vw,21px);line-height:1.6}
.drawer-head h2{font-size:21px}
.brand-card strong{font-size:clamp(37px,5vw,58px)}
.top,.eyebrow,.signal,.hero-index,.view-tag,.brand-kicker,.brand-cta,.product-summary small,.product-count,.footer-copyright{font-size:14px}
.hero p,.card p,.product-detail p,.article p{font-size:16px}
@media(max-width:720px){
 .identity h1{font-size:17px}
 .hero h2{font-size:clamp(27px,7vw,32px)}
 .top{font-size:14px}
}

#guides .guide-grid .article h2{font-size:clamp(17px,1.6vw,20px);line-height:1.65}

/* Premium 2026 visual pass */
:root{
 --paper:#f4f2f1;
 --surface:#ffffffd9;
 --ink:#17151a;
 --muted:#615b63;
 --red:#b7192c;
 --bright:#ff7c88;
 --line:#ded8da;
 --shadow:0 24px 70px -52px #2c1720;
}
body{
 background:
  radial-gradient(circle at 8% 21%,#bb263317 0 6%,transparent 24%),
  radial-gradient(circle at 94% 69%,#5b4a6712 0 7%,transparent 26%),
  linear-gradient(180deg,#f8f7f6 0,#f1eeee 52%,#f7f5f4 100%);
 background-attachment:fixed;
}
body::before{
 content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.7;
 background-image:linear-gradient(#7b66700b 1px,transparent 1px),linear-gradient(90deg,#7b66700b 1px,transparent 1px);
 background-size:54px 54px;
 mask-image:linear-gradient(180deg,transparent 7%,#000 24%,#000 82%,transparent 98%);
}
.lower-content::before,.lower-content::after{content:none}
.header{background:linear-gradient(180deg,#f8f7f6f5 72%,transparent);backdrop-filter:blur(10px)}
.navbar{border-color:#ffffff;background:#ffffffd9;box-shadow:0 10px 34px #2e17200d,0 1px 0 #fff inset;backdrop-filter:blur(16px)}
.hero{border:1px solid #ffffff19;background:radial-gradient(circle at 18% 120%,#702133 0,transparent 44%),linear-gradient(135deg,#121116,#211923);box-shadow:0 32px 80px -38px #35131f}
.hero::after{content:"";position:absolute;inset:auto -10% -42% auto;width:55%;aspect-ratio:1;border:1px solid #ff66731d;border-radius:50%;box-shadow:0 0 0 34px #ff667308,0 0 0 72px #ff667306;pointer-events:none}
.hero-copy,.hero-carousel{position:relative;z-index:1}
.hero-carousel{box-shadow:0 18px 42px #08070b55}
.section{position:relative}
.brands,.showcase,#guides{padding:clamp(18px,3vw,32px);border:1px solid #fff;border-radius:30px;background:linear-gradient(145deg,#ffffffd8,#f9f6f6b8);box-shadow:var(--shadow);backdrop-filter:blur(12px)}
.section-head{position:relative}
.section-head::after{content:"";position:absolute;right:0;bottom:-9px;width:42px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--red),transparent)}
.brand-card{border:1px solid #ffffff2e;box-shadow:0 22px 48px -34px #3a0c17}
.brand-card::before{opacity:.25}
.cards{gap:18px}
.card{border-color:#ebe5e6;border-radius:25px;padding:7px;box-shadow:0 16px 40px -34px #30131d;background:#fff}
.card:hover{transform:translateY(-7px);box-shadow:0 25px 55px -35px #451421}
.card-image{border-radius:19px;background:linear-gradient(145deg,#f4f1f0,#ebe7e8)}
.showcase>.section-head{background:linear-gradient(135deg,#211b23,#33242d);color:#fff;padding:20px 24px;border-radius:22px;box-shadow:0 20px 46px -34px #29101a}
.showcase>.section-head h2,.showcase>.section-head p{color:#fff}
.showcase>.section-head .eyebrow{color:#ff9da7}
.showcase-photo{filter:drop-shadow(0 13px 22px #09070a66)}
.category-rail{padding:7px;border:1px solid #e5dfe1;border-radius:18px;background:#eeebec}
.category-rail a{flex:1;justify-content:center;border:0;background:transparent;min-height:45px}
.category-rail a[aria-selected="true"]{background:#fff;color:var(--red);box-shadow:0 8px 20px #3d202b12}
.product-group{background:linear-gradient(150deg,#efedef,#e7e4e7);border-color:#fff;box-shadow:inset 0 1px 0 #fff}
.product{border-color:#fff;background:#ffffffed;box-shadow:0 13px 34px -30px #27121b}
.product:hover,.product[open]{border-color:#dcaeb5;box-shadow:0 20px 45px -32px #43141f}
.process{border:1px solid #ffffff1f;background:radial-gradient(circle at 12% 110%,#712035 0,transparent 46%),linear-gradient(135deg,#17151b,#28202a);box-shadow:0 30px 65px -46px #281019}
.process::after{content:"";position:absolute;inset:14px;border:1px solid #ffffff0d;border-radius:23px;pointer-events:none}
.guide-grid .article{border-color:#ebe5e6;box-shadow:0 18px 42px -35px #29141d;background:#fff}
.footer{border-color:#fff;background:linear-gradient(145deg,#eeeaeb,#e7e2e4);box-shadow:0 24px 60px -48px #2a111b}
.float{box-shadow:0 12px 28px #25141d33}
@media(max-width:720px){
 body::before{background-size:36px 36px;opacity:.5}
 .brands,.showcase,#guides{padding:14px;border-radius:23px}
 .category-rail{display:grid;grid-template-columns:1fr;border-radius:17px}
 .showcase>.section-head{padding:17px;border-radius:18px}
 .hero::after{width:78%;right:-28%;bottom:-22%}
}
@media(prefers-reduced-motion:reduce){body{background-attachment:scroll}}

/* Performance pass: avoid continuous repaint and large GPU layers. */
body{background-attachment:scroll}
.header,.navbar,.brands,.showcase,#guides{backdrop-filter:none;-webkit-backdrop-filter:none}
.header{background:#f8f7f6f2}
.navbar{background:#fff;box-shadow:0 7px 22px #2e17200b}
.brands,.showcase,#guides{background:#fbf9f9;box-shadow:0 14px 38px -34px #2c1720}
.hero{box-shadow:0 20px 46px -30px #35131f}
.hero::after{box-shadow:0 0 0 28px #ff667307}
.hero-carousel{box-shadow:0 10px 26px #08070b3d}
.card,.product,.guide-grid .article{box-shadow:0 8px 24px -24px #30131d}
.card:hover,.product:hover,.product[open],.guide-grid .article:hover{box-shadow:0 12px 30px -25px #451421}
.brand-card{box-shadow:0 12px 28px -24px #3a0c17}
.process{box-shadow:0 18px 42px -36px #281019}
.footer{box-shadow:0 14px 34px -32px #2a111b}
.brand-card::after,.process::before,.showcase>.section-head::before,#guides>.section-head::before{animation:none!important}
.lower-content>.section{content-visibility:auto;contain-intrinsic-size:auto 720px}
.hero-slide,.card,.product,.brand-card{will-change:auto}
@media(max-width:720px){
 body::before{display:none}
 .hero::after{display:none}
 .card:hover,.product:hover,.product[open]{transform:none}
}

/* Security-store atmosphere without a tiled grid. */
body{
 background:
  radial-gradient(ellipse 560px 310px at 3% 27%,#b7192c12,transparent 72%),
  radial-gradient(ellipse 620px 340px at 98% 71%,#32253210,transparent 74%),
  linear-gradient(180deg,#faf9f8 0,#f1eeee 52%,#f8f6f5 100%);
}
body::before{display:none}
.lower-content::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:
  linear-gradient(118deg,transparent 0 14%,#8e737c0b 14.1% 14.25%,transparent 14.35% 100%),
  linear-gradient(62deg,transparent 0 82%,#8e737c0a 82.1% 82.25%,transparent 82.35% 100%),
  radial-gradient(circle at 5% 35%,transparent 0 72px,#b7192c12 73px 74px,transparent 75px 105px,#b7192c09 106px 107px,transparent 108px),
  radial-gradient(circle at 96% 76%,transparent 0 92px,#5e4a5412 93px 94px,transparent 95px 132px,#5e4a5408 133px 134px,transparent 135px);
}
.lower-content::after{
 content:"";position:absolute;inset:12% 0 auto;height:1px;z-index:-1;pointer-events:none;
 background:linear-gradient(90deg,transparent,#b7192c26 18%,transparent 43%);
 box-shadow:0 760px 0 #66535d12,0 1520px 0 #b7192c12;
}
@media(max-width:720px){
 .lower-content::before{background:radial-gradient(circle at -5% 35%,transparent 0 48px,#b7192c10 49px 50px,transparent 51px),radial-gradient(circle at 106% 76%,transparent 0 58px,#5e4a5410 59px 60px,transparent 61px)}
 .lower-content::after{display:none}
}

/* Visible security motifs stay in the unused side gutters. */
html,body{overflow-x:clip}
main.shell::before,main.shell::after{
 content:"";position:absolute;z-index:0;pointer-events:none;width:250px;height:250px;border-radius:50%;opacity:.92;
 background:
  radial-gradient(circle,transparent 0 30%,#a8757e13 30.5% 31%,transparent 31.5% 47%,#a8757e0e 47.5% 48%,transparent 48.5%),
  linear-gradient(90deg,transparent 49.6%,#a8757e13 49.8% 50.2%,transparent 50.4%),
  linear-gradient(transparent 49.6%,#a8757e13 49.8% 50.2%,transparent 50.4%);
}
main.shell{position:relative;isolation:isolate}
main.shell>*{position:relative;z-index:1}
main.shell::before{left:-185px;top:28%}
main.shell::after{right:-184px;top:66%;transform:rotate(18deg)}
.lower-content{background:
 radial-gradient(circle 125px at -35px 19%,transparent 0 67%,#b7192c22 68% 69%,transparent 70%),
 radial-gradient(circle 145px at calc(100% + 48px) 48%,transparent 0 67%,#5b485120 68% 69%,transparent 70%),
 radial-gradient(circle 118px at -28px 81%,transparent 0 67%,#b7192c1b 68% 69%,transparent 70%);
}
@media(max-width:1300px){
 main.shell::before{left:-92px}main.shell::after{right:-92px}
}
@media(max-width:720px){
 main.shell::before,main.shell::after{width:118px;height:118px}
 main.shell::before{left:-78px;top:31%}main.shell::after{right:-78px;top:69%}
 .lower-content{background:radial-gradient(circle 72px at -35px 24%,transparent 0 68%,#b7192c0d 69% 70%,transparent 71%),radial-gradient(circle 78px at calc(100% + 38px) 59%,transparent 0 68%,#5b48510d 69% 70%,transparent 71%)}
}

/* Commerce navigation and panels */
.shop-actions{display:flex;align-items:center;gap:6px}
.mobile-shop-actions{display:none;align-items:center;gap:5px;margin-inline-start:auto}
.shop-icon{position:relative;display:grid;place-items:center;width:44px;height:44px;border:1px solid #e7e1e3;border-radius:13px;background:#fff;color:#2b252b;font-size:17px}
.shop-icon:hover{color:var(--red);border-color:#dfb6bd}
.cart-count{position:absolute;top:-5px;left:-5px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border:2px solid #fff;border-radius:99px;background:var(--red);color:#fff;font-size:11px;font-weight:700}
.footer-main{grid-template-columns:1.25fr .8fr 1fr}
.footer-shop{display:grid;align-content:start;gap:5px}.footer-shop h3{margin:0 0 5px}.footer-shop a,.footer-shop button{padding:0;border:0;background:transparent;color:#5e5658;text-align:right;font:inherit;cursor:pointer}.footer-shop a:hover,.footer-shop button:hover{color:var(--red)}
.mobile-tabs button{display:grid;justify-items:center;align-content:center;gap:2px;min-height:52px;border:0;border-radius:13px;background:transparent;font-size:13px}.mobile-tabs button i{font-size:17px}.mobile-cart-count{position:absolute;margin:0 23px 26px 0;display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--red);color:#fff;font-size:10px}
.shop-panel[hidden]{display:none}.shop-panel{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:#181019a8;animation:fade .18s both}
.shop-panel-card{width:min(680px,100%);max-height:min(760px,calc(100dvh - 32px));overflow:auto;padding:20px;border:1px solid #ffffff28;border-radius:25px;background:#fbf9f9;box-shadow:0 30px 80px #1209114d;animation:pop .22s var(--ease) both}
.compact-panel{width:min(440px,100%)}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:15px}.panel-head h2{font-size:23px}.panel-close{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:13px;background:#eee8ea;color:#7f1b2b}
.search-box{display:flex;align-items:center;gap:9px;padding:0 13px;border:1px solid #ded5d8;border-radius:15px;background:#fff}.search-box i{color:var(--red)}.search-box input{width:100%;height:52px;border:0;outline:0;background:transparent;font:inherit}
.search-results{display:grid;gap:8px;margin-top:13px}.search-result{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px;border:1px solid #ebe4e6;border-radius:15px;background:#fff}.search-result img{width:58px;height:52px;object-fit:contain;border-radius:10px;background:#f0ebed}.search-result strong{display:block}.search-result span{color:#a7192b;font-weight:700}.search-result a{padding:8px 10px;border-radius:10px;background:#19171c;color:#fff;font-size:13px}.empty-state{padding:28px;text-align:center;color:var(--muted)}
.panel-field{display:grid;gap:6px;margin:16px 0 10px;font-weight:700}.panel-field input{height:49px;border:1px solid #dcd3d6;border-radius:13px;padding:0 12px;font:inherit}.compact-panel small{display:block;margin-top:10px;color:var(--muted)}
.cart-items{display:grid;gap:8px}.cart-empty{padding:25px;text-align:center;color:var(--muted)}.cart-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:9px;padding:10px;border:1px solid #e8e1e3;border-radius:14px;background:#fff}.cart-item strong{font-size:15px}.cart-item span{color:#a7192b;font-weight:700}.cart-remove{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:10px;background:#f5e7e9;color:#a7192b}.cart-total{display:flex;justify-content:space-between;align-items:center;margin:15px 0;padding-top:13px;border-top:1px solid #e1dadd}.checkout-button{width:100%}
.add-cart-button{width:100%;min-height:41px;margin-top:7px;border:1px solid #d9cfd2;border-radius:12px;background:#fff;color:#8f1c2b;font-weight:700}.add-cart-button:hover{background:#f7e8eb}
body:has(.shop-panel:not([hidden])){overflow:hidden}
@media(max-width:720px){
 .footer-main{grid-template-columns:1fr}.footer-shop{grid-template-columns:1fr 1fr;gap:7px 14px;padding-block:13px;border-block:1px solid #d8d2d4}.footer-shop h3{grid-column:1/-1}
 .mobile-tabs{grid-template-columns:repeat(5,minmax(0,1fr))}.mobile-tabs a,.mobile-tabs button{font-size:13px}
 .shop-panel{align-items:end;padding:0}.shop-panel-card{max-height:88dvh;border-radius:24px 24px 0 0;padding:16px}.search-result{grid-template-columns:50px minmax(0,1fr)}.search-result img{width:50px}.search-result a{grid-column:1/-1;text-align:center}
}

.panel-search-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.panel-search-form .search-box{min-width:0}.search-panel-card{width:min(720px,100%)}
@media(max-width:1050px){
 .mobile-shop-actions{display:flex}
 .mobile-shop-actions .shop-icon{width:40px;height:40px;border-radius:12px}
 .mobile-shop-actions .cart-count{top:-5px;left:-5px}
}
@media(max-width:520px){
 .mobile-shop-actions{gap:3px}.mobile-shop-actions .shop-icon{width:36px;height:36px;font-size:15px}
 .identity h1{display:none}.navbar{gap:6px}.menu-trigger{width:40px;height:40px}
 .panel-search-form{grid-template-columns:1fr}.panel-search-form .button{width:100%}
}

/* Store pricing and service request */
.product-image{position:relative}
.sale-badge{position:absolute;top:9px;right:9px;z-index:1;padding:5px 9px;border-radius:10px;background:#b7192c;color:#fff;font-size:13px;font-weight:700;box-shadow:0 6px 15px #5b0d1b24}
.product-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 7px;margin-top:7px;color:var(--ink)}
.product-price del{width:100%;color:#958d91;font-size:13px;font-weight:400}
.product-price b{font-size:17px;color:#a81628}
.product-price small{font-size:13px;color:#6d656a}
.buy-button{width:100%;margin-top:9px;min-height:43px;padding:8px 12px;background:#19171c;color:#fff;border-radius:12px;font-size:14px}
.buy-button:hover{background:#b7192c}
.request-section{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(22px,5vw,58px);align-items:center;padding:clamp(22px,5vw,52px);border-radius:30px;background:linear-gradient(135deg,#17151b,#2b2029);color:#fff;box-shadow:0 18px 42px -36px #281019}
.request-copy p{color:#dcd5d9;margin-top:7px}
.request-copy .eyebrow{color:#ff9aa5}
.request-points{display:flex;flex-wrap:wrap;gap:7px;margin-top:19px}
.request-points span{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #ffffff20;border-radius:99px;color:#eee5e9;font-size:14px}
.request-points i{color:#ff8390}
.service-form{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:15px;border:1px solid #ffffff17;border-radius:22px;background:#ffffff0a}
.service-form label{display:grid;gap:5px;color:#eee7ea;font-size:14px;font-weight:700}
.service-form input,.service-form select,.service-form textarea{width:100%;border:1px solid #ffffff24;border-radius:12px;background:#ffffff0d;color:#fff;padding:11px 12px;font:inherit;outline:0}
.service-form select option{color:#17151b;background:#fff}
.service-form input::placeholder,.service-form textarea::placeholder{color:#bdb3b8}
.service-form input:focus,.service-form select:focus,.service-form textarea:focus{border-color:#ff7f8c;box-shadow:0 0 0 3px #ff7f8c1c}
.form-wide{grid-column:1/-1}
.service-form .button{border:0}
.form-note{margin:0;text-align:center;color:#bfb5ba;font-size:13px}
@media(max-width:720px){
 .request-section{grid-template-columns:1fr;padding:18px 14px;border-radius:23px}
 .service-form{grid-template-columns:1fr;padding:12px}
 .form-wide{grid-column:auto}
 .sale-badge{font-size:12px;padding:4px 7px}
}

/* The service form uses a light retail surface to contrast the dark process block. */
.request-section{gap:14px;padding:10px;border:1px solid #fff;background:#f0ebed;color:var(--ink);box-shadow:0 18px 44px -38px #2f1821}
.request-copy{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:clamp(23px,4vw,45px);border-radius:23px;background:linear-gradient(145deg,#a9152a,#cc293b);color:#fff;overflow:hidden;position:relative}
.request-copy::after{content:"";position:absolute;left:-70px;bottom:-100px;width:230px;height:230px;border:1px solid #ffffff25;border-radius:50%;box-shadow:0 0 0 28px #ffffff0a,0 0 0 57px #ffffff08}
.request-copy>*{position:relative;z-index:1}
.request-copy .eyebrow{color:#ffd4d9}.request-copy p{color:#fff1f3}.request-points span{border-color:#ffffff30;background:#ffffff0c;color:#fff}.request-points i{color:#fff}
.service-form{padding:clamp(15px,2.5vw,25px);border:1px solid #fff;border-radius:23px;background:#fff;box-shadow:0 14px 34px -30px #33151f}
.service-form label{color:#393137}.service-form input,.service-form select,.service-form textarea{border-color:#ded5d8;background:#f8f5f6;color:#211b20}
.service-form input::placeholder,.service-form textarea::placeholder{color:#91878c}.service-form input:focus,.service-form select:focus,.service-form textarea:focus{background:#fff}
.form-note{color:#766c71}
@media(max-width:720px){
 .request-section{padding:7px;gap:7px;background:#ece7e9}
 .request-copy{padding:22px 17px;border-radius:19px}
 .service-form{border-radius:19px}
}

/* Equal-height product cards across grids and the mobile slider. */
.showcase .product-grid{align-items:stretch}
.showcase .product{align-self:stretch;display:flex;flex-direction:column}
.showcase .product>summary{display:flex;flex:1;flex-direction:column}
.showcase .product-image{flex:none;aspect-ratio:1.56}
.showcase .product-image img{width:100%;height:100%;max-height:none;object-fit:contain}
.showcase .product-summary{flex:1;align-items:stretch}
.showcase .product-summary>span:first-child{display:flex;flex:1;min-height:112px;flex-direction:column}
.showcase .product-price{margin-top:auto;padding-top:7px}
.showcase .product-detail{margin-top:auto}
@media(max-width:720px){
 .showcase .product-grid{align-items:stretch}
 .showcase .product-grid>.product{height:auto}
 .showcase .product-summary{padding:9px;align-items:flex-start}
 .showcase .product-summary>span:first-child{min-height:118px}
}

/* Persistent live search in the store header. */
.header-search{position:relative;display:flex;align-items:center;gap:8px;flex:1;max-width:265px;height:46px;padding:0 10px 0 5px;border:1px solid #e4dde0;border-radius:14px;background:#f7f4f5}
.header-search>.ico{color:#9f1d2d}.header-search input{min-width:0;width:100%;border:0;outline:0;background:transparent;font:inherit;font-size:14px}.header-search>button{display:grid;place-items:center;width:36px;height:36px;flex:none;border:0;border-radius:10px;background:#19171c;color:#fff}
.header-search-results{position:absolute;top:calc(100% + 8px);right:0;left:0;z-index:12;display:grid;gap:4px;padding:7px;border:1px solid #e5dfe1;border-radius:16px;background:#fff;box-shadow:0 18px 42px #27151d24}
.header-search-results[hidden]{display:none}.header-search-results>a{display:grid;grid-template-columns:43px minmax(0,1fr);align-items:center;gap:8px;padding:6px;border-radius:11px}.header-search-results>a:hover{background:#f7edef}.header-search-results img{width:43px;height:40px;object-fit:contain;border-radius:8px;background:#f0ebed}.header-search-results strong,.header-search-results small{display:block}.header-search-results strong{font-size:13px}.header-search-results small{color:#a7192b;font-size:12px}
@media(max-width:1180px){.header-search{max-width:210px}.desktop{gap:11px}}
@media(max-width:1050px){.header-search{margin-inline-start:auto;max-width:340px}}
@media(max-width:720px){.header-search{display:none}}

/* Dedicated search results page. */
.search-page{min-height:65vh}.search-page-hero{padding:clamp(24px,5vw,50px);border-radius:30px;background:linear-gradient(135deg,#17151b,#34232d);color:#fff}.search-page-hero p{color:#ddd4d8;margin-top:6px}.search-page-form{display:flex;align-items:center;gap:9px;max-width:720px;margin-top:20px;padding:7px 7px 7px 14px;border-radius:16px;background:#fff}.search-page-form input{width:100%;height:46px;border:0;outline:0;font:inherit}.search-page-form button{flex:none}.search-page-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-block:24px 60px}.search-page-card{display:flex;flex-direction:column;padding:8px;border:1px solid #e6dfe1;border-radius:21px;background:#fff;box-shadow:0 10px 28px -25px #32151f}.search-page-card img{width:100%;aspect-ratio:1.55;object-fit:contain;border-radius:15px;background:#f0ebed}.search-page-card-body{display:flex;flex:1;flex-direction:column;padding:11px}.search-page-card h2{font-size:18px}.search-page-card .search-price{margin:8px 0;color:#a7192b;font-weight:700}.search-page-card .button{margin-top:auto}.search-summary{grid-column:1/-1;color:var(--muted)}
@media(max-width:720px){.search-page-hero{border-radius:22px}.search-page-form{display:grid;grid-template-columns:1fr}.search-page-form button{width:100%}.search-page-results{grid-template-columns:1fr 1fr}.search-page-card h2{font-size:16px}}
@media(max-width:420px){.search-page-results{grid-template-columns:1fr}}
body:has(.search-page) .mobile-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
.search-page-hero h1{margin:0;font-size:clamp(25px,3vw,36px);line-height:1.55}
@media(max-width:720px){body:has(.search-page) .navbar>.button{padding:8px 11px;font-size:13px}}

/* Lightweight product watermarks in unused side space. Reuses decoded WebP assets. */
.brands,#services,.showcase,.request-section,#guides{isolation:isolate}
.brands::before,#services::before,.showcase::before,.request-section::before,#guides::before{content:"";position:absolute;z-index:0;width:178px;height:178px;pointer-events:none;background-position:center;background-size:contain;background-repeat:no-repeat;opacity:.13}
.brands>* ,#services>* ,.showcase>* ,.request-section>* ,#guides>*{position:relative;z-index:1}
.brands::before{left:-118px;top:20%;background-image:url(../images/hero-small.webp)}
#services::before{right:-122px;top:33%;background-image:url(../images/hero-alarm-small.webp)}
.showcase::before{left:-125px;top:46%;background-image:url(../images/camera-product.webp);mask-image:none}
.request-section::before{right:-118px;top:29%;background-image:url(../images/hero-gate-small.webp)}
#guides::before{left:-116px;top:22%;background-image:url(../images/recorder-product.webp);mask-image:none}
@media(max-width:1300px){
 .brands::before,#services::before,.showcase::before,.request-section::before,#guides::before{width:148px;height:148px;opacity:.1}
 .brands::before,.showcase::before,#guides::before{left:-88px}
 #services::before,.request-section::before{right:-88px}
}
@media(max-width:720px){
 .brands::before,#services::before,.showcase::before,.request-section::before,#guides::before{width:96px;height:96px;opacity:.075}
 .brands::before,.showcase::before,#guides::before{left:-58px}
 #services::before,.request-section::before{right:-58px}
}

/* Smooth loading: no delayed section paint or simultaneous entrance effects. */
.lower-content>.section{content-visibility:visible;contain-intrinsic-size:none}
.hero-copy,.hero-copy .signal,.hero-copy h2,.hero-copy p,.hero-copy .actions,.hero-copy::before{animation:none!important}
.process.entered li,.process.entered .process-track,.product[open] .product-detail{animation:none!important}
.showcase-photo{filter:none}
.scan::after{box-shadow:none;animation-iteration-count:1}
.whatsapp-float::before,.whatsapp-float::after,.whatsapp-float .brand-icon{animation-iteration-count:infinite}
@media(max-width:1050px){
 .brands::before,#services::before,.showcase::before,.request-section::before,#guides::before{display:none}
}
@media(max-width:720px){.scan{display:none}}

/* Final layout rhythm: shared spacing at every breakpoint. */
:root{
 --section-gap:clamp(38px,5.2vw,66px);
 --surface-pad:clamp(18px,2.6vw,30px);
 --grid-gap:clamp(12px,1.5vw,18px);
 --control-height:46px;
}
.shell{width:min(1220px,calc(100% - clamp(24px,5vw,64px)))}
.header{padding-bottom:10px}
.top{min-height:39px;padding:7px 10px}
.navbar{min-height:68px;padding:10px 14px;gap:12px}
.lower-content{display:grid;gap:var(--section-gap);margin-top:var(--section-gap)}
.lower-content>.section{margin:0}
.hero{margin-top:12px}
.brands,.showcase,#guides{padding:var(--surface-pad)}
.section-head{gap:14px;margin-bottom:20px}
.section-head:last-child{margin-bottom:0}
.brand-grid,.cards,.guide-grid{gap:var(--grid-gap)}
.cards .card{height:100%}
.card-body{display:flex;min-height:195px;flex-direction:column;padding:15px}.card-body .text-link{margin-top:auto}
.showcase{gap:16px}
.category-rail{gap:7px;margin-bottom:0}
.product-group{padding:clamp(13px,2vw,21px)}
.product-grid{gap:var(--grid-gap)}
.process{gap:clamp(20px,3vw,34px);padding:clamp(23px,4vw,44px)}
.request-section{gap:12px}
.service-form{gap:12px}
.service-form input,.service-form select{min-height:var(--control-height)}
.footer{margin-top:var(--section-gap);margin-bottom:24px;padding:var(--surface-pad)}
.footer-main{gap:clamp(18px,3vw,36px)}
.ap-footer-bottom{margin-top:20px;padding-top:14px}
.shop-panel-card{padding:clamp(16px,2.4vw,22px)}
.panel-head{margin-bottom:16px}
@media(max-width:1050px){
 :root{--section-gap:44px;--surface-pad:20px;--grid-gap:14px}
 .navbar{min-height:60px;padding:8px 10px}
}
@media(max-width:720px){
 :root{--section-gap:32px;--surface-pad:14px;--grid-gap:11px;--control-height:48px}
 .shell{width:auto;margin-inline:12px}
 .header{padding-bottom:7px}
 .top{min-height:35px;padding:5px 3px}
 .navbar{min-height:56px;padding:7px 8px;gap:5px}
 .hero{margin-top:7px}
 .lower-content{gap:var(--section-gap)}
 .brands,.showcase,#guides{padding:var(--surface-pad)}
 .section-head{gap:9px;margin-bottom:14px}
 .brand-grid,.cards,.guide-grid{gap:var(--grid-gap)}
 .card-body{min-height:0;padding:14px 12px}
 .showcase{gap:12px}
 .product-group{padding:12px}
 .process{gap:18px;padding:20px 15px}
 .request-section{gap:7px;padding:7px}
 .footer{margin-top:var(--section-gap);margin-bottom:16px;padding:18px 15px}
 .footer-main{gap:16px}
 .ap-footer-bottom{margin-top:15px;padding-top:11px}
 .mobile-tabs a,.mobile-tabs button{min-height:52px}
}
@media(max-width:380px){
 .shell{margin-inline:10px}
 .mobile-shop-actions .shop-icon{width:34px;height:34px}
 .identity img{width:38px;height:38px}
}

.simple-search-card{width:min(540px,100%)}
.simple-search-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}
.simple-search-form .search-box{min-width:0}
@media(max-width:520px){.simple-search-form{grid-template-columns:1fr}.simple-search-form .button{width:100%}}

/* Decorative backgrounds use only lightweight minimal SVG marks. */
.showcase-photo,.section-watermark{display:none!important}
.showcase>.section-head,#guides>.section-head{display:block}
.brands::before,#services::before,.showcase::before,.request-section::before,#guides::before{
 width:156px;height:156px;opacity:.15;background-size:contain;background-repeat:no-repeat;background-position:center;
}
.brands::before,.showcase::before{background-image:url(../images/security-pattern.svg)}
#services::before,#guides::before{background-image:url(../images/security-sensor.svg)}
.request-section::before{background-image:url(../images/security-gate.svg)}
@media(max-width:1050px){
 .brands::before,#services::before,.showcase::before,.request-section::before,#guides::before{display:block;width:112px;height:112px;opacity:.1}
}
@media(max-width:720px){
 .brands::before,#services::before,.showcase::before,.request-section::before,#guides::before{width:82px;height:82px;opacity:.075}
}

/* Scroll-performance pass: avoid full-viewport repaint layers. */
body::before{display:none!important}
html{min-height:100%;scroll-behavior:auto;background:#f5f5f3;overscroll-behavior-y:none}
body{min-height:100vh;background-color:#f5f5f3;overscroll-behavior-y:none}
@supports(height:100dvh){body{min-height:100dvh}}