/* ==========================================================================
   Maktabi — HOME only (docs/SPEC_PAGE_HOME.md)
   ========================================================================== */

/* ---------- glow (hero + final CTA) ---------- */

.glow { position: relative; isolation: isolate; }
.glow::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(680px 380px at 50% 4%, var(--glow-1), transparent 70%),
    radial-gradient(520px 320px at 12% 12%, var(--glow-2), transparent 70%),
    radial-gradient(520px 320px at 88% 16%, var(--glow-3), transparent 70%);
}

/* ---------- hero ---------- */

/* Studied vertical rhythm (4px base): tight inside a group, generous between groups.
   h1 ‖ 26 ‖ chatbox --22-- buttons --14-- meta ‖ 48 ‖ proof strip
   (intro badge + rotating chatbox badge removed by design decision) */
.hero { padding-block: 64px 0; text-align: center; }
.hero h1 { max-width: 800px; margin: 0 auto; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -.01em; }
.hero .lead { max-width: 760px; margin: 26px auto 0; }
.hero__btns { display: flex; justify-content: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.hero__meta { margin-top: 14px; font-size: var(--fs-sm); color: var(--muted); }

/* ---------- app mock ---------- */
/* Moved to components.css — the floating app window now lives on /features. */

/* ---------- level chips ---------- */

.levels { padding-block: 66px 120px; text-align: center; }
/* reference: pill gaps are 10px both ways, row 1 spans 121..1078 and wraps 6 + 4 */
.levels__rows { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1000px; margin: 26px auto 0; }

/* ---------- stats ---------- */

.stat__n { display: flex; align-items: baseline; gap: 8px; }
.stat__n b { font: 800 var(--fs-stat)/1 var(--ff-head); color: var(--accent); letter-spacing: -.02em; }
.stat__n span { font: 500 15px/1 var(--ff-body); color: var(--text-2); }
.stat p { margin-top: 12px; font-size: var(--fs-sm); color: var(--muted); }

/* ---------- section heads ---------- */

/* ---------- faq ---------- */
/* ---------- four things ---------- */

.feat h3 { margin-top: 18px; }
.feat p { margin-top: 10px; font-size: var(--fs-sm); line-height: 1.68; color: var(--text-2); }
.feat .hr { margin: 20px 0 18px; }
.feat__chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- three steps ---------- */

.step h3 { margin-top: 16px; }
.step p { margin-top: 10px; font-size: var(--fs-sm); line-height: 1.68; color: var(--text-2); }

/* ---------- split sections ---------- */

.split-sec + .split-sec { margin-top: 96px; }
.split__text h3 { margin-top: 16px; }
.split__text > p { margin-top: 18px; font-size: var(--fs-body); line-height: 1.75; color: var(--text-2); }
.icon-rows { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.icon-rows li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--fs-sm); line-height: 1.6; }
.icon-rows svg { color: var(--accent); margin-top: 1px; }
.visual--left { order: -1; }
@media (max-width: 1023px) {
  .visual--left { order: 0; }
  .split-sec + .split-sec { margin-top: 64px; }
}
/* ---------- vault visual ---------- */

.vault__head { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.vault__list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.vault__row {
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding-inline: 14px;
  background: var(--surface-solid); border: 1px solid var(--border); border-radius: 10px;
  font-size: 13px;
}
.vault__row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault__row svg { color: var(--muted); }

/* ---------- two groups visual ---------- */

.groups { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.groups__panel { background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; }
.groups__panel h4 { font: 600 13.5px/1 var(--ff-body); letter-spacing: 0; }
.groups__panel > p { margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }
.groups__row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: 36px; margin-top: 8px; padding-inline: 12px;
  background: var(--bg-alt); border-radius: var(--r-sm);
  font-size: var(--fs-xs);
}
.groups__row b { font-weight: 500; font-variant-numeric: tabular-nums; }
.groups__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 38px; margin-top: 14px; padding-inline: 14px;
  background: var(--ok-soft); border-radius: var(--r-sm);
  font-size: var(--fs-xs); color: var(--ok);
}
.groups__foot em { font-style: normal; color: var(--text-2); }

/* ---------- gradebook visual ---------- */

