.hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 24px;
    align-items: stretch;
}

.hero-copy { display: flex; flex-direction: column; gap: 16px; }

.eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: #1E71A9; font-size: 13px; }

.lede { color: #113A7D; font-size: 17px; }

.hero-actions { display: flex; gap: 12px; align-items: center; margin-top: 4px; }

.hero-panel { padding: 0; }

.panel-header {
    display: flex; align-items: center; gap: 6px;
    padding: 12px 16px;
    border-bottom: 1px solid #E1E8F0;
}

.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot-green { background: #13A78E; }
.dot-yellow { background: #F0AD4E; }
.dot-red { background: #D9534F; }
.panel-title { margin-left: 6px; font-weight: 600; color: #0B1C3F; }

.metrics-grid {
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.metric { padding: 14px; border: 1px solid #E1E8F0; border-radius: 8px; background: #FBFDFF; }
.metric-label { display: block; font-size: 13px; color: #1E71A9; margin-bottom: 6px; }
.metric-value { display: block; font-size: 22px; font-weight: 700; color: #0B1C3F; }
.metric-trend { font-size: 13px; font-weight: 600; }
.metric-trend.up { color: #13A78E; }
.metric-trend.down { color: #D9534F; }
.metric-trend.flat { color: #113A7D; }

@media (max-width: 960px) {
    .hero { grid-template-columns: 1fr; }
    .header-bar, .footer-bar { flex-direction: column; align-items: flex-start; }
    .nav-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
}