/* ODDSSEY — responsive layouts */
@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 88px 0 72px; }
  .tool-layout--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .nav__toggle { display: block; }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px 20px 24px; background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 40%), rgba(11,14,11,0.82); border-bottom: 1px solid var(--border-strong);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 30px 50px -20px rgba(0,0,0,0.8);
    -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
  }
  .nav.is-open .nav__links { visibility: visible; opacity: 1; transform: none; }
  .nav__links a:not(.btn) { padding: 16px 4px; font-size: 17px; border-bottom: 1px solid var(--border); }
  .nav__cta { height: 48px; margin-top: 20px; font-size: 15px; }
  .nav.is-open .nav__toggle span:first-child { top: 21px; transform: rotate(45deg); }
  .nav.is-open .nav__toggle span:last-child { top: 21px; transform: rotate(-45deg); }

  .hero { padding: 64px 0 56px; }
  .page { padding: 32px 0 72px; }
  .tool-header { margin-bottom: 28px; }
  .tool-layout, .tool-layout--3, .tool-layout--main { grid-template-columns: minmax(0, 1fr); }
  .section { padding: 56px 0; }
  .why { grid-template-columns: 1fr; border-top: 0; }
  .why article, .why article + article { padding: 24px 0; border-left: 0; border-top: 1px solid var(--border); }
  .why p { max-width: none; }
  .cta { padding: 56px 24px; }
  .hero::before { width: 520px; height: 420px; margin-left: -260px; top: -200px; }
  .cta::before { width: 420px; margin-left: -210px; }
  .card { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  body::after { width: 88vw; height: 88vw; opacity: 0.1; filter: blur(1px) drop-shadow(0 0 50px rgba(var(--accent-rgb), 0.28)); }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav__links { background: #0B0E0B; }
}

@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .search { flex-wrap: wrap; padding: 8px; }
  .search__icon { margin-left: 10px; }
  .search kbd { display: none; }
  .search .btn { width: 100%; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__nav { flex-wrap: wrap; }
  .cta .btn { width: 100%; }
  .panel { padding: 20px; }
  .panel__actions .btn { width: 100%; }
}