::-webkit-scrollbar { display: none;}
* { font-family: 'Poppins', sans-serif; margin: 0; padding: 0; box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0f0a1e; }
#header { width: 100vw; margin: 0; }

/* SPA Page System - These rules have highest priority */
.spa-page { display: none !important; }
.spa-page.active { display: block !important; }

.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
}

/* Hero flows into life-phases with matching colors */
.cosmic-bg {
    background: linear-gradient(180deg,
        #0f0a1e 0%,
        #1a1040 25%,
        #2e1065 50%,
        #4c1d95 75%,
        #4c1d95 100%);
}

#hero { padding: 8rem 0 5rem; }
#features { scroll-margin-top: 100px; }
.hero-art { transform: scale(1.12); }
.hero-overlay {
    background: linear-gradient(180deg, transparent 0%, rgba(88,28,135,.2) 55%, #4c1d95 90%, #4c1d95 100%);
}

/* Life-phases starts exactly where hero ends */
#life-phases {
    background: linear-gradient(180deg, #4c1d95 0%, #581c87 50%, #701a75 100%) !important;
    scroll-margin-top: 80px;
}

.community-activity {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 1.5rem;
    padding: .75rem clamp(.5rem, 2.5vw, 1rem);
    border: 1px solid rgba(233, 213, 255, .28);
    border-radius: 1rem;
    background: #37136f;
    color: #e9d5ff;
}
.community-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
}
.community-metrics li { padding: 0 clamp(.375rem, 2vw, 1rem); line-height: 1.35; font-size: .875rem; }
.community-metrics li + li { border-left: 1px solid rgba(233, 213, 255, .28); }
.community-metrics strong { display: block; color: white; font-size: 1.25rem; }
.community-activity small { display: block; margin-top: .65rem; font-size: .75rem; }
.community-activity time { white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
    .community-activity { animation: community-reveal .45s ease-out both; }
    @keyframes community-reveal {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: translateY(0); }
    }
}

.life-stages { position: relative; display: grid; gap: 28px; list-style: none; margin: 40px 0 0; padding: 0; }
.life-stages::before { content: ''; position: absolute; top: 28px; bottom: 28px; left: 27px; width: 2px; background: rgba(255,255,255,.2); }
.life-stage { position: relative; display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; }
.life-stage-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: #602b91; font-size: 1.35rem; }
.life-stage h3 { margin: 2px 0 8px; color: white; font-size: 1.15rem; font-weight: 700; }
.life-stage p { margin: 0; color: #e9d5ff; font-size: .95rem; line-height: 1.7; }
.life-year-step { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.18); }
.life-year-step p { margin: 0; color: #e9d5ff; font-size: .95rem; line-height: 1.7; }
.life-year-step strong { color: white; }
.life-year-step a { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; color: white; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.life-year-step a:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 4px; border-radius: 4px; }
@media (min-width: 900px) {
    .life-stages { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
    .life-stages::before { left: 28px; right: calc((100% - 96px) / 4 - 28px); bottom: auto; width: auto; height: 2px; }
    .life-stage { display: block; }
    .life-stage-icon { margin-bottom: 20px; }
    .life-stage p { max-width: 29ch; }
}
@media (max-width: 640px) {
    .life-year-step { align-items: flex-start; flex-direction: column; gap: 8px; }
}

.glass-panel {
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.animate-fade-in {
    animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

.btn-primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: scale(1.1);
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
    background: linear-gradient(135deg, #f093fb, #f5576c);
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    transform: scale(1.1);
    box-shadow: 0 20px 40px rgba(240, 147, 251, 0.4);
}

/* Mobile Optimizations */
@media (max-width: 640px) {
    html, body {
        overflow-x: hidden;
        width: 100%;
    }

    /* Smaller header on mobile */
    #header .max-w-7xl {
        padding: 0.25rem 0.75rem !important;
    }
    #header .w-8 {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
    #header .text-xl {
        font-size: 0.875rem !important;
    }
    #header .text-xl.text-white {
        font-size: 1.25rem !important;
    }

    h1 { font-size: 2rem !important; line-height: 1.2 !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.1rem !important; }
    p, li { font-size: 0.9rem !important; }

    .glass-panel { padding: 1rem !important; }

    /* Seamless section flow - no gaps */
    section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
        margin: 0 !important;
        position: relative;
    }

    /* Button styling for mobile - ensure touch targets */
    .btn-primary, .btn-secondary {
        padding: 0.875rem 1.75rem !important;
        font-size: 1rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 48px !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(102, 126, 234, 0.3);
        touch-action: manipulation;
    }

    /* Fix hero - seamless flow into next section */
    #hero {
        padding: 6.5rem 1rem 4rem !important;
        margin-bottom: 0 !important;
    }
    #hero .hero-scroll-cue { bottom: 1rem; }

    /* Kill ALL gaps between sections - critical for visual cohesion */
    #page-home {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
    }
    #page-home.active {
        display: flex !important;
    }
    #page-home > section {
        margin: 0 !important;
        border: none !important;
    }

    /* Reduce hover scale on mobile - use active state instead */
    .hover-scale:hover { transform: none; }
    .btn-primary:hover, .btn-secondary:hover { transform: none; }

    /* Active states for touch feedback */
    .btn-primary:active, .btn-secondary:active {
        transform: scale(0.98) !important;
        opacity: 0.9;
    }
    .hover-scale:active {
        transform: scale(0.98) !important;
    }
}

