@media (max-width: 1024px) {
  nav { padding: 18px 30px; }
  .proof-strip { padding: 34px 30px; grid-template-columns: 1fr; }
  section { padding: 90px 30px; }
  #hero { padding: 120px 30px 80px; }
  .services-grid, .stats-grid, .process-steps { grid-template-columns: 1fr 1fr; }
  .pricing-grid, .testi-grid, .footer-grid { grid-template-columns: 1fr 1fr; }
  .social-split, .webdev-split, .contact-split { grid-template-columns: 1fr; }
  .social-visual { display: none; }
  .showcase-grid, .ready-grid, .blog-grid { grid-template-columns: 1fr 1fr; }
  .showcase-card-large { grid-row: auto; }
}
@media (max-width: 640px) {
  nav ul { display: none; }
  .proof-logos { grid-template-columns: 1fr 1fr; }
  .services-grid, .stats-grid, .process-steps, .pricing-grid, .testi-grid, .footer-grid { grid-template-columns: 1fr; }
  .process-steps {
    gap: 34px;
    margin-top: 54px;
    justify-items: center;
  }
  .process-steps::before {
    display: none;
  }
  .process-step {
    width: 100%;
    max-width: 320px;
    padding: 0 12px;
    position: relative;
    text-align: center;
  }
  .step-circle {
    margin-bottom: 22px;
  }
  .process-step h4,
  .process-step p {
    position: relative;
    z-index: 2;
  }
  .form-row { grid-template-columns: 1fr; }
  .stats-grid .stat-item { border-right: none; border-bottom: 1px solid rgba(123,47,255,0.1); }
  .showcase-grid, .ready-grid, .blog-grid { grid-template-columns: 1fr; }
  nav ul { gap: 16px; }
}
@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;
  }
  .reveal { animation: none !important; transform: translateY(0) !important; opacity: 1 !important; }
  .reveal-delay-1, .reveal-delay-2, .reveal-delay-3 { animation-delay: 0 !important; }
}

@media (max-width: 768px) {
  #hero-canvas { display: none !important; }
  .hero-mobile-effect { display: block !important; visibility: visible !important; opacity: 1 !important; }
  .nav-toggle { display: flex; }
  nav { padding: 12px 18px; }
  .hero-content { max-width: 100%; }
  .hero-sub { max-width: 100%; }
  .btn-primary, .btn-outline { padding: 14px 20px; width: auto; }
}
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  #hero-canvas { display: none !important; }
  .hero-mobile-effect { display: block !important; visibility: visible !important; }
}