/* Header */
header {
    position: relative;
    padding: 20px;
    z-index: 20;
    display: block !important;
}

.site-logo {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10001;
}

.dropdown {
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: 'Montserrat', sans-serif;
    z-index: 10000 !important;
    display: block !important;
}

.dropbtn {
    background-color: black;
    color: #d6ba66;
    border: 2px solid #d6ba66;
    padding: 10px 20px 20px;
    font-size: 1.2em;
    cursor: pointer;
    border-radius: 5px;
    font-family: 'Montserrat', sans-serif;
    display: block;
    position: relative;
    z-index: 10001 !important;
}

.dropbtn::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 15px;
    background: transparent;
    z-index: 10001 !important;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: -2px;
    background-color: black !important;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10000 !important;
    border: 1px solid #d6ba66 !important;
    border-radius: 5px;
}

.dropdown-content a {
    color: #d6ba66 !important;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1em;
    position: relative;
    background: none !important;
    border: none !important;
}

.dropdown-content a:hover {
    background-color: #1a1a1a !important;
}

.dropdown:hover .dropdown-content, .dropdown-content:hover {
    display: block !important;
}

.dropdown:hover .dropbtn {
    background-color: #1a1a1a;
    color: #e0c77a;
    border-color: #e0c77a;
}

/* Layout components */
#page, .site-content, .hero, .section, .footer {
    position: relative;
    z-index: 10;
}

.hero, .section, .footer {
    padding: 20px;
    margin: 0 auto;
    max-width: 1200px;
    width: 100% !important;
}

.section { margin-bottom: 40px; }
.hero { margin-bottom: 80px; }
.hero h1 { font-size: 4.32em; line-height: 1.2; margin-bottom: 0; font-weight: 400; }
.hero h1 span { display: block; font-size: 0.8em; }
body.home .hero h1 span { font-weight: 400 !important; }
.hero p { margin-top: 40px; font-size: 1.44em; }
.hero p span.italic { font-style: italic; }
.hero .btn { margin-top: 40px; }

.stats { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 20px; }
.stats div { text-align: center; }
.stats h3 { margin: 0; font-size: 2em; }
.stats p { margin: 5px 0 0; font-size: 1em; }

.perks, .imu, .metaverse { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.perks > div, .imu > div, .metaverse > div { flex: 1; min-width: 300px; }
.perks img, .imu img, .metaverse img { max-width: 100%; height: auto; }

.interface { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.interface > div { flex: 1; min-width: 250px; }

body.home p, body.home li, body.home a, body.home span, body.home div { font-weight: bold !important; }

/* Footer */
.footer {
    position: relative;
    z-index: 10;
    padding: 20px;
    margin: 40px auto 0;
    width: 100% !important;
    max-width: 1200px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.8) !important;
}

.footer .social-links a { color: #d6ba66 !important; }
.footer .social-links a:hover { color: #e0c77a !important; }
.footer a[href^="mailto:"] { color: white !important; }
.footer a[href^="mailto:"]:hover { color: #e0c77a !important; }