.landing-body {
  --brand-primary: #0a3b8f;
  --brand-primary-deep: #072f73;
  --brand-secondary: #ffcb3d;
  --brand-secondary-deep: #e49d18;
  --brand-sky: #00c6ff;
  --brand-orange: #ff8a00;
  --brand-ink: #0b1a33;
  --brand-muted: #586984;
  --surface-primary: #ffffff;
  --surface-secondary: #f5f8ff;
  --surface-tint: #eaf6ff;
  --accent-mint: #46a978;
  --accent-coral: #db6b58;
  --accent-violet: #7266d8;
  --stroke-soft: #dce8f6;
  --stroke-strong: #b9d1ed;
  --shadow-card: 0 8px 22px rgba(21, 32, 51, 0.08);
  --shadow-floating: 0 18px 45px rgba(21, 32, 51, 0.14);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --motion-fast: 160ms;
  --motion-normal: 320ms;
  --motion-slow: 620ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  color: var(--brand-ink);
  background:
    linear-gradient(135deg, rgba(255, 203, 61, 0.13) 0%, transparent 34%),
    linear-gradient(225deg, rgba(0, 198, 255, 0.13) 0%, transparent 42%),
    var(--surface-secondary);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

.landing-body *,
.landing-body *::before,
.landing-body *::after {
  box-sizing: border-box;
}

.landing-body a,
.landing-body button {
  -webkit-tap-highlight-color: transparent;
}

.landing-body a:focus-visible,
.landing-body button:focus-visible {
  outline: 3px solid rgba(10, 59, 143, 0.75);
  outline-offset: 4px;
}

.landing-body.is-language-switching main {
  opacity: 0.72;
  transform: translateY(4px);
  transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.landing-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: var(--surface-secondary);
  transition: opacity var(--motion-normal) var(--ease-out), visibility var(--motion-normal) var(--ease-out);
}

.landing-body.is-ready .landing-loader {
  opacity: 0;
  visibility: hidden;
}

.landing-loader-mark,
.landing-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-deep));
  box-shadow: 0 6px 0 var(--brand-primary-deep);
  font-weight: 900;
}

.landing-loader-mark {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  animation: loader-pop 900ms var(--ease-out) both;
}

.landing-loader-mark img,
.landing-logo-mark img,
.subject-card-art img,
.subject-stage-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.landing-skip-link {
  position: fixed;
  inset-block-start: 14px;
  inset-inline-start: 14px;
  z-index: 3000;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-md);
  color: #fff;
  background: var(--brand-ink);
  transform: translateY(-140%);
  transition: transform var(--motion-fast) var(--ease-out);
}

.landing-skip-link:focus {
  transform: translateY(0);
}

.landing-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 14px 0;
  transition: padding var(--motion-normal) var(--ease-out), background var(--motion-normal), box-shadow var(--motion-normal);
}

.landing-nav.is-scrolled {
  padding: 8px 0;
  background: rgba(244, 247, 251, 0.78);
  box-shadow: 0 1px 0 rgba(198, 212, 228, 0.78);
  backdrop-filter: blur(18px);
}

.landing-nav-inner,
.landing-hero,
.landing-band,
.landing-subjects,
.product-demo,
.app-experience,
.download-section,
.landing-footer {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
}

.landing-nav-inner {
  min-height: 58px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
  border: 1px solid rgba(198, 212, 228, 0.82);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(18px);
}

.landing-brand,
.landing-nav-links,
.landing-nav-actions,
.landing-admin-link,
.landing-language-switcher,
.landing-hero-actions,
.landing-primary-button,
.landing-secondary-button,
.landing-store-actions,
.landing-store-button,
.subject-carousel-shell,
.quiz-card-head,
.device-status,
.answer-options {
  display: flex;
  align-items: center;
}

.landing-brand {
  min-width: 0;
  gap: 0.7rem;
  color: var(--brand-ink);
  text-decoration: none;
  font-weight: 900;
}

.landing-logo-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
}

.landing-nav-links {
  justify-content: center;
  gap: 0.25rem;
}

.landing-nav-links a,
.landing-mobile-menu a,
.landing-footer a {
  color: var(--brand-muted);
  text-decoration: none;
  font-weight: 800;
  transition: color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast) var(--ease-out);
}

