/* ==========================================================================
   CENTRALDEV — RESPONSIVE
   Breakpoints: 1200, 992, 768, 576
   ========================================================================== */

@media (max-width: 1200px) {
    .grid-4 { grid-template-columns: repeat(3, 1fr); }
    section { padding: 100px 0; }
}

@media (max-width: 992px) {
    .nav-links, .nav-actions .icon-btn, .nav-actions .lang-wrap, .nav-actions > .btn { display: none; }
    .nav-actions .burger { display: inline-flex; }

    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-2 { grid-template-columns: 1fr; gap: 32px; }

    .feature-wide,
    .feature-wide:nth-child(even) { grid-template-columns: 1fr; padding: 40px; gap: 32px; }
    .feature-wide:nth-child(even) .feature-info,
    .feature-wide:nth-child(even) .feature-img { order: unset; }

    .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }

    .price-card.popular { transform: none; }
    .price-card.popular:hover { transform: translateY(-8px); }

    section { padding: 80px 0; }
    .section-head { margin-bottom: 50px; }
    .vision-card { padding: 50px 30px; }
    .contact-shell { padding: 30px; }
    .field-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .container { padding: 0 18px; }
    section { padding: 70px 0; }
    .hero { padding: 60px 0; }

    .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 18px; }
    .hero-stats { grid-template-columns: 1fr; gap: 14px; max-width: 360px; }

    .card { padding: 32px 24px; }
    .price-card { padding: 36px 28px; }

    .footer-grid { grid-template-columns: 1fr; gap: 32px; text-align: left; }
    .footer-brand p { max-width: 100%; }

    .btn-lg { padding: 16px 30px; font-size: 15px; }
    .hero-cta { flex-direction: column; width: 100%; align-items: stretch; }
    .hero-cta .btn { width: 100%; }
}

@media (max-width: 576px) {
    .nav { height: 64px; }
    .mobile-drawer { inset: 64px 0 0 0; }
    .logo { font-size: 20px; }
    .hero-title { font-size: 38px; }
    .price-tag { font-size: 42px; }
    .vision-card { padding: 40px 22px; }
    .contact-shell { padding: 22px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important; scroll-behavior: auto !important;
    }
    .ambient::before, .ambient::after { animation: none; }
}