:root { --course-accent: #ffb84d; --course-soft: #ffe7b8; --course-dark: #633a0a; --orange: #ffb84d; --lime: #c9f45b; --teal: #633a0a; --blue: #235ee7; }

main:focus { outline: none; }

@media (max-width: 760px) {
  .hero h1 { font-size: clamp(46px, 14vw, 62px); }
  .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero-actions .btn { width: 100%; min-width: 0; white-space: normal; text-align: center; }
  .skill-visual { max-width: calc(100vw - 76px); }
  .skill-visual__card { padding: 18px; box-shadow: 7px 8px 0 var(--ink); }
  .skill-visual__row { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding-inline: 10px; }
  .skill-visual__row b { width: 38px; }
}