/* === BEGIN COURSES SECTION STYLES (scoped to #courses) === */
#courses {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, rgba(12,12,12,0.95), rgba(26,26,46,0.95));
}
#courses .container {
  max-width: 1200px;
  margin: 0 auto;
}
#courses .section-header {
  text-align: center;
  margin-bottom: 2rem;
}
#courses .section-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  color: #fff;
}
#courses .section-subtitle {
  color: #cbd5e1;
  max-width: 820px;
  margin: 0.5rem auto 0;
}
#courses .grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 1024px) { #courses .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { #courses .grid { grid-template-columns: 1fr; } }

/* Card */
#courses .course-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(17, 24, 39, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 20px 40px rgba(0,0,0,0.35);
  transform-style: preserve-3d;
}
#courses .course-media {
  position: relative; height: 180px; overflow: hidden; background: #0b1020;
}
#courses .course-media img, #courses .course-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
#courses .badge {
  position: absolute; top: 12px; left: 12px;
  background: linear-gradient(135deg, #f59e0b, #8b5cf6);
  color: #000; font-weight: 800; font-size: 0.75rem;
  padding: 6px 10px; border-radius: 999px;
}
#courses .course-body { padding: 1rem; color: #e5e7eb; }
#courses .course-title { color: #fff; font-weight: 800; font-size: 1.2rem; margin: 0 0 .25rem; }
#courses .course-meta { display: flex; gap: .75rem; font-size: .85rem; color: #cbd5e1; }
#courses .course-meta i { color: #fbbf24; }
#courses .course-cta { display: flex; gap: .5rem; margin-top: .875rem; }
#courses .btn {
  appearance: none; border: none; cursor: pointer;
  padding: .6rem .9rem; border-radius: 10px; font-weight: 700; font-size: .9rem;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
#courses .btn-primary { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #000; box-shadow: 0 6px 18px rgba(251,191,36,.35); }
#courses .btn-secondary { background: transparent; color: #fbbf24; border: 2px solid #fbbf24; }
#courses .btn:hover { transform: translateY(-2px); }

/* Decorative accent */
#courses .course-card::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(500px 200px at 0% 0%, rgba(251,191,36,0.08), transparent 60%),
              radial-gradient(600px 240px at 100% 100%, rgba(139,92,246,0.08), transparent 60%);
}
/* === END COURSES SECTION STYLES === */