/* styles.css */
/* Dragon Web Hosting - Main Website Styles (Dark Mode) */

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

/* 1. Core Base Setup */
body { 
    background-color: #050505; 
    color: #e5e5e5; 
    font-family: 'Outfit', sans-serif;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
}

/* 2. Glassmorphism Components */
.glass-card { 
    background: rgba(20, 20, 20, 0.6); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08); 
}

.glass-nav { 
    background: rgba(5, 5, 5, 0.95); 
    backdrop-filter: blur(16px); 
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
}

/* 3. Typography & Gradients */
.text-gradient { 
    background: linear-gradient(to right, #dc2626, #ea580c); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}

/* 4. Animations */
.page-section { 
    display: none; 
    min-height: 80vh; 
    animation: fadeIn 0.5s forwards; 
}

.page-section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.animate-float { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* 5. Modals & Utilities */
#checkout-modal.hidden { opacity: 0; pointer-events: none; }
#checkout-modal.flex { opacity: 1; pointer-events: auto; }
#mobile-menu-overlay { transition: opacity 0.3s ease; opacity: 0; pointer-events: none; }
#mobile-menu-overlay.open { opacity: 1; pointer-events: auto; }
#mobile-drawer { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(100%); }
#mobile-drawer.open { transform: translateX(0); }
#cookie-banner { animation: slideUp 0.5s ease-out forwards; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* 6. Tables (Dark Theme) */
.tech-table th, .vps-table th { 
    text-align: left; font-size: 0.75rem; text-transform: uppercase; 
    color: #6b7280; font-weight: 700; padding: 0.75rem 1rem; 
    background-color: rgba(0,0,0,0.3); border-bottom: 1px solid #1f2937; 
}
.tech-table td, .vps-table td { 
    padding: 0.75rem 1rem; border-bottom: 1px solid #1f2937; 
    font-size: 0.875rem; color: #d1d5db; 
}
.tech-table tr:hover { background-color: rgba(255,255,255,0.05); }

/* 7. Buttons (Client Login Visibility) */
a[href*="client-login"], .bg-dragon-gradient {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
}