:root {
    --bg-color: #F8FAFC;
    --text-color: #0c1524;
    --accent-blue: #3B82F6;
    --accent-purple: #C084FC;
    --accent-lime: #D9F99D;
    --deep-blue: #0F172A;
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.4);

    --font-main: 'Outfit', sans-serif;
}

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

body {
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

/* Background Blobs */
.background-blobs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, #f8fafc 0%, #edf2f7 100%);
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    /* Increased blur for smoother gradient feel */
    opacity: 0.8;
    mix-blend-mode: multiply;
    /* Makes colors vibrant when overlapping */
    will-change: transform;
    transition: transform 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
    /* Smooth parallax catch-up */
}

/* Fallback for dark mode or specific browsers if multiply doesn't look good */
/* Dark mode disabled as per request */
/* Particle Canvas Style */
#particleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Above blobs (z -1), below content (z 10) */
    pointer-events: none;
}

.blob-1 {
    width: 500px;
    height: 500px;
    background: var(--accent-purple);
    top: -15%;
    left: -10%;
    animation: pulse 8s infinite alternate;
}

.blob-2 {
    width: 400px;
    height: 400px;
    background: var(--accent-lime);
    bottom: -5%;
    right: -10%;
    animation: pulse 10s infinite alternate-reverse;
}

.blob-3 {
    width: 350px;
    height: 350px;
    background: var(--accent-blue);
    top: 40%;
    left: 40%;
    opacity: 0.6;
    animation: drift 20s infinite linear;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}

@keyframes drift {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(50px, -50px) rotate(120deg);
    }

    66% {
        transform: translate(-30px, 40px) rotate(240deg);
    }

    100% {
        transform: translate(0, 0) rotate(360deg);
    }
}

/* IMPORTANT: Parallax transform is applied via JS inline style, 
   so we avoid conflicting CSS animations on transform heavily. 
   We use specific animations on other properties or loose transform 
   composition if possible, but simplest is to let JS handle position 
   and CSS handle scale/pulse if needed, or separate wrappers. 
   
   Actually, to combine JS transform (translate) and CSS animation (scale/rotate),
   it's best to wrap the blob content or apply animation to a child.
   Simple fix: Let's remove complex CSS transform animations on the parent .blob 
   that JS moves, OR use JS for everything. 
   
   Better approach for "floating" + "parallax":
   Apply CSS animation to a pseudo-element or inner div, 
   and apply Parallax translate to the parent .blob.
*/

.blob::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    animation: morph 10s infinite ease-in-out alternate;
}

/* Reset background on parent so it doesn't double apply */
.blob {
    background: transparent;
}

@keyframes morph {
    0% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        transform: scale(1);
    }

    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
        transform: scale(1.1) rotate(10deg);
    }

    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        transform: scale(0.95);
    }
}


/* Layout */
.container {
    max-width: 700px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
    position: relative;
    z-index: 10;
}

/* Header */
.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.logo-text {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.05em;
    background: linear-gradient(135deg, var(--deep-blue) 0%, #475569 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

h1 {
    font-size: 4rem;
    line-height: 1.05;
    margin-bottom: 1.5rem;
    color: var(--deep-blue);
    letter-spacing: -0.03em;
    font-weight: 800;
}

.highlight {
    background: linear-gradient(120deg, var(--accent-blue), var(--accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    position: relative;
}

/* Shine effect on highlight text */
.highlight::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg) translateX(-150%);
    animation: shine 4s infinite;
}

@keyframes shine {

    0%,
    80% {
        transform: skewX(-20deg) translateX(-150%);
    }

    100% {
        transform: skewX(-20deg) translateX(150%);
    }
}

.subtitle {
    font-size: 1.35rem;
    color: #64748B;
    margin-bottom: 3.5rem;
    font-weight: 400;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

/* Whitelist Info */
.whitelist-info {
    margin-bottom: 3.5rem;
    perspective: 1000px;
    /* For 3D tilt effect if desired */
}

.info-card {
    background: #FFFFFF;
    /* Pure White as requested */
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 2.5rem;
    border-radius: 32px;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 10px 15px -3px rgba(0, 0, 0, 0.05);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

.info-card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.05),
        0 10px 10px -5px rgba(0, 0, 0, 0.02),
        inset 0 0 30px rgba(255, 255, 255, 0.8);
}

.info-card h2 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
    color: var(--deep-blue);
    font-weight: 700;
}

.info-card p {
    line-height: 1.7;
    color: #475569;
    font-size: 1.1rem;
}

/* CTA Form */
.email-form {
    display: flex;
    flex-direction: row;
    /* Horizontal on desktop */
    gap: 0.5rem;
    max-width: 500px;
    /* Wider */
    margin: 0 auto 1.5rem;
    background: white;
    padding: 0.5rem;
    border-radius: 100px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.email-form:focus-within {
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.15), 0 4px 6px -2px rgba(59, 130, 246, 0.1);
    transform: translateY(-2px);
}

input[type="email"] {
    flex: 1;
    padding: 1rem 1.5rem;
    border-radius: 100px;
    border: none;
    background: transparent;
    font-size: 1.1rem;
    font-family: inherit;
    box-shadow: none;
    text-align: left;
    color: var(--deep-blue);
    /* Ensure text is visible */
}

input[type="email"]:focus {
    outline: none;
    box-shadow: none;
}

button {
    padding: 1rem 2.5rem;
    border-radius: 100px;
    border: none;
    background: var(--deep-blue);
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-family: inherit;
    position: relative;
    overflow: hidden;
}

button:hover {
    transform: scale(1.05);
    /* Modern "pop" */
    background: #2563EB;
    /* Slightly brighter blue on hover */
    box-shadow: 0 0 15px rgba(37, 99, 235, 0.5);
    /* Glow */
}

button:active {
    transform: scale(0.95);
}

.micro-copy {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Responsive */
@media (max-width: 768px) {
    h1 {
        font-size: 2.8rem;
    }

    .blob-1 {
        width: 300px;
        height: 300px;
    }

    .blob-2 {
        width: 200px;
        height: 200px;
    }

    .email-form {
        flex-direction: column;
        background: transparent;
        box-shadow: none;
        padding: 0;
        gap: 1rem;
    }

    input[type="email"] {
        width: 100%;
        background: white;
        text-align: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        border: 1px solid transparent;
    }

    input[type="email"]:focus {
        border-color: var(--accent-blue);
    }

    button {
        width: 100%;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .logo-svg {
        width: 60px;
        height: auto;
    }
}