/* ==================================
   PyLand - Компонентные стили
   ================================== */

/* === КНОПКИ === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-6);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-200);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Размеры кнопок */
.btn-sm {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--text-sm);
}

.btn-lg {
  padding: var(--spacing-4) var(--spacing-8);
  font-size: var(--text-lg);
}

.btn-xl {
  padding: var(--spacing-5) var(--spacing-10);
  font-size: var(--text-xl);
}

/* Основная кнопка */
.btn-primary {
  background: var(--gradient-primary);
  color: white;
  border-color: var(--primary-600);
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
  text-decoration: none;
  color: white;
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-md);
}

/* Вторичная кнопка */
.btn-secondary {
  background: var(--gray-100);
  color: var(--gray-800);
  border-color: var(--gray-300);
}

.btn-secondary:hover {
  background: var(--gray-200);
  color: var(--gray-900);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Контурная кнопка */
.btn-outline {
  background: transparent;
  color: var(--primary-600);
  border-color: var(--primary-600);
}

.btn-outline:hover {
  background: var(--primary-600);
  color: white;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Кнопка-призрак */
.btn-ghost {
  background: transparent;
  color: var(--gray-600);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--gray-100);
  color: var(--gray-800);
  text-decoration: none;
}

/* Кнопка успеха */
.btn-success {
  background: var(--gradient-success);
  color: white;
  border-color: var(--success-600);
}

.btn-success:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
  color: white;
  text-decoration: none;
}

/* Кнопка предупреждения */
.btn-warning {
  background: linear-gradient(135deg, var(--warning-400) 0%, var(--warning-600) 100%);
  color: white;
  border-color: var(--warning-600);
}

.btn-warning:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
  color: white;
  text-decoration: none;
}

/* Кнопка ошибки */
.btn-error {
  background: linear-gradient(135deg, var(--error-400) 0%, var(--error-600) 100%);
  color: white;
  border-color: var(--error-600);
}

.btn-error:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
  color: white;
  text-decoration: none;
}

/* Полноширинная кнопка */
.btn-full {
  width: 100%;
}

/* Группа кнопок */
.btn-group {
  display: inline-flex;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.btn-group .btn {
  border-radius: 0;
  border-right-width: 1px;
}

.btn-group .btn:first-child {
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
}

.btn-group .btn:last-child {
  border-top-right-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  border-right-width: 2px;
}

/* === КАРТОЧКИ === */
.card {
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all var(--transition-normal);
  border: 1px solid var(--gray-200);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.card-header {
  padding: var(--spacing-6);
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
}

.card-body {
  padding: var(--spacing-6);
}

.card-footer {
  padding: var(--spacing-6);
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
}

/* Карточка с градиентом */
.card-gradient {
  background: var(--gradient-primary);
  color: white;
  border: none;
}

.card-gradient .card-header,
.card-gradient .card-footer {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Стеклянная карточка */
.card-glass {
  background: var(--gradient-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Карточка курса */
.course-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-normal);
}

.course-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-2xl);
}

.course-card-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.course-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.course-card:hover .course-card-image img {
  transform: scale(1.1);
}

.course-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
  display: flex;
  align-items: flex-end;
  padding: var(--spacing-6);
  color: white;
}

.course-card-content {
  padding: var(--spacing-6);
}

.course-card-title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--spacing-2);
  color: var(--gray-900);
}

.course-card-description {
  color: var(--gray-600);
  margin-bottom: var(--spacing-4);
  line-height: var(--leading-relaxed);
}

.course-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--gray-200);
}

.course-card-price {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--primary-600);
}

.course-card-rating {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  color: var(--warning-500);
}

/* === ФОРМЫ === */
.form-group {
  margin-bottom: var(--spacing-6);
}

.form-label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--spacing-2);
  color: var(--gray-800);
  font-size: var(--text-sm);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--gray-800);
  background: white;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-200);
}

.form-input:invalid,
.form-textarea:invalid,
.form-select:invalid {
  border-color: var(--error-500);
}

.form-input:invalid:focus,
.form-textarea:invalid:focus,
.form-select:invalid:focus {
  box-shadow: 0 0 0 3px var(--error-200);
}

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

.form-help {
  margin-top: var(--spacing-1);
  font-size: var(--text-sm);
  color: var(--gray-600);
}

.form-error {
  margin-top: var(--spacing-1);
  font-size: var(--text-sm);
  color: var(--error-600);
}

/* Стилизованный чекбокс */
.form-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3);
  cursor: pointer;
  user-select: none;
}

.form-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.form-checkbox-mark {
  width: 20px;
  height: 20px;
  border: 2px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: white;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-checkbox input[type="checkbox"]:checked + .form-checkbox-mark {
  background: var(--primary-600);
  border-color: var(--primary-600);
}

.form-checkbox input[type="checkbox"]:checked + .form-checkbox-mark::after {
  content: '✓';
  color: white;
  font-size: 14px;
  font-weight: bold;
}

.form-checkbox:hover .form-checkbox-mark {
  border-color: var(--primary-400);
}

/* === БЕЙДЖИ === */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge-primary {
  background: var(--primary-100);
  color: var(--primary-800);
}

.badge-secondary {
  background: var(--gray-100);
  color: var(--gray-800);
}

.badge-success {
  background: var(--success-100);
  color: var(--success-800);
}

.badge-warning {
  background: var(--warning-100);
  color: var(--warning-800);
}

.badge-error {
  background: var(--error-100);
  color: var(--error-800);
}

/* === АЛЕРТЫ === */
.alert {
  padding: var(--spacing-4) var(--spacing-6);
  border-radius: var(--radius-lg);
  border: 1px solid;
  margin-bottom: var(--spacing-4);
  position: relative;
}

.alert-success {
  background: var(--success-50);
  border-color: var(--success-200);
  color: var(--success-800);
}

.alert-warning {
  background: var(--warning-50);
  border-color: var(--warning-200);
  color: var(--warning-800);
}

.alert-error {
  background: var(--error-50);
  border-color: var(--error-200);
  color: var(--error-800);
}

.alert-info {
  background: var(--primary-50);
  border-color: var(--primary-200);
  color: var(--primary-800);
}

.alert-title {
  font-weight: 600;
  margin-bottom: var(--spacing-1);
}

.alert-close {
  position: absolute;
  top: var(--spacing-2);
  right: var(--spacing-2);
  background: none;
  border: none;
  font-size: var(--text-lg);
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.alert-close:hover {
  opacity: 1;
}

/* === ПРОГРЕСС-БАР === */
.progress {
  width: 100%;
  height: 2px;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.progress-bar {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
  position: relative;
  overflow: hidden;
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer 2s infinite;
}

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

.progress-lg {
  height: 12px;
}

.progress-xl {
  height: 16px;
}

/* === МОДАЛЬНЫЕ ОКНА === */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.9) translateY(20px);
  transition: transform var(--transition-normal);
}

.modal-overlay.active .modal {
  transform: scale(1) translateY(0);
}

.modal-header {
  padding: var(--spacing-6);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: var(--text-2xl);
  cursor: pointer;
  color: var(--gray-500);
  transition: color var(--transition-fast);
}

.modal-close:hover {
  color: var(--gray-700);
}

.modal-body {
  padding: var(--spacing-6);
}

.modal-footer {
  padding: var(--spacing-6);
  border-top: 1px solid var(--gray-200);
  display: flex;
  gap: var(--spacing-3);
  justify-content: flex-end;
}

/* === НАВИГАЦИЯ === */
.nav {
  display: flex;
  gap: var(--spacing-6);
  align-items: center;
}

.nav-link {
  color: var(--gray-600);
  font-weight: 500;
  text-decoration: none;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  position: relative;
}

.nav-link:hover,
.nav-link.active {
  color: var(--primary-600);
  background: var(--primary-50);
  text-decoration: none;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: var(--spacing-3);
  right: var(--spacing-3);
  height: 2px;
  background: var(--primary-600);
  border-radius: var(--radius-full);
}

/* === РАЗДЕЛИТЕЛИ === */
.divider {
  height: 1px;
  background: var(--gray-200);
  margin: var(--spacing-6) 0;
}

.divider-vertical {
  width: 1px;
  background: var(--gray-200);
  margin: 0 var(--spacing-6);
}

/* === ЗАГРУЗЧИКИ === */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--gray-200);
  border-top: 2px solid var(--primary-600);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner-lg {
  width: 40px;
  height: 40px;
  border-width: 4px;
}

/* === ТУЛТИПЫ === */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gray-900);
  color: white;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
  z-index: var(--z-tooltip);
  margin-bottom: var(--spacing-2);
}

.tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--gray-900);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
}

.tooltip:hover::after,
.tooltip:hover::before {
  opacity: 1;
  visibility: visible;
}

/* === NEW ABOUT PAGE COMPONENTS === */

