/* ===== MPI Frontend Theme ===== */
:root{
  --primary:#16A34A;        /* MPI Green */
  --primary-600:#15803D;
  --bg:#0f1f17;             /* Deep green-black */
  --card:#13231b;
  --muted:#93a39a;
  --text:#e7f5ed;
  --white:#fff;
  --gradient-hero: radial-gradient(1200px 600px at 20% -10%, rgba(22,163,74,.6), transparent 60%),
                   radial-gradient(1200px 600px at 80% 10%, rgba(34,197,94,.35), transparent 60%),
                   radial-gradient(1000px 500px at 40% 120%, rgba(20,83,45,.55), transparent 60%),
                   linear-gradient(180deg,#0b1712,#0f1f17);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji';}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1200px,92%);margin-inline:auto}
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width: 980px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 760px){.grid-3,.grid-2{grid-template-columns:1fr}}

header.site{
  position:sticky;top:0;z-index:50;background:rgba(11,23,18,.8);backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.5px}
.logo svg{width:30px;height:30px}
nav ul{display:flex;gap:16px;list-style:none;margin:0;padding:0}
nav a{padding:8px 12px;border-radius:12px;opacity:.9}
nav a:hover{background:rgba(255,255,255,.06);opacity:1}
.nav .burger{display:none}
@media(max-width:840px){
  nav ul{display:none;position:absolute;inset:60px 16px auto 16px;background:#0d1a14;padding:16px;border:1px solid rgba(255,255,255,.07);border-radius:14px;flex-direction:column}
  nav ul.open{display:flex}
  .nav .burger{display:flex;gap:8px;align-items:center;padding:8px 12px;border:1px solid rgba(255,255,255,.12);border-radius:12px;cursor:pointer}
}

.btn{display:inline-block;padding:12px 18px;border-radius:14px;background:linear-gradient(180deg,var(--primary),var(--primary-600));
     color:#fff;font-weight:600;box-shadow:0 8px 24px rgba(22,163,74,.35), inset 0 1px 0 rgba(255,255,255,.15); transition:.25s transform,.25s box-shadow}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(22,163,74,.45), inset 0 1px 0 rgba(255,255,255,.15)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.16);color:#fff}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;font-size:12px;opacity:.9}

.hero{position:relative;isolation:isolate;background:var(--gradient-hero);overflow:hidden}
.hero .wrap{padding:80px 0 40px}
.hero h1{font-size: clamp(32px, 3.4vw, 56px);margin:14px 0;background:linear-gradient(90deg,#f0fff4,#c0f8da,#86efac);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 24px rgba(22,163,74,.15));}
.hero p{color:#cfe6da;max-width:720px;font-size: clamp(15px,1.3vw,18px);}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

.blob{position:absolute;inset:auto -160px -160px auto;width:360px;height:360px;background:radial-gradient(circle at 30% 30%, rgba(22,163,74,.8), rgba(22,163,74,.35) 40%, transparent 60%);
      filter: blur(20px);border-radius:50%;animation:float 10s ease-in-out infinite alternate;opacity:.6}
.blob:nth-child(2){inset:-160px auto auto -160px;background:radial-gradient(circle at 70% 70%, rgba(34,197,94,.7), rgba(22,163,74,.25) 40%, transparent 60%);animation-delay:1.3s}
@keyframes float{to{transform:translateY(-18px) translateX(8px) scale(1.04)}}

.section{padding:56px 0}
.section .head{
  display:flex;align-items:end;justify-content:space-between;margin-bottom:20px;gap:16px
}
.section h2{margin:0;font-size: clamp(24px, 2.4vw, 34px)}
.section .sub{color:var(--muted);max-width:720px}

.card{background:linear-gradient(180deg,#0d1a14,#0f1f17);border:1px solid rgba(255,255,255,.06);
      border-radius:18px; padding:18px; box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06)}
.card:hover{border-color: rgba(22,163,74,.35); box-shadow: 0 16px 40px rgba(22,163,74,.15)}

.card .eyebrow{font-size:12px;letter-spacing:.2px;color:#a9b8b1}
.card h3{margin:.3rem 0 .2rem;font-size: clamp(18px,1.9vw,22px)}
.card p{color:#cfe6da}

.feature{display:flex;gap:16px;align-items:flex-start}
.feature svg{width:32px;height:32px;flex:0 0 32px}

.footer{padding:32px 0;color:#cfe6da;border-top:1px solid rgba(255,255,255,.05);background:#0c1813}
.footer .grid{align-items:start}
.footer small{display:block;margin-top:8px;color:#8aa097}

.kpi{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:14px}
.kpi .num{font-weight:800;font-size: clamp(20px, 2.4vw, 28px);}
.kpi .label{color:#a3b2aa;font-size:13px}

.marquee{overflow:hidden;mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)}
.marquee .row{display:flex;gap:30px;animation:scroll 28s linear infinite}
@keyframes scroll{to{transform:translateX(-50%)}}
.logo-chip{padding:8px 12px;border-radius:999px;background:#112017;border:1px solid rgba(255,255,255,.06)}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:none}

.shimmer{position:relative;overflow:hidden}
.shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.12) 42%,transparent 60%);transform:translateX(-100%);animation:shine 4s infinite}
@keyframes shine{to{transform:translateX(100%)}}

/* Forms */
.form{display:grid;gap:12px}
.form input,.form textarea, .form select{
  background:#0b1712;border:1px solid rgba(255,255,255,.1);border-radius:12px;color:var(--text);
  padding:12px 14px;font:inherit;outline:none
}
.form input:focus,.form textarea:focus{border-color: rgba(22,163,74,.5);box-shadow: 0 0 0 4px rgba(22,163,74,.15)}

/* Tables (for dashboard-like visuals) */
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table thead th{font-size:13px;color:#a8b7ae;text-align:left;padding:8px 12px}
.table tbody tr{background:var(--card);border:1px solid rgba(255,255,255,.06)}
.table tbody td{padding:12px}
.table tbody tr{border-radius:14px;overflow:hidden}
.table .status{padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid rgba(255,255,255,.08)}
.status.good{background:rgba(22,163,74,.12);border-color:rgba(22,163,74,.35);color:#b8f7d4}
.status.warn{background:rgba(250,204,21,.12);border-color:rgba(250,204,21,.35);color:#fde68a}
.status.bad{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35);color:#fecaca}

/* Canvas wrapper for charts */
.chart-card{background:linear-gradient(180deg,#0d1a14,#0f1f17);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:16px}
.chart-card h4{margin:0 0 10px 0}
canvas{width:100%;height:240px;background: #0b1712;border-radius:12px}