/* Color Palette */
:root {
--dark-blue: #242659; /* Background blue */
--light-blue: #2887bf; /* Not directly used as a background box, but for accents if needed */
--white: #FFFFFF;
--spotlight-color: rgba(255, 255, 255, 0.15); /* For the light beam */
--spotlight-end-color: rgba(255, 255, 255, 0);
}

/* General Body & Background */
body {
font-family: 'Montserrat', sans-serif; /* Default font */
margin: 0;
padding: 0;
background-color: var(--dark-blue);
color: var(--white);
line-height: 1.6;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh; /* Full viewport height */
box-sizing: border-box;
text-align: center;
overflow: hidden; /* Hide any overflow from background effects */

/* Spotlight Effect */
background-image: radial-gradient(circle at 50% 0%, var(--spotlight-color) 0%, var(--spotlight-end-color) 50%);
background-repeat: no-repeat;
background-size: 100% 100vh; /* Cover full width, full height */
}

/* Content Wrapper to keep things centered and structured */
.content-wrapper {
max-width: 700px; /* Adjust as needed */
width: 90%;
padding: 20px;
box-sizing: border-box;
position: relative; /* For z-index if needed */
z-index: 1; /* Ensure content is above background effects */
}

/* Header - Logo Section */
.header {
margin-bottom: 40px;
position: relative;
padding-top: 50px; /* Space for the spotlight effect to shine down */
}

/* Placeholder for the tube ice icon */
.logo-icon {
width: 80px; /* Adjust size */
height: 80px; /* Adjust size */
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><linearGradient id="iceGradient" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="white" stop-opacity="0.8"/><stop offset="100%" stop-color="white" stop-opacity="0.4"/></linearGradient></defs><circle cx="50" cy="50" r="40" stroke="white" stroke-width="3" fill="none"/><rect x="45" y="15" width="10" height="70" fill="url(#iceGradient)" rx="5" ry="5"/><path d="M 20 50 A 30 30 0 0 1 80 50" stroke="white" stroke-width="3" fill="none"/><path d="M 20 50 A 30 30 0 0 0 80 50" stroke="white" stroke-width="3" fill="none"/></svg>');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin: 0 auto 15px auto; /* Center the icon */
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5)); /* Glow effect */
}

/* New style for the actual "DYNAMIC" logo image */
.dynamic-logo-img {
max-width: 300px; /* Adjust as needed to match your logo's width */
height: auto; /* Maintain aspect ratio */
display: block; /* Remove extra space below image */
margin: 0 auto; /* Center the image */
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3)); /* Subtle glow */
margin-top: 15px; /* Space between tube icon and logo */
}

/* Main Content */
.main-content {
margin-bottom: 50px;
}

.tagline {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 1.1em;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--white);
margin-bottom: 30px;
}

.coming-soon-text {
font-family: 'Dancing Script', cursive; /* Script font for Coming Soon */
font-weight: 700; /* Make it bold if available */
font-size: 5em; /* Very large */
color: var(--white);
margin: 0 0 40px 0;
text-shadow: 0 0 15px rgba(255, 255, 255, 0.4); /* Stronger glow */
}

.stay-tuned {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 1.2em;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--white);
margin-bottom: 60px;
}

/* Additional details section (subtly placed) */
.details-section {
background-color: rgba(255, 255, 255, 0.05); /* Very subtle background */
border-radius: 10px;
padding: 25px;
margin-top: 50px; /* Space it out from the main message */
border: 1px solid rgba(255, 255, 255, 0.1);
}

.details-section p {
font-size: 0.95em;
margin-bottom: 15px;
color: rgba(255, 255, 255, 0.8);
}

.details-section ul {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
text-align: left; /* Align list items left */
}

.details-section li {
font-size: 0.9em;
margin-bottom: 8px;
color: rgba(255, 255, 255, 0.7);
}

.details-section li .icon {
margin-right: 8px;
font-size: 1.1em;
vertical-align: middle;
color: var(--white);
}

.launch-info {
font-size: 1em;
font-weight: 600;
color: var(--white);
animation: pulse 2s infinite; /* Keep the pulse for this important info */
}

/* Footer */
.footer {
font-size: 0.8em;
color: rgba(255, 255, 255, 0.6);
margin-top: 30px;
}

/* Animations */
@keyframes pulse {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.02); opacity: 0.9; }
100% { transform: scale(1); opacity: 1; }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
.dynamic-logo-img {
    max-width: 250px; /* Adjust for smaller screens */
}
.tagline {
    font-size: 1em;
}
.coming-soon-text {
    font-size: 4em;
}
.stay-tuned {
    font-size: 1.1em;
}
.details-section {
    padding: 20px;
}
}

@media (max-width: 480px) {
.logo-icon {
    width: 60px;
    height: 60px;
}
.dynamic-logo-img {
    max-width: 200px; /* Adjust for very small screens */
}
.tagline {
    font-size: 0.9em;
    letter-spacing: 0.05em;
}
.coming-soon-text {
    font-size: 3em;
}
.stay-tuned {
    font-size: 1em;
    letter-spacing: 0.15em;
}
.details-section {
    padding: 15px;
}
.details-section p, .details-section li {
    font-size: 0.85em;
}
}