/* ==========================================================================
   Halqa — halqa.ly
   Hand-written CSS. No framework, no build step, no CDN.
   Written with logical properties throughout so the Arabic (RTL) layout
   mirrors automatically. Do not add left/right properties — use
   inline-start / inline-end instead.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted — nothing is fetched from Google at runtime)
   The Arabic faces carry a unicode-range, so a visitor reading the English
   site never downloads them. They arrive only when Arabic glyphs render.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/sourceserif4-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/notosansarabic-var.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/amiri-arabic-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/amiri-arabic-700.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* --------------------------------------------------------------------------
   2. Tokens
   Every colour pair used for text has been checked against WCAG AA (4.5:1).
   -------------------------------------------------------------------------- */

:root {
  /* Brand — taken from the logo mark, #006071 */
  --brand-900: #03414c;
  --brand-800: #00505e;
  --brand: #006071;
  --brand-600: #0a7a8c;
  --brand-500: #1595a8;
  --brand-200: #b9e2e8;
  --brand-100: #dcf0f2;
  --brand-50: #f1f8f9;

  /* Gold accent. --gold-ink is the only gold safe for text. */
  --gold-ink: #8a5406;
  --gold: #e0a020;
  --gold-border: #f0d9a8;
  --gold-50: #fdf6e9;

  /* Ink */
  --ink: #0e2429;   /* headings           — 14.6:1 on white */
  --text: #3a5157;  /* body               —  8.2:1 on white */
  --muted: #5c7176; /* meta, small labels —  5.1:1 on white */

  --surface: #ffffff;
  --surface-2: #fbfcfc;
  --page: #f6f8f8;
  --line: #e2eaea;
  --line-strong: #cfdcdd;

  /* Translucent surfaces. These were hardcoded rgba(255,255,255,…) values
     until dark mode arrived; as tokens they can flip with the theme.
     --hero-fade must be the page colour at zero alpha rather than the keyword
     `transparent`, which fades through grey in a gradient. */
  --header-bg: rgba(255, 255, 255, 0.92);
  --chip-bg: rgba(255, 255, 255, 0.95);
  --hero-fade: rgba(241, 248, 249, 0);

  /* Anything sitting on solid brand colour: the primary button, the step
     numbers, the active half of the language toggle. In dark mode the fill
     becomes light and the label becomes dark, so both are tokens. */
  --btn-bg: #006071;
  --btn-bg-hover: #00505e;
  --btn-fg: #ffffff;

  /* The contact band and the footer are dark in *both* themes, so they carry
     their own colours instead of borrowing from the brand scale — which
     inverts, and would have turned them white. */
  --contact-from: #03414c;
  --contact-to: #00505e;
  --contact-text: #cfe6ea;
  --contact-muted: #b9d7dc;
  --footer-bg: #03414c;
  --footer-text: #9dc2c8;

  /* Opacity of the big Arabic word marks on the course cards */
  --glyph-opacity: 0.55;

  /* Third-party brand colours, used only as backgrounds under white text */
  --whatsapp: #1da851;
  --telegram: #0284c7;
  --preply: #c2185b;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(6, 39, 44, 0.06), 0 1px 3px rgba(6, 39, 44, 0.04);
  --shadow: 0 4px 16px -4px rgba(6, 39, 44, 0.1), 0 1px 3px rgba(6, 39, 44, 0.05);
  --shadow-lg: 0 18px 40px -18px rgba(6, 39, 44, 0.22);

  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-arabic-display: 'Amiri', 'Traditional Arabic', 'Sakkal Majalla', serif;

  /* Fluid type scale */
  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
  --step-2: clamp(1.3125rem, 1.22rem + 0.45vw, 1.5rem);
  --step-3: clamp(1.625rem, 1.42rem + 0.9vw, 2.125rem);
  --step-4: clamp(2rem, 1.6rem + 1.9vw, 3rem);

  --container: 1120px;
  --gutter: clamp(1rem, 0.7rem + 1.5vw, 2rem);
  --header-h: 68px;
}

