/* =========================================================
   HERO
========================================================= */

.hero {

    position:
        relative;

    background:
        #101413;

    overflow:
        hidden;

}



/* =========================================================
   BACKGROUND
========================================================= */

.hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    overflow: hidden;
    pointer-events: none;
}

.hero-background img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.03);
    animation: heroZoom 14s ease-out forwards;
}

@keyframes heroZoom {
    from {
        transform: scale(1.08);
    }

    to {
        transform: scale(1.03);
    }
}

/* MOBILE BACKGROUND */
@media screen and (max-width: 767px) {
    .hero-background img {
        object-position: center;
    }
}



/* =========================================================
   OVERLAY
========================================================= */

.hero-overlay {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    background:

        linear-gradient(
            90deg,
            rgba(5,10,9,.94) 0%,
            rgba(5,10,9,.80) 38%,
            rgba(5,10,9,.25) 72%,
            rgba(5,10,9,.15) 100%
        ),

        linear-gradient(
            0deg,
            rgba(4,7,6,.65),
            transparent 50%
        );

}



/* =========================================================
   CONTENT
========================================================= */

.hero-content {
    position: relative;
    z-index: 4;
}


/* =========================================================
   PRODUCT CATEGORY — BELOW MAIN HEADING
========================================================= */

.hero-eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;

    padding: 11px 16px;
    margin-top: 20px;
    margin-bottom: 0;

    border: 1px solid rgba(255,255,255,.30);
    border-radius: 4px;

    color: rgba(255,255,255,.9);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;

    overflow: hidden;
}


/* Premium light sweep */

.hero-eyebrow::after {
    content: "";
    position: absolute;

    top: -50%;
    bottom: -50%;
    left: -70%;

    width: 35%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(217,179,106,.95),
        transparent
    );

    transform: skewX(-20deg);

    animation: eyebrowSweep 4s ease-in-out infinite;
}


@keyframes eyebrowSweep {
    0% {
        left: -70%;
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    45% {
        left: 130%;
        opacity: 1;
    }

    55% {
        opacity: 0;
    }

    100% {
        left: 130%;
        opacity: 0;
    }
}


/* =========================================================
   SEO H1
========================================================= */

.hero-seo-title {
    max-width: 600px;
    margin: 0 0 20px;

    font-family: "Manrope", sans-serif;
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.4;
    letter-spacing: 0;
    font-weight: 700;

    color: rgba(255, 255, 255, .92);
}
@media screen and (max-width: 767px) {
    .hero-container .hero-content .hero-seo-title {
        font-size: 16px !important;
        line-height: 1.3 !important;
        max-width: 100% !important;
        margin-bottom: 14px !important;
        letter-spacing: 0 !important;
    }
}


/* =========================================================
   MAIN VISUAL HEADING
========================================================= */

.hero-main-heading {
    max-width: 760px;

    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(58px, 6vw, 92px);
    line-height: .92;
    letter-spacing: -.055em;
    font-weight: 800;
}


.hero-main-heading span {
    display: inline-block;
    color: #ffffff;
}


.hero-main-heading strong {
    color: var(--red);
    font-weight: 800;
}



/* =========================================================
   DESCRIPTION
========================================================= */

.hero-description {

    max-width:
        590px;

    margin-top:
        30px;

    color:
        rgba(255,255,255,.78);

    font-size:
        16px;

    line-height:
        1.7;

}


/* =========================================================
   BUTTONS
========================================================= */

.hero-actions {

    display:
        flex;

    gap:
        14px;

    margin-top:
        34px;

}


.btn {

    min-height:
        54px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;

    padding:
        0 24px;

    border-radius:
        5px;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;

}


.btn span {

    font-size:
        18px;

}


.btn-primary {

    background:
        var(--red);

    color:
        #fff;

}


.btn-primary:hover {

    transform:
        translateY(-3px);

    background:
        #ef302a;

}


.btn-light-outline {

    border:
        1px solid
        rgba(255,255,255,.45);

    background:
        rgba(0,0,0,.15);

    color:
        #fff;

}


.btn-light-outline:hover {

    transform:
        translateY(-3px);

    border-color:
        var(--gold);

    color:
        var(--gold);

}


/* =========================================================
   PRODUCT VISUAL
========================================================= */

.hero-product {

    position:
        absolute;

    z-index:
        4;

    right:
        -5%;

    bottom:
        -8%;

    width:
        54%;

    pointer-events:
        none;

}


.hero-product img {
    display: block;
    width: 100%;
    height: auto;

    filter: drop-shadow(
        0 35px 45px rgba(0, 0, 0, .5)
    );

    transform: rotate(-2deg);

    animation: productFloat 5s ease-in-out infinite;
}


@keyframes productFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-2deg);
    }

    50% {
        transform:
            translateY(-10px)
            rotate(-2deg);
    }

}


.hero-product-glow {

    position:
        absolute;

    width:
        55%;

    height:
        55%;

    right:
        15%;

    bottom:
        10%;

    background:
        rgba(217,179,106,.12);

    filter:
        blur(80px);

    border-radius:
        50%;

}

.hero-product picture {
    display: block;
    width: 100%;
}

.hero-product picture img {
    display: block;
    width: 100%;
    height: auto;
}
/* =========================================================
   BENEFITS
========================================================= */

.hero-benefits {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    border-top:
        1px solid
        rgba(255,255,255,.18);

    z-index:
        6;

}


.hero-benefit {

    min-height:
        88px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        14px 24px;

    border-right:
        1px solid
        rgba(255,255,255,.14);

    background:
        rgba(5,8,7,.25);

    backdrop-filter:
        blur(5px);

}


.hero-benefit:first-child {

    border-left:
        1px solid
        rgba(255,255,255,.14);

}


.benefit-icon {

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(217,179,106,.5);

    border-radius:
        50%;

    color:
        var(--gold);

    font-size:
        17px;

}


.hero-benefit strong {

    display:
        block;

    font-size:
        13px;

}


.hero-benefit small {

    display:
        block;

    margin-top:
        3px;

    color:
        rgba(255,255,255,.55);

    font-size:
        10px;

}