.gb { padding: 0; overflow: hidden; }
.gb__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--border); font: 600 13.5px/1.4 var(--ff-body); }
.gb table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gb th, .gb td { padding: 13px 20px; text-align: start; border-bottom: 1px solid var(--border); }
.gb th { font: 500 var(--fs-xs)/1 var(--ff-body); color: var(--muted); text-transform: none; }
.gb th:not(:first-child), .gb td:not(:first-child) { text-align: end; font-variant-numeric: tabular-nums; }
.gb tr:last-child td { border-bottom: 0; }
/* ---------- pricing ---------- */

.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; }
.plan { padding: 24px 20px; }
.plan__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan--pop { border: 1.5px solid var(--accent); box-shadow: var(--sh-pop); margin-top: -12px; padding-bottom: 34px; }
.plan__tag { height: 24px; padding: 0 10px; font: 700 10.5px/1 var(--ff-body); letter-spacing: .07em; }
.plan__price { display: flex; align-items: flex-end; gap: 8px; margin-top: 18px; }
.plan__price b { font: 800 36px/1 var(--ff-head); letter-spacing: -.02em; }
.plan__price div { padding-bottom: 3px; }
.plan__price div span { display: block; font: 600 var(--fs-xs)/1.3 var(--ff-body); }
.plan__price div small { display: block; font-size: 12px; color: var(--muted); }
.plan__blurb { margin-top: 14px; min-height: 44px; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); }
.plan .btn--block { margin-top: 20px; }
.plan .hr { margin: 20px 0 18px; }
@media (max-width: 1100px) and (min-width: 681px) { .plans { grid-template-columns: repeat(2, 1fr); } .plan--pop, .plan--dark { margin-top: 0; transform: none; } }
@media (max-width: 680px) { .plans { grid-template-columns: 1fr; } .plan--pop, .plan--dark { margin-top: 0; transform: none; } }

/* ---------- trust bar ---------- */

/* ---------- faq ---------- */

.faq { max-width: 820px; margin-inline: auto; }
.faq__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 34px; font-size: var(--fs-sm); color: var(--muted); }
.faq__foot a { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-weight: 500; }

/* ---------- final cta ---------- */

.cta { text-align: center; }
.cta h2 { max-width: 640px; margin: 16px auto 0; }
.cta .lead { max-width: 700px; margin: 20px auto 0; }
.cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; }
.cta__meta { margin-top: 26px; font-size: var(--fs-sm); color: var(--muted); }

/* ---------- shared responsive ---------- */

@media (max-width: 900px) {
  .groups { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .hero { padding-top: 52px; }
  .hero h1 { font-size: clamp(28px, 8.6vw, 40px); } /* long FR words (ENSEIGNER.) must wrap-safe at 320 */
  .levels { padding-block: 48px 72px; }
  .gb th, .gb td { padding: 11px 12px; }
}

/* ==========================================================================
   Hero motion layer — aurora drift.
   The AI pill / float chips / shimmer moved to components.css together with the
   app window (now on /features); every animation stays gated behind html.motion-ok.
   ========================================================================== */

/* aurora — slow colour fields drifting behind the hero */
.aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora__b {
  position: absolute; width: 560px; height: 560px; border-radius: 50%;
  filter: blur(90px); opacity: .45;
}
.aurora__b--a { top: -180px; left: 4%; background: radial-gradient(circle at 35% 35%, rgba(139, 92, 246, .5), transparent 65%); }
.aurora__b--b { bottom: -260px; right: 2%; background: radial-gradient(circle at 60% 40%, rgba(56, 189, 248, .36), transparent 65%); }
html.motion-ok .aurora__b--a { animation: auroraA 26s ease-in-out infinite alternate; }
html.motion-ok .aurora__b--b { animation: auroraB 34s ease-in-out infinite alternate; }
@keyframes auroraA { from { transform: translate(0, 0) scale(1); } to { transform: translate(90px, 55px) scale(1.15); } }
@keyframes auroraB { from { transform: translate(0, 0) scale(1); } to { transform: translate(-110px, -60px) scale(1.12); } }

/* ---------- four things marquee (continuous left-to-right loop) ---------- */

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track { display: flex; width: max-content; }
.marquee__group { display: flex; gap: 20px; padding-inline-end: 20px; }
.marquee__group > .card { width: min(430px, 86vw); flex: none; box-sizing: border-box; }
html.motion-ok .marquee__track { animation: marqueeMove 48s linear infinite; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marqueeMove { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none !important; } }