/* Define CSS Variables for consistent theming */
:root {
    --primary: #7b2cbf;
    --secondary: #9d4edd;
    --accent: #ff9e00;
    --dark: #10002b;
    --darker: #030014;
    --light: #f8f9fa;
    --instagram-gradient: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    --neon-glow: 0 0 10px rgba(157, 78, 221, 0.7), 0 0 20px rgba(157, 78, 221, 0.5);
}

/* Universal box-sizing for all elements */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body styling: font, colors, layout, and overflow */
body {
    font-family: 'Poppins', sans-serif;
    color: var(--light);
    background-color: var(--darker);
    min-height: 100vh; /* Full viewport height */
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* Prevent horizontal scroll */
    line-height: 1.6;
}

/* Background Animation Container */
.bg-animation {
    position: fixed; /* Fixed position to cover the entire viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Send to back */
    overflow: hidden;
}

/* Styling for animated background circles */
.bg-circle {
    position: absolute;
    border-radius: 50%; /* Make them circular */
    filter: blur(60px); /* Apply blur for a soft glow effect */
    opacity: 0.3; /* Semi-transparent */
}

/* Specific styling and animation for circle 1 */
.circle-1 {
    width: 500px;
    height: 500px;
    background: var(--primary);
    top: -100px;
    left: -100px;
    animation: float 15s infinite ease-in-out; /* Apply float animation */
}

/* Specific styling and animation for circle 2 */
.circle-2 {
    width: 700px;
    height: 700px;
    background: var(--accent);
    bottom: -200px;
    right: -200px;
    animation: float 20s infinite ease-in-out reverse; /* Apply float animation in reverse */
}

/* Keyframe animation for floating effect */
@keyframes float {
    0%, 100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(50px, 50px);
    }
}

/* Header styling */
header {
    padding: 2rem 5%; /* Padding for spacing */
    z-index: 10; /* Ensure header is above background */
}

/* Logo container styling */
.logo {
    display: flex;
    align-items: center; /* Vertically align items */
    gap: 0.8rem; /* Space between icon and text */
    text-decoration: none; /* Remove underline from link */
}

/* Styling for the logo icon */
.logo-icon {
    font-size: 2rem;
    background: var(--instagram-gradient); /* Apply Instagram gradient */
    -webkit-background-clip: text; /* Clip background to text for gradient effect */
    background-clip: text;
    color: transparent; /* Make text transparent to show background gradient */
}

/* Styling for the logo text */
.logo-text {
    font-family: 'Orbitron', sans-serif; /* Futuristic font */
    font-weight: 700;
    font-size: 1.8rem;
    background: var(--instagram-gradient); /* Apply Instagram gradient */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 1px; /* Space out letters */
}

/* Main content container styling */
.container {
    flex: 1; /* Allow main content to grow and take available space */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    text-align: center;
    padding: 2rem 5%;
}

/* Styling for the 'coming-soon' section */
.coming-soon {
    max-width: 800px; /* Max width for readability */
    margin: 0 auto; /* Center the block horizontally */
}

/* Styling for the main heading (H1) */
h1 {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    background: var(--instagram-gradient); /* Apply Instagram gradient */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
    line-height: 1.2;
}

/* Styling for the tagline paragraph */
.tagline {
    font-size: 1.5rem;
    margin-bottom: 3rem;
    opacity: 0.9; /* Slightly transparent */
}

/* Footer styling */
footer {
    text-align: center;
    padding: 2rem 5%;
    opacity: 0.7; /* Slightly transparent */
    font-size: 0.9rem;
}

/* Responsive Design for smaller screens */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem; /* Adjust H1 font size for tablets */
    }

    .tagline {
        font-size: 1.2rem; /* Adjust tagline font size for tablets */
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2rem; /* Further adjust H1 font size for mobile */
    }
}