:root {
  color-scheme: light;
}

/* Arabic swaps the type stack. Noto Sans Arabic for UI, Amiri for display. */
:root[lang='ar'] {
  --font-display: 'Amiri', 'Traditional Arabic', Georgia, serif;
  --font-ui: 'Noto Sans Arabic', 'Segoe UI', system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   2b. Dark theme
   Only tokens change here — not one rule further down this file knows which
   theme is active, which is what keeps the two in sync.

   `data-theme` is written onto <html> by the inline script in the <head>,
   before the first paint: the visitor's saved choice if they have made one,
   otherwise whatever their operating system asks for. With JavaScript off
   the site stays in light mode and the toggle is hidden.

   The brand scale *inverts*: --brand-50 becomes the darkest tint and
   --brand-900 the lightest. That is deliberate, and it is why rules like
   `color: var(--brand-900)` on a `--brand-100` chip stay readable in both
   themes without being touched.
   -------------------------------------------------------------------------- */

:root[data-theme='dark'] {
  color-scheme: dark;

  --brand-900: #d6f2f7;
  --brand-800: #a9e4ee;
  --brand: #4fbacb;
  --brand-600: #6ecbd9;
  --brand-500: #3aa9bb;
  --brand-200: #1c4c56;
  --brand-100: #12333a;
  --brand-50: #0e272c;

  --gold-ink: #f0c177;
  --gold: #e5aa38;
  --gold-border: #4a3a1c;
  --gold-50: #241d10;

  --ink: #f1f7f8;
  --text: #c6d8db;
  --muted: #93aeb3;

  --surface: #10262b;
  --surface-2: #0e2126;
  --page: #0b1a1e;
  --line: #1d3a41;
  --line-strong: #2a5058;

  --header-bg: rgba(11, 26, 30, 0.9);
  --chip-bg: rgba(16, 38, 43, 0.94);
  --hero-fade: rgba(11, 26, 30, 0);

  --btn-bg: #4fbacb;
  --btn-bg-hover: #7fd2df;
  --btn-fg: #06222a;

  --contact-from: #061518;
  --contact-to: #0c2830;
  --footer-bg: #061518;

  --glyph-opacity: 0.8;

  /* A shadow tinted with the brand colour disappears on a dark ground */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 18px 40px -18px rgba(0, 0, 0, 0.75);
}

/* --------------------------------------------------------------------------
   3. Reset & base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background-color: var(--page);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.011em;
  text-wrap: balance;
}

/* Amiri sits small on the em and needs a touch more line height */
:root[lang='ar'] h1,
:root[lang='ar'] h2,
:root[lang='ar'] h3,
:root[lang='ar'] h4 {
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 700;
}

h1 {
  font-size: var(--step-4);
}
h2 {
  font-size: var(--step-3);
}
h3 {
  font-size: var(--step-2);
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--brand-800);
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

[hidden] {
  display: none !important;
}

/* Base size for every sprite icon. Each <symbol> carries its own fill/stroke,
   so this only has to handle the box. Context rules below override it. */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

:is(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection {
  background: var(--brand-200);
  color: var(--ink);
}

.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: 1rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
}

.skip-link:focus {
  inset-block-start: 0;
  color: var(--btn-fg);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: 760px;
}

.section {
  padding-block: clamp(3.25rem, 2rem + 5vw, 6rem);
}

.section--tint {
  background: linear-gradient(180deg, var(--surface) 0%, var(--brand-50) 100%);
  border-block: 1px solid var(--line);
}

.section--surface {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

.section-head {
  max-width: 60ch;
  margin-block-end: clamp(2rem, 1.4rem + 2vw, 3rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: block;
  margin-block-end: 0.75rem;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-600);
}

:root[lang='ar'] .eyebrow {
  letter-spacing: 0;
  text-transform: none;
}

.lede {
  margin-block-start: 1rem;
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--text);
}

.grid {
  display: grid;
  gap: clamp(1rem, 0.75rem + 1vw, 1.75rem);
}

/* --------------------------------------------------------------------------
   5. Buttons, badges, chips
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.8rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn .icon {
  flex: none;
  width: 1.15em;
  height: 1.15em;
}

.btn--primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--shadow);
}

.btn--primary:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-fg);
  box-shadow: var(--shadow-lg);
}

.btn--ghost {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--brand-900);
}

.btn--ghost:hover {
  border-color: var(--brand);
  color: var(--brand-800);
  background: var(--brand-50);
}

.btn--whatsapp {
  background: var(--whatsapp);
  color: #fff;
}
.btn--whatsapp:hover {
  background: #179245;
  color: #fff;
}

.btn--telegram {
  background: var(--telegram);
  color: #fff;
}
.btn--telegram:hover {
  background: #0369a1;
  color: #fff;
}

.btn--preply {
  background: var(--preply);
  color: #fff;
}
.btn--preply:hover {
  background: #9f1349;
  color: #fff;
}

.btn--block {
  width: 100%;
}

.btn--sm {
  padding: 0.6rem 1.05rem;
  font-size: var(--step--1);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Status badge. Never colour alone — each carries a dot and a word. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.3rem 0.7rem;
  border: 1px solid;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.badge::before {
  content: '';
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.badge--live {
  background: var(--brand-100);
  border-color: var(--brand-200);
  color: var(--brand-900);
}

.badge--live::before {
  animation: pulse-dot 2.4s ease-in-out infinite;
}

.badge--soon {
  background: var(--gold-50);
  border-color: var(--gold-border);
  color: var(--gold-ink);
}

.badge--open {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--muted);
}

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: var(--header-bg);
  border-block-end: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}

.brand__mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex: none;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand__name-ar {
  font-family: var(--font-arabic-display);
  font-size: 1.35rem;
  color: var(--brand);
  line-height: 1;
}

/* Below 375px the brand, the two toggles and the menu button stop fitting on
   one line. The Arabic wordmark is the decorative part, so it goes first —
   it survives on a 375px iPhone, and drops on a 320px screen. */
@media not all and (min-width: 375px) {
  .brand__name-ar {
    display: none;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 0.3rem + 1.1vw, 1.75rem);
}

.nav__link {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  padding-block: 0.4rem;
  border-block-end: 2px solid transparent;
  white-space: nowrap;
}

.nav__link:hover {
  color: var(--brand);
  border-color: var(--brand-200);
}

.nav__link[aria-current='true'] {
  color: var(--brand-900);
  border-color: var(--brand);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}

/* Language toggle */
.lang-toggle {
  display: inline-flex;
  padding: 2px;
  background: var(--brand-50);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.lang-toggle button {
  padding: 0.35rem 0.7rem;
  border: 0;
  background: transparent;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.2;
}

.lang-toggle button[aria-pressed='true'] {
  background: var(--btn-bg);
  color: var(--btn-fg);
}

/* Theme toggle. Which icon shows is pure CSS, driven by the data-theme
   attribute, so it cannot fall out of step with the actual theme. */
.icon-btn--theme {
  width: 42px;
  height: 42px;
}

.theme-toggle__sun {
  display: none;
}

:root[data-theme='dark'] .theme-toggle__sun {
  display: block;
}

:root[data-theme='dark'] .theme-toggle__moon {
  display: none;
}

/* Without JavaScript the button could not do anything, so it is not offered. */
html:not(.js) .theme-toggle {
  display: none;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--brand-900);
}

.nav-toggle .icon {
  width: 22px;
  height: 22px;
}

.nav-toggle__close {
  display: none;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__open {
  display: none;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__close {
  display: block;
}

@media not all and (min-width: 980px) {
  .nav-toggle {
    display: inline-flex;
  }

  .header__nav {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
    background: var(--surface);
    border-block-end: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
  }

  .header__nav[hidden] {
    display: none;
  }

  .nav__link {
    padding-block: 0.85rem;
    border-block-end: 1px solid var(--line);
    font-size: 1.0625rem;
  }

  .nav__link:hover,
  .nav__link[aria-current='true'] {
    border-color: var(--line);
  }

  .header__nav .btn {
    margin-block-start: 1rem;
  }

  .header__cta-desktop {
    display: none;
  }
}

@media (min-width: 980px) {
  .header__nav .btn {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(
      110% 80% at 85% 0%,
      var(--brand-50) 0%,
      var(--hero-fade) 60%
    ),
    var(--surface);
  border-block-end: 1px solid var(--line);
}

.hero__inner {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3rem);
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

/* The Arabic wordmark sits above the headline as a bilingual signature.
   Amiri renders small on the em, so it is sized in absolute terms rather
   than relative to the h1. */
.hero__title .hero__title-ar {
  display: block;
  margin-block-end: 0.15em;
  font-family: var(--font-arabic-display);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--brand-600);
  letter-spacing: 0;
}

.hero__sub {
  margin-block-start: 1.25rem;
  max-width: 48ch;
  font-size: var(--step-1);
  color: var(--text);
}

.hero .btn-row {
  margin-block-start: 2rem;
}

.hero__note {
  margin-block-start: 1rem;
  font-size: var(--step--1);
  color: var(--muted);
}

/* Portrait */
.hero__figure {
  position: relative;
  margin: 0;
  justify-self: center;
  max-width: 380px;
  width: 100%;
}

.hero__portrait {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  background: var(--brand-50);
}

.hero__rating {
  position: absolute;
  inset-block-end: -14px;
  inset-inline-start: -14px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero__rating strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--ink);
  line-height: 1;
}

.hero__rating span {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.3;
}

/* Trust strip */
.trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-block-end: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

@media (min-width: 640px) {
  .trust {
    grid-template-columns: repeat(4, 1fr);
  }
}

.trust__item {
  padding: 0.95rem 1rem;
  background: var(--surface);
  text-align: center;
}

.trust__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--brand);
  line-height: 1.1;
}

