/*
 * STRIKE - Advanced Features CSS
 * All 40 Advanced Features Implementation
 */

/* ============================================
 * TABLE OF CONTENTS
 * ============================================
 * 
 * 1. NAVIGATION COMPONENTS
 *    - Floating Navigation Menu
 *    - Navigation Number Badges
 *    - Navigation Close Button
 *    - Navigation Links & Items
 * 
 * 2. ADVANCED UI FEATURES (1-5)
 *    #1  - Parallax Scrolling Effect
 *    #2  - Flip Cards
 *    #3  - Sticky Notes Wall
 *    #4  - Terminal Code Block
 *    #5  - Pricing Toggle Switch
 * 
 * 3. INTERACTIVE ELEMENTS (6-10)
 *    #6  - Tabbed Course Categories
 *    #7  - Accordion FAQ Section
 *    #8  - Image Gallery with Lightbox
 *    #9  - Skill Progress Bars
 *    #10 - Circular Reading Progress
 * 
 * 4. VISUAL ENHANCEMENTS (11-15)
 *    #11 - Glassmorphism Cards
 *    #12 - Neumorphism Buttons
 *    #13 - Text Gradient Effects
 *    #14 - Animated Backgrounds
 *    #15 - Particle Effects
 * 
 * 5. USER EXPERIENCE FEATURES (16-20)
 *    #16 - Cookie Consent Banner
 *    #17 - Toast Notifications
 *    #18 - Loading Skeleton Screens
 *    #19 - Smooth Scroll Indicator
 *    #20 - Back to Top Button
 * 
 * 6. NAVIGATION FEATURES (21-25)
 *    #21 - Mega Menu
 *    #22 - Breadcrumb Navigation
 *    #23 - Pagination Component
 *    #24 - Timeline Vertical
 *    #25 - Filter Tags
 * 
 * 7. CONTENT FEATURES (26-30)
 *    #26 - Before/After Comparison Slider
 *    #27 - Video Player Controls
 *    #28 - Audio Visualizer
 *    #29 - Code Syntax Highlighting
 *    #30 - Markdown Preview
 * 
 * 8. ADVANCED INTERACTIONS (31-35)
 *    #31 - Split Screen Layout
 *    #32 - Drag and Drop Zones
 *    #33 - Range Slider
 *    #34 - Color Picker
 *    #35 - Star Rating System
 * 
 * 9. GAMIFICATION FEATURES (36-40)
 *    #36 - XP Progress Bar
 *    #37 - Achievement Badges
 *    #38 - Leaderboard
 *    #39 - Streak Counter
 *    #40 - Level System
 * 
 * 10. RESPONSIVE STYLES
 *     - Mobile Adaptations
 *     - Tablet Breakpoints
 *     - Desktop Optimizations
 * 
 * ============================================ */

/* ============================================
 * 1. NAVIGATION COMPONENTS
 * ============================================ */

/* FLOATING NAVIGATION MENU */
.nav-menu-checkbox {
  display: none;
}

.nav-menu-trigger {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: var(--color-secondary);
  color: var(--color-bg);
  padding: 1rem 0.75rem;
  border-radius: 8px 0 0 8px;
  cursor: pointer;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  box-shadow: -2px 0 10px rgba(0, 255, 194, 0.3);
  transition: all 0.3s ease;
  font-family: var(--font-heading);
}

.nav-menu-trigger:hover {
  background: var(--color-primary);
  transform: translateY(-50%) translateX(-5px);
  box-shadow: -4px 0 20px rgba(255, 215, 0, 0.5);
}

.nav-menu-icon {
  font-size: 1.5rem;
  font-weight: 700;
}

.nav-menu-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.floating-nav-menu {
  position: fixed;
  top: 80px;
  right: -350px;
  width: 350px;
  height: calc(100vh - 100px);
  max-height: 600px;
  background: var(--color-surface);
  border-left: 2px solid var(--color-secondary);
  border-top: 2px solid var(--color-secondary);
  border-bottom: 2px solid var(--color-secondary);
  box-shadow: -5px 0 30px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  border-radius: 8px 0 0 8px;
}

.nav-menu-checkbox:checked ~ .floating-nav-menu {
  right: 0;
}

.nav-menu-checkbox:checked ~ .nav-menu-trigger {
  opacity: 0;
  pointer-events: none;
}

.floating-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(135deg, rgba(0, 255, 194, 0.1), transparent);
  position: sticky;
  top: 0;
  z-index: 10;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.floating-nav-header h3 {
  color: var(--color-primary);
  font-size: 1.2rem;
  margin: 0;
  flex: 1;
}

.nav-menu-close {
  font-size: 1.5rem;
  color: var(--color-gold);
  cursor: pointer;
  transition: all 0.3s ease;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid var(--color-gold);
  -webkit-user-select: none;
  user-select: none;
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
  z-index: 11;
  position: relative;
  opacity: 0.8;
}

.nav-menu-close:hover {
  background: var(--color-gold);
  color: var(--color-bg);
  border-color: var(--color-gold);
  transform: rotate(90deg);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
  opacity: 1;
}

.floating-nav-list {
  list-style: none;
  padding: 1rem 0;
  flex: 1;
  margin: 0;
}

.floating-nav-list li {
  margin: 0;
}

.nav-menu-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  color: var(--color-text);
  text-decoration: none;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
  font-family: var(--font-body);
  font-weight: 500;
  position: relative;
}

.nav-menu-link .nav-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, rgba(0, 255, 194, 0.1), rgba(0, 255, 194, 0.05));
  border: 1px solid rgba(0, 255, 194, 0.3);
  border-radius: 6px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-secondary);
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.nav-menu-link .nav-text {
  flex: 1;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.nav-menu-link:hover {
  background: rgba(0, 255, 194, 0.1);
  border-left-color: var(--color-secondary);
  color: var(--color-secondary);
  padding-left: 2rem;
}

.nav-menu-link:hover .nav-number {
  background: linear-gradient(135deg, var(--color-secondary), rgba(0, 255, 194, 0.8));
  border-color: var(--color-secondary);
  color: var(--color-bg);
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 0 15px rgba(0, 255, 194, 0.4);
}

.nav-menu-link:hover .nav-text {
  color: var(--color-primary);
  font-weight: 600;
}

.nav-icon {
  font-size: 1.2rem;
  width: 24px;
  text-align: center;
}

.floating-nav-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
  background: rgba(0, 0, 0, 0.2);
}

.nav-feature-count {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1px;
}

/* FEATURE CATEGORIES SECTION */
.feature-categories-section {
  padding: 4rem 0;
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.95), rgba(20, 20, 20, 0.98));
  margin: 3rem 0;
  position: relative;
  overflow: hidden;
}

.feature-categories-section::before,
.feature-categories-section::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 150px;
  z-index: 2;
  pointer-events: none;
}

.feature-categories-section::before {
  left: 0;
  background: linear-gradient(to right, rgba(10, 10, 10, 1), transparent);
}

.feature-categories-section::after {
  right: 0;
  background: linear-gradient(to left, rgba(10, 10, 10, 1), transparent);
}

.categories-carousel {
  margin-top: 3rem;
  overflow: hidden;
  position: relative;
}

.categories-track {
  display: flex;
  gap: 2rem;
  animation: categoriesScroll 40s linear infinite;
  width: fit-content;
}

.categories-track:hover {
  animation-play-state: paused;
}

@keyframes categoriesScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-320px * 4 - 8rem));
  }
}

.category-card {
  background: linear-gradient(135deg, rgba(15, 15, 15, 0.95), rgba(25, 25, 25, 0.90));
  border: 1px solid rgba(0, 255, 194, 0.2);
  border-radius: 12px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  min-width: 320px;
  max-width: 320px;
  flex-shrink: 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-align: center;
}

.category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    transparent, 
    var(--color-secondary), 
    var(--color-primary), 
    var(--color-secondary), 
    transparent
  );
  transform: translateX(-100%);
  transition: transform 0.8s ease;
}

.category-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 2px;
  background: linear-gradient(135deg, 
    rgba(0, 255, 194, 0.3), 
    rgba(255, 215, 0, 0.3)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.category-card:hover::before {
  transform: translateX(100%);
}

.category-card:hover::after {
  opacity: 1;
}

.category-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(0, 255, 194, 0.5);
  box-shadow: 
    0 10px 40px rgba(0, 255, 194, 0.25),
    0 0 20px rgba(255, 215, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.category-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(0, 255, 194, 0.1));
  border: 2px solid var(--color-secondary);
  border-radius: 50%;
  color: var(--color-secondary);
  transition: all 0.3s ease;
  position: relative;
  animation: iconFloat 3s ease-in-out infinite;
}

.category-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--color-secondary);
  transition: all 0.3s ease;
}

.category-card:hover .category-icon {
  transform: scale(1.1) rotate(5deg);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(0, 255, 194, 0.2));
  box-shadow: 0 0 20px rgba(0, 255, 194, 0.4);
}

.category-card:hover .category-icon svg {
  stroke: var(--color-primary);
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}

.category-card:nth-child(1) .category-icon {
  animation-delay: 0s;
}

.category-card:nth-child(2) .category-icon {
  animation-delay: 0.5s;
}

.category-card:nth-child(3) .category-icon {
  animation-delay: 1s;
}

