/* modal.css + reveal.css */
.modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(11, 11, 12, 0.6); backdrop-filter: blur(4px); }
.modal__panel {
  position: relative; background: #fff; border: 2px solid var(--ink); border-radius: 24px;
  box-shadow: 8px 8px 0 var(--ink);
  max-width: 440px; width: 100%; padding: 36px 32px 32px; text-align: center;
  animation: pop 0.25s ease;
}
@keyframes pop { from { transform: scale(0.94) translateY(8px); opacity: 0; } }
.modal__icon {
  width: 72px; height: 72px; border-radius: 22px; margin: 0 auto 18px;
  display: grid; place-items: center; background: var(--ink); color: #fff;
}
.modal__panel h2 { font-size: 1.5rem; margin-bottom: 10px; }
.modal__panel p { font-size: 0.97rem; margin-bottom: 22px; }
.modal__close {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px;
  border-radius: 50%; border: 1.5px solid var(--ink); background: #fff;
  font-size: 1.3rem; line-height: 1; cursor: pointer; font-weight: 800;
}
.modal__close:hover { background: var(--ink); color: #fff; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }