/* ==========================================================================
   landing.css — الصفحة التعريفية وصفحة الدخول
   ========================================================================== */

.site { background: var(--paper); }

/* ---------- الشريط العلوي ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__links { display: none; gap: var(--s-5); margin-inline-start: var(--s-8); }
.nav__links a { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.nav__links a:hover { color: var(--ink); }
@media (min-width: 900px) { .nav__links { display: flex; } }

.shell { max-width: 1120px; margin-inline: auto; padding-inline: var(--s-5); }

/* ---------- البطل ---------- */
.hero { padding: var(--s-12) 0 var(--s-10); }
@media (min-width: 900px) {
  .hero { padding: var(--s-20) 0 var(--s-16); display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-12); align-items: center; }
}
.hero__title {
  font-size: var(--fs-3xl); font-weight: 700;
  line-height: 1.08; letter-spacing: -.035em;
  margin-bottom: var(--s-5);
}
.hero__title em { font-style: normal; color: var(--accent); }
.hero__lead { font-size: var(--fs-md); color: var(--muted); max-width: 46ch; line-height: 1.85; }
.hero__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-6); }
.hero__note { font-size: var(--fs-xs); color: var(--muted-2); margin-top: var(--s-4); }

/* العنصر المميّز: شريط اليوم الحي في صفحة الهبوط */
.hero__rail {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-5);
  box-shadow: var(--shadow-md);
  margin-top: var(--s-8);
}
@media (min-width: 900px) { .hero__rail { margin-top: 0; } }
.hero__rail-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--s-4); margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}

/* ---------- الأقسام ---------- */
.sec { padding: var(--s-16) 0; border-top: 1px solid var(--line); }
.sec__eyebrow {
  font-size: var(--fs-xs); font-weight: 600; color: var(--accent);
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--s-3);
}
.sec__title { font-size: clamp(26px, 4.2vw, 38px); letter-spacing: -.025em; margin-bottom: var(--s-3); }
.sec__lead { color: var(--muted); max-width: 58ch; line-height: 1.85; margin-bottom: var(--s-8); }

.feature {
  padding: var(--s-5); border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--paper);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.feature:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.feature__icon {
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-size: 18px; margin-bottom: var(--s-4);
}
.feature h3 { margin-bottom: var(--s-2); }
.feature p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.8; margin: 0; }

/* خطوات الدراسة — تسلسل حقيقي فيستحق الترقيم */
.steps { counter-reset: step; display: grid; gap: var(--s-5); }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding-top: var(--s-6); border-top: 2px solid var(--line); }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: -13px; inset-inline-start: 0;
  background: var(--paper); padding-inline-end: var(--s-3);
  font-family: var(--font-num); font-size: var(--fs-sm); font-weight: 700; color: var(--accent);
}
.step h3 { margin-bottom: var(--s-2); font-size: var(--fs-base); }
.step p { color: var(--muted); font-size: var(--fs-sm); margin: 0; line-height: 1.8; }

/* المدرسون */
.teacher-card {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-lg);
}

/* الأسعار */
.plan {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-6); background: var(--paper);
  display: flex; flex-direction: column;
}
.plan--featured { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.plan__price { font-family: var(--font-num); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.03em; }
.plan__price span { font-size: var(--fs-sm); font-weight: 400; color: var(--muted); }
.plan ul { margin: var(--s-5) 0; display: flex; flex-direction: column; gap: var(--s-3); }
.plan li { font-size: var(--fs-sm); display: flex; gap: var(--s-3); align-items: flex-start; }
.plan li::before { content: "✓"; color: var(--accent); font-weight: 700; flex: none; }

/* الأسئلة الشائعة */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; text-align: start;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) 0; font-size: var(--fs-md); font-weight: 600;
}
.faq__q span:last-child { color: var(--accent); font-size: var(--fs-lg); transition: transform var(--dur) var(--ease); flex: none; }
.faq__item.is-open .faq__q span:last-child { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height var(--dur) var(--ease); }
.faq__item.is-open .faq__a { max-height: 320px; }
.faq__a p { color: var(--muted); line-height: 1.9; padding-bottom: var(--s-5); margin: 0; }

/* نداء الختام */
.cta-band {
  background: var(--ink); color: #fff;
  border-radius: var(--r-lg); padding: var(--s-12) var(--s-6);
  text-align: center;
}
.cta-band h2 { color: #fff; font-size: clamp(24px, 4vw, 34px); margin-bottom: var(--s-3); }
.cta-band p { color: rgba(255,255,255,.66); max-width: 48ch; margin-inline: auto; }

.footer {
  padding: var(--s-8) 0; border-top: 1px solid var(--line);
  color: var(--muted); font-size: var(--fs-sm);
}

/* ---------- صفحة الدخول ---------- */
.auth {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; padding: var(--s-5);
  background: var(--surface);
}
.auth__card {
  width: 100%; max-width: 420px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-8) var(--s-6);
  box-shadow: var(--shadow-md);
  animation: riseIn .4s var(--ease);
}
.auth__brand { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-6); }
.auth__error {
  background: var(--danger-soft); color: var(--danger);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  font-size: var(--fs-sm); margin-bottom: var(--s-4);
}
.demo-account {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; text-align: start;
  padding: var(--s-3); border: 1px solid var(--line);
  border-radius: var(--r-md); margin-bottom: var(--s-2);
  transition: border-color var(--dur-fast) var(--ease);
}
.demo-account:hover { border-color: var(--accent); }