@media (max-width: 560px) {
  .app { width: min(100% - 20px, var(--wrap)); padding-block-start: 16px; }
  .links-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .social-card { min-height: 168px; padding: 14px 10px; }
  .hero-card-body { padding: 22px 16px; }
  .lang-hint { display: none; }
  .copy-row { grid-template-columns: auto 1fr; }
  .copy-btn { grid-column: 1 / -1; justify-content: center; }
  .share-quick-actions { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .links-grid { gap: 8px; }
  .hero-text h1 { font-size: 1.65rem; }
  .avatar { width: 112px; height: 112px; }
  .avatar picture, .avatar img { width: 96px; height: 96px; }
}

@media (max-width: 320px) {
  .links-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-action { width: 100%; justify-content: center; }
}

html[dir="ltr"] .scroll-progress { transform-origin: left center; }
html[dir="rtl"] .scroll-progress { transform-origin: right center; }

@media (min-width: 1024px) {
  .links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ayah-float { inset-inline-end: 28px; }
}

@media (min-width: 1280px) {
  .app { padding-block-start: 36px; }
}

.low-power-mode .bg-aurora span { animation: none; opacity: .16; filter: blur(70px); }