body {
    margin: 0;
    height: 100vh;
    /* Base layer */
    background-color: #030303;
    /* Gradient overlay - darkness pulled even deeper */
    background-image: linear-gradient( 0deg, rgba(102, 4, 61, 1) 0%, /* deep magenta bottom */
    rgba(107, 4, 66, 0.95) 8%, /* color rise starts slower */
    rgba(112, 3, 70, 0.85) 18%, /* intense color band near bottom */
    rgba(120, 2, 90, 0.55) 40%, /* gradual fade */
    rgba(131, 0, 132, 0.2) 70%, /* barely visible tone higher up */
    rgba(131, 0, 132, 0) 100% /* full darkness top */
    );
    /* background: linear-gradient(to bottom, #000000 0%, #45002c 100%); */ /* alternative */
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

#banner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em 2em 0 2em;
    width: 100%;
}

#banner-header-right {
    text-align: right;
    line-height: 1.2em;
}

#banner-header-right a,
#banner-header-right label {
    font-family: 'Cooper Black';
    color: #ffffff;
    text-decoration: none;
    font-size: 1.2em;
}

h1 {
    font-size: 6em;
    color: #ffffff;
    text-align:center; 
    margin: 0;
    line-height:1.1em;
}

h2 {
    font-size: 2.7em;
    color: #ff8201;
    text-align:center; 
    margin-top: 0.2em;
    line-height:1em;
}

h3 {
    font-size: 2.3em;
    color: #03badb;
    text-align:center;
    margin-top: 0.2em;
}

video { max-width:69%; }
footer { color: #e9e8e6; }
footer ul li a { color: #fafafa; }

@media screen and (max-width:1024px) {
    video { max-width:95%; }
}

/* --- RESPONSIVE BREAKPOINTS --- */
@media (max-width: 1000px) {
    .target-container {
        gap: 2em;
    }
}

@media (max-width: 850px) {
    .target-container {
        flex-direction: column; /* stack vertically */
        align-items: center;
        gap: 1.2em; /* a little tighter vertically too */
    }

    .target-grid {
        width: 100%;
        max-width: 420px;
    }
}