:root {
    --brand: #000080;
    --brand-light: #1a1aad;
}

body {
    font-family: 'Nunito', sans-serif;
    color: #1e293b;
}

/* ── Navbar ── */
#mainNav {
    background: rgba(0, 0, 80, 0.82);
    backdrop-filter: blur(12px);
    transition: padding 0.3s, background 0.3s;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

#mainNav.scrolled {
    background: rgba(0, 0, 80, 0.97);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

/* ── Hero ── */
.hero {
    min-height: 100vh;
    background: linear-gradient(160deg, #000050 0%, #000090 55%, #00004a 100%);
    padding-top: 80px;
}

.hero-logo {
    width: clamp(120px, 20vw, 200px);
    filter: brightness(0) invert(1);
}

.hero h1 {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

/* ── Section spacing ── */
.py-6 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* ── Feature cards ── */
.feature-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.feature-icon {
    color: var(--brand);
}

/* ── Store cards ── */
.store-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.store-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.brand-icon {
    color: var(--brand);
}

.brand-color {
    color: var(--brand);
}

/* ── Buttons ── */
.btn-primary {
    background-color: var(--brand);
    border-color: var(--brand);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--brand-light);
    border-color: var(--brand-light);
}

.btn-outline-light:hover {
    color: var(--brand);
}

.text-primary {
    color: var(--brand) !important;
}

/* ── LibriVox callout ── */
.librivox-card {
    border-left: 4px solid var(--brand) !important;
}

/* ── Legal pages ── */
.legal-content h2 {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.5rem;
}

.legal-content a {
    color: var(--brand);
}

/* ── Footer ── */
footer {
    font-size: 0.9rem;
}