/* Design System - All colors in HSL format */
:root {
  --background: 0 0% 100%;
  --foreground: 210 50% 10%;
  --card: 0 0% 100%;
  --card-foreground: 210 50% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 210 50% 10%;
  --primary: 205 87% 29%;
  --primary-foreground: 0 0% 100%;
  --secondary: 187 71% 45%;
  --secondary-foreground: 0 0% 100%;
  --muted: 210 30% 96%;
  --muted-foreground: 210 15% 45%;
  --accent: 187 71% 45%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;
  --border: 210 20% 90%;
  --input: 210 20% 90%;
  --ring: 205 87% 29%;
  --radius: 0.5rem;
  
  /* Corporate Design System */
  --navy: 210 50% 10%;
  --corporate-blue: 205 87% 29%;
  --teal: 187 71% 45%;
  --light-gray: 210 30% 96%;
  --medium-gray: 210 15% 60%;
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, hsl(205 87% 29%), hsl(187 71% 45%));
  --gradient-overlay: linear-gradient(135deg, hsl(205 87% 29% / 0.9), hsl(187 71% 45% / 0.8));
  
  /* Shadows */
  --shadow-sm: 0 2px 8px hsl(210 50% 10% / 0.08);
  --shadow-md: 0 4px 16px hsl(210 50% 10% / 0.12);
  --shadow-lg: 0 8px 32px hsl(210 50% 10% / 0.16);
  
  /* Transitions */
  --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-base);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Container */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .container {
    padding: 0 2rem;
  }
}

/* Navigation */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: hsl(var(--background) / 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-sm);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-links {
  display: none;
  align-items: center;
  gap: 0.25rem;
}

@media (min-width: 1024px) {
  .nav-links {
    display: flex;
  }
}

.nav-link {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: var(--transition-base);
  color: hsl(var(--foreground));
}

.nav-link:hover {
  background-color: hsl(var(--muted));
}

.nav-link.active {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.mobile-menu-btn {
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: hsl(var(--foreground));
}

@media (min-width: 1024px) {
  .mobile-menu-btn {
    display: none;
  }
}

.mobile-menu {
  display: none;
  padding-bottom: 1rem;
  flex-direction: column;
  gap: 0.5rem;
}

.mobile-menu.open {
  display: flex;
}

@media (min-width: 1024px) {
  .mobile-menu {
    display: none !important;
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: var(--transition-base);
  text-decoration: none;
}

.btn-lg {
  padding: 1.5rem 2rem;
  font-size: 1.125rem;
}

.btn-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.btn-primary:hover {
  background-color: hsl(var(--primary) / 0.9);
}

.btn-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

.btn-secondary:hover {
  background-color: hsl(var(--secondary) / 0.9);
}

.btn-outline {
  background-color: transparent;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
}

.btn-outline:hover {
  background-color: hsl(var(--muted));
}

.btn-white {
  background-color: white;
  color: hsl(var(--primary));
}

.btn-white:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

/* Hero Section */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 80px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, hsl(205 87% 29% / 0.92), hsl(187 71% 45% / 0.85));
}

.hero-content {
  position: relative;
  z-index: 10;
  max-width: 56rem;
}

.hero h1 {
  font-size: 3rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1.5rem;
  line-height: 1.1;
}

@media (min-width: 768px) {
  .hero h1 {
    font-size: 3.75rem;
  }
}

@media (min-width: 1024px) {
  .hero h1 {
    font-size: 4.5rem;
  }
}

.hero p {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .hero p {
    font-size: 1.5rem;
  }
}

.hero-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .hero-buttons {
    flex-direction: row;
  }
}

/* Sections */
.section {
  padding: 5rem 0;
}

.section-muted {
  background-color: hsl(var(--muted));
}

.section-gradient {
  background: var(--gradient-primary);
  color: white;
}

.section-title {
  text-align: center;
  margin-bottom: 4rem;
}

.section-title h2 {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: hsl(var(--foreground));
}

.section-gradient .section-title h2 {
  color: white;
}

@media (min-width: 768px) {
  .section-title h2 {
    font-size: 3rem;
  }
}

.section-title p {
  font-size: 1.25rem;
  color: hsl(var(--muted-foreground));
  max-width: 42rem;
  margin: 0 auto;
}

.section-gradient .section-title p {
  color: rgba(255, 255, 255, 0.9);
}

/* Grid */
.grid {
  display: grid;
  gap: 2rem;
}

