@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --orange:#ff5a14; --orange-dark:#e74707; --navy:#101d2d; --blue:#1d6bdd; --ink:#10192a; --muted:#718096; --line:#e5eaf0; --soft:#f5f8fb; --white:#fff; font-family:'Manrope',Arial,sans-serif; color:var(--ink); scroll-behavior:smooth; }
* { box-sizing:border-box; }
body { margin:0; background:#fff; color:var(--ink); }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.container { width:min(1440px, calc(100% - 80px)); margin-inline:auto; }
.site-header { height:72px; position:absolute; z-index:10; inset:0 0 auto; }
.header-inner { height:72px; display:flex; align-items:center; gap:34px; padding:0 28px; border-radius:0 0 14px 14px; background:rgba(255,255,255,.98); box-shadow:0 12px 40px rgba(9,25,45,.12); }
.logo { display:flex; align-items:center; min-width:178px; }
.logo img { display:block; width:178px; height:auto; }
.main-nav { margin:auto; display:flex; align-items:center; gap:42px; font-size:13px; color:#334056; }
.main-nav a { position:relative; padding:26px 0; }
.main-nav a::after { content:""; position:absolute; height:2px; inset:auto 50% 18px; background:var(--orange); transition:.2s; }
.main-nav a:hover::after { inset-inline:0; }
.header-actions { display:flex; gap:14px; }
.button { min-height:48px; padding:0 24px; border:1px solid transparent; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; gap:18px; font-weight:700; font-size:14px; transition:transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform:translateY(-2px); }
.button-small { min-width:112px; min-height:38px; padding-inline:22px; font-size:13px; }
.button-primary { color:#fff; background:linear-gradient(135deg,#ff681f,#ff4b06); box-shadow:0 12px 25px rgba(255,86,17,.25); }
.button-primary:hover { box-shadow:0 15px 34px rgba(255,86,17,.35); }
.button-ghost { color:#18243a; border-color:#8f9baa; background:transparent; }
.button-dark { color:#fff; border-color:rgba(255,255,255,.7); background:rgba(7,17,29,.28); backdrop-filter:blur(7px); }
.menu-toggle { display:none; margin-left:auto; border:0; background:none; font-size:24px; }

.hero { min-height:675px; position:relative; overflow:hidden; color:#fff; background:#0a1725; }
.hero-bg { position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,19,31,.98) 0%,rgba(7,19,31,.82) 34%,rgba(7,19,31,.12) 73%,rgba(7,19,31,.25)),url('./assets/hero-city.png') center/cover no-repeat; }
.hero::after { content:""; position:absolute; inset:auto 0 0; height:140px; background:linear-gradient(transparent,rgba(5,17,28,.42)); }
.hero-inner { position:relative; z-index:2; min-height:675px; display:grid; grid-template-columns:minmax(420px,.78fr) minmax(650px,1.22fr); align-items:center; gap:46px; padding-top:76px; }
.hero-copy { padding:44px 0 20px 34px; }
.eyebrow { margin:0 0 24px; color:#aab7c6; font-size:11px; text-transform:uppercase; letter-spacing:.3em; font-weight:700; }
.hero h1 { max-width:600px; margin:0; font-size:clamp(44px,4.5vw,69px); line-height:1.04; letter-spacing:-.045em; }
.hero h1 em { display:block; color:var(--orange); font-style:normal; }
.hero-lead { max-width:570px; margin:26px 0 34px; color:#dce4eb; font-size:18px; line-height:1.55; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.hero-points { margin-top:55px; display:flex; flex-wrap:wrap; gap:40px; font-size:12px; color:#aeb9c5; }

.product-window { align-self:center; width:100%; border:7px solid #667586; border-radius:15px; color:var(--ink); background:#f7f9fc; box-shadow:0 35px 80px rgba(0,0,0,.5); transform:perspective(1400px) rotateY(-3deg) rotateX(1deg); overflow:hidden; }
.window-top { height:43px; padding:0 17px; display:flex; align-items:center; gap:22px; background:#fff; border-bottom:1px solid #e1e6ec; color:#25334b; font-size:9px; }
.mini-logo { display:block; width:88px; height:auto; flex:0 0 auto; }
.window-search { flex:1; border:1px solid #e1e7ee; border-radius:5px; padding:6px 11px; color:#a0a9b5; }
.window-dots { white-space:nowrap; }
.product-layout { display:grid; grid-template-columns:116px 1fr; min-height:420px; }
.product-sidebar { padding:16px 11px; display:flex; flex-direction:column; gap:17px; font-size:9px; color:#526174; background:#fff; }
.product-sidebar b { margin:-6px -4px 2px; padding:9px 7px; border-radius:5px; color:var(--orange); background:#fff0e9; }
.product-sidebar span { padding-left:6px; }
.product-main { padding:18px; overflow:hidden; }
.welcome { display:flex; justify-content:space-between; align-items:center; }.welcome small { color:#8895a5; font-size:7px; letter-spacing:.1em; }.welcome h2 { margin:3px 0 0; font-size:20px; }.welcome button { border:0; border-radius:5px; padding:10px 14px; color:#fff; background:var(--orange); font-size:9px; font-weight:700; }
.quick-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0; }.quick-grid article { min-height:58px; padding:10px; display:grid; grid-template-columns:25px 1fr; column-gap:7px; border:1px solid #dfe5eb; border-radius:6px; background:#fff; }.quick-grid i { grid-row:1/3; place-self:center; color:var(--orange); font-style:normal; font-size:16px; }.quick-grid b { font-size:8px; }.quick-grid small { color:#8491a2; font-size:6px; }
.dashboard-row { display:grid; grid-template-columns:1.5fr 1fr; gap:9px; }.system-card,.event-card { padding:10px; border:1px solid #dfe5eb; border-radius:6px; background:#fff; }.dashboard-row h3 { margin:0 0 9px; font-size:9px; }.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }.stats span { padding:8px; border:1px solid #ebeff3; border-radius:5px; }.stats b,.stats small { display:block; }.stats b { font-size:13px; }.stats small { margin-top:3px; color:#8591a1; font-size:6px; }.health { margin-top:8px; display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:7px; border-radius:4px; background:#f6f8fa; font-size:6px; }.health b { color:#20b86a; }.event-card p { display:flex; align-items:center; gap:5px; margin:7px 0; padding-bottom:6px; border-bottom:1px solid #eef1f4; font-size:7px; }.event-card time { margin-left:auto; color:#9ba5b0; }.event-card i { font-style:normal; font-size:6px; }.red{color:#e64453}.orange{color:#ff8a2a}.blue{color:#2d78e8}
.camera-strip { margin-top:10px; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }.camera-preview { position:relative; height:80px; padding:7px; border-radius:5px; color:#fff; font-size:7px; background-size:cover; overflow:hidden; }.camera-preview::after { content:""; position:absolute; inset:0; background:linear-gradient(rgba(1,9,17,.1),rgba(1,9,17,.55)); }.camera-preview { z-index:1; }.cp1{background:linear-gradient(135deg,#397079,#132737)}.cp2{background:linear-gradient(135deg,#3b7255,#15251f)}.cp3{background:linear-gradient(135deg,#8a8f94,#232d36)}.cp4{background:linear-gradient(135deg,#62685d,#202d38)}

.trust-strip { position:relative; z-index:3; border-bottom:1px solid #e8edf2; background:#fff; box-shadow:0 -10px 30px rgba(8,27,48,.04); }
.trust-grid { min-height:90px; display:grid; grid-template-columns:repeat(5,1fr); align-items:center; }
.trust-grid article { min-height:54px; padding:5px 24px; display:flex; align-items:center; gap:15px; border-right:1px solid #e4e9ef; }.trust-grid article:last-child { border:0; }.trust-grid i { color:#0e2038; font-size:26px; font-style:normal; }.trust-grid b,.trust-grid small { display:block; }.trust-grid b { font-size:12px; }.trust-grid small { margin-top:5px; color:#8895a5; font-size:10px; }
.section { padding:55px 0; }
.section-head { margin-bottom:24px; display:flex; justify-content:space-between; align-items:flex-end; gap:30px; }.section-head h2 { margin:0 0 5px; font-size:30px; letter-spacing:-.04em; }.section-head p:not(.eyebrow) { margin:0; color:var(--muted); font-size:13px; }.section-head > a { color:#376aa5; font-size:11px; text-transform:uppercase; letter-spacing:.14em; font-weight:700; white-space:nowrap; }.eyebrow-blue { margin-bottom:8px; color:#4a79b2; }
.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.feature-card { min-height:118px; padding:20px; display:grid; grid-template-columns:52px 1fr 14px; align-items:start; gap:13px; border:1px solid var(--line); border-radius:9px; background:#fff; box-shadow:0 8px 25px rgba(24,45,73,.04); transition:.2s; }.feature-card:hover { transform:translateY(-3px); border-color:#cdd8e4; box-shadow:0 14px 35px rgba(24,45,73,.09); }.feature-card .icon { width:52px; height:52px; display:grid; place-items:center; border-radius:11px; font-size:26px; font-style:normal; }.icon.warm{color:var(--orange);background:#fff0e9}.icon.navy{color:#173b68;background:#e9f1fa}.icon.blue{color:#1475ed;background:#e8f3ff}.feature-card h3 { margin:2px 0 6px; font-size:13px; line-height:1.35; }.feature-card p { margin:0; color:#8491a2; font-size:10px; line-height:1.45; }.feature-card > span { color:#59718d; }

.why-section { padding:38px 0 44px; color:#fff; background:radial-gradient(circle at 80% 20%,#173c50 0,transparent 30%),linear-gradient(110deg,#0c1a27,#112d3b); }.section-head-dark p:not(.eyebrow) { color:#9fb0be; }.section-head-dark > a { color:#fff; }.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.why-grid article { min-height:172px; position:relative; overflow:hidden; padding:23px 22px; border:1px solid #385060; border-radius:8px; background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(0,0,0,.05)); }.why-grid article::after { content:""; position:absolute; width:150px; height:150px; right:-55px; bottom:-70px; border-radius:50%; background:radial-gradient(circle,#31586d,transparent 68%); }.why-grid i { color:var(--orange); font-size:28px; font-style:normal; }.why-grid h3 { margin:10px 0; font-size:14px; line-height:1.4; }.why-grid p { max-width:200px; margin:0; color:#aab8c4; font-size:10px; line-height:1.6; }
.deployment-section { padding-top:34px; }.deployment-layout { display:grid; grid-template-columns:1fr 1.07fr; gap:30px; }.deployment-layout > div:first-child { padding-right:28px; border-right:1px solid #e1e7ed; }.section-head.compact { margin-bottom:17px; }.section-head.compact h2 { font-size:25px; }.deployment-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.deployment-grid article { min-height:254px; padding:18px; border:1px solid var(--line); border-radius:8px; }.deployment-grid i { width:45px; height:45px; display:grid; place-items:center; border-radius:9px; color:var(--orange); background:#fff1eb; font-style:normal; font-size:23px; }.deployment-grid article:nth-child(2) i { color:#1671e6; background:#e9f3ff; }.deployment-grid article:nth-child(3) i { color:#142d4f; background:#edf1f6; }.deployment-grid h3 { margin:14px 0 7px; font-size:14px; }.deployment-grid p { min-height:52px; color:#8190a1; font-size:10px; line-height:1.5; }.deployment-grid ul,.pricing-grid ul { margin:12px 0 0; padding:0; list-style:none; color:#6f7e8e; font-size:9px; line-height:2; }.deployment-grid li::before,.pricing-grid li::before { content:"✓"; margin-right:7px; color:#22b66d; font-weight:800; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.pricing-grid article { min-height:287px; position:relative; padding:20px 18px 15px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:8px; }.pricing-grid article.popular { border:2px solid var(--orange); padding:19px 17px 14px; box-shadow:0 10px 30px rgba(255,90,20,.12); }.popular-label { position:absolute; inset:-22px -2px auto; height:22px; display:grid; place-items:center; border-radius:7px 7px 0 0; color:#fff; background:var(--orange); font-size:9px; }.pricing-grid h3 { margin:0 0 4px; font-size:15px; }.pricing-grid > article > small { color:#7b8898; font-size:9px; }.pricing-grid ul { margin-bottom:10px; }.pricing-grid strong { margin-top:auto; display:block; font-size:19px; }.pricing-grid strong small { display:block; font-size:8px; font-weight:500; }.pricing-grid .button { min-height:36px; margin-top:10px; padding:0 9px; font-size:9px; }
.interface-section { padding-top:4px; }.screens-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.screens-grid article { overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 8px 24px rgba(22,41,65,.06); }.screens-grid h3 { margin:11px 13px 2px; font-size:11px; }.screens-grid p { margin:0 13px 12px; color:#8995a3; font-size:9px; }.screen-placeholder { height:143px; padding:15px; border-bottom:1px solid #e2e7ec; background:linear-gradient(180deg,#e9f0f5,#f8fafc); }.cameras-screen { display:grid; grid-template-columns:1fr 1fr; gap:5px; }.cameras-screen span { border-radius:3px; background:linear-gradient(135deg,#253e48,#7b8a7b); }.cameras-screen span:nth-child(2){background:linear-gradient(135deg,#3d6046,#1d3136)}.cameras-screen span:nth-child(3){background:linear-gradient(135deg,#3b474f,#819184)}.cameras-screen span:nth-child(4){background:linear-gradient(135deg,#18334b,#54717d)}.archive-screen div { height:100%; position:relative; border-radius:4px; background:linear-gradient(135deg,#2a4b59,#81917e); }.archive-screen div::after { content:""; position:absolute; inset:auto 5% 8px; height:10px; border-radius:4px; background:linear-gradient(90deg,var(--orange) 38%,#fff 38%); }.analytics-screen { display:flex; align-items:flex-end; gap:10px; }.analytics-screen i { flex:1; border-radius:4px 4px 0 0; background:#2876d2; }.analytics-screen i:nth-child(1){height:28%}.analytics-screen i:nth-child(2){height:60%;background:#ff641f}.analytics-screen i:nth-child(3){height:43%}.analytics-screen i:nth-child(4){height:80%;background:#ff641f}.analytics-screen i:nth-child(5){height:68%}.device-screen { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; align-items:center; }.device-screen b { display:grid; place-items:center; height:70px; border:1px solid #d4dde6; border-radius:5px; color:#22b66d; background:#fff; }
.cta-wrap { padding:0 0 26px; }.cta { min-height:118px; padding:24px 34px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:24px; border-radius:9px; color:#fff; background:linear-gradient(90deg,rgba(7,20,32,.98),rgba(7,25,39,.68)),url('./assets/hero-city.png') center 58%/cover; }.cta h2 { max-width:420px; margin:0 0 6px; font-size:24px; line-height:1.15; }.cta p { max-width:550px; margin:0; color:#b3c0cc; font-size:11px; line-height:1.5; }
footer { border-top:1px solid #edf0f3; }.footer-main { padding:26px 10px; display:grid; grid-template-columns:1.8fr repeat(3,1fr) 1.45fr; gap:36px; }.footer-brand p { color:#8995a4; font-size:9px; }.footer-main h3 { margin:3px 0 8px; font-size:10px; }.footer-main > div:not(.footer-brand) a,.footer-main address a,.footer-main address span { display:block; margin:6px 0; color:#647386; font-size:9px; font-style:normal; }.footer-main address a { color:#1a2a3d; font-weight:600; }.footer-bottom { padding:12px 0; color:#8d99a7; background:#f4f6f8; font-size:8px; }.footer-bottom .container { display:flex; justify-content:space-between; }.footer-bottom a { margin-left:24px; }
.reveal { opacity:0; transform:translateY(16px); transition:opacity .65s, transform .65s; }.reveal.visible { opacity:1; transform:none; }

@media (max-width:1200px) {
  .container { width:min(100% - 40px,1200px); }.main-nav { gap:20px; }.hero-inner { grid-template-columns:.85fr 1.15fr; gap:25px; }.hero h1 { font-size:49px; }.product-window { transform:none; }.feature-grid { grid-template-columns:repeat(2,1fr); }.trust-grid { grid-template-columns:repeat(3,1fr); padding-block:12px; }.trust-grid article:nth-child(3) { border-right:0; }.deployment-layout { grid-template-columns:1fr; }.deployment-layout > div:first-child { padding-right:0; padding-bottom:32px; border-right:0; border-bottom:1px solid #e1e7ed; }
}
@media (max-width:900px) {
  .site-header,.header-inner { height:64px; }.header-inner { padding:0 18px; }.main-nav { display:none; position:absolute; top:64px; left:20px; right:20px; padding:14px; flex-direction:column; align-items:stretch; gap:0; border-radius:0 0 12px 12px; background:#fff; box-shadow:0 20px 30px rgba(8,22,40,.18); }.main-nav.open { display:flex; }.main-nav a { padding:12px; }.header-actions { margin-left:auto; }.menu-toggle { display:block; order:3; }.hero { padding-bottom:45px; }.hero-inner { display:block; padding-top:90px; }.hero-copy { padding:36px 10px; }.product-window { width:95%; margin:auto; }.why-grid,.screens-grid { grid-template-columns:repeat(2,1fr); }.footer-main { grid-template-columns:2fr repeat(2,1fr); }.footer-main address { grid-column:1/-1; }.cta { grid-template-columns:1fr 1fr; }.cta > div { grid-column:1/-1; }
}
@media (max-width:650px) {
  .container { width:calc(100% - 28px); }.logo { min-width:auto; }.logo img { width:142px; }.header-actions .button-ghost { display:none; }.header-actions .button { min-width:auto; padding-inline:13px; }.hero { min-height:auto; }.hero-inner { min-height:auto; }.hero-copy { padding-inline:0; }.hero h1 { font-size:40px; }.hero-lead { font-size:15px; }.hero-points { margin-top:34px; gap:14px 22px; }.product-window { display:none; }.trust-grid,.feature-grid,.why-grid,.deployment-grid,.pricing-grid,.screens-grid { grid-template-columns:1fr; }.trust-grid article,.trust-grid article:nth-child(3) { border-right:0; border-bottom:1px solid #e4e9ef; }.section { padding:40px 0; }.section-head { align-items:flex-start; }.section-head h2 { font-size:25px; }.section-head > a { display:none; }.why-grid article { min-height:145px; }.pricing-grid { gap:28px; }.cta { grid-template-columns:1fr; padding:25px; }.cta > div { grid-column:auto; }.footer-main { grid-template-columns:1fr 1fr; }.footer-brand,.footer-main address { grid-column:1/-1; }.footer-bottom .container { display:block; }.footer-bottom span { display:block; margin:4px 0; }.footer-bottom a { margin:0 12px 0 0; }
}
@media (prefers-reduced-motion:reduce) { :root{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.button{transition:none} }