/* =========================================================
   Responsive · media queries only
   Breakpoints: 1440 · 1024 · 768 · 480 · 360
   ========================================================= */

/* Large desktops+ (1440+) */
@media (min-width: 1440px) {
  :root { --container: 1240px; }
  body { font-size: 18px; }
}

/* Laptop (<= 1024) */
@media (max-width: 1024px) {
  .section { padding: 80px 0; }
  .hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .hero__visual { max-width: 520px; margin: 0 auto; }
  .hero__badge--a { top: -16px; left: 8px; }
  .hero__badge--b { bottom: -16px; right: 8px; }
  .about { grid-template-columns: 1fr; gap: 40px; }
  .about__media { max-width: 420px; margin: 0 auto; }
  .skills { grid-template-columns: repeat(2, 1fr); }
  .projects { grid-template-columns: repeat(2, 1fr); }
  .certs { grid-template-columns: repeat(2, 1fr); }
  .ach { grid-template-columns: repeat(2, 1fr); }
  .contact { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; text-align: center; gap: 20px; }
  .footer__brand, .footer__links, .footer__socials { justify-content: center; }
}

/* Tablet (<= 768) */
@media (max-width: 768px) {
  :root { --nav-h: 64px; }
  .container { width: min(100% - 32px, var(--container)); }
  body { font-size: 16px; }
  .section { padding: 64px 0; }
  .section__head { margin-bottom: 40px; }

  /* Nav → mobile */
  .nav__menu {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    background: color-mix(in oklab, var(--c-bg) 96%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--c-border);
    padding: 20px;
    transform: translateY(-120%); opacity: 0; visibility: hidden;
    transition: transform .35s var(--easing), opacity .3s var(--easing), visibility .3s;
  }
  .nav__menu.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav__list {
    flex-direction: column; align-items: stretch;
    background: transparent; border: none; padding: 0; gap: 4px;
    border-radius: 0;
  }
  .nav__link {
    display: block; padding: 14px 16px; font-size: 15px;
    border-radius: 12px;
  }
  .nav__cta { display: none; }
  .nav__burger { display: flex; }

  .hero { padding-top: calc(var(--nav-h) + 24px); min-height: auto; }
  .hero__title { font-size: clamp(34px, 8vw, 44px); }
  .hero__desc { font-size: 16px; }
  .hero__actions .btn { flex: 1; justify-content: center; }
  .hero__scroll { display: none; }
  .hero__badge { padding: 10px 12px; }
  .hero__badge strong { font-size: 16px; }
  .hero__terminal-body { font-size: 12px; padding: 16px; }

  .projects { grid-template-columns: 1fr; }
  .certs { grid-template-columns: 1fr; }
  .ach { grid-template-columns: 1fr; }

  .exp__item { grid-template-columns: 1fr; gap: 12px; }
  .exp__side { flex-direction: row; align-items: center; }

  .contact__card, .contact__form { padding: 24px; }
  .back-to-top { right: 16px; bottom: 16px; }
}

/* Mobile (<= 480) */
@media (max-width: 480px) {
  body { font-size: 15px; }
  .container { width: min(100% - 24px, var(--container)); }
  .section { padding: 56px 0; }

  .nav__brand-name { display: none; }

  .hero__title { font-size: 34px; letter-spacing: -0.02em; }
  .hero__actions { flex-direction: column; width: 100%; }
  .hero__actions .btn { width: 100%; }
  .hero__socials a { width: 38px; height: 38px; }

  .skills { grid-template-columns: 1fr; }
  .skill-card { padding: 22px; }

  .section__title { font-size: 28px; }
  .about__grid { grid-template-columns: 1fr; }
  .about__cta { flex-direction: column; }
  .about__cta .btn { width: 100%; }

  .timeline__item { padding-left: 44px; }
  .timeline::before { left: 12px; }
  .timeline__dot { left: 4px; width: 16px; height: 16px; }
  .timeline__card { padding: 18px; }

  .project__body { padding: 20px; }
  .contact__card, .contact__form { padding: 20px; }
}

/* Small mobile (<= 360) */
@media (max-width: 360px) {
  .hero__title { font-size: 30px; }
  .section__title { font-size: 24px; }
  .btn { --btn-px: 18px; font-size: 14px; }
  .skill-card { padding: 18px; }
  .contact__form, .contact__card { padding: 16px; }
}