@media (min-width: 480px) {
  .hero-content {
    gap: var(--space-xl);
  }

  .hero-title {
    font-size: clamp(3.2rem, 10vw, 5.5rem);
  }

  .service-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .pricing-grid,
  .careers-benefit-grid,
  .job-listings-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .nav-links,
  .btn-nav-cta {
    display: inline-flex;
  }

  .nav-hamburger,
  .nav-mobile {
    display: none;
  }

  .hero-content {
    grid-template-columns: 1fr 1fr;
  }

  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .why-grid,
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .pricing-grid,
  .careers-benefit-grid,
  .job-listings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-bottom {
    flex-direction: row;
    text-align: left;
  }
}

@media (min-width: 1024px) {
  .service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .why-grid {
    grid-template-columns: 1fr 1fr;
  }

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

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

  .careers-benefit-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .hero-title {
    font-size: 3rem;
  }

  .hero-visual .stat-card {
    display: none;
  }

  .hero-visual {
    min-height: auto;
  }

  .terminal-card {
    inset: auto;
    margin-top: var(--space-md);
    max-width: 100%;
    position: relative;
  }
}

@media (max-width: 479px) {
  :root {
    --hero-canvas-opacity: 0;
  }

  #hero-canvas {
    visibility: hidden;
  }

  .whatsapp-float {
    bottom: var(--space-sm);
    right: var(--space-sm);
  }
}