@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

body {
    font-family: 'Inter', sans-serif;
    color: #e2e8f0;
    background-color: #080C19;
}

.hero-dark-bg {
    background: radial-gradient(circle at 50% 0%, #0d1527 0%, #080C19 100%);
}

.card-dark {
    background: #0F172A;
    border: 1px solid #1E293B;
    transition: all 0.3s ease;
}

.card-dark:hover {
    border-color: #38BDF8;
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(56, 189, 248, 0.1);
}

.btn-cyan {
    background-color: #06B6D4;
    color: #080C19;
    font-weight: 700;
}

.btn-cyan:hover {
    background-color: #22D3EE;
}

/* Mobile Slide-out Drawer */
#mobile-drawer {
    transition: transform 0.3s ease-in-out;
}

#mobile-drawer.closed {
    transform: translateX(100%);
}

#mobile-drawer.open {
    transform: translateX(0%);
}