/* ==========================================================================
   Hamida Academy — Homepage (views/home3-rtl.html)
   One world in three environments:
     1. Hero                                  → the teacher, the two subjects
     2. Subjects, courses, story, about       → one adaptive content environment
     3. الصخرة teaser, final CTA, footer       → the intentional dark closing
   Every environment shares the same radius system, border treatment,
   teal/copper lighting, typography, easing and spacing rhythm.
   Depends on pixel-v2.css (tokens) + pixel-public.css (shell). Modifies neither.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Homepage theme tokens
   The interface panels (.px-mock) stay deliberately dark in both themes so the
   product keeps its contrast and depth inside a light content environment.
   -------------------------------------------------------------------------- */
:root,
html[data-theme="dark"] {
  --px-hero-bg:
    radial-gradient(110% 80% at 82% 6%, rgba(26, 155, 130, 0.3) 0%, transparent 58%),
    radial-gradient(90% 70% at 10% 96%, rgba(217, 145, 63, 0.14) 0%, transparent 62%),
    linear-gradient(180deg, #051a16 0%, #06201c 52%, #072320 100%);
  --px-hero-pattern-opacity: 0.16;

  /* The adaptive content environment — one continuous surface behind the
     subjects, the courses gateway, the platform story and the about block. */
  --px-content-bg:
    radial-gradient(70% 46% at 84% 6%, rgba(26, 155, 130, 0.2) 0%, transparent 62%),
    radial-gradient(60% 44% at 6% 74%, rgba(217, 145, 63, 0.1) 0%, transparent 64%),
    linear-gradient(180deg, #041614 0%, #072320 46%, #041614 100%);
  --px-content-edge: #041614;

  --px-surface: linear-gradient(168deg, rgba(16, 58, 51, 0.56) 0%, rgba(6, 29, 25, 0.92) 74%);
  --px-surface-soft: rgba(255, 255, 255, 0.05);
  --px-surface-border: rgba(255, 255, 255, 0.12);
  --px-surface-shadow: 0 20px 44px rgba(2, 12, 10, 0.42);
  --px-surface-hover: rgba(26, 155, 130, 0.5);
  --px-surface-lift: 0 26px 54px rgba(2, 12, 10, 0.5);

  --px-card-bg: linear-gradient(180deg, rgba(16, 58, 51, 0.62) 0%, rgba(5, 26, 22, 0.96) 72%);
  --px-card-border: rgba(255, 255, 255, 0.11);

  /* Portrait stage */
  --px-stage-plate: linear-gradient(180deg, rgba(26, 155, 130, 0.46) 0%, rgba(8, 82, 68, 0.3) 58%, rgba(8, 82, 68, 0.06) 100%);
  --px-stage-ring: rgba(95, 203, 176, 0.24);
  --px-stage-floor: radial-gradient(60% 100% at 50% 100%, rgba(26, 155, 130, 0.45) 0%, transparent 70%);
  --px-portrait-shadow: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.5));
  --px-portrait-rim: drop-shadow(0 0 16px rgba(95, 203, 176, 0.26));
  --px-tag-bg: rgba(6, 29, 25, 0.84);
  --px-tag-border: rgba(255, 255, 255, 0.2);
  --px-tag-ink: #ffffff;

  --px-rock-bg:
    radial-gradient(70% 90% at 50% 110%, rgba(233, 178, 74, 0.14) 0%, transparent 62%),
    radial-gradient(80% 80% at 20% 0%, rgba(26, 155, 130, 0.22) 0%, transparent 58%),
    linear-gradient(180deg, #041614 0%, #061d19 100%);
}

html[data-theme="light"] {
  --px-hero-bg:
    radial-gradient(110% 80% at 82% 4%, rgba(26, 155, 130, 0.18) 0%, transparent 58%),
    radial-gradient(90% 70% at 8% 98%, rgba(217, 145, 63, 0.14) 0%, transparent 62%),
    linear-gradient(180deg, #f9faf6 0%, #eaf4ef 54%, #dfeee7 100%);
  --px-hero-pattern-opacity: 0.4;

  --px-content-bg:
    radial-gradient(70% 46% at 84% 6%, rgba(26, 155, 130, 0.12) 0%, transparent 62%),
    radial-gradient(60% 44% at 6% 74%, rgba(217, 145, 63, 0.09) 0%, transparent 64%),
    linear-gradient(180deg, #f7f8f4 0%, #eaf4ef 46%, #f7f8f4 100%);
  --px-content-edge: #f7f8f4;

  --px-surface: linear-gradient(168deg, #ffffff 0%, #f1f8f4 100%);
  --px-surface-soft: rgba(8, 82, 68, 0.05);
  --px-surface-border: rgba(8, 82, 68, 0.16);
  --px-surface-shadow: 0 18px 38px rgba(6, 58, 50, 0.13);
  --px-surface-hover: rgba(8, 82, 68, 0.44);
  --px-surface-lift: 0 26px 54px rgba(6, 58, 50, 0.18);

  --px-card-bg: linear-gradient(180deg, #ffffff 0%, #eef6f1 100%);
  --px-card-border: rgba(8, 82, 68, 0.16);

  --px-stage-plate: linear-gradient(180deg, rgba(26, 155, 130, 0.32) 0%, rgba(199, 230, 219, 0.95) 56%, rgba(233, 247, 242, 0.5) 100%);
  --px-stage-ring: rgba(8, 82, 68, 0.22);
  --px-stage-floor: radial-gradient(60% 100% at 50% 100%, rgba(8, 82, 68, 0.24) 0%, transparent 70%);
  --px-portrait-shadow: drop-shadow(0 18px 24px rgba(6, 58, 50, 0.3));
  --px-portrait-rim: drop-shadow(0 0 14px rgba(255, 255, 255, 0.9));
  --px-tag-bg: rgba(255, 255, 255, 0.92);
  --px-tag-border: rgba(8, 82, 68, 0.22);
  --px-tag-ink: #0f2a26;
}

/* --------------------------------------------------------------------------
   1. Shared interface mock (platform-story scenes only) — always dark
   -------------------------------------------------------------------------- */
.px-mock {
  position: relative;
  overflow: hidden;
  background: linear-gradient(158deg, rgba(18, 64, 56, 0.96) 0%, rgba(7, 30, 26, 0.97) 72%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--px-r);
  box-shadow: 0 26px 60px rgba(2, 12, 10, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.px-mock::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(210deg, rgba(255, 255, 255, 0.13) 0%, transparent 42%);
}

.px-mock__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.px-mock__dots {
  display: flex;
  gap: 5px;
}

.px-mock__dots i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.26);
}

.px-mock__dots i:first-child {
  background: var(--px-violet-2);
}

.px-mock__dots i:nth-child(2) {
  background: var(--px-cyan);
}

.px-mock__label {
  margin-inline-start: auto;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.01em;
}

.px-mock__body {
  padding: 12px;
}

/* Player variant */
.px-mock__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--px-r-sm);
  background: radial-gradient(circle at 50% 45%, rgba(26, 155, 130, 0.5) 0%, rgba(5, 26, 22, 0.98) 68%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.px-mock__screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.7;
}

.px-mock__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0 0 8px rgba(26, 155, 130, 0.25), 0 12px 26px rgba(0, 0, 0, 0.45);
}

.px-mock__play::before {
  content: "";
  width: 0;
  height: 0;
  margin-inline-start: -3px;
  border-block: 9px solid transparent;
  border-inline-end: 14px solid var(--px-violet-deep);
  border-inline-start: 0;
}

.px-mock__track {
  position: absolute;
  inset-inline: 12px;
  bottom: 12px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.px-mock__track span {
  display: block;
  width: 46%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--px-cyan), var(--px-violet-2));
}

.px-bars {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.px-bars i {
  display: block;
  height: 9px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.13);
}

.px-bars i:nth-child(2) {
  width: 72%;
}

.px-bars i:nth-child(3) {
  width: 48%;
}

/* Quiz variant */
.px-mock__q {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.px-mock__qbadge {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(140deg, var(--px-violet), var(--px-violet-deep));
  box-shadow: 0 6px 16px rgba(11, 103, 84, 0.5);
}

.px-mock__qline {
  flex: 1;
  height: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.2);
}

.px-opts {
  display: grid;
  gap: 8px;
}

.px-opts i {
  display: flex;
  align-items: center;
  height: 30px;
  padding-inline: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.px-opts i::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.28);
}