.category-card:nth-child(4) .category-icon {
  animation-delay: 1.5s;
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.category-title {
  font-size: 1.4rem;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.category-desc {
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.category-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.category-tag {
  background: rgba(0, 255, 194, 0.1);
  color: var(--color-secondary);
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-family: var(--font-body);
  border: 1px solid rgba(0, 255, 194, 0.3);
  transition: all 0.3s ease;
}

.category-tag:hover {
  background: var(--color-secondary);
  color: var(--color-bg);
  transform: scale(1.1);
}

.category-count {
  display: inline-block;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: var(--color-bg);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--font-heading);
  letter-spacing: 1px;
}

/* FEATURE TAGS (Per Section) */
.feature-section {
  position: relative;
  padding-top: 3rem;
}

.feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
  justify-content: center;
  animation: fadeInDown 0.6s ease-out;
}

.feature-tag {
  background: rgba(255, 215, 0, 0.1);
  color: var(--color-primary);
  padding: 0.5rem 1.25rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-family: var(--font-body);
  font-weight: 700;
  border: 1px solid rgba(255, 215, 0, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.feature-tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
  transition: left 0.5s ease;
}

.feature-tag:hover::before {
  left: 100%;
}

.feature-tag:hover {
  background: var(--color-primary);
  color: var(--color-bg);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
  .floating-nav-menu {
    width: 100%;
    right: -100%;
  }
  
  .nav-menu-trigger {
    padding: 0.75rem 0.5rem;
  }
  
  .category-card {
    min-width: 280px;
    max-width: 280px;
    padding: 1.5rem;
  }
  
  @keyframes categoriesScroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-280px * 4 - 8rem));
    }
  }
  
  .feature-tags {
    gap: 0.5rem;
  }
  
  .feature-tag {
    font-size: 0.75rem;
    padding: 0.4rem 1rem;
  }
}

/* ENHANCED FEATURES HERO SECTION */
.features-hero {
  min-height: 40vh !important;
  padding: 3rem 0 2rem !important;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%) !important;
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.features-hero .hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  max-width: 1200px;
  padding: 0 2rem;
}

/* Tactical Grid Background */
.hero-tactical-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    repeating-linear-gradient(0deg, transparent, transparent 49px, rgba(0, 255, 194, 0.1) 49px, rgba(0, 255, 194, 0.1) 50px),
    repeating-linear-gradient(90deg, transparent, transparent 49px, rgba(0, 255, 194, 0.1) 49px, rgba(0, 255, 194, 0.1) 50px);
  opacity: 0.3;
  z-index: 0;
  animation: gridPulse 4s ease-in-out infinite;
}

/* Animated Scanline */
.hero-scanline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-secondary), transparent);
  z-index: 1;
  animation: scanlineMove 3s linear infinite;
}

/* Top Badge */
.hero-badge-top {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background: rgba(0, 255, 194, 0.1);
  border: 1px solid var(--color-secondary);
  color: var(--color-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 3px;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
  animation: fadeInDown 0.8s ease-out;
}

.hero-badge-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 194, 0.3), transparent);
  animation: badgeShine 2s ease-in-out infinite;
}

/* Features Title Enhancement */
.features-title {
  font-size: clamp(2.5rem, 8vw, 4.5rem) !important;
  margin-bottom: 1rem !important;
  background: linear-gradient(135deg, #ffd700, #ffed4e, #ffd700);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 3s ease infinite, titlePop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  position: relative;
}

.features-title::after {
  content: 'ADVANCED FEATURES';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #00ffc2, #00d4aa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  animation: titleGlitch 5s linear infinite;
  z-index: -1;
}

/* Features Subtitle */
.features-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.2rem) !important;
  color: var(--color-text-muted) !important;
  margin-bottom: 2rem !important;
  animation: fadeInUp 0.8s ease-out 0.3s both;
}

.glitch-text {
  position: relative;
  display: inline-block;
}

/* Mini Stats in Hero */
.hero-stats-mini {
  display: flex;
  gap: 3rem;
  justify-content: center;
  margin-top: 2rem;
  animation: fadeInUp 0.8s ease-out 0.5s both;
}

.stat-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.stat-mini::before {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width 0.3s ease;
}

.stat-mini:hover::before {
  width: 100%;
}

.stat-mini-number {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-primary);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  animation: numberPulse 2s ease-in-out infinite;
}

.stat-mini-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 0.25rem;
}

/* Animations */
@keyframes gridPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.5; }
}

@keyframes scanlineMove {
  0% { top: 0; }
  100% { top: 100%; }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes titlePop {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  60% {
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes titleGlitch {
  0%, 90%, 100% { opacity: 0; }
  92% { opacity: 0.7; transform: translate(-2px, 1px); }
  94% { opacity: 0; }
  96% { opacity: 0.8; transform: translate(2px, -1px); }
  98% { opacity: 0; }
}

@keyframes numberPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes badgeShine {
  0% { left: -100%; }
  50%, 100% { left: 200%; }
}

/* Responsive */
@media (max-width: 768px) {
  .features-hero {
    min-height: 35vh !important;
    padding: 2rem 0 1.5rem !important;
  }
  
  .hero-stats-mini {
    gap: 1.5rem;
    flex-wrap: wrap;
  }
  
  .stat-mini-number {
    font-size: 1.5rem;
  }
  
  .stat-mini-label {
    font-size: 0.75rem;
  }
}

/* NAVIGATION TRIGGERS (Menu Buttons) */
.menu-trigger {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin-left: 1rem;
  font-size: 1.5rem;
  color: var(--color-primary, #FFD700);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid var(--color-primary, #FFD700);
  border-radius: 4px;
  background: transparent;
}

.menu-trigger:hover {
  background: var(--color-primary, #FFD700);
  color: var(--color-bg, #0A0A0A);
  transform: scale(1.05);
}

.fullscreen-trigger {
  margin-left: 0.5rem;
}

@media (max-width: 768px) {
  .menu-trigger {
    padding: 0.4rem 0.8rem;
    font-size: 1.2rem;
    margin-left: 0.5rem;
  }
}

/* ============================================
 * 2. ADVANCED UI FEATURES (1-5)
 * ============================================ */

/* ADVANCED UI FEATURES (1-5) */

/* #1 - PARALLAX SCROLLING EFFECT */
.parallax-section {
  position: relative;
  height: 500px;
  overflow: hidden;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)),
    url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" fill="%23121212"/><circle cx="50" cy="50" r="40" fill="none" stroke="%23FFD700" stroke-width="0.5" opacity="0.3"/></svg>');
  transform: translateZ(-1px) scale(1.5);
  z-index: -1;
}

.parallax-content {
  position: relative;
  z-index: 1;
  padding: 4rem 2rem;
  text-align: center;
  transform: translateZ(0);
}

/* #2 - ANIMATED PROGRESS BARS */
/* #2 - SKILL PROGRESS PIE CHART */
.skill-progress-section {
  padding: 4rem 0;
  background: linear-gradient(135deg, rgba(10, 15, 30, 0.95), rgba(5, 10, 20, 1));
  position: relative;
  overflow: hidden;
}

.skill-progress-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 255, 255, 0.03) 2px, rgba(0, 255, 255, 0.03) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 255, 255, 0.03) 2px, rgba(0, 255, 255, 0.03) 4px);
  pointer-events: none;
}

.pie-chart-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.pie-chart-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pie-grid-bg {
  position: absolute;
  width: 120%;
  height: 120%;
  background: 
    repeating-linear-gradient(0deg, transparent, transparent 30px, rgba(0, 255, 255, 0.1) 30px, rgba(0, 255, 255, 0.1) 31px),
    repeating-linear-gradient(90deg, transparent, transparent 30px, rgba(0, 255, 255, 0.1) 30px, rgba(0, 255, 255, 0.1) 31px);
  pointer-events: none;
  opacity: 0.3;
  animation: gridPulse 4s ease-in-out infinite;
}

@keyframes gridPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.05); }
}

.pie-chart {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  position: relative;
  transform: rotate(-90deg);
  box-shadow: 
    0 0 40px rgba(0, 255, 255, 0.3),
    0 0 80px rgba(0, 255, 255, 0.2),
    inset 0 0 20px rgba(0, 0, 0, 0.5);
  background: radial-gradient(circle, rgba(15, 20, 35, 0.9), rgba(5, 10, 20, 1));
}

.pie-segment {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 50% 100%);
}

.pie-slice {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  position: relative;
  overflow: hidden;
}

.pie-slice::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
  animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* Segment 1 - Frontend (95% - 68.4deg out of 360) - Cyan */
.pie-segment-1 {
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 85% 95%, 50% 50%);
  transform: rotate(0deg);
  z-index: 5;
}

.pie-segment-1 .pie-slice {
  background: linear-gradient(135deg, #00ffff, #00d4d4);
  box-shadow: 
    0 0 20px rgba(0, 255, 255, 0.5),
    inset 0 0 20px rgba(0, 255, 255, 0.3);
  animation: pieSegmentGlow1 3s ease-in-out infinite;
}

@keyframes pieSegmentGlow1 {
  0%, 100% { 
    filter: brightness(1);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5), inset 0 0 20px rgba(0, 255, 255, 0.3);
  }
  50% { 
    filter: brightness(1.3);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.8), inset 0 0 30px rgba(0, 255, 255, 0.5);
  }
}

/* Segment 2 - Backend (88% - 63.36deg) - Gold */
.pie-segment-2 {
  clip-path: polygon(50% 50%, 85% 95%, 70% 100%, 15% 98%, 5% 70%, 50% 50%);
  transform: rotate(68.4deg);
  z-index: 4;
}

.pie-segment-2 .pie-slice {
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  box-shadow: 
    0 0 20px rgba(255, 215, 0, 0.5),
    inset 0 0 20px rgba(255, 215, 0, 0.3);
  animation: pieSegmentGlow2 3s ease-in-out infinite 0.6s;
}

@keyframes pieSegmentGlow2 {
  0%, 100% { 
    filter: brightness(1);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5), inset 0 0 20px rgba(255, 215, 0, 0.3);
  }
  50% { 
    filter: brightness(1.3);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), inset 0 0 30px rgba(255, 215, 0, 0.5);
  }
}

/* Segment 3 - DevOps (92% - 66.24deg) - Purple */
.pie-segment-3 {
  clip-path: polygon(50% 50%, 5% 70%, 0% 30%, 15% 5%, 60% 0%, 50% 50%);
  transform: rotate(131.76deg);
  z-index: 3;
}

