@font-face {
      font-family: "Gorditas";
      src: url("/qalam/assets/fonts/Gorditas-Regular.ttf") format("truetype");
      font-style: normal;
      font-weight: 400;
      font-display: swap;
    }
    @font-face {
      font-family: "Chela One";
      src: url("/qalam/assets/fonts/ChelaOne-Regular.ttf") format("truetype");
      font-style: normal;
      font-weight: 400;
      font-display: swap;
    }
    @font-face {
      font-family: "Sora";
      src: url("/qalam/assets/fonts/sora/Sora-Variable.ttf") format("truetype");
      font-style: normal;
      font-weight: 100 800;
      font-display: swap;
    }
    @font-face {
      font-family: "DG Shamael";
      src: url("/qalam/assets/fonts/DGShamael-Bold.ttf") format("truetype");
      font-style: normal;
      font-weight: 700;
      font-display: swap;
    }
    @font-face {
      font-family: "Somar Sans";
      src: url("/qalam/assets/fonts/SomarSans-Regular.otf") format("opentype");
      font-style: normal;
      font-weight: 400;
      font-display: swap;
    }
    @font-face {
      font-family: "Somar Sans";
      src: url("/qalam/assets/fonts/SomarSans-Medium.otf") format("opentype");
      font-style: normal;
      font-weight: 500;
      font-display: swap;
    }
    @font-face {
      font-family: "Somar Sans";
      src: url("/qalam/assets/fonts/SomarSans-SemiBold.otf") format("opentype");
      font-style: normal;
      font-weight: 600;
      font-display: swap;
    }
    @font-face {
      font-family: "Somar Sans";
      src: url("/qalam/assets/fonts/SomarSans-Bold.otf") format("opentype");
      font-style: normal;
      font-weight: 700;
      font-display: swap;
    }

    :root {
      color-scheme: light;
      --color-paper: #f4f4e6;
      --color-surface: #fbfbf5;
      --color-surface-raised: #fbfbf5;
      --color-surface-subtle: #e8ecd8;
      --color-navy: #173f78;
      --color-classroom-blue: #1d5796;
      --color-green: #466428;
      --color-qalam-yellow: #f7d352;
      --color-qalam-yellow-hover: #ffe16d;
      --color-qalam-yellow-active: #edc53e;
      --color-blue-soft: #dfe8f1;
      --color-green-soft: #e5ead8;
      --color-text: #17231d;
      --color-text-muted: #56645a;
      --color-border: #cbd2c1;
      --color-border-strong: #aab5a3;
      --color-focus: #1d5796;
      --color-focus-inner: #f4f4e6;
      --color-interactive: #1d5796;
      --color-interactive-hover: #17477c;
      --color-interactive-active: #123a68;
      --color-on-dark: #f8f8ef;
      --surface-light-base: var(--color-paper);
      --surface-light-raised: var(--color-surface);
      --surface-light-tint: var(--color-surface-subtle);
      --surface-dark-base: var(--color-navy);
      --surface-dark-raised: var(--color-classroom-blue);
      --accent-interactive: var(--color-classroom-blue);
      --accent-curriculum: var(--color-green);
      --text-on-light: var(--color-text);
      --text-muted-on-light: var(--color-text-muted);
      --text-on-dark: var(--color-on-dark);
      --text-muted-on-dark: rgba(248, 248, 239, .72);
      --border-on-light: var(--color-border);
      --border-on-dark: rgba(248, 248, 239, .22);
      --focus-ring: var(--color-focus);
      --focus-ring-inner: var(--color-focus-inner);
      --gradient-light: linear-gradient(135deg, var(--surface-light-raised), var(--surface-light-tint));
      --gradient-dark: linear-gradient(135deg, var(--surface-dark-base), var(--surface-dark-raised));
      --shadow-sm: 0 8px 24px rgba(23, 63, 120, .08);
      --shadow-md: 0 22px 64px rgba(23, 63, 120, .14);
      --radius-control: 12px;
      --radius-surface: 16px;
      --radius-panel: 24px;
      --site-header-height: 76px;
      --container-width: min(80rem, calc(100vw - 3rem));
      --font-display: "DG Shamael", "Somar Sans", system-ui, sans-serif;
      --font-latin: "Sora", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --font-arabic: "Somar Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --font-body: var(--font-latin);
      --font-heading: var(--font-body);
      --head: var(--font-heading);
      --body: var(--font-body);
      --section-title-size: clamp(2rem, 3.25vw, 3.25rem);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: calc(var(--site-header-height) + 16px); overflow-x: clip; }
    body {
      margin: 0;
      color: var(--color-text);
      background: var(--color-paper);
      font-family: var(--body);
      font-size: 16px;
      line-height: 1.68;
      overflow-x: hidden;
    }
    body.menu-open { overflow: hidden; }
    button, a { font: inherit; }
    button { color: inherit; }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    svg { display: block; }
    [hidden] { display: none !important; }
    :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; box-shadow: 0 0 0 2px var(--focus-ring-inner); }
    ::selection { background: var(--color-blue-soft); color: var(--color-text); }

    html[lang="ar"] {
      --font-body: var(--font-arabic);
      --font-heading: var(--font-arabic);
      --head: var(--font-heading);
      --body: var(--font-body);
    }
    html[dir="rtl"] .eyebrow,
    html[dir="rtl"] .book-level,
    html[dir="rtl"] .stat-label { letter-spacing: 0; }

    .container { width: var(--container-width); margin-inline: auto; }
    .section { padding: 0; position: relative; }
    .site-shell { padding-block-start: var(--site-header-height); overflow-x: clip; background: var(--surface-light-base); }
    .surface-section {
      position: relative;
      isolation: isolate;
      overflow: clip;
      color: var(--text-on-light);
      background: var(--surface-light-base);
      border-block-start: 1px solid var(--border-on-light);
    }
    .surface-section[data-surface="light"] {
      color: var(--text-on-light);
      background: var(--surface-light-base);
      border-block-start-color: var(--border-on-light);
    }
    .surface-section[data-surface="dark"] {
      color: var(--text-on-dark);
      background: var(--surface-dark-base);
      border-block-start-color: var(--border-on-dark);
    }
    .surface-section > .surface-host { width: 100%; margin: 0; }
    .section-surface {
      position: relative;
      display: grid;
      grid-template-columns:
        minmax(clamp(14px, 3vw, 40px), 1fr)
        minmax(0, 80rem)
        minmax(clamp(14px, 3vw, 40px), 1fr);
      isolation: isolate;
      overflow: clip;
    }
    .surface-art {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
      user-select: none;
      contain: paint;
    }
    .surface-field,
    .surface-line,
    .surface-light {
      position: absolute;
      display: block;
      pointer-events: none;
      transform: translate3d(0, 0, 0);
    }
    .surface-content {
      position: relative;
      z-index: 1;
      grid-column: 2;
      width: 100%;
      padding: clamp(78px, 9vw, 128px) 0;
    }
    .hero .surface-content { padding-block: clamp(18px, 1.5vw, 24px) clamp(26px, 2vw, 32px); }

    .surface--hero[data-surface="dark"] {
      --hero-gradient-focus-x: 72%;
      --hero-gradient-counter-x: 28%;
      --hero-gradient-focus-y: 46%;
      border-block-start: 0;
      background: #173f78;
      background:
        radial-gradient(ellipse 74% 96% at var(--hero-gradient-focus-x) var(--hero-gradient-focus-y), rgba(117, 164, 207, .28) 0%, rgba(43, 105, 166, .2) 24%, rgba(36, 91, 145, .08) 47%, rgba(23, 63, 120, 0) 72%),
        radial-gradient(ellipse 58% 72% at var(--hero-gradient-counter-x) 88%, rgba(16, 52, 95, .72) 0%, rgba(23, 63, 120, .28) 42%, rgba(23, 63, 120, 0) 76%),
        radial-gradient(ellipse 42% 58% at var(--hero-gradient-focus-x) 12%, rgba(75, 130, 184, .24) 0%, rgba(36, 91, 145, .09) 46%, rgba(36, 91, 145, 0) 74%),
        #173f78;
    }
    html[dir="rtl"] .surface--hero[data-surface="dark"] {
      --hero-gradient-focus-x: 28%;
      --hero-gradient-counter-x: 72%;
    }
    .surface--hero .surface-field,
    .surface--hero .surface-line,
    .surface--hero .surface-light {
      width: auto;
      height: auto;
      clip-path: none;
      transition: none;
      will-change: transform;
    }
    .surface--hero .surface-field {
      inset: -28% -24%;
      z-index: 0;
      opacity: .92;
      background:
        radial-gradient(ellipse 38% 48% at var(--hero-gradient-focus-x) var(--hero-gradient-focus-y), rgba(117, 164, 207, .58) 0%, rgba(75, 130, 184, .43) 18%, rgba(43, 105, 166, .28) 36%, rgba(36, 91, 145, .1) 54%, rgba(36, 91, 145, 0) 72%);
      transform: translate3d(0, 0, 0) scale(1.08);
    }
    .surface--hero .surface-line {
      inset: -32% -27%;
      z-index: 1;
      opacity: .76;
      background:
        radial-gradient(ellipse 34% 43% at var(--hero-gradient-counter-x) 72%, rgba(16, 52, 95, .82) 0%, rgba(23, 63, 120, .5) 27%, rgba(36, 91, 145, .16) 48%, rgba(36, 91, 145, 0) 72%),
        radial-gradient(ellipse 24% 32% at var(--hero-gradient-focus-x) 24%, rgba(75, 130, 184, .24) 0%, rgba(43, 105, 166, .09) 44%, rgba(43, 105, 166, 0) 72%);
      transform: translate3d(0, 0, 0) scale(1.1);
    }
    .surface--hero .surface-light {
      display: block;
      inset: -36% -31%;
      z-index: 2;
      opacity: .62;
      background:
        radial-gradient(circle at var(--hero-gradient-focus-x) 31%, rgba(117, 164, 207, .38) 0%, rgba(75, 130, 184, .24) 17%, rgba(43, 105, 166, .1) 36%, rgba(36, 91, 145, 0) 64%);
      mix-blend-mode: screen;
      transform: translate3d(0, 0, 0) scale(1.06);
    }
    .surface--hero .surface-art::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 3;
      opacity: .055;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper-noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper-noise)' opacity='.72'/%3E%3C/svg%3E");
      background-size: 180px 180px;
      mix-blend-mode: soft-light;
      pointer-events: none;
    }
    .surface--facts .surface-field {
      inset: 0 -4% 0 auto;
      width: 28%;
      opacity: .38;
      background: var(--color-classroom-blue);
      clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 72%);
    }
    .surface--facts .surface-line {
      inset: 0 auto 0 4%;
      width: 24%;
      opacity: .16;
      background: repeating-linear-gradient(90deg, transparent 0 42px, var(--color-classroom-blue) 42px 43px);
    }
    .surface--facts .surface-light { display: none; }
    html[dir="rtl"] .surface--facts .surface-field {
      inset: 0 auto 0 -4%;
      clip-path: polygon(0 0, 72% 0, 100% 72%, 0 100%);
    }
    html[dir="rtl"] .surface--facts .surface-line { inset: 0 4% 0 auto; }

    .surface--ecosystem { background: #edf1e7; }
    .surface--ecosystem .surface-field {
      inset: 0 auto 0 0;
      width: 57%;
      opacity: .72;
      background: var(--color-surface);
      clip-path: polygon(0 0, 83% 0, 100% 38%, 74% 100%, 0 100%);
    }
    .surface--ecosystem .surface-line {
      inset: 11% auto 9% 43%;
      width: 18%;
      opacity: .18;
      background: repeating-linear-gradient(90deg, transparent 0 26px, var(--color-classroom-blue) 26px 27px);
      transform: rotate(6deg);
    }
    .surface--ecosystem .surface-light {
      inset: auto -5% -13% auto;
      width: 48%;
      height: 42%;
      opacity: .18;
      background: var(--color-green);
      clip-path: polygon(26% 0, 100% 18%, 100% 100%, 0 100%);
    }
    .surface--ecosystem[data-surface="dark"] .surface-field { background: var(--surface-dark-raised); }
    .surface--ecosystem[data-surface="dark"] .surface-line {
      background: repeating-linear-gradient(90deg, transparent 0 26px, var(--color-on-dark) 26px 27px);
    }

    .surface--pathway { background: linear-gradient(125deg, var(--color-navy), #245b91); }
    .surface--pathway .surface-field {
      inset: -18% auto auto -9%;
      width: 64%;
      height: 74%;
      opacity: .34;
      background: var(--color-green);
      clip-path: polygon(0 0, 82% 10%, 100% 62%, 48% 100%, 0 78%);
    }
    .surface--pathway .surface-line {
      inset: 18% 5% auto 38%;
      height: 42%;
      opacity: .14;
      background: repeating-linear-gradient(0deg, transparent 0 42px, var(--color-on-dark) 42px 43px);
      clip-path: polygon(5% 0, 100% 14%, 82% 100%, 0 84%);
    }
    .surface--pathway .surface-light {
      inset: 0 15% 0 auto;
      width: 26%;
      opacity: .16;
      background: linear-gradient(90deg, transparent, var(--color-surface-subtle), transparent);
      transform: skewX(11deg);
    }

    .surface--curriculum { background: #123765; }
    .surface--curriculum .surface-field {
      inset: -12% -8% auto auto;
      width: 72%;
      height: 56%;
      opacity: .48;
      background: var(--color-classroom-blue);
      clip-path: polygon(22% 0, 100% 0, 100% 72%, 66% 100%, 0 70%);
    }
    .surface--curriculum .surface-line {
      inset: 8% auto 7% 4%;
      width: 28%;
      opacity: .14;
      background: repeating-linear-gradient(90deg, transparent 0 34px, var(--color-on-dark) 34px 35px);
      transform: rotate(2deg);
    }
    .surface--curriculum .surface-light {
      inset: auto -4% -6% 18%;
      height: 24%;
      opacity: .18;
      background: var(--color-green);
      clip-path: polygon(8% 18%, 100% 0, 92% 100%, 0 78%);
    }

    .surface--teachers { background: #f7f0df; }
    .surface--teachers .surface-field {
      inset: -9% -5% auto auto;
      width: 44%;
      height: 54%;
      opacity: .13;
      background: var(--color-classroom-blue);
      clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 72%);
    }
    .surface--teachers .surface-line {
      inset: 8% auto 7% 5%;
      width: 24%;
      opacity: .13;
      background: repeating-linear-gradient(0deg, transparent 0 34px, var(--color-green) 34px 35px);
      transform: rotate(-4deg);
    }
    .surface--teachers .surface-light {
      inset: auto -4% -5% 28%;
      height: 24%;
      opacity: .7;
      background: var(--color-surface);
      clip-path: polygon(8% 28%, 100% 0, 94% 100%, 0 100%);
    }

    .surface--global { background: #0e315c; }
    .surface--global .surface-field {
      inset: -16% -9% auto auto;
      width: 58%;
      height: 74%;
      opacity: .3;
      background: var(--color-classroom-blue);
      clip-path: polygon(18% 0, 100% 0, 100% 82%, 58% 100%, 0 62%);
    }
    .surface--global .surface-line {
      inset: auto 4% 6% 32%;
      height: 34%;
      opacity: .11;
      background: repeating-linear-gradient(0deg, transparent 0 54px, var(--color-on-dark) 54px 55px);
      clip-path: polygon(0 18%, 100% 0, 94% 100%, 8% 84%);
    }
    .surface--global .surface-light {
      inset: 12% auto auto 4%;
      width: 34%;
      height: 28%;
      opacity: .2;
      background: var(--color-green);
      clip-path: polygon(0 8%, 92% 0, 100% 72%, 18% 100%);
    }

    .surface--closing .surface-field {
      inset: 0 0 0 auto;
      width: 42%;
      opacity: .18;
      background: var(--color-green);
      clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 76%);
    }
    .surface--closing .surface-line {
      inset: 0 auto 0 7%;
      width: 18%;
      opacity: .14;
      background: repeating-linear-gradient(90deg, transparent 0 34px, var(--color-classroom-blue) 34px 35px);
    }
    .surface--closing .surface-light { display: none; }
    .closing-pattern {
      position: absolute;
      inset-block: 8% 6%;
      inset-inline-end: -3%;
      width: min(52%, 720px);
      opacity: .12;
      background: var(--color-green);
      -webkit-mask: url("/qalam/assets/decorative elements/10-doodle-linear-patterns-2026-05-13-03-36-32-utc/Doodle_Lines_Patterns/01_Vector/SVG/doodle_lines_01.svg") center / cover no-repeat;
      mask: url("/qalam/assets/decorative elements/10-doodle-linear-patterns-2026-05-13-03-36-32-utc/Doodle_Lines_Patterns/01_Vector/SVG/doodle_lines_01.svg") center / cover no-repeat;
    }

    @media (prefers-reduced-motion: no-preference) {
      .surface-field, .surface-line, .surface-light {
        transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .9s ease;
      }
      body.motion-ready .surface-section:not(.is-relevant) .surface-field { transform: translate3d(28px, 0, 0); opacity: .08; }
      body.motion-ready .surface--facts:not(.is-relevant) .surface-line { transform: translate3d(-26px, 0, 0); opacity: .04; }
      body.motion-ready .surface--ecosystem:not(.is-relevant) .surface-line { transform: translate3d(0, 18px, 0) rotate(6deg); opacity: .05; }
      body.motion-ready .surface--curriculum:not(.is-relevant) .surface-line { transform: translate3d(0, 18px, 0); opacity: .05; }
      body.motion-ready .surface--pathway:not(.is-relevant) .surface-line { transform: translate3d(0, -28px, 0); opacity: .06; }
      body.motion-ready .surface--teachers:not(.is-relevant) .surface-line { transform: translate3d(32px, 0, 0) rotate(-4deg); opacity: .05; }
      body.motion-ready .surface--global:not(.is-relevant) .surface-light { transform: translate3d(-34px, 0, 0); opacity: .06; }
    }
    .section-kicker {
      margin: 0 0 10px;
      color: var(--color-classroom-blue);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .section-title {
      margin: 0;
      max-width: 760px;
      font-family: var(--head);
      font-size: var(--section-title-size);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.015em;
      text-wrap: balance;
    }
    .section-copy {
      margin: 22px 0 0;
      max-width: 650px;
      color: var(--color-text-muted);
      font-size: 1.05rem;
      line-height: 1.68;
      text-wrap: pretty;
    }
    .display-heading-phrase {
      display: inline-block;
      max-width: 100%;
      white-space: nowrap;
    }
    p, li, figcaption, dt, dd { text-wrap: pretty; }
    .accent-emphasis { color: var(--color-green); }
    .surface-section[data-surface="dark"] .section-kicker,
    .surface-section[data-surface="dark"] .eyebrow { color: var(--color-qalam-yellow); }
    .surface-section[data-surface="dark"] .section-copy,
    .surface-section[data-surface="dark"] .book-level,
    .surface-section[data-surface="dark"] .curriculum-copy,
    .surface-section[data-surface="dark"] .global-copy { color: var(--text-muted-on-dark); }
    .surface-section[data-surface="dark"] .accent-emphasis { color: var(--color-on-dark); }
    .dark-section-title {
      width: fit-content;
      max-width: 100%;
      padding-block-end: clamp(13px, 1.25vw, 18px);
      position: relative;
      color: var(--color-qalam-yellow);
      overflow: visible;
    }
    .dark-section-title .accent-emphasis { color: inherit !important; }
    .dark-section-title::after {
      content: "";
      position: absolute;
      inset-inline-start: 0;
      inset-block-end: 0;
      width: 100%;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      opacity: .82;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform .72s cubic-bezier(.32, .72, 0, 1), opacity .72s cubic-bezier(.32, .72, 0, 1);
      pointer-events: none;
    }
    html[dir="rtl"] .dark-section-title::after { transform-origin: right center; }
    .dark-section-title:hover::after { opacity: 1; transform: scaleX(1); }

    .button {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border: 1px solid transparent;
      border-radius: var(--radius-control);
      padding: 0 22px;
      color: var(--color-on-dark);
      background: var(--color-interactive);
      font-weight: 700;
      line-height: 1.2;
      white-space: nowrap;
      cursor: pointer;
      transition: transform .2s cubic-bezier(.16, 1, .3, 1), background-color .2s ease, color .2s ease, border-color .2s ease;
    }
    .button:hover { transform: translateY(-2px); }
    .button:active { transform: translateY(1px); background: var(--color-interactive-active); }
    .button-primary, .button-secondary { background: var(--color-interactive); color: var(--color-on-dark); }
    .button-primary:hover, .button-secondary:hover { background: var(--color-interactive-hover); }
    .button-ghost { background: transparent; border-color: var(--color-border-strong); color: var(--color-text); }
    .button-ghost:hover { background: var(--color-surface); border-color: var(--color-text); }

    .skip-link {
      position: fixed;
      inset-inline-start: 16px;
      top: -80px;
      z-index: 999;
      background: var(--color-text);
      color: var(--color-on-dark);
      padding: 12px 18px;
      border-radius: 10px;
    }
    .skip-link:focus { top: 16px; }

    .site-header {
      width: 100%;
      position: fixed;
      top: 0;
      inset-inline: 0;
      z-index: 90;
      background: rgba(244,244,230,.94);
      border-bottom: 1px solid rgba(23,63,120,.08);
      backdrop-filter: blur(16px);
      transform: translate3d(0, 0, 0);
    }
    .site-header.is-hidden { transform: translate3d(0, -100%, 0); }
    .site-header.is-scrolled {
      background: rgba(244,244,230,.97);
      border-bottom-color: rgba(32,39,43,.12);
      box-shadow: 0 8px 24px rgba(23,63,120,.08);
    }
    body.menu-open .site-header { transform: translate3d(0, 0, 0); }
    .nav-wrap {
      height: 76px;
      display: grid;
      grid-template-columns: minmax(112px, 1fr) auto minmax(112px, 1fr);
      align-items: center;
      gap: clamp(22px, 3vw, 48px);
      position: relative;
      z-index: 2;
    }
    .brand { display: inline-flex; align-items: center; width: fit-content; }
    .brand-logo { width: 50px; height: 50px; object-fit: contain; }
    .main-nav { justify-self: center; display: flex; align-items: center; gap: clamp(24px, 2.7vw, 42px); }
    .main-nav a { position: relative; font-size: .84rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
    .main-nav a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 100%;
      bottom: -8px;
      height: 2px;
      background: var(--color-classroom-blue);
      transition: right .54s cubic-bezier(.32,.72,0,1);
    }
    html[dir="rtl"] .main-nav a::after { right: 0; left: 100%; transition: left .42s cubic-bezier(.32,.72,0,1); }
    .main-nav a:hover::after { right: 0; }
    html[dir="rtl"] .main-nav a:hover::after { left: 0; }
    .nav-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
    .language-switcher { position: relative; }
    .language-button {
      min-width: 58px;
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border: 1px solid rgba(23,63,120,.13);
      border-radius: 999px;
      background: rgba(251,251,245,.72);
      padding: 0 13px;
      color: var(--color-navy);
      font-size: .79rem;
      font-weight: 700;
      cursor: pointer;
      transition: transform .46s cubic-bezier(.32,.72,0,1), background-color .46s cubic-bezier(.32,.72,0,1), border-color .46s cubic-bezier(.32,.72,0,1);
    }
    .language-button::after { content: ""; width: 5px; height: 5px; border-inline-end: 1px solid currentColor; border-block-end: 1px solid currentColor; transform: translateY(-1px) rotate(45deg); }
    .language-button:hover { transform: translateY(-1px); border-color: rgba(23,63,120,.28); background: var(--color-surface); }
    .language-menu {
      position: absolute;
      top: calc(100% + 10px);
      inset-inline-end: 0;
      width: 170px;
      padding: 8px;
      border: 1px solid rgba(23,63,120,.1);
      background: rgba(251,251,245,.98);
      border-radius: 16px;
      box-shadow: 0 22px 50px rgba(23,63,120,.12);
    }
    .language-menu button {
      width: 100%;
      min-height: 40px;
      border: 0;
      background: transparent;
      border-radius: 10px;
      text-align: start;
      padding: 0 12px;
      font-weight: 700;
      cursor: pointer;
    }
    .language-menu button:hover, .language-menu button[aria-current="true"] { background: var(--color-surface-subtle); }
    .menu-button {
      display: none;
      width: 46px;
      height: 46px;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--color-border);
      background: var(--color-surface);
      border-radius: 12px;
      cursor: pointer;
    }
    .menu-glyph,
    .menu-glyph::before,
    .menu-glyph::after {
      width: 20px;
      height: 2px;
      display: block;
      border-radius: 2px;
      background: currentColor;
      transition: transform .46s cubic-bezier(.32,.72,0,1), opacity .32s cubic-bezier(.32,.72,0,1);
    }
    .menu-glyph { position: relative; }
    .menu-glyph::before, .menu-glyph::after { content: ""; position: absolute; left: 0; }
    .menu-glyph::before { transform: translateY(-6px); }
    .menu-glyph::after { transform: translateY(6px); }
    .menu-button[aria-expanded="true"] .menu-glyph { background: transparent; }
    .menu-button[aria-expanded="true"] .menu-glyph::before { transform: rotate(45deg); }
    .menu-button[aria-expanded="true"] .menu-glyph::after { transform: rotate(-45deg); }
    .nav-backdrop { display: none; }

    .hero {
      min-height: auto;
      position: relative;
      background: transparent;
      overflow: hidden;
      padding: 0;
      isolation: isolate;
    }
    .hero-layout {
      height: auto;
      min-height: clamp(520px, 64svh, 580px);
      display: grid;
      direction: ltr;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: clamp(10px, 1.5vw, 22px);
      align-items: center;
      position: relative;
      z-index: 2;
    }
    .hero-copy {
      grid-column: 1 / span 5;
      grid-row: 1;
      position: relative;
      z-index: 4;
      max-width: 510px;
      padding-inline-end: clamp(0px, .7vw, 10px);
      text-align: start;
    }
    html[dir="rtl"] .hero-copy {
      grid-column: 8 / span 5;
      direction: rtl;
      max-width: 500px;
      justify-self: end;
      padding-inline: 0;
    }
    .brand-lockup {
      width: fit-content;
      max-width: 100%;
      margin: 0;
      color: var(--text-on-dark);
      font: inherit;
      text-align: start;
    }
    .brand-lockup-title--latin {
      display: block;
      width: max-content;
      max-width: 100%;
      color: inherit;
      font-family: "Chela One", "Somar Sans", system-ui, sans-serif;
      font-size: clamp(5.9rem, 10.8vw, 9.8rem);
      font-weight: 400;
      line-height: .78;
      letter-spacing: 0;
      white-space: nowrap;
    }
    .brand-lockup-title--arabic { display: none; }
    html[lang="ar"] .brand-lockup {
      width: min(100%, 265px);
      direction: rtl;
      margin-inline-start: 0;
      margin-inline-end: auto;
    }
    html[lang="ar"] .brand-lockup-title--latin { display: none; }
    html[lang="ar"] .brand-lockup-title--arabic {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 1;
      object-fit: contain;
    }
    .hero-descriptor {
      max-width: 38rem;
      margin: clamp(18px, 2vw, 25px) 0 0;
      color: #cbdcf1;
      font-family: var(--font-body);
      font-size: clamp(.74rem, .92vw, .88rem);
      font-weight: 600;
      line-height: 1.45;
      letter-spacing: .055em;
      text-wrap: balance;
    }
    html[lang="ar"] .hero-descriptor { letter-spacing: 0; }
    html[lang="ar"] .hero-descriptor { margin-top: 10px; font-size: clamp(.82rem, 1vw, .95rem); line-height: 1.4; }
    .hero-slogan {
      max-width: 34rem;
      margin: 8px 0 0;
      color: #f7d352;
      font-family: var(--font-body);
      font-size: clamp(1.35rem, 2vw, 2rem);
      font-weight: 700;
      line-height: 1.22;
      text-wrap: balance;
    }
    .eyebrow {
      margin: 0 0 16px;
      color: var(--color-classroom-blue);
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .17em;
      text-transform: uppercase;
    }
    .hero-actions { margin-top: 24px; display: flex; justify-content: flex-start; gap: 10px; flex-wrap: wrap; }
    html[dir="rtl"] .hero-actions { justify-content: flex-start; }
    .hero-actions .button {
      min-height: 50px;
      border-radius: 999px;
      padding-inline: 20px;
      gap: 12px;
      font-size: .9rem;
      transition: transform .58s cubic-bezier(.32,.72,0,1), background-color .58s cubic-bezier(.32,.72,0,1), color .58s cubic-bezier(.32,.72,0,1), border-color .58s cubic-bezier(.32,.72,0,1);
    }
    .hero-actions .button-primary { padding-inline-end: 8px; }
    .button-icon {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      flex: 0 0 34px;
      border-radius: 50%;
      color: var(--color-navy);
      background: rgba(23,63,120,.1);
      transition: transform .58s cubic-bezier(.32,.72,0,1), background-color .58s cubic-bezier(.32,.72,0,1);
    }
    .button-icon svg { width: 15px; height: 15px; }
    html[dir="rtl"] .button-icon svg { transform: scaleX(-1); }
    .hero-actions .button-primary:hover .button-icon { transform: translate(2px, 1px) scale(1.04); background: rgba(23,63,120,.15); }
    html[dir="rtl"] .hero-actions .button-primary:hover .button-icon { transform: translate(-2px, 1px) scale(1.04); }
    .hero-actions .button-primary {
      color: var(--color-navy);
      background: var(--color-qalam-yellow);
      box-shadow: 0 14px 34px rgba(7, 31, 68, .18);
    }
    .hero-actions .button-primary:hover { color: var(--color-navy); background: var(--color-qalam-yellow-hover); }
    .hero-actions .button-primary:active { color: var(--color-navy); background: var(--color-qalam-yellow-active); transform: scale(.98); }
    .hero-visual {
      grid-column: 5 / -1;
      grid-row: 1;
      align-self: stretch;
      min-width: 0;
      position: relative;
      z-index: 2;
    }
    html[dir="rtl"] .hero-visual { grid-column: 1 / span 8; }
    .hero-book-media {
      position: absolute;
      inset: 2% auto 2% -3%;
      z-index: 3;
      width: 72%;
      height: 96%;
      margin: 0;
    }
    html[dir="rtl"] .hero-book-media { inset: 2% -3% 2% auto; width: 74%; }
    .hero-book-frame {
      display: block;
      width: 100%;
      height: 100%;
      border: 0;
      background: transparent;
    }
    .hero-pencil {
      position: absolute;
      inset: auto -8% 7% auto;
      z-index: 2;
      width: min(58%, 520px);
      max-width: none;
      margin: 0;
      transform: rotate(-2deg);
      transform-origin: center;
    }
    html[dir="rtl"] .hero-pencil { inset: auto auto 7% -8%; width: min(55%, 480px); transform: rotate(2deg); }
    .hero-pencil img { width: 100%; height: auto; object-fit: contain; transform-origin: 54% 58%; }
    @keyframes hero-pencil-flight {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(-.35deg); }
      50% { transform: translate3d(0, -6px, 0) rotate(.45deg); }
    }
    @media (prefers-reduced-motion: no-preference) {
      .hero-pencil img {
        animation: hero-pencil-flight 5.6s ease-in-out infinite;
        will-change: transform;
      }
    }
    .surface--hero[data-surface="dark"] .button-ghost {
      color: var(--text-on-dark);
      border-color: var(--border-on-dark);
    }
    .surface--hero[data-surface="dark"] .button-ghost:hover {
      color: var(--text-on-dark);
      background: var(--surface-dark-raised);
      border-color: var(--text-on-dark);
    }

    .stats {
      position: relative;
      isolation: isolate;
      color: var(--text-on-light);
      background: var(--surface-light-base);
      border-block: 1px solid var(--border-on-light);
      overflow: hidden;
    }
    .stats-inner { min-height: 138px; position: relative; z-index: 1; display: grid; grid-template-columns: 1.45fr repeat(4, 1fr); gap: 0; align-items: center; padding-block: 18px; }
    .stats-intro { padding-inline-end: 40px; }
    .stats-intro h2 { margin: 0; max-width: 390px; font: 700 1.68rem/1.14 var(--head); letter-spacing: -.025em; text-wrap: balance; }
    .stats-track { display: contents; }
    .stats-pagination { display: none; }
    .stat { min-height: 78px; display: grid; grid-template-columns: 1fr; align-items: center; gap: 12px; padding-inline: 25px; border-inline-start: 1px solid var(--border-on-light); }
    .stat-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; }
    .stat:nth-child(2) .stat-icon { background: var(--color-blue-soft); color: var(--color-classroom-blue); }
    .stat:nth-child(3) .stat-icon { background: var(--color-green-soft); color: var(--color-green); }
    .stat:nth-child(4) .stat-icon { background: var(--color-green-soft); color: var(--color-green); }
    .stat:nth-child(5) .stat-icon { background: var(--color-blue-soft); color: var(--color-classroom-blue); }
    .stat-icon svg { width: 23px; height: 23px; }
    .stat strong { display: block; font: 700 1.65rem/1 var(--head); }
    .stat-label { color: var(--text-muted-on-light); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

    .platform-intro { background: transparent; }
    .platform-intro .surface-content { padding-block: clamp(64px, 6.5vw, 88px); }
    .ecosystem-layout { display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; gap: clamp(48px, 5vw, 80px); }
    .ecosystem-copy { position: relative; z-index: 2; }
    .ecosystem-copy .section-title { max-width: 11ch; }
    .audience-pair { margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--color-border-strong); }
    .audience-note { padding: 24px 22px 0 0; }
    html[dir="rtl"] .audience-note { padding: 24px 0 0 22px; }
    .audience-note + .audience-note { padding-inline-start: 22px; border-inline-start: 1px solid var(--color-border); }
    html[lang="ar"] .audience-note + .audience-note { padding-inline-start: 34px; }
    .audience-note strong { display: block; color: var(--color-classroom-blue); font-size: .78rem; }
    .audience-note p { margin: 7px 0 0; color: var(--color-text-muted); font-size: .88rem; line-height: 1.58; text-wrap: pretty; }
    .ecosystem-visual { min-height: 560px; display: grid; align-content: center; position: relative; }
    .classroom-plate { width: 92%; margin: 0 0 0 auto; position: relative; }
    html[dir="rtl"] .classroom-plate { margin: 0 auto 0 0; }
    .classroom-plate > img:first-child { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; border-radius: var(--radius-panel); border: 1px solid rgba(23,63,120,.16); box-shadow: 0 30px 80px rgba(23,63,120,.16); }
    .ecosystem-cover { width: 24%; height: auto; position: absolute; inset-inline-start: -5%; bottom: -15%; z-index: 3; filter: drop-shadow(0 20px 22px rgba(23,63,120,.2)); transform: rotate(-4deg); }
    html[dir="rtl"] .ecosystem-cover { transform: rotate(4deg); }
    .ecosystem-page { width: 47%; height: auto; position: absolute; inset-inline-end: -2%; bottom: -19%; z-index: 2; border: 8px solid var(--color-surface); border-radius: var(--radius-surface); background: var(--color-surface); object-fit: contain; box-shadow: var(--shadow-md); transform: rotate(3deg); }
    html[dir="rtl"] .ecosystem-page { transform: rotate(-3deg); }
    .ecosystem-sequence { width: 92%; margin: 118px 0 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); color: var(--color-text-muted); font-size: clamp(.88rem, 1.05vw, 1rem); font-weight: 600; line-height: 1.42; }
    html[dir="rtl"] .ecosystem-sequence { margin-inline: auto 0; }
    .ecosystem-sequence span { padding-inline: 22px; border-inline-start: 1px solid var(--color-border-strong); text-wrap: pretty; }
    .ecosystem-sequence span:first-child { padding-inline-start: 0; border-inline-start: 0; }
    .surface--ecosystem[data-surface="dark"] .audience-pair { border-top-color: var(--border-on-dark); }
    .surface--ecosystem[data-surface="dark"] .audience-note + .audience-note { border-inline-start-color: var(--border-on-dark); }
    .surface--ecosystem[data-surface="dark"] .audience-note strong { color: var(--color-qalam-yellow); }
    .surface--ecosystem[data-surface="dark"] .audience-note p,
    .surface--ecosystem[data-surface="dark"] .ecosystem-sequence { color: var(--text-muted-on-dark); }
    .surface--ecosystem[data-surface="dark"] .ecosystem-sequence span { border-inline-start-color: var(--border-on-dark); }

    .toolkit-section { background: transparent; }
    .toolkit-head { max-width: 790px; }
    .teacher-workflow { margin-top: 54px; display: grid; grid-template-columns: .9fr 1.1fr; grid-template-areas: "prepare teach" "practise teach" "assess assess"; gap: 18px; }
    .resource-group { position: relative; overflow: hidden; border-radius: var(--radius-panel); }
    .resource-group h3 { margin: 0; font: 700 clamp(1.8rem, 3vw, 3.15rem)/1.08 var(--head); letter-spacing: -.03em; }
    .resource-group h3 > span { display: block; }
    .resource-group h3 { text-wrap: balance; }
    .resource-group h3 > span:first-child { margin-bottom: 8px; color: var(--color-classroom-blue); font-size: .76rem; line-height: 1.2; letter-spacing: 0; }
    .resource-list { margin: 24px 0 0; padding: 0; list-style: none; }
    .resource-list li { text-wrap: pretty; }
    .resource-list li { padding: 11px 0; color: var(--color-text-muted); font-size: .95rem; font-weight: 600; line-height: 1.38; border-top: 1px solid var(--color-border); }
    .resource-prepare { grid-area: prepare; min-height: 330px; display: grid; grid-template-columns: 1fr 42%; gap: 22px; padding: 34px; background: var(--color-surface); border: 1px solid var(--color-border); }
    .resource-prepare img { width: 100%; height: 100%; min-height: 250px; object-fit: cover; object-position: 50% 50%; border-radius: var(--radius-surface); }
    .resource-teach { grid-area: teach; min-height: 678px; display: grid; grid-template-rows: minmax(310px, .95fr) auto; color: var(--color-on-dark); background: var(--color-classroom-blue); }
    .resource-teach figure { min-height: 0; margin: 0; display: grid; place-items: center; position: relative; overflow: visible; padding: 30px 18px 6px; isolation: isolate; }
    .resource-teach figure::before {
      content: "";
      width: 76%;
      height: 19%;
      position: absolute;
      inset-inline-start: 12%;
      bottom: 4%;
      z-index: 0;
      border-radius: 50%;
      background: rgba(7, 29, 62, .46);
      filter: blur(20px);
      transform: scaleY(.58);
    }
    .resource-teach figure img { width: 103%; max-width: none; height: auto; position: relative; z-index: 1; object-fit: contain; filter: drop-shadow(0 16px 14px rgba(7, 29, 62, .24)); transform: translateY(9px) rotate(-.8deg); transform-origin: 52% 64%; }
    html[dir="rtl"] .resource-teach figure img { transform: translateY(9px) rotate(.8deg); }
    .resource-teach .resource-content { padding: 52px 40px 42px; }
    .resource-teach h3 > span:first-child { color: rgba(248,248,239,.78); }
    .resource-teach .resource-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
    .resource-teach .resource-list li { color: var(--color-on-dark); border-top-color: rgba(248,248,239,.28); }
    .resource-practise { grid-area: practise; min-height: 330px; display: grid; grid-template-columns: 46% 1fr; gap: 26px; padding: 18px; background: #dde7d4; }
    .resource-practise img { width: 100%; height: 100%; min-height: 294px; object-fit: cover; object-position: center; border-radius: var(--radius-surface); }
    .resource-practise .resource-content { align-self: center; padding: 20px 18px 20px 0; }
    html[dir="rtl"] .resource-practise .resource-content { padding: 20px 0 20px 18px; }
    .resource-practise h3 > span:first-child { color: var(--color-green); }
    .resource-assess { grid-area: assess; min-height: 250px; display: grid; grid-template-columns: .68fr auto 1.2fr; gap: 38px; align-items: center; padding: 48px 52px; color: var(--color-on-dark); background: var(--color-green); }
    .resource-assess h3 > span:first-child { color: rgba(248,248,239,.78); }
    .assess-icons { display: flex; align-items: center; gap: 14px; align-self: center; }
    .assess-icon { width: 58px; height: 58px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(248,248,239,.24); border-radius: 50%; background: rgba(248,248,239,.1); }
    .assess-icon img { width: 32px; height: 32px; object-fit: contain; filter: brightness(0) invert(95%) sepia(11%) saturate(231%) hue-rotate(15deg) brightness(107%) contrast(95%); }
    .assess-icon--quiz { background: var(--color-qalam-yellow); border-color: rgba(23,63,120,.12); }
    .assess-icon--quiz img { filter: brightness(0) saturate(100%) invert(22%) sepia(30%) saturate(1439%) hue-rotate(173deg) brightness(85%) contrast(95%); }
    .resource-assess .resource-list { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }
    .resource-assess .resource-list li { min-height: 74px; color: var(--color-on-dark); font-size: 1.06rem; border-top-color: rgba(248,248,239,.28); }

    @media (prefers-reduced-motion: no-preference) {
      .ecosystem-cover, .ecosystem-page { transition: transform .75s cubic-bezier(.16, 1, .3, 1), opacity .65s ease; }
      body.motion-ready .surface--ecosystem:not(.is-relevant) .ecosystem-cover { transform: translate3d(-24px, 34px, 0) rotate(-8deg); opacity: .3; }
      body.motion-ready .surface--ecosystem:not(.is-relevant) .ecosystem-page { transform: translate3d(30px, 28px, 0) rotate(7deg); opacity: .3; }
      html[dir="rtl"] body.motion-ready .surface--ecosystem:not(.is-relevant) .ecosystem-cover { transform: translate3d(24px, 34px, 0) rotate(8deg); }
      html[dir="rtl"] body.motion-ready .surface--ecosystem:not(.is-relevant) .ecosystem-page { transform: translate3d(-30px, 28px, 0) rotate(-7deg); }
    }

    .pathway-section { background: transparent; overflow: clip; isolation: isolate; }
    .pathway-section > .container { position: relative; z-index: 1; }
    .pathway-section .section-surface { min-height: 100dvh; }
    .pathway-layout {
      min-height: 100dvh;
      display: grid;
      grid-template-rows: auto 1fr;
      align-content: center;
      padding-block: clamp(34px, 5dvh, 54px);
    }
    .pathway-topline {
      display: grid;
      grid-template-columns: minmax(0, 720px) minmax(170px, 230px);
      justify-content: space-between;
      align-items: end;
      gap: clamp(28px, 5vw, 72px);
    }
    .pathway-intro { max-width: 720px; }
    .pathway-rail {
      margin-top: clamp(20px, 3dvh, 30px);
      min-height: 480px;
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(214px, 1fr);
      gap: clamp(18px, 2vw, 32px);
      align-items: start;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scroll-snap-type: inline mandatory;
      scroll-padding-inline: 2px;
      scrollbar-width: none;
      padding: 12px 2px 30px;
      position: relative;
      isolation: isolate;
    }
    .pathway-rail::before {
      content: "";
      position: absolute;
      inset-inline: 2.5%;
      top: 266px;
      height: 2px;
      background: linear-gradient(90deg, rgba(248, 248, 239, .28), rgba(248, 248, 239, .82));
      transform: rotate(-4.5deg);
      transform-origin: center;
      z-index: -1;
    }
    html[dir="rtl"] .pathway-rail::before {
      background: linear-gradient(270deg, rgba(248, 248, 239, .28), rgba(248, 248, 239, .82));
      transform: rotate(4.5deg);
    }
    .path-stage {
      --stage-lift: 0px;
      min-width: 0;
      display: grid;
      grid-template-rows: auto 224px auto auto;
      align-content: start;
      scroll-snap-align: start;
      transform: translateY(var(--stage-lift));
      position: relative;
    }
    .path-stage:nth-child(1) { --stage-lift: 96px; }
    .path-stage:nth-child(2) { --stage-lift: 72px; }
    .path-stage:nth-child(3) { --stage-lift: 48px; }
    .path-stage:nth-child(4) { --stage-lift: 24px; }
    .path-stage:nth-child(5) { --stage-lift: 0px; }
    .path-stage::after {
      content: "";
      position: absolute;
      top: 253px;
      inset-inline-start: 4px;
      width: 10px;
      height: 10px;
      border: 2px solid var(--color-on-dark);
      border-radius: 50%;
      background: var(--color-navy);
    }
    .path-stage-head { min-height: 76px; padding-inline-end: 8px; }
    .path-stage-level { color: rgba(248, 248, 239, .72); font-size: .74rem; font-weight: 700; letter-spacing: .08em; }
    .path-stage h3 { max-width: 13ch; margin: 7px 0 0; color: var(--color-on-dark); font: 700 1.22rem/1.22 var(--head); text-wrap: balance; }
    .stage-cover-stack { width: min(100%, 194px); height: 224px; position: relative; overflow: visible; }
    .stage-book {
      width: 142px;
      aspect-ratio: 2167 / 2806;
      position: absolute;
      inset-block-end: 0;
      inset-inline-start: 0;
      padding: 0;
      border: 1px solid rgba(248, 248, 239, .36);
      background: var(--color-surface);
      overflow: visible;
      box-shadow: none;
      filter: drop-shadow(0 17px 15px rgba(10, 30, 52, .28));
      cursor: pointer;
      transform-origin: center bottom;
    }
    .stage-book img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .stage-book:first-child { z-index: 2; transform: rotate(-1.5deg); }
    .stage-book + .stage-book { inset-inline-start: 24%; z-index: 1; transform: rotate(2.2deg) scale(.96); }
    html[dir="rtl"] .stage-book:first-child { transform: rotate(1.5deg); }
    html[dir="rtl"] .stage-book + .stage-book { transform: rotate(-2.2deg) scale(.96); }
    .path-stage[data-level="B2"] .stage-cover-stack { width: 142px; }
    .stage-levels { margin: 20px 0 0; color: var(--color-on-dark); font-size: .82rem; font-weight: 700; }
    .stage-focus { max-width: 22ch; margin: 7px 0 0; color: var(--text-muted-on-dark); font-size: .78rem; line-height: 1.5; }
    .pathway-hint {
      position: relative;
      width: fit-content;
      max-width: 220px;
      margin: 0 0 8px;
      border: 1px solid rgba(23, 63, 120, .18);
      border-radius: 18px;
      padding: 12px 15px;
      color: var(--text-muted-on-light);
      background: rgba(251, 251, 245, .88);
      box-shadow: 0 12px 26px rgba(23, 63, 120, .08);
      font-size: .76rem;
      line-height: 1.45;
      text-wrap: pretty;
    }
    .pathway-hint::after {
      content: "";
      width: 11px;
      height: 11px;
      position: absolute;
      inset-block-end: -6px;
      inset-inline-start: 26px;
      border-inline-end: 1px solid rgba(23, 63, 120, .18);
      border-block-end: 1px solid rgba(23, 63, 120, .18);
      background: rgba(251, 251, 245, .96);
      transform: rotate(45deg);
    }
    .pathway-rail::-webkit-scrollbar { display: none; }
    .surface--pathway[data-surface="light"] .pathway-rail::before,
    html[dir="rtl"] .surface--pathway[data-surface="light"] .pathway-rail::before { background: var(--border-on-light); }
    .surface--pathway[data-surface="light"] .path-stage::after {
      border-color: var(--text-on-light);
      background: var(--surface-light-base);
    }
    .surface--pathway[data-surface="light"] .path-stage-level,
    .surface--pathway[data-surface="light"] .stage-focus,
    .surface--pathway[data-surface="light"] .pathway-hint { color: var(--text-muted-on-light); }
    .surface--pathway[data-surface="light"] .path-stage h3,
    .surface--pathway[data-surface="light"] .stage-levels { color: var(--text-on-light); }
    .surface--pathway[data-surface="light"] .stage-book { border-color: var(--border-on-light); }

    @media (prefers-reduced-motion: no-preference) {
      .stage-book { transition: transform .32s cubic-bezier(.16, 1, .3, 1), filter .32s ease; }
      .stage-book:hover, .stage-book:focus-visible { z-index: 3; transform: translateY(-9px) rotate(0) scale(1.02); filter: drop-shadow(0 23px 20px rgba(10, 30, 52, .36)); }
    }

    .curriculum-section .section-surface { min-height: 100dvh; }
    .curriculum-layout {
      min-height: 100dvh;
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(360px, .62fr);
      gap: clamp(48px, 7vw, 104px);
      align-items: center;
      padding-block: clamp(38px, 5dvh, 54px);
    }
    .curriculum-intro { display: block; align-self: center; }
    .curriculum-cover { margin: 0; width: min(100%, 280px); justify-self: center; }
    .curriculum-cover img { width: 100%; height: auto; filter: drop-shadow(0 26px 34px rgba(5, 22, 42, .34)); transform: rotate(-2deg); }
    html[dir="rtl"] .curriculum-cover img { transform: rotate(2deg); }
    .curriculum-context { max-width: 650px; }
    .curriculum-meta { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px 30px; margin: 0 0 20px; }
    .curriculum-meta div { display: grid; gap: 1px; }
    .curriculum-meta dt { color: var(--color-qalam-yellow); font-size: .72rem; font-weight: 700; }
    .curriculum-meta dd { margin: 0; color: var(--color-on-dark); font-size: 1rem; font-weight: 700; }
    .curriculum-copy { max-width: 710px; }
    .curriculum-explorer { width: 100%; max-width: 470px; position: relative; justify-self: center; }
    .curriculum-controls { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
    .curriculum-view-button {
      appearance: none;
      min-height: 40px;
      border: 1px solid rgba(248, 248, 239, .32);
      border-radius: var(--radius-control);
      padding: 9px 16px;
      color: var(--color-on-dark);
      background: rgba(248, 248, 239, .08);
      font-weight: 700;
      line-height: 1.25;
      cursor: pointer;
      transition: transform .2s cubic-bezier(.16, 1, .3, 1), background-color .2s ease, border-color .2s ease;
    }
    .curriculum-view-button:hover { background: rgba(248, 248, 239, .16); border-color: rgba(248, 248, 239, .58); }
    .curriculum-view-button:active { transform: translateY(1px); }
    .curriculum-view-button[aria-pressed="true"] { color: #123765; background: var(--color-qalam-yellow); border-color: var(--color-qalam-yellow); }
    .curriculum-stage { min-height: 0; display: grid; place-items: center; position: relative; }
    .curriculum-stage::before {
      content: "";
      position: absolute;
      inset: 7% 2% 8%;
      border-radius: var(--radius-panel);
      opacity: .34;
      background: repeating-linear-gradient(135deg, rgba(248, 248, 239, .13) 0 1px, transparent 1px 24px);
      pointer-events: none;
    }
    .curriculum-sheet-frame {
      width: min(410px, 100%);
      aspect-ratio: 3119 / 3969;
      position: relative;
      overflow: hidden;
      direction: ltr;
      border: 8px solid var(--color-on-dark);
      border-radius: var(--radius-surface);
      background: var(--color-on-dark);
      box-shadow: 0 28px 68px rgba(4, 18, 35, .38);
      cursor: zoom-in;
    }
    .curriculum-sheet-frame::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(18, 55, 101, .16); pointer-events: none; }
    .curriculum-sheet-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .curriculum-magnifier {
      --magnifier-size: 176px;
      width: var(--magnifier-size);
      height: var(--magnifier-size);
      position: absolute;
      left: 0;
      top: 0;
      border: 4px solid rgba(248, 248, 239, .92);
      border-radius: 50%;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      background-color: var(--color-on-dark);
      background-repeat: no-repeat;
      box-shadow: 0 16px 36px rgba(4, 18, 35, .36), inset 0 0 0 1px rgba(18, 55, 101, .18);
      transform: translate3d(-50%, -50%, 0);
      will-change: left, top, background-position;
    }
    .curriculum-sheet-frame.is-magnifying .curriculum-magnifier { opacity: 1; }
    .global-story {
      height: clamp(460px, 60svh, 620px);
      min-height: 0;
      padding-block: clamp(36px, 5vh, 52px);
      display: flex;
      flex-direction: column;
      position: relative;
    }
    .global-header {
      width: min(660px, calc(100% - 40px));
      margin-left: auto;
      margin-right: 0;
      padding: 0;
      position: relative;
      z-index: 3;
      text-align: start;
    }
    .surface-section[data-surface="dark"] .global-header .section-kicker {
      margin-bottom: 6px;
      color: var(--color-on-dark);
    }
    .global-header .section-title { max-width: 15ch; }
    .global-copy { max-width: 560px; margin-top: 12px; }
    .global-map-stage {
      width: 100vw;
      position: absolute;
      inset-block: 0;
      left: 50%;
      z-index: 0;
      transform: translateX(-50%);
    }
    .global-map {
      width: 100%;
      height: 100%;
      margin: 0;
      position: absolute;
      inset: 0;
      overflow: hidden;
      background: rgba(7, 32, 62, .34);
    }
    .global-map::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(90deg, rgba(7, 32, 62, .2) 0%, rgba(7, 32, 62, .12) 42%, rgba(7, 32, 62, .76) 100%),
        linear-gradient(0deg, rgba(7, 32, 62, .62) 0%, transparent 42%, rgba(7, 32, 62, .36) 100%);
      pointer-events: none;
    }
    .global-map::after { content: ""; position: absolute; inset: 0; z-index: 3; box-shadow: inset 0 0 92px rgba(4, 18, 35, .34); pointer-events: none; }
    .global-map img {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      inset: 0;
      z-index: 0;
      object-fit: cover;
      object-position: center 48%;
      opacity: .28;
    }
    .global-map-sweep {
      position: absolute;
      inset: -20%;
      z-index: 2;
      opacity: .18;
      background: linear-gradient(104deg, transparent 34%, rgba(248, 248, 239, .7) 48%, rgba(116, 151, 95, .36) 54%, transparent 68%);
      transform: translate3d(-55%, 0, 0);
      pointer-events: none;
    }
    .global-register {
      width: min(100%, 960px);
      margin: 0;
      position: absolute;
      left: 50%;
      inset-block-end: clamp(22px, 3.5vh, 34px);
      z-index: 3;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      transform: translateX(-50%);
    }
    .global-register-link {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 11px;
      padding: 8px clamp(16px, 2.5vw, 28px);
      border-inline-end: 1px solid rgba(248, 248, 239, .24);
      color: var(--text-on-dark);
      font-size: .92rem;
      font-weight: 700;
      line-height: 1.35;
      text-align: center;
      transition: color .52s cubic-bezier(.32, .72, 0, 1);
    }
    .global-register-link:last-child { border-inline-end: 0; }
    .global-link-marker {
      width: 25px;
      height: 25px;
      display: grid;
      place-items: center;
      flex: 0 0 25px;
      border-radius: 50%;
      color: #123765;
      background: var(--color-qalam-yellow);
      transition: transform .52s cubic-bezier(.32, .72, 0, 1), background-color .52s cubic-bezier(.32, .72, 0, 1);
    }
    .global-link-marker svg { width: 12px; height: 12px; }
    html[dir="rtl"] .global-link-marker svg { transform: scaleX(-1); }
    .global-register-link:hover { color: var(--color-qalam-yellow-hover); }
    .global-register-link:hover .global-link-marker { background: var(--color-qalam-yellow-hover); transform: translateX(3px); }
    html[dir="rtl"] .global-register-link:hover .global-link-marker { transform: translateX(-3px); }
    @media (prefers-reduced-motion: no-preference) {
      body.motion-ready .global-section.is-relevant .global-map-sweep { animation: global-light-sweep 1.9s cubic-bezier(.16, 1, .3, 1) both; }
      @keyframes global-light-sweep { to { transform: translate3d(55%, 0, 0); } }
    }

    /* Scroll choreography: one-time content reveals with a quiet ambient drift. */
    @media (prefers-reduced-motion: no-preference) {
      .site-header {
        transition: transform .34s cubic-bezier(.32,.72,0,1), box-shadow .35s ease, background-color .35s ease, border-color .35s ease;
        will-change: transform;
      }
      .site-header::after {
        content: "";
        height: 2px;
        position: absolute;
        inset: auto 0 -1px;
        z-index: 3;
        background: linear-gradient(90deg, var(--color-classroom-blue), var(--color-green));
        transform: scaleX(var(--page-scroll-progress, 0));
        transform-origin: left center;
        transition: transform .08s linear;
        pointer-events: none;
      }
      html[dir="rtl"] .site-header::after { transform-origin: right center; }
      .surface-art {
        transform: translate3d(0, var(--surface-drift, 0px), 0);
        will-change: transform;
      }
      [data-scroll-reveal] {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        transition:
          opacity .72s ease var(--reveal-delay, 0ms),
          transform .95s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms);
        will-change: transform, opacity;
      }
      body.motion-ready .motion-section:not(.has-entered) [data-scroll-reveal="rise"] {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
      }
      body.motion-ready .motion-section:not(.has-entered) [data-scroll-reveal="scale"] {
        opacity: 0;
        transform: translate3d(0, 20px, 0) scale(.965);
      }
      body.motion-ready .motion-section:not(.has-entered) [data-scroll-reveal="from-start"] {
        opacity: 0;
        transform: translate3d(-34px, 0, 0);
      }
      body.motion-ready .motion-section:not(.has-entered) [data-scroll-reveal="from-end"] {
        opacity: 0;
        transform: translate3d(34px, 0, 0);
      }
      html[dir="rtl"] body.motion-ready .motion-section:not(.has-entered) [data-scroll-reveal="from-start"] {
        transform: translate3d(34px, 0, 0);
      }
      html[dir="rtl"] body.motion-ready .motion-section:not(.has-entered) [data-scroll-reveal="from-end"] {
        transform: translate3d(-34px, 0, 0);
      }
      [data-scroll-image] {
        transform: scale(1);
        transition: transform 1.25s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms);
        will-change: transform;
      }
      body.motion-ready .motion-section:not(.has-entered) [data-scroll-image] { transform: scale(1.045); }
      .motion-section.has-entered [data-scroll-reveal],
      .motion-section.has-entered [data-scroll-image] { will-change: auto; }
    }

    .closing { padding: 0; background: #edf1e7; }
    .closing-panel {
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(330px, .72fr);
      align-items: center;
      gap: clamp(46px, 7vw, 100px);
      padding: clamp(82px, 9vw, 132px) 0 clamp(60px, 3.75vw, 68px);
      background: transparent;
      position: relative;
      overflow: hidden;
    }
    .closing-copy-block { position: relative; z-index: 2; }
    .closing h2 { max-width: 650px; }
    .closing p { margin: 20px 0 0; max-width: 610px; color: #49603d; font-size: 1.04rem; line-height: 1.68; text-wrap: pretty; }
    .closing-actions { width: fit-content; margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; position: relative; }
    .closing-rays {
      width: 32px;
      height: 34px;
      position: absolute;
      inset-inline-start: -44px;
      inset-block-start: -21px;
      opacity: .68;
      background: var(--color-green);
      -webkit-mask: url("/qalam/assets/decorative elements/hand-drawn-vector-shapes-2026-02-24-00-34-19-utc/SVG and PNG/Element-rays.svg") center / contain no-repeat;
      mask: url("/qalam/assets/decorative elements/hand-drawn-vector-shapes-2026-02-24-00-34-19-utc/SVG and PNG/Element-rays.svg") center / contain no-repeat;
      pointer-events: none;
    }
    .closing-books { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: center; position: relative; z-index: 1; }
    .closing-book { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 22px 54px rgba(23, 63, 120, .18); }
    .closing-book:nth-child(1) { transform: translateY(24px) rotate(-3deg); }
    .closing-book:nth-child(2) { transform: translateY(-12px); }
    .closing-book:nth-child(3) { transform: translateY(20px) rotate(3deg); }
    html[dir="rtl"] .closing-book:nth-child(1) { transform: translateY(24px) rotate(3deg); }
    html[dir="rtl"] .closing-book:nth-child(3) { transform: translateY(20px) rotate(-3deg); }

    .site-footer {
      width: 100%;
      margin: 0;
      position: relative;
      isolation: isolate;
      color: var(--color-on-dark);
      background: var(--surface-light-base);
      padding: clamp(32px, 2vw, 36px) 0 0;
      overflow: hidden;
    }
    .footer-pencil {
      --pencil-blue: #0f5ba7;
      width: 100%;
      min-height: 254px;
      margin: 0;
      position: relative;
      z-index: 1;
      isolation: isolate;
      background:
        linear-gradient(90deg, rgba(255,255,255,.025), rgba(255,255,255,.07) 31%, rgba(255,255,255,.018) 64%, rgba(3,49,101,.06)),
        linear-gradient(180deg, #1768b2 0 17%, #1261ab 17% 47%, #0f5ba7 47% 64%, #0b529d 64% 100%);
      border-radius: 0;
      box-shadow: inset 0 1px 0 rgba(248, 248, 239, .17), 0 14px 34px rgba(23, 63, 120, .08);
    }
    .footer-pencil::after {
      content: "";
      height: 2px;
      position: absolute;
      z-index: 0;
      inset: 14% 5% auto 2%;
      background: linear-gradient(90deg, transparent, rgba(228,242,252,.2) 28%, rgba(228,242,252,.08) 67%, transparent);
      opacity: .72;
      pointer-events: none;
    }
    .footer-pencil-inner {
      width: min(100%, 96rem);
      min-height: inherit;
      margin-inline: auto;
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      padding: 24px clamp(34px, 3.6vw, 64px) 22px;
    }
    .footer-grid { width: 100%; display: grid; grid-template-columns: 1.42fr .82fr .88fr 1.35fr .76fr; gap: clamp(20px, 2.2vw, 38px); align-items: start; }
    .footer-brand { min-width: 0; }
    .footer-brand-lockup { min-height: 58px; display: flex; align-items: center; gap: 18px; }
    .footer-brand .brand-logo { width: 58px; height: auto; }
    .footer-brand p { max-width: 34ch; margin: 12px 0 0; color: rgba(248, 248, 239, .84); font-size: .8rem; line-height: 1.52; }
    .publisher-link { width: fit-content; display: block; padding-block: 2px; transition: opacity .2s ease, transform .2s ease; }
    .publisher-link:hover { opacity: .78; transform: translateY(-2px); }
    .publisher-link:active { transform: translateY(1px); }
    .publisher-link img { width: 86px; height: auto; }
    .footer-column { min-width: 0; }
    .footer-column h3 { margin: 0 0 11px; color: var(--color-on-dark); font: 700 .9rem/1.35 var(--head); }
    .footer-links { display: grid; gap: 5px; }
    .footer-links a, .footer-legal-button { width: fit-content; padding: 0; border: 0; color: rgba(248, 248, 239, .84); background: transparent; font-size: .8rem; line-height: 1.45; text-align: start; cursor: pointer; transition: color .35s cubic-bezier(.32,.72,0,1), transform .35s cubic-bezier(.32,.72,0,1); }
    .footer-links a:hover, .footer-legal-button:hover { color: var(--color-on-dark); transform: translateX(3px); }
    html[dir="rtl"] .footer-links a:hover, html[dir="rtl"] .footer-legal-button:hover { transform: translateX(-3px); }
    .footer-contact { color: rgba(248, 248, 239, .8); font-size: .76rem; line-height: 1.5; }
    .footer-contact address { margin: 0; font-style: normal; }
    .footer-contact p { margin: 0 0 7px; }
    .footer-contact p:last-child { margin-bottom: 0; }
    .footer-contact strong { display: block; color: rgba(248, 248, 239, .9); font-weight: 600; }
    .footer-contact a:hover { color: var(--color-on-dark); }
    .footer-address { unicode-bidi: isolate; }
    .footer-ltr { display: inline-block; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
    .footer-social { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .social-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
    .social-link { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(248, 248, 239, .42); border-radius: 50%; transition: background .2s ease, transform .2s ease; }
    .social-link:hover { background: rgba(248, 248, 239, .14); transform: translateY(-2px); }
    .social-link:active { transform: translateY(1px); }
    .social-link img { width: 14px; height: 14px; }
    .publisher-domain { display: inline-block; margin-top: 10px; color: rgba(248, 248, 239, .84); font-size: .7rem; line-height: 1.35; direction: ltr; unicode-bidi: isolate; }
    .publisher-domain:hover { color: var(--color-on-dark); }
    .footer-bottom { width: min(calc(100% - 48px), 90rem); min-height: 58px; margin-inline: auto; padding: 17px 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--color-text-muted); font-size: .76rem; line-height: 1.45; }
    .footer-copyright { unicode-bidi: plaintext; }

    .legal-dialog {
      width: min(720px, calc(100vw - 24px));
      height: 100dvh;
      max-height: 100dvh;
      margin: 0 0 0 auto;
      border-radius: 26px 0 0 26px;
      background: var(--color-surface);
    }
    html[dir="rtl"] .legal-dialog { margin: 0 auto 0 0; border-radius: 0 26px 26px 0; }
    .legal-dialog::backdrop { background: rgba(14, 34, 53, .52); backdrop-filter: blur(5px); }
    .legal-dialog-shell { min-height: 100%; display: grid; grid-template-rows: auto 1fr; }
    .legal-dialog-head { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 28px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); position: sticky; top: 0; z-index: 1; }
    .legal-dialog-head h2 { margin: 0; font: 700 clamp(1.4rem, 3vw, 2rem)/1.15 var(--head); letter-spacing: -.025em; }
    .legal-dialog-close { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--color-border-strong); border-radius: 50%; color: var(--color-text); background: transparent; font-size: 1.4rem; line-height: 1; cursor: pointer; }
    .legal-dialog-close:hover { background: var(--color-surface-subtle); }
    .legal-dialog-body { padding: 30px 28px 54px; overflow: auto; }
    .legal-dialog-body section + section { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--color-border); }
    .legal-dialog-body h3 { margin: 0 0 10px; font: 700 1.05rem/1.35 var(--head); }
    .legal-dialog-body p { max-width: 68ch; margin: 0 0 13px; color: var(--color-text-muted); font-size: .92rem; line-height: 1.7; }
    .legal-dialog-body a { color: var(--color-interactive); text-decoration: underline; text-underline-offset: 3px; }

    dialog {
      width: min(680px, calc(100vw - 28px));
      max-height: calc(100dvh - 28px);
      overflow: auto;
      border: 0;
      border-radius: 28px;
      padding: 0;
      color: var(--color-text);
      background: var(--color-surface);
      box-shadow: 0 35px 100px rgba(16,30,31,.28);
    }
    dialog::backdrop { background: rgba(20,34,35,.62); backdrop-filter: blur(4px); }
    .book-dialog-inner { display: grid; grid-template-columns: 220px 1fr; gap: 34px; padding: 34px; }
    .dialog-cover { aspect-ratio: 2167 / 2806; background: var(--dialog-color); position: relative; overflow: hidden; padding: 22px 18px; border: 1px solid rgba(32,39,43,.15); }
    .dialog-cover::before { content: attr(data-glyph); position: absolute; inset-inline-end: -8px; bottom: -58px; color: rgba(255,255,255,.45); font: 700 11rem/1 var(--font-arabic); }
    .dialog-cover strong { position: relative; z-index: 2; font: 700 1.7rem var(--head); }
    .dialog-number { position: absolute; left: 14px; bottom: 8px; z-index: 2; font: 700 5rem/1 var(--head); }
    html[dir="rtl"] .dialog-number { left: auto; right: 14px; }
    .dialog-content { padding-top: 4px; }
    .dialog-content .section-kicker { margin-bottom: 8px; }
    .dialog-content h2 { margin: 0; font: 700 2.3rem/1.15 var(--head); }
    .dialog-content p { color: var(--color-text-muted); line-height: 1.68; }
    .dialog-resources-title { margin: 22px 0 0; font: 700 .9rem/1.3 var(--head); }
    .dialog-list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 0; border-block-start: 1px solid var(--color-border); }
    .dialog-list li { padding: 9px 0; border-block-end: 1px solid var(--color-border); font-weight: 600; font-size: .86rem; }
    .dialog-actions { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; }
    .dialog-close { position: absolute; top: 15px; inset-inline-end: 15px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--color-surface-subtle); cursor: pointer; font-size: 1.2rem; }

    .path-stage h3 { line-height: 1.3; }
    .stat strong { font-variant-numeric: tabular-nums; }
    html[lang="ar"] .section-title,
    html[lang="ar"] .stats-intro h2,
    html[lang="ar"] .closing h2,
    html[lang="ar"] .dialog-content h2 { line-height: 1.3; letter-spacing: 0; }
    html[lang="ar"] .resource-group h3,
    html[lang="ar"] .path-stage h3,
    html[lang="ar"] .footer-aside h3 { line-height: 1.35; letter-spacing: 0; }

    .stat { grid-template-columns: 1fr; }
    .dialog-cover { width: 100%; height: auto; object-fit: contain; align-self: start; padding: 0; background: var(--color-surface); border-color: var(--color-border); }
    .dialog-cover::before, .dialog-cover strong, .dialog-number { display: none; }
    .footer-language button { appearance: none; width: fit-content; text-align: start; }

    @media (min-width: 1025px) {
      .pathway-rail { overflow: visible; }
    }

    @media (max-width: 1280px) {
      :root { --page: min(100% - 36px, 1050px); }
      .nav-wrap { grid-template-columns: minmax(100px, 1fr) auto minmax(100px, 1fr); }
      .main-nav { gap: 21px; }
      .nav-platform { display: none; }
      .hero { min-height: auto; }
      .hero-book-media { width: 74%; }
      .hero-pencil { right: -5%; width: min(57%, 450px); }
      html[dir="rtl"] .hero-pencil { right: auto; left: -5%; width: min(53%, 430px); }
      .stats-inner { grid-template-columns: 1.25fr repeat(4, 1fr); padding: 18px 0; }
      .stats-intro { grid-row: auto; }
      .stat:nth-child(4) { border-inline-start: 1px solid var(--color-border); }
    }

    @media (max-width: 1024px) {
      :root { --site-header-height: 70px; }
      .section { padding: 0; }
      .surface-content { padding: clamp(68px, 8vw, 104px) 0; }
      .global-story { height: auto; min-height: 600px; padding-block: 40px; }
      .global-header { width: min(640px, calc(100% - 24px)); }
      .site-header { backdrop-filter: none; }
      .nav-wrap { height: 70px; grid-template-columns: 1fr auto; }
      .main-nav {
        position: fixed;
        inset-block-start: 0;
        inset-inline-end: 0;
        width: min(390px, 100vw);
        height: 100dvh;
        max-height: 100dvh;
        background: var(--color-surface);
        padding: 115px 34px 40px;
        display: grid;
        align-content: start;
        gap: 24px;
        overflow-y: auto;
        overscroll-behavior: contain;
        opacity: 1;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(100%);
        transition: transform .24s cubic-bezier(.2,.8,.2,1), visibility 0s linear .24s;
        box-shadow: -20px 0 50px rgba(20,34,35,.14);
        z-index: 3;
      }
      html[dir="rtl"] .main-nav { transform: translateX(-100%); box-shadow: 20px 0 50px rgba(20,34,35,.14); }
      .main-nav.is-open, html[dir="rtl"] .main-nav.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; transition-delay: 0s; }
      .main-nav a { width: 100%; padding-block: 7px; text-align: start; font-size: 1.05rem; }
      .menu-button { display: inline-flex; position: relative; z-index: 4; }
      .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 1; border: 0; background: rgba(24,60,60,.24); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .24s ease, visibility .24s; }
      body.menu-open .nav-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }
      .hero { padding: 0; }
      .hero .surface-content { padding-block: 38px 50px; }
      .hero-layout { height: auto; min-height: 540px; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr; row-gap: 0; }
      .hero-copy { grid-column: 1 / span 6; grid-row: 1; max-width: 440px; padding: 0; }
      html[dir="rtl"] .hero-copy { grid-column: 7 / span 6; max-width: 430px; padding: 0; }
      .brand-lockup-title--latin { font-size: clamp(5rem, 10.2vw, 7rem); }
      html[lang="ar"] .brand-lockup { width: min(100%, 230px); }
      .hero-descriptor { margin-top: 17px; }
      .hero-slogan { font-size: clamp(1.25rem, 2.35vw, 1.7rem); }
      .hero-actions { margin-top: 20px; flex-direction: column; align-items: flex-start; }
      .hero-visual { grid-column: 5 / -1; grid-row: 1; min-height: 520px; }
      html[dir="rtl"] .hero-visual { grid-column: 1 / span 8; }
      .hero-book-media { inset: 3% auto 3% -5%; width: 78%; height: 94%; }
      html[dir="rtl"] .hero-book-media { inset: 3% -5% 3% auto; width: 78%; }
      .hero-pencil { inset: auto -7% 5% auto; width: min(57%, 390px); }
      html[dir="rtl"] .hero-pencil { inset: auto auto 5% -7%; width: min(53%, 370px); }
      .stats-inner { grid-template-columns: 1fr 1fr; }
      .stats-intro { grid-column: 1 / -1; grid-row: auto; padding: 0 0 22px; }
      .stat:nth-child(2), .stat:nth-child(4) { border-inline-start: 0; }
      .ecosystem-layout { grid-template-columns: 1fr; gap: 60px; }
      .ecosystem-copy { max-width: 760px; }
      .ecosystem-copy .section-title { max-width: 13ch; }
      .ecosystem-visual { width: min(780px, 100%); min-height: 600px; margin-inline: auto; }
      .pathway-layout { padding-block: 44px; }
      .curriculum-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr); gap: 40px; padding-block: 44px; }
      .curriculum-explorer { max-width: 400px; }
      .curriculum-sheet-frame { border-width: 8px; }
      .closing-panel { grid-template-columns: minmax(0, 1fr) minmax(280px, .64fr); gap: 42px; }
      .footer-pencil { width: 100%; min-height: 0; margin: 0; border-radius: 0; }
      .footer-pencil-inner { padding: 34px 40px 22px; gap: 28px; }
      .footer-grid { grid-template-columns: 1.1fr .9fr; gap: 28px 32px; }
      .footer-brand { grid-column: 1 / -1; }
      .footer-contact { grid-column: 1 / -1; }
      .footer-social { grid-column: 1 / -1; }
      .footer-bottom { width: min(calc(100% - 48px), 90rem); }
    }

    @media (max-width: 767px) {
      :root {
        --page: calc(100vw - 28px);
        --section-title-size: clamp(2rem, 9vw, 2.8rem);
        --site-header-height: 64px;
      }
      body { font-size: 15px; }
      .section { padding: 0; }
      .nav-wrap { height: 64px; }
      .brand-logo { width: 48px; height: 48px; }
      .nav-actions { gap: 4px; }
      .language-button { font-size: .76rem; }
      .hero { padding: 0; }
      .hero .surface-content { padding-block: 34px 38px; }
      .hero-layout { display: flex; height: auto; min-height: 0; flex-direction: column; align-items: stretch; gap: 8px; }
      .hero-copy, html[dir="rtl"] .hero-copy { order: 1; width: 100%; max-width: none; padding: 0; align-self: stretch; text-align: center; }
      .brand-lockup { margin-inline: auto; }
      .brand-lockup-title--latin { font-size: clamp(4.5rem, 21vw, 7.2rem); }
      html[lang="ar"] .brand-lockup { width: min(58vw, 215px); margin-inline: auto; }
      .surface--facts .surface-field { display: none; }
      .hero-descriptor { margin-top: 16px; font-size: .76rem; }
      html[lang="ar"] .hero-descriptor { margin-top: 10px; }
      .hero-slogan { margin-top: 7px; font-size: clamp(1.3rem, 6vw, 1.7rem); }
      .hero-actions { margin-top: 20px; gap: 8px; align-items: stretch; }
      .hero-actions .button { width: 100%; flex: none; }
      .hero-visual, html[dir="rtl"] .hero-visual { order: 2; width: 100%; height: clamp(500px, 135vw, 620px); min-height: 0; }
      .hero-book-media, html[dir="rtl"] .hero-book-media { inset: -2% -3% auto; width: 106%; height: clamp(260px, 76vw, 310px); margin: 0; }
      .hero-pencil, html[dir="rtl"] .hero-pencil { inset: auto -2% 0 auto; width: min(90%, 440px); max-width: none; margin: 0; transform: rotate(-1.5deg); }
      html[dir="rtl"] .hero-pencil { inset: auto auto 0 -2%; transform: rotate(1.5deg); }
      .stats { overflow: hidden; }
      .stats-inner { display: block; min-height: 0; padding-block: 34px 30px; }
      .stats-intro { padding: 0 8px 26px; }
      .stats-intro h2 { max-width: 18ch; margin-inline: auto; font-size: clamp(1.7rem, 8.2vw, 2.25rem); line-height: 1.12; text-align: center; }
      .stats-track {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(190px, 76vw);
        gap: 14px;
        margin-inline: -14px;
        padding: 2px 54px 12px 14px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-padding-inline: 14px;
        scroll-snap-type: inline mandatory;
        scrollbar-width: none;
      }
      html[dir="rtl"] .stats-track { padding: 2px 14px 12px 54px; }
      .stats-track::-webkit-scrollbar { display: none; }
      .stat,
      .stat:nth-child(2),
      .stat:nth-child(4) {
        min-height: 158px;
        display: flex;
        align-items: flex-end;
        padding: 24px;
        border: 1px solid rgba(23,63,120,.11);
        border-radius: var(--radius-panel);
        color: var(--color-navy);
        background: rgba(251,251,245,.92);
        box-shadow: 0 12px 28px rgba(23,63,120,.08);
        scroll-snap-align: start;
        scroll-snap-stop: always;
      }
      .stat:nth-child(even) { background: var(--color-blue-soft); }
      .stat > span { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: start; }
      .stat strong { color: var(--color-classroom-blue); font-size: clamp(2.65rem, 14vw, 3.7rem); line-height: .9; letter-spacing: -.055em; unicode-bidi: isolate; }
      .stat-label { max-width: 18ch; color: var(--text-muted-on-light); font-size: .66rem; line-height: 1.35; letter-spacing: .08em; }
      .stats-pagination { min-height: 24px; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; }
      .stats-pagination button { width: 8px; height: 8px; border: 0; border-radius: 50%; padding: 0; background: rgba(23,63,120,.24); cursor: pointer; transition: width .25s cubic-bezier(.32,.72,0,1), border-radius .25s ease, background-color .25s ease; }
      .stats-pagination button[aria-current="true"] { width: 26px; border-radius: 999px; background: var(--color-classroom-blue); }
      .audience-pair { grid-template-columns: 1fr; }
      .audience-note { padding: 20px 0; }
      html[dir="rtl"] .audience-note { padding: 20px 0; }
      .audience-note + .audience-note { padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid var(--color-border); }
      .ecosystem-visual { min-height: 450px; }
      .classroom-plate { width: 94%; }
      .ecosystem-cover { width: 26%; inset-inline-start: -2%; bottom: -14%; }
      .ecosystem-page { width: 51%; inset-inline-end: -1%; bottom: -17%; border-width: 5px; }
      .ecosystem-sequence { width: 94%; margin-top: 88px; font-size: .84rem; }
      .teacher-workflow { grid-template-columns: 1fr; grid-template-areas: "prepare" "teach" "practise" "assess"; }
      .resource-prepare { min-height: 310px; }
      .resource-teach { min-height: 600px; }
      .resource-practise { min-height: 310px; }
      .resource-assess { grid-template-columns: 1fr; gap: 26px; align-items: start; padding: 38px 34px; }
      .assess-icons { gap: 12px; }
      .assess-icon { width: 52px; height: 52px; }
      .pathway-topline { grid-template-columns: 1fr; gap: 16px; }
      .pathway-hint { max-width: 240px; margin: 0; }
      .pathway-rail { min-height: 452px; grid-auto-columns: 204px; gap: 24px; margin-top: 28px; }
      .pathway-rail::before { top: 238px; }
      .path-stage { grid-template-rows: auto 190px auto auto; }
      .path-stage:nth-child(1) { --stage-lift: 52px; }
      .path-stage:nth-child(2) { --stage-lift: 39px; }
      .path-stage:nth-child(3) { --stage-lift: 26px; }
      .path-stage:nth-child(4) { --stage-lift: 13px; }
      .path-stage:nth-child(5) { --stage-lift: 0px; }
      .path-stage::after { top: 225px; }
      .stage-cover-stack { width: 172px; height: 190px; }
      .stage-book { width: 120px; }
      .path-stage[data-level="B2"] .stage-cover-stack { width: 120px; }
      .curriculum-layout { min-height: auto; grid-template-columns: 1fr; gap: 36px; padding-block: 56px; }
      .curriculum-explorer { max-width: 430px; justify-self: start; }
      .curriculum-meta { margin-bottom: 14px; }
      .curriculum-sheet-frame { width: min(100%, 430px); border-width: 6px; }
      .curriculum-magnifier { --magnifier-size: 152px; }
      .global-story { min-height: 660px; padding-block: 34px 28px; }
      .global-header { width: 100%; }
      .global-header .section-title { max-width: 100%; }
      .global-copy { margin-top: 11px; font-size: .94rem; line-height: 1.58; }
      .global-map-stage { display: contents; }
      .surface--global .surface-field, .surface--global .surface-line, .surface--global .surface-light { display: none; }
      .global-map { width: 100vw; height: 100%; position: absolute; inset-block: 0; left: 50%; background: #0e315c; transform: translateX(-50%); }
      .global-map::before { background: linear-gradient(180deg, rgba(7,32,62,.2) 0%, rgba(7,32,62,.38) 48%, rgba(7,32,62,.7) 100%); }
      .global-map::after { box-shadow: inset 0 0 56px rgba(4,18,35,.28); }
      .global-map img { object-position: 46% center; opacity: .25; }
      .global-register { width: 100%; margin-top: auto; position: relative; inset: auto; grid-template-columns: 1fr; transform: none; }
      .global-register-link { justify-content: flex-start; padding: 12px 0; border-inline-end: 0; border-block-end: 1px solid rgba(248, 248, 239, .22); text-align: start; }
      .global-register-link:last-child { border-block-end: 0; }
      .closing { padding-bottom: 0; }
      .closing-panel { min-height: 0; grid-template-columns: 1fr; gap: 64px; padding: 76px 0 24px; border-radius: 0; }
      .closing-books { width: min(470px, 94%); justify-self: center; }
      .closing-rays { inset-inline-start: auto; inset-inline-end: -40px; }
      .footer-pencil { width: 100%; border-radius: 0; }
      .footer-pencil-inner { padding: 28px 24px 20px; gap: 24px; }
      .footer-grid { grid-template-columns: 1.1fr .9fr; gap: 24px 20px; }
      .footer-brand { grid-column: 1 / -1; }
      .footer-contact { grid-column: 1 / -1; }
      .footer-social { grid-column: 1 / -1; }
      .footer-bottom { flex-direction: column; gap: 7px; }
      .legal-dialog { width: min(680px, calc(100vw - 12px)); border-radius: 20px 0 0 20px; }
      html[dir="rtl"] .legal-dialog { border-radius: 0 20px 20px 0; }
      .book-dialog-inner { grid-template-columns: 128px 1fr; gap: 18px; padding: 28px 18px 24px; }
      .dialog-content h2 { font-size: 1.6rem; }
      .dialog-content p { font-size: .83rem; }
      .dialog-list li { font-size: .78rem; }
      .dialog-actions .button { width: 100%; }
    }

    @media (max-width: 640px) {
      :root { --container-width: calc(100vw - 28px); }
      html:not([lang="ar"]) .display-heading-phrase { white-space: normal; }
      .section-surface { grid-template-columns: 14px minmax(0, 1fr) 14px; }
      .surface-content { padding: 64px 0; }
      .pathway-layout, .curriculum-layout { padding-block: 48px; }
      .hero .surface-content { padding-block: 32px 36px; }
      .surface-line { opacity: .1; }
      .surface--hero[data-surface="dark"],
      html[dir="rtl"] .surface--hero[data-surface="dark"] {
        --hero-gradient-focus-x: 50%;
        --hero-gradient-counter-x: 50%;
        --hero-gradient-focus-y: 72%;
      }
      .surface--hero .surface-field { inset: -24% -52%; opacity: .86; }
      .surface--hero .surface-line { inset: -28% -58%; opacity: .7; }
      .surface--hero .surface-light { inset: -34% -64%; opacity: .54; }
      .surface--ecosystem .surface-field { width: 72%; }
      .surface--teachers .surface-field { width: 88%; }
      .closing-pattern { width: 96%; opacity: .1; }
      .closing-actions { width: 100%; }
      .closing-actions .button { width: 100%; }
      .closing-rays { display: none; }
      .site-footer { padding-block: 22px; }
      .footer-pencil { width: 100%; border-radius: 0; }
      .footer-pencil-inner { padding: 22px 20px 18px; gap: 16px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
      .footer-brand-lockup { gap: 14px; }
      .footer-brand .brand-logo { width: 54px; }
      .publisher-link img { width: 70px; }
      .footer-brand p { margin-top: 8px; font-size: .72rem; }
      .footer-contact { grid-column: 1 / -1; }
      .footer-social { grid-column: 1 / -1; }
      .legal-dialog-head { min-height: 76px; padding: 18px 20px; }
      .legal-dialog-body { padding: 24px 20px 44px; }
      .ecosystem-layout { gap: 42px; }
      .platform-intro .surface-content { padding-block: 58px; }
      .ecosystem-visual { min-height: 380px; }
      .classroom-plate { width: 100%; }
      .ecosystem-sequence { width: 100%; margin-top: 76px; grid-template-columns: 1fr; font-size: .84rem; }
      .ecosystem-sequence span { padding: 8px 0; border-inline-start: 0; border-top: 1px solid var(--color-border); }
      .ecosystem-sequence span:first-child { border-top: 0; }
      .curriculum-intro { grid-template-columns: 1fr; gap: 26px; }
      .curriculum-cover { width: 132px; justify-self: start; }
      html[dir="rtl"] .curriculum-cover { justify-self: end; }
      .curriculum-meta { grid-template-columns: 1fr 1fr; gap: 8px 18px; }
      .curriculum-controls { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-inline: -14px; padding-inline: 14px; scrollbar-width: none; }
      .curriculum-controls::-webkit-scrollbar { display: none; }
      .curriculum-view-button { flex: 0 0 auto; }
      .curriculum-sheet-frame { width: min(100%, 430px); }
      .curriculum-magnifier { --magnifier-size: 132px; }
      .teacher-workflow { margin-top: 38px; }
      .resource-prepare, .resource-practise { grid-template-columns: 1fr; padding: 22px; }
      .resource-prepare img { height: 190px; min-height: 0; }
      .resource-teach { min-height: 0; grid-template-rows: 230px auto; }
      .resource-teach figure { padding: 20px 10px 4px; }
      .resource-teach figure img { width: 106%; }
      .resource-teach .resource-content { padding: 40px 24px 32px; }
      .resource-teach .resource-list { grid-template-columns: 1fr; }
      .resource-practise img { height: 230px; min-height: 0; }
      .resource-practise .resource-content, html[dir="rtl"] .resource-practise .resource-content { padding: 10px 4px 6px; }
      .resource-assess { padding: 32px 24px; }
      .resource-assess .resource-list { grid-template-columns: 1fr; }
      .site-footer > .container { width: calc(100% - 28px); margin-inline: auto; }
    }

    @media (hover: none), (pointer: coarse) {
      .curriculum-sheet-frame { cursor: default; }
      .curriculum-magnifier { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
      .surface-field, .surface-line, .surface-light { transform: none !important; }
      .pathway-rail { scroll-snap-type: none; }
      .curriculum-cover img { transform: none !important; }
      .dark-section-title::after { opacity: 1; transform: scaleX(1); }
    }