/* ===========================================
   Extra Tailwind utility classes
   Missing from compiled style.css
   =========================================== */

/* ---- Spacing ---- */
.mb-0 { margin-bottom: 0; }
.mb-10 { margin-bottom: 2.5rem; }
.mt-10 { margin-top: 2.5rem; }
.mr-1 { margin-right: 0.25rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
.pb-4 { padding-bottom: 1rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }

/* ---- Sizing ---- */
.h-48 { height: 12rem; }
.h-full { height: 100%; }
.w-px { width: 1px; }
.shrink-0 { flex-shrink: 0; }

/* ---- Space between ---- */
.space-y-0 > :not(:last-child) { margin-bottom: 0; }

/* ---- Typography ---- */
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.list-decimal { list-style-type: decimal; }
.list-inside { list-style-position: inside; }

/* ---- Borders ---- */
.border-y { border-top-width: 1px; border-bottom-width: 1px; }
.border-collapse { border-collapse: collapse; }
.rounded-r-xl { border-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem; }
.rounded-r-2xl { border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; }

/* ---- Transitions ---- */
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }

/* ---- Background colors ---- */
.bg-slate-700 { background-color: #334155; }
.bg-slate-700\/50 { background-color: rgba(51, 65, 85, 0.5); }
.bg-amber-50 { background-color: #fffbeb; }
.bg-amber-100 { background-color: #fef3c7; }
.bg-amber-500 { background-color: #f59e0b; }
.bg-cyan-600 { background-color: #0891b2; }
.bg-emerald-50 { background-color: #ecfdf5; }
.bg-emerald-100 { background-color: #d1fae5; }
.bg-emerald-500 { background-color: #10b981; }
.bg-emerald-500\/20 { background-color: rgba(16, 185, 129, 0.2); }
.bg-green-900\/30 { background-color: rgba(20, 83, 45, 0.3); }
.bg-indigo-100 { background-color: #e0e7ff; }
.bg-primary-500 { background-color: #3b82f6; }
.bg-red-900\/30 { background-color: rgba(127, 29, 29, 0.3); }
.bg-yellow-500 { background-color: #eab308; }

/* ---- Border colors ---- */
.border-amber-200 { border-color: #fde68a; }
.border-amber-500 { border-color: #f59e0b; }
.border-amber-500\/30 { border-color: rgba(245, 158, 11, 0.3); }
.border-emerald-200 { border-color: #a7f3d0; }
.border-emerald-500\/30 { border-color: rgba(16, 185, 129, 0.3); }
.border-primary-200 { border-color: #bfdbfe; }
.border-primary-400 { border-color: #60a5fa; }
.border-red-300 { border-color: #fca5a5; }
.border-slate-600 { border-color: #475569; }

/* ---- Text colors ---- */
.text-amber-200 { color: #fde68a; }
.text-amber-400 { color: #fbbf24; }
.text-amber-600 { color: #d97706; }
.text-amber-700 { color: #b45309; }
.text-amber-800 { color: #92400e; }
.text-emerald-400 { color: #34d399; }
.text-emerald-600 { color: #059669; }
.text-emerald-700 { color: #047857; }
.text-emerald-800 { color: #065f46; }
.text-indigo-600 { color: #4f46e5; }
.text-indigo-700 { color: #4338ca; }
.text-orange-400 { color: #fb923c; }
.text-primary-50 { color: #eff6ff; }
.text-primary-800 { color: #1e40af; }
.text-primary-900 { color: #1e3a8a; }

/* ---- Hover: background ---- */
.hover\:bg-green-700:hover { background-color: #15803d; }
.hover\:bg-primary-500:hover { background-color: #3b82f6; }

/* ---- Hover: text ---- */
.hover\:text-amber-400:hover { color: #fbbf24; }
.hover\:text-blue-100:hover { color: #dbeafe; }
.hover\:text-blue-700:hover { color: #1d4ed8; }
.hover\:text-blue-800:hover { color: #1e40af; }
.hover\:underline:hover { text-decoration-line: underline; }

/* ---- Hover: border ---- */
.hover\:border-red-300:hover { border-color: #fca5a5; }

/* ---- Group hover ---- */
.group:hover .group-hover\:text-blue-700 { color: #1d4ed8; }

/* ---- Gradient from ---- */
.from-amber-50 { --tw-gradient-from: #fffbeb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 251, 235, 0)); }
.from-amber-500 { --tw-gradient-from: #f59e0b; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245, 158, 11, 0)); }
.from-blue-500 { --tw-gradient-from: #3b82f6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0)); }
.from-cyan-500 { --tw-gradient-from: #06b6d4; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(6, 182, 212, 0)); }
.from-emerald-500 { --tw-gradient-from: #10b981; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(16, 185, 129, 0)); }
.from-green-500 { --tw-gradient-from: #22c55e; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(34, 197, 94, 0)); }
.from-indigo-500 { --tw-gradient-from: #6366f1; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(99, 102, 241, 0)); }
.from-orange-500 { --tw-gradient-from: #f97316; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 115, 22, 0)); }
.from-purple-500 { --tw-gradient-from: #a855f7; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(168, 85, 247, 0)); }
.from-red-500 { --tw-gradient-from: #ef4444; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 68, 68, 0)); }
.from-red-700 { --tw-gradient-from: #b91c1c; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(185, 28, 28, 0)); }
.from-sky-600 { --tw-gradient-from: #0284c7; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(2, 132, 199, 0)); }

/* ---- Gradient to ---- */
.to-amber-500 { --tw-gradient-to: #f59e0b; }
.to-blue-400 { --tw-gradient-to: #60a5fa; }
.to-blue-500 { --tw-gradient-to: #3b82f6; }
.to-cyan-500 { --tw-gradient-to: #06b6d4; }
.to-emerald-400 { --tw-gradient-to: #34d399; }
.to-emerald-500 { --tw-gradient-to: #10b981; }
.to-orange-500 { --tw-gradient-to: #f97316; }
.to-pink-500 { --tw-gradient-to: #ec4899; }
.to-red-400 { --tw-gradient-to: #f87171; }
.to-red-500 { --tw-gradient-to: #ef4444; }
.to-teal-500 { --tw-gradient-to: #14b8a6; }
.to-violet-500 { --tw-gradient-to: #8b5cf6; }
.to-yellow-50 { --tw-gradient-to: #fefce8; }
.to-yellow-500 { --tw-gradient-to: #eab308; }

/* ---- Responsive: md ---- */
@media (min-width: 768px) {
  .md\:block { display: block; }
  .md\:items-center { align-items: center; }
}

/* ---- Responsive: lg ---- */
@media (min-width: 1024px) {
  .lg\:gap-8 { gap: 2rem; }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---- Prose typography ---- */
.prose-lg { font-size: 1.125rem; line-height: 1.7778; }
.prose-slate { --tw-prose-body: #334155; --tw-prose-headings: #0f172a; }
.lead { font-size: 1.25rem; line-height: 1.6; color: #475569; }

/* ---- Extra missing colors ---- */
.bg-amber-900\/30 { background-color: rgba(120, 53, 15, 0.3); }

/* ---- TikTok gradient colors (arbitrary values) ---- */
.from-\[\#ff0050\] { --tw-gradient-from: #ff0050; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 0, 80, 0)); }
.to-\[\#00f2ea\] { --tw-gradient-to: #00f2ea; }

/* ---- FAQ accordion (index.php) ---- */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.faq-item.active .faq-answer {
    max-height: 500px;
}
.faq-item.active .faq-icon {
    transform: rotate(45deg);
}