*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --clr-bg: #0f0f23;
  --clr-overlay: rgba(15, 15, 35, 0.85);
  --clr-text-light: #e6edf3;
  --clr-green: #10b981;
  --clr-blue: #3b82f6;
  --clr-purple: #8b5cf6;
  --clr-teal: #06b6d4;
  --transition-speed: 0.35s;
}

body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
  color: var(--clr-text-light);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem 4rem;
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--clr-overlay);
  z-index: 0;
  pointer-events: none;
  backdrop-filter: saturate(120%) blur(4px);
}

main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  padding-bottom: 3rem;
}

header {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 3rem;
}

.c-logo {
  width: 90px;
  filter: drop-shadow(0 0 5px var(--clr-green));
  margin-bottom: 1rem;
  transition: transform var(--transition-speed);
  cursor: pointer;
}

.c-logo:hover {
  transform: rotate(15deg) scale(1.1);
  filter: drop-shadow(0 0 12px var(--clr-green));
}

h1 {
  font-weight: 700;
  font-size: 3rem;
  color: var(--clr-text-light);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 1px;
  user-select: none;
}

h2 {
  font-size: 2.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  user-select: none;
  transition: color var(--transition-speed);
}

section.course-level {
  position: relative;
  border-radius: 20px;
  padding: 12.10rem 3rem 3rem;
  background: linear-gradient(145deg, rgba(26, 26, 46, 0.95), rgba(15, 15, 35, 0.95));
  box-shadow: inset 0 0 100px 35px var(--clr-overlay), 0 12px 24px rgb(0 0 0 / 0.6);
  color: var(--clr-text-light);
  cursor: default;
  overflow: hidden;
  transition: transform var(--transition-speed), box-shadow var(--transition-speed), border-color var(--transition-speed);
  z-index: 1;
  user-select: none;
  border-left: 8px solid transparent;
}

section.course-level:hover {
  transform: scale(1.04);
  z-index: 10;
}

/* Beginner */
section.course-level.beginner {
  border-left-color: var(--clr-green);
}

section.course-level.beginner::before {
  background: linear-gradient(180deg, var(--clr-green), #10b981cc);
  filter: blur(5px);
  opacity: 0.7;
}

section.course-level.beginner:hover {
  box-shadow: inset 0 0 120px 45px rgba(16, 185, 129, 0.6), 0 18px 36px rgb(16 185 129 / 0.75);
  border-left-color: var(--clr-green);
}

section.course-level.beginner:hover::before {
  opacity: 1;
  filter: blur(12px);
}

section.course-level.beginner h2 {
  color: var(--clr-green);
  text-shadow: 0 0 15px var(--clr-green);
}

/* Intermediate */
section.course-level.intermediate {
  border-left-color: var(--clr-blue);
}

section.course-level.intermediate::before {
  background: linear-gradient(180deg, var(--clr-blue), #3b82f6cc);
  filter: blur(5px);
  opacity: 0.7;
}

section.course-level.intermediate:hover {
  box-shadow: inset 0 0 120px 45px rgba(59, 130, 246, 0.6), 0 18px 36px rgb(59 130 246 / 0.75);
  border-left-color: var(--clr-blue);
}

section.course-level.intermediate:hover::before {
  opacity: 1;
  filter: blur(12px);
}

section.course-level.intermediate h2 {
  color: var(--clr-blue);
  text-shadow: 0 0 15px var(--clr-blue);
}

/* Advanced */
section.course-level.advanced {
  border-left-color: var(--clr-purple);
}

section.course-level.advanced::before {
  background: linear-gradient(180deg, var(--clr-purple), #8b5cf6cc);
  filter: blur(5px);
  opacity: 0.7;
}

section.course-level.advanced:hover {
  box-shadow: inset 0 0 120px 45px rgba(139, 92, 246, 0.6), 0 18px 36px rgb(139 92 246 / 0.75);
  border-left-color: var(--clr-purple);
}

section.course-level.advanced:hover::before {
  opacity: 1;
  filter: blur(12px);
}

section.course-level.advanced h2 {
  color: var(--clr-purple);
  text-shadow: 0 0 15px var(--clr-purple);
}

/* Professional */
section.course-level.professional {
  border-left-color: var(--clr-teal);
}

section.course-level.professional::before {
  background: linear-gradient(180deg, var(--clr-teal), #06b6d4cc);
  filter: blur(5px);
  opacity: 0.7;
}

section.course-level.professional:hover {
  box-shadow: inset 0 0 120px 45px rgba(6, 182, 212, 0.6), 0 18px 36px rgb(6 182 212 / 0.75);
  border-left-color: var(--clr-teal);
}

section.course-level.professional:hover::before {
  opacity: 1;
  filter: blur(12px);
}

section.course-level.professional h2 {
  color: var(--clr-teal);
  text-shadow: 0 0 15px var(--clr-teal);
}

section.course-level::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 6px;
  border-radius: 8px 0 0 8px;
  pointer-events: none;
  transition: opacity var(--transition-speed), filter var(--transition-speed);
  z-index: 0;
}

ol,
ul {
  padding-left: 1.4rem;
  margin-top: 0.6rem;
}

li {
  margin-bottom: 0.9rem;
  font-size: 1.1rem;
  line-height: 1.5;
}

a.clickable {
  display: inline-block;
  padding: 0.45rem 1.15rem;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--clr-blue), var(--clr-green));
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 15px rgb(59 130 246 / 0.45);
  transition: background var(--transition-speed), color var(--transition-speed), box-shadow var(--transition-speed), transform var(--transition-speed);
  user-select: text;
}

a.clickable:hover,
a.clickable:focus {
  background: linear-gradient(90deg, var(--clr-green), var(--clr-blue));
  color: #ffffff;
  box-shadow: 0 0 18px 5px var(--clr-green), 0 0 28px 12px var(--clr-green);
  text-shadow: 0 0 10px var(--clr-green);
  transform: translateY(-2px) scale(1.05);
  outline: none;
}

section.course-level {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeInUp 0.7s ease forwards;
}

section.course-level:nth-child(1) { animation-delay: 0.1s; }
section.course-level:nth-child(2) { animation-delay: 0.3s; }
section.course-level:nth-child(3) { animation-delay: 0.5s; }
section.course-level:nth-child(4) { animation-delay: 0.7s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  h1 {
    font-size: 2.6rem;
  }
  h2 {
    font-size: 1.9rem;
  }
  section.course-level {
    padding: 2rem 2rem 2.5rem;
  }
}

@media (max-width: 600px) {
  main {
    gap: 2.5rem;
  }
  h1 {
    font-size: 2.2rem;
  }
  h2 {
    font-size: 1.5rem;
  }
  a.clickable {
    padding: 0.35rem 0.9rem;
    font-size: 0.9rem;
  }
}

img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin: 0 auto 1rem;
  transition: transform var(--transition-speed), filter var(--transition-speed);
}

img:hover {
  transform: scale(1.1);
  filter: brightness(1.1) drop-shadow(0 0 8px rgba(16, 185, 129, 0.5));
}