/*=========================================================
 Systronics Website
 homepage.css
 Home Page Enhancements
=========================================================*/

/* Decorative hero background */
.hero{
    position:relative;
    overflow:hidden;
}

.hero::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    right:-180px;
    top:-180px;
    border-radius:50%;
    background:rgba(91,117,146,.10);
}

.hero::after{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    right:80px;
    bottom:-140px;
    border-radius:50%;
    background:rgba(47,143,78,.08);
}

.hero-grid{
    position:relative;
    z-index:2;
}

.hero h1{
    max-width:10ch;
    letter-spacing:-0.03em;
}

.hero p{
    max-width:42rem;
}

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

.value-strip{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1rem;
    margin-top:-2rem;
    position:relative;
    z-index:5;
}

.value-pill{
    background:#fff;
    border-radius:14px;
    padding:1.25rem;
    box-shadow:var(--shadow-medium);
    border-top:4px solid var(--color-green);
    text-align:center;
}

.value-pill:nth-child(2){border-top-color:var(--color-blue);}
.value-pill:nth-child(3){border-top-color:var(--color-orange);}
.value-pill:nth-child(4){border-top-color:var(--color-green);}

.section-lead{
    max-width:760px;
    margin:0 auto 2rem;
    color:var(--text-secondary);
    text-align:center;
}

@media(max-width:900px){
    .value-strip{
        grid-template-columns:1fr;
        margin-top:2rem;
    }

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