.landing-nav-links a {
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-md);
}

.landing-nav-links a:hover,
.landing-mobile-menu a:hover,
.landing-footer a:hover {
  color: var(--brand-primary);
}

.landing-nav-links a:hover {
  background: rgba(31, 111, 178, 0.08);
}

.landing-nav-actions {
  justify-content: flex-end;
  gap: 0.5rem;
}

.landing-language-switcher {
  gap: 0.2rem;
  padding: 0.22rem;
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-secondary);
}

.landing-language-switcher button,
.landing-menu-button,
.subject-nav-button {
  border: 0;
  color: var(--brand-muted);
  background: transparent;
}

.landing-language-switcher button {
  min-height: 34px;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  font-weight: 900;
  transition: color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast) var(--ease-out);
}

.landing-language-switcher button.is-active {
  color: #fff;
  background: var(--brand-primary);
  box-shadow: 0 4px 0 var(--brand-primary-deep);
}

.landing-admin-link,
.landing-menu-button {
  min-height: 40px;
  justify-content: center;
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-md);
  color: var(--brand-muted);
  background: #fff;
  text-decoration: none;
  font-weight: 900;
  transition: transform var(--motion-fast) var(--ease-out), color var(--motion-fast), border-color var(--motion-fast);
}

.landing-admin-link {
  gap: 0.45rem;
  padding: 0.45rem 0.7rem;
}

.landing-menu-button {
  width: 42px;
  display: none;
}

.landing-admin-link:hover,
.landing-menu-button:hover {
  color: var(--brand-primary);
  border-color: rgba(31, 111, 178, 0.45);
  transform: translateY(-1px);
}

.landing-mobile-menu.offcanvas {
  width: min(360px, 88vw);
  color: var(--brand-ink);
  border: 0;
  background:
    linear-gradient(135deg, rgba(31, 111, 178, 0.12), rgba(231, 184, 78, 0.12)),
    var(--surface-primary);
  box-shadow: var(--shadow-floating);
}

.landing-mobile-menu .offcanvas-header {
  padding: 1rem;
  border-block-end: 1px solid var(--stroke-soft);
}

.landing-mobile-menu .offcanvas-title {
  color: var(--brand-ink);
  font-weight: 900;
}

.landing-menu-close {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-md);
  color: var(--brand-muted);
  background: #fff;
}

.landing-mobile-menu .offcanvas-body {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding: 1rem;
}

.landing-mobile-menu a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.78);
}

.landing-hero {
  min-height: calc(100svh - 92px);
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(340px, 0.86fr);
  align-items: center;
  gap: 4rem;
  padding: 4rem 0 5rem;
}

.landing-hero-copy,
.landing-hero-stage,
.section-heading,
.app-experience-copy,
.download-section > div:first-child {
  min-width: 0;
}

.landing-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--brand-primary);
  font-size: 0.82rem;
  font-weight: 900;
}

.landing-kicker::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--brand-secondary);
}

.landing-hero h1,
.section-heading h2,
.landing-credibility h2,
.interactive-preview h2,
.progress-section h2,
.app-experience h2,
.download-section h2,
.contact-section h2 {
  margin: 0;
  color: var(--brand-ink);
  font-weight: 900;
  letter-spacing: 0;
}

.landing-hero h1 {
  max-width: 760px;
  margin-top: 0.9rem;
  font-size: 4.35rem;
  line-height: 1.04;
}

.landing-hero h1 span {
  display: block;
}

.landing-hero p,
.section-heading p,
.landing-credibility p,
.interactive-preview p,
.progress-card p,
.app-experience p,
.download-section p,
.landing-empty-state p {
  color: var(--brand-muted);
  line-height: 1.78;
}

.landing-hero p {
  max-width: 650px;
  margin: 1.25rem 0 0;
  font-size: 1.12rem;
}

.landing-hero-actions {
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.8rem;
}

.landing-primary-button,
.landing-secondary-button,
.landing-store-button {
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 900;
  transform: translateY(0);
  transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast), background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}

.landing-primary-button,
.landing-secondary-button {
  min-height: 52px;
  gap: 0.55rem;
  padding: 0.78rem 1.05rem;
}