.px-opts i.is-picked {
  background: rgba(26, 155, 130, 0.24);
  border-color: rgba(26, 155, 130, 0.65);
}

.px-opts i.is-picked::before {
  background: var(--px-cyan);
  border-color: var(--px-cyan);
  box-shadow: 0 0 12px rgba(217, 145, 63, 0.8);
}

/* Result variant */
.px-mock__ring {
  position: relative;
  width: 92px;
  height: 92px;
  margin: 6px auto 12px;
  border-radius: 50%;
  background: conic-gradient(var(--px-violet-2) 0deg 250deg, rgba(255, 255, 255, 0.12) 250deg 360deg);
  display: grid;
  place-items: center;
}

.px-mock__ring::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: #072320;
}

.px-mock__ring i {
  position: relative;
  font-size: 1.4rem;
  color: var(--px-violet-2);
}

.px-rows {
  display: grid;
  gap: 8px;
}

.px-rows span {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding-inline: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.px-rows span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--pa-success);
}

.px-rows span::after {
  content: "";
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.13);
}

.px-rows span:nth-child(2)::before {
  background: var(--px-gold);
}

.px-rows span:nth-child(3)::before {
  background: var(--pa-danger);
}

/* --------------------------------------------------------------------------
   2. Seams between environments — a soft gradient fade, never a hard edge
   -------------------------------------------------------------------------- */
.px-dissolve {
  position: absolute;
  inset-inline: 0;
  z-index: 3;
  height: 96px;
  pointer-events: none;
  background: linear-gradient(180deg, var(--px-deep) 0%, transparent 100%);
}

.px-dissolve--top {
  top: 0;
}

.px-dissolve--bottom {
  bottom: 0;
  background: linear-gradient(0deg, var(--px-deep) 0%, transparent 100%);
}

/* Dissolves into the adaptive content environment follow the active theme. */
.px-dissolve--content {
  background: linear-gradient(180deg, var(--px-content-edge) 0%, transparent 100%);
}

.px-dissolve--bottom.px-dissolve--content {
  background: linear-gradient(0deg, var(--px-content-edge) 0%, transparent 100%);
}

/* --------------------------------------------------------------------------
   3. HERO
   Mobile-first: copy, actions, then the portrait stage. From 992px the two
   sit side by side with the portrait standing on its plate beside the copy.
   -------------------------------------------------------------------------- */
.px-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* --px-header-total already contains the Safe Area, so it is never added
     a second time here. The eyebrow can therefore not sit under the header. */
  padding-top: calc(var(--px-header-total) + 18px);
  padding-bottom: 0;
  color: var(--px-ink);
  background: var(--px-hero-bg);
}

.px-hero__atmo {
  z-index: 0;
  overflow: hidden;
}

