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

:root {
    --navy-blue:    #8a6d1a;
    --soft-blue:    #d4a82c;
    --sky-blue:     #f5d97a;
    --warm-beige:   #fef5e0;
    --cream-beige:  #fffaf0;
    --sand:         #f0e2c0;
    --deep-navy:    #5a4515;
    --accent-gold:  #f2b705;
    --shadow-blue:  rgba(138, 109, 26, 0.15);
}

body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg,
        var(--cream-beige) 0%,
        var(--warm-beige) 50%,
        var(--sand) 100%);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

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

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.1); }
}

@keyframes cardAppear {
    from { opacity: 0; transform: scale(0.95) translateY(20px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-8px); }
    60% { transform: translateY(-4px); }
}