@media (max-width: 960px) {
  .hero-grid,
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-photo { max-width: 480px; }
  .skills-grid,
  .testi-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .nav-links {
    position: fixed;
    inset: 76px 0 auto 0;
    background: var(--bg);
    flex-direction: column;
    padding: 28px;
    gap: 22px;
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .nav-links.show { display: flex; }
  .nav-toggle { display: block; }

  .skills-grid,
  .testi-grid,
  .stat-grid { grid-template-columns: 1fr; }

  .timeline { padding-left: 34px; }
  .xp-card { padding: 26px; }
  .xp-card::before { left: -33px; }

  section { padding: 64px 0; }
}