@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; }
  .tutorial-body { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .nav { flex-wrap: nowrap; gap: 0.3rem; }
  .brand img { height: 56px; }
  .nav-toggle {
    display: flex;
    order: 5;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    gap: 5px;
    border-radius: 50%;
    background: rgba(247, 244, 239, 0.95);
    border: 1px solid rgba(80, 69, 56, 0.12);
    box-shadow: 0 18px 38px rgba(80, 69, 56, 0.12);
  }
  .nav-toggle span { width: 20px; }
  body.dark .nav-toggle {
    background: transparent;
    border: 1px solid var(--accent);
    box-shadow: none;
  }
  .nav-links {
    order: 6;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: rgba(247, 244, 239, 0.95);
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    padding: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    box-shadow: none;
    margin-left: 0;
  }
  .nav-links.open { display: flex; }
  body.dark .nav-links { background: var(--surface); }
  .nav-links a {
    display: block;
    width: 100%;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border);
  }
  .nav-actions { order: 3; flex-wrap: nowrap; gap: 0.3rem; margin-left: auto; flex-shrink: 1; min-width: 0; }
  .lang-switch { padding: 0.2rem; flex-shrink: 0; }
  .lang-btn { min-width: 0; padding: 0.32rem 0.65rem; font-size: 0.85rem; white-space: nowrap; }
  .theme-toggle { width: 36px; height: 36px; flex-shrink: 0; }
  .card-grid, .note-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 3rem; }
  .tutorial-card { scroll-margin-top: 80px; }

  body > main,
  body > footer {
    padding: 15px;
  }

  .guide-section {
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .hero-card-inner ul {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  .eyebrow { font-size: 0.9rem; }

  .tutorial-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

@media (max-width: 480px) {
  .container { width: min(100% - 1rem, 1120px); }
  .hero-actions, .tutorial-nav { flex-direction: column; }
  .btn { width: 100%; }
  h1 { font-size: clamp(1.8rem, 7vw, 2.6rem); }
}