.pie-segment-3 .pie-slice {
  background: linear-gradient(135deg, #9d4edd, #7b2cbf);
  box-shadow: 
    0 0 20px rgba(157, 78, 221, 0.5),
    inset 0 0 20px rgba(157, 78, 221, 0.3);
  animation: pieSegmentGlow3 3s ease-in-out infinite 1.2s;
}

@keyframes pieSegmentGlow3 {
  0%, 100% { 
    filter: brightness(1);
    box-shadow: 0 0 20px rgba(157, 78, 221, 0.5), inset 0 0 20px rgba(157, 78, 221, 0.3);
  }
  50% { 
    filter: brightness(1.3);
    box-shadow: 0 0 30px rgba(157, 78, 221, 0.8), inset 0 0 30px rgba(157, 78, 221, 0.5);
  }
}

/* Segment 4 - Database (85% - 61.2deg) - Orange */
.pie-segment-4 {
  clip-path: polygon(50% 50%, 60% 0%, 95% 2%, 100% 30%, 98% 85%, 50% 50%);
  transform: rotate(198deg);
  z-index: 2;
}

.pie-segment-4 .pie-slice {
  background: linear-gradient(135deg, #ff6b35, #ff4500);
  box-shadow: 
    0 0 20px rgba(255, 107, 53, 0.5),
    inset 0 0 20px rgba(255, 107, 53, 0.3);
  animation: pieSegmentGlow4 3s ease-in-out infinite 1.8s;
}

@keyframes pieSegmentGlow4 {
  0%, 100% { 
    filter: brightness(1);
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.5), inset 0 0 20px rgba(255, 107, 53, 0.3);
  }
  50% { 
    filter: brightness(1.3);
    box-shadow: 0 0 30px rgba(255, 107, 53, 0.8), inset 0 0 30px rgba(255, 107, 53, 0.5);
  }
}

/* Segment 5 - Security (90% - 64.8deg) - Green */
.pie-segment-5 {
  clip-path: polygon(50% 50%, 98% 85%, 85% 100%, 50% 100%, 50% 50%);
  transform: rotate(259.2deg);
  z-index: 1;
}

.pie-segment-5 .pie-slice {
  background: linear-gradient(135deg, #06ffa5, #00cc88);
  box-shadow: 
    0 0 20px rgba(6, 255, 165, 0.5),
    inset 0 0 20px rgba(6, 255, 165, 0.3);
  animation: pieSegmentGlow5 3s ease-in-out infinite 2.4s;
}

@keyframes pieSegmentGlow5 {
  0%, 100% { 
    filter: brightness(1);
    box-shadow: 0 0 20px rgba(6, 255, 165, 0.5), inset 0 0 20px rgba(6, 255, 165, 0.3);
  }
  50% { 
    filter: brightness(1.3);
    box-shadow: 0 0 30px rgba(6, 255, 165, 0.8), inset 0 0 30px rgba(6, 255, 165, 0.5);
  }
}

/* Center Circle */
.pie-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(15, 20, 35, 1), rgba(25, 30, 45, 1));
  box-shadow: 
    0 0 30px rgba(0, 0, 0, 0.8),
    inset 0 0 20px rgba(0, 255, 255, 0.2),
    0 0 60px rgba(0, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid rgba(0, 255, 255, 0.3);
  animation: centerPulse 2s ease-in-out infinite;
  z-index: 10;
}

@keyframes centerPulse {
  0%, 100% { 
    box-shadow: 
      0 0 30px rgba(0, 0, 0, 0.8),
      inset 0 0 20px rgba(0, 255, 255, 0.2),
      0 0 60px rgba(0, 255, 255, 0.3);
  }
  50% { 
    box-shadow: 
      0 0 30px rgba(0, 0, 0, 0.8),
      inset 0 0 30px rgba(0, 255, 255, 0.4),
      0 0 80px rgba(0, 255, 255, 0.5);
  }
}

.pie-center-content {
  text-align: center;
}

.pie-total {
  display: block;
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 900;
  color: var(--color-primary);
  text-shadow: 
    0 0 10px rgba(0, 255, 255, 0.8),
    0 0 20px rgba(0, 255, 255, 0.5);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.pie-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.8;
}

/* Legend Styles */
.pie-legend {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.legend-item {
  position: relative;
}

.legend-toggle {
  display: none;
}

.legend-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: rgba(15, 20, 35, 0.6);
  border: 2px solid rgba(0, 255, 255, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.legend-label:hover {
  background: rgba(15, 20, 35, 0.9);
  border-color: rgba(0, 255, 255, 0.5);
  transform: translateX(10px);
  box-shadow: 
    0 0 20px rgba(0, 255, 255, 0.3),
    inset 0 0 10px rgba(0, 255, 255, 0.1);
}

.legend-color {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  flex-shrink: 0;
  box-shadow: 0 0 15px currentColor;
  animation: colorPulse 2s ease-in-out infinite;
  position: relative;
}

.legend-color::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  opacity: 0.8;
}

@keyframes colorPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; box-shadow: 0 0 20px currentColor; }
}

.legend-item-1 .legend-color { background: linear-gradient(135deg, #00ffff, #00d4d4); }
.legend-item-2 .legend-color { background: linear-gradient(135deg, #ffd700, #ffaa00); }
.legend-item-3 .legend-color { background: linear-gradient(135deg, #9d4edd, #7b2cbf); }
.legend-item-4 .legend-color { background: linear-gradient(135deg, #ff6b35, #ff4500); }
.legend-item-5 .legend-color { background: linear-gradient(135deg, #06ffa5, #00cc88); }

.legend-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
}

.legend-name {
  font-family: var(--font-heading);
  color: var(--color-text);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.legend-percentage {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

/* Hover Effects on Legend */
.legend-toggle:checked + .legend-label {
  background: rgba(15, 20, 35, 0.9);
  border-color: rgba(0, 255, 255, 0.8);
  box-shadow: 
    0 0 30px rgba(0, 255, 255, 0.5),
    inset 0 0 20px rgba(0, 255, 255, 0.2);
}

.legend-toggle:checked + .legend-label .legend-color {
  animation: colorFlash 0.5s ease-in-out;
}

@keyframes colorFlash {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

/* Responsive Design */
@media (max-width: 968px) {
  .pie-chart-container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .pie-chart {
    width: 320px;
    height: 320px;
  }

  .pie-center {
    width: 140px;
    height: 140px;
  }

  .pie-total {
    font-size: 2.5rem;
  }

  .pie-label {
    font-size: 0.75rem;
  }
}

@media (max-width: 568px) {
  .pie-chart {
    width: 280px;
    height: 280px;
  }

  .pie-center {
    width: 120px;
    height: 120px;
  }

  .pie-total {
    font-size: 2rem;
  }

  .legend-label {
    padding: 0.8rem 1rem;
  }

  .legend-name {
    font-size: 0.9rem;
  }

  .legend-percentage {
    font-size: 1.2rem;
  }
}

/* #3 - COURSE COMPARISON TABLE */
.comparison-table-section {
  padding: 4rem 0;
  overflow-x: auto;
}

.comparison-table {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
}

.comparison-table thead {
  position: sticky;
  top: 4rem;
  z-index: 10;
  background: var(--color-bg);
}

.comparison-table th {
  padding: 1.5rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-family: var(--font-heading);
  color: var(--color-primary);
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
  transition: all var(--transition-fast);
}

.comparison-table th:hover {
  background: rgba(255, 215, 0, 0.1);
  transform: translateY(-3px);
}

.comparison-table td {
  padding: 1rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: center;
  transition: background var(--transition-fast);
}

.comparison-table tbody tr:hover td {
  background: rgba(0, 255, 194, 0.05);
}

.comparison-table .feature-name {
  text-align: left;
  font-weight: 700;
  color: var(--color-text);
}

.comparison-check {
  color: var(--color-secondary);
  font-size: 1.2rem;
}

.comparison-cross {
  color: var(--color-text-muted);
  opacity: 0.3;
}

/* #4 - MISSION DIFFICULTY INDICATORS */
.difficulty-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  animation: badgePulse 2s ease-in-out infinite;
}

.difficulty-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: badgeShine 3s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes badgeShine {
  0% { left: -100%; }
  100% { left: 200%; }
}

.difficulty-recruit {
  background: linear-gradient(135deg, #4CAF50, #2E7D32);
  color: #fff;
  border: 2px solid #4CAF50;
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.4);
}

.difficulty-veteran {
  background: linear-gradient(135deg, #2196F3, #1565C0);
  color: #fff;
  border: 2px solid #2196F3;
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.4);
}

.difficulty-elite {
  background: linear-gradient(135deg, #FF9800, #E65100);
  color: #fff;
  border: 2px solid #FF9800;
  box-shadow: 0 0 15px rgba(255, 152, 0, 0.4);
}

.difficulty-legend {
  background: linear-gradient(135deg, #F44336, #C62828);
  color: #fff;
  border: 2px solid #F44336;
  box-shadow: 0 0 15px rgba(244, 67, 54, 0.4);
  animation: legendGlow 1.5s ease-in-out infinite;
}

@keyframes legendGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(244, 67, 54, 0.4); }
  50% { box-shadow: 0 0 30px rgba(244, 67, 54, 0.8); }
}

.difficulty-icon {
  font-size: 1rem;
}

/* #5 - VIDEO THUMBNAILS WITH PLAY */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem 0;
}

.video-card {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 255, 194, 0.3);
}

.video-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
  transition: all var(--transition-fast);
}

/* Specific video thumbnail backgrounds */
.video-thumbnail.video-webdev {
  background-image: url('images/webdevelopmentimage.png');
  background-size: cover;
  background-position: center;
}

.video-thumbnail.video-html {
  background-image: url('images/htmlimage.png');
  background-size: cover;
  background-position: center;
}

.video-thumbnail.video-css {
  background-image: url('images/cssimage.png');
  background-size: cover;
  background-position: center;
}

.video-card:hover .video-thumbnail {
  filter: brightness(1);
  transform: scale(1.05);
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  background: rgba(255, 215, 0, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.video-card:hover .video-play-btn {
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
}

.video-play-btn::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 20px solid var(--color-bg);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 5px;
}

.video-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.9));
  transform: translateY(100%);
  transition: transform var(--transition-fast);
}

.video-card:hover .video-overlay {
  transform: translateY(0);
}

.video-title {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.video-duration {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* ============================================
 * 3. INTERACTIVE ELEMENTS (6-10)
 * ============================================ */

/* INTERACTIVE ELEMENTS (6-10) */

/* #6 - TABBED COURSE CATEGORIES */
.course-tabs-section {
  padding: 4rem 0;
}

.tab-controls {
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 3rem;
  overflow-x: auto;
  flex-wrap: wrap;
}

.tab-radio {
  display: none;
}

.tab-label {
  padding: 1rem 2rem;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  border: 1px solid transparent;
}

.tab-label:hover {
  color: var(--color-secondary);
  background: rgba(0, 255, 194, 0.05);
}

.tab-radio:checked + .tab-label {
  color: var(--color-primary);
  border-color: var(--color-border);
  border-bottom-color: var(--color-bg);
  background: var(--color-bg);
}

.tab-radio:checked + .tab-label::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-secondary);
  animation: tabSlide 0.3s ease-out;
}

@keyframes tabSlide {
  from { width: 0; }
  to { width: 100%; }
}

.tab-content {
  display: none;
  animation: tabFadeIn 0.5s ease-out;
}

.tab-content h3 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#tab-frontend:checked ~ .tab-panels #panel-frontend,
#tab-backend:checked ~ .tab-panels #panel-backend,
#tab-devops:checked ~ .tab-panels #panel-devops,
#tab-security:checked ~ .tab-panels #panel-security,
#tab-mobile:checked ~ .tab-panels #panel-mobile {
  display: block;
}

/* #7 - FILTERABLE COURSE GRID */
.filter-section {
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 3rem;
}

.filter-group {
  margin-bottom: 1.5rem;
}

.filter-title {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.75rem;
}

.filter-options {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.filter-checkbox {
  display: none;
}

.filter-label {
  padding: 0.5rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-transform: uppercase;
  font-family: var(--font-body);
  letter-spacing: 0.5px;
}

.filter-label:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.filter-checkbox:checked + .filter-label {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-bg);
  box-shadow: 0 0 15px rgba(0, 255, 194, 0.3);
}

/* Filter Logic - Show all by default */
.filterable-course {
  display: block;
  animation: courseAppear 0.5s ease-out;
}

@keyframes courseAppear {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Hide courses that don't match filters */
#filter-beginner:checked ~ .course-grid .filterable-course:not([data-level="beginner"]),
#filter-intermediate:checked ~ .course-grid .filterable-course:not([data-level="intermediate"]),
#filter-advanced:checked ~ .course-grid .filterable-course:not([data-level="advanced"]),
#filter-short:checked ~ .course-grid .filterable-course:not([data-duration="short"]),
#filter-medium:checked ~ .course-grid .filterable-course:not([data-duration="medium"]),
#filter-long:checked ~ .course-grid .filterable-course:not([data-duration="long"]) {
  display: none;
}

/* #8 - EXPANDABLE COURSE DETAILS */
.expandable-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  margin-bottom: 1rem;
  overflow: hidden;
}

.expand-toggle {
  display: none;
}

.expand-header {
  padding: 1.5rem 2rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background var(--transition-fast);
  -webkit-user-select: none;
  user-select: none;
}

.expand-header:hover {
  background: rgba(255, 215, 0, 0.05);
}

.expand-title {
  font-family: var(--font-heading);
  color: var(--color-text);
  font-size: 1.2rem;
  margin: 0;
}

.expand-icon {
  font-size: 1.5rem;
  color: var(--color-secondary);
  transition: transform var(--transition-fast);
}

.expand-toggle:checked + .expand-header .expand-icon {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.expand-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out, padding 0.5s ease-out;
  padding: 0 2rem;
}

.expand-toggle:checked ~ .expand-content {
  max-height: 1000px;
  padding: 0 2rem 2rem 2rem;
  border-top: 1px solid var(--color-border);
}

.expand-content p {
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.expand-content ul {
  list-style: none;
  padding-left: 0;
}

.expand-content ul li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  color: var(--color-text);
}

.expand-content ul li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--color-secondary);
  font-weight: bold;
}

/* #9 - FLOATING ACTION MENU (FAB) */
.fab-container {
  position: fixed;
  bottom: 6rem;
  right: 2rem;
  z-index: 1000;
}

.fab-toggle {
  display: none;
}

.fab-button {
  width: 60px;
  height: 60px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
  transition: all var(--transition-fast);
  position: relative;
  z-index: 2;
}

.fab-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
}

.fab-icon {
  font-size: 1.8rem;
  color: var(--color-bg);
  transition: transform var(--transition-fast);
}

.fab-toggle:checked + .fab-button .fab-icon {
  transform: rotate(45deg);
}

.fab-menu {
  position: absolute;
  bottom: 70px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--transition-fast);
}