.grid-1 {
  grid-template-columns: 1fr;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 767px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) {
  .grid-md-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-md-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-lg-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .grid-lg-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Cards */
.card {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  border-color: hsl(var(--primary) / 0.5);
}

.card-content {
  padding: 2rem;
}

/* Icon Wrapper */
.icon-wrapper {
  position: relative;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1.25rem;
  transition: var(--transition-base);
}

.icon-wrapper:hover {
  transform: translateY(-4px) scale(1.05);
}

.icon-box {
  position: absolute;
  inset: 0;
  background: var(--gradient-primary);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px hsl(var(--primary) / 0.25);
  transition: var(--transition-base);
}

.icon-box svg {
  width: 2rem;
  height: 2rem;
  color: white;
  position: relative;
  z-index: 10;
}

.icon-glow {
  box-shadow: 0 4px 20px hsl(var(--primary) / 0.25);
}

.icon-glow:hover {
  box-shadow: 0 8px 30px hsl(var(--primary) / 0.4), 0 0 40px hsl(var(--secondary) / 0.3);
  animation: pulse-glow 2s ease-in-out infinite;
}

.icon-blur {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, hsl(var(--primary) / 0.4), hsl(var(--secondary) / 0.4));
  border-radius: 1rem;
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s;
}

.card:hover .icon-blur {
  opacity: 0.7;
}

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

@media (min-width: 1024px) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

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

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: hsl(var(--primary));
  margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .stat-number {
    font-size: 3rem;
  }
}

.stat-label {
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}

/* Forms */
.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  transition: var(--transition-base);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.form-textarea {
  resize: vertical;
  min-height: 150px;
}

