/* Base responsive settings */
@media (max-width: 1200px) {
    .container {
        max-width: 960px;
        padding: 0 20px;
    }
    
    h1 { font-size: 3.5rem; }
    h2 { font-size: 2rem; }
}

@media (max-width: 992px) {
    .container {
        max-width: 720px;
    }
    
    /* Pricing grid */
    .pricing-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    /* Features grid */
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Process flow */
    .process-flow {
        flex-direction: column;
    }
    
    .process-arrow {
        transform: rotate(90deg);
        margin: 20px 0;
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 540px;
    }
    
    /* Hero section */
    .hero-content {
        padding: 60px 20px;
    }
    
    h1 { font-size: 2.5rem; }
    
    .hero-features {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    /* Navigation */
    .nav-links {
        display: none; /* Will be handled by mobile menu */
    }
    
    /* Pricing */
    .pricing-cards {
        grid-template-columns: 1fr;
    }
    
    .pricing-tabs {
        flex-direction: column;
        align-items: center;
    }
    
    /* Features */
    .feature-grid {
        grid-template-columns: 1fr;
    }
    
    /* Contact form */
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    /* CTA buttons */
    .cta-buttons {
        flex-direction: column;
        gap: 15px;
    }
    
    .btn {
        width: 100%;
    }
}

@media (max-width: 576px) {
    /* Further refinements for very small screens */
    .container {
        padding: 0 15px;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    
    .section {
        padding: 40px 0;
    }
    
    .expertise-grid,
    .security-grid {
        grid-template-columns: 1fr;
    }
    
    .pricing-card {
        padding: 20px;
    }
    
    .enterprise-card {
        flex-direction: column;
        text-align: center;
    }
    
    .enterprise-right {
        margin-top: 20px;
    }
}

/* Dark mode preferences */
@media (prefers-color-scheme: dark) {
    :root {
        --surface: #111827;
        --surface-light: #1f2937;
    }
}

@media (max-width: 1024px) {
    .early-access-content {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        margin-bottom: 40px;
    }
}

@media (max-width: 768px) {
    .stats-grid,
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .gradient-text {
        font-size: 2.5rem;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .why-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 640px) {
    .why-features-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .why-feature-description {
        max-width: 300px;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .why-features-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 640px) {
    .why-features-container {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}