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

/* Tablet Screens (768px and below) */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    /* Navigation */
    .mobile-menu-btn {
        display: flex;
    }

    .nav-menu {
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background-color: white;
        flex-direction: column;
        gap: 0;
        box-shadow: var(--shadow);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .nav-menu.active {
        max-height: 500px;
    }

    .nav-menu li {
        border-bottom: 1px solid var(--border-color);
    }

    .nav-menu a {
        display: block;
        padding: 1rem;
    }

    .nav-menu a::after {
        display: none;
    }

    /* Hero */
    .hero {
        padding: 60px 0;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }

    .hero-content {
        text-align: center;
    }

    .hero-content p {
        max-width: 100%;
    }

    .hero-visual {
        max-width: 480px;
        margin: 0 auto;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-content p {
        font-size: 1.05rem;
    }

    /* Features Grid */
    .features-grid {
        grid-template-columns: 1fr;
    }

    /* Benefits */
    .benefits-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    /* Metrics */
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Feature Sections */
    .feature-section {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .feature-section.reverse {
        direction: ltr;
    }

    /* Comparison Table */
    .comparison-table {
        font-size: 0.9rem;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 1rem;
    }

    /* Case Studies */
    .results {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Pricing */
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .pricing-card.featured {
        transform: scale(1);
    }

    .pricing-toggle {
        flex-direction: column;
        gap: 1rem;
    }

    .pricing-table {
        font-size: 0.9rem;
    }

    .pricing-table th,
    .pricing-table td {
        padding: 0.75rem;
    }

    /* Contact */
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Security Grid */
    .security-grid {
        grid-template-columns: 1fr;
    }

    /* Page Header */
    .page-header {
        padding: 40px 0;
    }

    .page-header h1 {
        font-size: 2rem;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* CTA Buttons */
    .cta-buttons {
        flex-direction: column;
    }

    .btn, .btn-large {
        width: 100%;
    }
}

/* Mobile Screens (480px and below) */
@media (max-width: 480px) {
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    h4 {
        font-size: 1rem;
    }

    .container {
        padding: 0 15px;
    }

    /* Hero */
    .hero {
        padding: 40px 0;
    }

    .hero-content h1 {
        font-size: 1.75rem;
        white-space: normal;
    }

    .hero-content p {
        font-size: 1rem;
    }

    /* Buttons */
    .btn {
        padding: 10px 20px;
        font-size: 0.95rem;
    }

    .btn-large {
        padding: 12px 24px;
        font-size: 1rem;
    }

    /* Sections */
    .features-preview,
    .benefits,
    .metrics,
    .cta-section,
    .pricing-section,
    .contact-section {
        padding: 40px 0;
    }

    /* Features Grid */
    .features-grid {
        gap: 1rem;
    }

    /* Metrics Grid */
    .metrics-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .metric {
        padding: 1rem;
    }

    .metric h3 {
        font-size: 2rem;
    }

    /* Summary Grid */
    .summary-grid {
        grid-template-columns: 1fr;
    }

    /* FAQ Grid */
    .faq-grid {
        grid-template-columns: 1fr;
    }

    /* Pricing Table */
    .comparison-table,
    .pricing-table {
        font-size: 0.85rem;
    }

    .comparison-table th,
    .comparison-table td,
    .pricing-table th,
    .pricing-table td {
        padding: 0.5rem;
    }

    /* Case Studies */
    .case-study-header,
    .case-study-body {
        padding: 1rem;
    }

    .result-item h4 {
        font-size: 1.5rem;
    }

    /* Contact Form */
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* Links Grid */
    .links-grid {
        grid-template-columns: 1fr;
    }

    /* Social Links */
    .social-links {
        flex-direction: column;
    }

    .social-link {
        width: 100%;
        text-align: center;
    }

    /* Feature List Items */
    .feature-list li {
        padding-left: 1.25rem;
        font-size: 0.95rem;
    }

    /* Page Header */
    .page-header h1 {
        font-size: 1.5rem;
    }

    .page-header p {
        font-size: 0.95rem;
    }

    /* Footer */
    .footer {
        padding: 40px 0 15px;
    }

    .footer-section h4 {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .footer-section p,
    .footer-section a {
        font-size: 0.9rem;
    }
}

/* Extra Small Screens (320px and below) */
@media (max-width: 320px) {
    .container {
        padding: 0 10px;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    .hero-content h1 {
        font-size: 1.5rem;
    }

    .btn {
        padding: 8px 16px;
    }
}

/* Print Styles */
@media print {
    body {
        background-color: white;
    }

    .navbar,
    .cta-section,
    .footer,
    .mobile-menu-btn {
        display: none;
    }

    section {
        page-break-inside: avoid;
    }

    a {
        text-decoration: underline;
    }
}

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

    h1 {
        font-size: 3.5rem;
    }

    .hero-content h1 {
        font-size: 3.5rem;
    }

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

    .metrics-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* =================================
   INPLENION NEW COMPONENTS — RESPONSIVE
   ================================= */

@media (max-width: 1024px) {
    .features-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .feature-tools-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    /* Logo tagline hidden on small screens */
    .logo-tagline {
        display: none;
    }

    /* Hero bullets left-aligned when stacked */
    .hero-bullets {
        text-align: left;
        display: inline-block;
    }

    /* Features grid 3-col → 1-col */
    .features-grid-3 {
        grid-template-columns: 1fr;
    }

    /* Feature sections stack */
    .feature-section .container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Whitepaper card stacks */
    .whitepaper-card {
        flex-direction: column;
        text-align: center;
        padding: 2rem;
        gap: 1.5rem;
    }

    .whitepaper-action {
        width: 100%;
        text-align: center;
    }

    /* Analysis tools grid */
    .feature-tools-grid {
        grid-template-columns: 1fr;
    }

    /* Native features grid */
    .native-features-grid {
        grid-template-columns: 1fr;
    }

    /* Features nav scrolls */
    .features-nav {
        top: 60px;
    }
}