.service-switcher{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}
.service-switcher button,.demo button{font:600 12px/1.4 var(--mono);color:var(--parch);background:var(--gr);border:1px solid var(--stone);padding:12px 16px;min-height:44px;cursor:pointer}
.service-switcher button[aria-selected=true],.demo button[aria-pressed=true]{background:#243746;border-color:var(--crim-lt)}
.services [id^=pillar-]{scroll-margin-top:110px}
.services.enhanced [id^=pillar-]{padding:12px 0!important;border:0!important}
.demo{border:1px solid var(--stone);background:var(--ch);color:var(--parch);box-shadow:0 20px 64px #0005}
.demo-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px;background:linear-gradient(110deg,#243746,var(--ch));border-bottom:1px solid var(--stone)}
.demo-label{font:700 11px/1.8 var(--mono);letter-spacing:.08em}
.demo-disclosure{font:12px/1.7 var(--sans);color:var(--dust);margin-top:6px;max-width:72ch}
.demo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--stone)}
.demo-panel{background:var(--ch);padding:20px;min-width:0}
.demo-panel h3{font:600 11px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dust);margin-bottom:16px}
.demo-map{grid-column:span 2;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#243746,var(--ch) 80%)}
.demo-map svg{width:100%;height:auto;display:block}
.map-grid{stroke:var(--dust);opacity:.09}
.map-land{fill:var(--st);stroke:var(--dust);stroke-width:1;opacity:.65}
.map-route{fill:none;stroke:var(--crim-lt);stroke-width:2;stroke-dasharray:5 10;animation:route-flow 12s linear infinite}
.map-dot{fill:var(--crim-lt)}
.map-pulse{fill:none;stroke:var(--crim-lt);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:map-pulse 3s ease-out infinite}
.demo-controls{display:flex;gap:8px;flex-wrap:wrap}
.demo button,.service-switcher button{scroll-margin:150px 0}
.demo-controls{position:relative;z-index:2}
#monitor .demo-controls button{font:600 11px var(--mono);min-height:44px;padding:12px 16px;color:var(--parch);background:var(--gr);border:1px solid var(--stone);cursor:pointer}
.terminal-extras{margin-top:24px;border:1px solid var(--stone)}
.terminal-paused *{animation-play-state:paused!important;transition:none!important}
#monitor{scroll-margin-top:110px}
.capture-showcase{margin:24px 0 32px;background:var(--ch);border:1px solid var(--stone)}
.capture-heading{padding:20px;background:#243746}
.capture-heading span,.capture-label{font:700 11px/1.7 var(--mono);letter-spacing:.08em;color:var(--parch)}
.capture-heading p{font:12px/1.7 var(--sans);color:var(--dust);margin-top:8px}
.capture-showcase figure{margin:0;min-width:0;overflow:hidden}
.capture-showcase img{display:block;width:100%;height:auto}
.capture-label,.capture-showcase figcaption{padding:12px 16px}
.capture-showcase figcaption{font:10px/1.7 var(--mono);color:var(--dust)}
.capture-cameras{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--stone)}
.capture-cameras figure,.capture-data figure{background:var(--ch)}
.capture-data{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--stone);border-top:1px solid var(--stone)}
.capture-showcase a{display:block}
.capture-showcase a:hover{filter:brightness(1.12)}
@media(max-width:600px){.capture-cameras,.capture-data{grid-template-columns:1fr}.capture-heading{padding:16px}}
.demo-controls button{font-size:10px;padding:8px 12px}
.demo-feed{list-style:none;margin:0;padding:0}
.demo-feed li{padding:12px 0;border-bottom:1px solid var(--stone);font:13px/1.65 var(--sans)}
.demo-feed small{display:block;font:10px/1.8 var(--mono);color:var(--dust)}
.demo-metric{font:700 44px/1 var(--cond);margin-bottom:12px}
.demo-chart{width:100%;height:90px}
.demo-chart polyline{fill:none;stroke:var(--crim-lt);stroke-width:2;stroke-dasharray:700;stroke-dashoffset:700;animation:chart-draw 5s ease-in-out infinite alternate}
.demo-camera{position:relative;aspect-ratio:16/9;background:linear-gradient(#243746,var(--ch));overflow:hidden;border:1px solid var(--stone)}
.demo-camera svg{width:100%;height:100%}
.camera-scan{position:absolute;inset:0;background:linear-gradient(transparent 45%,#c8d8e420 50%,transparent 55%);animation:camera-scan 6s linear infinite}
.camera-caption{font:10px/1.8 var(--mono);color:var(--dust);margin-top:12px}
.demo-bars{display:grid;gap:16px;font:12px var(--sans)}
.demo-bars span{display:block;background:var(--st);height:5px;margin-top:8px}
.demo-bars i{display:block;height:5px;background:var(--crim-lt);transition:width 1s}
.demo.paused *{animation-play-state:paused!important}
@keyframes route-flow{to{stroke-dashoffset:-150}}
@keyframes map-pulse{0%{transform:scale(.5);opacity:1}100%{transform:scale(2.5);opacity:0}}
@keyframes chart-draw{to{stroke-dashoffset:0}}
@keyframes camera-scan{from{transform:translateY(-80%)}to{transform:translateY(80%)}}
@media(max-width:900px){.demo-grid{grid-template-columns:1fr 1fr}.demo-map{grid-column:1/-1}.service-switcher{display:grid;grid-template-columns:1fr 1fr}.service-switcher button{text-align:left;font-size:11px}}
@media(max-width:560px){.demo-grid{grid-template-columns:1fr}.demo-map{grid-column:auto}.demo-panel{padding:16px}.demo-header{padding:16px}.demo-map svg{min-height:180px}.demo-metric{font-size:36px}}
@media(prefers-reduced-motion:reduce){.demo *{animation:none!important;transition:none!important}.demo-chart polyline{stroke-dashoffset:0}}

.camera-wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--stone);border-top:1px solid var(--stone)}
.camera-wall figure{background:var(--ch);margin:0;min-width:0}
.cam-frame{position:relative;aspect-ratio:4/3;overflow:hidden;background:#141414}
.cam-frame svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.cam-frame::before{content:"";position:absolute;inset:0;background:#1A1A1A;mix-blend-mode:multiply;opacity:.12;pointer-events:none;z-index:1}
.cam-frame::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);pointer-events:none;z-index:2}
.cam-id,.cam-state,.cam-rec,.cam-ts{position:absolute;bottom:8px;font:9px/1 var(--mono);letter-spacing:.14em;color:var(--parch);background:rgba(10,10,10,.68);padding:4px 6px;z-index:3}
.cam-id{left:8px}
.cam-state{right:8px;display:flex;align-items:center;gap:5px}
.cam-state i{width:5px;height:5px;border-radius:50%;background:#2F6B4A;animation:campulse 2.6s ease-in-out infinite}
.cam-rec{top:8px;left:8px;bottom:auto;display:flex;align-items:center;gap:5px;color:#E8F0F8}
.cam-rec .kig-rec-dot{width:6px;height:6px;border-radius:50%;background:#B52B43;animation:camrecblink 1.4s steps(1) infinite}
.cam-ts{top:8px;right:8px;bottom:auto;left:auto;font-size:8px;letter-spacing:.08em;color:#9AABB8}
@keyframes campulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes camrecblink{0%,60%{opacity:1}61%,100%{opacity:.2}}
@media(prefers-reduced-motion:reduce){.cam-state i,.cam-rec .kig-rec-dot{animation:none}}
@media(max-width:700px){.camera-wall{grid-template-columns:1fr 1fr}.camera-wall figure:last-child{grid-column:span 2}}
@media(max-width:420px){.camera-wall{grid-template-columns:1fr}.camera-wall figure:last-child{grid-column:auto}}