/* Add these Final CTA section styles to your styles.css */

/* The CTA section manages its own width and centering, removing the need for a wrapper. */
.final-cta-section {
    max-width: 1100px;      /* Takes responsibility for its own width */
    margin: 8rem auto;      /* Handles vertical spacing and horizontal centering */
    padding: 60px;          /* Generous padding for desktop */
    
    text-align: center; 
    background: linear-gradient(145deg, rgba(0, 245, 212, 0.1) 0%, rgba(11, 19, 43, 0.9) 100%); 
    border-radius: 24px; 
    backdrop-filter: blur(20px);
}

.final-cta-title { 
    font-family: 'Orbitron', sans-serif; 
    font-size: 2rem; 
    font-weight: 700; 
    color: var(--pure-white); 
    margin-bottom: 1rem; 
}

.final-cta-subtitle { 
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem; 
    color: var(--starlight); 
    opacity: 0.9; 
    margin-bottom: 2rem; 
    max-width: 600px; 
    margin-left: auto; 
    margin-right: auto; 
}

.final-cta-buttons { 
    display: flex; 
    justify-content: center; 
    gap: 1.5rem; 
    flex-wrap: wrap; 
}

.final-cta-button {
    display: inline-flex; 
    align-items: center; 
    gap: 0.8rem; 
    background: linear-gradient(135deg, var(--kinetic-teal) 0%, var(--hyper-blue) 100%);
    color: var(--pure-white); 
    padding: 1.2rem 2.5rem; 
    border: none; 
    border-radius: 50px; 
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem; 
    font-weight: 600; 
    letter-spacing: 0.02em; 
    cursor: pointer; 
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0, 245, 212, 0.2); 
    position: relative; 
    overflow: hidden; 
    text-decoration: none;
}

.final-cta-button.secondary { 
    background: transparent; 
    border: 2px solid var(--kinetic-teal); 
    color: var(--kinetic-teal); 
}

.final-cta-button::before {
    content: ''; 
    position: absolute; 
    top: 0; 
    left: -100%; 
    width: 100%; 
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
    transition: left 0.5s ease;
}

.final-cta-button:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 15px 30px rgba(0, 245, 212, 0.3); 
}

.final-cta-button.secondary:hover { 
    background: var(--kinetic-teal); 
    color: var(--pure-white); 
}

.final-cta-button:hover::before { 
    left: 100%; 
}

/* Responsive */
@media (max-width: 768px) {
    .final-cta-title {
        font-size: 1.8rem;
    }
    
    .final-cta-subtitle {
        font-size: 1rem;
    }
    
    .final-cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .final-cta-button {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    /* The CTA section manages its own width and centering, removing the need for a wrapper. */
.final-cta-section {

    padding: 30px 30px;          /* Generous padding for desktop */
    
}
}



/* 2. Style the card for the light theme */
.theme-light .final-cta-section {
    background: var(--pure-white); /* Use a solid white background */
    border: 1px solid #e0e0e0;     /* A soft, light border */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); /* A subtle shadow */
    backdrop-filter: none; /* Remove the blur effect */
}

/* 3. Update text colors to be dark and readable */
.theme-light .final-cta-title {
    color: var(--quantum-blue); 
}

.theme-light .final-cta-subtitle {
    color: var(--graphite);
}

/* 4. Restyle the secondary button for the light theme */
.theme-light .final-cta-button.secondary {
    border-color: #e0e0e0;
    background: transparent;
    color: var(--hyper-blue);
}

.theme-light .final-cta-button.secondary:hover {
    background: var(--hyper-blue);
    border-color: var(--hyper-blue);
    color: var(--pure-white);
}