/* ==========================================================================
   utilities.css — Utility classes
   .center, .mt-2, .mt-3, .visually-hidden, .fade-in, .two-col
   Self-contained: every value is written out (no CSS variables) and every
   selector has its own rule, so changing one block never touches another.
   ========================================================================== */

/* ── .fade-in ── */
.fade-in {
  animation: fadeInUp 0.6s ease both;
}

/* ── .center ── */
.center {
  text-align: center;
}

/* ── .mt-2 ── */
.mt-2 {
  margin-top: 16px;
}

/* ── .mt-3 ── */
.mt-3 {
  margin-top: 28px;
}

/* ── .visually-hidden ── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ── .two-col ── */
.two-col {
  max-width: 1000px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

@media (max-width: 800px) {
  .two-col {
    grid-template-columns: 1fr;
  }

}

/* ── animation: fadeInUp ── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}