/* 1. Global Setup: Reset defaults and import a clean, modern font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* Enables smooth scrolling across the whole page */
html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: #FAFAFA; /* A very subtle off-white background */
    color: #111827; /* Dark text for readability */
}

/* 2. Navigation Bar Layout using "Flexbox" */
.navbar {
    display: flex; /* This magically puts everything in a horizontal row */
    justify-content: space-between; /* Pushes logo left, links center, button right */
    align-items: center; /* Centers everything vertically */
    padding: 20px 5%; /* Adds breathing room around the edges */
    max-width: 1400px;
    margin: 0 auto; /* Keeps it centered on really large monitors */
}

/* 3. Logo Styling */
.logo {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between the icon and the text */
    font-size: 20px;
}

.logo img {
    border-radius: 6px; /* Slightly rounds the edges of our placeholder logo */
}

/* 4. Middle Links */
.nav-links {
    display: flex;
    list-style: none; /* Removes the ugly default bullet points */
    gap: 32px; /* Spacing between each link */
}

.nav-links a {
    text-decoration: none; /* Removes the blue underline from links */
    color: #4B5563; /* A soft, professional dark gray */
    font-weight: 600;
    font-size: 15px;
    transition: color 0.2s ease; /* Makes the hover effect smooth */
}

/* What happens when your mouse hovers over a link */
.nav-links a:hover {
    color: #4F46E5; /* Changes to the Scopebarrier purple */
}

/* 5. The Purple Button */
.btn-primary {
    background-color: #4F46E5; /* The exact purple from the image */
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px; /* Rounds the corners of the button */
    font-weight: 600;
    font-size: 15px;
    cursor: pointer; /* Turns the mouse into a little pointing hand */
    transition: background-color 0.2s ease;
}

.btn-primary:hover {
    background-color: #4338CA; /* Gets slightly darker when you hover */
}



/* 6. Hero Section Layout */
.hero-section {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically centers the two columns */
    padding: 60px 5%;
    max-width: 1400px;
    margin: 0 auto;
    gap: 60px; /* Space between left and right column */
}

.hero-content {
    flex: 1; /* Takes up 50% of the space */
    max-width: 550px;
}

.hero-image {
    flex: 1; /* Takes up the other 50% of the space */
}

/* 7. Typography and Badges */
.badge {
    background-color: #EEF2FF; /* Light purple background */
    color: #4F46E5;
    padding: 8px 16px;
    border-radius: 20px; /* Pill shape */
    font-weight: 700;
    font-size: 14px;
    display: inline-block;
    margin-bottom: 24px;
}

.hero-content h1 {
    font-size: 64px; /* Massive headline */
    line-height: 1.05;
    color: #111827;
    margin-bottom: 24px;
    letter-spacing: -2px; /* Brings letters slightly closer together */
}

.highlight {
    color: #4F46E5; /* The purple text */
}

.hero-content p {
    font-size: 18px;
    color: #4B5563;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* 8. Large Button and Avatars */
.btn-large {
    width: 100%;
    max-width: 320px;
    padding: 16px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
    margin-bottom: 24px;
}

.mail-icon {
    width: 20px;
    height: 20px;
}

.social-proof {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #6B7280;
    font-weight: 600;
}

.avatars {
    display: flex;
}

/* Makes the avatars overlap each other */
.avatars img {
    width: 36px;
    height: 36px;
    border-radius: 50%; /* Makes the images perfect circles */
    border: 3px solid #FAFAFA;
    margin-left: -12px; 
}

.avatars img:first-child {
    margin-left: 0;
}

/* Temporary Placeholder for the right side */
.mockup-placeholder {
    background: #F3F4F6;
    border: 2px dashed #CBD5E1;
    border-radius: 12px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94A3B8;
    font-weight: 600;
}


/* 9. Scope Analysis Card Container */
.scope-card {
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); /* Soft drop shadow */
    padding: 30px;
    border: 1px solid #E5E7EB;
    width: 100%;
}

/* Card Header */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #E5E7EB;
}