.trust__label {
  display: block;
  margin-block-start: 0.15rem;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease,
    transform 0.2s ease;
}

.card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--brand-50);
  border-block-end: 1px solid var(--line);
  overflow: hidden;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Shown when no photo is supplied for a course yet */
.card__media--glyph {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
}

.card__glyph {
  font-family: var(--font-arabic-display);
  font-size: clamp(2.75rem, 6vw, 3.75rem);
  color: var(--brand);
  opacity: var(--glyph-opacity);
  line-height: 1;
  text-align: center;
  padding-inline: 0.5rem;
}

/* A whole phrase rather than a single word — it needs to come down a size or
   it collides with the card edges. */
.card__glyph--long {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
}

.card__badge {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  background: var(--chip-bg);
  backdrop-filter: blur(4px);
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.75rem;
  padding: 1.25rem;
}

.card__title {
  font-size: var(--step-1);
}

.card__text {
  font-size: var(--step--1);
  color: var(--text);
  line-height: 1.6;
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.85rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.card__meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.card__meta .icon {
  width: 0.95em;
  height: 0.95em;
  flex: none;
  color: var(--brand-600);
}

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-start: auto;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--line);
}

.price {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.3;
}

.price strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
}

/* Course grid */
.courses-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 265px), 1fr));
}

