:root{
  --bg:#ffffff;
  --ink:#0b1b2b;          /* deep navy */
  --muted:#3f5368;
  --border:#d9e2ef;
  --surface:#f5f8fc;
  --focus:#0b6bcb;        /* accessible focus blue */
  --brand:#0b6bcb;        /* primary */
  --brand-2:#0f8aa8;      /* secondary accent */
  --brand-soft:#e9f3ff;   /* subtle background */
  --radius:14px;
  --shadow:0 10px 30px rgba(11,27,43,.08);
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}
a{color:inherit}
a:hover{text-decoration:underline}
a:focus, button:focus, input:focus, select:focus, textarea:focus{
  outline:3px solid var(--focus);
  outline-offset:2px;
}
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:16px; top:16px; width:auto; height:auto; padding:10px 12px;
  background:var(--bg); border:2px solid var(--focus); border-radius:10px; z-index:9999;
}
header:before{content:''; display:block; height:3px; background:linear-gradient(90deg,var(--brand),var(--brand-2));}
header{
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(12px);
}
.container{max-width:var(--max); margin:0 auto; padding:0 16px;}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand svg{width:34px; height:34px}
.brand .name{font-weight:800; letter-spacing:.2px}
nav ul{list-style:none; padding:0; margin:0; display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
nav a{display:inline-block; padding:8px 10px; text-decoration:none; border-radius:10px; color:var(--muted);}
nav a[aria-current="page"]{color:var(--ink); background:var(--brand-soft); border:1px solid var(--border);}
.nav-toggle{
  display:none; border:1px solid var(--border); background:var(--bg);
  padding:10px 12px; border-radius:12px; cursor:pointer;
}
main{padding:28px 0 48px}
.hero{
  background:linear-gradient(180deg, var(--brand-soft), rgba(245,248,252,0));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px;
  box-shadow:var(--shadow);
}
.hero h1{margin:0 0 10px; font-size:34px; line-height:1.15;}
.hero p{margin:0 0 16px; color:var(--muted); max-width:75ch;}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:11px 14px; border-radius:12px; border:1px solid var(--border);
  background:var(--bg); cursor:pointer; text-decoration:none; font-weight:700;
}
.btn.primary{background:var(--brand); color:#fff; border-color:var(--brand);}
.btn.primary:hover{filter:brightness(0.96); text-decoration:none;}
.btn.ghost{background:var(--surface);}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border); background:var(--surface);
  padding:6px 10px; border-radius:999px; color:var(--muted); font-size:14px;
}
.kpis{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.grid{display:grid; gap:14px; margin-top:18px;}
.grid.cols-3{grid-template-columns:repeat(3, 1fr);}
.grid.cols-2{grid-template-columns:repeat(2, 1fr);}
.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  background:var(--bg);
  box-shadow:0 4px 16px rgba(11,18,32,.05);
}
.card h2, .card h3{margin:0 0 8px; line-height:1.25;}
.card p{margin:0; color:var(--muted);}
.section-title{margin:28px 0 10px; font-size:22px;}
.lead{color:var(--muted); max-width:85ch}
.callout{
  border-left:5px solid var(--brand);
  background:var(--surface);
  border-radius:12px;
  padding:14px 16px;
}
.callout p{margin:0; color:var(--muted);}
.form{
  display:grid; gap:12px; max-width:740px;
}
.field{display:grid; gap:6px}
label{font-weight:700}
input, select, textarea{
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  font:inherit;
}
textarea{min-height:120px; resize:vertical}
.helper{font-size:14px; color:var(--muted)}
.tablewrap{overflow:auto; border:1px solid var(--border); border-radius:14px}
table{width:100%; border-collapse:collapse; min-width:880px}
th, td{padding:12px 10px; border-bottom:1px solid var(--border); vertical-align:top}
th{background:var(--surface); text-align:left; position:sticky; top:0}
tr:hover td{background:#fbfcfe}
.pills{display:flex; gap:8px; flex-wrap:wrap}
.pill{display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:999px; padding:4px 10px; font-size:13px; color:var(--muted); background:var(--bg)}
footer{
  border-top:1px solid var(--border);
  padding:26px 0;
  background:var(--surface);
}
.footergrid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:16px}
.small{font-size:14px; color:var(--muted)}
.muted{color:var(--muted)}
.tclist ol{margin-top:8px}
hr{border:0; border-top:1px solid var(--border); margin:24px 0}
@media (max-width: 900px){
  .grid.cols-3{grid-template-columns:1fr}
  .grid.cols-2{grid-template-columns:1fr}
  .footergrid{grid-template-columns:1fr}
  nav{display:none}
  nav[data-open="true"]{display:block}
  nav ul{flex-direction:column; align-items:flex-start; gap:6px; padding:10px 0}
  .nav-toggle{display:inline-flex}
  header .topbar{align-items:flex-start}
}