/*=========================================================
 Systronics Website
 hero-v4.css
 Premium Homepage Hero
=========================================================*/

.hero{
    position:relative;
    padding:7rem 0 6rem;
    background:
        radial-gradient(circle at top right, rgba(91,117,146,.12), transparent 30%),
        radial-gradient(circle at bottom right, rgba(47,143,78,.10), transparent 28%),
        #ffffff;
    overflow:hidden;
}

.hero-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:4rem;
}

.hero h1{
    font-size:clamp(3rem,5vw,4.75rem);
    line-height:1.05;
    margin:.5rem 0 1.25rem;
    letter-spacing:-0.04em;
}

.hero h1 .script{
    display:block;
    color:var(--color-green);
    font-style:italic;
    font-weight:600;
}

.hero p{
    font-size:1.15rem;
    max-width:42rem;
    color:var(--text-secondary);
}

.hero-actions{
    display:flex;
    gap:1rem;
    margin-top:2rem;
    flex-wrap:wrap;
}

.hero-image{
    position:relative;
}

.hero-image img{
    width:100%;
    border-radius:22px;
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}

.hero-image::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    left:-40px;
    bottom:-30px;
    background:var(--color-orange);
    opacity:.18;
    border-radius:50%;
    z-index:-1;
}

.hero-image::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    right:-60px;
    top:-40px;
    background:var(--color-blue);
    opacity:.12;
    border-radius:50%;
    z-index:-1;
}

.badge-row{
    display:flex;
    gap:.75rem;
    flex-wrap:wrap;
    margin-top:2rem;
}

.badge{
    padding:.55rem 1rem;
    border-radius:999px;
    background:#fff;
    border:1px solid var(--color-border);
    box-shadow:var(--shadow-small);
    font-weight:600;
    font-size:.9rem;
}

@media (max-width:900px){
    .hero-grid{
        grid-template-columns:1fr;
    }

    .hero{
        padding:5rem 0;
    }

    .hero-image::before,
    .hero-image::after{
        display:none;
    }
}