.fab-toggle:checked ~ .fab-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fab-menu-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--color-surface);
  padding: 1rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 30px;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.fab-menu-item:hover {
  background: var(--color-secondary);
  color: var(--color-bg);
  transform: translateX(-5px);
  box-shadow: 0 6px 15px rgba(0, 255, 194, 0.4);
}

.fab-menu-icon {
  font-size: 1.2rem;
}

.fab-menu-text {
  font-family: var(--font-body);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* #10 - CIRCULAR READING PROGRESS */
/* ============================================
 * 4. VISUAL ENHANCEMENTS (11-15)
 * ============================================ */

/* VISUAL ENHANCEMENTS (11-15) */

/* #11 - GLASSMORPHISM CARDS */
.glass-card {
  background: rgba(18, 18, 18, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: all var(--transition-fast);
}

.glass-card:hover {
  background: rgba(18, 18, 18, 0.8);
  border-color: rgba(0, 255, 194, 0.3);
  box-shadow: 0 12px 40px rgba(0, 255, 194, 0.2);
  transform: translateY(-5px);
}

.glass-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.glass-icon {
  width: 50px;
  height: 50px;
  background: rgba(255, 215, 0, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.glass-title {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 1.3rem;
  margin: 0;
}

.glass-content {
  color: var(--color-text);
  line-height: 1.8;
}

/* #12 - TEXT REVEAL ON SCROLL */
.reveal-text {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: revealWord 0.6s ease-out forwards;
}

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

.reveal-text:nth-child(1) { animation-delay: 0.1s; }
.reveal-text:nth-child(2) { animation-delay: 0.2s; }
.reveal-text:nth-child(3) { animation-delay: 0.3s; }
.reveal-text:nth-child(4) { animation-delay: 0.4s; }
.reveal-text:nth-child(5) { animation-delay: 0.5s; }
.reveal-text:nth-child(6) { animation-delay: 0.6s; }
.reveal-text:nth-child(7) { animation-delay: 0.7s; }
.reveal-text:nth-child(8) { animation-delay: 0.8s; }

.reveal-section:target .reveal-text {
  animation: revealWord 0.6s ease-out forwards;
}

/* #13 - CUSTOM CURSOR */
.custom-cursor-area {
  cursor: none;
}

.cursor-crosshair {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  mix-blend-mode: difference;
}

.cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--color-secondary);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px var(--color-secondary);
}

.cursor-ring {
  width: 30px;
  height: 30px;
  border: 2px solid var(--color-secondary);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.1s ease;
}

.cursor-line-h {
  width: 40px;
  height: 1px;
  background: var(--color-secondary);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cursor-line-v {
  width: 1px;
  height: 40px;
  background: var(--color-secondary);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* #14 - ISOMETRIC COURSE CARDS */
.isometric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 3rem;
  padding: 3rem 0;
  perspective: 1000px;
}

.isometric-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 2rem;
  transform-style: preserve-3d;
  transform: rotateX(10deg) rotateY(-10deg);
  transition: all var(--transition-fast);
  box-shadow: 
    10px 10px 0 rgba(0, 255, 194, 0.1),
    20px 20px 0 rgba(255, 215, 0, 0.05);
}

.isometric-card:hover {
  transform: rotateX(0deg) rotateY(0deg) translateY(-10px);
  box-shadow: 
    15px 15px 0 rgba(0, 255, 194, 0.2),
    30px 30px 0 rgba(255, 215, 0, 0.1);
}

.isometric-header {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 1.5rem;
  margin-bottom: 1rem;
  transform: translateZ(20px);
}

.isometric-content {
  color: var(--color-text);
  line-height: 1.8;
  transform: translateZ(10px);
}

/* #15 - ANIMATED BACKGROUND PATTERNS */
.animated-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.1;
}

.grid-lines {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(var(--color-secondary) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-secondary) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(50px, 50px); }
}

.tactical-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0, 255, 194, 0.1) 0%, transparent 50%);
  animation: overlayPulse 10s ease-in-out infinite;
}

@keyframes overlayPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ============================================
 * 5. USER EXPERIENCE FEATURES (16-20)
 * ============================================ */

/* USER EXPERIENCE FEATURES (16-20) */

/* #16 - COOKIE CONSENT BANNER */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--color-surface);
  border-top: 2px solid var(--color-border);
  padding: 1.5rem 2rem;
  z-index: 9999;
  transform: translateY(0);
  transition: transform 0.5s ease-out;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

.cookie-toggle {
  display: none;
}

.cookie-toggle:checked ~ .cookie-banner {
  transform: translateY(100%);
}

.cookie-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.cookie-text {
  flex: 1;
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.6;
}

.cookie-actions {
  display: flex;
  gap: 1rem;
}

.cookie-btn {
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--color-secondary);
  background: transparent;
  color: var(--color-secondary);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.cookie-btn:hover {
  background: var(--color-secondary);
  color: var(--color-bg);
}

.cookie-btn-accept {
  background: var(--color-secondary);
  color: var(--color-bg);
}

/* #17 - NEWSLETTER SIGNUP MODAL */
.newsletter-modal-toggle {
  display: none;
}

.newsletter-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.newsletter-modal-toggle:checked ~ .newsletter-overlay {
  opacity: 1;
  visibility: visible;
}

.newsletter-modal {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  padding: 3rem;
  max-width: 500px;
  width: 90%;
  position: relative;
  transform: scale(0.8);
  transition: transform var(--transition-fast);
}

.newsletter-modal-toggle:checked ~ .newsletter-overlay .newsletter-modal {
  transform: scale(1);
}

