/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

/* Tablets (768px and below) */
@media (max-width: 768px) {
    .nav-links {
        gap: 15px;
        font-size: 14px;
    }

    .hero-content h1 {
        font-size: 32px;
    }

    .hero-content p {
        font-size: 16px;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 15px;
    }

    .trust-badges {
        gap: 15px;
    }

    .trust-badges span {
        font-size: 12px;
        padding: 8px 15px;
    }

    section h2 {
        font-size: 28px;
    }

    .section-subtitle {
        font-size: 16px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .security-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ai-features {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contact h2 {
        font-size: 28px;
    }

    .contact p {
        font-size: 16px;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .navbar .container {
        flex-wrap: wrap;
        gap: 10px;
    }

    .nav-links {
        display: none;
    }

    .demo-btn {
        width: 100%;
    }

    .logo {
        font-size: 18px;
    }

    .hero {
        padding: 50px 20px;
    }

    .hero-content h1 {
        font-size: 24px;
    }

    .hero-content p {
        font-size: 14px;
    }

    .btn {
        padding: 10px 20px;
        font-size: 14px;
    }

    .btn-large {
        padding: 12px 30px;
        font-size: 16px;
    }

    section {
        padding: 40px 15px;
    }

    section h2 {
        font-size: 22px;
    }

    .section-subtitle {
        font-size: 14px;
    }

    .feature-card {
        padding: 20px;
    }

    .feature-card i {
        font-size: 32px;
    }

    .feature-card h3 {
        font-size: 18px;
    }

    .feature-card p {
        font-size: 12px;
    }

    .security-card {
        padding: 20px;
    }

    .security-card h3 {
        font-size: 18px;
    }

    .security-card li {
        font-size: 12px;
    }

    .ai-card {
        padding: 20px;
    }

    .ai-card h3 {
        font-size: 18px;
    }

    .ai-card li {
        font-size: 12px;
    }

    .contact h2 {
        font-size: 22px;
    }

    .contact p {
        font-size: 14px;
    }

    .trust-badges {
        flex-direction: column;
        gap: 10px;
    }

    .trust-badges span {
        width: 100%;
        justify-content: center;
    }
}

/* Large screens (1200px and above) */
@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .security-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ai-features {
        grid-template-columns: repeat(2, 1fr);
    }
}