/* Basic Reset and Font Setup */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Space Grotesk', sans-serif;
    color: #212121;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #d4e9e2, #bde0d5);
}

/* Background effects */
.background-shapes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; }
.background-shapes li { position: absolute; display: block; list-style: none; width: 20px; height: 20px; background: rgba(255, 255, 255, 0.5); border-radius: 50%; bottom: -150px; animation: float 25s linear infinite; }
.background-shapes li:nth-child(1){ left: 25%; width: 80px; height: 80px; animation-delay: 0s; }
.background-shapes li:nth-child(2){ left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; }
.background-shapes li:nth-child(3){ left: 70%; width: 20px; height: 20px; animation-delay: 4s; }
.background-shapes li:nth-child(4){ left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; }
.background-shapes li:nth-child(5){ left: 65%; width: 20px; height: 20px; animation-delay: 0s; }
.background-shapes li:nth-child(6){ left: 75%; width: 110px; height: 110px; animation-delay: 3s; }
.background-shapes li:nth-child(7){ left: 85%; width: 150px; height: 150px; animation-delay: 7s; }
@keyframes float { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(-120vh) rotate(720deg); opacity: 0; } }

/* Main Content Box */
.content-container {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 2.5rem 3rem;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    max-width: 800px;
    margin: 1rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

body.loaded .content-container { opacity: 1; transform: translateY(0); }

/* Bot styling */
.hanging-bot { position: absolute; top: -40px; right: 25px; width: 80px; height: 80px; z-index: 3; animation: sway 6s ease-in-out infinite; }
.bot-head { width: 60px; height: 60px; background: #f0f0f0; border-radius: 50%; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); border: 3px solid #b0b0b0; }
.bot-eye { position: absolute; width: 12px; height: 12px; background: #333; border-radius: 50%; top: 20px; border: 2px solid #fff; box-shadow: 0 0 10px #4a8d7a; }
.bot-eye.left { left: 12px; }
.bot-eye.right { right: 12px; }
.bot-antenna { position: absolute; width: 4px; height: 25px; background: #b0b0b0; left: 50%; transform: translateX(-50%); top: -15px; }
.bot-antenna::after { content: ''; position: absolute; width: 12px; height: 12px; background: #4a8d7a; border-radius: 50%; left: 50%; transform: translateX(-50%); top: -8px; box-shadow: 0 0 15px #4a8d7a; }
@keyframes sway { 0% { transform: rotate(8deg); } 50% { transform: rotate(-8deg); } 100% { transform: rotate(8deg); } }

/* --- "Coming Soon" Text with Dark-Fade-Dark Gradient --- */
.status {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(3rem, 10vw, 5.5rem);
    line-height: 1.1;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    
    /* NEW: Static gradient for the dark-fade-dark effect */
    background: linear-gradient(90deg, #004d40 0%, #26a69a 50%, #004d40 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 1px 1px 10px rgba(0, 77, 64, 0.2); /* Added a subtle shadow for depth */
}

/* Restyled as a smaller tagline */
h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 2.5rem;
    color: #004d40;
}

/* Gradient logo */
.logo {
    font-weight: 700;
    font-size: 1.7rem;
    letter-spacing: 1px;
    background: linear-gradient(45deg, #00796b, #4db6ac);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Other text styles */
p {
    font-size: clamp(1rem, 2.5vw, 1.1rem);
    font-weight: 400;
    max-width: 700px;
    margin: 0 auto 3rem auto;
    line-height: 1.6;
    color: #004d40;
    opacity: 0.9;
}
.watch-space {
    font-weight: 500;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: #004d40;
}
.copyright {
    font-size: 0.8rem;
    opacity: 0.7;
    color: #004d40;
}