/* The supplied biology tile, very quiet, fading out towards the copy. */
.px-hero__pattern {
  position: absolute;
  inset: -40px;
  background-image: url("../img/hamida/bio-pattern-tile.svg");
  background-size: 360px 360px;
  opacity: var(--px-hero-pattern-opacity);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 70%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 30% 70%, #000 0%, transparent 78%);
}

.px-hero__glow {
  opacity: 0.42;
}

.px-hero__vector {
  position: absolute;
  display: none;
  opacity: 0.55;
  pointer-events: none;
}

.px-hero__vector--dna {
  top: 8%;
  inset-inline-end: 2%;
  width: 90px;
}

.px-hero__vector--molecule {
  bottom: 6%;
  inset-inline-start: 46%;
  width: 190px;
  opacity: 0.35;
}

.px-hero__inner {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 6px;
  align-items: end;
}

/* --- copy --- */
.px-hero__copy {
  position: relative;
  z-index: 5;
  max-width: 640px;
  padding-bottom: 10px;
}

.px-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 8px;
  margin-bottom: 14px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--px-ink);
  background: var(--px-chip);
  border: 1px solid var(--px-rule-2);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

body.px-body .px-hero__eyebrow-mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: contain;
}

body.px-body .px-hero__title {
  margin: 0 0 12px;
  font-size: clamp(2.15rem, 8.2vw, 4.3rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--px-ink);
  text-wrap: balance;
}

/* The subject statement — a composed line, not a small chip. */
body.px-body .px-hero__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}

.px-hero__brandrule {
  flex: 0 0 auto;
  width: 30px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--px-cyan), var(--px-violet-2));
  box-shadow: 0 0 16px rgba(217, 145, 63, 0.45);
}

.px-hero__brandtext {
  font-size: clamp(1.1rem, 4vw, 1.7rem);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.01em;
  background: linear-gradient(120deg, #ffffff 0%, var(--px-violet-2) 52%, var(--px-gold-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-theme="light"] .px-hero__brandtext {
  background: linear-gradient(120deg, #083d34 0%, var(--px-violet) 52%, #b8732a 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* The two subjects, each with its grade, as compact chips. */
body.px-body .px-hero__subjects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

@media (max-width: 359.98px) {
  body.px-body .px-hero__subjects {
    grid-template-columns: minmax(0, 1fr);
  }
}

.px-subjectchip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 60px;
  padding: 9px 12px;
  background: var(--px-chip);
  border: 1px solid var(--px-rule-2);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.px-subjectchip__icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  font-size: 1rem;
  color: #fff;
  border-radius: 12px;
}

.px-subjectchip--bio .px-subjectchip__icon {
  background: linear-gradient(140deg, var(--px-violet), var(--px-violet-deep));
  box-shadow: 0 8px 18px rgba(11, 103, 84, 0.35);
}

.px-subjectchip--sci .px-subjectchip__icon {
  background: linear-gradient(140deg, #e0a04a, #b8732a);
  box-shadow: 0 8px 18px rgba(184, 115, 42, 0.35);
}

.px-subjectchip__text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.px-subjectchip__text strong {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--px-ink);
}

.px-subjectchip__text span {
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--px-ink-3);
}

body.px-body .px-hero__text {
  margin: 0 0 20px;
  max-width: 50ch;
  font-size: clamp(0.94rem, 2.5vw, 1.06rem);
  line-height: 1.9;
  color: var(--px-ink-2);
}

/* Two actions that stay proportionate on a 360px row and stack deliberately
   on the narrowest phones. The primary action always stays dominant. */
.px-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.px-body .px-hero__cta .px-btn {
  flex: 1 1 132px;
  min-width: 0;
  padding-inline: 16px;
}

body.px-body .px-hero__cta .px-btn:first-child {
  flex-grow: 1.35;
}

@media (max-width: 344px) {
  .px-hero__cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 480px) {
  body.px-body .px-hero__cta .px-btn,
  body.px-body .px-hero__cta .px-btn:first-child {
    flex: 0 0 auto;
    padding-inline: 26px;
  }
}

/* Three real things the platform gives, no numbers. */
body.px-body .px-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--px-ink-2);
}

.px-hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}

.px-hero__facts i {
  font-size: 0.9em;
  color: var(--px-cyan);
}

/* --- portrait stage --- */
.px-stage {
  position: relative;
  z-index: 3;
  width: 100%;
  height: clamp(292px, 86vw, 372px);
  margin-top: 4px;
  overflow: hidden;
}

.px-stage__plate {
  position: absolute;
  inset: 22% 8% 0;
  border-radius: 999px 999px var(--px-r-lg) var(--px-r-lg);
  background: var(--px-stage-plate);
}

.px-stage__ring {
  position: absolute;
  inset: 16% 3% -6%;
  border: 1px solid var(--px-stage-ring);
  border-radius: 999px 999px var(--px-r-lg) var(--px-r-lg);
}

body.px-body .px-stage__cells {
  position: absolute;
  top: 24%;
  inset-inline-end: 6%;
  width: 46%;
  max-width: 260px;
  height: auto;
  opacity: 0.6;
  pointer-events: none;
}

/* Mobile: a wide, top-anchored portrait so the face, shoulders and crossed
   arms read immediately; the lower body is deliberately outside the stage
   and the cut edge dissolves into the section. */
body.px-body .px-stage__portrait {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 74%;
  max-width: 300px;
  height: 100%;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: 50% 0%;
  filter: var(--px-portrait-shadow) var(--px-portrait-rim);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 60%, transparent 98%);
}

.px-stage__floor {
  position: absolute;
  inset-inline: 10%;
  bottom: 0;
  height: 26%;
  background: var(--px-stage-floor);
  filter: blur(14px);
  pointer-events: none;
}

