.hero-content {
    position: relative;
    z-index: 2;
}
:root {
    --bs-primary: #9370DB; /* MediumPurple / Lila */
    --bs-primary-rgb: 147, 112, 219;
    --bs-body-bg: #1e1e1e;
    --bs-body-color: #e0e0e0;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.25);
    --bs-tertiary-bg: #252526;
    --bs-dark-tertiary: #2c2c2e;
}

body {
    font-family: 'Lora', serif;
}

h1, h2, h3, .nav-link, .navbar-brand {
    font-family: 'Cinzel', serif;
}

.card {
    background-color: var(--bs-tertiary-bg);
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: var(--bs-primary);
    background-color: transparent;
    border-bottom-color: var(--bs-primary);
}

/* New Fluent Design Styles */
.hero-section {
    min-height: 60vh;
    background: linear-gradient(170deg, rgba(var(--bs-primary-rgb), 0.3) 0%, rgba(30, 30, 30, 0.8) 70%), url('/assets/img/banner.png') center center / cover no-repeat;
    background-size: cover;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    background-attachment: fixed;
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 0.75rem;
}

.bg-dark-tertiary {
    background-color: var(--bs-dark-tertiary) !important;
}