:root {
    --primary-color: #00A9FF; 
    --secondary-color: #89CFF3;
    --success-color: #32DE8A;
    --light-glow: rgba(0, 169, 255, 0.4);
    --dark-bg: #10101A; /* Even deeper background */
    --card-bg: rgba(31, 31, 61, 0.85); /* Semi-transparent card background */
    --font-color: #EAEAEA;
    --font-secondary-color: #B4B4B4;
    --main-font: 'Poppins', sans-serif;
}

body {
    font-family: var(--main-font);
    background-color: var(--dark-bg);
    color: var(--font-color);
    margin: 0;
    line-height: 1.6;
    text-align: center;
    /* Background Image */
    background-image: linear-gradient(rgba(16, 16, 26, 0.9), rgba(16, 16, 26, 0.9)), url('https://images.unsplash.com/photo-1581009137042-c552b485697a?q=80&w=2070&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

header {
    padding: 2.5rem 1rem;
    margin-bottom: 2rem;
    animation: slideDown 0.8s ease-out;
}

header h1 {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
    text-shadow: 0 0 25px var(--light-glow);
}

header p {
    font-size: 1.3rem;
    color: var(--font-secondary-color);
    margin-top: -10px;
}

main {
    padding: 0 1rem;
    display: flex;
    justify-content: center;
    animation: fadeIn 1.2s ease-in-out;
}

fitness-agent {
    display: block;
    width: 100%;
    max-width: 900px;
}

footer {
    text-align: center;
    padding: 2rem 1rem;
    margin-top: 3rem;
    color: var(--font-secondary-color);
    font-size: 0.9rem;
}

/* Keyframe Animations */
@keyframes slideDown {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}