.px-stage__tag {
  position: absolute;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--px-tag-ink);
  background: var(--px-tag-bg);
  border: 1px solid var(--px-tag-border);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(2, 12, 10, 0.22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.px-stage__tag i {
  color: var(--px-cyan);
}

.px-stage__tag--a {
  top: 30%;
  inset-inline-end: 4%;
}

.px-stage__tag--b {
  top: 54%;
  inset-inline-start: 2%;
}

.px-stage__tag--b i {
  color: var(--px-violet-2);
}

/* --- hero entrance --- */
.px-hero__eyebrow {
  --px-delay: 60ms;
}

.px-hero__title {
  --px-delay: 140ms;
}

.px-hero__brand {
  --px-delay: 220ms;
}

.px-hero__subjects {
  --px-delay: 290ms;
}

.px-hero__text {
  --px-delay: 360ms;
}

.px-hero__cta {
  --px-delay: 430ms;
}

.px-hero__facts {
  --px-delay: 500ms;
}

.px-hero [data-enter] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}

.px-hero.is-ready [data-enter] {
  opacity: 1;
  transform: none;
  transition: opacity 640ms var(--px-ease-out), transform 780ms var(--px-ease-out);
  transition-delay: var(--px-delay, 0ms);
}

/* The portrait stage is static: it is the LCP element and never waits on a transition. */

/* --- hero responsive: mobile first --- */
@media (min-width: 480px) {
  .px-stage {
    height: 400px;
    max-width: 560px;
    margin-inline: auto;
  }

  body.px-body .px-stage__portrait {
    max-width: 330px;
  }
}

@media (min-width: 768px) {
  .px-hero {
    padding-top: calc(var(--px-header-total) + 30px);
  }

  .px-hero__vector {
    display: block;
  }

  .px-stage {
    height: 470px;
    max-width: 640px;
  }

  body.px-body .px-stage__portrait {
    max-width: 380px;
  }

  .px-stage__tag {
    display: inline-flex;
  }
}

/* Desktop composition: the portrait is bottom-anchored and shown complete,
   standing on its plate beside the copy. */
@media (min-width: 992px) {
  .px-hero {
    padding-top: calc(var(--px-header-total) + 40px);
  }

  .px-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 30px;
    align-items: end;
  }

  .px-hero__copy {
    padding-bottom: 54px;
  }

  .px-stage {
    height: 560px;
    max-width: none;
    margin-top: 0;
    overflow: visible;
  }

  .px-stage__plate {
    inset: 14% 10% 0;
  }

  .px-stage__ring {
    inset: 8% 5% -5%;
  }

  body.px-body .px-stage__portrait {
    width: auto;
    max-width: none;
    height: 104%;
    object-fit: contain;
    object-position: 50% 100%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .px-stage__tag--a {
    top: 26%;
    inset-inline-end: 0;
  }

  .px-stage__tag--b {
    top: 52%;
    inset-inline-start: 0;
  }

  .px-hero__vector--molecule {
    inset-inline-start: 2%;
    bottom: 10%;
  }
}

@media (min-width: 1200px) {
  .px-hero__inner {
    gap: 44px;
  }

  .px-stage {
    height: 620px;
  }

  .px-hero__copy {
    padding-bottom: 70px;
  }
}

@media (min-width: 1400px) {
  .px-stage {
    height: 660px;
  }
}

/* --------------------------------------------------------------------------
   4. ADAPTIVE CONTENT ENVIRONMENT — subjects + courses + story + about
   -------------------------------------------------------------------------- */
.px-content-world {
  position: relative;
  overflow: clip;
  isolation: isolate;
  color: var(--px-ink);
  background: var(--px-content-bg);
}

.px-content-world > .px-band {
  overflow: visible;
  background: none;
  isolation: auto;
}

.px-band--content {
  color: var(--px-ink);
}

.px-band--content .px-eyebrow {
  color: var(--px-accent);
}

body.px-body .px-band--content .px-title {
  color: var(--px-ink);
}

body.px-body .px-band--content .px-lead {
  color: var(--px-ink-2);
}

.px-atmo__grid--content {
  background-image: linear-gradient(var(--px-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--px-grid-line) 1px, transparent 1px);
}

/* ---- Subjects ---- */
.px-subjects {
  padding-block: clamp(44px, 7vw, 92px) clamp(10px, 2vw, 22px);
}

.px-subjectgrid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 720px) {
  .px-subjectgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
}

.px-subject {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  overflow: hidden;
  padding: clamp(22px, 4vw, 32px);
  background: var(--px-surface);
  border: 1px solid var(--px-surface-border);
  border-radius: var(--px-r-lg);
  box-shadow: var(--px-surface-shadow);
  transition: transform 380ms var(--px-ease-out), box-shadow 380ms var(--px-ease),
    border-color 320ms var(--px-ease);
}

.px-subject:hover {
  transform: translateY(-4px);
  border-color: var(--px-surface-hover);
  box-shadow: var(--px-surface-lift);
}

.px-subject::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 22px;
  bottom: 22px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--px-violet);
}

.px-subject--sci::before {
  background: var(--px-cyan);
}

.px-subject__vector {
  position: absolute;
  top: -14px;
  inset-inline-end: -18px;
  width: 132px;
  opacity: 0.55;
  pointer-events: none;
}

.px-subject--sci .px-subject__vector {
  width: 180px;
  top: -24px;
}

body.px-body .px-subject__vector img {
  width: 100%;
  height: auto;
  display: block;
}

