/* ==========================================================
   HYPERFIER V2
   Hero Section
   File : /public_html/css/hero.css
   Mobile First
   ========================================================== */


/* ==========================================================
   Hero Section
   ========================================================== */

.hero{

    position:relative;

    overflow:hidden;

    padding-top:110px;

    padding-bottom:70px;

    isolation:isolate;

    background:
        radial-gradient(circle at top left,
        rgba(255,90,31,.10),
        transparent 35%),

        radial-gradient(circle at bottom right,
        rgba(255,255,255,.04),
        transparent 45%),

        #070708;
}


/* ==========================================================
   Background
   ========================================================== */

.hero-background{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:-2;
}

.hero-gradient{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.9;
}

.hero-gradient-1{

    width:420px;

    height:420px;

    background:#ff5a1f;

    top:-120px;

    left:-140px;

    animation:heroFloatOne 12s ease-in-out infinite;
}

.hero-gradient-2{

    width:360px;

    height:360px;

    background:#005eff;

    right:-100px;

    bottom:-120px;

    animation:heroFloatTwo 14s ease-in-out infinite;
}


/* ==========================================================
   Grid Background
   ========================================================== */

.hero-grid{

    position:absolute;

    inset:0;

    opacity:.06;

    background-image:

        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),

        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);

    background-size:60px 60px;
}


/* ==========================================================
   Wrapper
   ========================================================== */

.hero-wrapper{

    display:flex;

    flex-direction:column;

    gap:60px;

    align-items:center;
}


/* ==========================================================
   Content
   ========================================================== */

.hero-content{

    width:100%;

    max-width:640px;

    text-align:center;
}


/* ==========================================================
   Badge
   ========================================================== */

.hero-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(255,255,255,.05);

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

    color:var(--accent-color);

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.15em;

    text-transform:uppercase;

    margin-bottom:28px;
}


/* ==========================================================
   Title
   ========================================================== */

.hero-title{

    color:var(--text-primary);

    font-size:clamp(2.5rem,8vw,4.8rem);

    line-height:1.05;

    font-weight:800;

    letter-spacing:-.03em;

    margin-bottom:26px;
}

.hero-title span{

    display:block;

    background:linear-gradient(

        90deg,

        #ffffff,

        var(--accent-color)

    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}


/* ==========================================================
   Description
   ========================================================== */

.hero-description{

    color:var(--text-secondary);

    font-size:1rem;

    line-height:1.9;

    max-width:560px;

    margin:0 auto 34px;
}


/* ==========================================================
   Buttons
   ========================================================== */

.hero-buttons{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-bottom:45px;
}

.hero-buttons .btn{

    width:100%;
/* ==========================================================
   Hero Glow Effects
   ========================================================== */

.hero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    pointer-events:none;

    opacity:.75;

    z-index:-1;
}

.hero-glow-left{

    width:220px;

    height:220px;

    left:-80px;

    top:30%;

    background:rgba(255,90,31,.35);
}

.hero-glow-right{

    width:260px;

    height:260px;

    right:-100px;

    bottom:12%;

    background:rgba(0,94,255,.28);
}


/* ==========================================================
   Bottom Strip
   ========================================================== */

.hero-bottom{

    position:relative;

    margin-top:70px;

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

    border-bottom:1px solid rgba(255,255,255,.06);

    background:rgba(255,255,255,.02);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);
}

.hero-bottom-wrapper{

    display:grid;

    grid-template-columns:1fr;

    gap:22px;

    padding:28px 0;
}

.hero-feature{

    display:flex;

    align-items:center;

    gap:14px;

    color:var(--text-secondary);

    font-size:.92rem;

    font-weight:500;
}

.feature-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--accent-color);

    box-shadow:
        0 0 16px rgba(255,90,31,.70);

    flex-shrink:0;
}


/* ==========================================================
   Scroll Indicator
   ========================================================== */