.landing-primary-button {
  color: #fff;
  background: var(--brand-primary);
  box-shadow: 0 7px 0 var(--brand-primary-deep);
}

.landing-primary-button:hover {
  color: #fff;
  background: #247bc4;
  transform: translateY(-2px);
  box-shadow: 0 9px 0 var(--brand-primary-deep);
}

.landing-primary-button:active {
  transform: translateY(5px);
  box-shadow: 0 2px 0 var(--brand-primary-deep);
}

.landing-secondary-button {
  color: var(--brand-ink);
  border: 1px solid var(--stroke-strong);
  background: #fff;
  box-shadow: 0 6px 0 var(--stroke-soft);
}

.landing-secondary-button:hover {
  color: var(--brand-primary);
  border-color: rgba(31, 111, 178, 0.45);
  transform: translateY(-2px);
}

.landing-trust-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 2rem;
}

.landing-trust-row > span {
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid rgba(198, 212, 228, 0.82);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-card);
}

.landing-trust-row strong,
.landing-trust-row span span {
  display: block;
}

.landing-trust-row strong {
  color: var(--brand-secondary-deep);
  font-size: 0.82rem;
}

.landing-trust-row span span {
  margin-top: 0.2rem;
  font-weight: 900;
}

.landing-hero-stage {
  position: relative;
  min-height: 620px;
  display: grid;
  place-items: center;
}

.learning-orbit {
  position: absolute;
  inset: 34px 0 auto;
  height: 520px;
  pointer-events: none;
}

.learning-orbit span {
  position: absolute;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(198, 212, 228, 0.88);
  border-radius: var(--radius-md);
  color: var(--brand-primary);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-card);
  font-weight: 900;
  animation: float-symbol 5.4s var(--ease-out) infinite;
}

.learning-orbit span:nth-child(1) { inset-block-start: 4%; inset-inline-start: 12%; }
.learning-orbit span:nth-child(2) { inset-block-start: 28%; inset-inline-end: 5%; animation-delay: 450ms; color: var(--accent-coral); }
.learning-orbit span:nth-child(3) { inset-block-end: 21%; inset-inline-start: 0; animation-delay: 900ms; color: var(--accent-mint); }
.learning-orbit span:nth-child(4) { inset-block-end: 7%; inset-inline-end: 14%; animation-delay: 1350ms; color: var(--accent-violet); }

.app-device {
  position: relative;
  z-index: 1;
  width: min(360px, 100%);
  min-height: 610px;
  padding: 1rem;
  border: 1px solid #111827;
  border-radius: 34px;
  color: var(--brand-ink);
  background: linear-gradient(160deg, #1d2a42, #101827);
  box-shadow: 0 10px 0 #101827, var(--shadow-floating);
}

.app-device::before {
  content: "";
  position: absolute;
  inset-block-start: 11px;
  inset-inline: 50%;
  width: 82px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: #41516b;
  transform: translateX(50%);
}

[dir="ltr"] .app-device::before {
  transform: translateX(-50%);
}

.app-device > * {
  position: relative;
  z-index: 1;
}

.device-status,
.device-lesson-card,
.device-question,
.device-progress {
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 5px 0 rgba(223, 231, 242, 0.95);
}

.device-status {
  justify-content: space-between;
  margin-top: 1.1rem;
  padding: 0.7rem;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  font-weight: 900;
}

.device-lesson-card {
  margin-top: 1rem;
  padding: 1.1rem;
}

.lesson-tag,
.device-question > span,
.device-progress span,
.mini-screen span,
.quiz-card-head span,
.progress-card > span {
  color: var(--brand-muted);
  font-size: 0.8rem;
  font-weight: 900;
}

.device-lesson-card strong,
.device-question strong {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.25rem;
  font-weight: 900;
}

.lesson-visual {
  display: flex;
  align-items: center;
  margin-top: 1rem;
}

.lesson-node {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  background: var(--surface-tint);
  box-shadow: inset 0 0 0 1px var(--stroke-soft);
}

.lesson-node.is-active {
  background: var(--brand-secondary);
  box-shadow: 0 4px 0 var(--brand-secondary-deep);
}

.lesson-line {
  flex: 1;
  height: 4px;
  background: var(--stroke-soft);
}

.device-question {
  margin-top: 1rem;
  padding: 1rem;
}

.answer-options {
  gap: 0.45rem;
  margin-top: 0.9rem;
}

.answer-options span,
.quiz-card button {
  min-height: 42px;
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
  font-weight: 900;
}

.answer-options span {
  flex: 1;
  display: grid;
  place-items: center;
}

.answer-options .is-correct,
.quiz-card button.is-correct.is-selected {
  color: #fff;
  border-color: var(--accent-mint);
  background: var(--accent-mint);
  box-shadow: 0 4px 0 #327855;
}

.device-progress {
  margin-top: 1rem;
  padding: 1rem;
}

.device-progress > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.device-progress strong::after,
.progress-card-large strong::after {
  content: "%";
}

.progress-track {
  height: 10px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: #e9eef5;
}

.progress-track span {
  display: block;
  width: var(--value);
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-secondary), var(--accent-mint));
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 900ms var(--ease-out);
}

