:root{
  --accent:#2c5d85; /* steel blue */
  --accent-700:#234a6a;
  --bg:#0b1116;
  --card:#0f1620;
  --text:#e6edf3;
  --muted:#9fb3c8;
  --ring: rgba(44,93,133,.35);
  --success:#3ba55d;
  --danger:#cc4b4b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#0b1116;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;line-height:1.6}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin-inline:auto;padding:20px}
.nav{position:sticky;top:0;background:rgba(11,17,22,.85);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #1e2632;z-index:50}
.nav .inner{display:flex;align-items:center;gap:20px;justify-content:space-between;padding:12px 20px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700}
.badge{font-size:.75rem;padding:.15rem .5rem;border-radius:999px;background:var(--accent);color:#fff}
.menu{display:flex;gap:14px;flex-wrap:wrap}
.menu a{padding:.5rem .7rem;border-radius:10px}
.menu a.active, .menu a:hover{background:#102030}
.hero{padding:64px 20px;background:linear-gradient(180deg, rgba(44,93,133,.18), rgba(44,93,133,.05) 65%, transparent)}
.hero h1{font-size:clamp(1.8rem, 3.2vw, 3rem);margin:0 0 10px}
.hero p{color:var(--muted);max-width:800px}
.grid{display:grid;gap:18px;grid-template-columns:repeat(12,1fr)}
.card{background:var(--card);border:1px solid #1b2430;border-radius:18px;padding:18px}
.card h3{margin-top:0;margin-bottom:.3rem}
.kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:0;border-radius:14px;padding:.7rem 1rem;font-weight:600;cursor:pointer}
.btn:hover{background:var(--accent-700)}
.btn.secondary{background:#132231;color:#c8d7e7}
.section{padding:32px 0}
.footer{border-top:1px solid #1e2632;margin-top:32px}
.footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
input,select,textarea{width:100%;padding:.7rem .8rem;border-radius:12px;border:1px solid #223043;background:#0a121a;color:var(--text);outline:2px solid transparent;outline-offset:2px}
input:focus,select:focus,textarea:focus{outline-color:var(--ring);border-color:#2a3b50}
label{font-size:.9rem;color:#c2d0df;margin-bottom:.35rem;display:block}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
form .actions{display:flex;gap:10px;flex-wrap:wrap}
.alert{padding:.7rem .9rem;border-radius:12px;margin:.8rem 0;background:#0e171f;border:1px solid #203040}
.alert.success{border-color:#2f6b45;color:#a9e4bd}
.alert.error{border-color:#573131;color:#efb0b0}
.small{font-size:.9rem;color:#9fb3c8}
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid #1b2430;padding:.6rem;text-align:left}
code{background:#0c141d;padding:.2rem .35rem;border-radius:8px}
/* responsive helpers */
@media (max-width: 700px){
  .menu{gap:8px}
  .hero{padding:40px 16px}
}