:root {
    --vermillion: #E63B2E;
    --navy: #1E3A5F;
    --sky: #7B9BBD;
    --canvas: #FAF9F6;
    --stone: #8B8680;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background: var(--canvas);
    color: var(--navy);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Aurora background */
.aurora {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.aurora .wave {
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 120%;
    height: 60%;
    border-radius: 45%;
    filter: blur(30px);
    opacity: 0.06;
}

.aurora .wave-1 {
    background: var(--vermillion);
    animation: wave1 10s ease-in-out infinite;
}

.aurora .wave-2 {
    background: var(--sky);
    bottom: -30%;
    animation: wave2 13s ease-in-out infinite;
}

.aurora .wave-3 {
    background: var(--vermillion);
    bottom: -25%;
    left: 20%;
    width: 100%;
    height: 50%;
    animation: wave3 16s ease-in-out infinite;
}

.aurora .wave-4 {
    background: var(--sky);
    bottom: auto;
    top: -15%;
    left: -20%;
    width: 130%;
    height: 55%;
    opacity: 0.05;
    animation: wave4 20s ease-in-out infinite;
}

.aurora .wave-5 {
    background: var(--vermillion);
    bottom: -35%;
    left: 10%;
    width: 110%;
    height: 65%;
    opacity: 0.035;
    animation: wave5 14s ease-in-out infinite;
}

.aurora .glow {
    position: absolute;
    top: -20%;
    left: 20%;
    width: 60%;
    height: 40%;
    background: var(--sky);
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.08;
    animation: aurora-glow 8s ease-in-out infinite;
}

.aurora .glow-2 {
    position: absolute;
    top: -10%;
    right: -10%;
    width: 40%;
    height: 35%;
    background: var(--sky);
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.06;
    animation: aurora-glow2 12s ease-in-out infinite;
}

@keyframes wave1 {
    0%, 100% { transform: translateX(0) rotate(0deg) scale(1); }
    33% { transform: translateX(50px) rotate(3deg) scale(1.03); }
    66% { transform: translateX(-20px) rotate(-1deg) scale(0.98); }
}

@keyframes wave2 {
    0%, 100% { transform: translateX(0) rotate(0deg) scale(1); }
    33% { transform: translateX(-60px) rotate(-3deg) scale(1.02); }
    66% { transform: translateX(30px) rotate(2deg) scale(1.04); }
}

@keyframes wave3 {
    0%, 100% { transform: translateX(0) rotate(0deg) scale(1); }
    50% { transform: translateX(40px) rotate(2.5deg) scale(1.06); }
}

@keyframes wave4 {
    0%, 100% { transform: translateX(0) rotate(0deg) scale(1); }
    40% { transform: translateX(-35px) rotate(-2deg) scale(1.05); }
    70% { transform: translateX(25px) rotate(1.5deg) scale(0.97); }
}

@keyframes wave5 {
    0%, 100% { transform: translateX(0) rotate(0deg) scale(1); }
    50% { transform: translateX(45px) rotate(3deg) scale(1.04); }
}

@keyframes aurora-glow {
    0%, 100% { transform: translate(0, 0); opacity: 0.05; }
    33% { transform: translate(50px, 10px); opacity: 0.08; }
    66% { transform: translate(-20px, -5px); opacity: 0.04; }
}

@keyframes aurora-glow2 {
    0%, 100% { transform: translate(0, 0); opacity: 0.04; }
    50% { transform: translate(-40px, 15px); opacity: 0.07; }
}

/* Footer */
#site-footer {
    color: var(--stone);
    font-size: 0.875rem;
    text-align: center;
}

#site-footer a {
    color: var(--stone);
    text-decoration: none;
}

#site-footer a:hover {
    color: var(--navy);
}

/* Glass card container */
.container {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    padding: 3rem 2.5rem;
    box-shadow: 0 8px 32px rgba(30, 58, 95, 0.06);
    position: relative;
    z-index: 1;
}