.fma-home-security-widget { position: relative; overflow: hidden; padding: 104px 0; color: #fff; background: #071525; font-family: var(--fma-font-body, Arial, sans-serif); }
.fma-home-security-widget::before { position: absolute; inset: 0; background-image: linear-gradient(115deg, rgba(0, 54, 131, .86), rgba(7, 21, 37, .95)), repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 255, 255, .035) 19px 20px); content: ""; }
.fma-home-security__container { position: relative; z-index: 1; display: grid; width: min(1320px, calc(100% - 64px)); margin: 0 auto; grid-template-columns: 1.1fr .9fr; gap: 100px; align-items: center; }
.fma-home-security__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: #82c400; font-size: 10px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.fma-home-security__eyebrow span { width: 29px; height: 2px; background: currentColor; }
.fma-home-security-widget h2 { max-width: 590px; margin: 0 0 22px; color: #fff; font-family: var(--fma-font-display, Arial, sans-serif); font-size: clamp(34px, 3.8vw, 52px); font-weight: 600; line-height: 1.04; text-wrap: balance; }
.fma-home-security__copy > p:not(.fma-home-security__eyebrow) { max-width: 600px; margin: 0 0 30px; color: rgba(255, 255, 255, .70); font-size: 16px; }
.fma-home-security__copy > a { display: inline-flex; align-items: center; gap: 15px; min-height: 54px; padding: 14px 24px; color: #003683; background: #fff; font-family: var(--fma-font-display, Arial, sans-serif); font-size: 15px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; transition: transform .24s ease, background .24s ease, color .24s ease; }
.fma-home-security__copy > a:hover, .fma-home-security__copy > a:focus-visible { color: #fff; background: #003683; transform: translateY(-3px); }
.fma-home-security__media { position: relative; height: 390px; overflow: hidden; border: 1px solid rgba(130, 196, 0, .42); background: #002a66; }
.fma-home-security__media > img, .fma-home-security__placeholder { display: block; width: 100%; height: 100%; object-fit: cover; }
.fma-home-security__placeholder { background: #002a66; }
.fma-home-security__media > img { opacity: .72; }
.fma-home-security__media::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 42, 102, .10), rgba(7, 21, 37, .88)); content: ""; }
.fma-home-security__slider { position: absolute; z-index: 1; right: 20px; bottom: 20px; left: 20px; overflow: hidden; padding: 0; border: 1px solid rgba(130, 196, 0, .55); background: rgba(7, 21, 37, .82); backdrop-filter: blur(5px); }
.fma-home-security__item { min-height: 145px; padding: 20px 22px 0; }
.fma-home-security__item:not(.is-active) { display: none; }
.fma-home-security__item > span { display: block; margin-bottom: 17px; color: #82c400; font-size: 10px; font-weight: 800; letter-spacing: .13em; line-height: 1.35; text-transform: uppercase; }
.fma-home-security__item h3 { max-width: 320px; margin: 0 0 10px; color: #fff; font-family: var(--fma-font-display, Arial, sans-serif); font-size: 22px; font-weight: 600; line-height: 1.12; }
.fma-home-security__item p { max-width: 360px; margin: 0; color: rgba(255, 255, 255, .68); font-size: 12px; line-height: 1.5; }
.fma-home-security__controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 22px 17px; border-top: 1px solid rgba(255, 255, 255, .18); }
.fma-home-security__controls button { display: grid; width: 30px; height: 30px; place-items: center; color: #fff; border: 1px solid rgba(255, 255, 255, .32); background: transparent; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.fma-home-security__controls button:hover, .fma-home-security__controls button:focus-visible { color: #071525; border-color: #82c400; background: #82c400; }
.fma-home-security__controls .icon { width: 14px; height: 14px; }
.fma-home-security__controls > div { display: flex; flex: 1; align-items: center; justify-content: center; gap: 5px; }
.fma-home-security__controls i { display: block; width: 20px; height: 2px; border: 0; background: rgba(255, 255, 255, .38); }
.fma-home-security__controls i.is-active { width: 34px; background: #82c400; }
@media (max-width: 1024px) { .fma-home-security__container { gap: 55px; } }
@media (max-width: 760px) { .fma-home-security-widget { padding: 80px 0; } .fma-home-security__container { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 38px; } .fma-home-security__media { height: 330px; } .fma-home-security__slider { right: 14px; bottom: 14px; left: 14px; } .fma-home-security__controls { padding: 15px 17px 14px; } .fma-home-security__item { min-height: 151px; padding: 17px 17px 0; } }