.hero-scroll{

    position:absolute;

    left:50%;

    bottom:24px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    color:var(--text-secondary);

    font-size:.78rem;

    letter-spacing:.15em;

    text-transform:uppercase;
}

.scroll-mouse{

    width:28px;

    height:48px;

    border-radius:30px;

    border:2px solid rgba(255,255,255,.25);

    display:flex;

    justify-content:center;

    padding-top:8px;
}

.scroll-wheel{

    width:4px;

    height:10px;

    border-radius:999px;

    background:var(--accent-color);

    animation:scrollWheel 2s infinite;
}


/* ==========================================================
   Decorative Elements
   ========================================================== */

.hero-decoration{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    opacity:.10;
}

.hero-decoration-left{

    width:420px;

    height:420px;

    left:-180px;

    bottom:-180px;

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

.hero-decoration-right{

    width:320px;

    height:320px;

    top:-140px;

    right:-140px;

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

.hero-noise{

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.03;

    background-image:
        radial-gradient(circle, #ffffff 1px, transparent 1px);

    background-size:22px 22px;
}


/* ==========================================================
   Tablet
   ========================================================== */

@media (min-width:768px){

    .hero{

        padding-top:130px;

        padding-bottom:90px;
    }

    .hero-buttons{

        flex-direction:row;

        justify-content:center;
    }

    .hero-buttons .btn{

        width:auto;

        min-width:220px;
    }

    .hero-trust{

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

    .hero-specs{

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

    .hero-bottom-wrapper{

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

}


/* ==========================================================
   Desktop
   ========================================================== */

@media (min-width:992px){

    .hero{

        min-height:100vh;

        display:flex;

        align-items:center;
    }

    .hero-wrapper{

        flex-direction:row;

        justify-content:space-between;

        align-items:center;

        gap:80px;
    }

    .hero-content{

        flex:0 0 48%;

        text-align:left;
    }

    .hero-description{

        margin-left:0;

        margin-right:0;
    }

    .hero-buttons{

        justify-content:flex-start;
    }

    .hero-visual{

        flex:0 0 48%;
    }

    .hero-bottom-wrapper{

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

}


/* ==========================================================
   Large Desktop
   ========================================================== */

@media (min-width:1200px){

    .hero{

        padding-top:150px;

        padding-bottom:110px;
    }

    .hero-title{

        max-width:700px;
    }

    .hero-image-card{

        border-radius:36px;
    }

}


/* ==========================================================
   Ultra Wide
   ========================================================== */

@media (min-width:1440px){

    .hero-wrapper{

        gap:120px;
    }

    .hero-title{

        font-size:5.4rem;
    }

    .hero-image-card{

        max-width:760px;
    }

}


/* ==========================================================
   Keyframes
   ========================================================== */

@keyframes heroFloatOne{

    0%{

        transform:translate(0,0);
    }

    50%{

        transform:translate(40px,30px);
    }

    100%{

        transform:translate(0,0);
    }

}

@keyframes heroFloatTwo{

    0%{

        transform:translate(0,0);
    }

    50%{

        transform:translate(-35px,-25px);
    }

    100%{

        transform:translate(0,0);
    }

}

@keyframes floatCard{

    0%{

        transform:translateY(0);
    }

    50%{

        transform:translateY(-10px);
    }

    100%{

        transform:translateY(0);
    }

}

@keyframes scrollWheel{

    0%{

        transform:translateY(0);

        opacity:1;
    }

    70%{

        transform:translateY(12px);

        opacity:.25;
    }

    100%{

        transform:translateY(0);

        opacity:1;
    }

}


/* ==========================================================
   Accessibility
   ========================================================== */

.hero a:focus-visible{

    outline:2px solid var(--accent-color);

    outline-offset:4px;
}

@media (prefers-reduced-motion:reduce){

    .hero *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;
    }

}


/* ==========================================================
   End Of File
   ========================================================== */