.newsletter-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.newsletter-close:hover {
  color: var(--color-secondary);
}

.newsletter-header {
  margin-bottom: 2rem;
}

.newsletter-title {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.newsletter-subtitle {
  color: var(--color-text-muted);
  font-size: 1rem;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.newsletter-input {
  padding: 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: all var(--transition-fast);
}

.newsletter-input:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 10px rgba(0, 255, 194, 0.3);
}

.newsletter-submit {
  padding: 1rem 2rem;
  background: var(--color-secondary);
  border: none;
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-size: 1rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.newsletter-submit:hover {
  background: var(--color-primary);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

/* #18 - PROGRESS STEPS INDICATOR */
.steps-container {
  padding: 3rem 0;
}

.steps-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.steps-line {
  position: absolute;
  top: 25px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-border);
  z-index: -1;
}

.steps-line-fill {
  height: 100%;
  background: var(--color-secondary);
  width: 50%;
  transition: width 1s ease-out;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  position: relative;
}

.step-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 3px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
  position: relative;
  z-index: 1;
}

.step.active .step-circle {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-bg);
  box-shadow: 0 0 20px rgba(0, 255, 194, 0.5);
}

.step.completed .step-circle {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg);
}

.step.completed .step-circle::after {
  content: '✓';
  font-size: 1.5rem;
}

.step-label {
  font-family: var(--font-body);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.step.active .step-label,
.step.completed .step-label {
  color: var(--color-text);
  font-weight: 700;
}

/* #19 - TOOLTIP SYSTEM */
.tooltip-trigger {
  position: relative;
  display: inline-block;
  cursor: help;
  border-bottom: 1px dotted var(--color-secondary);
  color: var(--color-secondary);
}

.tooltip-content {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 0.75rem 1rem;
  min-width: 200px;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
  z-index: 1000;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.tooltip-trigger:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-border);
}

.tooltip-text {
  color: var(--color-text);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* #20 - COUNTDOWN TIMER */
/* #16 - COUNTDOWN TIMER (Diwali Special) */
.countdown-section-diwali {
  position: relative;
  background: linear-gradient(135deg, 
    rgba(40, 20, 0, 0.9), 
    rgba(60, 30, 0, 0.8), 
    rgba(40, 20, 0, 0.9)
  );
  border: 3px solid;
  border-image: linear-gradient(90deg, 
    #ff6b00, 
    #ffd700, 
    #ff6b00, 
    #ffd700
  ) 1;
  padding: 4rem 2rem !important;
  overflow: hidden;
  box-shadow: 
    0 0 50px rgba(255, 107, 0, 0.3),
    inset 0 0 80px rgba(255, 215, 0, 0.1),
    0 20px 60px rgba(0, 0, 0, 0.6);
}

.countdown-section-diwali::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 107, 0, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 140, 0, 0.1) 0%, transparent 70%);
  animation: diwaliGlow 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes diwaliGlow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Diwali Decorations */
.diwali-decorations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Diya (Oil Lamps) */
.diya {
  position: absolute;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle at 50% 60%, 
    #ff6b00 0%, 
    #ff8c00 30%, 
    #ffa500 50%, 
    transparent 80%
  );
  border-radius: 50%;
  filter: blur(8px);
  animation: diyaFlicker 2s ease-in-out infinite;
}

.diya::before {
  content: '🪔';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  filter: blur(0);
  animation: diyaFlame 1.5s ease-in-out infinite;
}

.diya-1 {
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.diya-2 {
  top: 10%;
  right: 10%;
  animation-delay: 0.5s;
}

.diya-3 {
  bottom: 15%;
  left: 15%;
  animation-delay: 1s;
}

.diya-4 {
  bottom: 15%;
  right: 15%;
  animation-delay: 1.5s;
}

@keyframes diyaFlicker {
  0%, 100% { 
    opacity: 0.8;
    transform: scale(1);
    filter: blur(8px);
  }
  50% { 
    opacity: 1;
    transform: scale(1.2);
    filter: blur(10px);
  }
}

@keyframes diyaFlame {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -55%) scale(1.1); }
}

/* Fireworks */
.firework {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ffd700;
  border-radius: 50%;
  box-shadow: 
    0 0 20px #ffd700,
    0 0 40px #ff6b00,
    0 0 60px #ffd700;
}

.firework::before,
.firework::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: #ffd700;
  border-radius: 50%;
  box-shadow: 0 0 10px #ffd700;
}

.firework-1 {
  top: 20%;
  left: 30%;
  animation: fireworkBurst1 3s ease-out infinite;
}

.firework-2 {
  top: 30%;
  right: 25%;
  animation: fireworkBurst2 3.5s ease-out infinite 1s;
}

.firework-3 {
  top: 60%;
  left: 50%;
  animation: fireworkBurst3 4s ease-out infinite 2s;
}

@keyframes fireworkBurst1 {
  0% { transform: scale(0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: scale(20); opacity: 0.8; }
  100% { transform: scale(40); opacity: 0; }
}

@keyframes fireworkBurst2 {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: scale(25) rotate(180deg); opacity: 0.8; }
  100% { transform: scale(50) rotate(360deg); opacity: 0; }
}

@keyframes fireworkBurst3 {
  0% { transform: scale(0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: scale(30); opacity: 0.8; }
  100% { transform: scale(60); opacity: 0; }
}

/* Diwali Title Styling */
.diwali-title {
  position: relative;
  z-index: 2;
  margin-bottom: 2rem;
}

.diwali-title h2 {
  background: linear-gradient(90deg, 
    #ffd700, 
    #ff8c00, 
    #ffd700, 
    #ff8c00
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 3s linear infinite;
  font-size: 2.5rem;
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.diwali-title p {
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  font-size: 1.2rem;
}

.diwali-subtitle {
  margin-top: 1rem;
}

.festival-badge {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, 
    rgba(255, 107, 0, 0.3), 
    rgba(255, 215, 0, 0.3)
  );
  border: 2px solid #ffd700;
  border-radius: 50px;
  color: #ffd700;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  box-shadow: 
    0 0 20px rgba(255, 215, 0, 0.4),
    inset 0 0 20px rgba(255, 215, 0, 0.2);
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4), inset 0 0 20px rgba(255, 215, 0, 0.2);
  }
  50% { 
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.6), inset 0 0 30px rgba(255, 215, 0, 0.3);
  }
}

/* Diwali Countdown */
.launch-countdown {
  display: flex;
  gap: 2rem;
  justify-content: center;
  padding: 3rem 0;
  position: relative;
  z-index: 2;
}

.diwali-countdown .countdown-unit {
  text-align: center;
}

.diwali-number {
  background: linear-gradient(135deg, 
    rgba(40, 20, 0, 0.9), 
    rgba(60, 30, 0, 0.8)
  );
  border: 3px solid #ff6b00;
  padding: 2rem 2.5rem;
  border-radius: 12px;
  position: relative;
  overflow: visible;
  box-shadow: 
    0 0 30px rgba(255, 107, 0, 0.5),
    inset 0 0 30px rgba(255, 215, 0, 0.2),
    0 10px 40px rgba(0, 0, 0, 0.6);
  animation: numberGlow 2s ease-in-out infinite;
}

@keyframes numberGlow {
  0%, 100% { 
    border-color: #ff6b00;
    box-shadow: 
      0 0 30px rgba(255, 107, 0, 0.5),
      inset 0 0 30px rgba(255, 215, 0, 0.2),
      0 10px 40px rgba(0, 0, 0, 0.6);
  }
  50% { 
    border-color: #ffd700;
    box-shadow: 
      0 0 50px rgba(255, 215, 0, 0.7),
      inset 0 0 40px rgba(255, 215, 0, 0.3),
      0 10px 40px rgba(0, 0, 0, 0.6);
  }
}

.diwali-number::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 215, 0, 0.5), 
    transparent
  );
}

.diwali-number .countdown-digit {
  font-family: var(--font-heading);
  font-size: 4rem;
  background: linear-gradient(180deg, 
    #ffd700, 
    #ff8c00
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  text-shadow: none;
  line-height: 1;
  animation: none;
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
}

/* Sparkles around numbers */
.sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #ffd700;
  border-radius: 50%;
  box-shadow: 0 0 15px #ffd700;
  animation: sparkleFloat 2s ease-in-out infinite;
}

.sparkle-1 {
  top: 10%;
  right: 10%;
  animation-delay: 0s;
}

.sparkle-2 {
  bottom: 10%;
  left: 10%;
  animation-delay: 1s;
}

@keyframes sparkleFloat {
  0%, 100% { 
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }
  50% { 
    transform: translateY(-10px) scale(1.5);
    opacity: 1;
  }
}

