/* The former welcome screen's moving background now belongs to the home hero. */
body[data-page="index"] .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(5, 25, 45, .82);
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    box-shadow:0 1px 2px rgba(7,20,42,.07),0 8px 24px rgba(2, 15, 30, .16);
    backdrop-filter: none;
}

[data-theme="dark"] body[data-page="index"] .site-header {
    background: rgba(5, 25, 45, .82);
}

body[data-page="index"] .site-header .utility {
    background: rgba(2, 16, 31, .34);
}

body[data-page="index"] .hero {
    min-height: 100vh;
    min-height: 100svh;
    background: #0b3048;
}

body[data-page="index"] .hero-grid {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: 130px;
}

body[data-page="index"] .hero-video {
    background-color: #0b3048;
    background-image: radial-gradient(circle at 13% 23%, #5aa4d4 1px, transparent 2px),
        radial-gradient(circle at 72% 34%, #8fc3e4 1px, transparent 2px),
        radial-gradient(circle at 41% 72%, #5aa4d4 1px, transparent 2px);
    background-size: 220px 180px, 310px 240px, 270px 210px;
}

body[data-page="index"] .hero-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: none;
}

body[data-page="index"] .hero::before,
body[data-page="index"] .hero::after {
    content: none;
}

@media (max-width: 600px) {
    body[data-page="index"] .hero-grid {
        padding-top: 116px;
    }
}