body {
    font-family: 'Inter', sans-serif;
}
.hero-pattern {
    background-color: #0b2340;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231d4e89' fill-opacity='0.3'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Dark Mode ===== */
html.dark body { background-color: #0a0f1a; }

/* Surfaces */
.dark .bg-white { background-color: #111a2b !important; }
.dark .bg-brand-50 { background-color: #0f1726 !important; }
.dark .bg-gray-50 { background-color: #0f1726 !important; }
.dark .bg-gray-100 { background-color: #1e293b !important; }
.dark .bg-gray-900 { background-color: #060a12 !important; }

/* Text */
.dark .text-gray-900 { color: #f1f5f9 !important; }
.dark .text-gray-800 { color: #e2e8f0 !important; }
.dark .text-gray-700 { color: #cbd5e1 !important; }
.dark .text-gray-600 { color: #94a3b8 !important; }
.dark .text-gray-500 { color: #8a97a8 !important; }

/* Borders */
.dark .border-gray-100,
.dark .border-gray-200,
.dark .border-gray-300 { border-color: #1e293b !important; }
.dark .border-brand-100 { border-color: #1d2c45 !important; }

/* Form fields */
.dark input,
.dark textarea,
.dark select { background-color: #0f1726 !important; color: #e2e8f0 !important; border-color: #1e293b !important; }
.dark input::placeholder,
.dark textarea::placeholder { color: #64748b !important; }

/* Navbar when scrolled (uses bg-white) keeps readable shadow */
.dark #navbar.shadow-md { box-shadow: 0 1px 12px rgba(0,0,0,0.6) !important; }

/* Soften pure-white decorative blobs */
.dark .bg-brand-100 { background-color: #16233a !important; }

/* Mobile menu panel (semi-transparent white) */
.dark #mobile-menu { background-color: rgba(17, 26, 43, 0.97) !important; }
.dark #mobile-menu .mobile-link { color: #cbd5e1 !important; }

/* Modal Styles */
.modal {
    transition: opacity 0.25s ease;
}
body.modal-active {
    overflow-x: hidden;
    overflow-y: hidden !important;
}