@media (max-width: 768px) {
    .text-5xl { font-size: 1.75rem !important; }
    .text-4xl { font-size: 1.5rem !important; }
    .text-3xl { font-size: 1.25rem !important; }
    .text-2xl { font-size: 1.1rem !important; }
    .text-xl { font-size: 0.95rem !important; }

    /* Better spacing - reduce excessive padding */
    .px-12 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .py-20 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    .p-12 { padding: 1.25rem !important; }
    .p-10 { padding: 1.25rem !important; }
    .p-6 { padding: 0.875rem !important; }
    .mb-16 { margin-bottom: 1.5rem !important; }
    .mb-12 { margin-bottom: 1.25rem !important; }
    .gap-8 { gap: 1rem !important; }

    /* Ensure grids stack properly */
    .grid.lg\\:grid-cols-2 { grid-template-columns: 1fr !important; }
    .grid.md\\:grid-cols-2 { grid-template-columns: 1fr !important; }
    .grid.lg\\:grid-cols-3 { grid-template-columns: 1fr !important; }
    .grid.md\\:grid-cols-3 { grid-template-columns: 1fr !important; }

    /* Timeline - clean vertical layout */
    #timeline .space-y-16 { margin-left: 0 !important; }
    #timeline .space-y-16 > * + * { margin-top: 0 !important; }

    /* Hide the center line on mobile */
    #timeline .relative > .absolute.left-1\/2 { display: none !important; }

    /* Stack timeline items vertically */
    #timeline .flex.items-center.justify-between {
        display: block !important;
        position: relative;
        padding-left: 50px;
        padding-bottom: 1.5rem;
        border-left: 3px solid rgba(168, 85, 247, 0.4);
        margin-left: 20px;
    }

    /* Hide empty spacer divs */
    #timeline .w-5\/12:empty { display: none !important; }

    /* Position circle on the left */
    #timeline .w-12 {
        position: absolute !important;
        left: -22px !important;
        top: 0;
        width: 40px !important;
        height: 40px !important;
        z-index: 10;
    }
    #timeline .w-12 i { font-size: 0.875rem !important; }

    /* Make content cards full width */
    #timeline .w-5\/12:not(:empty) {
        width: 100% !important;
        text-align: left !important;
    }
    #timeline .glass-panel.rounded-2xl {
        padding: 1rem !important;
        border-radius: 0.75rem !important;
    }
    #timeline .glass-panel h3 {
        font-size: 1rem !important;
        margin-bottom: 0.375rem !important;
    }
    #timeline .glass-panel p {
        font-size: 0.85rem !important;
        margin-bottom: 0.375rem !important;
        line-height: 1.4;
    }
    #timeline .glass-panel span { font-size: 0.75rem !important; }

    /* Waitlist form - better mobile layout */
    #waitlist .glass-panel {
        padding: 1.5rem !important;
    }
    #waitlist .flex.justify-center.items-center.space-x-8 {
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: center !important;
    }
    #waitlist .space-x-8 > * {
        margin-left: 0 !important;
    }

    /* Footer - better mobile grid */
    footer .grid.md\\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        text-align: center;
    }
}