:root {
  --ink: #0c141a;
  --ink-2: #111e26;
  --panel: #162630;
  --steel: #7e909b;
  --mist: #e9eef1;
  --paper: #f7f9fa;
  --white: #ffffff;
  --accent: #f28b22;
  --accent-2: #ffad55;
  --line: rgba(255,255,255,.12);
  --dark-line: rgba(12,20,26,.12);
  --max: 1180px;
  --shadow: 0 20px 70px rgba(7, 18, 24, .18);
}

 * { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
img, svg { display: block; max-width: 100%; }

.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; 
padding-inline: 16px;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  text-transform: uppercase; letter-spacing: .16em; font-weight: 750; font-size: .76rem;
  color: var(--accent);
}
.eyebrow::before { content:""; width: 28px; height: 2px; background: currentColor; }
.section { padding: 92px 0; }
.section-tight { padding: 64px 0; }
.section-title { max-width: 760px; margin: 12px 0 18px; font-size: clamp(2.1rem, 4.7vw, 4.5rem); line-height: .98; letter-spacing: -.055em; }
.section-copy { max-width: 700px; color: #55646d; font-size: 1.08rem; }

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  background: rgba(8,17,23,.76); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: .25s ease;
}
.site-header.scrolled { background: rgba(8,17,23,.94); }
.nav { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display:flex; align-items:center; gap:12px; color:white; font-weight:900; letter-spacing:-.03em; }
.brand-mark {
  width: 38px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.5); display:grid; place-items:center;
  font-size:.78rem; letter-spacing:.08em; background: linear-gradient(145deg, rgba(255,255,255,.09), transparent);
}
.brand-text small { display:block; color:#9aabb5; font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; font-weight:700; margin-top:1px; }
.nav-links { display:flex; align-items:center; gap: 30px; color:#c8d2d8; font-weight:650; font-size:.92rem; }
.nav-links a:hover, .nav-links a.active { color:white; }
.nav-links .nav-cta { color: var(--ink); background:var(--accent); padding:12px 17px; border-radius:4px; }
.nav-toggle { display:none; border:0; background:transparent; color:white; font-size:1.5rem; cursor:pointer; }

.hero {
  min-height: 72svh; padding: 152px 0 74px; display:flex; align-items:end; overflow:hidden; position:relative;
  color:white; background:
   radial-gradient(circle at 78% 25%, rgba(242,139,34,.18), transparent 28%),
   radial-gradient(circle at 65% 70%, rgba(75,112,130,.22), transparent 32%),
   linear-gradient(118deg, #09131a 0%, #10232e 48%, #071016 100%);
}
.hero::before {
  content:""; position:absolute; inset:0; opacity:.21; pointer-events:none;
  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: 72px 72px;
  mask-image: linear-gradient(to right, transparent 0%, black 40%, black 100%);
}
.hero::after {
  content:""; position:absolute; width:46vw; height:46vw; max-width:720px; max-height:720px; right:-10vw; top:10vh;
  border:1px solid rgba(255,255,255,.11); border-radius:50%; box-shadow:0 0 0 70px rgba(255,255,255,.018), 0 0 0 140px rgba(255,255,255,.014);
}
.hero-grid { position:relative; z-index:2; display:grid; grid-template-columns: 1.18fr .82fr; gap:64px; align-items:end; 
/* width:100%; */
}
.hero h1 { margin:15px 0 24px; font-size:clamp(3.35rem, 7.9vw, 7.3rem); line-height:.86; letter-spacing:-.07em; max-width:880px; }
.hero h1 span { color:#91a3ad; }
.hero-copy { color:#c6d0d5; font-size:1.16rem; max-width:650px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 19px; border-radius:4px; font-weight:800; transition:.2s ease; border:1px solid transparent; }
.btn-primary { background:var(--accent); color:#111; }
.btn-primary:hover { background:var(--accent-2); transform:translateY(-1px); }
.btn-ghost { color:white; border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.03); }
.btn-ghost:hover { border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.06); }
.hero-card { border:1px solid var(--line); background:rgba(10,22,29,.58); backdrop-filter:blur(12px); padding:28px; box-shadow:var(--shadow); }
.hero-card-label { color:#8297a3; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:800; }
.hero-card strong { font-size:1.65rem; line-height:1.1; display:block; margin:8px 0 18px; }
.hero-card dl { margin:0; }
.hero-card .row { display:flex; justify-content:space-between; gap:20px; padding:11px 0; border-top:1px solid var(--line); color:#b8c4ca; font-size:.9rem; }
.hero-card dt { color:#7f919c; }
.hero-card dd { margin:0; color:#eef4f6; text-align:right; }

.trust-strip { background:#0c171e; color:white; border-top:1px solid rgba(255,255,255,.08); }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.trust-item { padding:26px 24px; border-right:1px solid rgba(255,255,255,.08); }
.trust-item:first-child { border-left:1px solid rgba(255,255,255,.08); }
.trust-item b { display:block; font-size:1.04rem; }
.trust-item span { color:#80939e; font-size:.82rem; }

.split { display:grid; grid-template-columns: .82fr 1.18fr; gap:80px; align-items:start; }
.sticky-title { position:sticky; top:120px; }
.feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.feature { background:white; border:1px solid var(--dark-line); padding:28px; min-height:225px; transition:.22s ease; }
.feature:hover { transform:translateY(-3px); box-shadow:0 16px 38px rgba(10,25,33,.08); }
.feature-number { color:var(--accent); font-weight:850; font-size:.8rem; letter-spacing:.12em; }
.feature h3 { margin:30px 0 9px; font-size:1.24rem; }
.feature p { margin:0; color:#66747c; font-size:.95rem; }

.monitoring-banner { position:relative; overflow:hidden; background:var(--ink); color:white; }
.monitoring-banner::before { content:""; position:absolute; inset:auto 0 0; height:8px; background:linear-gradient(90deg,var(--accent) 0 18%,transparent 18% 100%); }
.monitoring-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:52px; align-items:center; }
.monitoring-banner .section-copy { color:#aab9c1; }
.device-art { min-height:390px; position:relative; display:grid; place-items:center; }
.camera {
  width:min(420px,82%); aspect-ratio:1.48; border:1px solid rgba(255,255,255,.17); border-radius:16px;
  background:linear-gradient(135deg,#263943,#0e1c24 62%); box-shadow:0 38px 70px rgba(0,0,0,.28); position:relative; transform:perspective(800px) rotateY(-12deg) rotateX(4deg);
}
.camera::before { content:""; position:absolute; width:42%; aspect-ratio:1; border-radius:50%; border:1px solid rgba(255,255,255,.28); right:10%; top:16%; background:radial-gradient(circle at 42% 38%, #67808d 0 3%, #173543 4% 22%, #07131a 23% 44%, #223943 45% 46%, #0c171e 47%); box-shadow:inset 0 0 0 12px rgba(0,0,0,.2), 0 0 50px rgba(242,139,34,.10); }
.camera::after { content:"DS // REMOTE"; position:absolute; left:8%; bottom:10%; color:#8da1ac; font-size:.68rem; font-weight:800; letter-spacing:.16em; }
.camera-arm { position:absolute; width:160px; height:16px; background:#20323c; bottom:14%; left:14%; transform:rotate(-18deg); transform-origin:left; border-radius:4px; box-shadow:0 8px 18px rgba(0,0,0,.25); }
.signal { position:absolute; right:9%; top:13%; width:11px; height:11px; background:var(--accent); border-radius:50%; box-shadow:0 0 0 8px rgba(242,139,34,.12), 0 0 0 16px rgba(242,139,34,.05); }

.process { background:#e7ecef; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#cbd5da; border:1px solid #cbd5da; }
.step { background:#f7f9fa; padding:30px; min-height:270px; }
.step .num { font-size:3.5rem; line-height:1; letter-spacing:-.06em; font-weight:900; color:#c6d0d5; }
.step h3 { margin:44px 0 10px; }
.step p { color:#66757e; margin:0; font-size:.93rem; }

.contact-band { background:var(--accent); color:#111; }
.contact-grid { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:40px; }
.contact-band h2 { font-size:clamp(2.5rem,5vw,5rem); line-height:.96; letter-spacing:-.055em; margin:0; }
.contact-actions { display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.contact-band .btn-primary { background:#111b21; color:white; }
.contact-band .btn-ghost { border-color:rgba(10,20,26,.28); color:#111; background:transparent; }

footer { background:#081117; color:#a6b4bc; padding:58px 0 28px; }
.footer-grid { display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:48px; }
.footer-title { color:white; font-size:1.18rem; font-weight:850; margin-bottom:16px; }
.footer-links { display:grid; gap:8px; font-size:.92rem; }
.footer-links a:hover { color:white; }
.footer-meta { margin-top:42px; padding-top:22px; border-top:1px solid rgba(255,255,255,.09); display:flex; justify-content:space-between; gap:20px; font-size:.78rem; color:#657985; }

/* Monitoring page */
.subhero { min-height:72svh; padding:150px 0 70px; background:linear-gradient(120deg,#09131a,#122833 56%,#081117); color:white; position:relative; overflow:hidden; display:flex; align-items:end; }
.subhero::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 74% 32%,rgba(242,139,34,.2),transparent 24%); }
.subhero-grid { position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:end; }
.subhero h1 { font-size:clamp(3.2rem,7vw,6.6rem); line-height:.9; letter-spacing:-.065em; margin:15px 0 22px; }
.subhero p { color:#b7c3ca; font-size:1.15rem; max-width:680px; }
.status-panel { border:1px solid rgba(255,255,255,.13); padding:24px; background:rgba(255,255,255,.035); }
.status-line { display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid rgba(255,255,255,.09); padding:13px 0; color:#a9b8c0; font-size:.88rem; }
.status-line:last-child { border-bottom:0; }
.status-line b { color:white; font-weight:750; }
.dot { width:8px; height:8px; display:inline-block; border-radius:50%; background:#5bd78b; margin-right:7px; box-shadow:0 0 0 5px rgba(91,215,139,.1); }

.architecture { background:white; }
.arch-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:45px; }
.arch-card { border:1px solid var(--dark-line); padding:26px; position:relative; min-height:230px; }
.arch-card::after { content:"→"; position:absolute; right:-12px; top:48%; width:24px; height:24px; border:1px solid var(--dark-line); border-radius:50%; display:grid; place-items:center; background:white; z-index:2; color:#64747d; }
.arch-card:last-child::after { display:none; }
.arch-icon { width:42px; height:42px; display:grid; place-items:center; border:1px solid #d3dce0; color:var(--accent); font-weight:900; }
.arch-card h3 { margin:28px 0 8px; }
.arch-card p { margin:0; color:#69777f; font-size:.92rem; }

.use-cases { background:#0b161d; color:white; }
.use-cases .section-copy { color:#9eafb8; }
.case-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:38px; }
.case { padding:28px; min-height:245px; background:#11232d; border:1px solid rgba(255,255,255,.08); }
.case span { color:var(--accent); font-weight:800; font-size:.75rem; letter-spacing:.1em; }
.case h3 { margin:60px 0 10px; font-size:1.25rem; }
.case p { margin:0; color:#9aabb4; font-size:.93rem; }

.spec-table { margin-top:42px; border-top:1px solid #ccd5da; }
.spec-row { display:grid; grid-template-columns: .7fr 1.3fr; gap:30px; padding:23px 0; border-bottom:1px solid #ccd5da; }
.spec-row b { font-size:.96rem; }
.spec-row span { color:#64747d; }

.note { padding:16px 18px; border-left:3px solid var(--accent); background:#f0f3f5; color:#596870; font-size:.88rem; margin-top:26px; }

@media (max-width: 900px) {
  .nav-toggle { display:block; }
  .nav-links { position:absolute; left:20px; right:20px; top:74px; display:none; flex-direction:column; align-items:stretch; gap:0; background:#0d1a22; border:1px solid rgba(255,255,255,.12); padding:10px; }
  .nav-links.open { display:flex; }
  .nav-links a { padding:13px 12px; }
  .hero-grid, .split, .monitoring-grid, .contact-grid, .subhero-grid { grid-template-columns:1fr; }
  .hero { min-height:auto; padding-top:140px; }
  .hero-card { max-width:570px; }
  .trust-grid, .process-grid, .arch-grid { grid-template-columns:repeat(2,1fr); }
  .feature-grid, .case-grid { grid-template-columns:1fr; }
  .sticky-title { position:static; }
  .contact-actions { justify-content:flex-start; }
  .arch-card:nth-child(2)::after { display:none; }
}
@media (max-width: 620px) {
  .container { width:min(calc(100% - 28px), var(--max)); }
  .section { padding:70px 0; }
  .hero h1 { font-size:clamp(3rem,15vw,5rem); }
  .trust-grid, .process-grid, .arch-grid { grid-template-columns:1fr; }
  .trust-item { border-left:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }
  .feature-grid { grid-template-columns:1fr; }
  .device-art { min-height:300px; }
  .arch-card::after { display:none; }
  .footer-grid { grid-template-columns:1fr; gap:30px; }
  .footer-meta { flex-direction:column; }
  .spec-row { grid-template-columns:1fr; gap:6px; }
  .brand-text small { display:none; }
}


/* Product showcase */
.product-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.product-pills span { padding:8px 11px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.035); color:#aebcc4; font-size:.78rem; font-weight:750; letter-spacing:.03em; }
.products-section { background:#eef2f4; }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; }
.product-card { background:white; border:1px solid var(--dark-line); overflow:hidden; display:flex; flex-direction:column; min-height:510px; transition:.22s ease; }
.product-card:hover { transform:translateY(-3px); box-shadow:0 18px 44px rgba(10,25,33,.09); }
.product-visual { height:190px; background:linear-gradient(135deg,#0d1a22,#18303c); position:relative; overflow:hidden; border-bottom:4px solid var(--accent); }
.product-visual::before { content:""; position:absolute; inset:0; opacity:.24; background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px); background-size:32px 32px; }
.product-code { color:var(--accent); font-weight:900; font-size:.72rem; letter-spacing:.14em; padding:24px 26px 0; }
.product-card h3 { margin:9px 26px 10px; font-size:1.25rem; line-height:1.2; }
.product-card > p { margin:0 26px; color:#66757e; font-size:.92rem; }
.product-card ul { list-style:none; padding:0; margin:auto 26px 24px; padding-top:20px; }
.product-card li { position:relative; padding:8px 0 8px 17px; border-top:1px solid #e3e8eb; color:#56666f; font-size:.84rem; }
.product-card li::before { content:""; position:absolute; width:5px; height:5px; border-radius:50%; background:var(--accent); left:0; top:17px; }
.product-note { margin-top:18px; padding:19px 22px; background:#101e26; color:#aebbc2; border-left:4px solid var(--accent); font-size:.91rem; }
.product-note strong { color:white; }

/* Product line-art */
.camera-body { position:absolute; width:112px; height:64px; left:50%; top:52%; transform:translate(-50%,-50%) rotate(-5deg); border:1px solid rgba(255,255,255,.35); border-radius:7px; background:linear-gradient(145deg,#314955,#13242d); box-shadow:0 18px 30px rgba(0,0,0,.28); }
.camera-body::after { content:""; position:absolute; width:49px; height:49px; border:1px solid rgba(255,255,255,.35); border-radius:50%; right:-19px; top:6px; background:radial-gradient(circle,#142d39 0 25%,#07131a 27% 48%,#314852 50% 53%,#0a171e 55%); }
.camera-body i { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--accent); left:10px; top:10px; box-shadow:0 0 0 6px rgba(242,139,34,.1); }
.camera-base { position:absolute; width:70px; height:9px; background:#38505b; left:calc(50% - 78px); top:67%; transform:rotate(-15deg); transform-origin:right; }
.ptz-dome { position:absolute; width:104px; height:78px; left:50%; top:52%; transform:translate(-50%,-50%); border-radius:12px 12px 54px 54px; background:linear-gradient(#3b505a,#172933 58%,#07131a 59%); border:1px solid rgba(255,255,255,.3); box-shadow:0 18px 30px rgba(0,0,0,.28); }
.ptz-dome::after { content:""; position:absolute; width:36px; height:36px; border-radius:50%; background:radial-gradient(circle,#25404d 0 22%,#07131a 24% 54%,#405967 56% 59%,#07131a 61%); left:34px; top:30px; }
.ptz-neck { position:absolute; width:48px; height:22px; background:#40545e; left:50%; top:24%; transform:translateX(-50%); border-radius:6px 6px 0 0; }
.mast { position:absolute; width:5px; height:92px; background:#58707c; left:50%; top:24px; }
.mini-cam { position:absolute; width:54px; height:28px; left:calc(50% + 3px); top:38px; background:#293e49; border:1px solid rgba(255,255,255,.25); transform:rotate(-4deg); }
.mini-cam::after { content:""; position:absolute; width:22px; height:22px; border-radius:50%; right:-11px; top:2px; background:#07131a; border:1px solid #657985; }
.unit-box { position:absolute; width:100px; height:56px; left:50%; bottom:25px; transform:translateX(-50%); background:#172b35; border:1px solid rgba(255,255,255,.28); box-shadow:0 18px 30px rgba(0,0,0,.28); }
.unit-box::after { content:"CELLULAR"; position:absolute; right:10px; bottom:7px; font-size:.52rem; color:#8da0aa; letter-spacing:.12em; font-weight:850; }
.rack-unit { position:absolute; width:150px; height:68px; left:50%; top:50%; transform:translate(-50%,-50%); background:#152932; border:1px solid rgba(255,255,255,.3); box-shadow:0 18px 30px rgba(0,0,0,.28); }
.rack-unit::before { content:"RECORDER / NVR"; position:absolute; left:14px; top:14px; color:#80949f; font-size:.57rem; letter-spacing:.12em; font-weight:850; }
.rack-unit i { position:relative; float:right; width:7px; height:7px; margin:48px 10px 0 -3px; border-radius:50%; background:#6d818b; }
.rack-unit i:first-of-type { background:var(--accent); }
.router { position:absolute; width:142px; height:57px; left:50%; top:56%; transform:translate(-50%,-50%); background:#162a34; border:1px solid rgba(255,255,255,.3); box-shadow:0 18px 30px rgba(0,0,0,.28); }
.router::before,.router::after { content:""; position:absolute; width:3px; height:61px; background:#71848e; top:-55px; }
.router::before { left:23px; transform:rotate(-8deg); }.router::after { right:23px; transform:rotate(8deg); }
.router i { display:inline-block; width:8px; height:8px; border-radius:50%; margin:38px 0 0 13px; background:#657a85; }
.router i:first-of-type { background:var(--accent); }
.waves { position:absolute; width:55px; height:28px; border-top:1px solid rgba(242,139,34,.65); border-radius:50%; left:50%; top:30px; transform:translateX(-50%); }
.enclosure { position:absolute; width:94px; height:118px; background:#1b303a; border:1px solid rgba(255,255,255,.3); left:46%; top:50%; transform:translate(-50%,-50%); box-shadow:0 18px 30px rgba(0,0,0,.28); }
.enclosure::before { content:"IP / SITE"; position:absolute; left:12px; top:12px; color:#8497a1; font-size:.55rem; letter-spacing:.12em; font-weight:850; }
.enclosure::after { content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:var(--accent); right:12px; bottom:12px; }
.mount { position:absolute; width:66px; height:10px; background:#556b76; left:58%; top:65%; transform:rotate(-20deg); transform-origin:left; }
.mount::after { content:""; position:absolute; width:34px; height:50px; border:2px solid #556b76; border-left:0; right:-34px; top:-20px; }

@media (max-width: 900px) {
  .product-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 620px) {
  .product-grid { grid-template-columns:1fr; }
  .product-card { min-height:480px; }
}

/* Refined product visuals: fixed camera, mobile unit, installation hardware */
.fixed-camera { background:radial-gradient(circle at 68% 44%,rgba(242,139,34,.10),transparent 24%),linear-gradient(135deg,#0b171e,#1b313c); }
.fixed-rig { position:absolute; inset:0; }
.sunshield { position:absolute; width:126px; height:13px; left:50%; top:40px; transform:translateX(-44%) rotate(-5deg); border-radius:4px 8px 2px 2px; background:linear-gradient(#617782,#334953); box-shadow:0 4px 10px rgba(0,0,0,.28); }

.camera-body-pro {
    position: absolute;
    width: 112px;
    height: 58px;
    left: 50%;
    top: 79px;
    transform: translateX(-50%) rotate(-5deg);
    border-radius: 8px 4px 4px 8px;
    border: 1px solid rgba(255,255,255,.34);
    background: linear-gradient(145deg,#435a65,#1a2d36 58%,#101e25);
    box-shadow: 0 18px 28px rgba(0,0,0,.34);
}

.camera-body-pro::before { content:"DS"; position:absolute; left:13px; top:19px; color:#9badb6; font-size:.56rem; font-weight:900; letter-spacing:.16em; }
/* .camera-body-pro::after { content:""; position:absolute; right:-13px; top:8px; width:26px; height:42px; border-radius:0 7px 7px 0; background:linear-gradient(90deg,#304751,#16262e); border:1px solid rgba(255,255,255,.24); } */
.camera-body-pro i { position:absolute; left:13px; top:10px; width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px rgba(242,139,34,.08); }
.camera-body-pro span { position:absolute; right:16px; bottom:10px; width:18px; height:3px; border-radius:2px; background:#687d87; }
.lens-stack { position:absolute; width:54px; height:54px; left:calc(50% + 27px); top:82px; transform:rotate(-5deg); border-radius:50%; border:1px solid rgba(255,255,255,.32); background:radial-gradient(circle at 43% 40%,#547080 0 7%,#1d4354 8% 21%,#061117 23% 43%,#29424e 45% 49%,#0a171d 51% 63%,#455d68 65% 68%,#14252d 70%); box-shadow:0 0 0 5px #223640,0 12px 24px rgba(0,0,0,.3); }
.camera-bracket { position:absolute; width:64px; height:10px; left:calc(50% - 70px); top:131px; transform:rotate(-18deg); transform-origin:right; border-radius:3px; background:linear-gradient(#677b84,#354b55); }
.camera-bracket::after { content:""; position:absolute; left:-10px; top:-10px; width:18px; height:30px; border-radius:4px; background:#425863; }
.wall-plate { position:absolute; width:22px; height:54px; left:calc(50% - 92px); top:127px; transform:rotate(-4deg); border-radius:3px; border:1px solid rgba(255,255,255,.2); background:#243943; }

.mobile-unit { background:radial-gradient(circle at 50% 35%,rgba(242,139,34,.11),transparent 20%),linear-gradient(135deg,#0a171e,#18303b); }
.mobile-base { position:absolute; width:112px; height:66px; left:50%; bottom:18px; transform:translateX(-50%); border:1px solid rgba(255,255,255,.28); border-radius:5px 5px 9px 9px; background:linear-gradient(145deg,#263d47,#12252d); box-shadow:0 18px 28px rgba(0,0,0,.33); }
.mobile-base::before { content:"REMOTE SITE UNIT"; position:absolute; left:12px; top:10px; font-size:.47rem; letter-spacing:.12em; color:#82959e; font-weight:850; }
.cabinet-door { position:absolute; left:11px; right:11px; top:24px; bottom:10px; border:1px solid rgba(255,255,255,.12); }
.cabinet-door::after { content:""; position:absolute; right:8px; top:8px; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.wheel { position:absolute; bottom:-9px; width:18px; height:18px; border-radius:50%; background:#091217; border:4px solid #455c67; }
.wheel::after { content:""; position:absolute; inset:4px; border-radius:50%; background:#101e25; }
.w1 { left:12px; }.w2 { right:12px; }
.telescopic-mast { position:absolute; width:8px; height:92px; left:50%; top:19px; transform:translateX(-50%); background:linear-gradient(90deg,#314853,#758b94 45%,#344b55); box-shadow:0 0 0 1px rgba(255,255,255,.12); }
.telescopic-mast::before,.telescopic-mast::after { content:""; position:absolute; left:-4px; width:16px; height:3px; background:#617781; }
.telescopic-mast::before { top:25px; }.telescopic-mast::after { top:55px; }
.telescopic-mast i { position:absolute; width:3px; height:13px; background:#6d8089; top:-10px; }
.telescopic-mast i:nth-child(1){left:-12px;transform:rotate(-19deg)}.telescopic-mast i:nth-child(2){left:3px}.telescopic-mast i:nth-child(3){right:-12px;transform:rotate(19deg)}
.mobile-camera { position:absolute; top:28px; width:45px; height:24px; border-radius:4px; border:1px solid rgba(255,255,255,.25); background:linear-gradient(145deg,#39505b,#172931); box-shadow:0 8px 15px rgba(0,0,0,.25); }
.mobile-camera::after { content:""; position:absolute; top:3px; width:18px; height:18px; border-radius:50%; background:radial-gradient(circle,#1c4050 0 22%,#071219 24% 55%,#506570 57% 62%,#0c181f 64%); }
.mobile-camera.left { left:calc(50% - 50px); transform:rotate(-8deg); }.mobile-camera.left::after { left:-8px; }
.mobile-camera.right { left:calc(50% + 7px); transform:rotate(8deg); }.mobile-camera.right::after { right:-8px; }
.signal-rings { position:absolute; left:50%; top:3px; width:58px; height:29px; transform:translateX(-50%); border-top:1px solid rgba(242,139,34,.6); border-radius:50%; }
.signal-rings::before,.signal-rings::after { content:""; position:absolute; left:50%; transform:translateX(-50%); border-top:1px solid rgba(242,139,34,.45); border-radius:50%; }
.signal-rings::before { top:6px; width:42px; height:21px; }.signal-rings::after { top:12px; width:25px; height:13px; }

.install-kit { background:radial-gradient(circle at 39% 48%,rgba(242,139,34,.09),transparent 22%),linear-gradient(135deg,#0b171d,#1a313b); }
.install-scene { position:absolute; inset:0; }
.pro-enclosure { position:absolute; width:92px; height:122px; left:38%; top:50%; transform:translate(-50%,-50%); border-radius:3px; border:1px solid rgba(255,255,255,.34); background:linear-gradient(145deg,#304852,#172a33); box-shadow:0 18px 30px rgba(0,0,0,.32); }
.pro-enclosure::before { content:""; position:absolute; inset:7px; border:1px solid rgba(255,255,255,.13); }
.door-line { position:absolute; right:10px; top:15px; bottom:15px; width:1px; background:rgba(255,255,255,.08); }
.pro-enclosure i { position:absolute; right:14px; top:54px; width:7px; height:13px; border-radius:3px; background:#637983; }
.pro-enclosure span { position:absolute; left:12px; bottom:11px; font-size:.49rem; color:#879ba5; letter-spacing:.12em; font-weight:900; }
.din-rail { position:absolute; width:52px; height:7px; left:calc(38% - 26px); top:71px; background:#667b85; box-shadow:0 18px 0 #667b85; opacity:.9; }
.din-rail i { position:relative; float:left; width:11px; height:23px; margin:-8px 3px 0; background:#253a44; border:1px solid rgba(255,255,255,.18); }
.junction-box { position:absolute; width:52px; height:47px; left:65%; top:77px; transform:translate(-50%,-50%); border-radius:4px; border:1px solid rgba(255,255,255,.28); background:#243b45; box-shadow:0 11px 18px rgba(0,0,0,.25); }
.junction-box::before { content:"JBOX"; position:absolute; left:9px; top:9px; color:#869aa4; font-size:.45rem; font-weight:900; letter-spacing:.12em; }
.mount-arm-pro { position:absolute; width:72px; height:10px; left:57%; top:121px; transform:rotate(-23deg); transform-origin:left; border-radius:3px; background:linear-gradient(#6a7f89,#3c535d); }
.mount-arm-pro::after { content:""; position:absolute; right:-18px; top:-21px; width:18px; height:52px; border:3px solid #556b75; border-left:0; border-radius:0 5px 5px 0; }
.cable-gland { position:absolute; width:14px; height:10px; border-radius:5px 5px 2px 2px; background:#5d727c; border:1px solid rgba(255,255,255,.18); top:149px; }
.cable-gland::after { content:""; position:absolute; left:5px; top:9px; width:3px; height:22px; background:#202e35; }
.g1 { left:27%; }.g2 { left:35%; }