[dir="ltr"] .progress-track span {
  transform-origin: left center;
}

.is-visible .progress-track span,
.landing-body.is-ready .device-progress .progress-track span {
  transform: scaleX(1);
}

.landing-band,
.landing-subjects,
.product-demo,
.app-experience,
.download-section {
  padding: 5.5rem 0;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 2rem;
}

.section-heading h2,
.landing-credibility h2,
.interactive-preview h2,
.progress-section h2,
.app-experience h2,
.download-section h2,
.contact-section h2 {
  margin-top: 0.65rem;
  font-size: 2.55rem;
  line-height: 1.16;
}

.section-heading p {
  margin: 1rem 0 0;
  font-size: 1.04rem;
}

.landing-credibility {
  display: grid;
  grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1fr);
  align-items: start;
  gap: 2rem;
  border-block: 1px solid rgba(198, 212, 228, 0.7);
}

.credibility-grid,
.flow-steps,
.progress-dashboard,
.landing-contact-list {
  display: grid;
  gap: 1rem;
}

.credibility-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.credibility-grid article,
.flow-steps article,
.progress-card,
.landing-contact-list div,
.landing-empty-state,
.quiz-card,
.mini-screen {
  min-width: 0;
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow-card);
}

.credibility-grid article {
  padding: 1.1rem;
}

.credibility-grid i,
.progress-card i,
.landing-empty-state i {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 0.9rem;
  border-radius: var(--radius-md);
  color: var(--brand-ink);
  background: var(--brand-secondary);
  box-shadow: 0 5px 0 var(--brand-secondary-deep);
  font-size: 1.18rem;
}

.credibility-grid strong {
  display: block;
  font-size: 1.06rem;
  font-weight: 900;
}

.credibility-grid p {
  margin: 0.55rem 0 0;
  font-size: 0.94rem;
}

.subject-showcase {
  display: grid;
  gap: 1.2rem;
}

.subject-showcase,
.subject-stage,
.subject-stage-copy,
.subject-carousel-shell,
.subject-carousel {
  min-width: 0;
  max-width: 100%;
}

.subject-carousel.swiper {
  width: 100%;
  overflow: hidden;
}

.subject-stage-copy h3,
.subject-card-body strong,
.subject-card-body small {
  overflow-wrap: anywhere;
}

.subject-stage {
  position: relative;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: center;
  gap: 1.4rem;
  min-height: 330px;
  overflow: hidden;
  padding: 1.4rem;
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgba(31, 111, 178, 0.1), rgba(231, 184, 78, 0.1)),
    #fff;
  box-shadow: var(--shadow-floating);
  transition: background var(--motion-normal), transform var(--motion-normal) var(--ease-out);
}

.subject-stage::after {
  content: "∑  أ  Aa  10  ?";
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  color: rgba(21, 32, 51, 0.08);
  font-size: 3rem;
  font-weight: 900;
  pointer-events: none;
}

