@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
        
        body { font-family: 'Inter', sans-serif; color: white; background-color: #0c0a09; }
        body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../bg.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; filter: blur(8px) brightness(0.6); z-index: -1; opacity: 0.8; }
        body::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(12, 10, 9, 0.4); z-index: -1; }
        .content-wrapper { position: relative; z-index: 1; padding-top: 1rem; min-height: 100vh; display: flex; flex-direction: column; align-items: center; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        .animated-card { animation: fadeIn 0.8s ease-out forwards; }
        @keyframes pulse-once { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
        .shadow_top { box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2); }
        .text-xs { margin-top:10px; }
        .modal { display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); justify-content: center; align-items: center; }
        .modal-content { background-color: #1a1a1a; padding: 30px; border-radius: 10px; border: 2px solid #5eead4; text-align: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); max-width: 90%; animation: fadeIn 0.5s ease-out; }
        .page { display: block; }
        .page.active { display: block; }
        #home-page main { margin-top: 10rem; }
        @media (max-width: 768px) { .page > main { margin-top: 2rem; } }