/* About Hero */
.about-hero {
  min-height: 100vh;
  background: linear-gradient(135deg, 
    var(--primary-900) 0%, 
    var(--primary-800) 25%, 
    var(--primary-600) 75%, 
    var(--primary-500) 100%
  );
  color: white;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.about-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.05) 0%, transparent 50%);
  pointer-events: none;
}

.about-hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-16);
  align-items: center;
  position: relative;
  z-index: 1;
}

.about-badge {
  display: inline-block;
  padding: var(--spacing-2) var(--spacing-4);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--spacing-6);
  backdrop-filter: blur(10px);
}

.about-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 var(--spacing-6) 0;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.about-description {
  font-size: var(--text-xl);
  line-height: 1.6;
  margin: 0 0 var(--spacing-8) 0;
  opacity: 0.9;
}

.about-stats {
  display: flex;
  gap: var(--spacing-8);
}

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

.about-hero .stat-number,
.about-stat .stat-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 900;
  color: #ffd700 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.about-hero .stat-label,
.about-stat .stat-label {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.9) !important;
  margin-top: var(--spacing-1);
  font-weight: 600;
}

.feature-content h4 {
  margin: 0 0 var(--spacing-2) 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--gray-900);
}

.feature-content p {
  margin: 0;
  color: var(--gray-600);
  font-size: var(--text-base);
  line-height: 1.6;
}

/* Team Grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-8);
  margin-top: var(--spacing-12);
}

.team-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--spacing-8);
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  transition: all var(--transition-smooth);
}

.team-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-200);
}

.team-avatar {
  margin-bottom: var(--spacing-6);
}

.avatar-placeholder {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--primary-100), var(--primary-200));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  border: 4px solid white;
  box-shadow: var(--shadow-md);
}

.team-name {
  margin: 0 0 var(--spacing-2) 0;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
}

.team-role {
  margin: 0 0 var(--spacing-4) 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--primary-600);
}

.team-bio {
  margin: 0 0 var(--spacing-6) 0;
  font-size: var(--text-sm);
  color: var(--gray-600);
  line-height: 1.6;
}

.team-skills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  justify-content: center;
}

.skill-tag {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: var(--radius-full);
  border: 1px solid var(--gray-200);
}

/* Values Grid */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-8);
  margin-top: var(--spacing-12);
}

.value-card {
  text-align: center;
  padding: var(--spacing-6);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all var(--transition-smooth);
}

.value-card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.value-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-4);
  display: block;
}

.value-title {
  margin: 0 0 var(--spacing-4) 0;
  font-size: var(--text-xl);
  font-weight: 700;
  color: white;
}

.value-description {
  margin: 0;
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

/* Image Placeholder */
.image-placeholder {
  width: 100%;
  height: 400px;
  background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--primary-300);
}

.placeholder-content {
  text-align: center;
  color: var(--primary-600);
}

.placeholder-icon {
  font-size: 4rem;
  display: block;
  margin-bottom: var(--spacing-4);
}

.placeholder-content p {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
}

/* Innovation Section */
.innovation-section {
  padding: var(--spacing-16) 0;
  background: var(--gray-50);
}

.innovation-header {
  margin-bottom: var(--spacing-12);
}

.innovation-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0 0 var(--spacing-4) 0;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.innovation-subtitle {
  font-size: var(--text-lg);
  color: var(--gray-600);
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.innovation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-8);
  margin-top: var(--spacing-8);
}

.innovation-card {
  background: white;
  padding: var(--spacing-8);
  border-radius: var(--radius-2xl);
  text-align: center;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-200);
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
  color: var(--gray-800);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.innovation-card h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  margin: var(--spacing-4) 0 var(--spacing-2) 0;
  color: var(--gray-900);
}

.innovation-card p {
  font-size: var(--text-base);
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

.innovation-card.floating {
  animation: floating 6s ease-in-out infinite;
}

.innovation-card:nth-child(even) { animation-delay: -2s; }
.innovation-card:nth-child(odd) { animation-delay: -1s; }

.innovation-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: var(--shadow-2xl);
  border-color: var(--primary-300);
}

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

.innovation-card:hover::before {
  left: 100%;
}

.innovation-icon {
  margin-bottom: var(--spacing-4);
}

.icon-circle {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

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

/* Philosophy Section */
.philosophy-section {
  padding: var(--spacing-16) 0 var(--spacing-20) 0;
  background: white;
}

.philosophy-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-16);
  align-items: center;
}

.philosophy-title {
  font-size: 3rem;
  font-weight: 800;
  margin: 0 0 var(--spacing-8) 0;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.philosophy-quote blockquote {
  font-size: var(--text-xl);
  font-style: italic;
  line-height: 1.6;
  margin: 0 0 var(--spacing-4) 0;
  padding: var(--spacing-6);
  background: var(--gray-50);
  border-left: 4px solid var(--primary-500);
  border-radius: var(--radius-lg);
}

.philosophy-quote cite {
  color: var(--gray-600);
  font-size: var(--text-base);
  font-weight: 600;
}

.philosophy-principles {
  margin-top: var(--spacing-8);
}

.principle {
  display: flex;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
  padding: var(--spacing-4);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
}

.principle:hover {
  background: var(--gray-50);
  transform: translateX(8px);
}

.principle-number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--gradient-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--text-lg);
}

/* Brain Network Animation */
.brain-network {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.network-node {
  position: absolute;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--primary-400), var(--primary-600));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  animation: pulse 2s ease-in-out infinite;
}

.node-1 { top: 0; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.node-2 { top: 50%; right: 0; transform: translateY(-50%); animation-delay: 0.5s; }
.node-3 { bottom: 0; left: 50%; transform: translateX(-50%); animation-delay: 1s; }
.node-4 { top: 50%; left: 0; transform: translateY(-50%); animation-delay: 1.5s; }

.network-connection {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-300), var(--primary-500));
  border-radius: 1px;
  animation: connectionFlow 3s ease-in-out infinite;
}

.conn-1 { 
  top: 30px; left: 60px; width: 120px; 
  transform: rotate(45deg); 
  animation-delay: 0s;
}
.conn-2 { 
  top: 150px; right: 60px; width: 120px; 
  transform: rotate(-45deg); 
  animation-delay: 0.7s;
}
.conn-3 { 
  bottom: 30px; left: 60px; width: 120px; 
  transform: rotate(-45deg); 
  animation-delay: 1.4s;
}
.conn-4 { 
  top: 150px; left: 60px; width: 120px; 
  transform: rotate(45deg); 
  animation-delay: 2.1s;
}

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

@keyframes connectionFlow {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

/* Future Section */
.future-section {
  padding: var(--spacing-20) 0;
  background: linear-gradient(135deg, var(--gray-900), var(--gray-800));
  color: white;
}

.future-title {
  font-size: 3rem;
  font-weight: 800;
  margin: 0 0 var(--spacing-4) 0;
  color: white;
}

.future-description {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-lg);
}

.future-section .text-gradient {
  background: linear-gradient(135deg, #ffd700, #ffed4e, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tech-timeline {
  margin-top: var(--spacing-16);
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-8);
}

.timeline-item {
  flex: 1;
  text-align: center;
  position: relative;
  padding: var(--spacing-8);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all var(--transition-smooth);
}

.timeline-item:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--primary-400);
}

.timeline-item::before {
  content: attr(data-year);
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-500);
  color: white;
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 700;
}

/* Success Section */
.success-section {
  padding: var(--spacing-20) 0;
  background: var(--gray-50);
}

.success-title {
  font-size: 3rem;
  font-weight: 800;
  margin: 0 0 var(--spacing-4) 0;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.success-stories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: var(--spacing-8);
  margin-top: var(--spacing-12);
}

.story-card {
  background: white;
  padding: var(--spacing-8);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-200);
  transition: all var(--transition-smooth);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--spacing-6);
  align-items: center;
}

.story-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-2xl);
  border-color: var(--primary-300);
}

.avatar-glow {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-400), var(--primary-600));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.3);
  animation: glow 3s ease-in-out infinite;
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.3); }
  50% { box-shadow: 0 0 30px rgba(var(--primary-rgb), 0.5); }
}

.story-content blockquote {
  font-size: var(--text-lg);
  line-height: 1.6;
  margin: 0 0 var(--spacing-4) 0;
  font-style: italic;
  color: var(--gray-700);
}

.author-name {
  font-weight: 700;
  color: var(--gray-900);
}

.author-role {
  font-size: var(--text-sm);
  color: var(--primary-600);
  font-weight: 600;
}

.story-metrics {
  text-align: center;
}

.metric {
  margin-bottom: var(--spacing-2);
}

.metric-value {
  display: block;
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--primary-600);
}

.metric-label {
  font-size: var(--text-xs);
  color: var(--gray-500);
  font-weight: 600;
  text-transform: uppercase;
}

/* === MODERN COURSES STYLES === */

