/* --- 1. GLOBAL SETTINGS --- */
:root {
    --spark-blue: #00B4D8;
    --deep-blue: #0077B6;
    --vibrant-pink: #F72585;
    --vibrant-teal: #00AFB9;
    --vibrant-purple: #7209B7;
    --ember-orange: #FB8500;
    --text-main: #1D3557;
    --text-blue: #457B9D;
    --soft-blue: #F0F9FF;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
ul { list-style: none !important; }
body { font-family: 'Outfit', sans-serif; background-color: var(--soft-blue) !important; color: var(--text-main); line-height: 1.6; }

.rainbow-strip { height: 6px; background: linear-gradient(90deg, #ffadad, #ffd6a5, #fdffb6, #caffbf, #9bf6ff, #a0c4ff, #bdb2ff, #ffc6ff); }

/* --- 2. NAVIGATION (Desktop) --- */
.main-nav { 
    background: #ffffff !important; 
    padding: 0 !important; 
    position: sticky; 
    top: 0; 
    z-index: 9999; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
    width: 100% !important;
}

.nav-container { 
    max-width: 1200px; 
    margin: 0 auto; 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
    padding: 0 20px !important;
    height: 70px !important; 
}

.nav-logo { 
    text-decoration: none !important; 
    font-weight: 800 !important; 
    font-size: 1.4rem !important; 
    color: var(--spark-blue) !important; 
    display: flex !important; 
    align-items: center !important; 
    gap: 10px !important;
}

.nav-links { display: flex !important; gap: 20px !important; align-items: center !important; }

.nav-links a { 
    text-decoration: none !important; 
    color: var(--text-main) !important; 
    font-weight: 600 !important; 
    font-size: 1rem !important; 
    white-space: nowrap !important;
    transition: 0.3s;
}

.nav-links a:hover { color: var(--vibrant-pink) !important; }
.nav-cta { background: var(--spark-blue) !important; color: white !important; padding: 8px 18px; border-radius: 50px; }

/* --- 3. PAGE COMPONENTS --- */
header { text-align: center; padding: 60px 0 !important; }
header h1 { font-size: 3rem !important; color: var(--deep-blue); line-height: 1.1; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 25px; }

/* Library & Science Sections */
.library-header-img { width: 100% !important; max-width: 500px !important; height: auto !important; margin: 0 auto 30px auto !important; display: block !important; border-radius: 30px; }
.category-wrapper { background: #ffffff !important; margin-bottom: 20px !important; border-radius: 25px !important; overflow: hidden; border: 1px solid #eef2f6 !important; }
.category-wrapper[open] { border: 2px solid var(--spark-blue) !important; box-shadow: 0 10px 30px rgba(0,180,216,0.1) !important; }
summary.category-summary { padding: 25px 35px !important; cursor: pointer; display: flex !important; justify-content: space-between !important; align-items: center !important; }
.expand-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--spark-blue); color: white !important; border-radius: 50%; font-size: 1.5rem; font-weight: 800; transition: 0.4s ease; }
.tall-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; gap: 20px !important; padding: 0 30px 40px 30px !important; }
.tall-card { background: #f8fbff; padding: 25px; border-radius: 20px; text-align: center; border: 1px solid #eef2f6; display: flex; flex-direction: column; justify-content: space-between; }

.science-card { background: var(--soft-blue) !important; border: 2px dashed var(--vibrant-teal) !important; padding: 40px; border-radius: 30px; text-align: center; margin: 20px 0; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 30px; }
.book-card { background: white; padding: 20px; border-radius: 15px; text-decoration: none; border: 1px solid #eee; display: flex; flex-direction: column; transition: 0.3s; text-align: left; }

/* Rituals */
.ritual-card { background: white !important; border-radius: 30px !important; padding: 40px !important; margin-bottom: 30px !important; border: 2px solid var(--spark-blue) !important; }
.morning { border-left: 8px solid #FFD6A5 !important; }
.afternoon { border-left: 8px solid var(--spark-blue) !important; }
.evening { border-left: 8px solid var(--vibrant-purple) !important; }

/* Products Grid */
.product-grid { display: grid; grid-template-columns: 1.8fr 1.2fr; gap: 40px; }
.merch-container { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

/* --- 4. MOBILE (Only triggers on small screens) --- */
/* --- 4. MOBILE (Slim & Compact Version) --- */
@media (max-width: 768px) {
    .nav-container { 
        flex-direction: column !important; 
        height: auto !important; 
        padding: 8px 10px !important; /* Heavily reduced padding */
        gap: 5px !important;
    }

    .nav-logo { 
        font-size: 1rem !important; /* Slightly smaller logo */
        width: 100% !important;
        justify-content: center !important;
        margin-bottom: 5px !important;
    }

    .nav-links { 
        display: grid !important; 
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columns instead of 3 */
        gap: 4px !important; 
        width: 100% !important;
        padding: 0 !important;
    }

    .nav-links a { 
        font-size: 0.7rem !important; 
        padding: 6px 2px !important; /* Very tight padding */
        background: #f8fbff !important; 
        border-radius: 6px !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 32px !important; /* Slimmer buttons */
        border: 1px solid #eef2f6;
    }

    /* This makes the Products button slim but full-width at the bottom */
    .nav-links a.nav-cta { 
        grid-column: span 2 !important; 
        background: var(--spark-blue) !important;
        color: white !important;
        margin-top: 2px !important;
        height: 35px !important;
    }

    /* Page Header adjustments to match the new slim nav */
    header { padding: 30px 0 !important; }
    header h1 { font-size: 1.8rem !important; }
}
/* --- BACK TO TOP BUTTON --- */
#backToTop {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: var(--vibrant-purple); /* Using your brand purple */
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%; /* Makes it a circle */
    font-size: 18px;
    width: 50px;
    height: 50px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.3s, background-color 0.3s;
}

#backToTop:hover {
    background-color: var(--spark-blue); /* Turns blue on hover */
    transform: scale(1.1);
}

@media (max-width: 768px) {
    #backToTop {
        bottom: 80px; /* Moves it up on mobile so it doesn't block the nav links */
        width: 40px;
        height: 40px;
        padding: 10px;
        font-size: 16px;
    }
}
/* Container for the form section */
.get-started-section {
    padding: 80px 0;
    background-color: white;
    border-radius: 50px 50px 0 0;
    margin-top: 40px;
}

.form-card {
    max-width: 600px;
    margin: 0 auto;
    background: #ffffff;
    padding: 40px;
    border-radius: 30px;
    box-shadow: 0 15px 40px rgba(0, 119, 182, 0.1);
    border: 1px solid var(--soft-blue);
}

/* Styling Labels & Inputs */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--deep-blue);
}

