:root {
  --page: #0b0e12;
  --page-line: #252b32;
  --surface: #111820;
  --surface-2: #17212a;
  --surface-3: #1c2833;
  --line: #2b3944;
  --text: #f5f8fa;
  --muted: #8d9ba7;
  --cyan: #7de3ef;
  --cyan-deep: #36acc2;
  --green: #76dcb4;
  --red: #f17b7b;
  --amber: #efb86b;
  --violet: #a798ed;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background: var(--page); color: var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
::selection { color: #0b1118; background: var(--cyan); }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.shell { width: min(calc(100% - 48px), 1240px); margin-inline: auto; }
.skip-link { position: fixed; z-index: 500; top: 12px; left: 12px; padding: 11px 16px; border-radius: 9px; background: var(--cyan); color: #0b1118; opacity: 0; pointer-events: none; transform: translateY(-150%); }
.skip-link:focus { opacity: 1; pointer-events: auto; transform: none; }

/* Site frame */
.site-header { position: relative; z-index: 5; height: 72px; border-bottom: 1px solid rgba(255,255,255,.055); background: #0b0e12; }
.header-inner { height: 100%; display: flex; align-items: center; gap: 36px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 750; letter-spacing: -.055em; white-space: nowrap; }
.brand-mark, .dash-brand-icon { display: flex; width: 30px; height: 30px; align-items: flex-end; justify-content: center; gap: 3px; padding: 6px; border: 1px solid rgba(125,227,239,.5); border-radius: 7px; background: linear-gradient(145deg, #1c333b, #102028); }
.brand-mark i, .dash-brand-icon i { display: block; width: 4px; border-radius: 2px; background: #ebfcff; }
.brand-mark i:nth-child(1), .dash-brand-icon i:nth-child(1) { height: 7px; }
.brand-mark i:nth-child(2), .dash-brand-icon i:nth-child(2) { height: 13px; background: var(--cyan); }
.brand-mark i:nth-child(3), .dash-brand-icon i:nth-child(3) { height: 18px; }
.site-nav { display: flex; gap: 31px; align-items: center; margin-left: auto; }
.site-nav a { color: #a9b3bc; font-size: 13px; font-weight: 550; transition: color .2s; }
.site-nav a:hover { color: #fff; }
.header-cta { display: inline-flex; align-items: center; gap: 18px; padding: 11px 16px; border: 1px solid #39444e; border-radius: 9px; color: #e4f1f3; font-size: 12px; font-weight: 650; transition: border-color .2s, background .2s; }
.header-cta:hover { border-color: var(--cyan); background: rgba(125,227,239,.07); }
.header-cta span { color: var(--cyan); font-size: 17px; line-height: .8; }

/* ZCode-inspired centered hero */
.hero { position: relative; overflow: hidden; padding: 53px 0 89px; isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: radial-gradient(ellipse 52% 43% at 50% 45%, #102029 0%, transparent 100%); }
.hero-glow { position: absolute; z-index: -1; top: 230px; left: 50%; width: 740px; height: 520px; border-radius: 50%; background: rgba(37,135,158,.16); filter: blur(115px); transform: translateX(-50%); pointer-events: none; }
.hero-copy { position: relative; text-align: center; }
.hero-badge { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 9px 12px; border: 1px solid #363f46; border-radius: 100px; background: #1a2026; color: #c8d2d7; font-size: 11px; font-weight: 600; }
.hero-badge > span:last-child { color: var(--cyan); }
.badge-spark { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(125,227,239,.1), 0 0 12px var(--cyan); }
.hero h1 { margin: 22px auto 13px; font-size: clamp(51px, 6.1vw, 84px); line-height: 1.02; letter-spacing: -.073em; font-weight: 690; }
.hero h1 span { color: #d1f7fa; }
.hero-copy > p { max-width: 650px; margin: 0 auto; color: #aab7c0; font-size: 16px; line-height: 1.6; }
.hero-actions { display: flex; justify-content: center; gap: 11px; margin-top: 22px; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 24px; padding: 0 18px; border-radius: 9px; font-size: 13px; font-weight: 650; transition: transform .2s, background .2s, border-color .2s; }
.button:hover { transform: translateY(-2px); }
.button-light { border: 1px solid #d9f7f9; background: #effbfc; color: #112229; box-shadow: 0 12px 40px rgba(125,227,239,.1); }
.button-light:hover { background: #cdf3f6; }
.button-quiet { border: 1px solid #3b4852; background: #1b252d; color: #e0eaf0; }
.button-quiet:hover { border-color: #7d9ba7; background: #222f39; }
.button-quiet span { color: var(--cyan); font-size: 17px; }

/* Product stage */
.product-stage { position: relative; margin-top: 46px; overflow: hidden; border: 1px solid #42525b; border-radius: 17px; background: linear-gradient(150deg, #24343e, #111820); box-shadow: 0 50px 130px rgba(0,0,0,.54), 0 0 0 7px rgba(255,255,255,.015); scroll-margin-top: 20px; }
.stage-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 37px; padding: 0 16px; color: #9caeb6; font-size: 9px; font-weight: 660; letter-spacing: .12em; }
.stage-dots { display: flex; gap: 6px; }
.stage-dots i { width: 7px; height: 7px; border-radius: 50%; background: #52616b; }
.stage-dots i:first-child { background: #e7797b; }.stage-dots i:nth-child(2) { background: #e4b56c; }.stage-dots i:nth-child(3) { background: #79cbaa; }
.stage-demo { justify-self: end; color: #a9dce2; }
.stage-demo i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); vertical-align: middle; }
.dashboard { display: grid; grid-template-columns: 188px minmax(0,1fr); min-height: 720px; margin: 0 7px 7px; overflow: hidden; border: 1px solid #33444f; border-radius: 10px; background: var(--surface); }
.dash-sidebar { display: flex; flex-direction: column; border-right: 1px solid #2a3942; background: #121b23; }
.dash-brand { display: flex; align-items: center; gap: 10px; min-height: 67px; padding: 12px 16px; border-bottom: 1px solid #26343d; font-size: 15px; font-weight: 750; letter-spacing: -.04em; }
.dash-brand-icon { flex: none; width: 26px; height: 26px; padding: 5px; gap: 2px; }
.dash-brand-icon i { width: 3px; }
.dash-brand-icon i:nth-child(1) { height: 6px; }.dash-brand-icon i:nth-child(2) { height: 11px; }.dash-brand-icon i:nth-child(3) { height: 16px; }
.dash-brand small { display: block; margin-top: 2px; color: #6c8995; font-size: 7px; font-weight: 720; letter-spacing: .17em; }
.sidebar-label { margin: 25px 15px 11px; color: #69808c; font-size: 8px; font-weight: 750; letter-spacing: .13em; }
.dash-nav { display: grid; gap: 3px; padding: 0 8px; }
.dash-nav button { display: flex; min-height: 40px; align-items: center; gap: 11px; width: 100%; padding: 0 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #91a4ad; text-align: left; font-size: 11px; font-weight: 600; transition: background .2s, color .2s; }
.dash-nav button:hover { background: #1a2b35; color: #e7f7f9; }
.dash-nav button.is-active { border-color: rgba(125,227,239,.2); background: #203742; color: #c2f4f9; }
.dash-nav svg { width: 15px; height: 15px; flex: none; }
.dash-nav b { margin-left: auto; color: #718b98; font-size: 9px; }
.dash-nav .nav-alert { display: grid; min-width: 21px; height: 18px; place-items: center; border-radius: 4px; background: rgba(241,123,123,.14); color: #f09b9b; }
.sidebar-bottom { display: flex; align-items: flex-start; gap: 9px; margin-top: auto; padding: 16px 15px 18px; border-top: 1px solid #26343d; color: #c3d5da; font-size: 10px; }
.sidebar-bottom small { display: block; margin-top: 3px; color: #748b97; font-size: 9px; }
.system-dot { width: 7px; height: 7px; flex: none; margin-top: 3px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(118,220,180,.1); }
.dash-body { position: relative; min-width: 0; background: #111920; }
.dash-topbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 56px; padding: 0 23px; border-bottom: 1px solid #263640; color: #94a5af; font-size: 10px; }
.breadcrumb { white-space: nowrap; }.breadcrumb span { margin: 0 7px; color: #526b78; }.breadcrumb strong { color: #dcebee; font-weight: 620; }
.topbar-right { display: flex; align-items: center; gap: 15px; }
.demo-pill { padding: 6px 8px; border: 1px solid rgba(125,227,239,.2); border-radius: 4px; background: rgba(125,227,239,.06); color: #92dce4; font-size: 8px; font-weight: 740; letter-spacing: .07em; white-space: nowrap; }
.clock { color: #b3c4cc; font-variant-numeric: tabular-nums; font-size: 10px; }
.icon-button { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid #344550; border-radius: 7px; background: #1b2832; color: #c4d6dc; }
.icon-button:hover { border-color: var(--cyan); color: var(--cyan); }
.icon-button svg { width: 15px; height: 15px; }
.notification-button { position: relative; }
.notification-button i { position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.avatar { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 7px; background: #335364; color: #e5f8fb; font-size: 8px; font-weight: 750; }
.notification-popover { position: absolute; z-index: 10; top: 46px; right: 50px; width: min(270px, calc(100% - 20px)); padding: 16px; border: 1px solid #43606c; border-radius: 10px; background: #1b2b35; box-shadow: 0 20px 40px rgba(0,0,0,.35); }
.notification-popover strong { font-size: 12px; }.notification-popover p { color: #a3b7c0; font-size: 11px; line-height: 1.55; }.notification-popover button { width: 100%; padding: 9px; border: 1px solid #47798a; border-radius: 6px; background: #203d4a; color: #bcebf1; font-size: 10px; text-align: left; }.notification-popover button span { float: right; }
.dash-view { padding: 24px; }
.view-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.view-eyebrow, .panel-kicker { color: #63c5d3; font-size: 8px; font-weight: 780; letter-spacing: .16em; }
.view-heading h2 { display: flex; align-items: center; gap: 10px; margin: 7px 0 4px; font-size: 23px; letter-spacing: -.045em; font-weight: 690; }
.view-heading p { margin: 0; color: #8497a3; font-size: 10px; }
.heading-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(118,220,180,.1); }
.range-switch, .filter-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid #30424d; border-radius: 7px; background: #17242d; }
.range-switch button, .filter-switch button { min-height: 26px; padding: 0 9px; border: 0; border-radius: 4px; background: transparent; color: #8098a5; font-size: 9px; font-weight: 650; white-space: nowrap; }
.range-switch button:hover, .filter-switch button:hover { color: #eaf7f8; }
.range-switch button.is-active, .filter-switch button.is-active { background: #314b58; color: #d6f5f8; }
.view-total { padding: 8px 10px; border: 1px solid #30424d; border-radius: 6px; color: #9fb9c1; font-size: 9px; font-weight: 750; letter-spacing: .1em; white-space: nowrap; }

/* Overview */
.metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 10px; }
.metrics article { min-width: 0; min-height: 106px; padding: 14px 15px 12px; border: 1px solid #2b3a44; border-radius: 8px; background: #19252e; }
.metrics article > span { color: #91a7b1; font-size: 8px; font-weight: 740; letter-spacing: .09em; }
.metrics strong { display: block; margin: 10px 0 6px; font-size: 27px; font-weight: 690; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.045em; }
.metrics strong small { color: #79909b; font-size: 14px; font-weight: 500; }
.metrics p { display: flex; align-items: center; gap: 6px; margin: 0; color: #8196a0; font-size: 9px; white-space: nowrap; }
.metric-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }.metric-dot.cyan { background: var(--cyan); }.metric-dot.coral { background: var(--red); }.metric-dot.violet { background: var(--violet); }
.overview-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(230px,.7fr); gap: 10px; }
.panel { min-width: 0; border: 1px solid #2b3b45; border-radius: 8px; background: #19252e; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 15px 12px; }
.panel-heading h3, .types-panel h3 { margin: 5px 0 0; font-size: 13px; font-weight: 650; letter-spacing: -.02em; }
.panel-action { padding: 0; border: 0; background: transparent; color: #a9dce2; font-size: 9px; font-weight: 650; white-space: nowrap; }.panel-action:hover { color: white; }.panel-action span { margin-left: 4px; }
.monitor-grid { display: grid; grid-template-columns: 1.4fr .85fr; gap: 6px; padding: 0 9px; }
.feed { position: relative; height: 212px; overflow: hidden; border: 1px solid #3b525e; border-radius: 5px; background: #25313c; }
.feed video, .camera-media video { width: 100%; height: 100%; object-fit: cover; }
.feed-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35),transparent 45%,rgba(0,0,0,.55)); pointer-events: none; }
.feed-live { position: absolute; z-index: 2; top: 9px; left: 9px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 6px; border: 1px solid rgba(125,227,239,.3); border-radius: 4px; background: rgba(12,26,34,.78); color: #dbf9fb; font-size: 8px; font-weight: 800; letter-spacing: .06em; }
.feed-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
.feed-name { position: absolute; z-index: 2; bottom: 12px; left: 10px; color: #fff; font-size: 10px; font-weight: 690; text-shadow: 0 1px 7px #000; }
.feed > button { position: absolute; z-index: 3; right: 8px; bottom: 8px; display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(255,255,255,.32); border-radius: 5px; background: rgba(11,20,27,.7); color: white; }.feed > button:hover { background: #235563; border-color: var(--cyan); }
.feed > button svg { width: 14px; height: 14px; }
.roi { position: absolute; z-index: 1; inset: 31% 22% 19% 24%; border: 1px solid rgba(126,240,174,.8); transform: skew(-7deg) rotate(-4deg); box-shadow: 0 0 12px rgba(126,240,174,.15); pointer-events: none; }
.roi::before, .roi::after { content: ""; position: absolute; width: 6px; height: 6px; border: 1px solid #a8ffc8; background: #1f7e50; }.roi::before { top: -4px; left: -4px; }.roi::after { bottom: -4px; right: -4px; }
.monitor-footer { display: flex; justify-content: space-between; gap: 9px; padding: 10px 13px 12px; color: #7f95a1; font-size: 8px; }
.monitor-footer span:first-child { color: #b8cad0; }.monitor-footer i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: var(--green); }
.alert-count { padding: 5px 6px; border-radius: 4px; background: rgba(241,123,123,.12); color: #ed9999; font-size: 8px; font-weight: 750; letter-spacing: .06em; white-space: nowrap; }
.compact-events { display: grid; margin: 0 10px; }
.compact-events button { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 51px; padding: 6px 3px; border: 0; border-bottom: 1px solid #2c3a44; background: transparent; color: var(--text); text-align: left; }.compact-events button:hover { background: rgba(125,227,239,.04); }.compact-events button:last-child { border-bottom: 0; }
.event-icon { display: grid; width: 24px; height: 24px; flex: none; place-items: center; border-radius: 5px; font-size: 12px; font-weight: 750; }
.event-icon.critical { background: rgba(241,123,123,.15); color: #fa9d9d; }.event-icon.warning { background: rgba(239,184,107,.14); color: #efc58b; }.event-icon.info { background: rgba(125,227,239,.11); color: #a8e9ef; }
.compact-events strong, .compact-events small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-events strong { font-size: 9px; font-weight: 650; }.compact-events small { margin-top: 3px; color: #8096a1; font-size: 8px; }.compact-events time { color: #7f919b; font-size: 8px; }
.event-footer { display: flex; justify-content: space-between; width: calc(100% - 20px); margin: 7px 10px 10px; padding: 10px 6px 0; border: 0; border-top: 1px solid #2d3c46; background: transparent; color: #a9dce2; text-align: left; font-size: 9px; font-weight: 650; }.event-footer:hover { color: #fff; }
.trend-panel { margin-top: 10px; }
.chart-legend { display: flex; align-items: center; gap: 6px; color: #8da5ae; font-size: 8px; }.chart-legend i { width: 6px; height: 6px; border-radius: 2px; background: var(--cyan); }
.chart-area { display: flex; gap: 10px; height: 95px; padding: 0 16px 0 15px; }
.chart-grid { display: flex; width: 20px; flex-direction: column; justify-content: space-between; color: #5e7682; font-size: 8px; }
.chart-bars { display: flex; flex: 1; align-items: end; justify-content: space-around; gap: 5px; padding: 0 8px; border-bottom: 1px solid #3b5663; background: repeating-linear-gradient(to top, transparent 0, transparent calc(33.33% - 1px), #2b3b45 calc(33.33% - 1px), #2b3b45 33.33%); }
.chart-bars i { width: 100%; max-width: 25px; height: var(--bar-height); min-height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg,#9be9ef,#338ea4); opacity: .9; transition: height .35s; }
.chart-bars i:nth-child(3n) { background: linear-gradient(180deg,#b9f7fb,#5fc9d7); }
.chart-labels { display: flex; justify-content: space-between; gap: 10px; padding: 7px 17px 13px 45px; color: #718793; font-size: 8px; }

/* Cameras, events, analytics */
.view-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.search-field { display: flex; align-items: center; gap: 8px; width: min(280px,100%); min-height: 34px; padding: 0 10px; border: 1px solid #314550; border-radius: 7px; background: #1a2832; color: #8198a4; }
.search-field:focus-within { border-color: var(--cyan); }
.search-field svg { width: 14px; height: 14px; flex: none; }
.search-field input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: #f5fcfd; font-size: 10px; }
.search-field input::placeholder { color: #78909c; }
.camera-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.camera-card { overflow: hidden; border: 1px solid #2d414c; border-radius: 9px; background: #1a2730; }
.camera-media { position: relative; height: 190px; overflow: hidden; background: #202e36; }
.camera-media .roi { inset: 29% 27% 22% 23%; }
.camera-offline { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: #7e95a0; background: radial-gradient(circle at 50% 50%,#283944,#1b2932 70%); }
.camera-offline svg { width: 29px; height: 29px; opacity: .6; }.camera-offline strong { color: #b8c8cf; font-size: 12px; }.camera-offline span { font-size: 9px; }
.camera-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 63px; padding: 11px 13px; }
.camera-info strong, .camera-info span { display: block; }.camera-info strong { font-size: 11px; }.camera-info div > span { margin-top: 5px; color: #8095a0; font-size: 9px; }
.camera-info button { display: grid; width: 29px; height: 29px; flex: none; place-items: center; border: 1px solid #3b515e; border-radius: 5px; background: #21323c; color: #bbd9df; }.camera-info button:hover { color: var(--cyan); border-color: var(--cyan); }
.camera-info button svg { width: 14px; height: 14px; }
.offline-tag { padding: 6px; border-radius: 4px; background: #34414a; color: #a4b5bd; font-size: 8px; font-weight: 750; white-space: nowrap; }
.empty-state { padding: 22px; border: 1px dashed #3c5360; border-radius: 8px; color: #a7bbc4; font-size: 11px; text-align: center; }
.event-list { overflow: hidden; border: 1px solid #30424d; border-radius: 8px; background: #19262f; }
.event-row { display: grid; grid-template-columns: 30px minmax(0,1fr) 85px 96px 16px; align-items: center; gap: 14px; width: 100%; min-height: 71px; padding: 10px 17px; border: 0; border-bottom: 1px solid #30404a; background: transparent; color: #ecf4f6; text-align: left; }
.event-row:hover { background: #223440; }.event-row:last-child { border-bottom: 0; }
.event-row .event-icon { width: 28px; height: 28px; }.event-main strong,.event-main small { display: block; }.event-main strong { font-size: 11px; }.event-main small { margin-top: 5px; color: #8ea3ad; font-size: 9px; }.event-row time { color: #91a5ae; font-size: 9px; white-space: nowrap; }.severity { font-size: 9px; font-weight: 660; }.critical-text { color: #f4a3a3; }.warning-text { color: #eec58d; }.info-text { color: #a4dae4; }.row-arrow { color: #6c9fb0; font-size: 15px; }
.analytics-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(200px,.65fr); gap: 12px; }
.analytics-chart .panel-heading strong { font-size: 25px; letter-spacing: -.05em; }
.analytics-chart .chart-area { height: 205px; margin-top: 15px; }.analytics-chart .chart-labels { padding-bottom: 18px; }
.types-panel { padding: 16px; }.types-panel h3 { margin-top: 6px; }
.donut { display: grid; width: 158px; height: 158px; place-items: center; margin: 20px auto 15px; border-radius: 50%; background: conic-gradient(var(--cyan) 0 42%,var(--violet) 42% 75%,var(--amber) 75% 100%); }
.donut::before { content: ""; grid-area: 1/1; width: 106px; height: 106px; border-radius: 50%; background: #19252e; }
.donut span { z-index: 1; grid-area: 1/1; font-size: 26px; font-weight: 690; }.donut small { display: block; color: #93a8b2; font-size: 9px; font-weight: 500; text-align: center; }
.donut-legend { display: grid; gap: 9px; }.donut-legend span { display: flex; align-items: center; gap: 7px; color: #9fb2bb; font-size: 9px; }.donut-legend i { width: 6px; height: 6px; border-radius: 2px; }.legend-a { background: var(--cyan); }.legend-b { background: var(--violet); }.legend-c { background: var(--amber); }.donut-legend b { margin-left: auto; color: #dbe9ec; }
.analytics-notes { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 12px; }
.analytics-notes article { padding: 14px; border: 1px solid #2f404b; border-radius: 8px; background: #19252e; }.analytics-notes span { display: block; margin-bottom: 17px; color: var(--cyan); font-size: 9px; }.analytics-notes strong { font-size: 11px; }.analytics-notes p { margin: 6px 0 0; color: #879da7; font-size: 9px; line-height: 1.5; }
.stage-caption { display: flex; justify-content: space-between; gap: 14px; padding-top: 17px; color: #73848e; font-size: 10px; }.stage-caption span:first-child { font-weight: 690; letter-spacing: .12em; }

/* Below fold */
.below { padding: 112px 0; background: #f0f3f2; color: #192831; }
.below-heading { display: grid; grid-template-columns: 1fr 380px; align-items: end; gap: 60px; }
.section-kicker { color: #4a8797; font-size: 11px; font-weight: 750; letter-spacing: .15em; }
.below h2, .bottom-cta h2 { margin: 20px 0 0; font-size: clamp(43px,5vw,70px); font-weight: 680; line-height: 1.06; letter-spacing: -.068em; }
.below-heading > p { margin: 0 0 5px; color: #65747c; font-size: 16px; line-height: 1.65; }
.below-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 50px; }
.below-cards article { min-height: 230px; padding: 25px; border: 1px solid #dae2e4; border-radius: 11px; background: #fff; }
.below-cards span { color: #5099a9; font-size: 11px; font-weight: 700; }.below-cards h3 { margin: 70px 0 9px; font-size: 20px; letter-spacing: -.04em; }.below-cards p { margin: 0; color: #697b83; font-size: 13px; line-height: 1.6; }
.bottom-cta { padding: 83px 0; background: radial-gradient(circle at 80% 50%,rgba(34,128,153,.17),transparent 35%),#101b23; }
.bottom-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }.bottom-cta h2 { margin: 14px 0 0; }.bottom-cta p { margin: 17px 0 0; color: #9eafb8; font-size: 15px; }.bottom-cta .button { white-space: nowrap; }
.site-footer { border-top: 1px solid #26333c; background: #0c141a; color: #748a96; font-size: 11px; }.site-footer .shell { display: flex; justify-content: space-between; gap: 18px; padding: 25px 0; }

/* Dialogs */
dialog { max-height: min(90vh,900px); padding: 0; border: 1px solid #45616d; border-radius: 13px; background: #182630; color: var(--text); box-shadow: 0 35px 100px rgba(0,0,0,.65); }
dialog::backdrop { background: rgba(3,9,13,.78); backdrop-filter: blur(6px); }
.detail-dialog { width: min(calc(100% - 32px),460px); }.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 17px; border-bottom: 1px solid #334953; color: #9fdce5; font-size: 9px; font-weight: 740; letter-spacing: .13em; }.dialog-body { padding: 22px; }.dialog-severity { display: inline-block; padding: 6px 8px; border-radius: 5px; background: rgba(241,123,123,.14); color: #f6a4a4; font-size: 9px; font-weight: 750; }.dialog-severity.warning { background: rgba(239,184,107,.12); color: #efc58b; }.dialog-severity.info { background: rgba(125,227,239,.1); color: #a7e6ee; }.dialog-body h2 { margin: 16px 0 9px; font-size: 28px; letter-spacing: -.05em; }.dialog-body p { margin: 0; color: #a4b9c2; font-size: 13px; line-height: 1.6; }.dialog-body dl { margin: 22px 0; border-block: 1px solid #344650; }.dialog-body dl div { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid #344650; font-size: 11px; }.dialog-body dl div:last-child { border-bottom: 0; }.dialog-body dt { color: #8099a4; }.dialog-body dd { margin: 0; color: #e4f0f3; text-align: right; }
.camera-dialog { width: min(calc(100% - 32px),940px); }.camera-dialog-media { position: relative; height: min(56vw,520px); min-height: 220px; background: #0d171e; }.camera-dialog-media video { width: 100%; height: 100%; object-fit: contain; }.camera-dialog-media .roi { inset: 32% 25% 22% 25%; }.camera-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 19px; }.camera-dialog-foot h2 { margin: 0; font-size: 17px; }.camera-dialog-foot p { margin: 5px 0 0; color: #8fa5b0; font-size: 11px; }.camera-dialog-status { display: inline-flex; align-items: center; gap: 7px; color: #b3e7d2; font-size: 10px; white-space: nowrap; }.camera-dialog-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

@media (max-width: 1100px) {
  .dashboard { grid-template-columns: 164px minmax(0,1fr); }
  .overview-grid { grid-template-columns: 1fr; }
  .feed { height: 250px; }
  .compact-events { grid-template-columns: repeat(2,1fr); gap: 0 15px; }
}
@media (max-width: 800px) {
  .shell { width: min(calc(100% - 30px),1240px); }
  .site-nav { gap: 15px; }.site-nav a { font-size: 11px; }
  .header-inner { gap: 15px; }.header-cta { font-size: 11px; }
  .product-stage { margin-top: 35px; }
  .dashboard { display: block; }
  .dash-sidebar { display: block; border-right: 0; border-bottom: 1px solid #2a3942; }
  .dash-brand,.sidebar-label,.sidebar-bottom { display: none; }
  .dash-nav { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; padding: 5px; }
  .dash-nav button { justify-content: center; gap: 5px; padding: 0 6px; font-size: 10px; }.dash-nav button b { display: none; }
  .dash-topbar { min-height: 48px; }
  .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .analytics-grid { grid-template-columns: 1fr; }
  .types-panel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }.types-panel h3 { grid-column: 1; }.types-panel .donut { grid-column: 2; grid-row: 1 / span 2; margin: 0; }.donut-legend { grid-column: 3; grid-row: 1 / span 2; }
  .below-heading { grid-template-columns: 1fr; gap: 25px; }.below-heading > p { max-width: 530px; }
}
@media (max-width: 620px) {
  .site-header { height: 63px; }.site-nav { display: none; }.header-cta { margin-left: auto; padding: 10px 12px; }
  .brand { font-size: 18px; }
  .hero { padding-top: 50px; }.hero h1 { font-size: clamp(45px,10vw,65px); }.hero-copy > p { font-size: 15px; }
  .hero-actions { flex-direction: column; width: min(100%,320px); margin-inline: auto; }
  .stage-top { grid-template-columns: 1fr auto; height: 31px; padding: 0 8px; font-size: 7px; }.stage-top > span:nth-child(2) { display: none; }
  .product-stage { width: calc(100% - 14px); border-radius: 10px; }.dashboard { margin: 0 4px 4px; border-radius: 6px; }
  .dash-nav button { min-height: 42px; flex-direction: column; gap: 3px; font-size: 9px; }.dash-nav svg { width: 15px; height: 15px; }
  .dash-topbar { padding: 0 11px; }.clock { display: none; }.topbar-right { gap: 7px; }.demo-pill { font-size: 7px; }.avatar { display: none; }
  .dash-view { padding: 16px 11px; }.view-heading { align-items: flex-start; flex-direction: column; gap: 13px; }.view-heading h2 { font-size: 21px; }
  .metrics { gap: 7px; }.metrics article { min-height: 98px; padding: 11px; }.metrics strong { font-size: 23px; }.metrics p { font-size: 8px; }
  .feed { height: 175px; }.monitor-grid { grid-template-columns: 1fr; }.feed-small { height: 145px; }
  .compact-events { grid-template-columns: 1fr; }.trend-panel { display: none; }
  .view-controls { align-items: stretch; flex-direction: column; }.search-field { width: 100%; }.filter-switch { align-self: flex-start; }
  .camera-grid { grid-template-columns: 1fr; }.camera-media { height: 185px; }
  .event-row { grid-template-columns: 26px minmax(0,1fr) auto; gap: 8px; padding: 11px; }.event-row .severity,.event-row .row-arrow { display: none; }.event-row time { font-size: 8px; }
  .analytics-chart .chart-area { height: 170px; }.types-panel { display: block; }.types-panel .donut { margin: 18px auto; }.analytics-notes { grid-template-columns: 1fr; }.analytics-notes article { padding: 12px; }.analytics-notes span { margin-bottom: 7px; }
  .stage-caption { flex-direction: column; gap: 5px; padding-left: 6px; font-size: 9px; }
  .below { padding: 75px 0; }.below h2,.bottom-cta h2 { font-size: 45px; }.below-cards { grid-template-columns: 1fr; margin-top: 34px; }.below-cards article { min-height: 165px; }.below-cards h3 { margin-top: 36px; }
  .bottom-cta { padding: 70px 0; }.bottom-cta-inner { align-items: flex-start; flex-direction: column; }
  .site-footer .shell { flex-direction: column; gap: 6px; }
}
@media (max-width: 380px) {
  .hero-badge { font-size: 9px; }.hero h1 { font-size: 42px; }
  .range-switch button,.filter-switch button { padding-inline: 7px; font-size: 8px; }
  .dash-nav button { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* The embedded application reproduces the original Deepvizor layout. */
.product-stage { width: min(calc(100% - 48px), 1480px); }
.product-frame { display: block; width: 100%; aspect-ratio: 1748 / 904; border: 0; background: #0a0e13; }
.stage-caption { width: min(calc(100% - 48px), 1480px); }
.stage-caption a { color: #b7d6df; text-decoration: none; }
.stage-caption a:hover { color: white; }
@media (max-width: 600px) {
  .product-stage { width: calc(100% - 20px); }
  .stage-caption { width: calc(100% - 30px); line-height: 1.8; }
}