/* =====================================================
   FIU EMS Landing Page
   Modern FIU Branding
   ===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {

    font-family: "Segoe UI", Arial, Helvetica, sans-serif;

    background: linear-gradient(135deg, #081E3F 0%, #00509D 100%);

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

}

.container {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 40px;

}

.card {

    width: 700px;

    max-width: 95%;

    background: #FFFFFF;

    border-radius: 20px;

    padding: 60px;

    text-align: center;

    box-shadow: 0 20px 50px rgba(0,0,0,.25);

}

.logo {

    width: 120px;

    margin-bottom: 25px;

}

h1 {

    color: #081E3F;

    font-size: 52px;

    font-weight: 700;

}

h2 {

    color: #B6862C;

    font-size: 24px;

    font-weight: 400;

    letter-spacing: 2px;

    margin-top: 10px;

}

.gold-bar {

    width: 90px;

    height: 5px;

    background: #B6862C;

    border-radius: 10px;

    margin: 30px auto;

}

p {

    color: #444;

    font-size: 20px;

    line-height: 1.8;

    margin-bottom: 15px;

}

.small {

    color: #666;

    font-size: 16px;

}

/* ==========================================
   Connection Status
   ========================================== */

.status {

    margin-top: 40px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

    font-size: 18px;

    color: #081E3F;

}

.status-dot {

    width: 14px;

    height: 14px;

    border-radius: 50%;

    background: #28A745;

    animation: pulse 1.5s infinite;

}

.loading::after {

    content: "";

    animation: dots 2s infinite;

}

/* ==========================================
   Animations
   ========================================== */

@keyframes pulse {

    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: .5;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }

}

@keyframes dots {

    0% {
        content: "";
    }

    25% {
        content: ".";
    }

    50% {
        content: "..";
    }

    75% {
        content: "...";
    }

    100% {
        content: "";
    }

}

/* ==========================================
   Responsive
   ========================================== */

@media (max-width: 768px) {

    .card {

        padding: 40px 25px;

    }

    h1 {

        font-size: 40px;

    }

    h2 {

        font-size: 20px;

    }

    p {

        font-size: 18px;

    }

}