/* ============================================
   הבינה שמקשיבה, עיצוב דף הקורס (אקורדיון)
   ============================================ */

* { box-sizing: border-box; }

body {
  font-family: 'Rubik', Arial, sans-serif;
  background: #0f1a2e;
  color: #fff;
  margin: 0;
  padding: 0;
  direction: rtl;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ====== HERO ====== */

.course-hero {
  position: relative;
  min-height: 90vh;
  background: radial-gradient(ellipse at top, #2d4260 0%, #1a2540 40%, #0f1a2e 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 20px 80px;
  text-align: center;
  overflow: hidden;
}

.course-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(246, 166, 126, 0.18), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(91, 143, 168, 0.15), transparent 50%);
  pointer-events: none;
}

.course-hero > * { position: relative; z-index: 1; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(246, 166, 126, 0.12);
  border: 1px solid rgba(246, 166, 126, 0.35);
  color: #f6a67e;
  padding: 10px 22px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 28px;
  backdrop-filter: blur(10px);
}

.hero-badge svg { flex-shrink: 0; }

.hero-title {
  font-size: clamp(52px, 9vw, 110px);
  font-weight: 900;
  margin: 0 0 24px;
  line-height: 1;
  background: linear-gradient(180deg, #fff 0%, #c5d4e8 70%, #a8c5d6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}

.hero-subtitle {
  font-size: clamp(17px, 2.2vw, 22px);
  color: #ffffffcc;
  max-width: 680px;
  margin: 0 0 44px;
  line-height: 1.8;
}

.hero-subtitle strong {
  color: #f6a67e;
  font-weight: 700;
}

.hero-price {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  background: rgba(15, 26, 46, 0.6);
  border: 1px solid rgba(246, 166, 126, 0.3);
  padding: 16px 28px;
  border-radius: 20px;
  margin-bottom: 28px;
  backdrop-filter: blur(10px);
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}

.price-old {
  font-size: 22px;
  color: #ffffff66;
  text-decoration: line-through;
  font-weight: 500;
  font-family: 'Rubik', sans-serif;
}

.price-new {
  font-size: 42px;
  color: #f6a67e;
  font-weight: 900;
  letter-spacing: -0.01em;
  font-family: 'Rubik', sans-serif;
}

.price-currency {
  font-size: 26px;
  color: #f6a67e;
  font-weight: 700;
  font-family: 'Rubik', sans-serif;
}

.price-label {
  font-size: 13px;
  color: #f6a67e;
  font-weight: 700;
  background: rgba(246, 166, 126, 0.15);
  padding: 4px 10px;
  border-radius: 100px;
  margin-right: 6px;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #f6a67e 0%, #e8834e 100%);
  color: #0f1a2e;
  padding: 20px 44px;
  border-radius: 100px;
  font-size: 20px;
  font-weight: 800;
  box-shadow: 0 16px 44px rgba(246, 166, 126, 0.4);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  cursor: pointer;
  border: none;
}

.hero-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 55px rgba(246, 166, 126, 0.55), 0 0 0 6px rgba(246, 166, 126, 0.15);
}

.hero-cta svg { flex-shrink: 0; }

.hero-meta {
  display: flex;
  gap: 32px;
  margin-top: 48px;
  color: #ffffff99;
  font-size: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-meta-item svg { color: #f6a67e; flex-shrink: 0; }

.hero-scroll {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff66;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}