/* --------------------------------------------------------------------------
   9. Now-running / featured pair
   -------------------------------------------------------------------------- */

.featured {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.featured__card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.featured__card--live {
  border-color: var(--brand-200);
  box-shadow: 0 0 0 4px var(--brand-50), var(--shadow-sm);
}

.featured__card--soon {
  border-color: var(--gold-border);
  box-shadow: 0 0 0 4px var(--gold-50), var(--shadow-sm);
}

.featured__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.featured__title {
  font-size: var(--step-2);
}

.featured__list {
  display: grid;
  gap: 0.5rem;
  font-size: var(--step--1);
}

.featured__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.featured__list .icon {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  margin-block-start: 0.28em;
  color: var(--brand-600);
}

/* --------------------------------------------------------------------------
   10. Split panels (groups vs private, about)
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  align-items: start;
}

@media (min-width: 880px) {
  .split--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .split--about {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.panel {
  padding: clamp(1.35rem, 1rem + 1.2vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  height: 100%;
}

.panel__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-block-end: 1rem;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-sm);
  color: var(--brand);
}

.panel__icon .icon {
  width: 22px;
  height: 22px;
}

.panel h3 {
  margin-block-end: 0.5rem;
}

.check-list {
  display: grid;
  gap: 0.7rem;
  margin-block-start: 1.1rem;
  font-size: var(--step--1);
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.check-list .icon {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  margin-block-start: 0.25em;
  color: var(--brand-600);
}

/* Credentials */
.creds {
  display: grid;
  gap: 0.9rem;
  margin-block-start: 1.5rem;
}

.creds li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-block-end: 0.9rem;
  border-block-end: 1px solid var(--line);
}

