/* Homepage layout refinements; shared styles are loaded first. */
.hero-note { position: relative; max-width: 42rem; margin: .75rem auto 0; text-align: center; font-size: .95rem; color: #94a3b8; }
:root { --accent-red: #183b63; }
.nav-cta { background-color: var(--accent-red); }
.nav-cta:hover, .btn-red:hover { background-color: #102c4b; border-color: #102c4b; }
/* Fade the backdrop without washing out the text or buttons. */
.hero-section { background: #11182c; mask-image: none; -webkit-mask-image: none; min-height: 480px; height: 65vh; padding-top: 7rem; padding-bottom: 5rem; }
.hero-section::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(10,25,47,.80), rgba(10,25,47,.86)), url('https://images.unsplash.com/photo-1644088379091-d574269d422f') center / cover; }
.hero-section::after { content: ''; position: absolute; inset: auto 0 0; height: 80px; background: linear-gradient(transparent, #f9fafb); pointer-events: none; }
.hero-content { position: relative; z-index: 1; }
.hero-ctas .btn-blue { color: #e6f1ff; border-color: #8798b2; }
.hero-ctas .btn-blue:hover { background: rgba(255,255,255,.12); }
.home-card { display: flex; flex-direction: column; }
.home-card .card-link { margin-top: auto; align-self: flex-start; }
@media (max-width: 640px) {
 .hero-section { height: auto; min-height: 560px; padding-top: 8rem; }
 .hero-title { font-size: 2.5rem; }
 .hero-ctas { gap: .65rem; padding-inline: 1rem; }
 .hero-ctas .btn { padding-inline: 1.1rem; }
}