:root {
    --bg: #0b0d10;
    --panel: #12161b;
    --text: #e5e7eb;
    --text-muted: #9aa4af;
    --primary: #edd63a; /* royal violet accent */
    --primary-700: #edd63a;
    --contrast: #293140; /* subtle borders */
    --glow: 0 0 24px rgba(124, 58, 237, 0.35);
}

html, body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
}

.bg-translucent {
    background: rgba(18, 22, 27, 0.55);
    backdrop-filter: saturate(120%) blur(8px);
}

.bg-panel {
    background: var(--panel);
}

.border-contrast {
    border-color: var(--contrast) !important;
}

.text-secondary-emphasis {
    color: var(--text-muted) !important;
}

.text-body-emphasis {
    color: var(--text) !important;
}

.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-700);
    --bs-btn-hover-border-color: var(--primary-700);
}

.btn-outline-contrast {
    --bs-btn-color: var(--text);
    --bs-btn-border-color: var(--contrast);
    --bs-btn-hover-bg: #19202a;
    --bs-btn-hover-border-color: var(--contrast);
}

.btn-glow {
    box-shadow: var(--glow);
}

.navbar-brand .brand-mark,
.footer .brand-mark {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--primary);
    border-radius: 50%;
    position: relative;
}

.navbar-brand .brand-mark::after,
.footer .brand-mark::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: radial-gradient(circle at 60% 40%, rgba(124,58,237,.35), transparent 60%);
}

.hero {
    position: relative;
    min-height: 68vh;
    padding-top: 6rem; /* account for fixed nav */
    padding-bottom: 3rem;
    text-align: center;
    text-shadow: 
        0 0 1px #fff,
        0 0 1px #fff,
        0 0 1px #daa520 ,
        0 0 40px #da9100 ,
        0 0 32px #da9100 ,
        0 0 1px #daa520 ,
        0 0 20px #0b0d10,
        0 0 21px #0b0d10;
}

.hero-badge {
    display: inline-block;
    font-size: .75rem;
    letter-spacing: .12em;
    color: var(--text-muted);
    border: 1px solid var(--contrast);
    border-radius: 999px;
    padding: .35rem .75rem;
    margin-bottom: 1rem;
}

.hero-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(1200px 500px at 50% 20%, rgba(249,241,0,.18), transparent 65%), radial-gradient(900px 600px at 70% 80%, rgba(220,219,217,.12), transparent 60%);
    pointer-events: none;
}

.section {
    padding: 3rem 0;
}

.section-title {
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    margin-bottom: 1.25rem;
}

.feature .icon {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: .5rem;
}

.register {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: .5rem;
}

.rates-list {
    margin: 0;
}

/* Subtle focus ring for accessibility */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

div.wrapper {
    padding: 2.5rem;
    margin: 2rem 0;
    border-radius: 1rem;
    background-color: rgba(0,0,0,.15);
}