.card-header h3 {
    font-size: 18px;
    color: #111827;
}

/* Red warning badge */
.alert-badge {
    background-color: #FEF2F2;
    color: #DC2626;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #FECACA;
}

/* Comparison Section (Original vs New) */
.comparison-section {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.scope-box {
    flex: 1; /* Makes both boxes equal width */
    background: #F9FAFB; /* Light gray */
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 20px;
    height: 230px; /* Fixed height so they match perfectly */
    display: flex;
    flex-direction: column;
}

.new-request-box {
    background: #FFFFFF; /* White background for the right box */
}

.scope-box h4 {
    font-size: 14px;
    color: #111827;
    margin-bottom: 16px;
}

.scope-box ul {
    list-style-type: none; /* Removes standard bullets to use custom ones */
    margin-bottom: auto; /* Pushes the footer text to the very bottom */
}

.scope-box li {
    font-size: 13px;
    color: #4B5563;
    margin-bottom: 10px;
    position: relative;
    padding-left: 16px;
}

/* Creating our own custom gray bullet points */
.scope-box li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 6px;
    height: 6px;
    background-color: #D1D5DB;
    border-radius: 50%;
}

/* Changing bullets to orange for the new request box */
.new-request-box li::before {
    background-color: #F97316;
}

.footer-text {
    font-size: 13px;
    color: #111827;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #E5E7EB;
}

.alert-text {
    color: #DC2626;
    font-weight: 600;
}

.arrow {
    color: #9CA3AF;
    font-size: 24px;
}

/* AI Analysis Section */
.ai-analysis {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.ai-analysis h4 {
    font-size: 14px;
    margin-bottom: 8px;
}

.ai-analysis p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.5;
}

/* Estimates Row */
.estimates-section {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
}

.estimate-box {
    flex: 1;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 20px;
}

.estimate-box h4 {
    font-size: 14px;
    color: #4B5563;
    margin-bottom: 8px;
    font-weight: 600;
}

.hours {
    font-size: 24px;
    font-weight: 700;
    color: #4F46E5;
}

.estimate-box p {
    font-size: 13px;
    color: #4B5563;
    line-height: 1.5;
}

/* Secondary Button Style (For Download PDF) */
.card-actions {
    display: flex;
    gap: 16px;
}

.btn-secondary {
    flex: 1;
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    color: #111827;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s;
}

.btn-secondary:hover {
    background: #F3F4F6;
}

.card-btn {
    flex: 1;
    padding: 12px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}



/* 10. Sound Familiar Section Container */
.sound-familiar {
    background-color: #F8F8FF; /* A very light purple/blue tint */
    padding: 80px 60px;
    margin: 60px auto; /* Centers the block and adds space above/below */
    max-width: 1300px;
    border-radius: 24px; /* Big rounded corners for the outer box */
}

.sound-familiar h2 {
    text-align: center;
    font-size: 32px;
    color: #111827;
    margin-bottom: 48px;
    letter-spacing: -0.5px;
}

/* 11. CSS Grid Layout for the Cards */
.sf-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Creates 4 columns of equal width */
    gap: 24px; /* Space between the cards */
}

.sf-card {
    background: #FFFFFF;
    padding: 32px 24px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03); /* Extremely subtle shadow */
    border: 1px solid #F3F4F6;
    transition: transform 0.2s; /* Preparing for a hover effect */
}

/* Optional: Adds a tiny jump effect when you hover over a card */
.sf-card:hover {
    transform: translateY(-5px);
}

.icon-box {
    background-color: #EEF2FF; /* Light purple icon background */
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    border: 1px solid #E0E7FF;
}

.sf-card h3 {
    font-size: 18px;
    color: #111827;
    margin-bottom: 12px;
    font-weight: 700;
}

.sf-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}


/* 12. How It Works Section */
.how-it-works {
    padding: 60px 5%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center; /* Centers the main heading */
}

.how-it-works h2 {
    font-size: 32px;
    color: #111827;
    margin-bottom: 60px;
    letter-spacing: -0.5px;
}

