:root { --ink: #101827; --paper: #f6f8fb; --line: #d8e0eb; --signal: #00c2d1; --electric: #3154d8; }
.site-shell { background: var(--paper); }
.eyebrow-label { font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.hero-grid { background-color: #0b1220; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 34px 34px; }
.hero-aurora { background: radial-gradient(circle at 78% 20%, rgba(0,194,209,.35), transparent 25rem), radial-gradient(circle at 18% 86%, rgba(49,84,216,.55), transparent 30rem), #0b1220; }
.hero-security { background: radial-gradient(circle at 85% 20%, rgba(249,115,22,.35), transparent 26rem), radial-gradient(circle at 12% 78%, rgba(220,38,38,.32), transparent 30rem), #160d12; }
.hero-training { background: radial-gradient(circle at 75% 10%, rgba(250,204,21,.32), transparent 25rem), radial-gradient(circle at 12% 82%, rgba(16,185,129,.32), transparent 28rem), #0b1c1b; }
.page-hero { isolation: isolate; position: relative; overflow: hidden; }
.page-hero:before { content: ''; position:absolute; inset: 0; opacity: .5; background-image: linear-gradient(115deg, transparent 0 47%, rgba(255,255,255,.08) 47% 48%, transparent 48% 100%); pointer-events:none; }
.panel-dark { background: rgba(12, 21, 37, .82); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 80px rgba(0,0,0,.24); }
.product-card { border: 1px solid var(--line); background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(15,23,42,.12); }
.service-icon { display:grid; place-items:center; width:3.1rem; height:3.1rem; border-radius:1rem; background:#e8efff; color:#1e40af; }
.home-service-card { position:relative; overflow:hidden; min-height: 14rem; }
.home-service-card:after { content:''; position:absolute; width:12rem; height:12rem; border-radius:50%; right:-4rem; bottom:-5rem; background: var(--card-tint, #dbeafe); opacity:.75; }
.home-service-card > * { position:relative; z-index:1; }
.service-tile { border:1px solid #d7e0ea; background: #fff; min-height: 11rem; transition:.2s ease; }
.service-tile:hover { border-color:#38bdf8; transform:translateY(-3px); box-shadow:0 18px 32px rgba(15,23,42,.1); }
.service-tile .tile-mark { width:3.25rem; height:3.25rem; display:grid; place-items:center; border-radius: 1rem; background:#0f172a; color:#67e8f9; }
.diagram { position:relative; min-height: 330px; overflow:hidden; border-radius: 1.75rem; color:#e6f7ff; background:linear-gradient(145deg,#111f38,#07111f); border:1px solid rgba(103,232,249,.32); box-shadow:0 24px 55px rgba(2,6,23,.33); }
.diagram:before { content:''; position:absolute; inset:0; opacity:.2; background-image: radial-gradient(#67e8f9 1px,transparent 1px); background-size:16px 16px; }
.diagram-label { position:absolute; z-index:2; border:1px solid rgba(165,243,252,.35); background:rgba(8, 25, 43,.86); border-radius:.8rem; padding:.55rem .7rem; font-size:.72rem; font-weight:800; line-height:1.2; box-shadow:0 8px 20px rgba(0,0,0,.22); }
.diagram-node { position:absolute; z-index:2; display:grid; place-items:center; width:3.6rem; height:3.6rem; border-radius:1rem; color:#0f172a; background:#a5f3fc; box-shadow:0 0 0 8px rgba(165,243,252,.1); }
.diagram-line { position:absolute; z-index:1; height:2px; background:linear-gradient(90deg,#67e8f9,rgba(103,232,249,.1)); transform-origin:0 0; }
.visual-vehicle .lane { position:absolute; bottom:0; width:32%; height:78%; background:repeating-linear-gradient(90deg,#283a4f 0 36px,#fafafa 36px 42px); transform:skewX(-8deg); border-left:1px solid rgba(255,255,255,.16); }
.visual-vehicle .barrier { position:absolute; z-index:3; height:8px; width:48%; background:repeating-linear-gradient(90deg,#facc15 0 20px,#111827 20px 40px); border-radius:9px; transform:rotate(-8deg); }
.visual-vehicle .scanner { position:absolute; z-index:4; width:70px; height:70px; border:2px solid #67e8f9; border-radius:50%; box-shadow:0 0 0 16px rgba(103,232,249,.08); }
.visual-cctv .lens { position:absolute; z-index:3; width:150px; height:150px; border-radius:50%; border:16px solid #182c43; background:radial-gradient(circle at 42% 36%,#e0fbff 0 5%,#38bdf8 6% 14%,#123456 15% 41%,#020617 42%); box-shadow:0 0 0 7px #7dd3fc22; }
.visual-cctv .screen { position:absolute; z-index:2; width:38%; aspect-ratio:1.35; border:2px solid #38bdf8; background:linear-gradient(145deg,#1c4060,#0d1b2e); border-radius:.7rem; }
.visual-fire { background:linear-gradient(140deg,#24100e,#150d14); border-color:#fb923c66; }
.visual-fire:before { background-image:radial-gradient(#fdba74 1px,transparent 1px); }
.visual-fire .pipe { position:absolute; z-index:2; border:8px solid #ef4444; border-left:0; border-bottom:0; border-radius:0 2rem 0 0; }
.visual-fire .sensor { position:absolute; z-index:3; width:2.4rem; height:2.4rem; border-radius:50%; background:#fde68a; border:7px solid #ef4444; box-shadow:0 0 26px #fb923c; }
.visual-alarm .zone { position:absolute; z-index:2; border:2px solid #fbbf24; border-radius:1rem; background:rgba(251,191,36,.07); }
.visual-alarm .pulse { position:absolute; z-index:3; width:2rem; height:2rem; border-radius:50%; background:#fbbf24; box-shadow:0 0 0 12px rgba(251,191,36,.12),0 0 0 25px rgba(251,191,36,.06); }
.visual-fence .post { position:absolute; bottom:1rem; width:8px; height:80%; background:#94a3b8; }
.visual-fence .wire { position:absolute; left:8%; right:8%; height:2px; background:#fbbf24; box-shadow:0 0 12px #fbbf24; }
.visual-gate .gate { position:absolute; z-index:2; bottom:1.8rem; width:64%; height:55%; border:7px solid #94a3b8; background:repeating-linear-gradient(90deg,transparent 0 24px,#94a3b8 24px 29px); }
.visual-metal .portal { position:absolute; z-index:2; left:32%; top:14%; width:36%; height:70%; border:17px solid #a5f3fc; border-bottom:0; border-radius:2rem 2rem 0 0; box-shadow:0 0 34px rgba(103,232,249,.2); }
.visual-metal .wave { position:absolute; z-index:3; height:2px; width:55%; background:#fbbf24; transform:rotate(-24deg); box-shadow:0 0 18px #fbbf24; }
.visual-parking .bay { position:absolute; z-index:2; width:35%; height:27%; border:2px solid #7dd3fc; border-radius:.8rem; background:rgba(14,116,144,.12); }
.visual-parking .car { position:absolute; z-index:3; width:34px; height:62px; background:#facc15; border-radius:8px; box-shadow:0 0 17px rgba(250,204,21,.5); }
.form-surface { background:linear-gradient(145deg,#f0f9ff,#fff 50%,#eef2ff); }
@media (max-width: 640px) { .diagram { min-height: 270px; } .page-hero { min-height: unset; } }