* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


body {
    /* Sticky footer properties moved to global_ui.css */
}

.container {
    text-align: center;
    max-width: 1200px;
    width: 100%;
    transform: translateX(-300px);

    opacity: 0;
    animation: slideInCool 0.8s ease-out forwards;
    /* Tells the browser to promote this to its own compositor layer
               ahead of time, instead of doing that promotion mid-animation
               (a common cause of a visible stutter on the very first frame). */
    will-change: transform, opacity;
}

/* Dropped the rotate() component and reduced from 4 keyframe stops to 2.
           Rotation forces the browser to rasterize a rotated bounding box rather
           than an axis-aligned one, and it was happening on one of the largest
           elements on the page at the exact moment everything else on the page
           (particles.js init, hero float animation, ticker) was also starting. */
@keyframes slideInCool {
    0% {
        transform: translateX(-300px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}





.container h1 {
    font-size: 3rem;
    margin-bottom: 10px;
    color: #fff;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

.container p {
    font-size: 1.8rem;
    margin-bottom: 50px;
    color: #ccc;
}


.team-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    justify-content: center;
}


.team-cards .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 30px;
    width: 320px;
    text-decoration: none;

    color: #fff;

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-cards .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    text-decoration: none;

}


.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 15px;
    object-fit: cover;
    border: 3px solid #fff;
}


.card h2 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #fff;
}

.card p {
    font-size: 1.1rem;
    color: #ddd;
    line-height: 1.5;
}