/* Footer */
.footer {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding: 3rem 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.footer-section h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.footer-section h4 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.footer-section p {
  color: hsl(var(--primary-foreground) / 0.8);
  margin-bottom: 1rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-links a {
  color: hsl(var(--primary-foreground) / 0.8);
  transition: var(--transition-base);
}

.footer-links a:hover {
  color: hsl(var(--secondary));
}

.footer-social {
  display: flex;
  gap: 1rem;
}

.footer-social a {
  color: hsl(var(--primary-foreground) / 0.8);
  transition: var(--transition-base);
}

.footer-social a:hover {
  color: hsl(var(--secondary));
}

.footer-social svg {
  width: 1.25rem;
  height: 1.25rem;
}

.footer-bottom {
  border-top: 1px solid hsl(var(--primary-foreground) / 0.2);
  padding-top: 2rem;
  text-align: center;
  color: hsl(var(--primary-foreground) / 0.6);
}

/* Contact Info Cards */
.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: -3rem;
  position: relative;
  z-index: 10;
}

@media (min-width: 768px) {
  .contact-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .contact-info-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.contact-card {
  text-align: center;
}

.contact-card .icon-wrapper {
  margin: 0 auto 1.25rem;
  width: 3.5rem;
  height: 3.5rem;
}

.contact-card h3 {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.contact-card a,
.contact-card p {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  transition: var(--transition-base);
}

.contact-card a:hover {
  color: hsl(var(--primary));
}

/* Process Steps */
.process-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.process-number {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  background: var(--gradient-primary);
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.25rem;
  box-shadow: 0 4px 20px hsl(var(--primary) / 0.25);
  transition: var(--transition-base);
}

.process-step:hover .process-number {
  transform: scale(1.1);
}

.process-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.process-content p {
  color: hsl(var(--muted-foreground));
}

/* Animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px hsl(var(--primary) / 0.3);
  }
  50% {
    box-shadow: 0 0 30px hsl(var(--secondary) / 0.5), 0 0 40px hsl(var(--primary) / 0.3);
  }
}

.icon-float {
  animation: float 3s ease-in-out infinite;
}

/* Utility Classes */
.text-center {
  text-align: center;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mt-8 {
  margin-top: 2rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.pt-20 {
  padding-top: 5rem;
}

.min-h-screen {
  min-height: 100vh;
}

/* Hero Variants */
.hero-small {
  min-height: 50vh;
}

.hero-medium {
  min-height: 60vh;
}

/* Page Hero */
.page-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  padding-top: 80px;
  background: var(--gradient-primary);
  color: white;
}

.page-hero h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .page-hero h1 {
    font-size: 3.75rem;
  }
}

.page-hero p {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

/* Course Details (Course.html) */

:root{
  --course-hero1: hsl(205 87% 29%);
  --course-hero2: hsl(187 71% 45%);
  --course-bg: hsl(210 30% 96%);
  --course-muted: hsl(210 15% 60%);
  --course-border: hsl(210 20% 90%);
}

/* Sticky sidebar + layout */
.course-wrap{padding-top: 7rem; padding-bottom: 3.5rem;}
.course-layout{display:grid; gap:1.5rem; grid-template-columns: 1fr;}
@media(min-width:1024px){.course-layout{grid-template-columns: 1fr 360px; align-items:start;}}

/* Hero */
.course-hero{position:relative; padding: 5.5rem 0 2.75rem; overflow:hidden;}
.course-hero::before{content:""; position:absolute; inset:-1px; background: linear-gradient(135deg, hsl(205 87% 29% / .95), hsl(187 71% 45% / .88)); z-index:0;}
.course-hero::after{content:""; position:absolute; inset:-100px; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 40%), radial-gradient(circle at 70% 40%, rgba(255,255,255,.12), transparent 45%); z-index:0;}
.course-hero .container{position:relative; z-index:1;}
.course-hero-title{color:#fff; font-size:2.25rem; line-height:1.15; font-weight:800; margin-bottom: .75rem;}
@media(min-width:768px){.course-hero-title{font-size:3.1rem;}}
.course-hero-subtitle{color: rgba(255,255,255,.9); font-size:1.05rem; max-width: 62ch; margin-bottom: 1.5rem;}
.course-hero-actions{display:flex; flex-wrap:wrap; gap:.75rem;}

.btn-primary-action{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.9rem 1.15rem; border-radius:.9rem; border:1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.13); color:#fff; font-weight:700; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; text-decoration:none;}
.btn-primary-action:hover{transform: translateY(-1px); background: rgba(255,255,255,.18); box-shadow: 0 10px 30px rgba(0,0,0,.18);} 

.btn-secondary-action{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.9rem 1.15rem; border-radius:.9rem; border:1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.15); color:#fff; font-weight:700; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; text-decoration:none;}
.btn-secondary-action:hover{transform: translateY(-1px); background: rgba(0,0,0,.22); box-shadow: 0 10px 30px rgba(0,0,0,.18);} 

/* Cards */
.course-card{background:#fff; border:1px solid var(--course-border); border-radius:1.1rem; box-shadow: 0 10px 30px rgba(0,0,0,.05);}
.course-card-inner{padding:1.25rem;}

/* Meta */
.course-meta-grid{display:grid; grid-template-columns: 1fr 1fr; gap:.75rem; margin-top: 1.25rem;}
@media(min-width:768px){.course-meta-grid{grid-template-columns: repeat(4, 1fr);}}
.course-meta-item{background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:.9rem; padding:.75rem .75rem; color:#fff;}
.course-meta-item .k{font-size:.8rem; color: rgba(255,255,255,.85); margin-bottom:.25rem;}
.course-meta-item .v{font-weight:400; font-size:.95rem; font-style: normal;}
/*cours icon*/ 


/* Sections */
.course-section{margin-bottom: 1.5rem;}
.course-section h2{font-size:1.35rem; font-weight:850; margin-bottom: .9rem;}

/* --- Pricing Card Styling --- */
.sidebar-card {
  background-color: #f3f4f6; /* Light gray matching the screenshot */
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
  text-align: center;
  position: sticky;
  top: 100px; /* Aligned with sticky navbar */
}

.sidebar-price {
  font-size: 40px;
  font-weight: 700;
  color: hsl(var(--primary)); /* Matches the teal primary */
  margin: 15px 0;
  display: block;
}

.sidebar-btn.primary {
  display: block;
  width: 100%;
  background: hsl(var(--primary));
  color: white;
  border-radius: 8px;
  padding: 14px;
  font-weight: 600;
}

/* --- Feature Grid Styling --- */
/* We will target your .overview-grid to match the 4-column layout */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns for the desktop features */
  gap: 15px;
  margin-bottom: 50px;
}

.overview-item {
  background: #f9fafb;
  border: none; /* Screenshot shows cards without borders */
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
  text-align: left;
}

.overview-item .icon-box {
  background: hsl(var(--primary));
  width: 36px;
  height: 36px;
  border-radius: 8px;
  margin-bottom: 15px;
}

.overview-item .icon-box svg {
  width: 20px;
  height: 20px;
}

.overview-item .t {
  font-size: 15px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 5px;
}

.overview-item .d {
  font-size: 14px;
  color: var(--muted-foreground);
  font-weight: 500;
}

/* Overview grid */
.overview-grid{display:grid; grid-template-columns: 1fr; gap:1rem;}
@media(min-width:768px){.overview-grid{grid-template-columns: repeat(3, 1fr);}}
.overview-item{background:#fff; border:1px solid var(--course-border); border-radius:1rem; padding:1rem; transition: transform .15s ease, box-shadow .2s ease;}
.overview-item:hover{transform: translateY(-2px); box-shadow: 0 12px 35px rgba(0,0,0,.08);} 
.overview-item .icon{width:40px; height:40px; border-radius:.9rem; display:flex; align-items:center; justify-content:center; background: var(--gradient-primary); color:#fff; margin-bottom:.6rem;}
.overview-item .t{font-weight:800; margin-bottom:.15rem;}
.overview-item .d{color: var(--course-muted); font-weight:600;}

/* Outcomes */
.outcomes-grid{display:grid; grid-template-columns: 1fr; gap:.75rem;}
@media(min-width:768px){.outcomes-grid{grid-template-columns: 1fr 1fr;}}
.outcome-item{display:flex; gap:.75rem; align-items:flex-start; background:#fff; border:1px solid var(--course-border); border-radius:1rem; padding: .95rem; transition: transform .15s ease, box-shadow .2s ease;}
.outcome-item:hover{transform: translateY(-2px); box-shadow: 0 12px 35px rgba(0,0,0,.08);} 
.outcome-icon{width:34px; height:34px; border-radius:.9rem; background: var(--gradient-primary); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; flex-shrink:0;}
.outcome-text{font-weight:400; color:hsl(var(--foreground));}

/* Accordion */
.accordion{display:flex; flex-direction:column; gap:.75rem;}
.accordion-item{border:1px solid var(--course-border); border-radius:1rem; overflow:hidden; background:#fff;}
.accordion-header{display:flex; align-items:center; justify-content:space-between; padding:1rem 1rem; cursor:pointer; gap:1rem;}
.accordion-header h3{font-weight:400; font-size:1rem;}
.accordion-toggle{width:34px; height:34px; border-radius:.9rem; background: hsl(210 30% 96%); display:flex; align-items:center; justify-content:center; font-weight:500; transition: transform .2s ease, background .2s ease;}
.accordion-content{max-height:0; overflow:hidden; transition: max-height .35s ease; background: #fbfcff;}
.accordion-item.active .accordion-content{max-height: 320px;}
.accordion-item.active .accordion-toggle{transform: rotate(45deg); background: hsl(187 71% 45% / .15);} 
.accordion-body{padding: 0 1rem 1rem 1rem;}
.accordion-body ul{padding-left: 1.25rem; margin: .25rem 0 0; color: var(--course-muted); font-weight:600;}
.accordion-body li{margin:.35rem 0;}

.toggle-all-btn{padding:.7rem 1rem; border-radius:.9rem; margin: 2%; border:1px solid var(--course-border); background: var(--gradient-primary); font-weight:bold; color: #fbfcff; cursor:pointer; transition: transform .15s ease, box-shadow .2s ease;}
.toggle-all-btn:hover{transform: translateY(-1px); box-shadow: 0 12px 35px rgba(0,0,0,.08);} 

/* Sticky sidebar */
.course-sidebar{position: relative; top: 6.5rem;}
@media(max-width:1023px){.course-sidebar{top:0;}} 
.sidebar-card{position:sticky; top:6.5rem;}
@media(max-width:1023px){.sidebar-card{position:relative; top:0;}}
.sidebar-inner{padding:1.15rem; display:flex; flex-direction:column; gap:.9rem;}
.sidebar-title{font-weight:900; font-size:1.1rem; display:flex; align-items:center; justify-content:space-between;}
.sidebar-price{font-size:1.35rem; font-weight:950; color:hsl(205 87% 29%);}
.sidebar-meta{display:grid; gap:.5rem;}
.sidebar-line{display:flex; gap:.7rem; justify-content:space-between; color: var(--course-muted); font-weight:400;}
.sidebar-line b{color:hsl(var(--foreground));}
.sidebar-actions{display:flex; flex-direction:column; gap:.65rem;}
.sidebar-btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem .95rem; border-radius:.9rem; font-weight:400; text-decoration:none; border:1px solid var(--course-border); background:#fff; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;}
.sidebar-btn:hover{transform: translateY(-2px); box-shadow: 0 12px 35px rgba(0,0,0,.08);} 
.sidebar-btn.primary{border-color: rgba(205,137,29,.2); background: var(--gradient-primary); color:#fff; border:none;}
.sidebar-btn.primary:hover{background: linear-gradient(135deg, hsl(205 87% 29% / .95), hsl(187 71% 45% / .95));}

/* Skeletons / empty states */
.skeleton{background: linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.12), rgba(0,0,0,.06)); background-size: 200% 100%; animation: skeletonShimmer 1.2s ease-in-out infinite; border-radius:.85rem;}
@keyframes skeletonShimmer{0%{background-position: 100% 0;} 100%{background-position: -100% 0;}}

/* Course sections wrapper from original */
.course-content{padding: 2rem 0 3rem; background: hsl(210 30% 96% / .28); border-top: 1px solid rgba(0,0,0,.04);} 
.course-buttons{display:flex; flex-wrap:wrap; gap:.75rem; margin-top: 1.25rem;}

/* Legacy fallback styles below */

/* 404 Page */
.not-found {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background-color: hsl(var(--muted));
}

.not-found-content {
  text-align: center;
}

.not-found-content h1 {
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.not-found-content p {
  font-size: 1.25rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1rem;
}

.not-found-content a {
  color: hsl(var(--primary));
  text-decoration: underline;
}

.not-found-content a:hover {
  color: hsl(var(--primary) / 0.9);
}