/* Background gradient */
body {
  background: linear-gradient(135deg, #0a0a0a 0%, #111111 50%, #0a0a0a 100%);
  background-attachment: fixed;
}

/* Slide transitions */
.slide-enter { opacity: 0; transform: translateX(20px); }
.slide-enter-active { opacity: 1; transform: translateX(0); transition: all 0.4s ease-out; }
.slide-exit { opacity: 0; transform: translateX(-20px); transition: all 0.3s ease-in; }

/* Flip card */
.flip-card { perspective: 1000px; cursor: pointer; }
.flip-card-inner { transition: transform 0.6s; transform-style: preserve-3d; position: relative; }
.flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { backface-visibility: hidden; }
.flip-card-back { transform: rotateY(180deg); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Animated counter */
.counter { display: inline-block; }

/* Progress dots */
.progress-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.2); transition: all 0.3s; display: inline-block; margin: 0 4px; }
.progress-dot.active { background: #c8ee44; width: 24px; border-radius: 4px; }

/* Sidebar active state */
.module-item { transition: all 0.2s; border-right: 3px solid transparent; }
.module-item:hover { background: rgba(255,255,255,0.05); }
.module-item.active { background: rgba(200,238,68,0.1); border-right: 3px solid #c8ee44; }

/* Stat highlight */
.stat-highlight { color: #c8ee44; font-weight: 700; font-size: 2.5rem; line-height: 1.2; }

/* Comparison bar */
.comparison-bar { transition: width 1s ease-out; height: 100%; border-radius: 4px; }

/* Before/After slider */
.before-after { position: relative; overflow: hidden; display: flex; min-height: 200px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); }
.before-after-slider { position: absolute; top: 0; bottom: 0; width: 4px; background: #c8ee44; cursor: ew-resize; z-index: 10; left: 50%; }
.before-after-slider::after { content: '\27F7'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #c8ee44; color: black; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.before-panel { width: 50%; overflow: hidden; }
.after-panel { width: 50%; }

/* Package card expandable */
.package-details { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; }
.package-card.expanded .package-details { max-height: 300px; }

/* Responsive sidebar */
@media (max-width: 1023px) {
  #sidebar { transform: translateX(-100%); transition: transform 0.3s; position: fixed; z-index: 50; }
  #sidebar.open { transform: translateX(0); }
  #content { margin-left: 0; }
}
@media (min-width: 1024px) {
  #mobile-menu-btn { display: none !important; }
}

/* Slide content animations */
.reveal { opacity: 0; transform: translateY(20px); }
.reveal.visible { opacity: 1; transform: translateY(0); transition: all 0.5s ease-out; }

/* Package card hover */
.package-card { transition: transform 0.3s, box-shadow 0.3s; cursor: pointer; }
.package-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(200,238,68,0.15); }

/* Funnel layer */
.funnel-layer { cursor: pointer; transition: all 0.3s; }
.funnel-layer:hover { transform: scale(1.02); }
.funnel-detail { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; }
.funnel-layer.expanded .funnel-detail { max-height: 500px; }

/* Responsive font sizes */
@media (max-width: 767px) {
  .stat-highlight { font-size: 1.8rem; }
  #slide-container { padding: 1.5rem !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .stat-highlight { font-size: 2rem; }
  #slide-container { padding: 2rem !important; }
}