/* Core Variables replicating the screenshots */
:root {
    --primary-bg: #141b2e; /* Dark Blue from top/footer */
    --footer-bg: #0b1120;
    --accent-blue: #6366f1;
    --accent-green: #10b981;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f8fafc;
}

/* Header & Hero Area */
.site-navbar, .hero-section {
    background-color: var(--primary-bg);
}

.hero-section {
    /* Optional: Add radial gradient/particles background if desired */
    background-image: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 40%);
    overflow: hidden;
}

/* Ensure curve effect from image exists (Optional but nice) */
.hero-section::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    height: 100px;
    background: #ffffff;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    z-index: 1;
}

.z-index-2 {
    position: relative;
    z-index: 2;
}

/* Form Styling */
.form-card {
    background-color: #242b3d; /* Fallback if you want the dark card, or use bg-white in HTML for white */
    border-radius: 16px;
}

.form-card (if white as in screenshot) {
    background-color: #ffffff;
}

.cursor-pointer {
    cursor: pointer;
}

.btn-primary {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
}

.btn-success {
    background-color: var(--accent-green);
    border-color: var(--accent-green);
}

/* Footer Styling */
.site-footer {
    background-color: var(--footer-bg);
}

.hover-white:hover {
    color: #ffffff !important;
}

.letter-spacing-1 {
    letter-spacing: 1px;
}



/* --- New Link Generator Section Styles --- */
.generate-section {
    background-color: #fcfdff !important;
}

.z-index-2 {
    z-index: 2;
}

/* Action Buttons (Pills) */
.btn-action {
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
    transition: all 0.2s ease-in-out;
}

.btn-action:hover {
    transform: translateY(-2px);
}

.active-red {
    background-color: #fe4d60; /* Coral Red */
    color: #ffffff;
    border: 1px solid #fe4d60;
}
.active-red:hover {
    background-color: #e53e50;
    color: #ffffff;
}

.inactive-blue {
    background-color: #1e40ff; /* Vibrant Blue */
    color: #ffffff;
    border: 1px solid #1e40ff;
}
.inactive-blue:hover {
    background-color: #1530db;
    color: #ffffff;
}

/* Custom Input Fields */
.custom-input {
    border: 1px solid #d1d5db;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    color: #374151;
    background-color: #ffffff;
}

.custom-input:focus {
    border-color: #1e40ff;
    box-shadow: 0 0 0 0.25rem rgba(30, 64, 255, 0.1);
}

.custom-input::placeholder {
    color: #9ca3af;
}

/* Generate Submit Button */
.btn-generate {
    background-color: #0b24fa; /* Deep vibrant blue from image */
    color: #ffffff;
    font-size: 1.1rem;
    transition: background-color 0.2s ease;
    width: 250px;
}

.btn-generate:hover {
    background-color: #081bc2;
    color: #ffffff;
}





