/* RESPONSIVE */
  @media (max-width: 960px) {
    .hero { grid-template-columns: 1fr; text-align: center; padding: 56px 6vw 64px; }
    .hero-content { max-width: none; }
    .service-note { margin-left: auto; margin-right: auto; }
    .hero-store-buttons { justify-content: center; }
    .hero-visual { margin-top: 36px; min-height: 440px; }
    .hero-device { height: min(70vw, 460px); }
    .hero-float-left { left: 10%; top: 12%; }
    .hero-float-right { right: 8%; bottom: 23%; }
    .waste-card { /* keep grid sizing */ }
    .trust-layout { grid-template-columns: 1fr; text-align: center; }
    .trust-grid { grid-template-columns: 1fr 1fr; text-align: left; }
    .steps { grid-template-columns: 1fr 1fr; }
    .steps::before { display: none; }
    .stats-grid { grid-template-columns: repeat(3,1fr); } /* keep 2 rows */
    .footer-top { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 600px) {
    section { padding: 52px 5vw; }
    .waste-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 100%; }
    .waste-card { min-width: 0; }
    .trust-layout { grid-template-columns: 1fr; }
    .trust-grid { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(3,1fr); }
    .service-note { font-size: 12px; }
    .carousel-btn { width: 42px; height: 42px; font-size: 20px; }
    .carousel-btn-left { left: 3vw; }
    .carousel-btn-right { right: 3vw; }
    .nav-links { display: none; }
    .hero { min-height: auto; }
    .hero h1 { font-size: clamp(39px, 12.6vw, 52px); letter-spacing: -1px; margin-bottom: 14px; }
    .service-note { margin-bottom: 5px; }
    .hero-store-buttons { margin-top: 5px; }
    .hero-store-buttons .store-btn { padding: 10px 16px; }
    .hero-visual { min-height: 335px; margin-top: 20px; }
    .hero-device { height: min(88vw, 355px); }
    .hero-float-card { padding: 10px 12px; min-width: 124px; border-radius: 14px; }
    .hero-float-card strong { font-size: 16px; }
    .hero-float-left { left: 0; top: 6%; }
    .hero-float-right { right: 0; bottom: 34%; }
    .video-frame { width: min(100%, 300px); max-width: calc(100vw - 40px); border-radius: 28px; padding: 10px; }
    .video-frame video { border-radius: 20px; }
    .footer-top { grid-template-columns: 1fr; }
  }