.diwali-countdown .countdown-label-text {
  font-family: var(--font-body);
  color: #ffd700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-top: 1rem;
  display: block;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* Diwali Message */
.diwali-message {
  text-align: center;
  margin-top: 3rem;
  position: relative;
  z-index: 2;
}

.diwali-greeting {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: #ffd700;
  margin-bottom: 1rem;
  text-shadow: 
    0 0 20px rgba(255, 215, 0, 0.6),
    0 0 40px rgba(255, 107, 0, 0.4);
  animation: textGlow 2s ease-in-out infinite;
}

@keyframes textGlow {
  0%, 100% { 
    text-shadow: 
      0 0 20px rgba(255, 215, 0, 0.6),
      0 0 40px rgba(255, 107, 0, 0.4);
  }
  50% { 
    text-shadow: 
      0 0 30px rgba(255, 215, 0, 0.8),
      0 0 60px rgba(255, 107, 0, 0.6);
  }
}

.diwali-offer {
  font-size: 1.2rem;
  color: #ff8c00;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Responsive Diwali Design */
@media (max-width: 768px) {
  .countdown-section-diwali {
    padding: 3rem 1rem !important;
  }

  .diwali-title h2 {
    font-size: 1.8rem;
  }

  .festival-badge {
    font-size: 0.9rem;
    padding: 0.6rem 1.5rem;
  }

  .launch-countdown {
    gap: 1rem;
    padding: 2rem 0;
  }

  .diwali-number {
    padding: 1.5rem 1.5rem;
  }

  .diwali-number .countdown-digit {
    font-size: 2.5rem;
  }

  .diwali-countdown .countdown-label-text {
    font-size: 0.75rem;
  }

  .diya {
    width: 40px;
    height: 40px;
  }

  .diya::before {
    font-size: 1.5rem;
  }

  .diwali-greeting {
    font-size: 1.2rem;
  }

  .diwali-offer {
    font-size: 1rem;
  }
}

.countdown-number-display {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  padding: 1.5rem 2rem;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.countdown-number-display::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-border);
}

.countdown-digit {
  font-family: var(--font-heading);
  font-size: 3rem;
  color: var(--color-primary);
  font-weight: 900;
  text-shadow: 0 0 20px var(--color-primary);
  line-height: 1;
  animation: flipNumber 1s ease-in-out infinite;
}

@keyframes flipNumber {
  0%, 100% { transform: rotateX(0deg); }
  50% { transform: rotateX(180deg); }
}

.countdown-label-text {
  font-family: var(--font-body);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 1rem;
}

/* ============================================
 * 6. NAVIGATION FEATURES (21-25)
 * ============================================ */

/* NAVIGATION FEATURES (21-25) */

/* #21 - MEGA MENU */
.mega-menu-container {
  position: relative;
}

.mega-menu-toggle {
  display: none;
}

.mega-menu-label {
  padding: 1rem 1.5rem;
  cursor: pointer;
  font-family: var(--font-heading);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color var(--transition-fast);
}

.mega-menu-label:hover {
  color: var(--color-secondary);
}

.mega-menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100vw;
  background: var(--color-surface);
  border-top: 2px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
  padding: 3rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: all var(--transition-fast);
  z-index: 1000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.mega-menu-toggle:checked ~ .mega-menu-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-menu-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
}

.mega-menu-column {
  border-left: 2px solid var(--color-border);
  padding-left: 1.5rem;
}

.mega-menu-title {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 1.1rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.mega-menu-list {
  list-style: none;
  padding: 0;
}

.mega-menu-item {
  margin-bottom: 0.75rem;
}

.mega-menu-link {
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9rem;
  transition: all var(--transition-fast);
  display: block;
  padding: 0.25rem 0;
}

.mega-menu-link:hover {
  color: var(--color-secondary);
  padding-left: 0.5rem;
}

/* #22 - SIDE NAVIGATION */
.sidenav-toggle {
  display: none;
}

.sidenav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
}

.sidenav-toggle:checked ~ .sidenav-overlay {
  opacity: 1;
  visibility: visible;
}

.sidenav {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  background: var(--color-surface);
  border-right: 2px solid var(--color-border);
  z-index: 9999;
  transform: translateX(-100%);
  transition: transform var(--transition-fast);
  overflow-y: auto;
}

.sidenav-toggle:checked ~ .sidenav {
  transform: translateX(0);
}

.sidenav-header {
  padding: 2rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidenav-title {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 1.5rem;
  margin: 0;
}

.sidenav-close {
  background: transparent;
  border: none;
  color: var(--color-text);
  font-size: 1.5rem;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.sidenav-close:hover {
  color: var(--color-secondary);
}

.sidenav-menu {
  list-style: none;
  padding: 1rem 0;
}

.sidenav-item {
  border-bottom: 1px solid var(--color-border);
}

.sidenav-link {
  display: block;
  padding: 1rem 2rem;
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 1px;
  transition: all var(--transition-fast);
}

.sidenav-link:hover {
  background: rgba(0, 255, 194, 0.1);
  color: var(--color-secondary);
  padding-left: 2.5rem;
}

/* #23 - FULLSCREEN MENU OVERLAY */
.fullscreen-menu-toggle {
  display: none;
}

.fullscreen-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 10, 0.98);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
}

.fullscreen-menu-toggle:checked ~ .fullscreen-menu {
  opacity: 1;
  visibility: visible;
}

.fullscreen-menu-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: transparent;
  border: 2px solid var(--color-secondary);
  color: var(--color-secondary);
  width: 50px;
  height: 50px;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.fullscreen-menu-close:hover {
  background: var(--color-secondary);
  color: var(--color-bg);
  transform: rotate(90deg);
}

.fullscreen-menu-nav {
  list-style: none;
  text-align: center;
}

.fullscreen-menu-item {
  margin: 2rem 0;
  opacity: 0;
  transform: translateY(20px);
  animation: menuItemSlide 0.5s ease-out forwards;
}

.fullscreen-menu-toggle:checked ~ .fullscreen-menu .fullscreen-menu-item {
  opacity: 1;
  transform: translateY(0);
}

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

.fullscreen-menu-item:nth-child(1) { animation-delay: 0.1s; }
.fullscreen-menu-item:nth-child(2) { animation-delay: 0.2s; }
.fullscreen-menu-item:nth-child(3) { animation-delay: 0.3s; }
.fullscreen-menu-item:nth-child(4) { animation-delay: 0.4s; }
.fullscreen-menu-item:nth-child(5) { animation-delay: 0.5s; }

.fullscreen-menu-link {
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 3rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all var(--transition-fast);
  display: inline-block;
  position: relative;
}

.fullscreen-menu-link::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--color-secondary);
  transition: width var(--transition-fast);
}

.fullscreen-menu-link:hover {
  color: var(--color-secondary);
  transform: translateX(20px);
}

.fullscreen-menu-link:hover::after {
  width: 100%;
}

/* #24 - MULTI-LEVEL DROPDOWN */
.multilevel-menu {
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.multilevel-item {
  position: relative;
  border-bottom: 1px solid var(--color-border);
}

.multilevel-item:last-child {
  border-bottom: none;
}

.submenu-toggle {
  display: none;
}

.multilevel-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.multilevel-link:hover {
  background: rgba(0, 255, 194, 0.1);
  color: var(--color-secondary);
  padding-left: 2rem;
}

.submenu-arrow {
  transition: transform var(--transition-fast);
}

.submenu-toggle:checked ~ .multilevel-link .submenu-arrow {
  transform: rotate(180deg);
}

.submenu {
  max-height: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  transition: max-height 0.5s ease-out;
}

.submenu-toggle:checked ~ .submenu {
  max-height: 500px;
}

.submenu-item {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.submenu-link {
  display: block;
  padding: 0.75rem 1.5rem 0.75rem 2.5rem;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  transition: all var(--transition-fast);
}

.submenu-link:hover {
  background: rgba(0, 255, 194, 0.05);
  color: var(--color-secondary);
  padding-left: 3rem;
}

/* #25 - HORIZONTAL SCROLL MENU */
.hscroll-menu-wrapper {
  position: relative;
  overflow: hidden;
  padding: 2rem 0;
}

.hscroll-menu {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--color-secondary) var(--color-bg);
  padding-bottom: 1rem;
}

.hscroll-menu::-webkit-scrollbar {
  height: 8px;
}

.hscroll-menu::-webkit-scrollbar-track {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.hscroll-menu::-webkit-scrollbar-thumb {
  background: var(--color-secondary);
  border-radius: 4px;
}

.hscroll-item {
  flex: 0 0 250px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 2rem;
  text-align: center;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.hscroll-item:hover {
  border-color: var(--color-secondary);
  transform: scale(1.05);
  box-shadow: 0 5px 20px rgba(0, 255, 194, 0.3);
}

.hscroll-icon {
  font-size: 3rem;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.hscroll-title {
  font-family: var(--font-heading);
  color: var(--color-text);
  font-size: 1.1rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.hscroll-desc {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* ============================================
 * 7. CONTENT FEATURES (26-30)
 * ============================================ */

/* CONTENT FEATURES (26-30) */

/* #26 - BEFORE/AFTER COMPARISON SLIDER */
.comparison-slider {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
  aspect-ratio: 16/9;
}

.comparison-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comparison-before {
  z-index: 2;
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
  transition: clip-path 0.3s ease;
  background: linear-gradient(135deg, #333, #111);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #666;
}

.comparison-after {
  background: linear-gradient(135deg, #ffd700, #00ffc2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #0a0a0a;
}

.comparison-slider-toggle {
  display: none;
}

.comparison-slider-toggle:checked ~ .comparison-before {
  clip-path: polygon(0 0, 80% 0, 80% 100%, 0 100%);
}

.comparison-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background: var(--color-secondary);
  z-index: 3;
  transform: translateX(-50%);
  transition: left 0.3s ease;
  cursor: ew-resize;
  box-shadow: 0 0 10px rgba(0, 255, 194, 0.5);
}

.comparison-slider-toggle:checked ~ .comparison-handle {
  left: 80%;
}

.comparison-handle::before {
  content: '◀ ▶';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-secondary);
  color: var(--color-bg);
  padding: 0.5rem;
  border-radius: 50%;
  font-size: 0.8rem;
  letter-spacing: 0.5rem;
}

.comparison-labels {
  position: absolute;
  top: 1rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 2rem;
  z-index: 4;
  pointer-events: none;
}

.comparison-label {
  background: rgba(0, 0, 0, 0.7);
  padding: 0.5rem 1rem;
  color: var(--color-text);
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1px;
}

/* #27 - LEARNING PATH ROADMAP */
.roadmap-section {
  padding: 4rem 0;
  position: relative;
}

.roadmap-path {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background: var(--color-border);
  transform: translateX(-50%);
}

.roadmap-path::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--color-secondary);
  animation: roadmapProgress 3s ease-out forwards;
}

@keyframes roadmapProgress {
  from { height: 0; }
  to { height: 50%; }
}

.roadmap-item {
  position: relative;
  margin-bottom: 4rem;
  display: flex;
  align-items: center;
}

.roadmap-item:nth-child(odd) {
  flex-direction: row-reverse;
}

.roadmap-content {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 2rem;
  position: relative;
  max-width: 45%;
}

.roadmap-item:nth-child(odd) .roadmap-content {
  margin-right: auto;
  margin-left: 55%;
}

.roadmap-item:nth-child(even) .roadmap-content {
  margin-left: auto;
  margin-right: 55%;
}

.roadmap-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  border: 4px solid var(--color-bg);
  border-radius: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  color: var(--color-bg);
  font-weight: 900;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.roadmap-title {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.roadmap-desc {
  color: var(--color-text);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.roadmap-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.roadmap-tag {
  padding: 0.25rem 0.75rem;
  background: rgba(0, 255, 194, 0.2);
  border: 1px solid var(--color-secondary);
  color: var(--color-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* #28 - INSTRUCTOR PROFILE CARDS */
.instructors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  padding: 3rem 0;
}

.instructor-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: all var(--transition-fast);
  position: relative;
}

.instructor-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
  transform: scaleX(0);
  transition: transform var(--transition-fast);
}

.instructor-card:hover::before {
  transform: scaleX(1);
}

.instructor-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 255, 194, 0.3);
}

.instructor-avatar {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--color-surface), var(--color-bg));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  color: var(--color-primary);
  overflow: hidden;
  position: relative;
}

.instructor-avatar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(255, 215, 0, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.instructor-card:hover .instructor-avatar::before {
  opacity: 1;
}

.instructor-avatar img,
.instructor-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  position: relative;
  z-index: 0;
}

.instructor-card:hover .instructor-avatar img,
.instructor-card:hover .instructor-image {
  transform: scale(1.1);
}

.instructor-info {
  padding: 1.5rem;
}

.instructor-name {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.instructor-role {
  color: var(--color-secondary);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

.instructor-bio {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.instructor-stats {
  display: flex;
  justify-content: space-around;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.instructor-stat {
  text-align: center;
}

.stat-value {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 1.5rem;
  font-weight: 900;
  display: block;
}

.stat-label {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* #29 - ACHIEVEMENT BADGES */
.badges-container {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 2rem 0;
}

.achievement-badge {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 3px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.achievement-badge:hover {
  transform: scale(1.1) rotate(5deg);
  border-color: var(--color-secondary);
  box-shadow: 0 0 30px rgba(0, 255, 194, 0.5);
}

.badge-unlocked {
  border-color: var(--color-primary);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(0, 255, 194, 0.2));
  animation: badgeGlow 2s ease-in-out infinite;
}

@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); }
  50% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.6); }
}

.badge-icon {
  font-size: 2.5rem;
  filter: grayscale(100%);
  opacity: 0.3;
  transition: all var(--transition-fast);
}

.badge-unlocked .badge-icon {
  filter: grayscale(0%);
  opacity: 1;
  animation: badgeRotate 3s ease-in-out infinite;
}

@keyframes badgeRotate {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(10deg); }
}

