/* Full-bleed hero slideshow used by Index (markup in Views/Shared/_Hero.cshtml).
   The banner starts at y=0 and the transparent header rides on top of it:
   Ken-Burns photo, top scrim for the header, frosted navy caption card,
   numbered vertical rail on the right and a scroll cue.
   Colours are scoped to .hero so it looks the same inside either page's stylesheet. */
.hero {
    --h-navy: #0a1a45;
    --h-ink: #060f2c;
    --h-blue: #1d6fe0;
    --h-yellow: #f7c600;
    position: relative; overflow: hidden;
    height: clamp(620px, 86vh, 860px);
    font-family: "Manrope", system-ui, "Segoe UI", sans-serif;
    background: var(--h-ink);
}

/* Slides crossfade; the active one zooms out slowly */
.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 1s; }
.hero-slide.active { opacity: 1; visibility: visible; }
.hero-img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide.active .hero-img { animation: hero-zoom 9s ease forwards; }
@keyframes hero-zoom { from { transform: scale(1.1); } to { transform: scale(1); } }
/* Top scrim keeps the white header legible on any photo, plus a soft left shade behind the card */
.hero-slide::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(6, 15, 44, .7) 0%, rgba(6, 15, 44, .25) 30%, rgba(6, 15, 44, 0) 55%), linear-gradient(90deg, rgba(6, 15, 44, .45) 0%, rgba(6, 15, 44, 0) 65%); }

/* Caption card sits in the safe area between the header and the overlapping values card */
.hero-caption { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; padding: 150px 0 130px; }
.hero-card { max-width: 660px; padding: clamp(26px, 3vw, 40px); border-radius: 22px; background: rgba(6, 15, 44, .62); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: rgba(255, 255, 255, .86); }
.hero-tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 6px 14px; border-radius: 999px; background: rgba(247, 198, 0, .14); color: var(--h-yellow); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .78rem; font-weight: 600; letter-spacing: .5px; }
.hero-card h1, .hero-card h2 { margin: 0; font-family: inherit; font-size: clamp(2.2rem, 4.6vw, 3.8rem); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; color: #fff; text-transform: none; }
.hero-card h1 span { color: var(--h-yellow); }
.hero-sub { margin-top: 12px; font-size: clamp(1.1rem, 1.9vw, 1.45rem); font-weight: 700; color: #fff; }
.hero-sub em { font-style: normal; color: var(--h-yellow); }
.hero-card p:not(.hero-sub) { margin-top: 14px; font-size: 1.05rem; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 12px; font-weight: 700; font-size: .95rem; transition: background .25s, color .25s, border-color .25s, transform .25s; }
.hero-btn:hover { transform: translateY(-2px); }
.hero-btn i { transition: transform .25s; }
.hero-btn:hover i { transform: translateX(4px); }
.hero-btn.primary { background: var(--h-yellow); color: var(--h-ink); }
.hero-btn.primary:hover { background: #fff; }
.hero-btn.outline { border: 1.5px solid rgba(255, 255, 255, .55); color: #fff; }
.hero-btn.outline:hover { border-color: var(--h-yellow); color: var(--h-yellow); }
.hero-btn:focus-visible, .hero-dot:focus-visible, .hero-cue:focus-visible { outline: 2px solid var(--h-yellow); outline-offset: 3px; }

/* Numbered vertical rail */
.hero-rail { position: absolute; z-index: 3; top: 50%; right: clamp(14px, 3vw, 46px); transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.hero-dot { display: flex; align-items: center; gap: 10px; padding: 4px 0; border: 0; background: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: .82rem; color: rgba(255, 255, 255, .55); transition: color .3s; }
.hero-dot::after { content: ""; width: 22px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .45); transition: width .35s, background .3s; }
.hero-dot:hover, .hero-dot.active { color: #fff; }
.hero-dot.active::after { width: 46px; background: var(--h-yellow); }

/* Scroll cue in the gap above the overlapping values card */
.hero-cue { position: absolute; z-index: 3; left: 50%; bottom: clamp(96px, 9vw, 118px); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); color: #fff; animation: hero-cue 1.8s ease infinite; }
@keyframes hero-cue { 0%, 100% { transform: translate(-50%, 0); opacity: .75; } 50% { transform: translate(-50%, 8px); opacity: 1; } }

@media (max-width: 900px) {
    .hero { height: 760px; }
    .hero-caption { padding: 110px 0 150px; }
    .hero-rail { top: auto; bottom: 110px; right: 4%; transform: none; flex-direction: row; }
    .hero-dot span { display: none; }
    .hero-cue { display: none; }
}
@media (max-width: 600px) {
    .hero-card { padding: 22px; border-radius: 18px; }
    .hero-card h1 { font-size: 9vw; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-slide.active .hero-img, .hero-cue { animation: none; }
    .hero-slide { transition: opacity .3s; }
}