:root{--navy:#102a43;--blue:#1976d2;--bg:#f4f7fb;--card:#fff;--muted:#66788a;--green:#18864b}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#172b4d;font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}.wrap{max-width:1120px;margin:auto;padding:28px}.nav{display:flex;justify-content:space-between;align-items:center;background:var(--navy);color:white;padding:18px 28px}.nav nav{display:flex;gap:18px}.hero{padding:80px 28px;background:linear-gradient(135deg,#102a43,#20639b);color:#fff}.hero>div{max-width:1050px;margin:auto}.hero h1{font-size:48px;max-width:780px}.btn{display:inline-block;background:#fff;color:#102a43;border:0;border-radius:10px;padding:12px 18px;font-weight:700;cursor:pointer}.btn.blue{background:var(--blue);color:#fff}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));grid-gap:16px;gap:16px}.card{background:var(--card);border-radius:14px;padding:22px;box-shadow:0 5px 20px #15304d12}.kpi{font-size:28px;font-weight:800}.muted{color:var(--muted)}label{display:block;font-weight:700;margin-top:12px}input,select{width:100%;padding:11px;margin-top:5px;border:1px solid #ccd6e0;border-radius:8px;background:#fff}.result{background:#edf8f1;border-left:5px solid var(--green);padding:18px;margin-top:20px}.result,.warning{border-radius:8px}.warning{font-size:13px;color:#7a5d00;background:#fff5cc;padding:12px}.login{max-width:440px;margin:70px auto}.brand{font-weight:800}.footer{padding:30px;text-align:center;color:var(--muted)}