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

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

/* --- Header & Navigation --- */
#header {
    background-color: transparent;
    border-bottom: 1px solid transparent;
}
#header.scrolled {
    background-color: rgba(3, 7, 18, 0.8);
    backdrop-filter: blur(10px);
    border-bottom-color: #1f2937;
}
.nav-link { @apply text-gray-400 font-medium hover:text-cyan-400 transition-colors duration-300; }

/* --- Mobile Menu --- */
.mobile-menu {
    @apply md:hidden absolute top-0 right-0 h-screen w-64 bg-gray-900 p-8 pt-24 space-y-4 transform translate-x-full transition-transform duration-300 ease-in-out;
}
.mobile-menu.open { @apply translate-x-0; }
.mobile-nav-link { @apply block text-lg text-gray-300 hover:text-cyan-400; }

/* --- Hero Section & Backgrounds --- */
.bg-grid { background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 30px 30px; }
.bg-gradient { background: radial-gradient(ellipse at center, rgba(3, 7, 18, 0) 0%, #030712 100%); }
#typewriter::after { content: '|'; animation: blink 0.7s infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* --- Buttons --- */
.btn { @apply inline-block px-8 py-3 rounded-lg font-bold text-base transition duration-300 transform; }
.btn-sm { @apply px-4 py-2 text-sm; }
.btn-primary { @apply bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/20 hover:scale-105; }
.btn-secondary { @apply bg-gray-700/50 text-gray-300 hover:bg-gray-700/80 hover:text-white backdrop-blur-sm border border-gray-700; }

/* --- General Components --- */
.section-title { @apply text-3xl md:text-4xl font-black text-white tracking-tight; }
.section-subtitle { @apply text-lg text-gray-400 max-w-3xl mx-auto mt-4; }
.prose { @apply text-gray-400 leading-relaxed max-w-4xl mx-auto; }
.prose p { @apply my-6; }

/* --- Ecosystem & Cards --- */
.card { @apply bg-gray-950/30 p-8 rounded-xl border border-gray-800 backdrop-blur-sm transition duration-300 h-full hover:border-cyan-500/50 hover:-translate-y-2; }
.card-icon { @apply text-3xl text-cyan-400 mb-4 inline-block; }
.card-title { @apply text-xl font-bold text-white mb-2; }
.card-text { @apply text-gray-400; }
.ecosystem-card { @apply block bg-gray-800/50 p-6 rounded-lg text-center transition duration-300 hover:bg-cyan-500/10 hover:-translate-y-1; }
.ecosystem-card i { @apply text-4xl text-cyan-400 mb-3; }
.ecosystem-card h3 { @apply text-xl font-bold text-white; }
.ecosystem-card p { @apply text-sm text-gray-500; }
.ecosystem-card.coming-soon { @apply opacity-50 cursor-not-allowed hover:-translate-y-0; }
.ecosystem-card.coming-soon::after { content: 'Coming Soon'; @apply block text-xs font-bold text-yellow-400 mt-2; }

/* --- CLI Tutorial --- */
.code-block { background-color: #0d1117; border: 1px solid #30363d; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); border-radius: 0.75rem; }
.code-header { @apply text-sm text-gray-400 px-4 py-2 border-b border-gray-700; }
.command-item { @apply border-b border-gray-800 last:border-b-0 pb-4 last:pb-0; }
.command-description { @apply text-gray-500 mb-2; }
.command-box { @apply bg-gray-900 rounded-md flex items-center justify-between; }
.command-box pre { @apply p-3; }
.command-box code { @apply text-cyan-300; }
.copy-btn { @apply p-3 text-gray-500 hover:text-white transition; }

/* --- Tech Deep Dive Cards --- */
.tech-card { @apply bg-gray-900 p-6 rounded-lg border border-gray-800; }
.tech-icon { @apply text-2xl text-cyan-400 float-right; }
.tech-card h3 { @apply text-xl font-bold text-white; }
.tech-card p { @apply text-gray-400 mt-2; }

/* --- Footer --- */
.footer-link { @apply text-gray-400 hover:text-cyan-400 transition; }