.subject-stage[data-accent="math"] { background: linear-gradient(135deg, rgba(31, 111, 178, 0.12), rgba(231, 184, 78, 0.16)), #fff; }
.subject-stage[data-accent="science"] { background: linear-gradient(135deg, rgba(70, 169, 120, 0.14), rgba(31, 111, 178, 0.1)), #fff; }
.subject-stage[data-accent="arabic"] { background: linear-gradient(135deg, rgba(219, 107, 88, 0.13), rgba(231, 184, 78, 0.12)), #fff; }
.subject-stage[data-accent="english"] { background: linear-gradient(135deg, rgba(114, 102, 216, 0.13), rgba(31, 111, 178, 0.1)), #fff; }
.subject-stage[data-accent="tech"] { background: linear-gradient(135deg, rgba(21, 32, 51, 0.12), rgba(70, 169, 120, 0.12)), #fff; }

.subject-stage-image {
  width: min(260px, 100%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  justify-self: center;
  overflow: hidden;
  border: 1px solid var(--stroke-soft);
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-deep));
  box-shadow: 0 10px 0 var(--brand-primary-deep), var(--shadow-floating);
  font-size: 4rem;
  font-weight: 900;
  transform: scale(0.92);
  transition: transform var(--motion-slow) var(--ease-out), opacity var(--motion-normal);
}

.subject-stage.is-changing .subject-stage-image {
  opacity: 0.18;
  transform: scale(0.86) translateY(12px);
}

.subject-stage-copy {
  position: relative;
  z-index: 1;
}

.subject-stage-copy h3 {
  margin: 0.55rem 0 0;
  font-size: 2.35rem;
  line-height: 1.18;
  font-weight: 900;
}

.subject-stage-copy p {
  max-width: 620px;
  margin: 0.8rem 0 1.2rem;
  color: var(--brand-muted);
  line-height: 1.75;
}

.subject-carousel-shell {
  gap: 0.8rem;
}

.subject-carousel {
  flex: 1;
  min-width: 0;
  padding: 0.35rem 0.2rem 2.2rem;
}

.subject-carousel .swiper-wrapper {
  align-items: stretch;
}

.subject-carousel .swiper-slide {
  height: auto;
  display: flex;
  opacity: 0.54;
  transform: scale(0.94);
  transition: opacity var(--motion-normal) var(--ease-out), transform var(--motion-normal) var(--ease-out);
}

.subject-carousel .swiper-slide-active {
  opacity: 1;
  transform: scale(1);
}

.subject-card {
  position: relative;
  width: 100%;
  min-height: 255px;
  display: grid;
  align-content: space-between;
  justify-items: stretch;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-md);
  color: var(--brand-ink);
  background: #fff;
  box-shadow: var(--shadow-card);
  text-align: start;
  overflow: hidden;
  transform: translateY(0) scale(0.98);
  transition: transform var(--motion-normal) var(--ease-out), border-color var(--motion-normal), box-shadow var(--motion-normal), background var(--motion-normal);
}

.subject-card:hover,
.subject-card.is-active {
  border-color: rgba(31, 111, 178, 0.45);
  box-shadow: var(--shadow-floating);
  transform: translateY(-6px) scale(1);
}

.subject-card.is-active {
  background: linear-gradient(180deg, #fff, var(--surface-tint));
}

.subject-card-art {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 22px;
  color: #fff;
  background: var(--brand-primary);
  box-shadow: 0 7px 0 var(--brand-primary-deep);
  font-size: 1.75rem;
  font-weight: 900;
  transition: transform var(--motion-normal) var(--ease-out);
}

.subject-card:hover .subject-card-art,
.subject-card.is-active .subject-card-art {
  transform: translateY(-6px) scale(1.04);
}

.subject-card[data-accent="math"] .subject-card-art { background: var(--brand-primary); box-shadow: 0 7px 0 var(--brand-primary-deep); }
.subject-card[data-accent="science"] .subject-card-art { background: var(--accent-mint); box-shadow: 0 7px 0 #327855; }
.subject-card[data-accent="arabic"] .subject-card-art { background: var(--accent-coral); box-shadow: 0 7px 0 #ae4c3d; }
.subject-card[data-accent="english"] .subject-card-art { background: var(--accent-violet); box-shadow: 0 7px 0 #5048aa; }
.subject-card[data-accent="tech"] .subject-card-art { background: var(--brand-ink); box-shadow: 0 7px 0 #0e1420; }

.subject-card-body strong,
.subject-card-body small {
  display: block;
}

.subject-card-body strong {
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.35;
}

.subject-card-body small {
  margin-top: 0.25rem;
  color: var(--brand-muted);
  font-weight: 800;
}

.subject-card-progress {
  height: 7px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: #e9eef5;
}

.subject-card-progress span {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
}

.subject-nav-button {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 5px 0 var(--stroke-soft);
  transition: transform var(--motion-fast) var(--ease-out), color var(--motion-fast);
}

.subject-nav-button:hover {
  color: var(--brand-primary);
  transform: translateY(-2px);
}

.subject-pagination.swiper-pagination {
  inset-block-end: 0;
}

.subject-pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  opacity: 1;
  background: var(--stroke-strong);
  transition: width var(--motion-fast), background var(--motion-fast);
}

.subject-pagination .swiper-pagination-bullet-active {
  width: 24px;
  border-radius: var(--radius-pill);
  background: var(--brand-primary);
}

.subject-single-note {
  color: var(--brand-muted);
  font-weight: 800;
  text-align: center;
}

.flow-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.flow-steps article {
  position: relative;
  padding: 1.2rem;
}

.flow-steps article::after {
  content: "";
  position: absolute;
  inset-block-start: 34px;
  inset-inline-end: -1rem;
  width: 2rem;
  height: 2px;
  background: var(--stroke-strong);
}

[dir="ltr"] .flow-steps article::after {
  inset-inline-right: -1rem;
  inset-inline-left: auto;
}

.flow-steps article:last-child::after {
  display: none;
}

.flow-steps article > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  color: var(--brand-ink);
  background: var(--brand-secondary);
  box-shadow: 0 5px 0 var(--brand-secondary-deep);
  font-weight: 900;
}

.flow-steps strong {
  display: block;
  margin-top: 1rem;
  font-size: 1.1rem;
  font-weight: 900;
}

.flow-steps p {
  margin: 0.55rem 0 0;
  color: var(--brand-muted);
  line-height: 1.7;
}

.interactive-preview,
.app-experience,
.download-section,
.contact-section {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(320px, 0.72fr);
  align-items: center;
  gap: 2rem;
}

.quiz-card {
  padding: 1.2rem;
}

.quiz-card-head {
  justify-content: space-between;
}

.quiz-card-head strong {
  min-width: 58px;
  min-height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  color: #fff;
  background: var(--accent-mint);
}

.quiz-card h3 {
  margin: 1rem 0;
  font-weight: 900;
  line-height: 1.35;
}

.quiz-card button {
  width: 100%;
  display: block;
  margin-top: 0.65rem;
  padding: 0.7rem 0.9rem;
  color: var(--brand-ink);
  text-align: start;
  transition: transform var(--motion-fast) var(--ease-out), border-color var(--motion-fast), background var(--motion-fast), color var(--motion-fast);
}

.quiz-card button:hover {
  border-color: var(--brand-primary);
  transform: translateY(-1px);
}

.quiz-feedback {
  margin-top: 0.9rem;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  color: #256c4c;
  background: rgba(70, 169, 120, 0.14);
  font-weight: 900;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--motion-normal), transform var(--motion-normal) var(--ease-out);
}

.quiz-card.has-answer .quiz-feedback {
  opacity: 1;
  transform: translateY(0);
}

.progress-dashboard {
  grid-template-columns: 1.2fr repeat(3, minmax(0, 0.75fr));
  align-items: stretch;
}

.progress-card {
  padding: 1.2rem;
}

.progress-card-large {
  min-height: 230px;
}

.progress-card strong {
  display: block;
  color: var(--brand-ink);
  font-size: 2.25rem;
  line-height: 1.1;
  font-weight: 900;
}

.progress-card .progress-track {
  margin: 1.2rem 0 0.9rem;
}

.achievement-card {
  background: linear-gradient(145deg, #fff, rgba(231, 184, 78, 0.16));
}

.app-preview-stack {
  position: relative;
  min-height: 370px;
}

.mini-screen {
  position: absolute;
  width: min(340px, 88%);
  padding: 1.1rem;
  transition: transform var(--motion-slow) var(--ease-out);
}

.mini-screen strong {
  display: block;
  margin-top: 0.45rem;
  font-size: 1.2rem;
  font-weight: 900;
}

.mini-screen.is-front {
  inset-block-start: 0;
  inset-inline-start: 8%;
  z-index: 3;
}

.mini-screen.is-middle {
  inset-block-start: 116px;
  inset-inline-start: 18%;
  z-index: 2;
  background: rgba(255, 255, 255, 0.78);
}

.mini-screen.is-back {
  inset-block-start: 222px;
  inset-inline-start: 28%;
  z-index: 1;
  background: rgba(255, 255, 255, 0.62);
}

.app-preview-stack:hover .mini-screen.is-front { transform: translateY(-6px); }
.app-preview-stack:hover .mini-screen.is-middle { transform: translateY(-2px); }
.app-preview-stack:hover .mini-screen.is-back { transform: translateY(2px); }

.download-section {
  padding: 2rem;
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgba(31, 111, 178, 0.14), rgba(231, 184, 78, 0.14)),
    #fff;
  box-shadow: var(--shadow-floating);
}

.landing-store-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.85rem;
}

.landing-store-button {
  min-width: 188px;
  min-height: 62px;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  color: #fff;
  background: var(--brand-ink);
  box-shadow: 0 7px 0 #0e1420;
}

.landing-store-button:hover {
  color: #fff;
  transform: translateY(-2px);
}

.landing-store-button i {
  font-size: 1.55rem;
}

.landing-store-button span {
  display: grid;
  line-height: 1.12;
}

.landing-store-button small {
  color: #cbd5e1;
  font-size: 0.73rem;
  font-weight: 900;
}

.landing-store-button.is-disabled {
  color: var(--brand-muted);
  background: #fff;
  box-shadow: 0 7px 0 var(--stroke-soft);
}

.landing-store-button.is-disabled small {
  color: var(--brand-muted);
}

.landing-contact-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.landing-contact-list div {
  padding: 1rem;
}

.landing-contact-list dt {
  color: var(--brand-muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.landing-contact-list dd {
  margin: 0.3rem 0 0;
  color: var(--brand-ink);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.landing-contact-list a {
  color: var(--brand-primary);
}

.landing-empty-state {
  padding: 1.4rem;
  text-align: center;
}

.landing-empty-state.is-compact {
  text-align: start;
}

.landing-empty-state p {
  margin: 0;
}

.landing-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem 0;
  color: var(--brand-muted);
  font-weight: 900;
}

.landing-footer div {
  display: flex;
  align-items: center;
  gap: 1rem;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(8px);
  transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out), filter var(--motion-slow) var(--ease-out);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

[data-reveal-group] [data-reveal]:nth-child(2) { transition-delay: 80ms; }
[data-reveal-group] [data-reveal]:nth-child(3) { transition-delay: 160ms; }
[data-reveal-group] [data-reveal]:nth-child(4) { transition-delay: 240ms; }

[dir="ltr"] .landing-primary-button i {
  transform: rotate(180deg);
}

[dir="ltr"] .landing-kicker::before {
  order: -1;
}

[dir="ltr"] .progress-track span {
  transform-origin: left center;
}

@keyframes loader-pop {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

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

@media (max-width: 1199.98px) {
  .landing-hero {
    grid-template-columns: minmax(0, 1fr) minmax(310px, 0.72fr);
    gap: 2.5rem;
  }

  .landing-hero h1 {
    font-size: 3.65rem;
  }

  .credibility-grid,
  .progress-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .progress-card-large {
    grid-column: span 2;
  }
}

@media (max-width: 991.98px) {
  .landing-nav-inner {
    grid-template-columns: auto 1fr;
  }

  .landing-nav-links {
    display: none;
  }

  .landing-menu-button {
    display: grid;
  }

  .landing-hero,
  .landing-credibility,
  .interactive-preview,
  .app-experience,
  .download-section,
  .contact-section {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-hero {
    min-height: auto;
    padding-top: 3rem;
  }

  .landing-hero-stage {
    min-height: 560px;
  }

  .landing-credibility,
  .landing-band,
  .landing-subjects,
  .product-demo,
  .app-experience {
    padding: 4rem 0;
  }

  .subject-stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .subject-stage-image {
    width: min(230px, 100%);
  }

  .flow-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flow-steps article::after {
    display: none;
  }

  .landing-store-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 767.98px) {
  .landing-nav-inner,
  .landing-hero,
  .landing-band,
  .landing-subjects,
  .product-demo,
  .app-experience,
  .download-section,
  .landing-footer {
    width: min(100% - 24px, 1180px);
  }

  .landing-nav-actions {
    gap: 0.35rem;
  }

  .landing-admin-link {
    display: none;
  }

  .landing-language-switcher button {
    min-height: 32px;
    padding: 0.3rem 0.52rem;
    font-size: 0.86rem;
  }

  .landing-hero h1 {
    font-size: 2.75rem;
  }

  .section-heading h2,
  .landing-credibility h2,
  .interactive-preview h2,
  .progress-section h2,
  .app-experience h2,
  .download-section h2,
  .contact-section h2 {
    font-size: 2rem;
  }

  .landing-trust-row,
  .credibility-grid,
  .flow-steps,
  .progress-dashboard,
  .landing-contact-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .progress-card-large {
    grid-column: auto;
  }

  .landing-hero-stage {
    min-height: 510px;
  }

  .app-device {
    min-height: 540px;
  }

  .mini-screen {
    width: calc(100% - 32px);
  }

  .mini-screen.is-front {
    inset-inline-start: 0;
  }

  .mini-screen.is-middle {
    inset-inline-start: 16px;
  }

  .mini-screen.is-back {
    inset-inline-start: 32px;
  }

  .learning-orbit {
    height: 460px;
  }

  .subject-carousel-shell {
    align-items: stretch;
  }

  .subject-nav-button {
    display: none;
  }

  .download-section {
    padding: 1.25rem;
  }

  .landing-store-actions,
  .landing-store-button {
    width: 100%;
  }

  .landing-store-button {
    justify-content: center;
  }

  .landing-footer,
  .landing-footer div {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 430px) {
  .landing-hero h1 {
    font-size: 2.38rem;
  }

  .landing-hero p {
    font-size: 1rem;
  }

  .landing-primary-button,
  .landing-secondary-button {
    width: 100%;
    justify-content: center;
  }

  .landing-hero-stage {
    min-height: 480px;
  }

  .app-device {
    min-height: 505px;
    border-radius: 28px;
  }

  .learning-orbit span {
    width: 42px;
    height: 42px;
  }

  .subject-stage-copy h3 {
    font-size: 1.85rem;
  }
}

@media (min-width: 1600px) {
  .landing-nav-inner,
  .landing-hero,
  .landing-band,
  .landing-subjects,
  .product-demo,
  .app-experience,
  .download-section,
  .landing-footer {
    width: min(1320px, calc(100% - 64px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-body *,
  .landing-body *::before,
  .landing-body *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .learning-orbit span {
    animation: none;
  }
}

/* Sahab horizon motif and lighter interaction surfaces. */
.landing-hero {
  position: relative;
  isolation: isolate;
}

.landing-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% -8% 12% 36%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 65% 50%, rgba(255, 203, 61, 0.22), transparent 38%),
              radial-gradient(ellipse at 40% 60%, rgba(0, 198, 255, 0.18), transparent 62%);
  pointer-events: none;
}

.landing-logo-mark,
.landing-loader-mark {
  background: #0b1a33;
  box-shadow: 0 6px 18px rgba(11, 26, 51, 0.16);
}

.landing-primary-button {
  background: linear-gradient(110deg, #0a3b8f, #0878d2);
  box-shadow: 0 8px 20px rgba(10, 59, 143, 0.2);
}

.landing-primary-button:hover {
  background: linear-gradient(110deg, #072f73, #0865bb);
  box-shadow: 0 10px 24px rgba(10, 59, 143, 0.24);
}

.landing-primary-button:active,
.landing-secondary-button,
.landing-secondary-button:hover {
  box-shadow: 0 4px 14px rgba(11, 26, 51, 0.1);
}

@media (max-width: 767.98px) {
  .landing-hero::before {
    inset: 24% -20% 8% -20%;
  }
}