:root{
  --bg:#07111f;--bg2:#0d1f36;--card:#10253f;--line:#22466f;--text:#eaf3ff;--muted:#9db5d3;--accent:#09d0a0;--warn:#ffc44d;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Trebuchet MS","Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at 10% 10%,#14345a,var(--bg) 45%,#050b15)}
.nav{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid #1f3f64;background:rgba(7,17,31,.92);position:sticky;top:0;z-index:10}
.brandbox{display:flex;flex-direction:column}.brandbox span{font-size:12px;color:var(--muted)}
.nav a{color:var(--text);text-decoration:none;margin-left:14px}
.shell{max-width:1180px;margin:18px auto;padding:0 16px}
.hero2,.grid2,.grid3{display:grid;gap:14px}.hero2{grid-template-columns:1.3fr 1fr}.grid2{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:1fr 1fr 1fr}
.panel,.card{background:linear-gradient(170deg,var(--card),var(--bg2));border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 18px 40px rgba(0,0,0,.28)}
h1,h2,h3{margin:0 0 10px}
p{margin:0 0 10px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.kpis div{background:rgba(255,255,255,.03);border:1px solid #2b5078;border-radius:10px;padding:10px}
.kpis span{display:block;font-size:12px;color:var(--muted)}.kpis strong{font-size:18px}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
input{width:100%;padding:11px;border:1px solid #2a5077;border-radius:10px;background:#09182b;color:var(--text);margin:0 0 10px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.btn{background:var(--accent);color:#06231c;border:none;border-radius:10px;padding:10px 12px;font-weight:700;cursor:pointer;text-decoration:none}
.btn.alt{background:#1c3f63;color:var(--text)}
.muted{color:var(--muted)}
.list{margin:0;padding-left:18px}
.big{font-size:34px;font-weight:800;color:var(--warn);margin:0}
.map-sim{min-height:220px;position:relative;overflow:hidden}
.map-sim .road{position:absolute;left:-10%;right:-10%;top:52%;height:4px;background:linear-gradient(90deg,transparent,#69b3ff,transparent);animation:move 3.2s linear infinite}
.dot{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(9,208,160,.15)}
.dot.a{top:28%;left:18%}.dot.b{top:62%;left:48%}.dot.c{top:38%;right:16%}
@keyframes move{0%{transform:translateX(-30%)}100%{transform:translateX(30%)}}
.codebox{background:#071624;border:1px solid #27476a;color:#bfe2ff;padding:14px;border-radius:10px;overflow:auto;min-height:140px}
@media (max-width:900px){.hero2,.grid2,.grid3{grid-template-columns:1fr}.kpis{grid-template-columns:1fr}.nav{padding:12px}.nav a{margin-left:8px;font-size:14px}}