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

body {
    font-family: 'Arial', sans-serif;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Taustakuvat - vuorotteleva efekti */
.background-slider {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.background-image.active {
    opacity: 1;
}

/* Tummennos overlay kuvien päälle */
.background-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(20, 20, 20, 0.8),
        rgba(40, 40, 40, 0.7)
    );
}

/* Logo - Sulavampi versio */
.logo {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.05));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 8px 32px rgba(212, 175, 55, 0.3),
        0 4px 16px rgba(212, 175, 55, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(212, 175, 55, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.4s ease;
    animation: logoFloat 4s ease-in-out infinite;
}

.logo:hover {
    transform: translateX(-50%) translateY(-5px) scale(1.05);
    box-shadow: 
        0 12px 40px rgba(212, 175, 55, 0.5),
        0 6px 20px rgba(212, 175, 55, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
    border-color: rgba(212, 175, 55, 0.4);
}

.logo img {
    width: 85%;
    height: 85%;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(212, 175, 55, 0.3));
    transition: all 0.3s ease;
}

.logo:hover img {
    filter: drop-shadow(0 4px 12px rgba(212, 175, 55, 0.5));
    transform: scale(1.02);
}

@keyframes logoFloat {
    0%, 100% { 
        transform: translateX(-50%) translateY(0px) rotate(0deg);
        box-shadow: 
            0 8px 32px rgba(212, 175, 55, 0.3),
            0 4px 16px rgba(212, 175, 55, 0.2),
            inset 0 2px 4px rgba(255, 255, 255, 0.1);
    }
    50% { 
        transform: translateX(-50%) translateY(-8px) rotate(1deg);
        box-shadow: 
            0 16px 40px rgba(212, 175, 55, 0.4),
            0 8px 20px rgba(212, 175, 55, 0.25),
            inset 0 2px 4px rgba(255, 255, 255, 0.15);
    }
}

/* Main content */
.container {
    text-align: center;
    max-width: 800px;
    padding: 0 20px;
    z-index: 10;
}

.title {
    font-size: clamp(2.5rem, 7vw, 6rem);
    font-weight: 300;
    letter-spacing: 0.1em;
    margin-bottom: 30px;
    background: linear-gradient(135deg, #d4af37, #f4e49c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.subtitle {
    font-size: clamp(1rem, 3vw, 1.5rem);
    color: #d4af37;
    margin-bottom: 20px;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hero-tagline {
    font-size: clamp(1.1rem, 3vw, 1.8rem);
    color: #ffffff;
    margin-bottom: 30px;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.action-word {
    color: #d4af37;
    font-weight: normal;
    text-shadow: 0 2px 4px rgba(212, 175, 55, 0.3);
}

.launch-text {
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    color: #cccccc;
    margin-bottom: 50px;
    font-weight: 300;
    letter-spacing: 0.03em;
}

/* Countdown */
.countdown {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.countdown-item {
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 15px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    backdrop-filter: blur(10px);
    min-width: 80px;
}

.countdown-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: #d4af37;
    display: block;
    line-height: 1;
}

.countdown-label {
    font-size: 0.8rem;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 5px;
}

/* Email signup */
.email-signup {
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

.email-input {
    flex: 1;
    padding: 15px 20px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
    color: white;
    font-size: 1rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.email-input:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.email-input::placeholder {
    color: #aaa;
}

.notify-btn {
    padding: 15px 30px;
    background: linear-gradient(135deg, #d4af37, #b8941f);
    color: #000;
    border: none;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.notify-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.4);
    background: linear-gradient(135deg, #f4e49c, #d4af37);
}

/* Social links */
.social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.social-link {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    position: relative;
}

.social-link:hover {
    border-color: #d4af37;
    background: rgba(212, 175, 55, 0.1);
    transform: translateY(-5px);
}

/* Facebook logo */
.social-link.facebook::before {
    content: "";
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d4af37'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Instagram logo */
.social-link.instagram::before {
    content: "";
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d4af37'%3E%3Cpath d='M12 2.162c3.204 0 3.584.012 4.849.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069L12 2.162zm0-2.162C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947C23.732 2.699 21.314.277 16.952.073 15.671.014 15.263 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Email icon */
.social-link.email::before {
    content: "✉";
    font-size: 24px;
    color: #d4af37; /* Sama keltainen kuin muut */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Success message */
.success-message {
    background: rgba(0, 255, 0, 0.1);
    border: 1px solid rgba(0, 255, 0, 0.3);
    color: #4ade80;
    padding: 15px;
    border-radius: 10px;
    margin-top: 20px;
    display: none;
}

/* Responsive */
@media (max-width: 768px) {
    .email-signup {
        flex-direction: column;
    }
    
    .countdown {
        gap: 15px;
    }
    
    .countdown-item {
        padding: 15px;
        min-width: 70px;
    }
    
    .countdown-number {
        font-size: 2rem;
    }
}