@media (max-width: 620px) {
  html {
    scroll-behavior: smooth;
  }
  body.no-scroll {
    overflow: hidden;
  }

  .navbar .container {
    padding: 1rem 1.6rem;
  }
  .nav-links {
    gap: 1rem;
  }
  .nav-links a {
    font-size: 1rem;
    gap: 0.5rem;
  }
  .nav-links {
    display: none;
  }
  .nav-toggle {
    display: block;
  }
  .nav-mobile {
    right: 1.5rem;
  }

  /* Hero Section  */

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

  .hero p {
    font-size: 1rem;
  }

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

  .overview {
    padding: 2rem 1.5rem;
  }
  .overview .problem-goal .user-research .goal-box {
    padding: 2rem 1.5rem;
  }
  .overview h2 {
    font-size: 1.4rem;
  }

  .info-box {
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
  }

  .problem-goal {
    padding: 2rem 1.5rem;
  }
  .problem h2,
  .goal h2 {
    font-size: 1.4rem;
  }

  .goal-box quote {
    width: 12px;
    height: 12px;
    font-size: 0.1rem;
  }

  .user-research {
    padding: 2rem 1.5rem;
  }
  .user-research h2 {
    font-size: 1.4rem;
  }

  .insights {
    padding: 2rem 1.5rem;
  }

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

  .insights h2 {
    font-size: 1.5rem;
  }

  .card-header h3 {
    font-size: 1rem;
  }

  .persona {
    padding: 2rem 1.5rem;
  }

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

  .persona h2 {
    font-size: 1.5rem;
  }

  .card-header h3 {
    font-size: 1rem;
  }

  .info-architecture,
  .conceptualization,
  .solution {
    padding: 2rem 1.5rem;
  }

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

  .info-architecture p,
  .conceptualization p,
  .solution p {
    font-size: 0.95rem;
    margin-bottom: 2rem;
  }

  .feedback {
    padding: 2rem 1.5rem;
  }

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

  .feedback h2 {
    font-size: 1.5rem;
  }

  .feedback-text {
    font-size: 0.95rem;
  }

  .learning {
    padding: 2rem 1.5rem;
  }

  .learning h2 {
    font-size: 1.5rem;
  }

  .learning .subheading {
    font-size: 0.95rem;
  }

  .learning-card {
    padding: 1.5rem;
  }

  .whats-next {
    padding: 2rem 1.5rem;
  }

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

  .whats-next h2 {
    font-size: 1.5rem;
  }

  .next-card {
    padding: 1.5rem;
  }

  .prototype {
    padding: 2rem 1.5rem;
  }

  .prototype h2 {
    font-size: 1.5rem;
  }

  .prototype p {
    font-size: 0.95rem;
  }

  .btn-prototype {
    font-size: 0.95rem;
    padding: 0.8rem 1.5rem;
  }
}