:root{
  --bg: #f6fbff;
  --primary: #a7d8f0;
  --accent: #6fb8dc;
  --soft: #ffffff;
  --muted: #7b8a95;
  --card-shadow: 0 6px 20px rgba(103,130,144,0.08);
  --radius: 14px;
  --radius-sm: 8px;
  --max-width: 1100px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--bg);
  color:#1f2a33;
}

a{color:inherit;text-decoration:none}
.container{max-width:var(--max-width);margin:0 auto;padding:24px}
.nav{
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,251,255,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(111,184,220,0.18);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand-badge{
  width:38px;height:38px;border-radius:12px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: var(--card-shadow);
}
.nav-links{display:flex;gap:14px;flex-wrap:wrap}
.nav-links a{padding:10px 12px;border-radius:10px;color:rgba(31,42,51,0.8)}
.nav-links a:hover{background:rgba(167,216,240,0.35)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 14px;border-radius:12px;border:0;cursor:pointer;
  background: var(--accent); color:#fff; font-weight:700;
  box-shadow: var(--card-shadow);
}
.btn:hover{filter:brightness(0.98)}
.btn.secondary{background: rgba(111,184,220,0.16); color:#176b8f}

.hero{
  padding: 42px 0 10px;
}
.grid{
  display:grid;grid-template-columns: 1.2fr 0.8fr; gap:18px;
}
@media (max-width: 900px){ .grid{grid-template-columns:1fr} }

.card{
  background: var(--soft);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(111,184,220,0.14);
}
.card.pad{padding:20px}
.h1{font-size:42px;line-height:1.05;margin:0 0 12px}
.p{color:var(--muted);font-size:16px;line-height:1.6;margin:0}

.pill{
  display:inline-flex;gap:8px;align-items:center;
  padding:8px 10px;border-radius:999px;
  background: rgba(167,216,240,0.35);
  border: 1px solid rgba(111,184,220,0.25);
  color:#2b4b5e;font-weight:700;font-size:13px;
}

.section{padding: 22px 0}
.section h2{margin:0 0 12px;font-size:24px}
.split{display:grid;grid-template-columns: 1fr 1fr; gap:16px}
@media (max-width: 900px){ .split{grid-template-columns:1fr} }

.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.tab{
  padding:10px 12px;border-radius:12px;
  background: rgba(167,216,240,0.25);
  border:1px solid rgba(111,184,220,0.22);
  cursor:pointer;font-weight:800;color:#2b4b5e;
}
.tab.active{
  background: rgba(111,184,220,0.2);
  border-color: rgba(111,184,220,0.45);
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius: var(--radius);
  border:1px solid rgba(111,184,220,0.14);
}
.table th, .table td{
  text-align:left;padding:12px 14px;
  border-bottom:1px solid rgba(111,184,220,0.12);
}
.table th{background: rgba(167,216,240,0.25); font-size:13px; text-transform:uppercase; letter-spacing:0.06em}
.table tr:last-child td{border-bottom:0}

.form{display:grid;gap:10px}
.input{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(111,184,220,0.25);
  background:#fff;
  outline:none;
}
.input:focus{border-color: rgba(111,184,220,0.6); box-shadow: 0 0 0 4px rgba(167,216,240,0.35)}

.footer{
  padding:26px 0 40px;color:rgba(123,138,149,0.95);
}
.kpis{display:grid;grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:900px){ .kpis{grid-template-columns:1fr} }
.kpi{padding:14px;border-radius:14px;background:rgba(167,216,240,0.22);border:1px solid rgba(111,184,220,0.16)}
.kpi .big{font-size:22px;font-weight:900}
.small{font-size:13px;color:rgba(123,138,149,0.95)}
.notice{padding:10px 12px;border-radius:12px;background: rgba(167,216,240,0.22);border:1px solid rgba(111,184,220,0.16)}
.badge{font-size:12px;font-weight:800;color:#1a5f7e;background:rgba(111,184,220,0.18);padding:6px 8px;border-radius:999px}