/* Courses Hero */
.courses-hero {
  min-height: 100vh;
  background: linear-gradient(135deg, 
    var(--primary-900) 0%, 
    var(--primary-800) 50%, 
    var(--primary-600) 100%
  );
  color: white;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.courses-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.05) 0%, transparent 50%);
  pointer-events: none;
}

.courses-hero-content {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--spacing-16);
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--spacing-6);
  backdrop-filter: blur(10px);
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 var(--spacing-6) 0;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.text-highlight {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-accent {
  color: var(--accent-400);
  text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.5);
}

.hero-description {
  font-size: var(--text-xl);
  line-height: 1.6;
  margin: 0 0 var(--spacing-8) 0;
  opacity: 0.9;
  max-width: 90%;
}

.hero-stats {
  display: flex;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-10);
}

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

.stat-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 900;
  color: #ffd700;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.stat-label {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.8);
  margin-top: var(--spacing-1);
  font-weight: 500;
}

/* Modern Buttons */
.btn-modern {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4) var(--spacing-8);
  font-size: var(--text-lg);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-xl);
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
}

.btn-modern.btn-primary {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: var(--gray-900);
  box-shadow: 0 8px 32px rgba(255, 215, 0, 0.3);
}

.btn-modern.btn-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 48px rgba(255, 215, 0, 0.4);
}

.btn-modern.btn-ghost {
  background: transparent;
  color: white;
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-modern.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.btn-modern.btn-white {
  background: white;
  color: var(--gray-900);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.hero-actions {
  display: flex;
  gap: var(--spacing-4);
  flex-wrap: wrap;
}

/* Code Showcase */
.code-showcase {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.code-window {
  background: var(--gray-900);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  overflow: hidden;
  width: 100%;
  max-width: 500px;
}

.window-header {
  background: var(--gray-800);
  padding: var(--spacing-4);
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.window-controls {
  display: flex;
  gap: var(--spacing-2);
}

.control {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.control.red { background: #ff5f57; }
.control.yellow { background: #ffbd2e; }
.control.green { background: #28ca42; }

.window-title {
  color: var(--gray-300);
  font-size: var(--text-sm);
  font-weight: 600;
}

.code-content {
  padding: var(--spacing-6);
  font-family: 'Monaco', 'Consolas', monospace;
  font-size: var(--text-sm);
  line-height: 1.8;
}

.code-line {
  display: flex;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-2);
}

.line-number {
  color: var(--gray-500);
  width: 20px;
  text-align: right;
  user-select: none;
}

.code-text.indent {
  margin-left: 2rem;
}

.keyword { color: #ff6b6b; }
.function { color: #4ecdc4; }
.variable { color: #45b7d1; }
.string { color: #96ceb4; }

.typing-indicator {
  margin-top: var(--spacing-4);
}

.cursor {
  color: #ffd700;
  animation: blink 1s infinite;
  font-weight: bold;
}

/* Floating Elements */
.floating-element {
  position: absolute;
  animation: float 6s ease-in-out infinite;
}

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

.element-2 {
  top: 60%;
  right: 5%;
  animation-delay: -2s;
}

.element-3 {
  bottom: 20%;
  right: 15%;
  animation-delay: -4s;
}

.tech-badge {
  padding: var(--spacing-2) var(--spacing-4);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  color: white;
  font-size: var(--text-sm);
  font-weight: 600;
  backdrop-filter: blur(10px);
}

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

/* Filter Section */
.filter-section {
  padding: var(--spacing-12) 0;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.filter-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-8);
  flex-wrap: wrap;
}

.filter-tabs {
  display: flex;
  gap: var(--spacing-2);
  background: white;
  padding: var(--spacing-1);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.filter-tab {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-6);
  border: none;
  background: transparent;
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-tab.active,
.filter-tab:hover {
  background: var(--primary-500);
  color: white;
  transform: translateY(-2px);
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  padding: var(--spacing-3) var(--spacing-12) var(--spacing-3) var(--spacing-4);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-xl);
  font-size: var(--text-base);
  background: white;
  transition: all var(--transition-fast);
  width: 300px;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.search-btn {
  position: absolute;
  right: var(--spacing-2);
  padding: var(--spacing-2);
  border: none;
  background: var(--primary-500);
  color: white;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.search-btn:hover {
  background: var(--primary-600);
}

/* === EPIC COURSE CARDS === */
.courses-section {
  padding: var(--spacing-16) 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: var(--spacing-8);
  align-items: start;
}

.course-card-epic {
  background: white;
  border-radius: var(--radius-3xl);
  padding: 0;
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: visible; /* Изменено с hidden на visible */
  border: 1px solid rgba(255, 255, 255, 0.2);
  min-height: 700px; /* Добавлена минимальная высота */
  display: flex;
  flex-direction: column;
}

.course-card-epic:hover {
  transform: translateY(-20px) scale(1.02);
  box-shadow: 
    0 35px 80px -15px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* Background Gradients */
.card-bg-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  opacity: 0.1;
  transition: opacity 0.6s ease;
}

.bg-python {
  background: linear-gradient(135deg, #3776ab, #ffd43b);
}

.bg-javascript {
  background: linear-gradient(135deg, #f7df1e, #323330);
}

.bg-fullstack {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.course-card-epic:hover .card-bg-gradient {
  opacity: 0.15;
}

/* Floating Particles */
.card-floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1; /* Ниже основного контента */
  overflow: hidden;
}

.floating-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  border-radius: 50%;
  opacity: 0.2;
  animation: floatParticle 8s ease-in-out infinite;
}

.particle-1 {
  top: 20%;
  left: 15%;
  animation-delay: 0s;
}

.particle-2 {
  top: 60%;
  right: 20%;
  animation-delay: -3s;
}

.particle-3 {
  bottom: 30%;
  left: 25%;
  animation-delay: -6s;
}

@keyframes floatParticle {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-20px) rotate(120deg); }
  66% { transform: translateY(10px) rotate(240deg); }
}

/* Course Visual */
.course-visual {
  position: relative;
  padding: var(--spacing-8) var(--spacing-8) var(--spacing-4);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 2; /* Поднимаем выше фоновых элементов */
}

.course-icon {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  position: relative;
  overflow: hidden;
}

.icon-python {
  background: linear-gradient(135deg, #3776ab, #ffd43b);
  box-shadow: 0 8px 32px rgba(55, 118, 171, 0.3);
}

.icon-javascript {
  background: linear-gradient(135deg, #f7df1e, #323330);
  box-shadow: 0 8px 32px rgba(247, 223, 30, 0.3);
}

.icon-fullstack {
  background: linear-gradient(135deg, #667eea, #764ba2);
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

.popularity-badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-2) var(--spacing-3);
  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
  color: white;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
}

/* Card Header */
.card-header-epic {
  padding: 0 var(--spacing-8) var(--spacing-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}

.course-category {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.category-icon {
  font-size: var(--text-lg);
}

.category-text {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.course-difficulty {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.difficulty-dots {
  display: flex;
  gap: var(--spacing-1);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-300);
  transition: all 0.3s ease;
}

.dot.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  box-shadow: 0 0 8px rgba(102, 126, 234, 0.4);
}

.difficulty-text {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
}

/* Card Content */
.card-content-epic {
  padding: 0 var(--spacing-8) var(--spacing-6);
  flex: 1; /* Занимает доступное пространство */
  position: relative;
  z-index: 2;
}

.course-title-epic {
  font-size: var(--text-2xl);
  font-weight: 900;
  margin: 0 0 var(--spacing-4) 0;
  background: linear-gradient(135deg, var(--gray-900), var(--gray-700));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.course-description-epic {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0 0 var(--spacing-6) 0;
  font-size: var(--text-base);
}

/* Progress Bar */
.course-progress {
  margin-bottom: var(--spacing-6);
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-2);
}

.progress-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-700);
}

.progress-percentage {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--primary-600);
}

.progress-bar {
  height: 8px;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: var(--radius-full);
  width: 100%;
  animation: progressFill 2s ease-out;
}

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

/* Course Stats Grid */
.course-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-6);
  width: 100%; /* Полная ширина */
}

.stat-box {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-100);
  transition: all 0.3s ease;
  min-height: 60px; /* Минимальная высота для консистентности */
  width: 100%;
  box-sizing: border-box;
}

.stat-box:hover {
  background: var(--primary-50);
  border-color: var(--primary-200);
  transform: translateY(-2px);
}

.stat-icon {
  font-size: var(--text-lg);
}

.stat-value {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1;
}

.stat-label {
  font-size: var(--text-xs);
  color: var(--gray-600);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Tech Stack */
.tech-stack {
  margin-bottom: var(--spacing-6);
  width: 100%;
}

.stack-header {
  margin-bottom: var(--spacing-3);
}

.stack-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: var(--spacing-2);
}

.stack-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  width: 100%;
  justify-content: flex-start;
}

.tech-badge-epic {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-lg);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  white-space: nowrap; /* Предотвращаем перенос текста */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.tech-badge-epic.python {
  background: linear-gradient(135deg, #3776ab, #ffd43b);
  color: white;
}

.tech-badge-epic.django {
  background: linear-gradient(135deg, #092e20, #44b78b);
  color: white;
}

.tech-badge-epic.postgres {
  background: linear-gradient(135deg, #336791, #8cc8ff);
  color: white;
}

.tech-badge-epic.javascript {
  background: linear-gradient(135deg, #f7df1e, #323330);
  color: #323330;
}

.tech-badge-epic.react {
  background: linear-gradient(135deg, #61dafb, #21232a);
  color: white;
}

.tech-badge-epic.nodejs {
  background: linear-gradient(135deg, #339933, #68cc68);
  color: white;
}

.tech-badge-epic.fullstack,
.tech-badge-epic.api,
.tech-badge-epic.devops {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

/* Card Footer */
.card-footer-epic {
  padding: var(--spacing-6) var(--spacing-8) var(--spacing-8);
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  margin-top: auto; /* Прижимаем к низу */
  border-radius: 0 0 var(--radius-3xl) var(--radius-3xl);
  position: relative;
  z-index: 2;
}

.price-section {
  margin-bottom: var(--spacing-6);
}

.price-main-epic {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-2);
}

.currency {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--gray-600);
}

.amount {
  font-size: 2.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.price-details {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-2);
}

.price-old-epic {
  font-size: var(--text-base);
  color: var(--gray-500);
  text-decoration: line-through;
}

.discount-badge {
  padding: var(--spacing-1) var(--spacing-2);
  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
  color: white;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 800;
}

.payment-info {
  font-size: var(--text-sm);
  color: var(--gray-600);
  font-weight: 600;
}

.installment {
  color: var(--primary-600);
}

/* Action Buttons */
.action-buttons {
  display: flex;
  gap: var(--spacing-3);
  align-items: center;
  width: 100%;
  margin-top: var(--spacing-4);
}

.btn-epic-primary {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-4) var(--spacing-6);
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  text-decoration: none;
  border-radius: var(--radius-xl);
  font-weight: 800;
  font-size: var(--text-base);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
  min-height: 52px;
  white-space: nowrap;
}

.btn-epic-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 48px rgba(102, 126, 234, 0.4);
  text-decoration: none;
  color: white;
}

.btn-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255,255,255,0.3), 
    transparent
  );
  transition: left 0.5s;
}

.btn-epic-primary:hover .btn-shine {
  left: 100%;
}

.btn-epic-secondary {
  width: 48px;
  height: 48px;
  border: 2px solid var(--gray-300);
  background: white;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--gray-600);
}

.btn-epic-secondary:hover {
  border-color: var(--primary-400);
  color: var(--primary-600);
  transform: scale(1.1);
  background: var(--primary-50);
}

/* Glowing Border Effect */
.card-glow-border {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, 
    #667eea, #764ba2, #667eea, #764ba2
  );
  border-radius: var(--radius-3xl);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.6s ease;
  animation: borderGlow 3s ease-in-out infinite;
}

.course-card-epic:hover .card-glow-border {
  opacity: 0.3;
}

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

/* Old styles cleanup */
.course-card-modern {
  display: none;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-6);
}

.course-badge {
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--primary-100);
  color: var(--primary-700);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
}

.course-level {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.level-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.level-indicator.level-beginner { background: #10b981; }
.level-indicator.level-intermediate { background: #f59e0b; }
.level-indicator.level-advanced { background: #ef4444; }

.level-text {
  font-size: var(--text-xs);
  color: var(--gray-600);
  font-weight: 600;
}

.course-title {
  font-size: var(--text-xl);
  font-weight: 800;
  margin: 0 0 var(--spacing-4) 0;
  color: var(--gray-900);
  line-height: 1.3;
}

.course-description {
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0 0 var(--spacing-6) 0;
}

.course-features {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-6);
}

.feature-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.feature-icon {
  font-size: var(--text-base);
}

.feature-text {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-700);
}

.course-tech {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-6);
}

.tech-tag {
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--gray-100);
  color: var(--gray-700);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.course-price {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-2);
}

.price-main {
  font-size: var(--text-xl);
  font-weight: 900;
  color: var(--gray-900);
}

.price-old {
  font-size: var(--text-base);
  color: var(--gray-500);
  text-decoration: line-through;
}

.btn-course {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-6);
  background: var(--primary-500);
  color: white;
  text-decoration: none;
  border-radius: var(--radius-lg);
  font-weight: 700;
  transition: all var(--transition-fast);
}

.btn-course:hover {
  background: var(--primary-600);
  transform: translateX(4px);
  text-decoration: none;
  color: white;
}

.card-glow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255,255,255,0.4), 
    transparent
  );
  transition: left 0.5s;
}