/* Timeline Layout */
.timeline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.step {
    flex: 1; /* Makes all 3 steps take up equal horizontal space */
    display: flex;
    align-items: flex-start;
    gap: 16px;
    text-align: left; /* Aligns text left within the step */
}

/* Positioning the Number and Icon */
.step-marker {
    position: relative; /* Essential for placing the number on top of the icon corner */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-number {
    background-color: #4F46E5; /* Purple */
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 4px; /* Slightly rounded square */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    top: -8px; /* Pushes number up outside the normal flow */
    left: -8px; /* Pushes number left */
    z-index: 2; /* Ensures number sits above the icon box */
}

.step-icon {
    background-color: #FFFFFF;
    border: 2px solid #EEF2FF;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

/* Text Content for Steps */
.step-content h3 {
    font-size: 16px;
    color: #111827;
    margin-bottom: 8px;
    padding-top: 10px; /* Aligns text visually with the icon */
}

.step-content p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.5;
}

/* The Connecting Arrows */
.step-arrow {
    font-size: 24px;
    color: #9CA3AF;
    padding-top: 25px; /* Pushes the arrow down to align with the icons */
}



/* 13. See It In Action Section */
.see-in-action {
    padding: 60px 2%;
    max-width: 1400px;
    margin: 0 auto;
}

.see-in-action h2 {
    text-align: center;
    font-size: 32px;
    color: #111827;
    margin-bottom: 40px;
}

/* Horizontal sequence container */
.action-sequence {
    display: flex;
    align-items: stretch; /* Makes all cards equal height */
    justify-content: space-between;
    gap: 15px;
}

/* Individual Card Styling */
.action-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 24px;
    flex: 1; /* Cards share the space equally */
    box-shadow: 0 10px 25px rgba(0,0,0,0.02);
    position: relative;
    border-top-width: 4px; /* Makes the top border thicker */
}