.badge-tooltip {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 0.75rem 1rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
  z-index: 100;
  pointer-events: none;
}

.achievement-badge:hover .badge-tooltip {
  opacity: 1;
  visibility: visible;
}

.badge-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-border);
}

.badge-name {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 0.85rem;
  display: block;
  margin-bottom: 0.25rem;
}

.badge-desc {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

/* #30 - COURSE SYLLABUS TIMELINE */
.syllabus-timeline {
  padding: 3rem 0;
}

.syllabus-week {
  margin-bottom: 3rem;
  position: relative;
}

.week-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.week-number {
  width: 60px;
  height: 60px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  color: var(--color-bg);
  font-size: 1.5rem;
  font-weight: 900;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.week-title {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 1.5rem;
  margin: 0;
}

.week-lessons {
  margin-left: 4.5rem;
  border-left: 2px solid var(--color-border);
  padding-left: 2rem;
}

.lesson-item {
  position: relative;
  padding: 1rem 0;
  margin-bottom: 1rem;
}

.lesson-item::before {
  content: '';
  position: absolute;
  left: -2.5rem;
  top: 1.5rem;
  width: 12px;
  height: 12px;
  background: var(--color-secondary);
  border: 2px solid var(--color-bg);
  border-radius: 50%;
}

.lesson-title {
  font-family: var(--font-heading);
  color: var(--color-text);
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.lesson-duration {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lesson-duration::before {
  content: '⏱';
}

/* ============================================
 * 8. ADVANCED INTERACTIONS (31-35)
 * ============================================ */

/* ADVANCED INTERACTIONS (31-35) */

/* #31 - SPLIT SCREEN LAYOUT */
.split-screen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
  border: 2px solid var(--color-border);
}

.split-panel {
  position: relative;
  overflow: hidden;
  transition: all var(--transition-fast);
}

.split-panel:hover {
  flex: 1.2;
}

.split-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  width: 80%;
}

.split-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: brightness(0.4);
  transition: all var(--transition-fast);
  z-index: 1;
}

.split-bg.split-frontend {
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.3),
    rgba(255, 140, 0, 0.3)
  );
}

.split-bg.split-backend {
  background: linear-gradient(
    135deg,
    rgba(0, 255, 194, 0.3),
    rgba(0, 140, 255, 0.3)
  );
}

.split-panel:hover .split-bg {
  filter: brightness(0.7);
  transform: scale(1.1);
}

.split-title {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 2.5rem;
  margin-bottom: 1rem;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.split-desc {
  color: var(--color-text);
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 2rem;
}

/* #32 - VIDEO MODAL LIGHTBOX */
.video-modal-toggle {
  display: none;
}

.video-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
}

.video-modal-toggle:checked ~ .video-modal-overlay {
  opacity: 1;
  visibility: visible;
}

.video-modal-content {
  position: relative;
  width: 90%;
  max-width: 1200px;
  aspect-ratio: 16/9;
  background: var(--color-bg);
  border: 3px solid var(--color-border);
  transform: scale(0.8);
  transition: transform var(--transition-fast);
}

.video-modal-toggle:checked ~ .video-modal-overlay .video-modal-content {
  transform: scale(1);
}

.video-modal-close {
  position: absolute;
  top: -50px;
  right: 0;
  background: var(--color-secondary);
  border: none;
  color: var(--color-bg);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-heading);
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.video-modal-close:hover {
  background: var(--color-primary);
  transform: translateY(-3px);
}

.video-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-surface), var(--color-bg));
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 3rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* #33 - ANNUAL/MONTHLY PRICE TOGGLE */
.price-toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 2rem 0;
}

.price-toggle-label {
  font-family: var(--font-heading);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1rem;
  transition: color var(--transition-fast);
}

.price-toggle-input {
  display: none;
}

.price-toggle-switch {
  position: relative;
  width: 70px;
  height: 35px;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 35px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.price-toggle-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 25px;
  height: 25px;
  background: var(--color-secondary);
  border-radius: 50%;
  transition: all var(--transition-fast);
  box-shadow: 0 0 10px rgba(0, 255, 194, 0.5);
}

.price-toggle-input:checked + .price-toggle-switch {
  border-color: var(--color-primary);
}

.price-toggle-input:checked + .price-toggle-switch .price-toggle-slider {
  left: calc(100% - 28px);
  background: var(--color-primary);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.price-toggle-input:checked ~ .price-toggle-label-monthly {
  color: var(--color-text);
}

.price-toggle-input:not(:checked) ~ .price-toggle-label-annual {
  color: var(--color-text);
}

.price-amount-monthly,
.price-amount-annual {
  display: none;
}

.price-toggle-input:checked ~ .pricing-section .price-amount-monthly {
  display: inline;
}

.price-toggle-input:not(:checked) ~ .pricing-section .price-amount-annual {
  display: inline;
}

/* #34 - STAR RATING DISPLAY */
.rating-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
}

.rating-stars {
  display: flex;
  gap: 0.25rem;
}

.star {
  font-size: 1.5rem;
  color: var(--color-text-muted);
  position: relative;
  display: inline-block;
}

.star-filled {
  color: var(--color-primary);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.star-half {
  position: relative;
  color: var(--color-text-muted);
}

.star-half::before {
  content: '★';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  overflow: hidden;
  color: var(--color-primary);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.rating-value {
  font-family: var(--font-heading);
  color: var(--color-text);
  font-size: 1.2rem;
  font-weight: 900;
}

.rating-count {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* #35 - SOCIAL PROOF NOTIFICATIONS */
.social-proof-container {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 999;
  max-width: 350px;
}

.social-proof-notification {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-secondary);
  padding: 1rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  animation: slideInLeft 0.5s ease-out, slideOutLeft 0.5s ease-in 8.5s forwards;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

.social-proof-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.social-proof-avatar {
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  color: var(--color-bg);
  font-size: 1.2rem;
}

.social-proof-name {
  font-family: var(--font-heading);
  color: var(--color-text);
  font-size: 0.95rem;
}

.social-proof-message {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.social-proof-time {
  color: var(--color-secondary);
  font-size: 0.75rem;
  margin-top: 0.5rem;
  display: block;
}

/* ============================================
 * 9. GAMIFICATION FEATURES (36-40)
 * ============================================ */

/* GAMIFICATION FEATURES (36-40) */

/* #36 - XP PROGRESS BAR */
.xp-bar-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  border-radius: 8px;
  margin: 2rem 0;
}

.xp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.xp-level {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.xp-amount {
  color: var(--color-text);
  font-size: 0.95rem;
}

.xp-current {
  color: var(--color-secondary);
  font-weight: 700;
}

.xp-bar {
  width: 100%;
  height: 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
  width: 65%;
  position: relative;
  animation: xpGrow 2s ease-out forwards;
  box-shadow: 0 0 15px rgba(0, 255, 194, 0.5);
}

@keyframes xpGrow {
  from { width: 0; }
  to { width: 65%; }
}

.xp-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: xpShine 2s ease-in-out infinite;
}

@keyframes xpShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* #37 - DAILY CHALLENGE CARD */
.daily-challenge {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(0, 255, 194, 0.1));
  border: 2px solid var(--color-border);
  border-radius: 12px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.daily-challenge::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.1), transparent);
  animation: challengeRotate 10s linear infinite;
}

