@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

/* ===================== CSS VARIABLES ===================== */
:root {
  --background: hsl(220, 30%, 97%);
  --foreground: hsl(220, 40%, 10%);
  --card: hsl(0, 0%, 100%);
  --secondary: hsl(220, 20%, 94%);
  --secondary-foreground: hsl(220, 40%, 10%);
  --muted: hsl(220, 20%, 94%);
  --muted-foreground: hsl(220, 10%, 50%);
  --accent: hsl(20, 95%, 55%);
  --accent-light: hsl(20, 95%, 55%, 0.10);
  --accent-border: hsl(20, 95%, 55%, 0.20);
  --border: hsl(220, 20%, 88%);
  --dark-bg: hsl(220, 40%, 10%);
  --dark-bg2: hsl(220, 40%, 18%);
  --success: hsl(150, 75%, 38%);
  --radius: 0.75rem;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0/0.05);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0/0.10), 0 8px 10px -6px rgb(0 0 0/0.10);
}

/* ===================== RESET & BASE ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-color: var(--border); }
html { scroll-behavior: smooth; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Sora', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 { font-family: 'Sora', sans-serif; line-height: 1.2; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
select, input, textarea { font-family: inherit; }
ul { list-style: none; }

/* ===================== LAYOUT UTILITIES ===================== */
.section-container { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { .section-container { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .section-container { padding-left: 2rem; padding-right: 2rem; } }

.section-padding { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 640px) { .section-padding { padding-top: 5rem; padding-bottom: 5rem; } }
@media (min-width: 1024px) { .section-padding { padding-top: 6rem; padding-bottom: 6rem; } }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.shrink-0 { flex-shrink: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-14 { gap: 3.5rem; }
.gap-16 { gap: 4rem; }
.min-h-screen { min-height: 100vh; }
.overflow-hidden { overflow: hidden; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.z-50 { z-index: 50; }

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .sm\:flex-row { flex-direction: row; }
}
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .lg\:col-span-1 { grid-column: span 1; }
  .lg\:hidden { display: none; }
}

/* ===================== TYPOGRAPHY ===================== */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.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-5xl { font-size: 3rem; }
.text-7xl { font-size: 4.5rem; }
.text-8xl { font-size: 6rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* ===================== COLORS ===================== */
.text-white { color: white; }
.text-foreground { color: var(--foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-accent { color: var(--accent); }
.text-accent\/80 { color: hsl(20, 95%, 55%, 0.8); }
.text-green-500 { color: #22c55e; }
.text-green-600 { color: #16a34a; }
.text-red-500 { color: #ef4444; }
.text-red-600 { color: #dc2626; }
.text-emerald-600 { color: #059669; }
.text-blue-500 { color: #3b82f6; }
.text-blue-600 { color: #2563eb; }
.text-blue-700 { color: #1d4ed8; }
.text-purple-700 { color: #7c3aed; }
.text-green-700 { color: #15803d; }
.text-orange-600 { color: #ea580c; }
.text-yellow-600 { color: #ca8a04; }
.text-orange-500 { color: #f97316; }

/* ===================== BG COLORS ===================== */
.bg-white { background-color: white; }
.bg-secondary { background-color: var(--secondary); }
.bg-secondary\/40 { background-color: hsl(220, 20%, 94%, 0.4); }
.bg-secondary\/50 { background-color: hsl(220, 20%, 94%, 0.5); }
.bg-secondary\/60 { background-color: hsl(220, 20%, 94%, 0.6); }
.bg-dark { background-color: var(--dark-bg); }
.bg-accent { background-color: var(--accent); }
.bg-accent\/10 { background-color: hsl(20, 95%, 55%, 0.1); }
.bg-accent\/20 { background-color: hsl(20, 95%, 55%, 0.2); }
.bg-green-100 { background-color: #dcfce7; }
.bg-red-100 { background-color: #fee2e2; }
.bg-blue-50 { background-color: #eff6ff; }
.bg-purple-50 { background-color: #f5f3ff; }
.bg-green-50 { background-color: #f0fdf4; }
.bg-orange-50 { background-color: #fff7ed; }
.bg-red-50 { background-color: #fef2f2; }
.bg-yellow-50 { background-color: #fefce8; }
.bg-emerald-50 { background-color: #ecfdf5; }
.bg-emerald-600 { background-color: #059669; }
.bg-red-600 { background-color: #dc2626; }
.bg-green-500 { background-color: #22c55e; }
.bg-emerald-500 { background-color: #10b981; }
.bg-whatsapp { background-color: #25D366; }

/* ===================== BORDERS ===================== */
.border { border: 1px solid var(--border); }
.border-2 { border: 2px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border); }
.border-y { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.border-border { border-color: var(--border); }
.border-accent\/20 { border-color: hsl(20, 95%, 55%, 0.2); }
.border-blue-200 { border-color: #bfdbfe; }
.border-purple-200 { border-color: #ddd6fe; }
.border-green-200 { border-color: #bbf7d0; }
.border-orange-100 { border-color: #ffedd5; }
.border-yellow-200 { border-color: #fef08a; }
.border-red-200 { border-color: #fecaca; }
.border-emerald-200 { border-color: #a7f3d0; }
.border-dashed { border-style: dashed; }

/* ===================== SPACING ===================== */
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-7 { padding: 1.75rem; }
.p-8 { padding: 2rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.pl-7 { padding-left: 1.75rem; }
.pl-11 { padding-left: 2.75rem; }
.pt-1 { padding-top: 0.25rem; }
.pt-4 { padding-top: 1rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-8 { padding-top: 2rem; }
.pt-16 { padding-top: 4rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pb-16 { padding-bottom: 4rem; }
.pb-20 { padding-bottom: 5rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-7 { margin-top: 1.75rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.ml-1\.5 { margin-left: 0.375rem; }
.ml-3 { margin-left: 0.75rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ===================== SIZING ===================== */
.w-1 { width: 0.25rem; }
.w-3 { width: 0.75rem; }
.w-3\.5 { width: 0.875rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-7 { width: 1.75rem; }
.w-8 { width: 2rem; }
.w-9 { width: 2.25rem; }
.w-10 { width: 2.5rem; }
.w-11 { width: 2.75rem; }
.w-12 { width: 3rem; }
.w-14 { width: 3.5rem; }
.w-16 { width: 4rem; }
.w-full { width: 100%; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.h-1 { height: 0.25rem; }
.h-1\.5 { height: 0.375rem; }
.h-2 { height: 0.5rem; }
.h-3 { height: 0.75rem; }
.h-3\.5 { height: 0.875rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-7 { height: 1.75rem; }
.h-8 { height: 2rem; }
.h-9 { height: 2.25rem; }
.h-10 { height: 2.5rem; }
.h-11 { height: 2.75rem; }
.h-12 { height: 3rem; }
.h-14 { height: 3.5rem; }
.h-16 { height: 4rem; }
.h-full { height: 100%; }
.min-h-\[80vh\] { min-height: 80vh; }
.aspect-video { aspect-ratio: 16/9; }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }

/* ===================== COMPONENT CLASSES ===================== */
.chip {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--secondary);
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  font-family: 'DM Mono', monospace;
}
.chip-accent {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: hsl(20, 95%, 55%, 0.1);
  color: var(--accent);
  border: 1px solid hsl(20, 95%, 55%, 0.2);
}
.gradient-text {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(135deg, var(--foreground) 0%, var(--accent) 100%);
}
.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: white;
  border-radius: 0.5rem;
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
  text-align: center;
  cursor: pointer;
  border: none;
}
.btn-primary:hover { background: hsl(20, 95%, 48%); transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-outline {
  display: inline-block;
  border: 2px solid var(--border);
  color: var(--foreground);
  border-radius: 0.5rem;
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.2s ease;
  text-align: center;
  cursor: pointer;
  background: transparent;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-outline:active { transform: scale(0.98); }
.card-hover { transition: all 0.3s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.data-font { font-family: 'DM Mono', monospace; font-variant-numeric: tabular-nums; }

/* ===================== ANIMATIONS ===================== */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 0 hsl(150, 75%, 38%, 0.4); } 50% { box-shadow: 0 0 0 8px hsl(150, 75%, 38%, 0); } }

.animate-fade-in-up { animation: fadeInUp 0.6s ease both; }
.animate-fade-in { animation: fadeIn 0.4s ease both; }
.animate-scale-in { animation: scaleIn 0.3s ease both; }
.animate-pulse-glow { animation: pulseGlow 2s ease-in-out infinite; }
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* ===================== NAVBAR ===================== */
#navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.3s ease;
}
#navbar.scrolled { box-shadow: 0 1px 8px 0 rgb(0 0 0/0.08); }
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}
.nav-logo { display: flex; align-items: center; gap: 0.75rem; }
.nav-logo-icon {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 0.75rem;
  background: var(--accent);
  color: white;
  transition: transform 0.2s;
}
.nav-logo:hover .nav-logo-icon { transform: scale(1.05); }
.nav-logo-text { line-height: 1; }
.nav-logo-text .brand-name { font-size: 1rem; font-weight: 700; color: var(--foreground); display: block; }
.nav-logo-text .brand-sub { font-size: 0.625rem; font-weight: 600; color: var(--muted-foreground); letter-spacing: 0.1em; text-transform: uppercase; display: block; }
.nav-desktop { display: flex; align-items: center; gap: 0.25rem; }
@media (max-width: 1023px) { .nav-desktop { display: none !important; } }
.nav-link {
  position: relative;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  transition: all 0.2s;
}
.nav-link:hover { color: var(--foreground); background: var(--secondary); }
.nav-link.active { color: var(--accent); background: hsl(20,95%,55%,0.08); font-weight: 600; }
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.25rem; height: 0.25rem;
  border-radius: 50%;
  background: var(--accent);
}
.nav-mobile-btn {
  display: none;
  padding: 0.5rem;
  border-radius: 0.5rem;
  color: var(--foreground);
  transition: background 0.2s;
}
.nav-mobile-btn:hover { background: var(--secondary); }
@media (max-width: 1023px) { .nav-mobile-btn { display: block; } }
#mobile-menu {
  display: none;
  border-top: 1px solid var(--border);
  background: white;
  animation: fadeIn 0.2s ease;
}
#mobile-menu.open { display: block; }
.mobile-menu-inner { padding: 1rem 0; }
.mobile-nav-link {
  display: flex; align-items: center;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  transition: background 0.2s;
  margin-bottom: 2px;
}
.mobile-nav-link:hover { background: var(--secondary); }
.mobile-nav-link.active { background: hsl(20,95%,55%,0.1); color: var(--accent); font-weight: 600; }
.mobile-enroll { display: block; margin-top: 0.5rem; }

/* ===================== FOOTER ===================== */
footer {
  background: var(--dark-bg);
  color: white;
}
.footer-brand p { color: rgba(255,255,255,0.6); }
.footer-cert-badge {
  padding: 0.25rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.375rem;
  color: rgba(255,255,255,0.5);
}
.footer-heading { font-size: 0.75rem; font-weight: 700; margin-bottom: 1.25rem; color: rgba(255,255,255,0.9); text-transform: uppercase; letter-spacing: 0.05em; }
.footer-link { display: flex; align-items: center; font-size: 0.875rem; color: rgba(255,255,255,0.6); margin-bottom: 0.625rem; transition: color 0.2s; }
.footer-link:hover { color: white; }
.footer-contact-item { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; color: rgba(255,255,255,0.6); margin-bottom: 1rem; }
.footer-contact-item a:hover { color: white; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.5rem; margin-top: 3rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; font-size: 0.75rem; color: rgba(255,255,255,0.3); text-align: center; }
@media (min-width: 640px) { .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; } }
.footer-hours-box { margin-top: 2rem; padding: 1rem; border-radius: 0.75rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }

/* ===================== FLOATING BUTTONS ===================== */
#floating-btns { position: fixed; bottom: 1.5rem; right: 1.25rem; z-index: 200; display: flex; flex-direction: column; gap: 0.75rem; }
.float-phone { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--accent); color: white; box-shadow: 0 4px 12px hsl(20,95%,55%,0.4); transition: all 0.2s; }
.float-phone:hover { transform: scale(1.1); }
.float-wa { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #25D366; color: white; box-shadow: 0 4px 12px rgba(37,211,102,0.4); transition: all 0.2s; animation: pulseGlow 2s ease-in-out infinite; }
.float-wa:hover { transform: scale(1.1); }

/* ===================== FORMS ===================== */
.form-input {
  width: 100%;
  padding: 0.625rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--secondary);
  font-size: 0.875rem;
  color: var(--foreground);
  transition: all 0.2s;
  outline: none;
  appearance: none;
}
.form-input::placeholder { color: var(--muted-foreground); }
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px hsl(20,95%,55%,0.15); }
textarea.form-input { resize: none; }
select.form-input { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.25rem; padding-right: 2.5rem; cursor: pointer; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 480px) { .form-grid-2 { grid-template-columns: 1fr; } }
.form-error { font-size: 0.75rem; color: #ef4444; margin-top: 0.25rem; }
.form-success { text-align: center; padding: 3rem 1rem; }
.form-success-icon { width: 4rem; height: 4rem; border-radius: 50%; background: #dcfce7; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }

/* ===================== INQUIRY POPUP ===================== */
#inquiry-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(10,14,26,0.6);
  backdrop-filter: blur(8px);
}
#inquiry-overlay.open { display: flex; }
#inquiry-modal {
  position: relative;
  width: 100%;
  max-width: 28rem;
  background: white;
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgb(0 0 0/0.25);
  overflow: hidden;
  animation: scaleIn 0.3s ease both;
}
.inquiry-top-bar { height: 0.375rem; width: 100%; background: linear-gradient(to right, var(--accent), #fb923c, #facc15); }
.inquiry-header { padding: 1.5rem 2rem 1rem; background: linear-gradient(135deg, var(--dark-bg), var(--dark-bg2)); color: white; }
.inquiry-header-badge { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.inquiry-body { padding: 1.5rem 2rem; }
.popup-close-btn {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 2rem; height: 2rem;
  border-radius: 0.5rem;
  background: rgba(255,255,255,0.1);
  color: white;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
  cursor: pointer;
  border: none;
}
.popup-close-btn:hover { background: rgba(255,255,255,0.2); }

/* ===================== HERO ===================== */
.hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 9999px; background: hsl(20,95%,55%,0.1); border: 1px solid hsl(20,95%,55%,0.2); color: var(--accent); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1.5rem; }
.hero-features { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.hero-feature { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }

/* ===================== STATS BAND ===================== */
.stats-band { background: var(--dark-bg); }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-cell { padding: 2rem; text-align: center; border-right: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }
.stat-cell:nth-child(2n) { border-right: none; }
@media (min-width: 1024px) { .stat-cell:nth-child(2n) { border-right: 1px solid rgba(255,255,255,0.1); } .stat-cell:nth-child(4n) { border-right: none; } }
.stat-value { font-size: 1.875rem; font-weight: 800; color: white; font-family: 'DM Mono', monospace; }
.stat-label { font-size: 0.75rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.25rem; }

/* ===================== COURSE CARD ===================== */
.course-card { border-radius: 1rem; border: 1px solid var(--border); background: white; padding: 1.5rem; display: flex; flex-direction: column; transition: all 0.3s ease; }
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.course-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 1rem; }
.category-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 600; border: 1px solid; text-transform: capitalize; }
.cat-development { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.cat-design { background: #f5f3ff; color: #7c3aed; border-color: #ddd6fe; }
.cat-data { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.cat-professional { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.cat-engineering { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.cat-accounting { background: #fefce8; color: #a16207; border-color: #fef08a; }
.discount-badge { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 0.375rem; font-size: 0.625rem; font-weight: 700; background: hsl(20,95%,55%,0.1); color: var(--accent); border: 1px solid hsl(20,95%,55%,0.2); margin-bottom: 0.5rem; }
.course-accordion-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 0;
  font-size: 0.875rem; font-weight: 600;
  color: var(--foreground);
  background: none; border: none; cursor: pointer;
  transition: color 0.2s;
}
.course-accordion-btn:hover { color: var(--accent); }
.accordion-icon { transition: transform 0.2s; display: inline-block; }
.accordion-icon.open { transform: rotate(180deg); }
.course-syllabus { display: none; padding-top: 1rem; }
.course-syllabus.open { display: block; animation: fadeIn 0.3s ease; }
.syllabus-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.syllabus-section-title { font-size: 0.6875rem; font-weight: 700; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.bullet-dot { width: 0.25rem; height: 0.25rem; border-radius: 50%; display: inline-block; flex-shrink: 0; margin-top: 0.375rem; }

/* ===================== GALLERY ===================== */
.gallery-grid { columns: 2; gap: 1rem; }
@media (min-width: 768px) { .gallery-grid { columns: 3; } }
@media (min-width: 1024px) { .gallery-grid { columns: 4; } }
.gallery-item { break-inside: avoid; position: relative; border-radius: 0.75rem; overflow: hidden; border: 1px solid var(--border); cursor: pointer; margin-bottom: 1rem; }
.gallery-item img { width: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent, transparent); opacity: 0; transition: opacity 0.3s; display: flex; align-items: flex-end; padding: 0.75rem; }
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-overlay p { font-size: 0.75rem; font-weight: 500; color: white; }
.gallery-zoom-icon { position: absolute; top: 0.5rem; right: 0.5rem; width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; background: rgba(255,255,255,0.2); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
.gallery-item:hover .gallery-zoom-icon { opacity: 1; }
/* Lightbox */
#lightbox { display: none; position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,0.9); align-items: center; justify-content: center; padding: 1rem; }
#lightbox.open { display: flex; animation: fadeIn 0.2s ease; }
#lightbox-content { max-width: 56rem; width: 100%; animation: scaleIn 0.3s ease; }
#lightbox-content img { width: 100%; max-height: 80vh; object-fit: contain; border-radius: 0.75rem; }
#lightbox-caption { text-align: center; color: rgba(255,255,255,0.7); font-size: 0.875rem; margin-top: 0.75rem; }
#lightbox-close { position: absolute; top: 1.25rem; right: 1.25rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255,255,255,0.1); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; border: none; }
#lightbox-close:hover { background: rgba(255,255,255,0.2); }

/* ===================== RESULT PAGE ===================== */
.result-card { border-radius: 1rem; border: 2px solid; overflow: hidden; }
.result-card.pass { border-color: #a7f3d0; background: hsl(152, 81%, 96%, 0.5); }
.result-card.fail { border-color: #fecaca; background: hsl(0, 86%, 97%, 0.5); }
.result-status-bar { padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; color: white; }
.result-status-bar.pass { background: #059669; }
.result-status-bar.fail { background: #dc2626; }
.result-progress { width: 100%; height: 0.5rem; border-radius: 9999px; background: var(--secondary); overflow: hidden; }
.result-progress-fill { height: 100%; border-radius: 9999px; transition: width 1s ease; }
.result-progress-fill.pass { background: #10b981; }
.result-progress-fill.fail { background: #ef4444; }
.result-row { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.result-row:last-child { border-bottom: none; }

/* ===================== ADMIN PAGE ===================== */
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.admin-table th { background: var(--secondary); padding: 0.75rem 1rem; text-align: left; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.admin-table td { padding: 0.875rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tr:hover td { background: var(--secondary); }
.badge-pass { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; background: #dcfce7; color: #15803d; }
.badge-fail { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; background: #fee2e2; color: #dc2626; }
.admin-card { background: white; border-radius: 1rem; border: 1px solid var(--border); overflow: hidden; }
.admin-card-header { background: var(--dark-bg); color: white; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; }
.admin-tab { padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 600; border-bottom: 2px solid transparent; color: var(--muted-foreground); background: none; cursor: pointer; transition: all 0.2s; }
.admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.admin-tab-panel { display: none; padding: 1.5rem; }
.admin-tab-panel.active { display: block; }
.stat-box { background: white; border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.25rem; }
.stat-box-val { font-size: 2rem; font-weight: 800; font-family: 'DM Mono', monospace; }
.stat-box-label { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.25rem; }

/* ===================== PAGE HERO ===================== */
.page-hero { padding-top: 4rem; padding-bottom: 3rem; }
@media (min-width: 1024px) { .page-hero { padding-top: 5rem; } }

/* ===================== FILTER BUTTONS ===================== */
.filter-btn {
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.2s;
  background: white;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  cursor: pointer;
}
.filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.filter-btn.active { background: var(--accent); color: white; border-color: var(--accent); box-shadow: var(--shadow-sm); }

/* ===================== CONTACT MAP ===================== */
.map-wrapper { border-radius: 1rem; overflow: hidden; border: 1px solid var(--border); aspect-ratio: 16/9; }
.map-wrapper iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ===================== TIMELINE ===================== */
.timeline-item { display: flex; gap: 1.25rem; }
.timeline-dot { display: flex; flex-direction: column; align-items: center; }
.timeline-circle { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: hsl(20,95%,55%,0.1); border: 2px solid hsl(20,95%,55%,0.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.timeline-line { width: 1px; flex: 1; background: var(--border); margin: 0.25rem 0; }
.timeline-content { padding-bottom: 1.5rem; }
.timeline-year { font-size: 0.75rem; font-weight: 700; color: var(--accent); font-family: 'DM Mono', monospace; }
.timeline-event { font-size: 0.875rem; color: var(--foreground); font-weight: 500; }

/* ===================== DARK INFO BOX ===================== */
.dark-box { background: var(--dark-bg); color: white; border-radius: 1rem; padding: 1.5rem; }
.dark-box-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dark-stat-val { font-size: 1.5rem; font-weight: 800; font-family: 'DM Mono', monospace; color: white; }
.dark-stat-label { font-size: 0.75rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.125rem; }

/* ===================== SEARCH RESULT SECTION ===================== */
.search-hint { margin-top: 2.5rem; max-width: 42rem; margin-left: auto; margin-right: auto; padding: 1.25rem; border-radius: 1rem; background: var(--secondary); border: 1px solid var(--border); }

/* ===================== PAGE NOT FOUND ===================== */
.not-found-num { font-size: 6rem; font-weight: 900; color: hsl(20,95%,55%,0.2); font-family: 'DM Mono', monospace; line-height: 1; margin-bottom: 1rem; }

/* ===================== RESPONSIVE FIXES ===================== */
@media (max-width: 640px) {
  .hero-h1 { font-size: 2.5rem !important; }
  .section-padding { padding-top: 3rem; padding-bottom: 3rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid-2 { grid-template-columns: 1fr; }
}
@media (min-width: 640px) {
  .sm\:text-5xl { font-size: 3rem; }
  .sm\:text-6xl { font-size: 3.75rem; }
  .sm\:inline-flex { display: inline-flex; }
}
@media (min-width: 1024px) {
  .lg\:text-7xl { font-size: 4.5rem; }
  .lg\:pt-24 { padding-top: 6rem; }
  .lg\:pb-20 { padding-bottom: 5rem; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ===================== MISC ===================== */
.pointer-events-none { pointer-events: none; }
.cursor-pointer { cursor: pointer; }
.opacity-0 { opacity: 0; }
.overflow-x-auto { overflow-x: auto; }
.whitespace-nowrap { white-space: nowrap; }
.shadow-xl { box-shadow: var(--shadow-xl); }
.backdrop-blur { backdrop-filter: blur(8px); }
.transition-all { transition: all 0.2s ease; }
.transition-colors { transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
.transition-transform { transition: transform 0.2s; }
.transition-opacity { transition: opacity 0.2s; }
.hidden { display: none !important; }
.block { display: block; }
.inline-flex { display: inline-flex; }
.col-span-2 { grid-column: span 2; }
@media (max-width: 480px) { .col-span-2 { grid-column: span 1; } }
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.highlight-band { background: rgba(255,255,255,0.05); }

/* ============================== NAV DROPDOWN ============================== */
.nav-dropdown { position: relative; display: inline-block; }
/* Bridge so cursor can move from trigger to menu without closing */
.nav-dropdown::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%;
  height: 10px; display: none;
}
.nav-dropdown:hover::after,
.nav-dropdown.open::after { display: block; }

button.nav-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 0; cursor: pointer;
  font-family: inherit; line-height: 1;
  /* inherit .nav-link sizing */
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  transition: all 0.2s;
}
button.nav-dropdown-trigger:hover {
  color: var(--foreground); background: var(--secondary);
}
.nav-dropdown.open > button.nav-dropdown-trigger,
.nav-dropdown:hover > button.nav-dropdown-trigger {
  color: var(--foreground); background: var(--secondary);
}
.nav-dropdown.open .nav-dropdown-trigger svg,
.nav-dropdown:hover .nav-dropdown-trigger svg { transform: rotate(180deg); }
.nav-dropdown.active > button.nav-dropdown-trigger {
  color: var(--accent); background: hsl(20,95%,55%,0.08); font-weight: 600;
}

.nav-dropdown-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 220px; padding: 0.4rem;
  background: #fff; color: var(--foreground);
  border: 1px solid var(--border); border-radius: 0.75rem;
  box-shadow: 0 16px 40px -10px rgba(0,0,0,0.22), 0 4px 12px -4px rgba(0,0,0,0.08);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  z-index: 1000;
}
.nav-dropdown.open .nav-dropdown-menu,
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
.nav-dropdown-item {
  display: block; padding: 0.6rem 0.9rem; border-radius: 0.5rem;
  font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground);
  text-decoration: none; transition: all 0.15s; white-space: nowrap;
}
.nav-dropdown-item:hover { background: var(--secondary); color: var(--foreground); }
.nav-dropdown-item.active { background: hsl(20,95%,55%,0.1); color: var(--accent); font-weight: 600; }

/* Mobile group */
.mobile-nav-group { display: flex; flex-direction: column; margin: 0.25rem 0; }
.mobile-nav-group-label {
  padding: 0.6rem 1rem 0.35rem;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted-foreground); font-weight: 700;
}
.mobile-nav-sub { padding-left: 1.75rem !important; }