.hero {
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction:column;
    height:calc(100svh - var(--header-height));
    gap:1rem;
    top:calc(var(--header-height) / -2);
    position:relative;
}

.hero.half {
    height:calc(50svh - var(--header-height));
    top:0;
}

.hero .bg {
    position:absolute;
    max-width: none;
    width:100%;
    height:100%;
    z-index:-1;
    background-size: 40px 40px;
    background-position: 50% 50%;
    /* background-image: radial-gradient(circle, #fff 1px, rgba(0, 0, 0, 0) 1px); */
    background-image:
    linear-gradient(to right, #707070 1px, transparent 1px),
    linear-gradient(to bottom, #707070 1px, transparent 1px);
}

.hero .bg::after {
    content:'';
    background:linear-gradient(to bottom right, rgba(35, 36, 40, 0.6) 0%, rgba(35, 36, 40, 0.95) 50%, rgba(35, 36, 40, 1) 100%);
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
}

.hero .slogan {
    font-size:2rem;
    font-weight:600;
    text-align:center;
    text-wrap: balance;
    padding-inline:1rem;
}

.hero .slogan .accent {
    background-image:var(--gold);
    background-clip:text;
    color:transparent;
    text-shadow: var(--gold-glow);
    padding-right: 0.001rem;
}

.hero .buttons {
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
    justify-content: center;
}

.hero .cta-outline {
    position:relative;
    
    padding:.4rem .6rem 0.4rem 0.75rem;
    border:none;
    text-decoration: none;
    background:transparent;
    border-radius:0.5rem;
    box-shadow: var(--shadow);
    text-shadow: none;

    font-weight:500;
    font-size:1.1rem;

    display:flex;
    align-items:center;
    gap:0.5rem;

    transition:box-shadow 0.3s ease-out, transform 0.3s ease-out;
}

.hero .cta-outline::before {
    content:'';
    border-radius:0.5rem;
    padding:1.5px;
    border:1.5px solid transparent;
    background-image:linear-gradient(var(--grey), var(--grey)), var(--gold);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
}

.hero .cta-outline .text {
    background:var(--gold);
    background-clip:text;
    color:transparent;
}

.hero .cta-outline svg {
    width:1.5rem;
    fill:url(#gold);
}

.hero .cta {
    background-image:var(--gold);
    padding:.4rem .6rem 0.4rem 0.75rem;
    text-decoration: none;
    border-radius:0.5rem;
    color:#232428;
    box-shadow: var(--shadow);
    text-shadow: none;

    font-weight:500;
    font-size:1.1rem;

    display:flex;
    align-items:center;
    gap:0.5rem;

    transition:box-shadow 0.3s ease-out, transform 0.3s ease-out;
}

.hero .cta svg {
    fill:var(--grey);
    width:1.5rem;
}

.hero .cta:hover,
.hero .cta-outline:hover,
.hero .cta:focus,
.hero .cta-outline:focus {
    cursor:pointer;
    box-shadow: var(--gold-glow);
    transform:translateY(-.125rem) scale(102%);
}





.hero .leader {
    position:absolute;
    bottom:-1rem;
    padding:0.2rem;
    border:none;
    text-decoration: none;
    background:transparent;
    border-radius:100%;
    box-shadow: var(--shadow);
    text-shadow: none;

    font-weight:500;
    font-size:1.1rem;

    display:flex;
    align-items:center;
    justify-content: center;
    gap:0.5rem;

    transition:box-shadow 0.3s ease-out, transform 0.3s ease-out;
}

.hero .leader::before {
    content:'';
    border-radius:100%;
    padding:1.5px;
    border:1.5px solid transparent;
    background-image:linear-gradient(var(--grey), var(--grey)), var(--gold);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
}

.hero .leader svg {
    fill:url(#gold);
    height:24px;
}

.hero .leader:hover,
.hero .leader:focus {
    cursor:pointer;
    box-shadow: var(--gold-glow);
    transform:translateY(-.125rem) scale(102%);
}