/* Colored Top Borders */
.border-green { border-top-color: #22C55E; }
.border-yellow { border-top-color: #F59E0B; }
.border-red { border-top-color: #EF4444; }
.border-gray { border-top-color: #6B7280; }

/* Colored Labels */
.card-label {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 16px;
}
.green-text { color: #166534; }
.yellow-text { color: #92400E; }
.red-text { color: #991B1B; }
.gray-text { color: #374151; }

.action-desc {
    font-size: 14px;
    color: #4B5563;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* Lists inside the cards */
.check-list {
    list-style: none;
    margin-bottom: 20px;
}

.check-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #111827;
    margin-bottom: 12px;
    font-weight: 500;
}

.action-footer {
    font-size: 13px;
    border-top: 1px solid #E5E7EB;
    padding-top: 16px;
    margin-top: auto;
}

/* Quote styling for Card 2 */
.quote-box {
    position: relative;
    padding: 20px;
    background: #FFFBEB;
    border-radius: 8px;
    color: #111827;
    font-size: 16px;
    font-style: italic;
    line-height: 1.6;
}

.quote-mark {
    color: #FCD34D;
    font-size: 40px;
    position: absolute;
    top: -10px;
    left: 10px;
    font-family: Georgia, serif;
}

.right-quote {
    top: auto;
    bottom: -30px;
    left: auto;
    right: 10px;
}

/* Card 3 specific styles */
.mini-badge {
    display: inline-flex;
    margin-bottom: 16px;
}

.red-bullet-list {
    list-style: none;
    margin-bottom: 20px;
}

.red-bullet-list li {
    font-size: 13px;
    color: #111827;
    margin-bottom: 8px;
    position: relative;
    padding-left: 14px;
}

.red-bullet-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 6px;
    height: 6px;
    background-color: #DC2626;
    border-radius: 50%;
}

.estimate-mini {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.est-label { font-size: 12px; color: #4B5563; }
.est-hours { font-size: 18px; font-weight: 700; color: #DC2626; }

.action-buttons { display: flex; gap: 8px; }

.btn-outline-mini, .btn-purple-mini {
    flex: 1;
    padding: 8px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
}

.btn-outline-mini {
    background: white;
    border: 1px solid #D1D5DB;
}

.btn-purple-mini {
    background: #4F46E5;
    color: white;
    border: none;
}

/* Card 4 Next Steps */
.ns-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.ns-item strong {
    font-size: 13px;
    color: #111827;
    display: block;
    margin-bottom: 4px;
}

.ns-item p {
    font-size: 12px;
    color: #6B7280;
    line-height: 1.4;
}

/* The Connecting Arrows */
.action-arrow {
    display: flex;
    align-items: center;
    font-size: 24px;
    color: #9CA3AF;
}



/* 14. Why Developers Use It Section */
.why-use-it {
    padding: 80px 5%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center; /* Centers the main heading */
}

.why-use-it h2 {
    font-size: 32px;
    color: #111827;
    margin-bottom: 60px;
    letter-spacing: -0.5px;
}

/* Reusing CSS Grid for the 4 columns */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
    gap: 40px; /* Generous spacing between the text blocks */
    text-align: left; /* Overrides the center alignment so text reads naturally */
}

.benefit-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 20px;
}

.benefit-item h3 {
    font-size: 16px;
    color: #111827;
    margin-bottom: 12px;
    font-weight: 700;
}

.benefit-item p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}



/* 15. Bottom Banner / Footer */
.bottom-banner {
    background-color: #17172B; /* Deep dark blue/purple */
    color: #FFFFFF;
    padding: 60px 5%;
    margin: 40px auto 60px; /* Adds space above and below the banner */
    border-radius: 24px;
    max-width: 1300px;
}

.banner-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
}

/* Left Side Text */
.banner-text {
    flex: 1;
}

.banner-text h2 {
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.banner-text p {
    font-size: 16px;
    color: #D1D5DB; /* Light gray to contrast against dark background */
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 500px;
}

/* Mini features row */
.banner-features {
    display: flex;
    gap: 24px;
}

.b-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #E5E7EB;
    line-height: 1.4;
}

.b-icon {
    background: rgba(255, 255, 255, 0.1); /* Semi-transparent white box */
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Right Side Form Box */
.banner-form-box {
    background: #FFFFFF;
    color: #111827; /* Dark text since the box is white */
    padding: 40px;
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.banner-form-box h3 {
    font-size: 24px;
    margin-bottom: 8px;
}

.banner-form-box p {
    font-size: 14px;
    color: #4B5563;
    margin-bottom: 24px;
}

/* Form Inputs Styling */
.waitlist-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.waitlist-form input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.2s;
}

/* Makes the border purple when you click inside to type */
.waitlist-form input:focus {
    border-color: #4F46E5; 
}

.form-btn {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    margin-top: 8px;
}

.spam-notice {
    text-align: center;
    font-size: 12px;
    color: #6B7280;
    margin-top: 8px;
}




/* Fix for making the 'a' tag look exactly like a button */
.nav-btn-link {
    text-decoration: none;
    display: inline-block;
}

/* The highlight animation when jumping to the waitlist form */
#waitlist:target {
    animation: highlight-pulse 1.5s ease-out;
}

/* This creates a glowing purple pulse effect */
@keyframes highlight-pulse {
    0% {
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(79, 70, 229, 0.6);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 0 25px rgba(79, 70, 229, 0);
        transform: scale(1.02); /* Makes the box pop out slightly */
    }
    100% {
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(79, 70, 229, 0);
        transform: scale(1);
    }
}


.privacy-notice {
    text-align: center;
    font-size: 12px;
    color: #6B7280;
    line-height: 1.5;
}

/* Keeps the big hero link looking like a button without an underline */
.hero-btn-link {
    text-decoration: none;
}

/* Disable hover effects and pointer cursors for display-only UI mockup buttons */

/* 1. Change the pointing hand back to a normal arrow */
.scope-card .btn-secondary,
.scope-card .btn-primary,
.action-card .btn-outline-mini,
.action-card .btn-purple-mini {
    cursor: default; 
}

/* 2. Stop the Scope Analysis buttons from changing color on hover */
.scope-card .btn-secondary:hover {
    background: #FFFFFF;
}

.scope-card .btn-primary:hover {
    background-color: #4F46E5;
}


/* ==========================================================================
   16. MOBILE & TABLET RESPONSIVE DESIGN (MEDIA QUERIES)
   These rules only activate when the screen is 768px wide or smaller
   ========================================================================== */

@media (max-width: 768px) {
    
    /* 1. Global Padding & Navbar */
    .navbar {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding: 20px;
    }
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    /* 2. Hero Section */
    .hero-section {
        flex-direction: column;
        text-align: center;
        padding: 40px 5%;
        gap: 40px;
    }
    .hero-content h1 {
        font-size: 42px; /* Make the massive font smaller for phones */
    }
    .btn-large {
        margin: 10px auto 24px auto; /* Centers the button */
    }
    .social-proof {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 16px;
    }
    .hero-image {
        width: 100%;
    }

    /* 3. Scope Analysis Card */
    .scope-card {
        padding: 20px;
    }
    .comparison-section {
        flex-direction: column; /* Stacks the Original vs New boxes */
    }
    .scope-box {
        height: auto; /* Lets the boxes expand based on text */
        width: 100%;
    }
    .arrow {
        transform: rotate(90deg); /* Points the arrow down instead of right */
        margin: 10px 0;
    }
    .estimates-section, .card-actions {
        flex-direction: column; /* Stacks the estimate boxes and buttons */
        gap: 15px;
    }

    /* 4. Sound Familiar & Why Developers Use It Grids */
    .sound-familiar {
        padding: 40px 20px;
        margin: 40px 20px;
    }
    .sf-grid, .benefits-grid {
        grid-template-columns: 1fr; /* Changes from 4 columns to 1 single column */
        gap: 30px;
    }

    /* 5. How It Works Timeline */
    .timeline {
        flex-direction: column; /* Stacks the steps vertically */
        gap: 40px;
        padding-left: 10px;
    }
    .step-arrow {
        transform: rotate(90deg); /* Points timeline arrows down */
        padding-top: 0;
        margin: 0 auto;
    }

    /* 6. See It In Action Sequence */
    .action-sequence {
        flex-direction: column; /* Stacks the 4 sequence cards */
    }
    .action-arrow {
        transform: rotate(90deg);
        margin: 15px auto;
    }

    /* 7. Bottom Banner */
    .bottom-banner {
        margin: 20px;
        padding: 40px 20px;
    }
    .banner-content {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
    .banner-text p {
        margin: 0 auto 30px auto;
    }
    .banner-features {
        flex-wrap: wrap; /* Allows the mini-features to wrap to the next line */
        justify-content: center;
        gap: 20px;
    }
    .b-feature {
        text-align: left;
    }
    .banner-form-box {
        padding: 30px 20px;
    }
}


/* ==========================================================================
   17. Success Popup Modal
   ========================================================================== */

/* The dark background overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(17, 24, 39, 0.7); 
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* Forces the popup to sit on top of everything else */
    opacity: 0; /* Hidden by default */
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* The class JavaScript adds to make it visible */
.modal-overlay.show-modal {
    opacity: 1;
    visibility: visible;
}

/* The actual white popup box */
.modal-content {
    background: #FFFFFF;
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(20px); /* Starts slightly lower */
    transition: transform 0.3s ease;
}

/* Makes the box slide up into place when shown */
.modal-overlay.show-modal .modal-content {
    transform: translateY(0); 
}

.modal-icon {
    margin-bottom: 16px;
}

.modal-content h3 {
    color: #111827;
    font-size: 24px;
    margin-bottom: 8px;
}

.modal-content p {
    color: #4B5563;
    font-size: 16px;
    margin-bottom: 24px;
    line-height: 1.5;
}

.close-modal-btn {
    width: 100%;
    padding: 12px;
    font-size: 16px;
}