@keyframes challengeRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.challenge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.challenge-badge {
  background: var(--color-primary);
  color: var(--color-bg);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.challenge-timer {
  font-family: var(--font-heading);
  color: var(--color-secondary);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.challenge-timer::before {
  content: '⏰';
}

.challenge-content {
  position: relative;
  z-index: 1;
}

.challenge-title {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.challenge-desc {
  color: var(--color-text);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.challenge-reward {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border-left: 3px solid var(--color-secondary);
}

.reward-icon {
  font-size: 2rem;
}

.reward-text {
  flex: 1;
}

.reward-amount {
  font-family: var(--font-heading);
  color: var(--color-secondary);
  font-size: 1.2rem;
  font-weight: 900;
}

/* #38 - LEADERBOARD TABLE */
.leaderboard-container {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}

.leaderboard-header {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(0, 255, 194, 0.2));
  padding: 2rem;
  text-align: center;
  border-bottom: 2px solid var(--color-border);
}

.leaderboard-title {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 2rem;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.leaderboard-table {
  width: 100%;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 80px 1fr 150px 150px;
  gap: 1rem;
  padding: 1.5rem;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  transition: all var(--transition-fast);
}

.leaderboard-row:hover {
  background: rgba(0, 255, 194, 0.05);
}

.leaderboard-row:nth-child(1) {
  background: rgba(255, 215, 0, 0.1);
}

.leaderboard-row:nth-child(2) {
  background: rgba(192, 192, 192, 0.1);
}

.leaderboard-row:nth-child(3) {
  background: rgba(205, 127, 50, 0.1);
}

.leaderboard-rank {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 900;
  text-align: center;
}

.leaderboard-row:nth-child(1) .leaderboard-rank {
  color: #FFD700;
  font-size: 2rem;
}

.leaderboard-row:nth-child(2) .leaderboard-rank {
  color: #C0C0C0;
  font-size: 1.8rem;
}

.leaderboard-row:nth-child(3) .leaderboard-rank {
  color: #CD7F32;
  font-size: 1.6rem;
}

.leaderboard-player {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.player-avatar {
  width: 50px;
  height: 50px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  color: var(--color-bg);
  font-size: 1.3rem;
}

.player-name {
  font-family: var(--font-heading);
  color: var(--color-text);
  font-size: 1.1rem;
}

.leaderboard-score {
  font-family: var(--font-heading);
  color: var(--color-secondary);
  font-size: 1.2rem;
  font-weight: 900;
  text-align: center;
}

.leaderboard-badge {
  text-align: center;
  font-size: 1.5rem;
}

/* #39 - STREAK COUNTER */
.streak-widget {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.streak-widget::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.1), transparent);
  opacity: 0;
  animation: streakPulse 2s ease-in-out infinite;
}

@keyframes streakPulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

.streak-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  animation: fireFlicker 1.5s ease-in-out infinite;
}

@keyframes fireFlicker {
  0%, 100% { transform: scale(1) rotate(0deg); filter: hue-rotate(0deg); }
  25% { transform: scale(1.1) rotate(-5deg); filter: hue-rotate(10deg); }
  75% { transform: scale(1.1) rotate(5deg); filter: hue-rotate(-10deg); }
}

.streak-count {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 3rem;
  font-weight: 900;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
  display: block;
  margin-bottom: 0.5rem;
}

.streak-label {
  font-family: var(--font-heading);
  color: var(--color-text);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 1.5rem;
}

.streak-calendar {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.streak-day {
  width: 30px;
  height: 30px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.streak-day.active {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-bg);
  box-shadow: 0 0 10px rgba(0, 255, 194, 0.5);
}

.streak-day.today {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  animation: todayBounce 1s ease-in-out infinite;
}

@keyframes todayBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* #40 - COURSE COMPLETION CHECKLIST */
.completion-checklist {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 12px;
  padding: 2rem;
}

.checklist-header {
  margin-bottom: 2rem;
}

.checklist-title {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.checklist-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.progress-text {
  color: var(--color-text);
  font-size: 0.9rem;
}

.progress-percentage {
  font-family: var(--font-heading);
  color: var(--color-secondary);
  font-size: 1.2rem;
  font-weight: 900;
}

.checklist-progress-bar {
  width: 100%;
  height: 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  overflow: hidden;
}

.checklist-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
  width: 60%;
  animation: checklistGrow 2s ease-out forwards;
  box-shadow: 0 0 10px rgba(0, 255, 194, 0.5);
}

@keyframes checklistGrow {
  from { width: 0; }
  to { width: 60%; }
}

.checklist-items {
  margin-top: 2rem;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 0.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  transition: all var(--transition-fast);
}

.checklist-item:hover {
  border-color: var(--color-secondary);
  background: rgba(0, 255, 194, 0.05);
}

.checklist-checkbox {
  display: none;
}

.checklist-checkmark {
  width: 30px;
  height: 30px;
  border: 2px solid var(--color-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.checklist-checkbox:checked ~ .checklist-checkmark {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  animation: checkmarkPop 0.3s ease-out;
}

@keyframes checkmarkPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.checklist-checkbox:checked ~ .checklist-checkmark::after {
  content: '✓';
  color: var(--color-bg);
  font-size: 1.2rem;
  font-weight: 900;
}

.checklist-text {
  flex: 1;
  color: var(--color-text);
  font-size: 0.95rem;
  transition: all var(--transition-fast);
}

.checklist-checkbox:checked ~ .checklist-text {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.checklist-points {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 0.9rem;
  font-weight: 900;
  padding: 0.25rem 0.75rem;
  background: rgba(255, 215, 0, 0.2);
  border: 1px solid var(--color-primary);
  border-radius: 12px;
}

/* RESPONSIVE STYLES */
@media (max-width: 768px) {
  /* Mega Menu */
  .mega-menu-content {
    grid-template-columns: 1fr;
  }
  
  /* Split Screen */
  .split-screen {
    grid-template-columns: 1fr;
  }
  
  /* Comparison Table */
  .comparison-table {
    font-size: 0.85rem;
  }
  
  .comparison-table th,
  .comparison-table td {
    padding: 0.75rem 0.5rem;
  }
  
  /* Roadmap */
  .roadmap-item {
    flex-direction: column !important;
  }
  
  .roadmap-content {
    max-width: 100% !important;
    margin: 0 !important;
  }
  
  /* Leaderboard */
  .leaderboard-row {
    grid-template-columns: 60px 1fr 100px;
    gap: 0.5rem;
  }
  
  .leaderboard-badge {
    display: none;
  }
  
  /* Steps */
  .steps-wrapper {
    flex-direction: column;
  }
  
  .steps-line {
    width: 2px;
    height: 100%;
    left: 25px;
    top: 0;
  }
  
  /* Tabs */
  .tab-controls {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  
  /* Video Grid */
  .video-grid {
    grid-template-columns: 1fr;
  }
  
  /* Fullscreen Menu */
  .fullscreen-menu-link {
    font-size: 2rem;
  }
}

/* INFINITE SCROLL MARQUEE */
.marquee-container {
  overflow: hidden;
  background: linear-gradient(90deg, rgba(0, 255, 194, 0.05), transparent, rgba(255, 215, 0, 0.05));
  padding: 1.5rem 0;
  margin-top: 3rem;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

.marquee-container::before,
.marquee-container::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.marquee-container::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg), transparent);
}

.marquee-container::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg), transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 30s linear infinite;
}

.marquee-content {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 2rem;
}

.marquee-item {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.marquee-separator {
  color: var(--color-secondary);
  font-size: 1.5rem;
  opacity: 0.5;
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.marquee-track:hover {
  animation-play-state: paused;
}

/* STUDENT REVIEWS SECTION */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.review-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 2rem;
  position: relative;
  transition: all 0.3s ease;
}

.review-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: linear-gradient(180deg, var(--color-secondary), var(--color-primary));
  transition: height 0.3s ease;
}

.review-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-secondary);
  box-shadow: 0 10px 30px rgba(0, 255, 194, 0.2);
}

.review-card:hover::before {
  height: 100%;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.reviewer-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.reviewer-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.avatar-initial {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-bg);
}

.reviewer-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.reviewer-name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--color-text);
  margin: 0;
}

.reviewer-batch {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-secondary);
  font-weight: 500;
  letter-spacing: 0.5px;
}

.review-rating {
  display: flex;
  gap: 0.25rem;
}

.star {
  color: var(--color-text-muted);
  font-size: 1.2rem;
}

.star.filled {
  color: var(--color-primary);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.review-text {
  color: var(--color-text);
  line-height: 1.8;
  margin: 0 0 1.5rem 0;
  font-size: 0.95rem;
  font-style: italic;
  position: relative;
  padding-left: 1rem;
  border-left: 2px solid var(--color-border);
}

.review-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
}

.review-date {
  color: var(--color-text-muted);
  font-family: var(--font-body);
}

.review-verified {
  color: var(--color-secondary);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* QUICK ACCESS SECTION */
.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.quick-access-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 2rem 1.5rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.quick-access-card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 255, 194, 0.1), transparent);
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
}

.quick-access-card:hover::before {
  width: 300px;
  height: 300px;
}

.quick-access-card:hover {
  transform: translateY(-8px);
  border-color: var(--color-secondary);
  box-shadow: 0 15px 40px rgba(0, 255, 194, 0.3);
}

.quick-access-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 255, 194, 0.1), rgba(255, 215, 0, 0.1));
  border: 2px solid var(--color-border);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.quick-access-icon svg {
  width: 30px;
  height: 30px;
  color: var(--color-secondary);
  transition: all 0.3s ease;
}

.quick-access-card:hover .quick-access-icon {
  background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
  border-color: var(--color-secondary);
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 0 20px rgba(0, 255, 194, 0.5);
}

.quick-access-card:hover .quick-access-icon svg {
  color: var(--color-bg);
  transform: scale(1.1);
}

.quick-access-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--color-text);
  margin: 0;
  font-weight: 700;
  letter-spacing: 1px;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.quick-access-card:hover .quick-access-title {
  color: var(--color-secondary);
}

.quick-access-desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.quick-access-card:hover .quick-access-desc {
  color: var(--color-text);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .reviews-grid {
    grid-template-columns: 1fr;
  }
  
  .quick-access-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  }
  
  .marquee-item {
    font-size: 1rem;
  }
}