/* ═══════════════════════════════════════════════════════════════
   Crown & Compass — Premium Gold-on-Navy Brand System
   Deep midnight navy backgrounds with rich gold gradients,
   luminous glow effects, and subtle sparkle particle textures.
   ═══════════════════════════════════════════════════════════════ */

/* ── Override CSS Variables ─────────────────────────────────── */
:root {
    --deep: #0A0E1A;
    --warm: #101829;
    --warm2: #10162A;
    --warm-hover: #1A2540;
    --card: #111827;
    --card-border: rgba(200,168,86,0.18);
    --card-border-featured: rgba(200,168,86,0.6);
    --text: #E8ECF4;
    --muted: #8892A8;
    --border: rgba(200,168,86,0.15);
    --border-hover: rgba(200,168,86,0.3);

    /* Gold family — richer gradients */
    --gold: #C8A856;
    --gold-light: #E8D5A0;
    --gold-dark: #A08840;
    --accent: #D4A853;
    --gold-gradient: linear-gradient(135deg, #A08840 0%, #C8A856 30%, #E8D5A0 60%, #C8A856 100%);
    --gold-gradient-btn: linear-gradient(135deg, #C8A856 0%, #DCC070 50%, #C8A856 100%);
    --gold-glow: 0 0 20px rgba(200,168,86,0.25), 0 0 60px rgba(200,168,86,0.08);
    --gold-glow-strong: 0 0 30px rgba(200,168,86,0.35), 0 0 80px rgba(200,168,86,0.12);

    /* Semantic status colors adjusted for navy */
    --success: #5FA87A;
    --warning: #D4A853;
    --danger: #C85656;
    --info: #5A8AC8;

    /* Navy tints */
    --navy-mid: #162038;
    --navy-light: #1E2D4D;
}

/* ── Body & Background ──────────────────────────────────────── */
body {
    background: var(--deep) !important;
    color: var(--text);
}

/* Grain texture with navy tint */
body::before {
    opacity: 0.035 !important;
}

/* Sparkle / particle background overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(1.2px 1.2px at 10% 15%, rgba(200,168,86,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 25% 45%, rgba(200,168,86,0.35) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 40% 80%, rgba(200,168,86,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 55% 25%, rgba(200,168,86,0.3) 0%, transparent 100%),
        radial-gradient(1.3px 1.3px at 70% 60%, rgba(200,168,86,0.45) 0%, transparent 100%),
        radial-gradient(1px 1px at 85% 35%, rgba(200,168,86,0.25) 0%, transparent 100%),
        radial-gradient(1.4px 1.4px at 15% 70%, rgba(200,168,86,0.38) 0%, transparent 100%),
        radial-gradient(1px 1px at 60% 90%, rgba(200,168,86,0.3) 0%, transparent 100%),
        radial-gradient(1.2px 1.2px at 90% 50%, rgba(200,168,86,0.35) 0%, transparent 100%),
        radial-gradient(1px 1px at 35% 10%, rgba(200,168,86,0.4) 0%, transparent 100%),
        radial-gradient(1.3px 1.3px at 50% 55%, rgba(200,168,86,0.28) 0%, transparent 100%),
        radial-gradient(1px 1px at 75% 85%, rgba(200,168,86,0.32) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 5% 40%, rgba(200,168,86,0.42) 0%, transparent 100%),
        radial-gradient(1px 1px at 95% 75%, rgba(200,168,86,0.3) 0%, transparent 100%),
        radial-gradient(1.2px 1.2px at 45% 5%, rgba(200,168,86,0.36) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
    animation: sparkleFloat 12s ease-in-out infinite alternate;
}

@keyframes sparkleFloat {
    0% { opacity: 0.35; transform: translateY(0); }
    50% { opacity: 0.55; }
    100% { opacity: 0.35; transform: translateY(-3px); }
}

/* ── Navigation ─────────────────────────────────────────────── */
nav {
    background: linear-gradient(to bottom, rgba(10,14,26,0.97), rgba(10,14,26,0.85)) !important;
    border-bottom: 1px solid rgba(200,168,86,0.1) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ── Gold Gradient Buttons ──────────────────────────────────── */
.nav-cta,
.hero-cta,
.btn-primary {
    background: var(--gold-gradient-btn) !important;
    color: var(--deep) !important;
    position: relative;
    box-shadow: 0 4px 15px rgba(200,168,86,0.2);
    border: none !important;
}

.nav-cta:hover,
.hero-cta:hover,
.btn-primary:hover {
    background: var(--gold-gradient-btn) !important;
    filter: brightness(1.12);
    box-shadow: var(--gold-glow-strong) !important;
    transform: translateY(-2px);
}

/* Outline / secondary buttons on navy */
.nav-admin,
.btn-outline,
.btn-secondary {
    border-color: rgba(200,168,86,0.25) !important;
    color: var(--gold) !important;
}

.nav-admin:hover,
.btn-outline:hover,
.btn-secondary:hover {
    background: rgba(200,168,86,0.08) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 15px rgba(200,168,86,0.1);
}

/* ── Cards & Panels ─────────────────────────────────────────── */
.card,
.service-card,
.testimonial-card,
.pillar,
.login-card,
.audience-item {
    background: rgba(16,24,41,0.6) !important;
    border-color: rgba(200,168,86,0.12) !important;
    transition: all 0.3s ease;
}

.card:hover,
.service-card:hover,
.testimonial-card:hover {
    border-color: rgba(200,168,86,0.35) !important;
    box-shadow: 0 8px 32px rgba(200,168,86,0.08), 0 0 1px rgba(200,168,86,0.2);
}

/* Featured card with gold glow */
.card.featured {
    border-color: var(--card-border-featured) !important;
    background: linear-gradient(160deg, #152035 0%, #111827 100%) !important;
    box-shadow: 0 0 40px rgba(200,168,86,0.1), 0 8px 32px rgba(0,0,0,0.3);
}

.card.featured:hover {
    box-shadow: 0 0 50px rgba(200,168,86,0.15), 0 12px 40px rgba(0,0,0,0.4);
}

/* ── Section Backgrounds ────────────────────────────────────── */
/* Approach / warm sections get navy-warm treatment */
.approach,
.trust-section,
.reassurance {
    background: var(--warm) !important;
}

/* Radial glow behind key sections */
.hero,
.closing,
.page-header {
    position: relative;
}

.hero::before,
.closing::before,
.page-header::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(ellipse at center, rgba(200,168,86,0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* ── Grid Borders (pillars, etc.) ───────────────────────────── */
.pillars-grid {
    background: rgba(200,168,86,0.08) !important;
    border-color: rgba(200,168,86,0.08) !important;
}

/* ── Footer ─────────────────────────────────────────────────── */
footer {
    border-top-color: rgba(200,168,86,0.1) !important;
    background: rgba(10,14,26,0.5);
}

.footer-social a {
    border-color: rgba(200,168,86,0.15) !important;
}

.footer-social a:hover {
    box-shadow: 0 0 12px rgba(200,168,86,0.15);
}

/* ── Form Inputs ────────────────────────────────────────────── */
input,
textarea,
select {
    background: var(--deep) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(200,168,86,0.1), 0 0 15px rgba(200,168,86,0.08);
    outline: none;
}

input::placeholder,
textarea::placeholder {
    color: var(--muted) !important;
}

/* ── Badges & Tags ──────────────────────────────────────────── */
.badge,
.testimonial-context-tag {
    background: rgba(200,168,86,0.12) !important;
    border-color: rgba(200,168,86,0.2) !important;
    box-shadow: 0 0 10px rgba(200,168,86,0.05);
}

/* Badge on pricing cards (solid gold) */
.card .badge {
    background: var(--gold-gradient-btn) !important;
    border: none !important;
    color: var(--deep) !important;
    box-shadow: 0 2px 12px rgba(200,168,86,0.3);
}

/* ── Dividers & Lines ───────────────────────────────────────── */
.hero-line,
.card-divider {
    background: linear-gradient(90deg, transparent, rgba(200,168,86,0.4), transparent) !important;
}

/* ── Mobile Menu ────────────────────────────────────────────── */
.mobile-menu,
.mobile-nav {
    background: rgba(10,14,26,0.98) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ── Scrollbar Styling (WebKit) ─────────────────────────────── */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--deep);
}

::-webkit-scrollbar-thumb {
    background: rgba(200,168,86,0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(200,168,86,0.35);
}

/* ── Selection Color ────────────────────────────────────────── */
::selection {
    background: rgba(200,168,86,0.25);
    color: var(--text);
}

/* ── Keyframe: Subtle glow pulse for featured elements ────── */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(200,168,86,0.1); }
    50% { box-shadow: 0 0 35px rgba(200,168,86,0.2); }
}

.card.featured {
    animation: glowPulse 4s ease-in-out infinite;
}

/* ── Link hover glow ────────────────────────────────────────── */
a:not(.btn):not(.nav-cta):not(.hero-cta):not(.btn-primary):not(.btn-outline):not(.nav-admin) {
    transition: color 0.2s, text-shadow 0.2s;
}

/* ── Assessment specific ────────────────────────────────────── */
.option-card,
.result-card {
    background: rgba(16,24,41,0.6) !important;
    border-color: rgba(200,168,86,0.12) !important;
}

.option-card:hover,
.option-card.selected {
    border-color: var(--gold) !important;
    box-shadow: 0 0 20px rgba(200,168,86,0.1);
}

/* ── Organizations specific ─────────────────────────────────── */
.offering-card,
.org-card {
    background: rgba(16,24,41,0.6) !important;
    border-color: rgba(200,168,86,0.12) !important;
}

.offering-card:hover,
.org-card:hover {
    border-color: rgba(200,168,86,0.35) !important;
    box-shadow: 0 8px 32px rgba(200,168,86,0.08);
}

/* ── Admin specific ─────────────────────────────────────────── */
.stat-card,
.lead-card,
.tab-btn,
.sidebar-link {
    transition: all 0.2s;
}

.stat-card {
    background: rgba(16,24,41,0.6) !important;
    border-color: rgba(200,168,86,0.12) !important;
}

.stat-card:hover {
    border-color: rgba(200,168,86,0.25) !important;
}

/* Admin table rows */
tr:hover td {
    background: rgba(200,168,86,0.03) !important;
}

/* ── Ensure z-index layering ────────────────────────────────── */
nav { z-index: 100; }
body::before { z-index: 0; }
body::after { z-index: 0; }
main, section, .page, .hero, .pillars, .approach, .services, .testimonials, .closing, footer,
#login-screen, #dashboard, .assessment-container, .consultation-form {
    position: relative;
    z-index: 1;
}