.form-group input, 
.form-group textarea, 
.form-group select {
    width: 100%;
    padding: 14px 20px;
    border: 2px solid #eef2f6;
    border-radius: 15px;
    font-family: inherit;
    font-size: 1rem;
    transition: 0.3s ease;
}

.form-group input:focus {
    outline: none;
    border-color: var(--spark-blue);
    box-shadow: 0 0 0 4px rgba(0, 180, 216, 0.1);
}

/* The Submit Button */
.btn-submit {
    width: 100%;
    background: linear-gradient(135deg, var(--spark-blue), var(--vibrant-purple));
    color: white;
    padding: 16px;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    margin-top: 10px;
}

.btn-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(114, 9, 183, 0.2);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .form-card {
        padding: 25px;
        margin: 0 15px;
    }
}

/* --- IMPROVED CTA BUTTON --- */
.cta-btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--spark-blue) 0%, var(--vibrant-purple) 100%);
    color: white !important;
    padding: 18px 35px;
    border-radius: 50px;
    font-weight: 800;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 20px rgba(0, 180, 216, 0.3);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-btn:hover {
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 15px 25px rgba(114, 9, 183, 0.4);
    filter: brightness(1.1);
}

.cta-btn:active {
    transform: scale(0.98);
}

/* Subtle pulse animation for the main kit button */
@keyframes pulse-soft {
    0% { box-shadow: 0 0 0 0 rgba(0, 180, 216, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(0, 180, 216, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 180, 216, 0); }
}

.form-card .cta-btn {
    animation: pulse-soft 2s infinite;
}