.course-card-modern:hover .card-glow {
  left: 100%;
}

/* CTA Section */
.cta-section-modern {
  padding: var(--spacing-20) 0;
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
  color: white;
}

.cta-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-8);
}

.cta-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0 0 var(--spacing-4) 0;
}

.cta-description {
  font-size: var(--text-lg);
  opacity: 0.9;
  margin: 0;
  max-width: 600px;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: var(--spacing-20) 0;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: var(--spacing-6);
}

.empty-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin: 0 0 var(--spacing-4) 0;
  color: var(--gray-900);
}

.empty-description {
  color: var(--gray-600);
  font-size: var(--text-lg);
  margin: 0;
}

/* Tablet Design */
@media (max-width: 1024px) and (min-width: 769px) {
  .courses-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-5);
  }

  .course-card-epic {
    min-height: 500px;
  }

  .course-visual {
    padding: var(--spacing-5);
  }

  .course-icon {
    width: 70px;
    height: 70px;
    font-size: 2.5rem;
  }

  .stack-badges {
    flex-wrap: wrap;
  }

  .action-buttons {
    gap: var(--spacing-2);
  }
}

/* Mobile Design */
@media (max-width: 768px) {
  .about-hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .philosophy-content {
    grid-template-columns: 1fr;
  }
  
  .tech-timeline {
    flex-direction: column;
  }
  
  .success-stories {
    grid-template-columns: 1fr;
  }
  
  .story-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .courses-hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-stats {
    justify-content: center;
  }

  .filter-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-tabs {
    justify-content: center;
  }

  .search-input {
    width: 100%;
  }

  .courses-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
  }

  .cta-content {
    flex-direction: column;
    text-align: center;
  }

  /* Epic Cards Mobile */
  .course-card-epic {
    min-height: auto;
    margin-bottom: var(--spacing-4);
  }

  .course-visual {
    padding: var(--spacing-6) var(--spacing-6) var(--spacing-4);
  }

  .course-icon {
    width: 60px;
    height: 60px;
    font-size: 2rem;
  }

  .popularity-badge {
    font-size: 10px;
    padding: var(--spacing-1) var(--spacing-2);
  }

  .card-header-epic,
  .card-content-epic {
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
  }

  .course-stats-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-2);
  }

  .stat-box {
    min-height: 50px;
    padding: var(--spacing-2) var(--spacing-3);
  }

  .stack-badges {
    gap: var(--spacing-1);
  }

  .tech-badge-epic {
    font-size: 10px;
    padding: var(--spacing-1) var(--spacing-2);
  }

  .card-footer-epic {
    padding: var(--spacing-4) var(--spacing-6) var(--spacing-6);
  }

  .amount {
    font-size: 2rem;
  }

  .action-buttons {
    flex-direction: column;
    gap: var(--spacing-2);
  }

  .btn-epic-primary {
    width: 100%;
    min-height: 48px;
  }

  .btn-epic-secondary {
    width: 100%;
    height: 48px;
  }
}

/* Glass Morphism Course Cards - Revolutionary Design */
.course-card-glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(25px) saturate(200%);
  -webkit-backdrop-filter: blur(25px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  min-height: 520px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transform-style: preserve-3d;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 1px 2px rgba(0, 0, 0, 0.3);
}

.course-card-glass:hover {
  transform: translateY(-8px) rotateX(2deg);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 35px 60px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset,
    0 0 50px rgba(59, 130, 246, 0.1);
}

/* Glass background effects */
.glass-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 100%);
  border-radius: 28px;
  z-index: 1;
}

.glass-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
  border-radius: 28px;
  z-index: 2;
}

/* Dynamic light beam */
.light-beam {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, 
    transparent 30%, 
    rgba(255, 255, 255, 0.03) 50%, 
    transparent 70%);
  transform: rotate(-45deg);
  transition: all 0.6s ease;
  z-index: 3;
  opacity: 0;
}

.course-card-glass:hover .light-beam {
  opacity: 1;
  animation: lightSweep 2s ease-in-out infinite;
}

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

/* Header section */
.card-header-glass {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-6) var(--spacing-6) var(--spacing-4);
  position: relative;
  z-index: 10;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: 20px;
  backdrop-filter: blur(10px);
}

.status-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  position: relative;
}

