{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
}

.container {
text-align: center;
width: 100%;
max-width: 1200px;
padding: 20px;
}

.title {
font-size: 4rem;
font-weight: 900;
letter-spacing: 0.1em;
margin-bottom: 2rem;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
from { text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); }
to   { text-shadow: 0 4px 20px rgba(255, 255, 255, 0.4); }
}

.countdown-section { margin: 4rem 0; }

.countdown-container {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 3rem;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.countdown-display {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 2rem;
}

.time-block {
background: rgba(255, 255, 255, 0.15);
border-radius: 15px;
padding: 1.5rem;
min-width: 120px;
border: 1px solid rgba(255, 255, 255, 0.3);
transition: transform 0.3s ease;
}

.time-block:hover { transform: translateY(-5px); }

.time-number {
font-size: 3rem;
font-weight: bold;
line-height: 1;
margin-bottom: 0.5rem;
}

.time-label {
font-size: 0.9rem;
font-weight: 500;
opacity: 0.8;
letter-spacing: 0.1em;
}

.time-separator {
font-size: 2.5rem;
font-weight: bold;
opacity: 0.7;
animation: blink 1s infinite;
}

@keyframes blink {
0%, 50% { opacity: 0.7; }
51%,100% { opacity: 0.3; }
}

.launch-date {
font-size: 1.2rem;
opacity: 0.9;
margin-top: 1rem;
}

.expired-message {
background: rgba(255, 215, 0, 0.2);
border: 2px solid #ffd700;
border-radius: 15px;
padding: 2rem;
animation: celebrate 1s ease-in-out infinite alternate;
}

.expired-message h2 {
font-size: 2.5rem;
color: #ffd700;
margin-bottom: 1rem;
}

@keyframes celebrate {
from { transform: scale(1); }
to   { transform: scale(1.05); }
}

footer {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-size: 0.9rem;
opacity: 0.7;
}

@media (max-width: 768px) {
.title { font-size: 2.5rem; }
.countdown-container { padding: 2rem; }
.time-block { min-width: 80px; padding: 1rem; }
.time-number { font-size: 2rem; }
.time-separator { font-size: 1.5rem; }
}

@media (max-width: 480px) {
.countdown-display { gap: 0.5rem; }
.time-block { min-width: 70px; padding: 0.8rem; }
.time-number { font-size: 1.5rem; }
}