@media (max-width: 480px) {
  html {
    scroll-behavior: smooth;
  }

  body.no-scroll {
    overflow: hidden;
  }

  .hero h1 {
    font-size: 1.6rem;
  }

  .nav-links {
    display: none;
  }
  .nav-toggle {
    display: block;
  }

  .mockup-frame {
    gap: 0.5rem;
  }

  .mockup.side {
    max-width: 100px;
  }
  .mockup.center {
    max-width: 120px;
  }

  .problem h2,
  .goal h2 {
    font-size: 1.2rem;
  }

  .problem ul li {
    font-size: 0.95rem;
    padding-left: 1rem;
  }

  .goal-box {
    font-size: 0.95rem;
  }

  .user-research h2 {
    font-size: 1.2rem;
  }

  .user-research ul li {
    font-size: 0.95rem;
    padding-left: 1rem;
  }

  .info-architecture h2,
  .conceptualization h2,
  .solution h2 {
    font-size: 1.3rem;
  }

  .info-architecture p,
  .conceptualization p,
  .solution p {
    font-size: 0.9rem;
  }
}