body {
margin:0;
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(135deg,#0a1f44,#00112a);
color:white;
}

.navbar {
display:flex;
justify-content:space-between;
padding:20px 40px;
background: rgba(255,255,255,0.05);
backdrop-filter: blur(10px);
}

.logo span { font-weight:bold; font-size:22px; }
.pink { color:#ff2d95; }

nav a {
margin:0 15px;
text-decoration:none;
color:white;
}

.btn-glow {
padding:8px 15px;
background:#ff2d95;
border-radius:20px;
box-shadow:0 0 15px #ff2d95;
}

.hero {
text-align:center;
padding:120px 20px;
animation: fadeIn 1.5s ease;
}

.btn-primary {
background:#0066ff;
padding:12px 25px;
border-radius:30px;
text-decoration:none;
color:white;
box-shadow:0 0 20px #0066ff;
}

.glass-section {
background: rgba(255,255,255,0.05);
margin:40px;
padding:40px;
border-radius:20px;
backdrop-filter: blur(15px);
}

.cards {
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}

.card {
padding:30px;
border-radius:20px;
background: rgba(255,255,255,0.08);
transition:0.4s;
}

.card:hover {
transform: translateY(-10px);
box-shadow:0 0 25px #0066ff;
}

.pricing-section {
text-align:center;
padding:60px;
}

.price-card {
background: rgba(255,255,255,0.07);
padding:40px;
border-radius:20px;
width:300px;
display:inline-block;
margin:20px;
transition:0.4s;
}

.price-card.highlight {
border:2px solid #ff2d95;
box-shadow:0 0 25px #ff2d95;
}

.price-card:hover {
transform: scale(1.05);
}

.status-bar {
text-align:center;
padding:40px;
}

.online { color:#00ff88; }

footer {
text-align:center;
padding:30px;
background:#000814;
}

@keyframes fadeIn {
from {opacity:0; transform:translateY(30px);}
to {opacity:1; transform:translateY(0);}
}
.hidden {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease;
}

.visible {
opacity: 1;
transform: translateY(0);
}
/* ===== LOADER ===== */
#loader {
position: fixed;
width: 100%;
height: 100%;
background: linear-gradient(135deg,#0a1f44,#00112a);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
flex-direction: column;
transition: opacity 0.8s ease, visibility 0.8s;
}

.loader-content {
text-align: center;
}

.logo-loader {
font-size: 42px;
font-weight: bold;
letter-spacing: 2px;
animation: glowText 2s infinite alternate;
}

.blue { color: #00aaff; }
.pink { color: #ff2d95; }

.loader-bar {
width: 250px;
height: 6px;
background: rgba(255,255,255,0.1);
border-radius: 10px;
margin-top: 25px;
overflow: hidden;
}

.loader-progress {
height: 100%;
width: 0%;
background: linear-gradient(90deg,#00aaff,#ff2d95);
animation: loadBar 2.5s ease forwards;
}

@keyframes loadBar {
0% { width: 0%; }
100% { width: 100%; }
}

@keyframes glowText {
from { text-shadow: 0 0 10px #00aaff; }
to { text-shadow: 0 0 20px #ff2d95; }
}

.loader-hidden {
opacity: 0;
visibility: hidden;
}