.px-subject__grade {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--px-accent);
  background: var(--px-chip);
  border: 1px solid var(--px-rule-2);
  border-radius: 999px;
}

.px-subject__grade::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--px-violet-2);
}

.px-subject--sci .px-subject__grade::before {
  background: var(--px-cyan);
}

body.px-body .px-subject__title {
  position: relative;
  margin: 14px 0 8px;
  font-size: clamp(1.4rem, 4.2vw, 1.9rem);
  font-weight: 900;
  color: var(--px-ink);
}

body.px-body .px-subject__text {
  position: relative;
  margin: 0 0 20px;
  max-width: 44ch;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--px-ink-2);
}

body.px-body .px-subject__cta {
  position: relative;
  margin-top: auto;
}

/* ---- Platform story ---- */
.px-story {
  padding-block: clamp(36px, 6vw, 80px) clamp(30px, 5vw, 56px);
}

.px-story__layout {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 20px;
}

.px-steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.px-step {
  position: relative;
}

body.px-body .px-step__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--px-ink);
}

body.px-body .px-step__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 14px;
  font: inherit;
  color: inherit;
  text-align: start;
  background: var(--px-surface);
  border: 1px solid var(--px-surface-border);
  border-radius: var(--px-r);
  box-shadow: var(--px-surface-shadow);
  cursor: pointer;
  transition: border-color 320ms var(--px-ease), box-shadow 320ms var(--px-ease),
    transform 320ms var(--px-ease);
}

body.px-body .px-step__btn[aria-current="true"] {
  border-color: var(--px-surface-hover);
  box-shadow: var(--px-surface-lift);
}

.px-step__num {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  font-family: var(--pa-font);
  font-size: 1rem;
  font-weight: 800;
  color: var(--px-accent);
  background: var(--px-chip);
  border: 1px solid var(--px-rule-2);
  border-radius: var(--px-r-sm);
  transition: color 320ms var(--px-ease), background-color 320ms var(--px-ease),
    border-color 320ms var(--px-ease);
}

.px-step__btn[aria-current="true"] .px-step__num {
  color: #fff;
  background: linear-gradient(140deg, var(--px-violet), var(--px-violet-deep));
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(11, 103, 84, 0.36);
}

.px-step__label {
  min-width: 0;
}

/* One permanent stage container in one permanent parent. */
.px-story__stage {
  padding: 14px;
  border-radius: var(--px-r);
  background: linear-gradient(160deg, #0f3a33, #06201c);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.px-story__space {
  position: relative;
  display: grid;
  min-height: 268px;
}

.px-story__frame {
  display: none;
}

.px-scene {
  grid-area: 1 / 1;
  align-self: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 420ms var(--px-ease-out);
}

.px-scene.is-active {
  opacity: 1;
  visibility: visible;
}

.px-story__stage .px-mock {
  box-shadow: 0 14px 30px rgba(2, 12, 10, 0.5);
}

@media (min-width: 1024px) {
  .px-story__layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 46px;
    align-items: start;
  }

  /* Same node, same parent — only the sticky presentation changes. */
  .px-story__stage {
    position: sticky;
    top: calc(var(--px-header-total) + 34px);
    height: 500px;
    padding: 0;
    background: none;
    border: 0;
    perspective: 1400px;
  }

  .px-story__space {
    position: absolute;
    inset: 0;
    min-height: 0;
    transform-style: preserve-3d;
  }

  .px-story__frame {
    display: block;
    position: absolute;
    inset: 8% 6%;
    border-radius: var(--px-r-lg);
    background:
      radial-gradient(70% 70% at 30% 20%, rgba(26, 155, 130, 0.35), transparent 62%),
      linear-gradient(150deg, #103a33, #051a16);
    border: 1px solid var(--px-line);
    box-shadow: 0 40px 90px rgba(2, 12, 10, 0.45);
    transform: translateZ(-120px) rotateY(6deg);
  }

  .px-story__frame::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 30px 30px;
    -webkit-mask-image: radial-gradient(circle at 40% 30%, #000, transparent 76%);
    mask-image: radial-gradient(circle at 40% 30%, #000, transparent 76%);
  }

  .px-scene {
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    width: 74%;
    max-width: 400px;
    opacity: 0;
    visibility: visible;
    transform: translate3d(50%, -50%, -90px) rotateY(16deg) scale(0.9);
    transition: opacity 520ms var(--px-ease-out), transform 620ms var(--px-ease-out);
    pointer-events: none;
  }

  .px-scene.is-active {
    opacity: 1;
    transform: translate3d(50%, -50%, 60px) rotateY(6deg) scale(1);
  }

  .px-story__stage .px-mock {
    box-shadow: 0 40px 80px rgba(2, 12, 10, 0.62);
  }

  .px-steps {
    gap: 20px;
    padding-block: 40px;
  }

  body.px-body .px-step__title {
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  }

  body.px-body .px-step__btn {
    gap: 16px;
    min-height: 92px;
    padding: 22px 26px;
    border-radius: var(--px-r-lg);
  }

  body.px-body .px-step__btn[aria-current="true"] {
    transform: translateX(-6px);
  }

  .px-step__num {
    width: 44px;
    height: 44px;
    font-size: 1.05rem;
  }
}

/* ---- Courses (login gated) ---- */
.px-courses {
  padding-block: clamp(30px, 5vw, 56px);
}

.px-courses__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.px-gate {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: clamp(28px, 6vw, 58px) clamp(20px, 5vw, 54px);
  color: var(--px-on-dark);
  border: 1px solid var(--px-line);
  border-radius: var(--px-r-lg);
  background:
    radial-gradient(80% 90% at 82% 10%, rgba(26, 155, 130, 0.5) 0%, transparent 62%),
    linear-gradient(150deg, #0e3a32 0%, #051a16 74%);
  box-shadow: 0 34px 74px rgba(4, 22, 19, 0.34);
  perspective: 1100px;
}

.px-gate__doors {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

.px-gate__door {
  position: absolute;
  inset-block: 6%;
  width: 34%;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--px-r);
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 26px 26px;
  background-color: rgba(255, 255, 255, 0.03);
}

.px-gate__door--a {
  inset-inline-start: -6%;
  transform: rotateY(26deg);
  box-shadow: 22px 0 60px rgba(0, 0, 0, 0.35);
}

.px-gate__door--b {
  inset-inline-end: -6%;
  transform: rotateY(-26deg);
  box-shadow: -22px 0 60px rgba(0, 0, 0, 0.35);
}

.px-gate__beam {
  position: absolute;
  inset-inline: 32%;
  inset-block: 0;
  background: linear-gradient(180deg, rgba(217, 145, 63, 0.22), transparent 70%);
  filter: blur(24px);
}

.px-gate__content {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
}

body.px-body .px-gate__title {
  margin: 0 0 12px;
  font-size: clamp(1.35rem, 4.4vw, 2.05rem);
  font-weight: 800;
  color: #fff;
}

body.px-body .px-gate__text {
  margin: 0 0 26px;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--px-on-dark-2);
}

.px-gate__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

body.px-body .px-gate__actions .px-btn {
  flex: 1 1 auto;
  min-width: 160px;
}

@media (min-width: 480px) {
  body.px-body .px-gate__actions .px-btn {
    flex: 0 0 auto;
  }
}

.px-gate__lock {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  font-size: 1.2rem;
  color: var(--px-gold-2);
  background: rgba(233, 178, 74, 0.12);
  border: 1px solid rgba(233, 178, 74, 0.34);
  border-radius: var(--px-r);
}

.px-courses__grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* Course cards share the subject/step card language exactly. */
.px-course {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--px-surface);
  border: 1px solid var(--px-surface-border);
  border-radius: var(--px-r);
  box-shadow: var(--px-surface-shadow);
  transition: transform 380ms var(--px-ease-out), box-shadow 380ms var(--px-ease),
    border-color 320ms var(--px-ease);
}

.px-course:hover {
  transform: translateY(-5px);
  border-color: var(--px-surface-hover);
  box-shadow: var(--px-surface-lift);
}

.px-course__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--px-surface-soft);
  overflow: hidden;
}

