:root {
    --navy:#071427;
    --blue:#0d6efd;
    --cyan:#18b6d9;
    --bg:#f4f7fb;
    --card:#ffffff;
    --text:#152033;
    --muted:#607089;
    --green:#11a85b;
    --yellow:#ffc640;
    --red:#ef233c;
}
* { box-sizing:border-box; }
body { margin:0; font-family:Arial, Helvetica, sans-serif; background:var(--bg); color:var(--text); }
a { color:#0b63ce; }
.topbar { background:var(--navy); color:white; display:flex; justify-content:space-between; align-items:center; padding:14px 28px; position:sticky; top:0; z-index:10; }
.brand { display:flex; gap:12px; align-items:center; }
.brand span { display:block; color:#b8c7dc; font-size:12px; }
.shield { width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,var(--blue),var(--cyan)); display:grid; place-items:center; font-weight:bold; }
nav { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
nav a { color:white; text-decoration:none; font-weight:600; font-size:14px; }
nav a.portal { background:var(--blue); padding:9px 13px; border-radius:8px; }
main { max-width:1180px; margin:auto; padding:34px 22px; }
.hero { display:grid; grid-template-columns:1.4fr .8fr; gap:26px; align-items:center; padding:48px 0; }
.eyebrow { color:var(--blue); font-weight:bold; text-transform:uppercase; letter-spacing:.08em; }
h1 { font-size:44px; line-height:1.05; margin:10px 0; }
h2 { font-size:30px; }
.lead { font-size:19px; color:var(--muted); max-width:720px; }
.actions { display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
.button { background:var(--blue); color:white; padding:12px 18px; border-radius:9px; border:0; text-decoration:none; font-weight:bold; cursor:pointer; display:inline-block; }
.button.secondary { background:#dce8f8; color:#123; }
.hero-card, .card, .panel, .portal-card, .metric { background:var(--card); border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.08); padding:24px; }
.status-row { margin:14px 0; font-weight:bold; }
.dot { width:13px; height:13px; display:inline-block; border-radius:50%; margin-right:8px; }
.green { background:var(--green); }
.yellow { background:var(--yellow); }
.red { background:var(--red); }
.blue { background:var(--blue); }
.grid { display:grid; gap:18px; margin:24px 0; }
.grid.three { grid-template-columns:repeat(3,1fr); }
.grid.two { grid-template-columns:repeat(2,1fr); }
.card h3 { margin-top:0; }
.split { display:grid; grid-template-columns:1.2fr .8fr; gap:22px; margin:36px 0; align-items:start; }
.banner { background:linear-gradient(135deg,var(--navy),#0c3b73); color:white; border-radius:18px; padding:30px; margin:32px 0; }
.banner p { color:#d8e6f7; }
.page-title { margin-bottom:24px; }
.page-title p { color:var(--muted); font-size:18px; }
.mock-dashboard { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin:20px 0; }
.metric { font-size:32px; font-weight:bold; }
.metric span { display:block; font-size:13px; color:var(--muted); margin-top:8px; }
.red-text { color:var(--red); }
.site-icons { display:flex; gap:34px; flex-wrap:wrap; }
.circle { width:64px; height:64px; border-radius:50%; display:block; margin:auto; box-shadow:0 8px 18px rgba(0,0,0,.16); }
table { width:100%; border-collapse:collapse; background:white; }
th { background:var(--navy); color:white; text-align:left; padding:12px; }
td { padding:12px; border-bottom:1px solid #d9e1ec; }
.form { background:white; padding:24px; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.08); display:grid; gap:14px; max-width:760px; }
label { font-weight:bold; display:grid; gap:6px; }
input, textarea, select { width:100%; padding:12px; border:1px solid #cfd9e6; border-radius:8px; font:inherit; }
.hidden-field { display:none; }
.notice { padding:14px 18px; border-radius:10px; margin:16px 0; font-weight:bold; }
.notice.success { background:#e6f7ee; color:#0b6b38; }
.notice.error { background:#ffe8e8; color:#9b1c1c; }
footer { background:#071427; color:#c9d6e6; padding:26px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }
footer a { color:white; margin-right:16px; }
@media (max-width:800px) {
    .topbar, .hero, .split { display:block; }
    nav { margin-top:14px; }
    .grid.three, .grid.two, .mock-dashboard { grid-template-columns:1fr; }
    h1 { font-size:34px; }
}