.creds li:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}

.creds .icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-block-start: 0.2em;
  color: var(--brand);
}

.creds strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

.creds span {
  font-size: var(--step--1);
  color: var(--muted);
}

.about__figure {
  margin: 0;
}

.about__figure img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.about__figure figcaption {
  margin-block-start: 0.75rem;
  font-size: var(--step--1);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   11. Steps
   -------------------------------------------------------------------------- */

.steps {
  counter-reset: step;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

.step {
  position: relative;
  padding: 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-block-end: 0.9rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}

.step h3 {
  font-size: var(--step-1);
  margin-block-end: 0.4rem;
}

.step p {
  font-size: var(--step--1);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   12. Gallery + lightbox
   -------------------------------------------------------------------------- */

.gallery {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.gallery__item {
  margin: 0;
}

.gallery__btn {
  display: block;
  width: 100%;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: start;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.gallery__btn:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

.gallery__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--brand-50);
  overflow: hidden;
}

/* A wide item — a screenshot or a slide rather than a 4:3 photo. It takes two
   columns and keeps its own proportions, so nothing is cropped away.
   The column span waits for 700px, below which the grid is a single column and
   spanning two would force an extra column and scroll the page sideways. */
@media (min-width: 700px) {
  .gallery__item--wide {
    grid-column: span 2;
  }
}

.gallery__item--wide .gallery__frame {
  aspect-ratio: 1911 / 918;
}

.gallery__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gallery__btn:hover .gallery__frame img {
  transform: scale(1.03);
}

.gallery__zoom {
  position: absolute;
  inset-block-end: 0.6rem;
  inset-inline-end: 0.6rem;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--chip-bg);
  border-radius: 50%;
  color: var(--brand-900);
  box-shadow: var(--shadow-sm);
}

.gallery__zoom .icon {
  width: 17px;
  height: 17px;
}

.lightbox {
  width: min(94vw, 1100px);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 30px 80px -20px rgba(6, 39, 44, 0.6);
  overflow: hidden;
}

.lightbox::backdrop {
  background: rgba(6, 39, 44, 0.82);
  backdrop-filter: blur(3px);
}

.lightbox__img {
  width: 100%;
  max-height: calc(92vh - 84px);
  object-fit: contain;
  background: #06272c;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-block-start: 1px solid var(--line);
}

.lightbox__cap {
  font-size: var(--step--1);
  color: var(--text);
}

.lightbox__cap strong {
  display: block;
  color: var(--ink);
}

.lightbox__nav {
  display: flex;
  gap: 0.4rem;
  flex: none;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--brand-900);
}

.icon-btn:hover {
  background: var(--brand-50);
  border-color: var(--brand);
}

.icon-btn .icon {
  width: 20px;
  height: 20px;
}

/* Arrows point the other way in RTL */
[dir='rtl'] .icon-btn--prev .icon,
[dir='rtl'] .icon-btn--next .icon {
  transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   13. Reviews
   -------------------------------------------------------------------------- */

.reviews {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

.review {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.stars {
  display: inline-flex;
  gap: 2px;
  color: var(--gold);
}

.stars .icon {
  width: 1.05rem;
  height: 1.05rem;
}

.review blockquote {
  margin: 0;
  font-size: var(--step-0);
  color: var(--text);
  line-height: 1.62;
}

.review figcaption {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-block-start: auto;
  padding-block-start: 0.85rem;
  border-block-start: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--muted);
}

.review figcaption strong {
  color: var(--ink);
  font-size: 0.9375rem;
}

.avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  background: var(--brand-100);
  border-radius: 50%;
  color: var(--brand-900);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
}

.verified {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.75rem;
  color: var(--muted);
}

.verified .icon {
  width: 1em;
  height: 1em;
  color: var(--brand-600);
}

/* --------------------------------------------------------------------------
   14. Gift panel
   -------------------------------------------------------------------------- */

.gift {
  position: relative;
  overflow: hidden;
  padding: clamp(1.6rem, 1.2rem + 2vw, 2.75rem);
  background: linear-gradient(135deg, var(--gold-50) 0%, var(--surface) 70%);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.gift__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 1.1rem;
  background: var(--surface);
  border: 1px solid var(--gold-border);
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
}

.gift p {
  max-width: 58ch;
  margin-inline: auto;
  margin-block-start: 0.85rem;
}

.gift__mark {
  display: inline-block;
  margin-block-start: 1.25rem;
  padding: 0.45rem 1rem;
  background: var(--surface);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gold-ink);
}

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */

.faq {
  display: grid;
  gap: 0.75rem;
}

.faq__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq__item[open] {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q .icon {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--brand);
  transition: transform 0.2s ease;
}

.faq__item[open] .faq__q .icon {
  transform: rotate(45deg);
}

.faq__a {
  padding: 0 1.25rem 1.25rem;
  font-size: var(--step-0);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   16. Contact + footer
   -------------------------------------------------------------------------- */

.contact {
  background: linear-gradient(180deg, var(--contact-from) 0%, var(--contact-to) 100%);
  color: var(--contact-text);
}

.contact h2,
.contact .eyebrow {
  color: #fff;
}

.contact .lede {
  color: var(--contact-muted);
}

.contact__grid {
  display: grid;
  gap: 0.9rem;
  margin-block-start: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.contact__card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  color: #fff;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    transform 0.18s ease;
}

.contact__card:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  transform: translateY(-2px);
}

.contact__card-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.14);
}

.contact__card-icon .icon {
  width: 22px;
  height: 22px;
}

.contact__card strong {
  display: block;
  font-size: 1.0625rem;
  line-height: 1.3;
}

.contact__card span {
  display: block;
  font-size: 0.8125rem;
  color: var(--contact-muted);
}

.contact__note {
  margin-block-start: 1.5rem;
  font-size: var(--step--1);
  color: var(--contact-muted);
}

.footer {
  padding-block: 2.25rem;
  background: var(--footer-bg);
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--footer-text);
  font-size: 0.875rem;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer a {
  color: var(--contact-text);
}

.footer a:hover {
  color: #fff;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
}

/* --------------------------------------------------------------------------
   17. Reveal on scroll
   The initial hidden state is scoped to html.js, so with JavaScript blocked
   or broken every section is simply visible. Motion is dropped entirely for
   anyone who asks for reduced motion.
   -------------------------------------------------------------------------- */

html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  html.js .reveal {
    opacity: 1;
    transform: none;
  }

  .card:hover,
  .gallery__btn:hover,
  .contact__card:hover {
    transform: none;
  }
}

/* Print — a student may print the course list */
@media print {
  .header,
  .contact,
  .gallery__zoom,
  .btn {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}