body.px-body .px-course__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.px-course__state {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  padding: 6px 12px;
  font-size: 0.74rem;
  font-weight: 800;
  color: #fff;
  background: rgba(6, 29, 25, 0.82);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.px-course__state--free {
  background: rgba(22, 163, 74, 0.92);
}

/* An offer entry returned inside the course list. Opposite corner from the
   price/ownership chip so the two never overlap, and deliberately loud so an
   offer can never read as a plain course. */
.px-course__offer {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  padding: 6px 12px;
  font-size: 0.74rem;
  font-weight: 800;
  color: #fff;
  background: rgba(217, 119, 6, 0.95);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.px-course__state--owned {
  background: rgba(26, 155, 130, 0.94);
}

.px-course__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

body.px-body .px-course__titlewrap {
  margin: 0;
}

body.px-body .px-course__title {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.6;
  color: var(--px-ink);
  text-align: start;
  background: none;
  border: 0;
  cursor: pointer;
}

body.px-body .px-course__title:hover {
  color: var(--px-accent);
}

body.px-body .px-course__teacher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  min-height: 44px;
  padding: 0 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--px-ink-2);
  background: var(--px-chip);
  border: 1px solid var(--px-rule-2);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--pa-t) var(--px-ease), background-color var(--pa-t) var(--px-ease),
    border-color var(--pa-t) var(--px-ease);
}

body.px-body .px-course__teacher:hover {
  color: var(--px-accent);
  background: var(--px-chip-2);
  border-color: var(--px-violet-2);
}

.px-courses__status {
  position: relative;
  z-index: 2;
}

.px-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 30px 20px;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  color: var(--px-ink-2);
  background: var(--px-surface-soft);
  border: 1px dashed var(--px-rule-2);
  border-radius: var(--px-r);
}

.px-note--error {
  color: var(--pa-danger);
  background: var(--pa-danger-bg);
  border-style: solid;
  border-color: rgba(225, 29, 72, 0.24);
}

/* ---- About the teacher ---- */
.px-about {
  padding-block: clamp(30px, 5vw, 56px) clamp(60px, 9vw, 120px);
}

.px-about__layout {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 28px;
}

body.px-body .px-about__media {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid var(--px-surface-border);
  border-radius: var(--px-r-lg);
  box-shadow: var(--px-surface-shadow);
  background: var(--px-surface-soft);
}

body.px-body .px-about__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.px-about__caption {
  position: absolute;
  inset-inline: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  color: #fff;
  background: rgba(6, 29, 25, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.px-about__caption-name {
  font-size: 1.05rem;
  font-weight: 800;
}

.px-about__caption-role {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--px-gold-2);
}

.px-about__body .px-head {
  margin-bottom: clamp(18px, 3vw, 26px);
}

body.px-body .px-features {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.px-feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  background: var(--px-surface);
  border: 1px solid var(--px-surface-border);
  border-radius: var(--px-r);
  box-shadow: var(--px-surface-shadow);
}

.px-feature__icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  font-size: 1rem;
  color: #fff;
  background: linear-gradient(140deg, var(--px-violet), var(--px-violet-deep));
  border-radius: 13px;
  box-shadow: 0 8px 18px rgba(11, 103, 84, 0.3);
}

