:root {
    --brand:#1e7b85; 
    --brand-2:#a3e4e6; 
    --surface:#f9fafb; 
    --dark:#0b0f14;
    --muted:#6c757d;
}
body { font-family: "Poppins", sans-serif; }
.page-header {
    background:linear-gradient(to right, rgba(109, 167, 221, 0.9), rgba(6,182,212,0.9)), url("./img/") center/cover no-repeat;
    color: white;
    padding: 100px 0;
    text-align: center;
}
.page-header h1 { font-size: 3rem; font-weight: 700; }
.project-card {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    transition: transform .3s, box-shadow .3s;
}
.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.project-img {
    height: 220px;
    object-fit: cover;
    width: 100%;
}

.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }