@media (max-width: 768px) {
    .logo {
        font-size: 2.5rem;
    }
    
    .title {
        font-size: 1.875rem;
    }
    
    .subtitle {
        font-size: 1rem;
    }
    
    .countdown-container {
        gap: 1rem;
    }
    
    .flip-card-wrapper {
        width: 80px;
        height: 100px;
    }
    
    .flip-card-top .number,
    .flip-card-bottom .number,
    .flip-card-top-flip .number,
    .flip-card-bottom-flip .number {
        font-size: 2rem;
    }
    
    .flip-card-bottom .number,
    .flip-card-bottom-flip .number {
        margin-top: 0.35rem;
    }
    
    .unit-label {
        font-size: 0.75rem;
    }
    
    .gradient-shape {
        filter: blur(60px);
    }
    
    .shape-1 {
        width: 400px;
        height: 400px;
    }
    
    .shape-2 {
        width: 350px;
        height: 350px;
    }
    
    .shape-3 {
        width: 300px;
        height: 300px;
    }
}

@media (max-width: 480px) {
    .main-container {
        padding: 1rem;
    }
    
    .logo {
        font-size: 2rem;
    }
    
    .title {
        font-size: 1.5rem;
    }
    
    .subtitle {
        font-size: 0.9375rem;
    }
    
    .countdown-container {
        gap: 0.75rem;
    }
    
    .flip-card-wrapper {
        width: 70px;
        height: 85px;
        border-radius: 12px;
    }
    
    .flip-card-top,
    .flip-card-top-flip {
        border-radius: 12px 12px 0 0;
    }
    
    .flip-card-bottom,
    .flip-card-bottom-flip {
        border-radius: 0 0 12px 12px;
    }
    
    .flip-card-top .number,
    .flip-card-bottom .number,
    .flip-card-top-flip .number,
    .flip-card-bottom-flip .number {
        font-size: 1.5rem;
    }
    
    .flip-card-bottom .number,
    .flip-card-bottom-flip .number {
        margin-top: 0.25rem;
    }
    
    .message {
        font-size: 0.9375rem;
    }
    
    .footer p {
        font-size: 0.8125rem;
    }
}