:root{--red:#e72c25;--ink:#15212b;--muted:#5c6972;--line:#dee3e7;--navy:#101c27;--light:#f4f6f7;--white:#fff;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #ef7e48;outline-offset:5px}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.shell{width:min(1280px,88%);margin-inline:auto}.skip{position:fixed;top:-100px;left:16px;z-index:100;padding:12px 20px;background:white}.skip:focus{top:10px}.header{height:94px;background:#fff;position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(0,0,0,.05)}.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:40px}.brand{display:block;width:245px;flex-shrink:0}.brand img{width:100%;height:auto;object-fit:contain}.header nav{display:flex;align-items:center;gap:34px;font-size:14px;font-weight:600}.header nav a{transition:color .2s}.header nav a:hover{color:var(--red)}.header nav .nav-contact{background:var(--ink);color:white;padding:12px 23px}.header nav .nav-contact:hover{background:var(--red)}.menu-button{display:none}.hero{position:relative;min-height:640px;background:#0b1622;overflow:hidden;color:white}.hero-art{position:absolute;right:0;top:0;width:75%;height:100%}.hero-art img{width:100%;height:100%;object-fit:cover;object-position:70% center}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0b1622 3%,rgba(11,22,34,.97) 26%,rgba(11,22,34,.7) 45%,rgba(11,22,34,.12) 72%,rgba(11,22,34,.14)),linear-gradient(0deg,rgba(11,22,34,.55),transparent 35%)}.hero-inner{position:relative;min-height:640px;display:flex;align-items:center}.hero-copy{padding-block:70px;width:540px;max-width:56%;position:relative;z-index:3}.eyebrow{display:flex;align-items:center;gap:12px;font-size:12px;line-height:1.4;font-weight:700;letter-spacing:.14em;color:var(--muted);margin-bottom:23px}.eyebrow>span{width:24px;height:2px;background:var(--red);flex-shrink:0}.eyebrow.light{color:#bdc8cf}h1{font-size:clamp(54px,5.4vw,86px);font-weight:750;line-height:1.06;letter-spacing:-.055em}h1 em{font-style:normal;color:#fc5149}.hero-description{font-size:18px;line-height:1.7;color:#c1cbd1;margin-top:28px;max-width:420px}.hero-actions{margin-top:34px;display:flex;align-items:center;gap:27px}.button{min-height:51px;padding:14px 24px;border:0;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:700;line-height:1.5;transition:background .2s,transform .2s}.button.red{background:var(--red);color:#fff}.button.red:hover{background:#c9211c;transform:translateY(-1px)}.text-link{font-size:14px;font-weight:600;border-bottom:1px solid #65717a;padding-block:7px}.text-link:hover{border-color:var(--red)}.hero-bottom{display:flex;align-items:center;gap:17px;margin-top:50px;font-size:12px;font-weight:600;letter-spacing:.13em;color:#a9b9c3}.hero-bottom i{width:3px;height:3px;background:#b6c1c9;border-radius:50%}.hero-caption{position:absolute;right:0;bottom:40px;display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.1em;color:#d5d9dc}.caption-line{width:32px;height:2px;background:var(--red)}.image-note{position:absolute;right:14px;bottom:8px;font-size:12px;color:#c3cbd2}.trust-strip{background:var(--light);border-bottom:1px solid var(--line)}.trust-inner{min-height:90px;display:flex;align-items:center;gap:22px}.trust-inner>p{font-size:16px;font-weight:700}.trust-inner>span{font-size:14px;color:var(--muted)}.phone-top{display:flex;align-items:center;gap:12px;margin-left:auto;font-size:17px;font-weight:700}.phone-top svg{width:19px;height:19px;color:var(--red)}.section{padding-block:95px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:45px;margin-bottom:48px}.section-heading h2,h2{font-size:clamp(36px,3.4vw,52px);letter-spacing:-.045em;line-height:1.14;font-weight:700}.section-heading>p{font-size:16px;line-height:1.8;color:var(--muted);margin-bottom:5px;min-width:290px}.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.service{padding:30px 28px 0;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;transition:border-color .25s,box-shadow .25s}.service:hover{border-color:#adbac4;box-shadow:0 12px 30px #101c2709}.service-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:31px}.service-top>span{font-size:12px;color:#929fa7;font-weight:600}.icon{width:35px;height:35px;color:var(--red);stroke-width:1.4}.service h3{font-size:26px;line-height:1.18;letter-spacing:-.03em;margin-bottom:17px}.service>p{color:var(--muted);font-size:16px;line-height:1.8;margin-bottom:25px;flex-grow:1}.service details{border-top:1px solid var(--line);font-size:14px}.service summary{padding-block:18px;list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:600}.service summary span,.faq-list summary span{font-size:22px;font-weight:400;color:var(--red);line-height:1;transition:transform .2s}.service details[open] summary span,.faq-list details[open] summary span{transform:rotate(45deg)}summary::-webkit-details-marker{display:none}.service details>div{font-size:16px;color:var(--muted);padding-bottom:23px;line-height:1.7}.secondary-services{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:24px;padding:28px 0 0}.secondary-services article{display:flex;gap:21px;align-items:center;border-top:1px solid var(--line);padding-top:27px}.icon.small{width:30px;height:30px;flex-shrink:0}.secondary-services h3{font-size:17px;line-height:1.35;margin-bottom:5px}.secondary-services p{font-size:14px;color:var(--muted)}.demo-section{background:var(--navy);padding-block:86px 95px;color:white}.dark-heading>p{color:#aebac4}.demo-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:0;min-height:420px}.demo-scene{position:relative;min-height:420px;overflow:hidden;background:#142736}.demo-scene>img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:76% center}.scene-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,15,24,.45),transparent 40%)}.scene-label{position:absolute;top:24px;left:25px;font-size:12px;letter-spacing:.12em;color:#d0d7dd}.scene-status{position:absolute;bottom:24px;left:25px;border:1px solid #92baaf70;padding:9px 13px;background:#0d2028bb;display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;backdrop-filter:blur(8px)}.scene-status>span{width:7px;height:7px;background:#73c6a9;border-radius:50%}.demo-scene.alarm .scene-status{color:#ffb5b0;border-color:#ee5b5466;background:#351318bb}.demo-scene.alarm .scene-status>span{background:#fc5b53}.sensor{position:absolute;left:72%;top:41%;width:14px;height:14px;transform:translate(-50%,-50%);pointer-events:none}.sensor>span{position:absolute;inset:0;border-radius:50%;background:#dbebe6;border:3px solid white;box-shadow:0 0 0 7px #ddeee32a}.sensor i{position:absolute;inset:-12px;border:1px solid #ed2922;border-radius:50%;opacity:0}.alarm .sensor>span{background:#ff554c;border-color:#ffbbb5;box-shadow:0 0 22px #ed2922}.alarm .sensor i{animation:signal-ring 1.8s ease-out infinite}.alarm .sensor i:last-child{animation-delay:.9s}@keyframes signal-ring{0%{transform:scale(.3);opacity:.9}100%{transform:scale(2.5);opacity:0}}.demo-watermark{position:absolute;bottom:9px;right:12px;font-size:12px;color:#d2d9df}.demo-notification{position:absolute;top:67px;right:24px;width:275px;background:#f7f9fa;color:var(--ink);display:flex;align-items:center;gap:13px;padding:16px 18px;border-left:3px solid var(--red);box-shadow:0 10px 30px #0003;opacity:0;transform:translateY(-10px);transition:opacity .5s,transform .5s}.demo-notification.show{opacity:1;transform:none}.notification-icon{width:27px;color:var(--red);flex-shrink:0}.notification-icon svg{width:24px;height:24px}.demo-notification small{font-size:12px;color:var(--muted);letter-spacing:.08em}.demo-notification strong{display:block;font-size:14px;line-height:1.5}.demo-notification div>span{font-size:12px;color:var(--muted);line-height:1.4;display:block}.demo-panel{border:1px solid #ffffff15;padding:31px 36px;background:#16232e}.panel-label{font-size:12px;letter-spacing:.14em;font-weight:700;color:#9faeb9}.demo-steps{list-style:none;padding:0;margin:23px 0 28px}.demo-steps li{display:flex;gap:18px;align-items:flex-start;margin-bottom:23px;opacity:.57;transition:opacity .4s}.demo-steps li.active{opacity:1}.demo-steps li>span{font-size:12px;font-weight:600;color:#9eaab2;min-width:30px;padding-top:3px}.demo-steps li.active>span{color:#ff665f}.demo-steps h3{font-size:16px;margin-bottom:2px}.demo-steps p{font-size:14px;color:#afbac3;line-height:1.6}.demo-panel .button{width:100%}.demo-panel .button svg{width:17px;height:17px;fill:currentColor;stroke:none}.demo-hint{font-size:12px;color:#98a9b6;line-height:1.7;margin-top:16px}.process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}.process-number{display:block;color:#aab5bd;font-size:48px;line-height:1;margin-bottom:26px;font-weight:400;letter-spacing:-.06em}.process-number>span{color:var(--red);margin-left:7px;font-size:32px;font-weight:300}.process-grid h3{font-size:19px;letter-spacing:-.015em;line-height:1.4;margin-bottom:12px}.process-grid p{color:var(--muted);font-size:16px;line-height:1.8;max-width:330px}.faq-section{border-top:1px solid var(--line);padding-block:70px 90px;display:grid;grid-template-columns:1fr 1.6fr;gap:70px}.faq-list details{border-bottom:1px solid var(--line)}.faq-list details:first-child{border-top:1px solid var(--line)}.faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:22px;cursor:pointer;font-size:16px;font-weight:600}.faq-list details p{font-size:16px;line-height:1.8;color:var(--muted);padding:0 35px 23px 0}.contact-section{background:#eef2f4;padding-block:84px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}.contact-copy>p:not(.eyebrow){color:var(--muted);margin-block:23px 25px}.contact-phone{display:block;font-size:34px;letter-spacing:-.025em;font-weight:700;line-height:1.3}.contact-phone:hover,.contact-email:hover{color:var(--red)}.contact-email{font-size:17px;display:inline-block;margin-top:9px;border-bottom:1px solid #b8c1c7}.contact-address{margin-top:29px;display:flex;flex-direction:column;gap:3px;color:var(--muted);font-size:14px}.contact-address strong{color:var(--ink);font-weight:600}.inquiry{background:#fff;padding:32px 36px}.inquiry h3{font-size:22px;letter-spacing:-.025em;margin-bottom:22px}.field{margin-bottom:16px}.field label{display:block;font-size:14px;font-weight:600;margin-bottom:7px}.field label span{color:var(--muted);font-weight:400}.field input,.field select,.field textarea{width:100%;background:#fff;border:1px solid #ced6dc;padding:11px 13px;color:var(--ink);font-size:16px;border-radius:0}.field textarea{resize:vertical;min-height:98px}.field input::placeholder,.field textarea::placeholder{color:#78858e}.inquiry .button{width:100%;margin-top:3px}.form-note{font-size:12px;line-height:1.7;color:var(--muted);margin-top:14px}.form-feedback{font-size:14px;color:var(--ink);margin-top:10px}.form-feedback a{color:var(--red);text-decoration:underline}.footer{display:flex;align-items:center;justify-content:space-between;gap:30px;min-height:114px}.footer .brand{width:195px}.footer p{font-size:14px;color:var(--muted)}.footer>span{font-size:12px;color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(min-width:1600px){.hero-art{width:70%}.hero-copy{padding-block:88px}.hero,.hero-inner{min-height:700px}}@media(max-width:1100px){.shell{width:90%}.header nav{gap:20px}.brand{width:210px}.hero-copy{max-width:59%}.hero-actions{gap:20px}.hero-caption{display:none}.trust-inner{gap:18px}.trust-inner>span{display:none}.service{padding:25px 22px 0}.service h3{font-size:24px}.demo-panel{padding:28px 24px}.contact-grid{gap:60px}.section-heading>p{min-width:260px}}@media(max-width:760px){html{scroll-padding-top:76px}.header{height:76px}.brand{width:191px}.menu-button{display:flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;background:transparent;border:1px solid var(--line);padding:10px}.menu-button span{height:2px;width:100%;background:var(--ink);transition:transform .2s}.menu-button[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}.menu-button[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}.header nav{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:white;border-bottom:1px solid var(--line);padding:12px 5% 20px;box-shadow:0 14px 20px #15212b10}.header nav.open{display:flex}.header nav a{padding:13px 8px}.header nav .nav-contact{margin-top:7px;text-align:center}.hero,.hero-inner{min-height:730px}.hero-inner{align-items:flex-start}.hero-copy{padding-top:49px;max-width:none;width:100%}.eyebrow{font-size:12px;margin-bottom:20px}h1{font-size:58px;line-height:1.03}.hero-description{font-size:16px;max-width:350px;margin-top:23px;line-height:1.65}.hero-actions{gap:23px;margin-top:26px;flex-wrap:wrap}.hero-bottom{margin-top:29px;font-size:12px;gap:15px}.hero-art{width:100%;height:65%;top:auto;bottom:0}.hero-art img{object-position:80% center}.hero-shade{background:linear-gradient(180deg,#0b1622 0%,#0b1622 29%,rgba(11,22,34,.88) 43%,rgba(11,22,34,.2) 67%,rgba(11,22,34,.14))}.trust-inner{min-height:78px;justify-content:space-between;gap:12px}.trust-inner>p{font-size:14px;max-width:150px;line-height:1.6}.phone-top{font-size:16px;gap:9px}.section{padding-block:62px}.section-heading{align-items:flex-start;flex-direction:column;gap:23px;margin-bottom:31px}.section-heading>p{font-size:16px;min-width:0;line-height:1.7}.section-heading>p br{display:none}h2,.section-heading h2{font-size:36px}.services{grid-template-columns:1fr;gap:17px}.service{padding:27px 25px 0}.service-top{margin-bottom:21px}.service h3{font-size:26px}.service h3 br{display:none}.service>p{font-size:16px}.secondary-services{grid-template-columns:1fr;gap:22px;padding-top:0;margin-top:26px}.secondary-services article{padding-top:23px}.secondary-services h3{font-size:16px}.secondary-services p{font-size:14px}.demo-section{padding-block:62px}.demo-layout{grid-template-columns:1fr}.demo-scene{min-height:300px;aspect-ratio:1.25}.demo-panel{padding:27px 25px}.demo-steps{display:flex;flex-direction:column;gap:20px;margin-block:22px 27px}.demo-steps li{margin:0}.scene-label{top:18px;left:19px;font-size:12px}.scene-status{left:19px;bottom:22px}.demo-notification{width:248px;right:17px;top:55px;padding:13px 14px}.process-grid{grid-template-columns:1fr;gap:31px}.process-grid article{display:grid;grid-template-columns:58px 1fr;column-gap:16px}.process-number{grid-row:span 2;font-size:39px;line-height:1.2;margin-bottom:0}.process-number>span{font-size:27px;margin-left:5px}.process-grid h3{font-size:18px;margin-bottom:8px}.process-grid p{max-width:none;font-size:16px}.faq-section{padding-block:48px 60px;grid-template-columns:1fr;gap:27px}.faq-section h2 br{display:none}.faq-list summary{font-size:16px;line-height:1.6}.contact-section{padding-block:57px}.contact-grid{grid-template-columns:1fr;gap:35px}.contact-phone{font-size:32px}.inquiry{padding:27px 23px}.field label{font-size:14px}.field input,.field select,.field textarea{font-size:16px}.footer{padding-block:31px;min-height:0;flex-wrap:wrap;justify-content:flex-start;gap:20px}.footer .brand{width:174px}.footer p{font-size:12px;flex-grow:1;text-align:right}.footer>span{width:100%}.image-note{font-size:12px}.button{font-size:14px;padding-inline:20px}}@media(max-width:380px){h1{font-size:51px}.hero-actions{gap:17px}.button{padding-inline:16px}.text-link{font-size:14px}.hero,.hero-inner{min-height:730px}.trust-inner>p{max-width:115px}.phone-top{font-size:14px}.phone-top svg{width:16px}.footer p{width:100%;text-align:left}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Arrival of the private-security patrol in the alarm demonstration. */
.demo-steps{margin:20px 0 26px}.demo-steps li{margin-bottom:16px}.demo-steps li:last-child{margin-bottom:0}
.patrol-vehicle{position:absolute;left:36%;bottom:0;width:62%;max-width:430px;z-index:3;opacity:0;transform:translateX(-190%);pointer-events:none}
.patrol-vehicle img{width:100%;height:auto;filter:drop-shadow(0 12px 8px rgba(0,0,0,.4))}
.patrol-en-route .patrol-vehicle{animation:patrol-arrival 3.2s cubic-bezier(.22,.61,.36,1) both}
.patrol-arrived .patrol-vehicle{opacity:1;transform:translateX(0)}
.scene-status{z-index:5;max-width:calc(100% - 50px)}.demo-notification{z-index:6}.scene-label{z-index:4}.demo-watermark{z-index:5}
.patrol-en-route .scene-status{color:#ffe0a6;border-color:#e6b04b80;background:#2c2316dd}.patrol-en-route .scene-status>span{background:#f0ba57}
.patrol-arrived .scene-status{color:#c1ebdb;border-color:#92baaf70;background:#0d2028dd}.patrol-arrived .scene-status>span{background:#73c6a9}
@keyframes patrol-arrival{0%{transform:translateX(-190%);opacity:0}8%{opacity:1}100%{transform:translateX(0);opacity:1}}
@media(max-width:760px){.demo-steps{gap:15px}.demo-steps li{margin:0}.patrol-vehicle{left:30%;width:68%;bottom:4%}.scene-status{max-width:calc(100% - 38px);font-size:12px}}
@media(prefers-reduced-motion:reduce){.patrol-en-route .patrol-vehicle{animation:none;opacity:1;transform:none}}

/* Keep the information panels clear of the lamp on the house facade. */
.scene-status{top:56px;bottom:auto;left:25px;right:auto}
.demo-notification{top:108px;left:25px;right:auto}
.house-beacon{position:absolute;z-index:2;display:block;pointer-events:none;border-radius:35%;background:#ff4235;opacity:0;transform:translate(-50%,-50%) rotate(-8deg);box-shadow:0 0 5px 2px #ff392cee,0 0 22px 10px #f72c2055}
.alarm .house-beacon{opacity:1;animation:house-beacon-flash 1.2s steps(1,end) infinite}
@keyframes house-beacon-flash{0%,22%,48%,100%{opacity:.08;box-shadow:0 0 3px 1px #ff392c66}8%,34%{opacity:1;box-shadow:0 0 7px 3px #ff4a37,0 0 25px 12px #ff352d88,0 0 48px 20px #ff322d30}}
@media(max-width:760px){.scene-status{top:49px;left:19px;bottom:auto}.demo-notification{top:101px;left:19px;right:auto}}
@media(prefers-reduced-motion:reduce){.alarm .house-beacon{animation:none;opacity:.85}}

/* Interactive mobile-app demonstration alongside the original alarm scene. */
[hidden]{display:none!important}
.demo-tabs{display:flex;gap:8px;margin-bottom:25px;border-bottom:1px solid #ffffff20;padding-bottom:14px}
.demo-tabs button{background:transparent;border:1px solid #ffffff35;color:#becbd4;padding:13px 22px;font-size:14px;font-weight:600;min-height:48px;transition:background .2s,color .2s}
.demo-tabs button[aria-selected=true]{background:white;color:var(--ink);border-color:white}
.smart-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(310px,1fr);gap:36px;align-items:start}
.smart-scene{margin:0;min-width:0;background:#16232e;align-self:center}
.smart-stage{position:relative;aspect-ratio:3/2;overflow:hidden;background:#0b1622}
.smart-source,.smart-dark-source{width:100%;height:100%;object-fit:fill;display:block}
.smart-dark-source{position:absolute;inset:0;opacity:1;transition:opacity .55s;pointer-events:none}
.lights-on .smart-dark-source{opacity:0}
.smart-gate{position:absolute;left:12.0443%;top:59.082%;width:29.1016%;height:18.1641%;overflow:hidden;pointer-events:none}
.gate-leaf{width:100%;height:100%;transition:transform 1.5s ease-in-out;transform:translateX(0)}
.gate-leaf svg{width:100%;height:100%;display:block;stroke:none}
.gate-open .gate-leaf{transform:translateX(-103%)}
.garden-water{position:absolute;left:52.5391%;top:72.168%;width:46.7448%;height:21.9727%;opacity:0;transition:opacity .7s;pointer-events:none}
.garden-water img{width:100%;height:100%;object-fit:contain}
.irrigating .garden-water{opacity:1;animation:water-flow 1.7s ease-in-out infinite alternate}
@keyframes water-flow{from{opacity:.78}to{opacity:1}}
.smart-image-label{position:absolute;top:18px;left:20px;font-size:12px;letter-spacing:.12em;color:#d4dce2}
.smart-image-note{position:absolute;bottom:8px;right:12px;font-size:12px;color:#d6dee3;text-shadow:0 1px 4px #000}
.heating-pin{position:absolute;left:75%;top:51%;display:flex;align-items:center;gap:5px;border:1px solid #f3a85890;padding:6px 9px;background:#482c19df;color:#ffd5a0;opacity:0;transform:translateY(5px);transition:opacity .4s,transform .4s;font-size:14px;font-weight:700;pointer-events:none}
.heating-pin svg{width:17px;height:17px}.heating-on .heating-pin{opacity:1;transform:none}
.smart-status{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:21px 22px;gap:17px 12px;border-top:1px solid #ffffff15}
.smart-status small{display:block;font-size:12px;letter-spacing:.08em;color:#a6b5c1;margin-bottom:4px}
.smart-status strong{display:block;font-size:14px;line-height:1.5;font-weight:600;color:#e9edf0}
.smart-caption{padding:0 22px 23px;font-size:14px;line-height:1.7;color:#b4c2cc}
.smart-controller{display:flex;flex-direction:column;align-items:center;min-width:0}
.app-phone{width:100%;max-width:334px;padding:12px 8px 8px;border:2px solid #576774;border-radius:34px;background:#0b1117;box-shadow:0 18px 36px #0004;position:relative}
.phone-speaker{height:4px;width:48px;border-radius:3px;background:#44515d;margin:0 auto 9px}
.app-screen{padding:24px 18px 12px;border-radius:22px;background:#f4f6f7;color:var(--ink)}
.app-heading>img{width:140px;height:auto;margin-bottom:21px}
.app-heading>span{display:block;font-size:12px;letter-spacing:.1em;color:#697985;font-weight:600;margin-bottom:6px}
.app-heading h3{font-size:27px;line-height:1.2;letter-spacing:-.04em}
.app-heading>p{font-size:14px;color:var(--muted);margin-top:4px}
.app-controls{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:24px}
.app-control{text-align:left;border:1px solid #d8e0e5;border-radius:13px;background:#fff;padding:15px 13px;position:relative;min-height:124px;color:var(--ink);transition:border-color .25s,background .25s}
.app-control>svg{display:block;width:25px;height:25px;color:#83919c;margin-bottom:13px}
.app-control>strong{font-size:16px;display:block;line-height:1.4}
.app-control>span{font-size:14px;color:var(--muted);display:block;margin-top:4px;line-height:1.4}
.app-control>i{position:absolute;top:15px;right:12px;width:26px;height:14px;border-radius:8px;background:#d7dfe5;transition:background .25s}
.app-control>i:after{content:'';position:absolute;left:3px;top:3px;width:8px;height:8px;background:white;border-radius:50%;transition:transform .25s}
.app-control[aria-pressed=true]{background:#fff5f3;border-color:#ecaaa5}
.app-control[aria-pressed=true]>svg{color:var(--red)}
.app-control[aria-pressed=true]>i{background:var(--red)}
.app-control[aria-pressed=true]>i:after{transform:translateX(12px)}
.app-control:hover{border-color:#e56b63}
.app-temperature{margin-top:23px}.app-temperature label{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;gap:8px}
.app-temperature output{font-size:16px;font-weight:700;color:var(--red);white-space:nowrap}
.app-temperature input{width:100%;accent-color:var(--red);margin:14px 0 4px;min-height:24px;cursor:pointer}
.app-temperature input:disabled{opacity:.4;cursor:default}.app-temperature>div{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.app-feedback{font-size:14px;line-height:1.6;min-height:45px;margin-top:15px;color:#4b5a65;padding-top:13px;border-top:1px solid #dce3e7}
.phone-home{height:4px;width:92px;background:#83939e;border-radius:3px;margin:16px auto 0}
.smart-demo-note{max-width:334px;font-size:12px;line-height:1.7;color:#a9b8c5;margin-top:18px}
@media(max-width:1100px){.smart-layout{grid-template-columns:minmax(0,1.4fr) 310px;gap:23px}.smart-status{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.smart-stage{aspect-ratio:3/2}}
@media(max-width:850px){.smart-layout{grid-template-columns:1fr;gap:30px}.smart-status{grid-template-columns:repeat(3,minmax(0,1fr))}.smart-scene{width:100%}.app-phone{max-width:352px}.smart-demo-note{max-width:352px}}
@media(max-width:760px){.demo-tabs{gap:7px}.demo-tabs button{flex:1;padding:12px 9px;font-size:14px;line-height:1.5}.smart-status{grid-template-columns:repeat(2,minmax(0,1fr));padding:20px;gap:17px}.smart-caption{padding:0 20px 20px}.smart-image-label{font-size:12px;letter-spacing:.04em;top:12px;left:13px}.smart-image-note{font-size:12px;right:8px}.heating-pin{left:72%;font-size:12px;padding:4px 7px}.heating-pin svg{width:14px;height:14px}.app-screen{padding:23px 19px 12px}.app-heading>img{width:150px}.smart-demo-note{font-size:12px}}
@media(prefers-reduced-motion:reduce){.irrigating .garden-water{animation:none;opacity:1}.smart-dark-source,.gate-leaf,.garden-water{transition:none}}

/* Window-fitted bitmap roller shutters and remote alarm arming. */
.smart-shutter{position:absolute;overflow:hidden;pointer-events:none}
.shutter-leaf{width:100%;height:100%;transform:translateY(-135%);transition:transform 1.5s ease-in-out;position:relative}
.shutter-bitmap{position:absolute;left:0;top:var(--shutter-offset);width:100%;height:110%;transform:skewY(var(--shutter-tilt));transform-origin:top left;display:block;stroke:none}
.shutters-down .shutter-leaf{transform:translateY(0)}
.shutter-1{left:57.2266%;top:40.6250%;width:12.1745%;height:9.7656%;clip-path:polygon(0.0000% 24.0000%,100.0000% 0.0000%,100.0000% 84.0000%,0.0000% 100.0000%);--shutter-tilt:-7.3135deg;--shutter-offset:24.0000%}
.shutter-2{left:75.7812%;top:37.2070%;width:7.4870%;height:10.9375%;clip-path:polygon(0.0000% 14.2857%,100.0000% 0.0000%,100.0000% 90.1786%,0.0000% 100.0000%);--shutter-tilt:-7.9207deg;--shutter-offset:14.2857%}
.shutter-3{left:93.2943%;top:40.5273%;width:3.0599%;height:6.3477%;clip-path:polygon(0.0000% 0.0000%,100.0000% 23.0769%,100.0000% 100.0000%,0.0000% 81.5385%);--shutter-tilt:17.7004deg;--shutter-offset:0.0000%}
.shutter-4{left:54.6224%;top:55.1758%;width:11.9141%;height:11.6211%;clip-path:polygon(0.0000% 5.8824%,100.0000% 0.0000%,100.0000% 100.0000%,0.0000% 96.6387%);--shutter-tilt:-2.1906deg;--shutter-offset:5.8824%}
.shutter-5{left:89.4531%;top:54.7852%;width:5.1432%;height:8.6914%;clip-path:polygon(0.0000% 0.0000%,100.0000% 16.8539%,100.0000% 100.0000%,0.0000% 96.6292%);--shutter-tilt:10.7510deg;--shutter-offset:0.0000%}
.smart-guard{position:absolute;top:49px;left:20px;display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #8595a380;background:#13212de8;color:#d0dbe4;font-size:14px;line-height:1.5;transition:color .25s,border-color .25s,background .25s}
.smart-guard svg{width:18px;height:18px;flex-shrink:0}
.guarded .smart-guard{color:#c1ebdb;border-color:#92baaf70;background:#0d2028e8}
#control-guard[aria-pressed=true]{background:#edf8f3;border-color:#9fc5b2}
#control-guard[aria-pressed=true]>svg{color:#267557}
#control-guard[aria-pressed=true]>i{background:#267557}
@media(max-width:760px){.smart-guard{left:13px;top:39px;font-size:12px;padding:5px 8px;gap:6px}.smart-guard svg{width:15px;height:15px}}
@media(prefers-reduced-motion:reduce){.shutter-leaf{transition:none}}

/* Premises and map link in the contact section. */
.contact-seat{margin-top:23px}
.contact-map{align-self:flex-start;margin-top:8px;color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.contact-map:hover{color:var(--red)}

/* Camera preview reuses the same house layers and control state. */
.app-camera{margin-top:22px}
.camera-card-heading{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-size:14px;line-height:1.5}
.camera-card-heading svg{width:19px;height:19px;color:var(--red);flex-shrink:0}
.camera-preview{display:block;width:100%;padding:0;border:1px solid #cbd6de;border-radius:12px;background:#142330;color:white;overflow:hidden;text-align:left}
.camera-feed{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#0b1622}
.camera-frame{display:block;position:absolute;left:-5%;top:-47%;width:145%;aspect-ratio:3/2;pointer-events:none}
.camera-demo-tag{position:absolute;top:9px;left:10px;padding:3px 7px;background:#10212bdd;border:1px solid #ffffff30;color:#e1e8ed;font-size:12px;line-height:1.4;letter-spacing:.08em}
.camera-light-state{position:absolute;bottom:9px;left:10px;padding:3px 7px;background:#10212bdd;color:#dbe6ee;font-size:12px;line-height:1.5}
.camera-open-label{padding:9px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;line-height:1.5;font-weight:600;border-top:1px solid #ffffff12}
.camera-open-label svg{width:17px;height:17px;flex-shrink:0}
.camera-preview:hover{border-color:#e56b63}.camera-preview:hover .camera-open-label{background:#1b3040}
.camera-dialog{width:960px;max-width:calc(100% - 32px);max-height:calc(100% - 32px);padding:0;border:1px solid #526372;border-radius:12px;background:#142330;color:white;box-shadow:0 25px 70px #0008;overflow:auto}
.camera-dialog::backdrop{background:#06111bdd}
.camera-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px}
.camera-dialog-heading p{font-size:12px;line-height:1.5;letter-spacing:.12em;color:#a9bbc9;margin-bottom:5px}
.camera-dialog-heading h3{font-size:24px;line-height:1.3;letter-spacing:-.025em}
.camera-close{display:flex;align-items:center;gap:9px;padding:9px 13px;border:1px solid #6e8292;border-radius:6px;background:transparent;color:white;font-size:14px;line-height:1.5;font-weight:600;min-height:44px}
.camera-close svg{width:18px;height:18px}.camera-close:hover{background:#284353}
.camera-dialog-status{padding:16px 24px;font-size:14px;line-height:1.6;color:#c5d6e2}
@media(min-width:851px) and (min-height:750px){.smart-scene{position:sticky;top:114px;align-self:start}}
@media(max-width:760px){.camera-dialog-heading{padding:16px;gap:12px}.camera-dialog-heading h3{font-size:20px}.camera-dialog-status{padding:14px 16px}.camera-close{padding:8px 10px}.camera-dialog .camera-demo-tag{font-size:12px}}

/* One phone contains both demonstrations and compact controls. */
.phone-demo{display:flex;justify-content:center;width:100%}
.phone-demo .app-phone{max-width:440px;padding:11px 7px 7px;border-radius:32px}
.phone-demo .app-screen{padding:18px 14px 12px;border-radius:21px}
.phone-demo .app-heading{position:relative;padding-right:116px;min-height:73px}
.phone-demo .app-heading>img{position:absolute;right:0;top:5px;width:108px;height:auto;margin:0}
.phone-demo .app-heading>span{font-size:12px;letter-spacing:.06em;margin-bottom:4px}
.phone-demo .app-heading h3{font-size:24px;line-height:1.25}
.phone-demo .app-heading>p{font-size:14px;margin-top:2px}
.phone-demo .demo-tabs{margin:15px 0 14px;padding:0;border:0;gap:7px}
.phone-demo .demo-tabs button{flex:1;min-height:44px;padding:9px 7px;border:1px solid #d2dce3;border-radius:8px;background:#eaf0f4;color:#556672;font-size:14px;line-height:1.5}
.phone-demo .demo-tabs button[aria-selected=true]{background:var(--ink);color:white;border-color:var(--ink)}
.phone-demo .smart-scene{position:static;align-self:auto;width:100%;border-radius:10px;overflow:hidden}
.phone-demo .smart-image-label{top:10px;left:11px;font-size:12px;letter-spacing:.04em}
.phone-demo .smart-guard{top:35px;left:11px;padding:5px 8px;font-size:14px;gap:6px}
.phone-demo .smart-guard svg{width:15px;height:15px}
.phone-demo .smart-image-note{font-size:12px;right:8px;bottom:5px}
.phone-demo .heating-pin{font-size:12px;padding:4px 6px;left:auto;right:6%}
.phone-demo .heating-pin svg{width:14px;height:14px}
.phone-demo .app-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:13px}
.phone-demo .app-control{padding:10px 9px;min-height:86px;border-radius:9px;min-width:0}
.phone-demo .app-control>svg{width:20px;height:20px;margin-bottom:6px}
.phone-demo .app-control>strong{font-size:14px;line-height:1.4}
.phone-demo .app-control>span{font-size:14px;line-height:1.4;margin-top:2px}
.phone-demo .app-control>i{top:10px;right:8px;width:22px;height:12px}
.phone-demo .app-control>i:after{width:6px;height:6px;top:3px;left:3px}
.phone-demo .app-control[aria-pressed=true]>i:after{transform:translateX(10px)}
.app-secondary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start;margin-top:15px}
.phone-demo .app-camera{margin:0;min-width:0}
.phone-demo .camera-card-heading{gap:6px;margin-bottom:8px;font-size:14px;line-height:1.4;align-items:flex-start}
.phone-demo .camera-card-heading svg{width:17px;height:17px;margin-top:1px}
.phone-demo .camera-open-label{padding:8px 10px;min-height:44px}
.phone-demo .camera-light-state{bottom:5px;left:5px;padding:2px 5px;font-size:12px}
.phone-demo .camera-demo-tag{top:5px;left:5px;padding:2px 5px;font-size:12px;letter-spacing:.02em}
.phone-demo .app-temperature{margin:0;padding:11px 12px 9px;background:white;border:1px solid #d8e0e5;border-radius:9px;min-width:0}
.phone-demo .app-temperature label{display:block;font-size:14px;line-height:1.5}
.phone-demo .app-temperature output{display:block;font-size:20px;margin-top:5px;line-height:1.4}
.phone-demo .app-temperature input{margin:12px 0 3px;min-height:28px}
.phone-demo .app-feedback{margin-top:13px;padding-top:10px;min-height:45px;font-size:14px}
.phone-demo .smart-demo-note{max-width:none;margin-top:12px;color:#687a86;font-size:12px;line-height:1.6}
.phone-demo .phone-home{margin-top:13px}
.phone-demo .demo-layout{display:block;min-height:0;color:white}
.phone-demo .demo-scene{min-height:0;aspect-ratio:3/2;border-radius:10px 10px 0 0}
.phone-demo .demo-panel{padding:18px 16px;border-radius:0 0 10px 10px}
.phone-demo .panel-label{font-size:12px}
.phone-demo .demo-steps{display:block;margin:15px 0 18px}
.phone-demo .demo-steps li{margin:0 0 13px;gap:12px}
.phone-demo .demo-steps h3{font-size:14px;line-height:1.5}
.phone-demo .demo-steps p{font-size:14px;line-height:1.5}
.phone-demo .demo-steps li>span{min-width:22px}
.phone-demo .demo-panel .button{min-height:44px;padding:11px 15px}
.phone-demo .demo-hint{font-size:12px;margin-top:12px;line-height:1.6}
.phone-demo .scene-label{top:11px;left:12px;font-size:12px;letter-spacing:.02em}
.phone-demo .scene-status{top:40px;left:12px;bottom:auto;font-size:12px;padding:6px 9px;max-width:calc(100% - 24px)}
.phone-demo .demo-notification{top:85px;left:12px;right:auto;width:min(255px,calc(100% - 24px));padding:10px 12px}
.phone-demo .demo-watermark{font-size:12px;right:8px;bottom:5px}
@media(max-width:380px){.phone-demo .app-screen{padding:15px 10px 11px}.phone-demo .app-heading{padding-right:103px}.phone-demo .app-heading>img{width:96px}.phone-demo .app-heading h3{font-size:22px}.phone-demo .app-control{padding-inline:7px}.app-secondary{gap:9px}.phone-demo .app-temperature{padding-inline:9px}}