/* ==========================
   HOME PAGE
========================== */

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:110px 8%;
    background:
        linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.72)),
        url("../images/hero.webp");
    background-size:cover;
    background-position:center;
    color:white;
}

.hero-content{
    max-width:650px;
}

.tag{
    color:var(--accent);
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    font-size:.9rem;
}

.hero h1{
    font-size:clamp(2.8rem,5vw,4.8rem);
    line-height:1.05;
    margin:18px 0;
    font-weight:800;
    letter-spacing:-2px;
}

.subtitle{
    color:#E5E7EB;
    max-width:580px;
    margin-bottom:34px;
}

.hero-buttons{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

/* SERVICES */

.services-preview{
    padding:110px 8%;
    background:var(--surface);
}

.preview-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:24px;
    margin-top:50px;
}

.preview-card{
    background:#fff;
    border-radius:16px;
    padding:32px 24px;
    text-decoration:none;
    color:inherit;
    box-shadow:0 8px 24px rgba(15,23,42,.06);
    transition:.3s;
}

.preview-card:hover{
    transform:translateY(-8px);
}

.preview-card svg{
    width:34px;
    height:34px;
    color:var(--primary);
    margin-bottom:18px;
}

.preview-card h3{
    margin-bottom:8px;
    color:var(--dark);
}

.preview-card p{
    color:var(--text);
    line-height:1.6;
}

/* CTA */

.cta{
    background:var(--primary);
    color:white;
    text-align:center;
    padding:90px 8%;
}

.cta h2{
    font-size:clamp(2rem,4vw,3rem);
    margin:18px 0;
}

.cta p{
    max-width:650px;
    margin:0 auto 35px;
    color:#DBEAFE;
}

.cta .tag{
    color:#BFE4FF;
}

/* MOBILE */

@media (max-width:768px){

    .hero{
        padding:100px 6% 70px;
        background-position:68% center;
    }

    .hero h1{
        font-size:2.35rem;
        letter-spacing:-1px;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .hero-buttons .btn{
        width:100%;
    }

    .services-preview{
        padding:80px 6%;
    }

    .preview-grid{
        grid-template-columns:1fr;
    }

    .cta{
        padding:80px 6%;
    }

}