.px-feature:nth-child(even) .px-feature__icon {
  background: linear-gradient(140deg, #e0a04a, #b8732a);
  box-shadow: 0 8px 18px rgba(184, 115, 42, 0.3);
}

body.px-body .px-feature__title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--px-ink);
}

body.px-body .px-feature__text {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.8;
  color: var(--px-ink-2);
}

@media (min-width: 640px) {
  body.px-body .px-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .px-feature:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 992px) {
  .px-about__layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 48px;
    align-items: center;
  }

  body.px-body .px-about__media {
    max-width: none;
    aspect-ratio: 4 / 5;
  }
}

/* --------------------------------------------------------------------------
   5. الصخرة — static teaser inside the dark closing environment
   -------------------------------------------------------------------------- */
.px-rock {
  position: relative;
  padding-block: clamp(78px, 10vw, 130px) clamp(16px, 3vw, 32px);
  overflow: hidden;
  background: var(--px-rock-bg);
}

.px-rock__card {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 18px;
  max-width: 920px;
  margin-inline: auto;
  padding: clamp(22px, 5vw, 40px);
  text-align: center;
  color: #fff;
  border: 1px solid var(--px-line-2);
  border-radius: var(--px-r-lg);
  background: linear-gradient(150deg, rgba(18, 64, 56, 0.72), rgba(6, 29, 25, 0.9));
  box-shadow: 0 40px 90px rgba(2, 12, 10, 0.5);
}

.px-rock__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(circle at 20% 0%, #000, transparent 70%);
  mask-image: radial-gradient(circle at 20% 0%, #000, transparent 70%);
}

.px-rock__media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 200px;
}

.px-rock__halo {
  position: absolute;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(95, 203, 176, 0.42) 0%, transparent 66%);
  filter: blur(18px);
}

body.px-body .px-rock__img {
  position: relative;
  width: min(230px, 62vw);
  height: auto;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.45));
}

.px-rock__body {
  position: relative;
}

.px-rock__soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 800;
  color: #1c1105;
  background: linear-gradient(135deg, var(--px-gold-2), var(--px-gold));
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(233, 178, 74, 0.35);
}

body.px-body .px-rock__title {
  margin: 14px 0 8px;
  font-size: clamp(1.9rem, 6.5vw, 2.8rem);
  font-weight: 900;
  color: #fff;
}

body.px-body .px-rock__text {
  max-width: 46ch;
  margin: 0 auto;
  font-size: clamp(0.94rem, 2.5vw, 1.04rem);
  line-height: 1.9;
  color: var(--px-on-dark-2);
}

@media (min-width: 720px) {
  .px-rock__card {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 34px;
    align-items: center;
    text-align: start;
  }

  body.px-body .px-rock__text {
    margin-inline: 0;
  }
}

/* --------------------------------------------------------------------------
   6. DARK CLOSING ENVIRONMENT — final CTA into the footer
   -------------------------------------------------------------------------- */
.px-cta {
  position: relative;
  padding-block: clamp(40px, 7vw, 90px) clamp(58px, 9vw, 112px);
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 50% 110%, rgba(233, 178, 74, 0.16) 0%, transparent 62%),
    radial-gradient(80% 80% at 20% 0%, rgba(26, 155, 130, 0.18) 0%, transparent 58%),
    linear-gradient(180deg, #061d19 0%, #061d19 100%);
}