/* Generate Section Styles */
    .generate-section { background-color: #fcfdff !important; }
    
    /* Button Styles */
    .btn-action {
        font-size: 0.9rem;
        padding: 0.5rem 1.2rem;
        transition: all 0.2s ease-in-out;
        border: none;
    }
    .btn-action:hover { transform: translateY(-2px); }
    
    .active-red {
        background-color: #ff4757; 
        color: #ffffff;
    }
    .active-red:hover { background-color: #ff3344; color: #ffffff; }
    
    .inactive-blue {
        background-color: #0b3dff; 
        color: #ffffff;
    }
    .inactive-blue:hover { background-color: #002be6; color: #ffffff; }

    /* Input Field Styles */
    .custom-input {
        border: 1px solid #d1d5db;
        padding: 0.85rem 1.5rem;
        font-size: 1rem;
        color: #374151;
        background-color: #ffffff;
    }
    .custom-input:focus {
        border-color: #0b3dff;
        box-shadow: 0 0 0 0.25rem rgba(11, 61, 255, 0.1);
        outline: none;
    }
    .custom-input::placeholder { color: #9ca3af; font-weight: 500; }
    
    /* Generate Submit Button */
    .btn-generate {
        background-color: #0022ff; 
        color: #ffffff;
        font-size: 1.1rem;
        transition: background-color 0.2s ease;
        width: 250px;
    }
    .btn-generate:hover { background-color: #0019cc; color: #ffffff; }

    /* =========================================
       Animated Particles, Stars & Bubbles
       ========================================= */
    .animated-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 1;
        pointer-events: none;
    }

    .shape {
        position: absolute;
        bottom: -100px;
        animation: floatUp linear infinite;
        opacity: 0;
    }

    /* Multi-Colored Bubbles */
    .shape.bubble {
        border-radius: 50%;
        background: transparent;
        border: 3px solid;
    }
    .shape.bubble.c-blue { border-color: rgba(11, 61, 255, 0.2); }
    .shape.bubble.c-red { border-color: rgba(255, 71, 87, 0.2); }
    .shape.bubble.c-green { border-color: rgba(46, 213, 115, 0.2); }
    .shape.bubble.c-yellow { border-color: rgba(255, 193, 7, 0.2); }
    .shape.bubble.c-purple { border-color: rgba(155, 89, 182, 0.2); }

    /* Particles & Stars */
    .shape.particle { background: rgba(255, 71, 87, 0.1); border-radius: 50%; }
    .shape.star { background: rgba(255, 193, 7, 0.2); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

    /* Shape Timings & Positions */
    .shape:nth-child(1) { left: 10%; width: 45px; height: 45px; animation-duration: 15s; animation-delay: 0s; }
    .shape:nth-child(2) { left: 25%; width: 20px; height: 20px; animation-duration: 12s; animation-delay: 2s; }
    .shape:nth-child(3) { left: 45%; width: 60px; height: 60px; animation-duration: 20s; animation-delay: 4s; }
    .shape:nth-child(4) { left: 65%; width: 25px; height: 25px; animation-duration: 18s; animation-delay: 1s; }
    .shape:nth-child(5) { left: 80%; width: 50px; height: 50px; animation-duration: 22s; animation-delay: 3s; }
    .shape:nth-child(6) { left: 90%; width: 15px; height: 15px; animation-duration: 14s; animation-delay: 6s; }
    .shape:nth-child(7) { left: 55%; width: 35px; height: 35px; animation-duration: 16s; animation-delay: 5s; }
    .shape:nth-child(8) { left: 5%;  width: 25px; height: 25px; animation-duration: 19s; animation-delay: 7s; }

    @keyframes floatUp {
        0% { transform: translateY(0) rotate(0deg); opacity: 1; }
        100% { transform: translateY(-120vh) rotate(360deg); opacity: 0; }
    }

    /* =========================================
       Features Section Styles
       ========================================= */
    .feature-icon-wrapper {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px auto;
        font-size: 2rem;
    }
    .feature-icon-red { background-color: #ffeeef; color: #ff4757; }
    .feature-icon-blue { background-color: #eaf3ff; color: #0ba5ff; }
    .feature-icon-green { background-color: #eafaf3; color: #20c997; }

    /* =========================================
       FAQ Accordion Styles (Pure CSS Toggle)
       ========================================= */
    .faq-title { color: #1a365d; font-weight: 700; font-size: 2.2rem; }
    .btn-ask { background-color: #ff6b35; color: white; border-radius: 30px; font-weight: 600; padding: 10px 25px; border: none; text-transform: uppercase; font-size: 0.9rem; }
    .btn-ask:hover { background-color: #e85a25; color: white; }

    .faq-accordion .accordion-item {
        border: none;
        margin-bottom: 15px;
        border-radius: 8px !important;
        background-color: #e9ecef; /* Gray when closed */
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    /* Triggers White BG & Shadow when open */
    .faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
        background-color: #ffffff;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    }
    
    .faq-accordion .accordion-button {
        background-color: transparent;
        color: #1a365d;
        font-weight: 600;
        font-size: 1.1rem;
        box-shadow: none !important;
        padding: 18px 20px;
    }
    
    .faq-accordion .accordion-button:not(.collapsed) {
        color: #1a365d;
        background-color: transparent;
    }
    .faq-accordion .accordion-button::after { display: none; }
    
    .faq-icon {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 1px solid #1a365d;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        font-size: 0.9rem;
        color: #1a365d;
        transition: all 0.2s ease;
    }

    /* Orange circle when Open */
    .faq-accordion .accordion-button:not(.collapsed) .faq-icon {
        background-color: #ff6b35;
        border-color: #ff6b35;
        color: white;
    }

    /* Icon Swapping Logic via CSS */
    .faq-accordion .accordion-button .fa-minus { display: none; }
    .faq-accordion .accordion-button:not(.collapsed) .fa-minus { display: inline-block; }
    
    .faq-accordion .accordion-button .fa-plus { display: inline-block; }
    .faq-accordion .accordion-button:not(.collapsed) .fa-plus { display: none; }