:root{
  --bg:#0B1F33; --panel:#0F2742; --ink:#E9F4FF; --muted:#A6C2D8;
  --navy:#084E91; --blue:#0A7BFF; --cyan:#4FD1FF; --line:#143756;
  --shadow: 0 16px 42px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto; color:var(--ink); background:var(--bg); line-height:1.8}
::selection{background:rgba(79,209,255,.25); color:#fff}
a{color:var(--cyan); text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1200px; margin:0 auto; padding:0 20px}
/* Nav */
.nav{position:sticky; top:0; z-index:90; background:rgba(10, 30, 47,.86); backdrop-filter: blur(8px); border-bottom:1px solid var(--line)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.brand{display:flex; align-items:center; gap:14px}
.brand img{height:90px}
.links{display:flex; align-items:center; flex-wrap:wrap}
.links a{margin-left:18px; color:var(--muted); font-weight:700}
.links a:hover{color:#fff}
.menu-btn{display:none; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#0E2D50; color:#E9F4FF; font-weight:800}
/* Hero */
.hero{padding:120px 0 70px; background-image:url('assets/hero.svg'); background-size:cover; background-position:center}
.grid{display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center}
h1{font-size:56px; line-height:1.08; margin:10px 0}
.sub{color:var(--muted); font-size:19px}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow: var(--shadow)}
.btn{display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,var(--navy),var(--cyan)); color:#fff; font-weight:900; padding:12px 18px; border-radius:14px; border:0; cursor:pointer; box-shadow:var(--shadow)}
.btn.secondary{background:#0E3A63; color:#E9F4FF; border:1px solid var(--line)}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:16px}
.kpi{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; text-align:center; box-shadow: var(--shadow)}
.kpi strong{font-size:28px; display:block; color:#A6DCFF}
.section{padding:80px 0}
.section h2{font-size:40px; margin:0 0 12px}
.lead{color:var(--muted); margin-bottom:18px}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow: var(--shadow)}
.table{width:100%; border-collapse:collapse; background:var(--panel); border-radius:12px; overflow:hidden; box-shadow: var(--shadow)}
.table th,.table td{border-bottom:1px solid var(--line); padding:12px 10px; text-align:left; vertical-align:top}
.cols2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
/* Map */
.map-wrap{border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow: var(--shadow); background:#0F2742}
#map, #hero-map{width:100%; height:420px}
.glow{position:absolute; inset:-10%; background:radial-gradient(ellipse at 30% 20%, rgba(79,209,255,.18), transparent 60%); filter:blur(40px); pointer-events:none}
.leaflet-container a{color:#fff}
.leaflet-popup-content{color:#001627}
/* Footer */
footer{border-top:1px solid var(--line); background:#0A1E2F; padding:34px 0; color:var(--muted)}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:20px}
footer .brand img{height:64px}
.small{font-size:13px; color:#9EC9E6}
.notice{padding:12px 14px; border:1px dashed var(--line); border-radius:12px; background:#0F2742}
/* Responsive */
@media (max-width:980px){
  .grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr}
  .cols2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .brand img{height:72px}
  .menu-btn{display:inline-block}
  .links{display:none; width:100%; margin-top:10px}
  .links.open{display:flex; flex-wrap:wrap}
  .links a{margin:10px 12px 0 0}
  h1{font-size:40px}
  #hero-map{height:300px}
}