/* Detailed route components */
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); border-left:1px solid var(--line); border-top:1px solid var(--line) }
.service-card { position:relative; min-height:340px; padding:34px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--white); transition:background .3s ease,transform .3s ease }
.service-card:hover { z-index:2; background:#edfaff; transform:translateY(-4px); box-shadow:0 22px 55px rgba(9,47,62,.1) }
.service-card-icon { width:57px; height:57px; display:grid; place-items:center; margin:34px 0 28px; color:#137da7; background:#e7f7fc; border-radius:50% }
.service-card-icon .icon { width:27px; height:27px; stroke-width:1.4 }
.service-index { position:absolute; right:28px; top:25px; color:#9cacb3; font-family:var(--mono); font-size:.58rem }
.service-card h3 { margin-bottom:15px; font-size:1.25rem }
.service-card p { margin:0; color:#687981; font-size:.9rem; line-height:1.7 }
.compare-mini { margin-top:38px; border-top:1px solid var(--line) }
.compare-mini a { display:grid; grid-template-columns:72px 1fr 22px; align-items:center; gap:16px; padding:22px 4px; border-bottom:1px solid var(--line); transition:color .2s ease,padding .2s ease }
.compare-mini a:hover { color:#057aa5; padding-left:10px }
.compare-mini strong { font-family:var(--mono); font-size:.75rem; letter-spacing:.08em }
.compare-mini span { color:#687982; font-size:.88rem }
.compare-mini .icon { width:18px }
.diagram-card { min-height:560px; padding:24px; color:var(--white); background:var(--ink-2); border-radius:var(--radius-lg); box-shadow:var(--shadow) }
.diagram-title { display:flex; align-items:center; justify-content:space-between; color:#708792; font-family:var(--mono); font-size:.57rem; letter-spacing:.09em }
.diagram-title span { display:flex; align-items:center; gap:8px }.diagram-title span i { width:6px; height:6px; background:var(--cyan); border-radius:50% }.diagram-title strong { color:#acbdc5; font-weight:500 }
.system-diagram { position:relative; height:415px; display:flex; align-items:center; justify-content:center; gap:50px; overflow:hidden; margin-top:20px; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:42px 42px; border:1px solid rgba(255,255,255,.08); border-radius:18px }
.diagram-node { position:relative; z-index:2; width:94px; height:94px; display:grid; place-items:center; padding:15px; color:var(--cyan); background:#0c2029; border:1px solid rgba(50,200,255,.32); border-radius:50%; box-shadow:0 0 40px rgba(50,200,255,.09) }
.diagram-node .icon { width:27px; height:27px }.diagram-node span { color:#a6bac3; font-family:var(--mono); font-size:.48rem }
.system-diagram>i { width:58px; height:1px; background:linear-gradient(90deg,rgba(50,200,255,.2),var(--cyan),rgba(50,200,255,.2)); box-shadow:0 0 12px rgba(50,200,255,.4) }
.diagram-foot { display:flex; justify-content:space-around; padding-top:17px; color:#718993; font-family:var(--mono); font-size:.5rem; letter-spacing:.07em; text-transform:uppercase }
.object-links { border-top:1px solid var(--line-dark) }
.object-link { display:grid; grid-template-columns:120px 1.1fr 1.5fr 30px; align-items:center; gap:30px; padding:35px 10px; border-bottom:1px solid var(--line-dark); transition:padding .25s ease,background .25s ease }
.object-link:hover { padding-inline:24px; background:rgba(50,200,255,.05) }
.object-link>span { display:flex; align-items:center; gap:18px; color:#718995; font-family:var(--mono); font-size:.59rem }.object-link>span .icon { width:32px; height:32px; color:var(--cyan) }
.object-link h3 { margin:0; font-size:1.5rem }.object-link p { margin:0; color:#8ea1ab }.object-link>.icon { color:var(--cyan) }

/* Residential route */
.zone-map { display:grid; grid-template-columns:1.15fr .85fr; min-height:620px; overflow:hidden; color:var(--white); background:var(--ink-2); border-radius:var(--radius-lg); box-shadow:var(--shadow) }
.home-plan { position:relative; min-height:620px; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:52px 52px; border-right:1px solid rgba(255,255,255,.1) }
.home-plan::before { content:""; position:absolute; inset:13%; border:1px solid rgba(203,228,237,.3); clip-path:polygon(0 0,64% 0,64% 22%,100% 22%,100% 100%,46% 100%,46% 74%,0 74%) }
.room { position:absolute; display:grid; place-items:center; color:#78919d; border:1px solid rgba(255,255,255,.11); font-family:var(--mono); font-size:.5rem; letter-spacing:.09em }.room-one { left:13%; top:13%; width:33%; height:28% }.room-two { right:13%; top:13%; width:34%; height:48% }.room-three { left:13%; bottom:13%; width:40%; height:27% }.room-four { right:13%; bottom:13%; width:31%; height:26% }
.cam-point { position:absolute; width:12px; height:12px; background:var(--cyan); border:3px solid #153846; border-radius:50%; box-shadow:0 0 0 8px rgba(50,200,255,.08),0 0 20px var(--cyan) }.cam-point::after { content:""; position:absolute; left:4px; top:4px; width:110px; height:1px; background:linear-gradient(90deg,var(--cyan),transparent); transform-origin:left }.cam-one { left:42%; top:26% }.cam-one::after { transform:rotate(22deg) }.cam-two { right:27%; top:46% }.cam-two::after { transform:rotate(135deg) }.cam-three { left:28%; bottom:25% }.cam-three::after { transform:rotate(-38deg) }.cam-four { right:25%; bottom:22% }.cam-four::after { transform:rotate(205deg) }
.zone-list { padding:55px }.zone-list>div { display:grid; grid-template-columns:36px 1fr; gap:5px 16px; padding:22px 0; border-bottom:1px solid rgba(255,255,255,.1) }.zone-list>div>span { grid-row:span 2; color:var(--cyan); font-family:var(--mono); font-size:.58rem }.zone-list h3 { margin:0; font-size:1.18rem }.zone-list p { margin:6px 0 0; color:#8fa4ae; font-size:.86rem; line-height:1.65 }
.residential-art { min-height:600px; background:linear-gradient(155deg,#163746,#071017) }.residential-art::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:50px 50px; opacity:.35 }
.house-outline { position:absolute; left:13%; right:13%; bottom:18%; height:48%; border:1px solid rgba(211,235,243,.34) }.house-outline .roof { position:absolute; left:-4%; right:-4%; top:-57%; height:60%; border-top:1px solid rgba(211,235,243,.44); border-left:1px solid rgba(211,235,243,.44); transform:skewY(-23deg) }.house-outline .door { position:absolute; left:14%; bottom:0; width:22%; height:50%; border:1px solid rgba(211,235,243,.3) }.house-outline .window { position:absolute; top:18%; width:20%; height:25%; border:1px solid rgba(50,200,255,.35) }.house-outline .w1 { left:45% }.house-outline .w2 { right:8% }.mounted-cam { position:absolute; right:7%; top:-8px; width:18px; height:10px; background:var(--cyan); border-radius:3px; box-shadow:0 0 18px var(--cyan) }
.home-coverage { position:absolute; right:-10%; top:20%; width:62%; aspect-ratio:1; border:1px solid rgba(50,200,255,.25); border-radius:50% }.home-coverage::before,.home-coverage::after { content:""; position:absolute; inset:18%; border:1px solid rgba(50,200,255,.2); border-radius:inherit }.home-coverage::after { inset:36% }
.mobile-preview { position:absolute; left:28px; bottom:28px; display:flex; align-items:center; gap:14px; padding:14px 18px; color:var(--white); background:rgba(7,16,23,.82); border:1px solid rgba(255,255,255,.14); border-radius:14px; backdrop-filter:blur(12px) }.mobile-preview>span { width:40px; height:40px; display:grid; place-items:center; color:var(--cyan); background:rgba(50,200,255,.1); border-radius:50% }.mobile-preview small { display:block; color:#718993; font-family:var(--mono); font-size:.48rem }.mobile-preview strong { display:block; margin-top:4px; font-size:.76rem }
.check-list { list-style:none; margin:34px 0; padding:0; border-top:1px solid var(--line) }.check-list li { display:flex; align-items:flex-start; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); color:#60717a }.check-list li .icon { margin-top:3px; color:#0a87b5 }.check-list strong { color:var(--text) }.check-list.large li { padding:21px 0; font-size:1.02rem }
.package-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }.package-card { min-height:470px; display:flex; flex-direction:column; padding:36px; color:var(--white); background:#0d202a; border:1px solid rgba(255,255,255,.1); border-radius:var(--radius) }.package-card.featured { background:linear-gradient(145deg,#12313f,#0b1d26); border-color:rgba(50,200,255,.35); box-shadow:0 20px 70px rgba(50,200,255,.08) }.package-tag { color:var(--cyan); font-family:var(--mono); font-size:.56rem; letter-spacing:.11em }.package-card h3 { margin:65px 0 16px; font-size:1.65rem }.package-card p { color:#91a5ae }.package-card ul { margin:18px 0 32px; padding:18px 0 0 18px; border-top:1px solid rgba(255,255,255,.1); color:#a7b6bd; font-size:.87rem }.package-card li { margin:9px 0 }.package-card a { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:20px; color:var(--cyan); border-top:1px solid rgba(255,255,255,.1); font-size:.68rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase }
.legal-note { display:grid; grid-template-columns:65px 1fr auto; align-items:center; gap:30px; padding:36px; background:#e9f5f8; border:1px solid #cfebf2; border-radius:var(--radius) }.legal-note>.icon { width:45px; height:45px; color:#0a84ae }.legal-note h2 { margin:0 0 10px; font-size:1.45rem }.legal-note p { max-width:750px; margin:0; color:#657780; font-size:.9rem }

/* Business route */
.business-types { border-top:1px solid var(--line) }.business-type { position:relative; display:grid; grid-template-columns:70px 1fr; gap:24px; padding:34px 0; border-bottom:1px solid var(--line) }.type-num { color:#2e8aa9; font-family:var(--mono); font-size:.6rem }.business-type small { color:#7b9099; font-family:var(--mono); font-size:.53rem; letter-spacing:.09em }.business-type h3 { margin:9px 0; font-size:1.55rem }.business-type p { max-width:700px; margin:0; color:#667881 }.type-line { position:absolute; right:0; top:50%; width:30%; height:1px; background:linear-gradient(90deg,transparent,#b9dbe7); transform:scaleX(.25); transform-origin:right; transition:transform .35s ease }.business-type:hover .type-line { transform:scaleX(1) }
.business-dashboard { min-height:610px; padding:24px; color:var(--white) }.dashboard-head,.console-head { display:flex; align-items:center; justify-content:space-between; color:#738a95; font-family:var(--mono); font-size:.55rem; letter-spacing:.08em }.dashboard-head span,.console-head span { display:flex; align-items:center; gap:7px }.dashboard-head i,.console-head i { width:6px; height:6px; background:var(--cyan); border-radius:50% }.dashboard-head strong,.console-head strong { color:#adbec6; font-weight:500 }
.dashboard-sites { display:grid; gap:7px; margin:25px 0 }.site-card { display:grid; grid-template-columns:34px 1fr 10px; align-items:center; gap:12px; padding:15px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); border-radius:11px }.site-card.active { background:rgba(50,200,255,.08); border-color:rgba(50,200,255,.3) }.site-card>span { color:#607884; font-family:var(--mono); font-size:.55rem }.site-card strong { display:block; font-size:.78rem }.site-card small { display:block; margin-top:3px; color:#718894; font-size:.61rem }.site-card>i { width:7px; height:7px; background:var(--cyan); border-radius:50%; box-shadow:0 0 12px var(--cyan) }
.dashboard-view { position:relative; min-height:295px; padding:12px; background:#08151c; border:1px solid rgba(255,255,255,.09); border-radius:15px }.view-grid { height:250px; display:grid; grid-template-columns:1fr 1fr; gap:5px }.view-grid i { position:relative; overflow:hidden; background:linear-gradient(145deg,#183543,#0b1d25) }.view-grid i::before { content:""; position:absolute; left:12%; right:12%; bottom:0; height:55%; border:1px solid rgba(204,230,239,.2); clip-path:polygon(0 22%,50% 0,100% 22%,100% 100%,0 100%) }.dashboard-view>span { position:absolute; left:21px; bottom:18px; color:var(--cyan); font-family:var(--mono); font-size:.48rem }
.timeline { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line-dark) }.timeline-item { position:relative; min-height:280px; padding:35px 30px; border-right:1px solid var(--line-dark) }.timeline-item:first-child { border-left:1px solid var(--line-dark) }.timeline-item>span { color:var(--cyan); font-family:var(--mono); font-size:.58rem }.timeline-item h3 { margin:65px 0 16px; font-size:1.2rem }.timeline-item p { color:#8ea2ac; font-size:.88rem }.timeline-item::before { content:""; position:absolute; left:0; top:-3px; width:7px; height:7px; background:var(--cyan); border-radius:50%; box-shadow:0 0 12px var(--cyan) }
.notice-panel { display:grid; grid-template-columns:90px 1fr; gap:35px; padding:clamp(34px,5vw,65px); color:var(--white); background:var(--ink); border-radius:var(--radius-lg) }.notice-icon { width:76px; height:76px; display:grid; place-items:center; color:var(--cyan); background:rgba(50,200,255,.09); border:1px solid rgba(50,200,255,.2); border-radius:50% }.notice-icon .icon { width:34px; height:34px }.notice-panel h2 { margin-bottom:15px; font-size:clamp(1.7rem,3vw,3rem) }.notice-panel p { max-width:870px; margin:0; color:#9dafb8 }