* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Tahoma, Arial, sans-serif;
}

:root {
    --navy:         #1e3a5f;
    --navy-light:   #2d5282;
    --navy-dark:    #152a47;
    --gold:         #e2b96f;
    --gold-light:   #f0d090;
    --gold-dark:    #c49a4a;
    --gold-bg:      #fef9ee;
    --bg:           #f0f4f8;
    --card:         #ffffff;
    --text:         #1a2e4a;
    --text-light:   #5a7a9a;
    --border:       #d0dce8;
    --nav-height:   70px;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 3px; }

html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
}

/* ===== Pages ===== */
.page-wrapper { padding-top: var(--nav-height); min-height: 100vh; }
.page         { display: none; animation: fadeIn 0.35s ease; }
.page.active  { display: block; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== Fade Up ===== */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Loading State ===== */
.loading-state {
    text-align: center;
    padding: 60px;
    grid-column: 1 / -1;
    color: var(--text-light);
}

.loading-icon {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.3;
}