/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-dark: #0f0f1e;
    --bg-card: rgba(255, 255, 255, 0.03);
    --border-color: rgba(255, 255, 255, 0.1);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --accent-purple: #a78bfa;
    --accent-pink: #f0abfc;
    --accent-blue: #60a5fa;
    --accent-yellow: #fde047;
    --gradient: linear-gradient(135deg, var(--accent-purple), var(--accent-pink));
}

body {
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-dark);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

/* Animated Stars Background */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow:
        100px 200px white,
        200px 100px white,
        300px 300px white,
        400px 150px white,
        500px 250px white,
        600px 100px white,
        700px 300px white,
        800px 200px white,
        900px 350px white,
        1000px 100px white,
        150px 400px white,
        250px 500px white,
        350px 450px white,
        450px 550px white,
        550px 400px white,
        650px 500px white,
        750px 450px white,
        850px 550px white,
        50px 600px white,
        150px 650px white;
    animation: twinkle 3s infinite alternate;
}

.stars::after {
    animation-delay: 1.5s;
    box-shadow:
        120px 220px var(--accent-purple),
        220px 120px var(--accent-blue),
        320px 320px var(--accent-pink),
        420px 170px var(--accent-purple),
        520px 270px var(--accent-blue),
        620px 120px var(--accent-pink),
        720px 320px var(--accent-purple),
        170px 420px var(--accent-blue),
        270px 520px var(--accent-pink);
}

@keyframes twinkle {
    0% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    position: relative;
    z-index: 1;
}

/* Header */
header {
    padding: 2rem 0 4rem;
    text-align: center;
}

.logo-text {
    font-family: 'DM Serif Display', serif;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: glow 3s ease-in-out infinite alternate;
}

@keyframes glow {
    0% { filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.5)); }
    100% { filter: drop-shadow(0 0 20px rgba(240, 171, 252, 0.8)); }
}

/* Hero Section */
.hero {
    text-align: center;
    margin-bottom: 6rem;
    animation: fadeInUp 1s ease-out;
}

.title {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(2.5rem, 8vw, 5rem);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.highlight {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.subtitle {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    color: var(--text-secondary);
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.description {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: var(--text-secondary);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
}

/* Features */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 6rem;
    animation: fadeInUp 1s ease-out 0.3s both;
}

.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2.5rem;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-purple);
    box-shadow: 0 10px 40px rgba(167, 139, 250, 0.2);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: float 3s ease-in-out infinite;
}

.feature-card:nth-child(2) .feature-icon {
    animation-delay: 0.5s;
}

.feature-card:nth-child(3) .feature-icon {
    animation-delay: 1s;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.feature-card p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Coming Soon */
.coming-soon {
    text-align: center;
    margin-bottom: 6rem;
    animation: fadeInUp 1s ease-out 0.6s both;
}

.soon-badge {
    display: inline-block;
    background: var(--gradient);
    padding: 0.75rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.soon-text {
    font-size: 1.2rem;
    color: var(--text-secondary);
}

/* CTA Section */
.cta {
    text-align: center;
    margin-bottom: 4rem;
    animation: fadeInUp 1s ease-out 0.9s both;
}

.cta-content {
    max-width: 600px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 3rem 2rem;
    backdrop-filter: blur(10px);
}

.cta-content h2 {
    font-family: 'DM Serif Display', serif;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.cta-content > p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.email-form {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.email-form input {
    flex: 1;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.email-form input:focus {
    outline: none;
    border-color: var(--accent-purple);
    background: rgba(255, 255, 255, 0.08);
}

.email-form input::placeholder {
    color: var(--text-secondary);
}

.email-form button {
    padding: 1rem 2.5rem;
    background: var(--gradient);
    border: none;
    border-radius: 50px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.email-form button:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(167, 139, 250, 0.4);
}

.email-form button:active {
    transform: scale(0.98);
}

.form-message {
    font-size: 0.9rem;
    margin-top: 1rem;
    min-height: 1.5rem;
}

.form-message.success {
    color: var(--accent-blue);
}

.form-message.error {
    color: var(--accent-pink);
}

/* Footer */
footer {
    text-align: center;
    padding: 3rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    border-top: 1px solid var(--border-color);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .container {
        padding: 1.5rem;
    }

    .logo-text {
        font-size: 1.5rem;
        letter-spacing: 0.2em;
    }

    header {
        padding: 1.5rem 0 3rem;
    }

    .hero {
        margin-bottom: 4rem;
    }

    .features {
        gap: 1.5rem;
        margin-bottom: 4rem;
    }

    .feature-card {
        padding: 2rem;
    }

    .coming-soon {
        margin-bottom: 4rem;
    }

    .cta-content {
        padding: 2rem 1.5rem;
    }

    .email-form {
        flex-direction: column;
    }

    .email-form button {
        width: 100%;
    }
}