/* ==========================================================================
   Tailwind Utility Classes — compiled from index.html usage
   Replaces the full cdn.tailwindcss.com CDN bundle (~126 KB → ~2 KB)
   ========================================================================== */

/* ---------- Preflight subset (matches Tailwind CDN defaults) ---------- */
*, ::before, ::after {
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}
img, video {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Layout ---------- */
.block        { display: block; }
.flex         { display: flex; }
.hidden       { display: none; }
.flex-row     { flex-direction: row; }
.flex-col     { flex-direction: column; }
.flex-nowrap  { flex-wrap: nowrap; }
.items-center { align-items: center; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.gap-2  { gap: 0.5rem; }
.gap-6  { gap: 1.5rem; }
.gap-10 { gap: 2.5rem; }
.gap-20 { gap: 5rem; }

/* ---------- Positioning ---------- */
.absolute { position: absolute; }
.relative { position: relative; }
.z-\[99\] { z-index: 99; }
.bottom-\[30px\] { bottom: 30px; }

/* ---------- Sizing ---------- */
.w-full     { width: 100%; }
.max-h-24   { max-height: 6rem; }
.max-w-\[200px\]  { max-width: 200px; }
.max-w-\[220px\]  { max-width: 220px; }
.max-w-\[1300px\] { max-width: 1300px; }

/* ---------- Spacing ---------- */
.mx-auto      { margin-left: auto; margin-right: auto; }
.mt-10        { margin-top: 2.5rem; }
.mt-\[-16px\] { margin-top: -16px; }
.mt-\[20px\]  { margin-top: 20px; }
.mt-\[100px\] { margin-top: 100px; }
.mr-4         { margin-right: 1rem; }
.mb-\[20px\]  { margin-bottom: 20px; }
.ml-\[20px\]  { margin-left: 20px; }

/* ---------- Typography ---------- */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.font-bold      { font-weight: 700; }
.font-semibold  { font-weight: 600; }
.tracking-\[-2px\] { letter-spacing: -2px; }

.text-\[14px\]  { font-size: 14px; }
.text-\[21px\]  { font-size: 21px; }
.text-\[26px\]  { font-size: 26px; }
.text-\[27px\]  { font-size: 27px; }
.text-\[clamp\(30px\,6vh\,65px\)\]  { font-size: clamp(30px, 6vh, 65px); }
.text-\[clamp\(40px\,8vh\,80px\)\]  { font-size: clamp(40px, 8vh, 80px); }

/* ---------- Colors ---------- */
.text-\[\#0F833A\] { color: #0F833A; }
.text-\[\#253888\] { color: #253888; }

/* ---------- Transforms ---------- */
.-rotate-2 { --tw-rotate: -2deg; transform: rotate(-2deg); }

/* ---------- Animations ---------- */
@keyframes bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}
.animate-\[bounce_2s_ease-in-out_infinite\] {
  animation: bounce 2s ease-in-out infinite;
}

/* ---------- Responsive: lg (≥ 1024px) ---------- */
@media (min-width: 1024px) {
  .lg\:gap-6 { gap: 1.5rem; }
}

/* ---------- Responsive: xl (≥ 1280px) ---------- */
@media (min-width: 1280px) {
  .xl\:gap-10 { gap: 2.5rem; }
  .xl\:justify-between { justify-content: space-between; }
}