/* EverPipe UI v4 */
:root{
  --brand:#0B5FFF;         /* Primary blue */
  --brand-2:#0AA84F;       /* Sustainability green */
  --ink:#0b1220;
  --muted:#4b5563;
  --bg:#f7fafc;
  --card:#ffffff;
  --border:#e5e7eb;
  --shadow: 0 6px 24px rgba(11,18,32,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:16px;
}
a{color:var(--brand)}
.wrap{max-width:1200px;margin:0 auto;padding:20px}
header{
  position:sticky; top:0; z-index:20;
  background:#fff; border-bottom:1px solid var(--border);
  backdrop-filter:saturate(180%) blur(6px);
}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:44px; width:auto; display:block}
.brand .title{font-weight:800; letter-spacing:.2px}
.badges{display:flex; gap:8px; flex-wrap:wrap}
.badge{background:#eef6ff; border:1px solid #d5e6ff; color:#082242; padding:4px 10px; border-radius:999px; font-size:12px}

nav{display:flex; gap:10px; flex-wrap:wrap; padding:10px 0 14px}
nav a{
  color:#1f2937; text-decoration:none; padding:8px 12px; border-radius:12px;
}
nav a:hover{background:#eef2ff}

.hero{
  padding:70px 0;
  background:
    radial-gradient(1000px 500px at 10% -10%, #eaf3ff, transparent 60%),
    radial-gradient(800px 400px at 90% -20%, #f2fff6, transparent 60%);
  border-bottom:1px solid var(--border);
}
h1{font-size:40px; margin:0 0 12px}
h2{font-size:26px; margin:30px 0 10px}
p.lead{font-size:18px; color:var(--muted); max-width:900px}

.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:16px}
.col-6{grid-column:span 6} .col-4{grid-column:span 4} .col-8{grid-column:span 8} .col-12{grid-column:span 12}
@media(max-width:900px){ .col-6,.col-4,.col-8{grid-column:span 12}}

.btn{
  display:inline-block; text-decoration:none; padding:12px 18px;
  border-radius:14px; color:#fff; background:var(--brand);
  box-shadow:0 8px 20px rgba(11,95,255,.18); transition:.15s transform ease, .15s box-shadow ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 28px rgba(11,95,255,.22)}
.btn.secondary{background:#111827; box-shadow:0 8px 20px rgba(0,0,0,.18)}

.card{
  background:var(--card); border:1px solid var(--border); border-radius:18px; padding:18px; margin:12px 0;
  box-shadow: var(--shadow);
}
.kpis{display:flex; gap:16px; flex-wrap:wrap}
.kpi{flex:1 1 200px; background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px; text-align:center; box-shadow:var(--shadow)}
.kpi .num{font-size:28px; font-weight:800}
.notice{background:#fff7ed; border:1px solid #fed7aa; color:#7c2d12; border-radius:12px; padding:12px}

table{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden}
th,td{padding:12px; border-bottom:1px solid #f1f5f9; text-align:left}
th{background:#f8fafc; font-weight:700}

footer{
  margin-top:40px; background:#0b1220; color:#bcd; 
}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0}
.footer-brand{display:flex; align-items:center; gap:10px}
.footer-brand img{height:32px}
footer a{color:#a7f3d0}
.small{opacity:.7; font-size:14px}