.hero {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: center;
    position: relative;
    padding: 30px;
    padding-top: calc(var(--header-height) + 30px);
    background: var(--homepage-hero-bg-img);
    background-size: cover; background-attachment: fixed;
}


.hero-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    align-items: baseline;
    justify-content: center;
    height: 100%;
    position: relative;
}

.hero h1 {
    font-size: 80px;
    font-weight: 900;
    line-height: 1;
    font-style: italic;
    text-transform: uppercase;
    color: var(--text-light);
}

.hero p{
    max-width: 400px;
    font-size: 22px;
    padding-left: 20px;
    font-weight: 500;
    border-left: 3px solid #fff2;
}

.hero-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    position: absolute;
    backdrop-filter: blur(14px);
    padding: 8px; background: #0003;
    border-radius: 26px;
    bottom: 0px; left: 0px;
}


.hero-btn{
    text-decoration: none;
    color: var(--text-light);
    padding: 14px 20px;
    outline: 1px solid #fff1;
    border-radius: 20px;
    display: flex; align-items: center;
    gap: 6px;
    background: transparent;
    position: relative;
    will-change: transform;
}

.hero-btn span{
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 10; will-change: transform;
}

.hero-btn i{z-index: 10;}

.hero-btn::before{
    background: var(--ui-gradient);
    position: absolute; bottom: 0;
    height: 3px; left: 14px; right: 14px;
    content: ""; border-radius: inherit;
    z-index: 5; transition: all ease 0.3s;
    border-radius: 4px;
    opacity: 0; transform: scaleX(0);
}


.hero-btn:hover{
    background: #fff1;
}

.hero-btn:hover::before{opacity: 1; transform: scaleX(1);}