@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
:root{--yellow:#FFE58A;--salmon:#F8AC7F;--blue:#47A4EB;--teal:#4FD9C0;--radius:14px;--shadow:0 10px 30px rgba(0,0,0,.08)}
*{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:Poppins,Arial,Helvetica,sans-serif;line-height:1.6;color:#111;background:#fff}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid rgba(0,0,0,.06)}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:10px;align-items:center} .brand img{width:36px;height:36px} .brand .name{font-weight:700;letter-spacing:.5px}
nav ul{display:flex;list-style:none;gap:18px;margin:0;padding:0} nav a{padding:8px 10px;border-radius:8px;text-decoration:none;color:inherit} nav a.active,nav a:hover{background:rgba(71,164,235,.12)}
.hero{background:linear-gradient(90deg,var(--blue),var(--teal));color:#fff;padding:80px 0} .hero h1{margin:0 0 10px;font-size:clamp(28px,5vw,48px)} .hero p.lead{font-size:clamp(16px,2.5vw,22px);margin:0 0 24px}
.cta{display:inline-block;background:var(--yellow);color:#000;padding:12px 18px;border-radius:10px;font-weight:700;box-shadow:var(--shadow)}
.section{padding:56px 0}
.card-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.card{grid-column:span 12;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
@media(min-width:720px){.card{grid-column:span 6}} @media(min-width:1024px){.card{grid-column:span 4}}
footer{padding:32px 0;border-top:1px solid rgba(0,0,0,.06);background:#fafafa;color:#333;font-size:14px}
.form-grid{display:grid;gap:16px} input,textarea,select{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(0,0,0,.18);font:inherit}
button.btn{border:0;padding:12px 18px;border-radius:10px;font-weight:700;cursor:pointer;background:var(--blue);color:#fff}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.06)} .alert{padding:12px 14px;border-radius:8px;background:rgba(79,217,192,.15)}
.smalltext{font-size:13px;color:#666} .table{width:100%;border-collapse:collapse} .table th,.table td{border:1px solid #eee;padding:10px;text-align:left}
.kpi{display:flex;gap:10px;flex-wrap:wrap} .kpi div{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}