.status-dot.pulsing::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px solid #22c55e;
  border-radius: 50%;
  animation: pulse 2s infinite;
  opacity: 0.6;
}

@keyframes pulse {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

.status-text {
  color: #22c55e;
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}

.bookmark-action {
  position: relative;
}

.bookmark-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: var(--spacing-2);
  border-radius: 12px;
  color: var(--gray-400);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.bookmark-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--primary-400);
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

/* Visual hero section */
.course-hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-4) var(--spacing-6);
  position: relative;
  z-index: 10;
}

.icon-sphere {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: var(--spacing-4);
}

.sphere-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  animation: sphereGlow 3s ease-in-out infinite alternate;
}

@keyframes sphereGlow {
  0% { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(1.2); opacity: 0.8; }
}

.sphere-core {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(20px);
  box-shadow: 
    0 0 30px rgba(59, 130, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.course-level-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
}

.level-progress {
  position: relative;
  width: 120px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.level-bar {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.level-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 2px;
  transition: width 1s ease;
}

.level-fill.level-1 {
  width: 33%;
  background: linear-gradient(90deg, #10b981, #22c55e);
}

.level-fill.level-2 {
  width: 66%;
  background: linear-gradient(90deg, #f59e0b, #f97316);
}

.level-fill.level-3 {
  width: 100%;
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

.level-text {
  color: var(--gray-300);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Content section */
.card-content-glass {
  padding: 0 var(--spacing-6) var(--spacing-4);
  flex-grow: 1;
  position: relative;
  z-index: 10;
}

.course-title-wrapper {
  position: relative;
  margin-bottom: var(--spacing-4);
}

.course-title-glass {
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.title-underline {
  height: 2px;
  background: linear-gradient(90deg, var(--primary-400), transparent);
  margin-top: var(--spacing-2);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.course-card-glass:hover .title-underline {
  transform: scaleX(1);
}

.course-description-glass {
  color: var(--gray-300);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: var(--spacing-6);
  opacity: 0.9;
}

/* Metrics grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.metric-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.metric-icon {
  color: var(--primary-400);
  opacity: 0.8;
}

.metric-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.metric-value {
  color: var(--white);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.metric-label {
  color: var(--gray-400);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Tech stack modern */
.tech-stack-modern {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-4);
}

.tech-pill {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--white);
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.tech-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.tech-pill:hover::before {
  transform: translateX(100%);
}

.tech-pill.python {
  border-color: rgba(55, 118, 171, 0.4);
  color: #3776ab;
  box-shadow: 0 0 20px rgba(55, 118, 171, 0.2);
}

.tech-pill.django {
  border-color: rgba(14, 135, 87, 0.4);
  color: #0e8757;
  box-shadow: 0 0 20px rgba(14, 135, 87, 0.2);
}

.tech-pill.sql {
  border-color: rgba(242, 101, 34, 0.4);
  color: #f26522;
  box-shadow: 0 0 20px rgba(242, 101, 34, 0.2);
}

.tech-pill.js {
  border-color: rgba(247, 223, 30, 0.4);
  color: #f7df1e;
  box-shadow: 0 0 20px rgba(247, 223, 30, 0.2);
}

.tech-pill.react {
  border-color: rgba(97, 218, 251, 0.4);
  color: #61dafb;
  box-shadow: 0 0 20px rgba(97, 218, 251, 0.2);
}

.tech-pill.node {
  border-color: rgba(104, 160, 99, 0.4);
  color: #68a063;
  box-shadow: 0 0 20px rgba(104, 160, 99, 0.2);
}

.tech-pill.full {
  border-color: rgba(139, 92, 246, 0.4);
  color: #8b5cf6;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
}

.tech-pill.api {
  border-color: rgba(245, 101, 101, 0.4);
  color: #f56565;
  box-shadow: 0 0 20px rgba(245, 101, 101, 0.2);
}

.tech-pill.cloud {
  border-color: rgba(56, 178, 172, 0.4);
  color: #38b2ac;
  box-shadow: 0 0 20px rgba(56, 178, 172, 0.2);
}

/* Footer section */
.card-footer-glass {
  padding: var(--spacing-4) var(--spacing-6) var(--spacing-6);
  position: relative;
  z-index: 10;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(20px);
}

.pricing-section-modern {
  margin-bottom: var(--spacing-4);
  text-align: center;
}

.price-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-2);
}

.currency-symbol {
  color: var(--gray-400);
  font-size: 1.2rem;
  font-weight: 600;
}

.price-amount {
  color: var(--white);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.price-context {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.price-period {
  color: var(--gray-400);
  font-size: 13px;
  font-weight: 500;
}

.installment-info {
  color: var(--primary-400);
  font-size: 12px;
  font-weight: 600;
}

/* CTA section */
.cta-section {
  display: flex;
  gap: var(--spacing-3);
  align-items: center;
}

.btn-glass-primary {
  flex: 1;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.9));
  border: 1px solid rgba(59, 130, 246, 0.6);
  color: var(--white);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.btn-glass-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
  border-color: rgba(59, 130, 246, 0.8);
}

.btn-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.btn-glass-primary:hover .btn-glow {
  transform: translateX(100%);
}

.btn-arrow {
  transition: transform 0.3s ease;
}

.btn-glass-primary:hover .btn-arrow {
  transform: translateX(4px);
}

.btn-glass-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--gray-300);
  padding: var(--spacing-3);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.btn-glass-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--primary-400);
  transform: scale(1.1);
}

.btn-glass-secondary[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: var(--white);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  z-index: 1000;
}

/* Interactive effects */
.card-interactive-effects {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.ripple-effect {
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  transform: scale(0);
  transition: all 0.5s ease;
}

.course-card-glass:active .ripple-effect {
  width: 300px;
  height: 300px;
  transform: scale(1);
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -150px;
}

/* Responsive Design for Glass Cards */
@media (max-width: 1024px) and (min-width: 769px) {
  .course-card-glass {
    min-height: 480px;
  }
  
  .icon-sphere {
    width: 80px;
    height: 80px;
  }
  
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .course-card-glass {
    min-height: auto;
    margin-bottom: var(--spacing-4);
    border-radius: 20px;
  }
  
  .card-header-glass,
  .card-content-glass,
  .card-footer-glass {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }
  
  .course-hero-visual {
    padding: var(--spacing-3) var(--spacing-4);
  }
  
  .icon-sphere {
    width: 70px;
    height: 70px;
    margin-bottom: var(--spacing-3);
  }
  
  .metrics-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-2);
  }
  
  .metric-item {
    padding: var(--spacing-2);
  }
  
  .price-amount {
    font-size: 1.8rem;
  }
  
  .cta-section {
    flex-direction: column;
    gap: var(--spacing-3);
  }
  
  .btn-glass-primary {
    width: 100%;
    padding: var(--spacing-4);
  }
  
  .btn-glass-secondary {
    align-self: center;
  }
}

/* Neomorphism 3D Course Cards - Revolutionary Design */
.course-card-neo {
  background: linear-gradient(145deg, #1a1a2e, #16213e);
  border-radius: 24px;
  padding: 0;
  position: relative;
  overflow: hidden;
  min-height: 450px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 
    15px 15px 40px #0f0f23,
    -15px -15px 40px #252554,
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  transform-style: preserve-3d;
  perspective: 1000px;
}

.course-card-neo:hover {
  transform: translateY(-15px) rotateX(5deg) rotateY(-2deg);
  box-shadow: 
    25px 25px 80px #0a0a1a,
    -25px -25px 80px #2a2a5a,
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 100px rgba(59, 130, 246, 0.15);
}

/* 3D Transform Container */
.card-3d-container {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

/* Holographic Background */
.holographic-bg {
  position: absolute;
  inset: 0;
  border-radius: 32px;
  overflow: hidden;
  z-index: 1;
}

.holo-layer {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  border-radius: 32px;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: holoShift 8s ease-in-out infinite;
}

.holo-layer.layer-1 {
  animation-delay: 0s;
  background: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
}

.holo-layer.layer-2 {
  animation-delay: 2.6s;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(59, 130, 246, 0.1));
}

.holo-layer.layer-3 {
  animation-delay: 5.2s;
  background: linear-gradient(225deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1));
}

@keyframes holoShift {
  0%, 100% { transform: translateX(-100%); opacity: 0; }
  50% { transform: translateX(100%); opacity: 0.1; }
}

/* Floating Orbs */
.floating-orbs {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.orb {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.8), transparent);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.orb-1 {
  top: 20%;
  left: 15%;
  animation: float 6s ease-in-out infinite;
}

.orb-2 {
  top: 60%;
  right: 20%;
  animation: float 8s ease-in-out infinite reverse;
}

.orb-3 {
  bottom: 30%;
  left: 70%;
  animation: float 7s ease-in-out infinite;
  animation-delay: -2s;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  33% { transform: translateY(-20px) translateX(10px); }
  66% { transform: translateY(10px) translateX(-15px); }
}

/* Card Header */
.card-header-neo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--spacing-5) var(--spacing-5) var(--spacing-3);
  position: relative;
  z-index: 10;
}