.px-cta__panel {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(28px, 6vw, 56px);
  text-align: center;
  color: #fff;
  border: 1px solid var(--px-line-2);
  border-radius: var(--px-r-lg);
  background: linear-gradient(150deg, rgba(18, 64, 56, 0.72), rgba(6, 29, 25, 0.88));
  box-shadow: 0 40px 90px rgba(2, 12, 10, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.px-cta__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 50% 0%, #000, transparent 72%);
}

body.px-body .px-cta__title {
  position: relative;
  margin: 0 0 26px;
  font-size: clamp(1.5rem, 5vw, 2.6rem);
  font-weight: 800;
  line-height: 1.4;
  color: #fff;
}

.px-cta__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Mobile safe zone. The floating support control sits fixed in the lower-left
   corner (56px tall, 16px gap, plus the device safe area). Without extra room
   under the last CTA group, the final button can end up under the control at
   the end of the page on short phones. The band already has generous padding;
   on phones it grows by the control's footprint so the last action can always
   scroll fully clear. Desktop is untouched. */
@media (max-width: 767.98px) {
  .px-cta {
    padding-bottom: calc(clamp(58px, 9vw, 112px) + 76px + env(safe-area-inset-bottom, 0px));
  }
}

/* Auth-aware CTA. data-auth is set on <html> by the pixel-public.js phase-1
   bootstrap, before the body paints, so the correct variant is the only one
   ever rendered — no guest-then-student flash. Guest stays the default when
   the attribute is absent (scripting disabled). */
.px-cta__variant--student {
  display: none;
}

:root[data-auth="in"] .px-cta__variant--student {
  display: block;
}

/* The body-qualified selector is listed too so this reliably outranks
   `body.px-body .px-btn` instead of winning on source order alone. */
:root[data-auth="in"] .px-cta__variant--guest,
:root[data-auth="in"] .px-auth-guest,
:root[data-auth="in"] body.px-body .px-auth-guest {
  display: none;
}

/* Footer account column: the same guest/student swap, so a signed-in student
   is never offered "تسجيل الدخول" / "إنشاء حساب" anywhere on the page. */
li.px-auth-student {
  display: none;
}

:root[data-auth="in"] li.px-auth-student {
  display: list-item;
}

/* Hero actions. The student pair lives in the same .px-hero__cta flex row as
   the guest pair, so the row keeps its existing gap, wrapping and breakpoints.
   display:none also removes the hidden pair from the tab order and the
   accessibility tree — no offscreen focus traps. */
body.px-body .px-hero__cta .px-auth-student {
  display: none;
}

:root[data-auth="in"] body.px-body .px-hero__cta .px-auth-student {
  display: inline-flex;
}

/* :first-child still resolves to the hidden guest button, so the student
   primary is given the same emphasis explicitly below 480px. */
:root[data-auth="in"] body.px-body .px-hero__cta .px-auth-student:nth-of-type(3) {
  flex-grow: 1.35;
}

@media (min-width: 480px) {
  :root[data-auth="in"] body.px-body .px-hero__cta .px-auth-student:nth-of-type(3) {
    flex: 0 0 auto;
  }
}

body.px-body .px-cta__actions .px-btn {
  flex: 1 1 auto;
  min-width: 160px;
}

@media (min-width: 480px) {
  body.px-body .px-cta__actions .px-btn {
    flex: 0 0 auto;
    min-width: 190px;
  }
}

.px-cta__pix {
  position: relative;
  justify-content: center;
  margin-bottom: 22px;
}

/* The closing environment continues straight into the footer: the CTA ends on
   exactly the colour the footer starts from, so the seam is a hairline only. */
.px-footer {
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* --------------------------------------------------------------------------
   7. Light-mode art direction that cannot come from a token alone
   -------------------------------------------------------------------------- */
html[data-theme="light"] body.px-body .px-hero .px-btn--ghost {
  color: var(--px-violet-deep);
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(8, 82, 68, 0.28);
  box-shadow: 0 8px 22px rgba(6, 58, 50, 0.12);
}

html[data-theme="light"] body.px-body .px-hero .px-btn--ghost:hover {
  color: var(--px-violet-deep);
  background: #ffffff;
  border-color: rgba(8, 82, 68, 0.5);
  box-shadow: 0 14px 30px rgba(6, 58, 50, 0.18);
}

/* The interface panels stay dark inside the light content environment. */
html[data-theme="light"] .px-story__stage {
  background: linear-gradient(160deg, #113d35, #082923);
  border-color: rgba(8, 82, 68, 0.2);
}

@media (min-width: 1024px) {
  html[data-theme="light"] .px-story__stage {
    background: none;
    border-color: transparent;
  }
}

/* --------------------------------------------------------------------------
   8. Motion control
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .px-hero [data-enter] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .px-subject,
  .px-course,
  .px-scene,
  .px-step__btn {
    transition: none;
  }

  .px-subject:hover,
  .px-course:hover {
    transform: none;
  }
}

/* ==========================================================================
   Latest offers — أحدث العروض

   Second section on the page. A short rail of at most three cards: a grid on
   desktop, a snapping horizontal scroller on phones, which is the gesture
   this content actually invites and costs no carousel library to get.

   The section is hidden until pixel-home.js has real offers to put in it, so
   there is no empty state here to style.
   ========================================================================== */
.px-offers {
  padding-block: clamp(40px, 6vw, 72px) clamp(10px, 2vw, 20px);
}

.px-offers__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.px-offers__rail {
  display: grid;
  gap: clamp(14px, 2.4vw, 22px);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .px-offers__rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .px-offers__rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Phones scroll the rail instead of stacking three tall cards. */
@media (max-width: 719.98px) {
  .px-offers__rail {
    display: flex;
    /* Bleeds to both edges so the rail reads as scrollable. */
    margin-inline: calc(var(--px-pad, 18px) * -1);
    padding-inline: var(--px-pad, 18px);
    padding-bottom: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .px-offers__rail::-webkit-scrollbar {
    display: none;
  }

  .px-offercard {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }
}

.px-offercard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--px-card-bg, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--px-rule, rgba(255, 255, 255, 0.11));
  border-radius: var(--px-r-lg, 28px);
  transition: transform 260ms var(--px-ease), border-color 260ms var(--px-ease);
}

.px-offercard:hover {
  transform: translateY(-3px);
  border-color: var(--px-rule-2, rgba(255, 255, 255, 0.2));
}

.px-offercard__media {
  position: relative;
  /* A fixed ratio reserves the space before the image loads, so an offer
     arriving late never shifts the section below it. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--px-panel, #103a33);
}

.px-offercard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.px-offercard__media.is-blank {
  background: linear-gradient(135deg, var(--px-violet-deep, #085244), var(--px-panel, #103a33));
}

.px-offercard__badge {
  position: absolute;
  inset-inline-start: 12px;
  inset-block-start: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  background: var(--px-violet, #1a9b82);
  border-radius: 999px;
}

.px-offercard__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  padding: clamp(14px, 2.4vw, 20px);
}

body.px-body .px-offercard__name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.6;
  color: var(--px-ink, #fff);
  overflow-wrap: anywhere;
}

body.px-body .px-offercard__facts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
  color: var(--px-ink-2, rgba(255, 255, 255, 0.74));
}

.px-offercard__facts li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.px-offercard__facts i {
  color: var(--px-violet-2, #5fcbb0);
}

.px-offercard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* Pins the action to the bottom so three cards of different heights still
     line their buttons up. */
  margin-top: auto;
  padding-top: 4px;
}

.px-offercard__price {
  font-size: 1.02rem;
  font-weight: 900;
  color: var(--px-gold, #e9b24a);
}

@media (prefers-reduced-motion: reduce) {
  .px-offercard {
    transition: none;
  }

  .px-offercard:hover {
    transform: none;
  }
}