:root {
    --royal-blue: #001f4d;
    --deep-navy: #001a40;
    --navy-gradient-start: #001a40;
    --navy-gradient-end: #002a66;

    --gold: #bfa21f;
    --gold-light: #f0d86b;
    --gold-soft: #d4c272;
    --gold-border: rgba(191, 162, 31, 0.3);

    --silver: #c0c0c0;
    --silver-light: #e8e8e8;

    --text-light: #e0e0e0;
    --text-silver: silver;

    --bg-light: #f5f7fa;
    --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

    --shadow-gold: rgba(191, 162, 31, 0.5);
    --shadow-dark: rgba(0, 0, 0, 0.3);

    --header-height: 90px;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Cinzel', serif;
}

body {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    color: #333;
    min-height: 100vh;
    padding-top: 90px;
    overflow-x: hidden;
}

.animated-header { position: fixed; top: -120px; width: 100%; height: 80px; background: linear-gradient(135deg, #001f4d, #001f4d); display: flex; justify-content: center; align-items: center; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.2); animation: slideDown 1s ease-out forwards; transition: height 0.5s ease, box-shadow 0.5s ease; z-index: 10; }
@keyframes slideDown {
    from {
        top: -120px;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}
.animated-header.shrink { height:60px; box-shadow:0 4px 12px rgba(0,0,0,0.3); }
.animated-header h1 { font-size: 28px; font-weight: 600; letter-spacing: 20px; opacity: 0;
    background: linear-gradient(
        120deg,
        #d4af37 0%,
        #f5f5f5 25%,
        #d4af37 50%,
        #ffffff 75%,
        #d4af37 100%
    );
    background-size: 200% auto; color: transparent; background-clip: text; -webkit-background-clip: text; animation: revealText 4s ease forwards, shine 8s linear infinite;
}
.animated-header.shrink h1{ opacity:0; }
@keyframes revealText {
    0% {
        letter-spacing: 25px;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        letter-spacing: 2px;
        opacity: 1;
    }
}

@keyframes shine {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}
.logo-container { width: 85px; height: 85px; margin: 100px auto; position: relative; }
.animated-header.shrink .logo-container{ transform:scale(0.8); }
.circle-svg { transform: rotate(-90deg); }
.circle-border { fill: none; stroke: gold; stroke-width: 6; stroke-dasharray: 502; stroke-dashoffset: 502; animation: drawCircle 2.2s ease-out forwards; }
@keyframes drawCircle {
    to {
        stroke-dashoffset: 0;
    }
}
.logo-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.6); opacity: 0; animation: showLogo 1s ease forwards 2s; }
.logo-img { width: 65px; height: auto; border-radius: 100px; margin-top: 6px; }
@keyframes showLogo {
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.scroll-header { position:fixed; top:0; width:100%; background:#001f4d; padding:15px 0; display:flex; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.5s ease; z-index:1999; }
.scroll-header.show { opacity:1; pointer-events:auto; }
.scroll-header ul { display:flex; gap:40px; list-style:none; margin:0; padding:0; }
.scroll-header li { color:white; font-weight:500; cursor:pointer; transition:0.3s; position: relative; }
.scroll-header li:hover { color:gold; }
.scroll-header li ul { position:absolute; top:100%; left:50%; transform:translateX(-50%); background:#002b80; border-radius: 10px; padding:10px 0; min-width:150px; display:flex; flex-direction:column; gap:10px; opacity:0; visibility:hidden; transition:0.3s ease; }
.scroll-header li ul li { padding:2px 8px; white-space:nowrap; }
.scroll-header li:hover > ul { opacity:1; visibility:visible; }
.scroll-header ul { display:flex; gap:10px; list-style:none; margin:0; padding:0; }
.scroll-header .nav-links a { color:#fff; text-decoration:none; font-size:18px; padding:5px 16px; border-radius:4px; transition:all 0.3s ease; position:relative; overflow:hidden; display:inline-block; }
.scroll-header .nav-links a::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; transition:left 0.7s ease;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.3),
        transparent
    );
}
.scroll-header .nav-links a:hover::before { left:100%; }
.scroll-header .nav-links a:hover { color: var(--gold); background:rgba(255,255,255,0.05); }
.nav-links a .arrow { display:inline-block; margin-left:6px; transition:transform 0.3s ease; }
.nav-links a:hover .arrow { transform:rotate(90deg); }