.course-badge-neo {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 25px;
  padding: var(--spacing-2) var(--spacing-4);
  backdrop-filter: blur(20px);
  box-shadow: 
    inset 2px 2px 5px rgba(255, 255, 255, 0.1),
    inset -2px -2px 5px rgba(0, 0, 0, 0.3);
}

.badge-glow {
  position: absolute;
  inset: -2px;
  border-radius: 25px;
  background: linear-gradient(45deg, rgba(59, 130, 246, 0.3), rgba(139, 92, 246, 0.3));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.course-badge-neo:hover .badge-glow {
  opacity: 1;
}

.badge-text {
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.python-badge { color: #3776ab; }
.js-badge { color: #f7df1e; }
.full-badge { color: #8b5cf6; }

.action-menu {
  position: relative;
}

.menu-btn {
  background: linear-gradient(145deg, #1e1e3f, #0f0f23);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: var(--spacing-2);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 
    5px 5px 15px rgba(0, 0, 0, 0.3),
    -5px -5px 15px rgba(255, 255, 255, 0.02);
}

.menu-btn:hover {
  box-shadow: 
    inset 2px 2px 5px rgba(0, 0, 0, 0.3),
    inset -2px -2px 5px rgba(255, 255, 255, 0.05);
}

.menu-dots {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.menu-dots span {
  width: 4px;
  height: 4px;
  background: var(--gray-400);
  border-radius: 50%;
  transition: all 0.3s ease;
}

/* Hero Visual */
.hero-visual-neo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-3) var(--spacing-5);
  position: relative;
  z-index: 10;
}

.code-projection {
  flex: 1;
  position: relative;
}

.projection-screen {
  background: linear-gradient(145deg, rgba(0, 0, 0, 0.6), rgba(20, 20, 40, 0.4));
  border: 1px solid rgba(0, 255, 150, 0.3);
  border-radius: 12px;
  padding: var(--spacing-4);
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 12px;
  position: relative;
  box-shadow: 
    0 0 30px rgba(0, 255, 150, 0.2),
    inset 0 0 20px rgba(0, 255, 150, 0.05);
}

.code-lines {
  color: #00ff96;
  line-height: 1.6;
}

.code-line {
  margin-bottom: 4px;
  opacity: 0;
  animation: codeAppear 0.8s ease forwards;
}

.code-line:nth-child(1) { animation-delay: 0.2s; }
.code-line:nth-child(2) { animation-delay: 0.6s; }

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

.keyword { color: #ff6b9d; }
.function { color: #4ecdc4; }
.string { color: #ffe66d; }
.variable { color: #a8e6cf; }
.tag { color: #ffa8a8; }
.attr { color: #b4a7d6; }
.comment { color: #6c7b7f; }

.cursor-blink {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: #00ff96;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.skill-indicators {
  margin-left: var(--spacing-6);
}

.skill-ring {
  position: relative;
  width: 80px;
  height: 80px;
}

.ring-progress {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #00ff96 0deg,
    #00ff96 var(--progress, 85) * 3.6deg,
    rgba(255, 255, 255, 0.1) var(--progress, 85) * 3.6deg,
    rgba(255, 255, 255, 0.1) 360deg
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ring-progress::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: linear-gradient(145deg, #1a1a2e, #16213e);
}

.ring-center {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.skill-percent {
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
}

.skill-label {
  color: var(--gray-400);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Content Section */
.card-content-neo {
  padding: 0 var(--spacing-5) var(--spacing-3);
  flex-grow: 1;
  position: relative;
  z-index: 10;
}

.title-section {
  margin-bottom: var(--spacing-3);
  text-align: center;
}

.course-title-neo {
  color: var(--white);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 var(--spacing-2) 0;
  text-shadow: 0 2px 15px rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, #ffffff, #b4a7d6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.3;
}

.title-decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
}

.deco-line {
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #4ecdc4, transparent);
}

.deco-diamond {
  width: 8px;
  height: 8px;
  background: #4ecdc4;
  transform: rotate(45deg);
  box-shadow: 0 0 15px rgba(78, 205, 196, 0.6);
}

.course-description-neo {
  color: var(--gray-300);
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;
  margin-bottom: var(--spacing-4);
  opacity: 0.9;
}

/* Interactive Stats */
.stats-neo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-4);
}

.stat-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: var(--spacing-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 
    3px 3px 10px rgba(0, 0, 0, 0.2),
    -3px -3px 10px rgba(255, 255, 255, 0.02);
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 
    inset 2px 2px 5px rgba(255, 255, 255, 0.05),
    inset -2px -2px 5px rgba(0, 0, 0, 0.2),
    0 10px 30px rgba(0, 0, 0, 0.3);
}

.stat-icon {
  color: var(--primary-400);
  opacity: 0.8;
}

.stat-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.stat-number {
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
}

.stat-unit {
  color: var(--gray-400);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-pulse {
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  background: linear-gradient(45deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
  opacity: 0;
  animation: statPulse 3s ease-in-out infinite;
}

.stat-card.duration .stat-pulse { animation-delay: 0s; }
.stat-card.students .stat-pulse { animation-delay: 1s; }
.stat-card.rating .stat-pulse { animation-delay: 2s; }

@keyframes statPulse {
  0%, 90% { opacity: 0; transform: scale(1); }
  5%, 15% { opacity: 0.3; transform: scale(1.05); }
}

/* Tech Constellation */
.tech-constellation {
  position: relative;
  height: 80px;
  margin-bottom: var(--spacing-3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech-star {
  position: absolute;
  width: 35px;
  height: 35px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 
    3px 3px 10px rgba(0, 0, 0, 0.3),
    -3px -3px 10px rgba(255, 255, 255, 0.03);
}

.tech-star:hover {
  transform: scale(1.2) translateZ(20px);
  box-shadow: 
    inset 2px 2px 5px rgba(255, 255, 255, 0.1),
    inset -2px -2px 5px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(59, 130, 246, 0.4);
}

.star-glow {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.3), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tech-star:hover .star-glow {
  opacity: 1;
  animation: starGlow 2s ease-in-out infinite;
}

@keyframes starGlow {
  0%, 100% { transform: scale(0.8); opacity: 0.3; }
  50% { transform: scale(1.2); opacity: 0.6; }
}

.python-star { 
  top: 10px; 
  left: 30px; 
  color: #3776ab; 
  border-color: rgba(55, 118, 171, 0.3);
}

.django-star { 
  top: 10px; 
  right: 30px; 
  color: #0e8757; 
  border-color: rgba(14, 135, 87, 0.3);
}

.db-star { 
  bottom: 10px; 
  left: 50%; 
  transform: translateX(-50%); 
  color: #f26522; 
  border-color: rgba(242, 101, 34, 0.3);
}

.js-star { 
  top: 10px; 
  left: 30px; 
  color: #f7df1e; 
  border-color: rgba(247, 223, 30, 0.3);
}

.react-star { 
  top: 10px; 
  right: 30px; 
  color: #61dafb; 
  border-color: rgba(97, 218, 251, 0.3);
}

.node-star { 
  bottom: 10px; 
  left: 50%; 
  transform: translateX(-50%); 
  color: #68a063; 
  border-color: rgba(104, 160, 99, 0.3);
}

.full-star { 
  top: 10px; 
  left: 30px; 
  color: #8b5cf6; 
  border-color: rgba(139, 92, 246, 0.3);
}

.api-star { 
  top: 10px; 
  right: 30px; 
  color: #f56565; 
  border-color: rgba(245, 101, 101, 0.3);
}

.cloud-star { 
  bottom: 10px; 
  left: 50%; 
  transform: translateX(-50%); 
  color: #38b2ac; 
  border-color: rgba(56, 178, 172, 0.3);
}

.constellation-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tech-connections {
  width: 100%;
  height: 100%;
}

.connection-line {
  stroke-dasharray: 5 5;
  animation: dashMove 3s linear infinite;
}

@keyframes dashMove {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 20; }
}

/* Footer */
.card-footer-neo {
  padding: var(--spacing-3) var(--spacing-5) var(--spacing-5);
  position: relative;
  z-index: 10;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.1));
}

.price-display-neo {
  text-align: center;
  margin-bottom: var(--spacing-4);
}

.price-hologram {
  position: relative;
  margin-bottom: var(--spacing-2);
}

.price-main {
  color: var(--white);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, #ffffff, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.price-discount {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}

.old-price {
  color: var(--gray-500);
  font-size: 1rem;
  text-decoration: line-through;
}

.discount-percent {
  background: linear-gradient(135deg, #ff6b9d, #c44569);
  color: var(--white);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.payment-options .installment {
  color: var(--primary-400);
  font-size: 14px;
  font-weight: 600;
}

/* CTA Section */
.cta-neo {
  display: flex;
  gap: var(--spacing-4);
  align-items: center;
}

.btn-neo-primary {
  flex: 1;
  position: relative;
  background: linear-gradient(135deg, #4ecdc4, #44a08d);
  border: none;
  border-radius: 20px;
  padding: var(--spacing-4) var(--spacing-6);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 
    0 10px 30px rgba(78, 205, 196, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-neo-primary:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 15px 40px rgba(78, 205, 196, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-bg-neo {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.btn-neo-primary:hover .btn-bg-neo {
  transform: translateX(100%);
}

.btn-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  position: relative;
  z-index: 1;
}

.btn-text {
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-icon {
  transition: transform 0.3s ease;
}

.btn-neo-primary:hover .btn-icon {
  transform: translateX(4px);
}

.btn-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  opacity: 0;
}

.btn-neo-primary:hover .particle {
  animation: particleFloat 1s ease-out forwards;
}

.btn-neo-primary:hover .particle:nth-child(1) {
  top: 20%;
  left: 20%;
  animation-delay: 0s;
}

.btn-neo-primary:hover .particle:nth-child(2) {
  top: 60%;
  right: 30%;
  animation-delay: 0.2s;
}

.btn-neo-primary:hover .particle:nth-child(3) {
  bottom: 30%;
  left: 60%;
  animation-delay: 0.4s;
}

@keyframes particleFloat {
  0% { opacity: 0; transform: translateY(0) scale(0); }
  50% { opacity: 1; transform: translateY(-20px) scale(1); }
  100% { opacity: 0; transform: translateY(-40px) scale(0); }
}

.btn-neo-secondary {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: var(--spacing-4);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: 
    5px 5px 15px rgba(0, 0, 0, 0.2),
    -5px -5px 15px rgba(255, 255, 255, 0.02);
}

.btn-neo-secondary:hover {
  box-shadow: 
    inset 2px 2px 5px rgba(255, 255, 255, 0.05),
    inset -2px -2px 5px rgba(0, 0, 0, 0.2);
  transform: scale(1.05);
}

.heart-pulse {
  color: var(--gray-400);
  transition: all 0.3s ease;
}

.btn-neo-secondary:hover .heart-pulse {
  color: #ff6b9d;
  animation: heartbeat 0.6s ease-in-out;
}

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

/* Magnetic Field Effect */
.magnetic-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.field-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(78, 205, 196, 0.3), 
    transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.field-line.line-1 {
  top: 30%;
  left: -100%;
  right: -100%;
  animation: fieldMove1 4s ease-in-out infinite;
}

.field-line.line-2 {
  top: 50%;
  left: -100%;
  right: -100%;
  animation: fieldMove2 5s ease-in-out infinite;
  animation-delay: 1s;
}

.field-line.line-3 {
  top: 70%;
  left: -100%;
  right: -100%;
  animation: fieldMove3 6s ease-in-out infinite;
  animation-delay: 2s;
}

.course-card-neo:hover .field-line {
  opacity: 1;
}

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

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

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

/* Tooltip */
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(20, 20, 40, 0.9));
  color: var(--white);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1000;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

/* Responsive Design for Neo Cards */
@media (max-width: 1024px) and (min-width: 769px) {
  .course-card-neo {
    min-height: 420px;
  }
  
  .hero-visual-neo {
    flex-direction: column;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-4);
  }
  
  .skill-ring {
    width: 50px;
    height: 50px;
  }
  
  .stats-neo {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .tech-constellation {
    height: 60px;
  }
  
  .tech-star {
    width: 30px;
    height: 30px;
    font-size: 10px;
  }
}

@media (max-width: 768px) {
  .course-card-neo {
    min-height: 380px;
    margin-bottom: var(--spacing-4);
    border-radius: 20px;
  }
  
  .card-header-neo,
  .card-content-neo,
  .card-footer-neo {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }
  
  .hero-visual-neo {
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
  }
  
  .skill-ring {
    width: 40px;
    height: 40px;
  }
  
  .stats-neo {
    grid-template-columns: 1fr;
    gap: var(--spacing-1);
  }
  
  .stat-card {
    padding: var(--spacing-2);
  }
  
  .tech-constellation {
    height: 50px;
  }
  
  .tech-star {
    width: 25px;
    height: 25px;
    font-size: 10px;
  }
  
  .course-title-neo {
    font-size: 1.1rem;
  }
  
  .price-main {
    font-size: 1.6rem;
  }
  
  .cta-neo {
    flex-direction: column;
    gap: var(--spacing-2);
  }
  
  .btn-neo-primary {
    width: 100%;
    padding: var(--spacing-3);
  }
  
  .btn-neo-secondary {
    align-self: center;
  }
}

/* Course Type Themes - Unique Styling */

/* Python Theme */
.course-python {
  background: linear-gradient(145deg, #1a1a2e, #16213e);
  border: 1px solid rgba(55, 118, 171, 0.2);
}

.course-python:hover {
  box-shadow: 
    25px 25px 80px #0a0a1a,
    -25px -25px 80px #2a2a5a,
    inset 0 0 0 1px rgba(55, 118, 171, 0.3),
    0 0 100px rgba(55, 118, 171, 0.15);
}

.theme-python .holo-layer.layer-1 {
  background: linear-gradient(45deg, rgba(55, 118, 171, 0.15), rgba(255, 212, 59, 0.1));
}

.theme-python .orb {
  background: radial-gradient(circle, rgba(55, 118, 171, 0.8), transparent);
  box-shadow: 0 0 20px rgba(55, 118, 171, 0.5);
}

.course-badge-neo.theme-python {
  border-color: rgba(55, 118, 171, 0.3);
  box-shadow: 0 0 20px rgba(55, 118, 171, 0.2);
}

.code-projection.theme-python {
  border-color: rgba(55, 118, 171, 0.4);
  box-shadow: 0 0 30px rgba(55, 118, 171, 0.3);
}

.skill-ring.theme-python .ring-progress {
  background: conic-gradient(
    from 0deg,
    #3776ab 0deg,
    #ffd43b calc(var(--progress, 92) * 3.6deg),
    rgba(255, 255, 255, 0.1) calc(var(--progress, 92) * 3.6deg)
  );
}

.btn-neo-primary.theme-python {
  background: linear-gradient(135deg, #3776ab, #ffd43b);
}

/* JavaScript Theme */
.course-javascript {
  background: linear-gradient(145deg, #2d2d1a, #3e3e16);
  border: 1px solid rgba(247, 223, 30, 0.2);
}

.course-javascript:hover {
  box-shadow: 
    25px 25px 80px #1a1a0a,
    -25px -25px 80px #5a5a2a,
    inset 0 0 0 1px rgba(247, 223, 30, 0.3),
    0 0 100px rgba(247, 223, 30, 0.15);
}

.theme-javascript .holo-layer.layer-1 {
  background: linear-gradient(45deg, rgba(247, 223, 30, 0.15), rgba(247, 223, 30, 0.1));
}

.theme-javascript .orb {
  background: radial-gradient(circle, rgba(247, 223, 30, 0.8), transparent);
  box-shadow: 0 0 20px rgba(247, 223, 30, 0.5);
}

.course-badge-neo.theme-javascript {
  border-color: rgba(247, 223, 30, 0.3);
  box-shadow: 0 0 20px rgba(247, 223, 30, 0.2);
}

.code-projection.theme-javascript {
  border-color: rgba(247, 223, 30, 0.4);
  box-shadow: 0 0 30px rgba(247, 223, 30, 0.3);
}

.skill-ring.theme-javascript .ring-progress {
  background: conic-gradient(
    from 0deg,
    #f7df1e 0deg,
    #f7df1e calc(var(--progress, 88) * 3.6deg),
    rgba(255, 255, 255, 0.1) calc(var(--progress, 88) * 3.6deg)
  );
}

.btn-neo-primary.theme-javascript {
  background: linear-gradient(135deg, #f7df1e, #e6c200);
  color: #1a1a1a;
}

/* React Theme */
.course-react {
  background: linear-gradient(145deg, #1a2e3e, #16213e);
  border: 1px solid rgba(97, 218, 251, 0.2);
}

.course-react:hover {
  box-shadow: 
    25px 25px 80px #0a1a1a,
    -25px -25px 80px #2a5a5a,
    inset 0 0 0 1px rgba(97, 218, 251, 0.3),
    0 0 100px rgba(97, 218, 251, 0.15);
}

.theme-react .holo-layer.layer-1 {
  background: linear-gradient(45deg, rgba(97, 218, 251, 0.15), rgba(97, 218, 251, 0.1));
}

.theme-react .orb {
  background: radial-gradient(circle, rgba(97, 218, 251, 0.8), transparent);
  box-shadow: 0 0 20px rgba(97, 218, 251, 0.5);
}

.course-badge-neo.theme-react {
  border-color: rgba(97, 218, 251, 0.3);
  box-shadow: 0 0 20px rgba(97, 218, 251, 0.2);
}

.code-projection.theme-react {
  border-color: rgba(97, 218, 251, 0.4);
  box-shadow: 0 0 30px rgba(97, 218, 251, 0.3);
}

.skill-ring.theme-react .ring-progress {
  background: conic-gradient(
    from 0deg,
    #61dafb 0deg,
    #61dafb calc(var(--progress, 95) * 3.6deg),
    rgba(255, 255, 255, 0.1) calc(var(--progress, 95) * 3.6deg)
  );
}

.btn-neo-primary.theme-react {
  background: linear-gradient(135deg, #61dafb, #21a9c7);
}

/* Django Theme */
.course-django {
  background: linear-gradient(145deg, #1a2e1a, #162e16);
  border: 1px solid rgba(68, 183, 139, 0.2);
}

.course-django:hover {
  box-shadow: 
    25px 25px 80px #0a1a0a,
    -25px -25px 80px #2a5a2a,
    inset 0 0 0 1px rgba(68, 183, 139, 0.3),
    0 0 100px rgba(68, 183, 139, 0.15);
}

.theme-django .holo-layer.layer-1 {
  background: linear-gradient(45deg, rgba(68, 183, 139, 0.15), rgba(9, 46, 32, 0.1));
}

.theme-django .orb {
  background: radial-gradient(circle, rgba(68, 183, 139, 0.8), transparent);
  box-shadow: 0 0 20px rgba(68, 183, 139, 0.5);
}

.course-badge-neo.theme-django {
  border-color: rgba(68, 183, 139, 0.3);
  box-shadow: 0 0 20px rgba(68, 183, 139, 0.2);
}

.code-projection.theme-django {
  border-color: rgba(68, 183, 139, 0.4);
  box-shadow: 0 0 30px rgba(68, 183, 139, 0.3);
}

.skill-ring.theme-django .ring-progress {
  background: conic-gradient(
    from 0deg,
    #44b78b 0deg,
    #092e20 calc(var(--progress, 90) * 3.6deg),
    rgba(255, 255, 255, 0.1) calc(var(--progress, 90) * 3.6deg)
  );
}

.btn-neo-primary.theme-django {
  background: linear-gradient(135deg, #44b78b, #092e20);
}

/* Node.js Theme */
.course-nodejs {
  background: linear-gradient(145deg, #1a2e1a, #16213e);
  border: 1px solid rgba(104, 160, 99, 0.2);
}

.course-nodejs:hover {
  box-shadow: 
    25px 25px 80px #0a1a0a,
    -25px -25px 80px #2a5a2a,
    inset 0 0 0 1px rgba(104, 160, 99, 0.3),
    0 0 100px rgba(104, 160, 99, 0.15);
}

.theme-nodejs .holo-layer.layer-1 {
  background: linear-gradient(45deg, rgba(104, 160, 99, 0.15), rgba(104, 160, 99, 0.1));
}

.theme-nodejs .orb {
  background: radial-gradient(circle, rgba(104, 160, 99, 0.8), transparent);
  box-shadow: 0 0 20px rgba(104, 160, 99, 0.5);
}

.course-badge-neo.theme-nodejs {
  border-color: rgba(104, 160, 99, 0.3);
  box-shadow: 0 0 20px rgba(104, 160, 99, 0.2);
}

.code-projection.theme-nodejs {
  border-color: rgba(104, 160, 99, 0.4);
  box-shadow: 0 0 30px rgba(104, 160, 99, 0.3);
}

.skill-ring.theme-nodejs .ring-progress {
  background: conic-gradient(
    from 0deg,
    #68a063 0deg,
    #68a063 calc(var(--progress, 87) * 3.6deg),
    rgba(255, 255, 255, 0.1) calc(var(--progress, 87) * 3.6deg)
  );
}

.btn-neo-primary.theme-nodejs {
  background: linear-gradient(135deg, #68a063, #4d7c47);
}

/* FullStack Theme */
.course-fullstack {
  background: linear-gradient(145deg, #2e1a2e, #3e163e);
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.course-fullstack:hover {
  box-shadow: 
    25px 25px 80px #1a0a1a,
    -25px -25px 80px #5a2a5a,
    inset 0 0 0 1px rgba(139, 92, 246, 0.3),
    0 0 100px rgba(139, 92, 246, 0.15);
}

.theme-fullstack .holo-layer.layer-1 {
  background: linear-gradient(45deg, rgba(139, 92, 246, 0.15), rgba(236, 72, 153, 0.1));
}

.theme-fullstack .orb {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.8), transparent);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

.course-badge-neo.theme-fullstack {
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
}

.code-projection.theme-fullstack {
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.3);
}

.skill-ring.theme-fullstack .ring-progress {
  background: conic-gradient(
    from 0deg,
    #8b5cf6 0deg,
    #ec4899 calc(var(--progress, 100) * 3.6deg),
    rgba(255, 255, 255, 0.1) calc(var(--progress, 100) * 3.6deg)
  );
}

.btn-neo-primary.theme-fullstack {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

/* Tech Star Specific Colors */
.fastapi-star { 
  top: 10px; 
  right: 30px; 
  color: #009688; 
  border-color: rgba(0, 150, 136, 0.3);
}

.postgres-star { 
  bottom: 10px; 
  left: 50%; 
  transform: translateX(-50%); 
  color: #336791; 
  border-color: rgba(51, 103, 145, 0.3);
}

.typescript-star { 
  top: 10px; 
  right: 30px; 
  color: #3178c6; 
  border-color: rgba(49, 120, 198, 0.3);
}

.vite-star { 
  bottom: 10px; 
  left: 50%; 
  transform: translateX(-50%); 
  color: #646cff; 
  border-color: rgba(100, 108, 255, 0.3);
}

.nextjs-star { 
  top: 10px; 
  right: 30px; 
  color: #000000; 
  border-color: rgba(255, 255, 255, 0.3);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
}

.tailwind-star { 
  bottom: 10px; 
  left: 50%; 
  transform: translateX(-50%); 
  color: #06b6d4; 
  border-color: rgba(6, 182, 212, 0.3);
}

.drf-star { 
  top: 10px; 
  right: 30px; 
  color: #ff6b35; 
  border-color: rgba(255, 107, 53, 0.3);
}

.celery-star { 
  bottom: 10px; 
  left: 50%; 
  transform: translateX(-50%); 
  color: #37b24d; 
  border-color: rgba(55, 178, 77, 0.3);
}

.express-star { 
  top: 10px; 
  right: 30px; 
  color: #000000; 
  border-color: rgba(255, 255, 255, 0.3);
}

.mongo-star { 
  bottom: 10px; 
  left: 50%; 
  transform: translateX(-50%); 
  color: #4db33d; 
  border-color: rgba(77, 179, 61, 0.3);
}

.docker-star { 
  top: 10px; 
  right: 30px; 
  color: #2496ed; 
  border-color: rgba(36, 150, 237, 0.3);
}

.k8s-star { 
  bottom: 10px; 
  left: 50%; 
  transform: translateX(-50%); 
  color: #326ce5; 
  border-color: rgba(50, 108, 229, 0.3);
}

/* Badge Colors */
.react-badge { color: #61dafb; }
.django-badge { color: #44b78b; }
.node-badge { color: #68a063; }

/* Menu Button Theme Colors */
.menu-btn.theme-python:hover .menu-dots span { background: #3776ab; }
.menu-btn.theme-javascript:hover .menu-dots span { background: #f7df1e; }
.menu-btn.theme-react:hover .menu-dots span { background: #61dafb; }
.menu-btn.theme-django:hover .menu-dots span { background: #44b78b; }
.menu-btn.theme-nodejs:hover .menu-dots span { background: #68a063; }
.menu-btn.theme-fullstack:hover .menu-dots span { background: #8b5cf6; }

/* Secondary Button Theme Colors */
.btn-neo-secondary.theme-python:hover { 
  border-color: rgba(55, 118, 171, 0.4);
  box-shadow: 0 0 20px rgba(55, 118, 171, 0.3);
}

.btn-neo-secondary.theme-javascript:hover { 
  border-color: rgba(247, 223, 30, 0.4);
  box-shadow: 0 0 20px rgba(247, 223, 30, 0.3);
}

.btn-neo-secondary.theme-react:hover { 
  border-color: rgba(97, 218, 251, 0.4);
  box-shadow: 0 0 20px rgba(97, 218, 251, 0.3);
}

.btn-neo-secondary.theme-django:hover { 
  border-color: rgba(68, 183, 139, 0.4);
  box-shadow: 0 0 20px rgba(68, 183, 139, 0.3);
}

.btn-neo-secondary.theme-nodejs:hover { 
  border-color: rgba(104, 160, 99, 0.4);
  box-shadow: 0 0 20px rgba(104, 160, 99, 0.3);
}

.btn-neo-secondary.theme-fullstack:hover { 
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

/* Special color for JS button text */
.btn-neo-primary.theme-javascript .btn-text {
  color: #1a1a1a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}