/* --- COMPLETE CSS STYLESHEET (Tailwind Utility Mapping) --- */

/* Layout & Containers */
.container { width: 100%; margin-left: auto; margin-right: auto; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
main { width: 100%; margin: 0 auto; position: relative; padding: 0; }

/* Border Radius */
.rounded-none { border-radius: 0px; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }

/* Shadows */
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }

/* Spacing (Margin & Padding) */
.mb-12 { margin-bottom: 3rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-9 { margin-bottom: 2.25rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 0.75rem; }
.m-9 { margin: 2.25rem; }
.m-6 { margin: 1.5rem; }
.p-0 { padding: 0; }
.p-6 { padding: 1.5rem; }
.p-3 { padding: 0.75rem; }
.p-2 { padding: 0.5rem; }
.pt-16 { padding-top: 4rem; }
.pt-8 { padding-top: 2rem; }
.pt-4 { padding-top: 1rem; }
.pb-12 { padding-bottom: 3rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pb-8 { padding-bottom: 2rem; }
.pb-4 { padding-bottom: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-12 { padding-left: 3rem; padding-right: 3rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }

/* Grid & Flexbox */
.grid { display: grid; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.items-stretch { align-items: stretch; }
.gap-8 { gap: 2rem; }
.gap-6 { gap: 1.5rem; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

/* Typografie */
.text-center { text-align: center; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-6xl { font-size: 3.75rem; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.uppercase { text-transform: uppercase; }
.tracking-widest { letter-spacing: 0.1em; }
.tracking-wide { letter-spacing: 0.025em; }
.italic { font-style: italic; }

/* Kleuren */
.text-red-700 { color: #b91c1c; }
.text-red-600 { color: #dc2626; }
.text-red-800 { color: #991b1b; }
.text-green-800 { color: #065f46; }
.text-green-700 { color: #047857; }
.text-gray-900 { color: #111827; }
.text-gray-700 { color: #374151; }
.text-white { color: #ffffff; }
.text-indigo-200 { color: #c7d2fe; }
.bg-red-100 { background-color: #fee2e2; }
.bg-red-50 { background-color: #fef2f2; }
.bg-green-100 { background-color: #d1fae5; }
.bg-green-50 { background-color: #f0fdf4; }
.bg-red-600 { background-color: #dc2626; }
.bg-indigo-700 { background-color: #4338ca; }
.bg-white { background-color: #ffffff; }

/* Specifieke componenten & Overrides */
.ai-text-gradient { background: linear-gradient(90deg, #dc2626, #4338ca); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-gradient { text-align: center; background: linear-gradient(135deg, #f3f4f6 0%, #ffffff 100%); }
.restricted-overlay { border: 2px dashed #dc2626; display: flex; flex-direction: column; align-items: center; }
.diagram-card { background: white; border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); overflow: hidden; }
.cursor-pointer { cursor: pointer; }
.w-full { width: 100%; }
.h-auto { height: auto; }
.w-16 { width: 4rem; }
.h-16 { height: 4rem; }
.border-b { border-bottom: 1px solid; }
.border-l-4 { border-left: 4px solid; }
.border-red-600 { border-color: #dc2626; }
.border-green-600 { border-color: #059669; }
.z-10 { z-index: 10; }

/* Responsieve Media Queries */
@media (min-width: 768px) {
    main { padding: 1.5rem; }
    .md\:rounded-xl { border-radius: 0.75rem; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:flex-row { flex-direction: row; }
    .md\:px-12 { padding-left: 3rem; padding-right: 3rem; }
    .md\:text-6xl { font-size: 3.75rem; }
    .hero-gradient { border-radius: 0.75rem; }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Hover States & Transitions */
.transition-all { transition: all 0.3s ease; }
.hover\:bg-red-700:hover { background-color: #b91c1c; }
.hover\:scale-105:hover { transform: scale(1.05); }