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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    min-height: 100vh;
    overflow: hidden;
    position: relative;
}

.floating-icons {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.floating-icon {
    position: absolute;
    animation: float 8s ease-in-out infinite;
    pointer-events: none;
    user-select: none;
}

@keyframes float {
    0% {
        transform: translateY(100vh) rotate(0deg) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
        transform: translateY(90vh) rotate(36deg) scale(0.8);
    }
    20% {
        transform: translateY(80vh) rotate(72deg) scale(1);
    }
    30% {
        transform: translateY(70vh) rotate(108deg) scale(1.1);
    }
    40% {
        transform: translateY(60vh) rotate(144deg) scale(1.2);
    }
    50% {
        transform: translateY(50vh) rotate(180deg) scale(1.3);
    }
    60% {
        transform: translateY(40vh) rotate(216deg) scale(1.2);
    }
    70% {
        transform: translateY(30vh) rotate(252deg) scale(1.1);
    }
    80% {
        transform: translateY(20vh) rotate(288deg) scale(1);
    }
    90% {
        transform: translateY(10vh) rotate(324deg) scale(0.8);
    }
    100% {
        transform: translateY(-10vh) rotate(360deg) scale(0.5);
        opacity: 0;
    }
}

/* Icon container styles matching your design */
.icon-container {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Brand colors */
.bg-brand-1 { background: rgba(0, 140, 63, 0.2); }
.bg-brand-2 { background: rgba(0, 107, 50, 0.2); }
.bg-brand-3 { background: linear-gradient(135deg, rgba(0, 140, 63, 0.1), rgba(0, 107, 50, 0.2)); }
.bg-brand-4 { background: linear-gradient(45deg, rgba(0, 107, 50, 0.2), rgba(0, 140, 63, 0.1)); }

/* Accent colors */
.bg-accent-1 { background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.3)); }
.bg-accent-2 { background: linear-gradient(45deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2)); }
.bg-accent-3 { background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(249, 115, 22, 0.25)); }
.bg-accent-4 { background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(20, 184, 166, 0.2)); }
.bg-accent-5 { background: linear-gradient(90deg, rgba(239, 68, 68, 0.3), rgba(236, 72, 153, 0.3)); }
.bg-accent-6 { background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(59, 130, 246, 0.25)); }
.bg-accent-7 { background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.2)); }
.bg-accent-8 { background: linear-gradient(45deg, rgba(244, 63, 94, 0.25), rgba(236, 72, 153, 0.25)); }
.bg-accent-9 { background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(124, 58, 237, 0.3)); }
.bg-accent-10 { background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 191, 36, 0.2)); }

/* Text colors */
.text-brand-1 { color: #008c3f; }
.text-brand-2 { color: #006b32; }
.text-accent-1 { color: #2563eb; }
.text-accent-2 { color: #9333ea; }
.text-accent-3 { color: #ea580c; }
.text-accent-4 { color: #059669; }
.text-accent-5 { color: #dc2626; }
.text-accent-6 { color: #4f46e5; }
.text-accent-7 { color: #0d9488; }
.text-accent-8 { color: #e11d48; }
.text-accent-9 { color: #7c3aed; }
.text-accent-10 { color: #d97706; }

/* Size classes */
.size-10 { width: 2.5rem; height: 2.5rem; }
.size-12 { width: 3rem; height: 3rem; }
.size-14 { width: 3.5rem; height: 3.5rem; }
.size-16 { width: 4rem; height: 4rem; }
.size-18 { width: 4.5rem; height: 4.5rem; }
.size-20 { width: 5rem; height: 5rem; }
.size-22 { width: 5.5rem; height: 5.5rem; }
.size-24 { width: 6rem; height: 6rem; }

/* Icon sizes */
.icon-5 { width: 1.25rem; height: 1.25rem; }
.icon-6 { width: 1.5rem; height: 1.5rem; }
.icon-7 { width: 1.75rem; height: 1.75rem; }
.icon-8 { width: 2rem; height: 2rem; }
.icon-9 { width: 2.25rem; height: 2.25rem; }
.icon-10 { width: 2.5rem; height: 2.5rem; }
.icon-11 { width: 2.75rem; height: 2.75rem; }
.icon-12 { width: 3rem; height: 3rem; }

.main-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
}

.logo-container {
    margin-bottom: 2rem;
}

.logo {
    width: 300px;
    height: auto;
    max-width: 90vw;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.redirect-info {
    color: #008c3f;
    font-size: 1.2rem;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem 2rem;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#countdown {
    font-weight: bold;
    color: #ffd700;
    font-size: 1.3em;
}

/* Responsive design */
@media (max-width: 768px) {
    .logo {
        width: 250px;
    }
    
    .redirect-info {
        font-size: 1rem;
        padding: 0.8rem 1.5rem;
    }
    
    .floating-icon {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .logo {
        width: 200px;
    }
    
    .redirect-info {
        font-size: 0.9rem;
        padding: 0.6rem 1.2rem;
    }
    
    .floating-icon {
        font-size: 1.2rem;
    }
}