/* =============================================================================
   المعهد الأوليمبي الدولي لعلوم الرياضة
   Design system — "Premium Sports-Tech"
   Single stylesheet for every page. RTL-first (logical properties throughout).
   ---------------------------------------------------------------------------
   0.  Tokens
   1.  Reset & base
   2.  Typography & section headers
   3.  Buttons, pills, badges
   4.  Glass surfaces & cards
   5.  Header (topbar + nav + mobile drawer)
   6.  Hero
   7.  Stats strip & counters
   8.  Marquee
   9.  Course cards & grids
   10. Categories
   11. Features
   12. Instructors
   13. Testimonials carousel
   14. CTA banner
   15. Footer
   16. Page hero (inner pages)
   17. Filter tabs
   18. Course detail page
   19. About page
   20. Contact page & forms
   21. Reveal animations & utilities
   22. Responsive
   ========================================================================== */

/* ------------------------------------------------------------------ 0. TOKENS
   ---------------------------------------------------------------------------
   BRAND PALETTE — WHITE · BLUE · TURQUOISE.  There is no gold in this design.
   ---------------------------------------------------------------------------
   An earlier pass took its accent from a `--cv-accent: #C8A84E` found in the
   live site's CSS. That was wrong: the institute does not use gold. The values
   below were re-derived by sampling the institute's OWN LOGO ARTWORK (the
   eagle-and-rings shield) and counting painted area:

     #FFFFFF  white      35%   the ground
     #30BEF0  cyan       29%   the dominant brand colour
     #00367C  navy        4%   the eagle and the wordmark
     #00B4AC  turquoise   1%   the arc around the shield

   THE ONE RULE THAT SHAPES EVERYTHING BELOW
     Brand cyan measures 2.15:1 on white and turquoise 2.58:1 — both fail WCAG
     AA badly as text on a light ground. So each has TWO tokens, and they are
     not interchangeable:
       --cyan    /  --turq      the real brand colour, for FILLS and GRAPHICS
       --cyan-fg /  --turq-fg   a darkened variant, for TEXT
     On the DARK theme this inverts: against deep navy the brand colours are
     bright (cyan is 8.3:1), so there they are used directly as text.

   DISTRIBUTION — see the long note in the :root block below. Short version:
     white = the ground · navy = every repeated element · cyan = the accent
     graphic · turquoise = proof and achievement, used least.

   TWO THEMES
     Every colour is a token, so the same markup serves both:
       :root                  → LIGHT (white) — the default
       [data-theme="dark"]    → DARK  (deep navy ink)
     The toggle lives in the header and remembers the choice in localStorage.
   All text colours in BOTH themes are WCAG-AA checked against their own base.
   ------------------------------------------------------------------------ */

/* ============================ LIGHT THEME (default) =========================
   PALETTE: white · blue · turquoise. No gold anywhere.

   Every brand value below was SAMPLED from the institute's own logo artwork
   (the eagle-and-rings shield), measured by painted area:

     white      #ffffff    35% of the artwork
     cyan       #30bef0    29%  ← the dominant brand colour
     navy       #00367c     4%  ← the eagle and the wordmark
     turquoise  #00b4ac     1%  ← the arc around the shield

   HOW THEY ARE DISTRIBUTED (this is the part that matters)

     White does the most work and is almost the only thing you notice: it is
     the ground, and roughly three quarters of the painted page.

     NAVY is the workhorse. All body text, all headings, and the primary
     button. It is the calmest of the three, which is why it gets the elements
     that repeat most — a page whose most-repeated colour is its loudest one
     always looks cheap.

     CYAN is the accent GRAPHIC, not an accent colour for text. At #30bef0 it
     measures 2.15:1 on white, so it can never carry small text — but it is
     superb as a fill, a rule, an underline or a shape. So: the eyebrow rule,
     the active-tab underline, the rotating emblem, chip fills, hover borders,
     the "الأكثر طلباً" badge. When cyan needs to BE text, --cyan-fg is the
     darkened, AA-passing version of it.

     TURQUOISE is the second accent and carries a different meaning, so the two
     never compete: cyan marks emphasis and navigation, turquoise marks proof
     and achievement — the stat numbers, the "verifiable certificate" pill,
     WhatsApp. Used least of the four, which is what makes it feel special.
   ========================================================================= */
:root {
  color-scheme: light;

  /* surfaces — cool white paper (the brand is white/blue, so the ground loses
     the old warm ivory cast and picks up the faintest cyan instead) */
  --bg:            #f2f7fb;
  --bg-elev:       #ffffff;
  --bg-elev-2:     #f8fbfe;

  /* surface tints — navy-on-white */
  --surf-lo:       rgba(0, 54, 124, 0.014);
  --surf-a:        rgba(0, 54, 124, 0.035);
  --surf-b:        #ffffff;
  --line:          rgba(0, 54, 124, 0.14);
  --line-2:        rgba(0, 54, 124, 0.26);

  --glass:         var(--surf-a);
  --glass-strong:  var(--surf-b);
  --border:        var(--line);
  --border-strong: var(--line-2);

  /* BRAND NAVY — #00367c sampled from the eagle */
  --navy-deep:     #002355;
  --navy:          #00367c;
  --navy-lit:      #0a4f9e;
  --grad-navy:     linear-gradient(135deg, #00367c 0%, #0a4f9e 100%);

  /* type — navy ink on white */
  --text:          #0b2545;   /* 15.4:1 on white · 14.3:1 on paper ✓ */
  --text-soft:     #2c4a6e;   /*  8.9:1 ✓ */
  --muted:         #4a6786;   /*  5.7:1 ✓ */
  --muted-dim:     #55708e;   /*  4.9:1 on paper · 4.6:1 on the footer bar ✓ */

  /* BRAND CYAN — #30bef0. FILLS AND GRAPHICS ONLY on a light ground:
     as text on white it is 2.15:1, which fails AA by a wide margin. */
  --cyan:          #30bef0;   /* fills · navy text on it = 7.1:1 ✓ */
  --cyan-soft:     #d3eefb;   /* tint for chip grounds */
  --cyan-fg:       #0b6788;   /* cyan as TEXT · 6.3:1 white · 5.9:1 paper ✓ */
  --cyan-deep:     #08536d;

  /* BRAND TURQUOISE — #00b4ac. Same rule: fill vs. text are different values. */
  --turq:          #00b4ac;   /* fills · navy text on it = 5.9:1 ✓ */
  /* Darkened from #007a73, which was 4.00:1 for the WhatsApp button where it
     sits on the --deep bar inside the mobile drawer. */
  --turq-fg:       #00706a;   /* 5.96:1 white · 5.52:1 paper · 4.58:1 on --deep ✓ */

  /* ink that sits ON a cyan or turquoise fill */
  --on-accent:     #002355;   /* 7.1:1 on cyan · 5.9:1 on turquoise ✓ */

  /* primary button — navy, the calm workhorse. White on #00367c = 11.6:1 */
  --btn-bg:        var(--grad-navy);
  --btn-fg:        #ffffff;
  --btn-bg-hover:  linear-gradient(135deg, #002355 0%, #00367c 100%);

  /* shadows — soft and navy-tinted, never black */
  --sh-1: rgba(11, 37, 69, 0.07);
  --sh-2: rgba(11, 37, 69, 0.10);
  --sh-3: rgba(11, 37, 69, 0.14);
  --glow-accent: 0 8px 22px rgba(0, 54, 124, 0.16);

  /* sticky nav */
  --nav-bg:        rgba(242, 247, 251, 0.82);
  --nav-bg-stuck:  rgba(250, 252, 255, 0.95);

  /* -----------------------------------------------------------------------
     SECTION BANDS — alternating grounds, so long pages get rhythm without
     needing decorative panels. Cards invert on a band (white on paper /
     paper on white), which is what lets them stay shadow-light.
     -------------------------------------------------------------------- */
  --band:      #ffffff;
  --band-card: #f2f7fb;

  /* the embedded map is already light — do not invert it here */
  --map-filter: saturate(0.9) contrast(0.98);

  --track:  #dde8f2;   /* scrollbar */
  --thumb:  #a9c2d8;
  --scrim:  rgba(11, 37, 69, 0.42);

  /* deepest surface — topbar, footer, drawer. On white this is a cool
     pale-blue slab rather than a dark one. */
  --deep:   #e3edf6;

  /* veils that fade the bottom of an image plate into the page behind it */
  --veil-1: rgba(242, 247, 251, 0.97);
  --veil-2: rgba(242, 247, 251, 0.62);
  --veil-3: rgba(242, 247, 251, 0.18);

  /* chips overlaid on artwork: a crisp white print label */
  --chip-bg: rgba(255, 255, 255, 0.95);

  /* semantic accents */
  --blue-fg:   #0a4f9e;   /* 6.2:1 ✓ */
  --danger-fg: #a1341f;   /* 5.5:1 ✓ */
  --ok-fg:     #00706a;   /* the turquoise doubles as the success tone ✓ */

  /* type */
  --font-head: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  --font-body: 'Tajawal', 'Cairo', 'Segoe UI', Tahoma, sans-serif;

  /* -----------------------------------------------------------------------
     GEOMETRY — rounded. Restored by request after a squared-off experiment:
     the soft corners are part of what makes this design feel friendly rather
     than severe, and buttons are pills again (see .btn).
     -------------------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* A whisper of elevation is back on cards so the rounded corners have
     something to sit on — but far lighter than the original, and still static
     on hover (transitioning a box-shadow repaints the blur every frame). */
  --shadow-sm: 0 1px 2px var(--sh-1), 0 4px 14px var(--sh-1);
  --shadow-md: 0 2px 6px var(--sh-1), 0 12px 30px var(--sh-2);
  --shadow-lg: 0 4px 12px var(--sh-2), 0 24px 60px var(--sh-3);

  --container: 1240px;
  --gutter: 24px;
  --nav-h: 74px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.22s var(--ease);
  --t: 0.38s var(--ease);
  --t-slow: 0.7s var(--ease);
}

/* ============================== DARK THEME =================================
   Same four brand colours, inverted. The key difference from the light theme:
   on a deep navy ground the brand cyan and turquoise are BRIGHT relative to the
   background, so here they can be used directly as text (cyan is 8.3:1 on the
   page) instead of needing darkened variants. The relationship flips, the
   palette does not change.
   ========================================================================= */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #04182f;   /* deep navy, derived from brand #00367c */
  --bg-elev:       #082441;
  --bg-elev-2:     #0c2c4e;

  --surf-lo:       rgba(255, 255, 255, 0.014);
  --surf-a:        rgba(255, 255, 255, 0.045);
  --surf-b:        rgba(255, 255, 255, 0.07);
  --line:          rgba(255, 255, 255, 0.10);
  --line-2:        rgba(255, 255, 255, 0.18);

  --text:          #eaf4fb;   /* 16.0:1 ✓ */
  --text-soft:     #b8d0e4;   /* 11.2:1 ✓ */
  --muted:         #8fa9c2;   /*  7.3:1 ✓ */
  --muted-dim:     #8aa3bc;   /*  6.8:1 page · 5.1:1 on a card ✓ */

  --navy-deep:     #001a3f;
  --navy:          #00367c;
  --navy-lit:      #0a5ab4;
  --grad-navy:     linear-gradient(135deg, #00367c 0%, #0a5ab4 100%);

  /* BRAND CYAN, used at full strength — on this ground it IS legible as text */
  --cyan:          #30bef0;   /* 8.3:1 on the page · 6.2:1 on a card ✓ */
  --cyan-soft:     rgba(48, 190, 240, 0.14);
  --cyan-fg:       #6fd3f7;   /* 10.5:1 ✓ */
  --cyan-deep:     #1596c6;

  /* BRAND TURQUOISE, lifted slightly so it clears AA on a card too */
  --turq:          #00b4ac;   /* 6.9:1 page · 5.2:1 card ✓ */
  --turq-fg:       #2ad0c6;   /* 9.3:1 ✓ */

  --on-accent:     #04182f;   /* page-navy ink on cyan · 8.3:1 ✓ */

  /* On ink, CYAN is the right primary button — it is the brand's loudest
     colour and here it has the contrast to carry a filled button. */
  --btn-bg:        var(--cyan);
  --btn-fg:        #04182f;
  --btn-bg-hover:  #5ccdf5;

  --sh-1: rgba(0, 0, 0, 0.35);
  --sh-2: rgba(0, 0, 0, 0.45);
  --sh-3: rgba(0, 0, 0, 0.55);
  --glow-accent: 0 10px 30px rgba(48, 190, 240, 0.22);

  --nav-bg:        rgba(4, 24, 47, 0.78);
  --nav-bg-stuck:  rgba(2, 17, 35, 0.94);

  /* on ink the band is a lift, not a lightening — the same idea inverted */
  --band:      #06203c;
  --band-card: rgba(255, 255, 255, 0.05);

  --map-filter: grayscale(0.3) invert(0.9) hue-rotate(180deg) contrast(0.9);

  --track: #02111f;
  --thumb: #24455f;
  --scrim: rgba(1, 9, 20, 0.74);

  --deep:   #02111f;

  --veil-1: rgba(2, 17, 35, 0.96);
  --veil-2: rgba(2, 17, 35, 0.55);
  --veil-3: rgba(2, 17, 35, 0.2);

  --chip-bg: rgba(4, 24, 47, 0.93);

  --blue-fg:   #8fc4f0;
  --danger-fg: #fca5a5;
  --ok-fg:     #2ad0c6;   /* turquoise doubles as success here too */

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 26px;

  --shadow-sm: 0 4px 16px var(--sh-1);
  --shadow-md: 0 14px 38px var(--sh-1);
  --shadow-lg: 0 30px 80px var(--sh-2);
}

/* -------------------------------------------------------- 1. RESET & BASE */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.85;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The fixed ambient radial wash that used to live here (three coloured blooms
   behind the whole page) has been removed. It was doing two bad things at once:
   it tinted every "flat" surface so no section ever had a true, honest ground,
   and it made the page look like a gradient rather than like paper. Section
   rhythm is now carried by the alternating bands defined in the token block. */

/* =============================================================================
   LIGHT-THEME REFINEMENTS
   These are the rules that stop the paper theme from looking like a generic
   SaaS dashboard. Two things do that work:
     1. separation comes from HAIRLINES and soft shadows, not from tinted
        translucent panels — so no "glass" look on a light background;
     2. the nav's backdrop blur is off, because on a light ground it muddies
        the type instead of adding depth.
   ========================================================================== */
:root:not([data-theme="dark"]) {

  /* Cards become real white cards on paper: crisp edge, soft lift. */
  --card-face: #ffffff;
}
:root:not([data-theme="dark"]) .card,
:root:not([data-theme="dark"]) .feature-card,
:root:not([data-theme="dark"]) .inst-card,
:root:not([data-theme="dark"]) .contact-card,
:root:not([data-theme="dark"]) .mv-card,
:root:not([data-theme="dark"]) .form-card,
:root:not([data-theme="dark"]) .buy-card,
:root:not([data-theme="dark"]) .glass,
:root:not([data-theme="dark"]) .value-card {
  background: var(--card-face);
}

/* Drop the backdrop blur on the nav in light mode — on paper it muddies the
   type instead of adding depth. A hairline and a solid tint read cleaner. */
:root:not([data-theme="dark"]) .nav-wrap {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: #f8fbfe;
}
:root:not([data-theme="dark"]) .nav-wrap.is-stuck {
  background: #ffffff;
  box-shadow: 0 1px 0 var(--line), 0 6px 24px var(--sh-1);
}

/* Dark image plates sit on paper like printed photographs — give them a
   hairline so they read as plates, not floating rectangles. */
:root:not([data-theme="dark"]) .course-card__media,
:root:not([data-theme="dark"]) .cat-card,
:root:not([data-theme="dark"]) .course-hero__img { border: 1px solid var(--line); }

/* Eyebrows keep the AA-safe deep cyan on a light ground — the raw brand cyan
   is 2.15:1 here and would be unreadable. */
:root:not([data-theme="dark"]) .section-head--center .eyebrow,
:root:not([data-theme="dark"]) .section-head--row .eyebrow { color: var(--cyan-fg); }

/* Band colour is now a token (--band / --band-card) declared per theme, so the
   old light-theme-only override that used to live here is no longer needed. */

/* Text sitting on a card VEIL needs no override: the veil fades the artwork to
   the page colour, so inherited navy ink is correct on paper and light ink is
   correct on ink. Only the chips below carry their own opaque fill. */
body > * { position: relative; z-index: 1; }

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--cyan); color: var(--on-accent); }

:focus-visible {
  outline: 2px solid var(--cyan-fg);
  outline-offset: 3px;
  border-radius: var(--r-md);
}

/* scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--track); }
::-webkit-scrollbar-thumb {
  background: var(--thumb);
  border-radius: var(--r-pill);
  border: 2px solid var(--track);
}
::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

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

.section { padding-block: clamp(64px, 8vw, 116px); position: relative; }
.section--tight { padding-block: clamp(48px, 5vw, 76px); }

/* -----------------------------------------------------------------------------
   SECTION BANDS
   Every other section gets its own flat ground. This is the whole trick behind
   why a page like ISSA's reads as expensive: sections are separated by a change
   of GROUND, with no border, no shadow and no divider anywhere. The band runs
   full-bleed, so the eye reads a clean horizontal edge across the viewport.

   Cards invert on a band. On the pale base a card is pure white; on the white
   band a card takes the pale tone. That inversion is what keeps a card reading
   as a distinct object with almost no shadow.
   -------------------------------------------------------------------------- */
.section--band,
.stats {
  background: var(--band);
}

.section--band .card,
.section--band .feature-card,
.section--band .inst-card,
.section--band .contact-card,
.section--band .value-card,
.section--band .module,
.section--band .help-card,
.section--band .tst__card {
  background: var(--band-card);
}

/* A plain hairline. This was a gold→blue gradient rule, which is a decorative
   flourish masquerading as structure — the bands do the separating now. */
.hr-glow {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--border);
}

.skip-link {
  position: absolute;
  inset-inline-start: 50%;
  top: -60px;
  transform: translateX(50%);
  background: var(--cyan);
  color: var(--on-accent);
  padding: 10px 20px;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 700;
  z-index: 999;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 0; }

/* -------------------------------------------------- 2. TYPOGRAPHY & HEADERS
   Rebalanced: hierarchy is now carried by SIZE, not by weight.
   Headings were 800/900 — at that weight a large Arabic heading turns into a
   solid black mass and the counters (the enclosed white shapes inside ع, ه, م)
   fill in, which is what makes heavy type look cheap rather than confident.
   700 is the restraint point for Cairo. Latin display faces can go to 500,
   but Arabic script carries less stroke contrast and would look weak there —
   so 700 here is the equivalent of ISSA's 500, not a compromise.

   letter-spacing is now 0. Arabic is a CONNECTED script: any positive tracking
   pulls the joins apart, and negative tracking crowds them. The previous
   -0.2px was a habit imported from Latin typography and does not belong here.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  letter-spacing: 0;
}
h1 { font-size: clamp(2.35rem, 5.8vw, 4.5rem); font-weight: 700; line-height: 1.16; }
h2 { font-size: clamp(1.95rem, 4.3vw, 3.25rem); font-weight: 700; line-height: 1.22; }
h3 { font-size: clamp(1.2rem, 2.1vw, 1.55rem); }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------------------
   ACCENT WORDS  (was .grad-gold / .grad-tech)
   These used to be gradient-filled text (background-clip: text) in gold and
   blue. Both problems are fixed here: the gradient is gone — it is one of the
   most recognisable AI/SaaS tells, and it renders the same word a different
   colour depending on how wide its line happens to be — and the gold is gone.

   Two classes, two brand colours, so a heading can carry either:
     .accent    deep cyan      — the default emphasis
     .accent-2  deep turquoise — the second voice, for variety across sections
   Both are the AA-safe *-fg variants, never the raw brand values, because these
   are TEXT. See the fill-vs-text rule in the token block.
   -------------------------------------------------------------------------- */
.accent   { color: var(--cyan-fg); -webkit-text-fill-color: currentColor; }
.accent-2 { color: var(--turq-fg); -webkit-text-fill-color: currentColor; }

/* Eyebrow: letter-spacing dropped from 1.4px to 0 — see the note above. On
   Arabic, 1.4px of tracking visibly broke the joins in every eyebrow on the
   site, which read as a rendering fault rather than as a design choice. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--cyan-fg);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--cyan);
}

.section-head { margin-bottom: clamp(32px, 4vw, 54px); max-width: 720px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::before { display: none; }
.section-head p {
  color: var(--muted);
  font-size: 1.03rem;
  margin-top: 14px;
}

.section-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  max-width: none;
  flex-wrap: wrap;
}
.section-head--row > div { max-width: 660px; }

/* ------------------------------------------- 3. BUTTONS / PILLS / BADGES */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.98rem;
  padding: 14px 28px;
  border: 1px solid transparent;
  /* Pill. Squared these off briefly and it made the whole design read as
     severe — the rounded language is part of the site's character, so it is
     back everywhere, buttons included. */
  border-radius: var(--r-pill);
  background: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }

/* Primary CTA. Theme-aware, and the two choices are not arbitrary:
     LIGHT — navy fill, white text (11.6:1). Navy is the calmest of the three
             brand colours, and this is the most-repeated element on the site.
     DARK  — brand cyan fill, navy text (8.3:1). On deep navy, cyan finally has
             the contrast to carry a filled button, so the brand's loudest
             colour gets to be the button exactly where it works.
   The animated "sheen sweep" that used to slide across this on hover stays
   removed: a specular highlight travelling over a button is a clear SaaS tell,
   and it cost a paint on every frame of hover. */
.btn--primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--glow-accent);
}
.btn--primary:hover { background: var(--btn-bg-hover); }

.btn--ghost {
  background: var(--glass);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn--ghost:hover {
  background: var(--glass-strong);
  border-color: var(--cyan);
  color: var(--cyan-fg);
}

.btn--navy {
  background: var(--grad-navy);
  color: #fff;
  box-shadow: var(--glow-accent);
}

/* WhatsApp. Was WhatsApp's own green (#25D366) — recoloured to the brand
   turquoise, which sits in the same green-teal family so the button still reads
   as "messaging" while staying inside the palette. */
.btn--wa {
  background: rgba(0, 180, 172, 0.11);
  border-color: rgba(0, 180, 172, 0.45);
  color: var(--turq-fg);
}
.btn--wa:hover { background: rgba(0, 180, 172, 0.2); border-color: var(--turq); }

.btn--sm { padding: 10px 20px; font-size: 0.88rem; }
.btn--lg { padding: 17px 38px; font-size: 1.06rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--cyan-fg);
  font-size: 0.95rem;
  transition: gap var(--t-fast), color var(--t-fast);
}
.link-arrow svg { width: 17px; height: 17px; transition: transform var(--t-fast); }
.link-arrow:hover { gap: 15px; color: var(--cyan-fg); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-soft);
}
/* The pill's icon is one of the few places brand cyan appears at full strength
   on white: it is a 15px GRAPHIC, not text, so the fill-vs-text rule allows it
   and it is exactly the kind of small bright detail the palette needs. */
.pill svg { width: 15px; height: 15px; color: var(--cyan-fg); flex: none; }

/* Two pill flavours, matching the two accent roles.
   --accent = emphasis (cyan) · --turq = proof / verification (turquoise) */
.pill--accent {
  border-color: rgba(48, 190, 240, 0.45);
  background: rgba(48, 190, 240, 0.10);
  color: var(--cyan-fg);
}
.pill--turq {
  border-color: rgba(0, 180, 172, 0.42);
  background: rgba(0, 180, 172, 0.10);
  color: var(--turq-fg);
}
.pill--turq svg { color: var(--turq); }

/* placeholder-content warning badge (must stay visible until real content lands) */
.badge-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--danger-fg);
  background: rgba(239, 68, 68, 0.1);
  border: 1px dashed rgba(239, 68, 68, 0.45);
  letter-spacing: 0.3px;
}
.badge-placeholder::before { content: '⚠'; font-size: 0.85rem; }

.tag-featured {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 14px;
  z-index: 3;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  /* Was var(--cyan). White text on the LIGHT end of that gradient (var(--cyan-deep))
     measured 3.5:1 — an AA failure at 11.7px, and one a gradient background
     hides from any automated check. A solid --gold-1 is deterministic:
     white on var(--cyan) = 5.0:1 on paper, navy on var(--cyan) = 7.8:1 on ink. */
  background: var(--cyan);
  color: var(--on-accent);
  font-family: var(--font-head);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0;
}
.tag-discount {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  z-index: 3;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  /* 0.82 → 0.93: this badge sits on the course artwork and used to rely on a
     blur(8px) backdrop. 13 of these were on screen at once on courses.html —
     a blurred backdrop region per price badge, for no visual gain. */
  background: var(--chip-bg);
  border: 1px solid rgba(48, 190, 240, 0.5);
  color: var(--cyan-fg);
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 700;
}

/* ------------------------------------------------ 4. GLASS SURFACES / CARDS */
.glass {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

/* -----------------------------------------------------------------------------
   HOVER COST NOTE (applies to .card, .cat-card, .feature-card, .inst-card,
   .contact-card)
   These previously transitioned `box-shadow` on hover. A box-shadow transition
   re-rasterises the blurred shadow on EVERY frame of the 380ms transition —
   it is paint work, not compositing. The shadow is now STATIC, and hover
   animates only `transform` (pure compositor) plus a 1px `border-color`.
   The lift still reads because translateY is doing that work.

   Note: the usual "move the glow to a pseudo-element and fade its opacity"
   trick does NOT work for most of these — .card, .cat-card and .feature-card
   all set `overflow: hidden`, which clips an outward pseudo-element shadow.
   A static shadow removes 100% of the per-frame paint anyway.
   -------------------------------------------------------------------------- */
/* Flat fill, not a gradient. A 160° gradient across a card is invisible at a
   glance and yet it is the reason no surface on the page ever looked like a
   real, single colour. */
.card {
  position: relative;
  background: var(--surf-b);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), border-color var(--t);
}
/* The gold hairline that used to sweep across the top edge on hover is gone —
   an accent line igniting on hover is decoration pretending to be feedback.
   Hover is now a 4px lift and a border that firms up: quieter, and it reads as
   the card being picked up rather than switching on. */
.card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}

.grid { display: grid; gap: 26px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --------------------------------------------------------------- 5. HEADER */
.topbar {
  background: var(--deep);
  border-block-end: 1px solid var(--surf-b);
  font-size: 0.82rem;
  color: var(--muted);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 42px;
  flex-wrap: wrap;
}
.topbar__left, .topbar__right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.topbar a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color var(--t-fast);
}
.topbar a:hover { color: var(--cyan-fg); }
.topbar svg { width: 14px; height: 14px; color: var(--cyan-fg); flex: none; }
.topbar__sep { width: 1px; height: 15px; background: var(--line); }

.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--nav-bg);
  /* ---------------------------------------------------------------------
     THE ONLY PERSISTENT backdrop-filter ON THE SITE.
     This is the one place the effect is actually visible: page content
     scrolls underneath a translucent bar, so it genuinely reads as frosted
     glass. Radius reduced 20px → 12px; the cost scales with the radius and
     12px is visually indistinguishable here.
     Every other card/panel sat on a near-flat near-black background, where
     blurring produced no perceptible difference but forced the compositor
     to re-blur a full backdrop region every frame during scroll.
     --------------------------------------------------------------------- */
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border-block-end: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.nav-wrap.is-stuck {
  background: var(--nav-bg-stuck);
  border-block-end-color: var(--border);
  box-shadow: 0 12px 40px var(--sh-2);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: var(--nav-h);
}

.brand { display: flex; align-items: center; gap: 13px; flex: none; }
.brand__logo {
  width: 50px;
  height: 50px;
  object-fit: contain;
  flex: none;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.brand__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.99rem;
  letter-spacing: -0.3px;
}
.brand__tag {
  font-size: 0.73rem;
  color: var(--cyan-fg);
  font-weight: 500;
  letter-spacing: 0.2px;
}

.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__link {
  position: relative;
  padding: 10px 15px;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--text-soft);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav__link::after {
  content: '';
  position: absolute;
  inset-block-end: 4px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--cyan);
  transition: width var(--t-fast);
}
.nav__link:hover { color: var(--text); background: var(--surf-a); }
.nav__link:hover::after { width: 20px; }
.nav__link.is-active { color: var(--cyan-fg); }
.nav__link.is-active::after { width: 26px; }

.nav__actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* ---- theme toggle (paper / ink) ---- */
.theme-btn {
  width: 42px; height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--text-soft);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.theme-btn svg { width: 19px; height: 19px; }
.theme-btn:hover { color: var(--cyan-fg); border-color: var(--cyan); }
/* Light mode offers the moon (click → go dark); dark mode offers the sun. */
.theme-btn__sun { display: none; }
[data-theme="dark"] .theme-btn__sun { display: block; }
[data-theme="dark"] .theme-btn__moon { display: none; }

.burger {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: var(--glass);
  border: 1px solid var(--border-strong);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  flex: none;
}
.burger span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  visibility: hidden;
  /* Required: the closed panel keeps its layout box (visibility:hidden), so
     without this it sits off-viewport and creates a horizontal scrollbar. */
  overflow: hidden;
}
.drawer.is-open { pointer-events: auto; visibility: visible; }
.drawer__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity var(--t);
}
/* Blur is applied ONLY while the drawer is open, so this never creates a
   compositor layer during normal scrolling (the closed drawer still has a
   layout box, so an unconditional backdrop-filter here would cost on every
   page, on every frame, for an invisible element). */
.drawer.is-open .drawer__scrim {
  opacity: 1;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(340px, 88vw);
  background: var(--deep);
  border-inline-start: 1px solid var(--border);
  padding: 26px 24px 34px;
  overflow-y: auto;
  /* The panel is anchored to the inline-end edge (left in RTL, right in LTR),
     matching the hamburger's position. It must hide TOWARD that same edge —
     translateX is physical, so the sign has to flip per direction. */
  transform: translateX(100%);              /* LTR: anchored right → hide right */
  transition: transform var(--t);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
[dir="rtl"] .drawer__panel { transform: translateX(-100%); }  /* RTL: anchored left → hide left */
.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.drawer__close {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--glass);
  border: 1px solid var(--border);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--muted);
  display: grid;
  place-items: center;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.drawer__close:hover { color: var(--cyan-fg); border-color: rgba(48, 190, 240, 0.4); }

.drawer__links { display: flex; flex-direction: column; gap: 4px; }
.drawer__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: var(--r-md);
  font-family: var(--font-head);
  font-weight: 700;
  border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.drawer__links a::after { content: '‹'; color: var(--muted-dim); font-size: 1.3rem; line-height: 1; }
.drawer__links a:hover { background: var(--surf-a); border-color: var(--border); }
.drawer__links a.is-active {
  background: rgba(48, 190, 240, 0.1);
  border-color: rgba(48, 190, 240, 0.35);
  color: var(--cyan-fg);
}
.drawer__ctas { display: flex; flex-direction: column; gap: 10px; }
.drawer__meta {
  margin-block-start: auto;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.drawer__meta a { display: flex; align-items: center; gap: 9px; }
.drawer__meta svg { width: 15px; height: 15px; color: var(--cyan-fg); flex: none; }

/* ----------------------------------------------------------------- 6. HERO */
/* Bottom padding stays tighter than the top: the proof band butts directly
   against the hero, and the headline should feel like a caption to the
   photograph rather than a separate screen away from it. */
.hero {
  position: relative;
  padding-block: clamp(48px, 6vw, 84px) clamp(32px, 4vw, 48px);
  overflow: hidden;
}
/* Two columns again: headline left, rotating emblem right. The emblem is back
   by request — it was the one piece of motion worth keeping, because unlike the
   blobs and the marquee it is the brand mark itself, and a slow rotation on a
   circular emblem reads as a seal turning rather than as an animation playing.
   The float cards do NOT come back: they were showing estimate:true figures as
   headline facts. */
.hero__grid {
  display: grid;
  /* Text gets the larger share: at 1.05/0.95 the headline's first line wrapped
     mid-phrase ("ادرس علوم / الرياضة"), which breaks the deliberate three-line
     structure the <span class="line"> markup sets up. */
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}

/* The three animated blur blobs that used to drift behind the hero are gone,
   along with their float-a / float-b keyframes. They were the single clearest
   "generated landing page" signal on the site: soft coloured clouds moving
   slowly behind the headline, present on every page, meaning nothing. */

.hero__content { position: relative; z-index: 2; }
/* The hero headline is capped below the global h1 maximum (4.5rem). It shares
   its row with the emblem, so it has ~40% less measure than a full-width h1 and
   needs to be sized to the column it actually lives in — otherwise its longest
   line wraps and the three-line structure collapses. */
.hero h1 {
  margin-bottom: 22px;
  font-size: clamp(2.2rem, 4.4vw, 3.9rem);
}
.hero h1 .line { display: block; }
.hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.16rem);
  color: var(--text-soft);
  max-width: 560px;
  margin-bottom: 30px;
  line-height: 1.95;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 32px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 10px; }

/* -----------------------------------------------------------------------------
   HERO EMBLEM — the rotating brand mark.
   Two counter-rotating elements: the emblem itself turns clockwise over 70s, and
   a dashed ring turns anticlockwise over 42s. The opposing directions are what
   make it read as a mechanism rather than as a spinning image.

   Cost: both animate `transform` ONLY, which is composited on the GPU — no
   layout, no paint, no per-frame work on the main thread. `will-change` is set
   because these are the only two continuously-animating elements on the site,
   so promoting them costs two layers total (the old version promoted 25+).
   -------------------------------------------------------------------------- */
.hero__visual {
  position: relative;
  z-index: 2;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.hero__emblem {
  width: 100%;
  max-width: 460px;
  animation: spin-slow 70s linear infinite;
  will-change: transform;
}
.hero__ring {
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  border: 1px dashed rgba(48, 190, 240, 0.4);
  animation: spin-slow 42s linear infinite reverse;
  will-change: transform;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }

/* -----------------------------------------------------------------------------
   PROOF BAND — full-bleed photograph directly beneath the headline.
   This replaces the entire old hero right-hand column: a slowly rotating
   five-ring emblem, a counter-rotating dashed ring, and three stat cards
   bobbing up and down on staggered delays. All of that was motion for its own
   sake, and the numbers on those cards were unverified estimates presented as
   if they were facts.

   In its place: one real photograph of one real graduating cohort holding real
   certificates. It is full-bleed (breaks the container on purpose) so it lands
   as a change of ground, and it carries its own caption over the grass in the
   lower third — which is why the crop keeps that grass rather than trimming it.

   No cover-cropping: the frame's aspect-ratio matches the file exactly, so no
   one is ever clipped at any viewport width.
   -------------------------------------------------------------------------- */
.proof-band {
  position: relative;
  margin: 0;
  background: var(--deep);
}
.proof-band img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2.2 / 1;
}
.proof-band__cap {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: clamp(20px, 4vw, 40px) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  /* The photograph is bright and sunlit, so the caption needs its own ground.
     A single dark scrim rising from the bottom edge, no blur. Same ramp shape
     as .shot__cap and for the same reason: alpha stays ≥0.88 everywhere text
     is actually set, so contrast does not depend on the photo behind it. */
  background: linear-gradient(to top,
    rgba(4, 16, 31, 0.95) 0%,
    rgba(4, 16, 31, 0.88) 62%,
    rgba(4, 16, 31, 0.45) 86%,
    transparent 100%);
  color: #fff;
}
.proof-band__cap b {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  line-height: 1.35;
}
.proof-band__cap span {
  font-size: clamp(0.82rem, 1.4vw, 0.95rem);
  color: rgba(255, 255, 255, 0.78);
}

/* -------------------------------------------------- 7. STATS STRIP */
/* Flat band, no gradient and no borders. The band colour IS the separation now,
   so the top/bottom rules that used to fence this strip off are redundant —
   and two hairlines plus a vertical gradient was three devices doing one job. */
.stats {
  position: relative;
  background: var(--band);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-block: clamp(34px, 4vw, 54px);
}
.stat {
  text-align: center;
  padding-inline: 18px;
  position: relative;
}
.stat + .stat::before {
  content: '';
  position: absolute;
  inset-block: 12%;
  inset-inline-start: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--border-strong), transparent);
}
.stat__num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.4vw, 3.35rem);
  line-height: 1.05;
  /* TURQUOISE, not cyan: the stat numbers are the page's "achievement" voice.
     Splitting the two accents by MEANING rather than sprinkling both around is
     what stops a three-colour palette looking busy. */
  color: var(--turq-fg);
  display: block;
  letter-spacing: -1px;
}
.stat__label {
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: 8px;
  font-weight: 500;
}

/* ------------------------------------------------------- 8. (was MARQUEE)
   The infinite scrolling tagline ribbon has been deleted, along with its
   @keyframes marquee, its two edge-fade gradients, its RTL gradient flips and
   its rotated gold diamond separators.

   Three reasons, in order of how much they matter:
     1. It is the single most recognisable 'generated landing page' component
        in existence, which is precisely the thing we are removing.
     2. It moved permanently. A page with something always sliding across it
        can never feel calm, and calm is what reads as expensive.
     3. The nine taglines it carried were marketing lines, not information —
        so it occupied a full-bleed strip in the most valuable position on the
        page (immediately under the stats) and told the visitor nothing.

   The taglines array is still in data.js. Nothing renders it now.
   -------------------------------------------------------------------------- */

/* ------------------------------------------------- 9. COURSE CARDS */
.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 26px;
}

.course-card { display: flex; flex-direction: column; }
.course-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-elev-2);
}
.course-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.85s var(--ease);
}
.course-card:hover .course-card__media img { transform: scale(1.09); }
.course-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 23, 43, 0.92) 2%, rgba(6, 23, 43, 0.1) 55%, transparent);
}
.course-card__cat {
  position: absolute;
  inset-block-end: 13px;
  inset-inline-start: 16px;
  z-index: 3;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cyan-fg);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.course-card__cat::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}

.course-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 14px;
}
.course-card__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.13rem;
  line-height: 1.45;
  transition: color var(--t-fast);
}
.course-card:hover .course-card__title { color: var(--cyan-fg); }
.course-card__desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-card__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.83rem;
  color: var(--muted);
  padding-block-start: 4px;
}
.course-card__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.course-card__meta svg { width: 15px; height: 15px; color: var(--cyan-fg); flex: none; }

.course-card__foot {
  margin-block-start: auto;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.price { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.price__new {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--cyan-fg);
  letter-spacing: -0.5px;
}
.price__cur { font-size: 0.78rem; color: var(--muted); font-weight: 500; }
.price__old {
  font-size: 0.9rem;
  color: var(--muted-dim);
  text-decoration: line-through;
  text-decoration-color: rgba(239, 68, 68, 0.7);
  text-decoration-thickness: 1.5px;
}

.stars { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; color: var(--muted); }
.stars__icons { display: inline-flex; gap: 1px; color: var(--turq-fg); }
.stars__icons svg { width: 14px; height: 14px; }
.stars__icons svg.is-empty { color: var(--line-2); }
.stars__val { font-weight: 700; color: var(--cyan-fg); font-family: var(--font-head); }

.no-rating { font-size: 0.8rem; color: var(--muted-dim); }

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 24px;
  color: var(--muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
}
.empty-state h3 { margin-bottom: 10px; color: var(--text); }

/* ------------------------------------------------------- 10. CATEGORIES */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.cat-card {
  position: relative;
  display: block;
  min-height: 300px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), border-color var(--t);
}
.cat-card:hover {
  transform: translateY(-9px);
  border-color: rgba(48, 190, 240, 0.45);
}
.cat-card__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease), filter var(--t);
  filter: saturate(0.75);
}
.cat-card:hover .cat-card__bg { transform: scale(1.09); filter: saturate(1.15); }
.cat-card__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--veil-1) 8%, var(--veil-2) 55%, var(--veil-3));
}
.cat-card__body {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 11px;
}
.cat-card__icon {
  position: absolute;
  inset-block-start: 22px;
  inset-inline-start: 24px;
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: rgba(48, 190, 240, 0.13);
  border: 1px solid rgba(48, 190, 240, 0.32);
  color: var(--cyan-fg);
}
.cat-card__icon svg { width: 25px; height: 25px; }
.cat-card__count {
  position: absolute;
  inset-block-start: 26px;
  inset-inline-end: 24px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--cyan-fg);
  padding: 5px 13px;
  border-radius: var(--r-pill);
  /* 0.7 → 0.9: sits on the category artwork; previously relied on blur(8px). */
  background: var(--chip-bg);
  border: 1px solid var(--border-strong);
}
.cat-card__title { font-family: var(--font-head); font-weight: 700; font-size: 1.42rem; }
.cat-card__blurb { font-size: 0.9rem; color: var(--text-soft); line-height: 1.7; }
.cat-card__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--cyan-fg);
  margin-block-start: 4px;
  transition: gap var(--t-fast);
}
.cat-card:hover .cat-card__go { gap: 14px; }
.cat-card__go svg { width: 16px; height: 16px; }

/* --------------------------------------------------------- 11. FEATURES */
.feature-card {
  padding: 30px 26px;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--surf-a), var(--surf-lo));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), border-color var(--t);
  position: relative;
  overflow: hidden;
}
.feature-card::after {
  content: '';
  position: absolute;
  inset-block-start: -50%;
  inset-inline-end: -30%;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(48, 190, 240, 0.14), transparent 68%);
  opacity: 0;
  transition: opacity var(--t);
  pointer-events: none;
}
.feature-card:hover {
  transform: translateY(-8px);
  border-color: rgba(48, 190, 240, 0.35);
}
.feature-card:hover::after { opacity: 1; }
.feature-card__icon {
  width: 58px; height: 58px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--cyan);
  color: var(--on-accent);
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}
.feature-card__icon svg { width: 27px; height: 27px; }
.feature-card:nth-child(even) .feature-card__icon {
  background: var(--grad-navy);
  color: #fff;
}
.feature-card h3 { margin-bottom: 11px; position: relative; z-index: 2; }
.feature-card p { color: var(--muted); font-size: 0.93rem; position: relative; z-index: 2; }

/* ------------------------------------------------------ 12. INSTRUCTORS */
.inst-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 24px;
}
.inst-card {
  text-align: center;
  padding: 26px 18px 24px;
  border-radius: var(--r-lg);
  background: linear-gradient(170deg, var(--surf-a), var(--surf-lo));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), border-color var(--t);
}
.inst-card:hover {
  transform: translateY(-8px);
  border-color: rgba(48, 190, 240, 0.4);
}
.inst-card__photo {
  position: relative;
  width: 116px; height: 116px;
  margin: 0 auto 18px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-elev-2);
  border: 2px solid transparent;
  background-image: linear-gradient(var(--bg-elev-2), var(--bg-elev-2)), var(--cyan);
  background-origin: border-box;
  background-clip: content-box, border-box;
  padding: 3px;
  transition: transform var(--t);
}
.inst-card:hover .inst-card__photo { transform: scale(1.06); }
.inst-card__photo img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.inst-card__initials {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.55rem;
  color: var(--cyan-fg);
  /* Was a hardcoded near-black radial (rgba(10,12,18,0.95)) left over from when
     this design was dark-only. On the light theme that put deep-cyan ink on an
     almost-black disc — 2.80:1. Now a flat token tint, so it inverts correctly:
     pale cyan behind deep cyan ink on white, cyan-tinted navy behind bright
     cyan ink on ink. */
  background: var(--cyan-soft);
  z-index: 2;
}
.inst-card__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.45;
  margin-bottom: 7px;
}
.inst-card__role {
  font-size: 0.845rem;
  color: var(--muted);
  line-height: 1.65;
}
.inst-card__rule {
  width: 34px; height: 2px;
  border-radius: 2px;
  background: var(--cyan);
  margin: 14px auto 0;
  opacity: 0.6;
  transition: width var(--t);
}
.inst-card:hover .inst-card__rule { width: 60px; opacity: 1; }

/* ----------------------------------------------------- 13. TESTIMONIALS */
.tst {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--surf-a), var(--surf-lo));
  padding: clamp(30px, 5vw, 56px);
}
.tst__viewport { overflow: hidden; }
.tst__track {
  display: flex;
  transition: transform 0.6s var(--ease);
}
.tst__slide {
  flex: 0 0 100%;
  padding-inline: 4px;
}
.tst__quote {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  line-height: 1.85;
  color: var(--text);
  margin-bottom: 26px;
  position: relative;
  padding-inline-start: 46px;
}
.tst__quote::before {
  content: '”';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -14px;
  font-family: var(--font-head);
  font-size: 4.4rem;
  line-height: 1;
  color: var(--cyan-fg);
  opacity: 0.75;
}
.tst__who { display: flex; align-items: center; gap: 14px; }
.tst__av {
  width: 52px; height: 52px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(48, 190, 240, 0.1);
  border: 1px dashed rgba(48, 190, 240, 0.4);
  color: var(--cyan-fg);
  font-family: var(--font-head);
  font-weight: 700;
}
.tst__name { font-family: var(--font-head); font-weight: 700; }
.tst__role { font-size: 0.82rem; color: var(--muted); }

.tst__ctrls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-block-start: 30px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--border);
}
.tst__dots { display: flex; gap: 9px; }
.tst__dot {
  position: relative;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--line-2);
  transition: width var(--t-fast), background var(--t-fast), border-radius var(--t-fast);
}
/* WCAG 2.5.8 — the visible dot is 9px, so extend the hit area to 24×24.
   Uses physical top/left so the centring is identical in RTL and LTR. */
.tst__dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}
.tst__dot.is-active { width: 30px; border-radius: var(--r-pill); background: var(--cyan); }
.tst__arrows { display: flex; gap: 10px; }
.tst__arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--glass);
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
  color: var(--text-soft);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.tst__arrow svg { width: 18px; height: 18px; }
.tst__arrow:hover {
  background: var(--cyan);
  color: var(--on-accent);
  border-color: transparent;
  transform: translateY(-2px);
}

/* ------------------------------------------------------- 14. CTA BANNER */
/* Flat panel. Previously this carried FOUR stacked backgrounds: a gold radial
   bloom, a blue radial bloom, a 160° base gradient, and — on ::before — a
   48px grid of hairlines fading out through a radial mask. A masked technical
   grid behind a call to action is pure SaaS iconography, and the two blooms
   made the gold eyebrow measure 4.1:1 against the lighter part of the panel,
   a real AA failure. One flat surface and a hairline instead. */
.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(38px, 6vw, 72px);
  text-align: center;
  border: 1px solid var(--border-strong);
  background: var(--surf-b);
}
.cta > * { position: relative; z-index: 2; }
.cta h2 { margin-bottom: 16px; }
.cta p {
  color: var(--text-soft);
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 30px;
  font-size: 1.03rem;
}
.cta__ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ------------------------------------------------------------ 15. FOOTER */
.footer {
  margin-block-start: clamp(48px, 6vw, 90px);
  border-block-start: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surf-lo), transparent 55%), var(--deep);
  padding-block-start: clamp(46px, 5vw, 72px);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.4fr;
  gap: 42px;
  padding-block-end: 44px;
}
.footer__brand .brand { margin-bottom: 18px; }
.footer__blurb { color: var(--muted); font-size: 0.92rem; max-width: 340px; margin-bottom: 20px; }
.footer h4 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 18px;
  position: relative;
  padding-block-end: 12px;
}
.footer h4::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 32px; height: 2px;
  border-radius: 2px;
  background: var(--cyan);
}
.footer__list { display: flex; flex-direction: column; gap: 11px; }
.footer__list a, .footer__list li {
  color: var(--muted);
  font-size: 0.91rem;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  transition: color var(--t-fast), padding-inline-start var(--t-fast);
}
.footer__list a:hover { color: var(--cyan-fg); padding-inline-start: 5px; }
.footer__list svg { width: 15px; height: 15px; color: var(--cyan-fg); flex: none; margin-block-start: 5px; }

.socials { display: flex; gap: 11px; }
.social {
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--text-soft);
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.social svg { width: 19px; height: 19px; }
.social:hover {
  transform: translateY(-4px);
  background: var(--cyan);
  color: var(--on-accent);
  border-color: transparent;
}

.footer__bottom {
  border-block-start: 1px solid var(--border);
  padding-block: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.86rem;
  color: var(--muted-dim);
}
.footer__bottom a { transition: color var(--t-fast); }
.footer__bottom a:hover { color: var(--cyan-fg); }
.footer__bottom-links { display: flex; gap: 20px; flex-wrap: wrap; }

/* ------------------------------------------------- 16. PAGE HERO (inner) */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 6vw, 82px) clamp(36px, 4vw, 54px);
  border-block-end: 1px solid var(--border);
}
.page-hero__inner { position: relative; z-index: 2; max-width: 780px; }
.page-hero h1 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); margin-bottom: 16px; }
.page-hero p { color: var(--muted); font-size: 1.03rem; }

.crumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.85rem;
  color: var(--muted-dim);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.crumbs a { color: var(--muted); transition: color var(--t-fast); }
.crumbs a:hover { color: var(--cyan-fg); }
.crumbs__sep { color: var(--muted-dim); }

/* ------------------------------------------------------- 17. FILTER TABS */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-bottom: 36px;
  padding: 9px;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--border);
  width: fit-content;
  max-width: 100%;
}
.filter {
  border: 1px solid transparent;
  background: none;
  padding: 11px 24px;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
.filter__n {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--surf-b);
  color: var(--muted);
  transition: background var(--t-fast), color var(--t-fast);
}
.filter:hover { color: var(--text); background: var(--surf-a); }
.filter.is-active {
  background: var(--cyan);
  color: var(--on-accent);
}
.filter.is-active .filter__n { background: rgba(0, 0, 0, 0.18); color: var(--on-accent); }

.results-count { color: var(--muted); font-size: 0.92rem; margin-bottom: 24px; }
.results-count b { color: var(--cyan-fg); font-family: var(--font-head); }

/* -------------------------------------------------- 18. COURSE DETAIL */
.course-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(40px, 5vw, 66px);
  border-block-end: 1px solid var(--border);
}
.course-hero__grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
  position: relative;
  z-index: 2;
}
.course-hero h1 { font-size: clamp(1.75rem, 4vw, 2.85rem); margin-bottom: 18px; }
.course-hero__meta { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 22px; }
.course-hero__img {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.course-hero__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 366px;
  gap: clamp(28px, 4vw, 46px);
  align-items: start;
}

.prose h2 { font-size: clamp(1.35rem, 2.6vw, 1.85rem); margin-bottom: 16px; }
.prose h2 + p, .prose h2 + ul { margin-top: 0; }
.prose p { color: var(--text-soft); }
.block { margin-bottom: clamp(34px, 4vw, 52px); }
.block:last-child { margin-bottom: 0; }

.note {
  display: flex;
  gap: 13px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: rgba(239, 68, 68, 0.06);
  border: 1px dashed rgba(239, 68, 68, 0.35);
  color: var(--danger-fg);
  font-size: 0.88rem;
  margin-block-start: 18px;
}
.note svg { width: 19px; height: 19px; flex: none; margin-block-start: 4px; }

/* curriculum accordion */
.modules { display: flex; flex-direction: column; gap: 13px; }
.module {
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--surf-a), var(--surf-lo));
  overflow: hidden;
  transition: border-color var(--t);
}
.module.is-open { border-color: rgba(48, 190, 240, 0.4); }
.module__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 20px;
  background: none;
  border: 0;
  text-align: start;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  transition: color var(--t-fast);
}
.module__head:hover { color: var(--cyan-fg); }
.module__n {
  width: 34px; height: 34px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  flex: none;
  background: rgba(48, 190, 240, 0.13);
  border: 1px solid rgba(48, 190, 240, 0.28);
  color: var(--cyan-fg);
  font-size: 0.88rem;
  font-weight: 700;
}
.module__t { flex: 1; }
.module__chev {
  flex: none;
  width: 20px; height: 20px;
  color: var(--muted);
  transition: transform var(--t-fast), color var(--t-fast);
}
.module.is-open .module__chev { transform: rotate(180deg); color: var(--cyan-fg); }
.module__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t);
}
.module.is-open .module__body { max-height: 420px; }
.module__body ul { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.module__body li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--muted);
  font-size: 0.93rem;
}
.module__body li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  flex: none;
  margin-block-start: 11px;
}

/* checklist (who this is for) */
.checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--glass);
  border: 1px solid var(--border);
  font-size: 0.93rem;
  color: var(--text-soft);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.checklist li:hover { border-color: rgba(48, 190, 240, 0.35); transform: translateY(-3px); }
.checklist li svg { width: 20px; height: 20px; color: var(--cyan-fg); flex: none; margin-block-start: 3px; }

/* sticky sidebar */
.sidebar { position: sticky; top: calc(var(--nav-h) + 22px); display: flex; flex-direction: column; gap: 18px; }
.buy-card {
  border-radius: var(--r-lg);
  border: 1px solid var(--border-strong);
  background: linear-gradient(160deg, var(--surf-b), var(--surf-lo));
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.buy-card__top {
  padding: 26px 24px 22px;
  border-block-end: 1px solid var(--border);
  background: radial-gradient(300px 160px at 80% 0%, rgba(48, 190, 240, 0.14), transparent 70%);
}
.buy-card__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.buy-card__price .price__new { font-size: 2.5rem; }
.buy-card__save {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  color: var(--ok-fg);
  font-weight: 700;
}
.buy-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 18px; }
.specs { display: flex; flex-direction: column; gap: 0; }
.spec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 13px;
  border-block-end: 1px solid var(--border);
  font-size: 0.92rem;
}
.spec:last-child { border-block-end: 0; }
.spec__k { color: var(--muted); display: inline-flex; align-items: center; gap: 9px; }
.spec__k svg { width: 16px; height: 16px; color: var(--cyan-fg); flex: none; }
.spec__v { font-family: var(--font-head); font-weight: 700; }
.buy-card__actions { display: flex; flex-direction: column; gap: 11px; }
.buy-card__fine {
  font-size: 0.79rem;
  color: var(--muted-dim);
  text-align: center;
  line-height: 1.7;
}

.help-card { padding: 22px 24px; }
.help-card h4 { font-family: var(--font-head); font-weight: 700; margin-bottom: 8px; }
.help-card p { color: var(--muted); font-size: 0.88rem; margin-bottom: 16px; }
.help-card__phones { display: flex; flex-direction: column; gap: 10px; }
.help-card__phones a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--text-soft);
  direction: ltr;
  justify-content: flex-end;
  transition: color var(--t-fast);
}
.help-card__phones a:hover { color: var(--cyan-fg); }
.help-card__phones svg { width: 15px; height: 15px; color: var(--cyan-fg); flex: none; }

/* not-found panel */
.notfound {
  text-align: center;
  padding: clamp(48px, 8vw, 96px) 24px;
  max-width: 620px;
  margin-inline: auto;
}
.notfound__icon {
  width: 84px; height: 84px;
  border-radius: var(--r-md);
  margin: 0 auto 26px;
  display: grid;
  place-items: center;
  background: rgba(48, 190, 240, 0.1);
  border: 1px solid rgba(48, 190, 240, 0.3);
  color: var(--cyan-fg);
}
.notfound__icon svg { width: 40px; height: 40px; }
.notfound h1 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); margin-bottom: 14px; }
.notfound p { color: var(--muted); margin-bottom: 28px; }

/* ------------------------------------------------------- 19. ABOUT PAGE */
.about-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: center;
}
.about-visual { position: relative; display: grid; place-items: center; }
.about-visual img { max-width: 420px; width: 100%; opacity: 0.9; }

.mv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.mv-card {
  padding: 32px 28px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--surf-a), var(--surf-lo));
  position: relative;
  overflow: hidden;
  transition: transform var(--t), border-color var(--t);
}
.mv-card:hover { transform: translateY(-6px); border-color: var(--border-strong); }
.mv-card__badge {
  width: 54px; height: 54px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: var(--cyan);
  color: var(--on-accent);
}
.mv-card:nth-child(2) .mv-card__badge { background: var(--grad-navy); color: #fff; }
.mv-card__badge svg { width: 26px; height: 26px; }
.mv-card h3 { margin-bottom: 12px; }
.mv-card p { color: var(--muted); font-size: 0.96rem; }

.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.value-card {
  padding: 24px 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--glass);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.value-card:hover { border-color: rgba(48, 190, 240, 0.35); transform: translateY(-5px); }
.value-card__n {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--turq-fg);      /* achievement voice, same as .stat__num */
  display: block;
  margin-bottom: 10px;
}
.value-card h4 { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; margin-bottom: 8px; }
.value-card p { color: var(--muted); font-size: 0.89rem; }

/* ---------------------------------------------------- 20. CONTACT & FORMS */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}
.contact-card {
  padding: 28px 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--surf-a), var(--surf-lo));
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), border-color var(--t);
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.contact-card:hover { transform: translateY(-7px); border-color: rgba(48, 190, 240, 0.35); box-shadow: var(--shadow-md); }
.contact-card__icon {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: rgba(48, 190, 240, 0.13);
  border: 1px solid rgba(48, 190, 240, 0.3);
  color: var(--cyan-fg);
}
.contact-card__icon svg { width: 24px; height: 24px; }
.contact-card h3 { font-size: 1.08rem; }
.contact-card__lines { display: flex; flex-direction: column; gap: 8px; }
.contact-card__lines a, .contact-card__lines span {
  color: var(--muted);
  font-size: 0.93rem;
  transition: color var(--t-fast);
}
.contact-card__lines a:hover { color: var(--cyan-fg); }
.contact-card__lines .ltr { direction: ltr; text-align: end; }

.form-layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 46px);
  align-items: start;
}
.form-card {
  padding: clamp(26px, 3.5vw, 40px);
  border-radius: var(--r-xl);
  border: 1px solid var(--border-strong);
  background: linear-gradient(160deg, var(--surf-b), var(--surf-lo));
}
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
.field label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.89rem;
  color: var(--text-soft);
}
.field label .req { color: var(--cyan-fg); }
.field input, .field textarea, .field select {
  background: var(--surf-a);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  font-size: 0.96rem;
  font-family: var(--font-body);
  transition: border-color var(--t-fast), background var(--t-fast);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 132px; line-height: 1.8; }
.field select { appearance: none; cursor: pointer; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-dim); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: rgba(48, 190, 240, 0.6);
  background: var(--surf-b);
  box-shadow: 0 0 0 4px rgba(48, 190, 240, 0.16);
}
/* The `outline: none` above (specificity 0,2,1) would otherwise beat the global
   :focus-visible rule (0,1,0), leaving keyboard users with only a faint ring.
   Restore a real outline for keyboard focus while keeping the softer look for
   mouse/touch focus. */
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 2px solid var(--cyan-fg);
  outline-offset: 2px;
}
.field input:invalid:not(:placeholder-shown) { border-color: rgba(239, 68, 68, 0.6); }
.field__hint { font-size: 0.79rem; color: var(--muted-dim); }

.form-note {
  display: flex;
  gap: 12px;
  padding: 15px 17px;
  border-radius: var(--r-md);
  background: rgba(48, 190, 240, 0.06);
  border: 1px solid rgba(48, 190, 240, 0.25);
  color: var(--blue-fg);
  font-size: 0.85rem;
  line-height: 1.7;
  margin-bottom: 22px;
}
.form-note svg { width: 19px; height: 19px; flex: none; margin-block-start: 3px; }

.form-status {
  margin-block-start: 16px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  display: none;
}
.form-status.is-ok {
  display: block;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.35);
  color: var(--ok-fg);
}
.form-status.is-err {
  display: block;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: var(--danger-fg);
}

.map-wrap {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-md);
  position: relative;
  background: var(--bg-elev-2);
}
.map-wrap iframe {
  width: 100%;
  height: 100%;
  min-height: 380px;
  border: 0;
  display: block;
  /* Dark theme inverts the map to match; light theme leaves it alone, since
     Google's tiles are already light. */
  filter: var(--map-filter);
}
.hours-card { padding: 24px; margin-block-start: 18px; }
.hours-card h4 { font-family: var(--font-head); font-weight: 700; margin-bottom: 14px; }

/* --------------------------------------------- 21. REVEAL & UTILITIES */
/* -----------------------------------------------------------------------------
   Scroll reveal — implemented with an ANIMATION, not a transition.

   Why: most revealed elements are also components with their own hover
   transitions (`.card`, `.feature-card`, `.inst-card` …). `.reveal` and `.card`
   are both single-class selectors, so the one appearing later in this file wins
   the `transition` property — and `.reveal` lives here, near the end. The result
   was that `.reveal`'s `transition: opacity, transform` silently replaced every
   card's own hover transition list, so hover animated at the reveal's 0.75s
   timing and `border-color` never transitioned at all.

   Animations occupy a separate channel from transitions, so this leaves each
   component's `transition` untouched while still being fully composited
   (opacity + transform only). Also no `will-change`: there are 25+ of these per
   page and hinting them all wastes GPU memory. As of this pass there are no
   continuously-animating elements left on the page at all, so no element
   anywhere carries that hint any more.
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
}
.reveal.is-in {
  animation: reveal-in 0.75s var(--ease) forwards;
}
@keyframes reveal-in {
  to { opacity: 1; transform: none; }
}
.reveal[data-d="1"].is-in { animation-delay: 0.08s; }
.reveal[data-d="2"].is-in { animation-delay: 0.16s; }
.reveal[data-d="3"].is-in { animation-delay: 0.24s; }
.reveal[data-d="4"].is-in { animation-delay: 0.32s; }
.reveal[data-d="5"].is-in { animation-delay: 0.4s; }
.reveal[data-d="6"].is-in { animation-delay: 0.48s; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ltr { direction: ltr; unicode-bidi: isolate; }
.text-center { text-align: center; }
.mt-lg { margin-block-start: clamp(28px, 4vw, 46px); }
.center-btn { display: flex; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;      /* the reveal delays are now animation-delay */
    transition-duration: 0.01ms !important;
  }
  /* `!important` because .reveal (unrevealed) sets opacity:0 and this must win
     regardless of whether the observer ever fires. */
  .reveal, .reveal.is-in { opacity: 1 !important; transform: none !important; }
}

/* -------------------------------------------------------- 22. RESPONSIVE */
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .detail-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .nav__links { display: none; }
  .nav__actions .btn--nav-login { display: none; }
  .burger { display: flex; }
  /* Emblem drops below the headline and shrinks — a full-width rotating mark on
     a phone would push the CTAs off screen. */
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { max-width: 340px; margin-inline: auto; }
  .hero__sub { max-width: none; }
  .cat-grid { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-hero__grid { grid-template-columns: 1fr; }
  .course-hero__img { order: -1; }
  .about-grid { grid-template-columns: 1fr; }
  .about-visual { max-width: 360px; margin-inline: auto; }
  .form-layout { grid-template-columns: 1fr; }
  .mv-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  :root { --gutter: 18px; }
  .topbar__inner { justify-content: center; row-gap: 6px; padding-block: 8px; }
  .topbar__left { display: none; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .stat:nth-child(3)::before { display: none; }
  .stat:nth-child(odd)::before { display: none; }
  .checklist { grid-template-columns: 1fr; }
  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .footer__bottom { justify-content: center; text-align: center; }
  .form-row { grid-template-columns: 1fr; }
  .courses-grid { grid-template-columns: 1fr; }
  .inst-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
  .inst-card { padding: 20px 12px 18px; }
  .inst-card__photo { width: 88px; height: 88px; }
  .filters { width: 100%; border-radius: var(--r-lg); }
  .filter { flex: 1 1 auto; justify-content: center; padding: 10px 16px; font-size: 0.86rem; }
  .tst__quote { padding-inline-start: 32px; }
  .tst__ctrls { flex-direction: column-reverse; gap: 20px; }
  .hero__ctas .btn { flex: 1 1 100%; }

  /* The proof band keeps its exact 2.2:1 ratio at every width, because that is
     the only ratio where nobody in the cohort gets clipped — the group fills the
     frame almost edge to edge. At 375px that leaves a 170px-tall strip, which is
     too shallow to also carry an overlaid caption. So on small screens the
     caption drops out of the image and sits beneath it as normal text.

     Note the colour reset: the overlaid version is white-on-scrim, but once the
     caption sits on the page it has to inherit the page's own ink — otherwise
     white text lands on the light theme's pale surface and vanishes. */
  .proof-band__cap {
    position: static;
    background: var(--band);
    color: var(--text);
    padding-block: 18px 4px;
  }
  .proof-band__cap span { color: var(--muted); }
}

@media (max-width: 420px) {
  .brand__logo { width: 42px; height: 42px; }
  .brand__name { font-size: 0.9rem; }
  .brand__tag { font-size: 0.68rem; }
  .inst-grid { grid-template-columns: repeat(2, 1fr); }
  .buy-card__price .price__new { font-size: 2rem; }
}

/* =============================================================================
   23. GALLERY — the institute's own photographs
   Editorial mosaic rather than a uniform grid: the certificates photo takes a
   2×2 feature tile because it is the strongest proof on the site, one tile runs
   wide, the rest are standard. Plus a dependency-free lightbox.
   ========================================================================== */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  box-shadow: var(--shadow-sm);
}
.shot__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  line-height: 0;
}
.shot img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.shot:hover img { transform: scale(1.04); }

/* caption sits on a gradient so it stays readable over any photo */
.shot__cap {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 26px 16px 13px;
  font-size: 0.84rem;
  line-height: 1.6;
  color: #f4f7fb;
  /* Scrim ramp reshaped. The old midpoint sat at 0.55 alpha at 55% height —
     which is exactly where the caption text begins. Over a bright sunlit
     photograph, 0.55 of this navy leaves an effective ground of ~rgb(117,124,132),
     and near-white text on that is 4.1:1: below AA.
     The ramp now holds ≥0.88 across the whole text band and only fades out in
     the top quarter, where nothing is set. Worst case is now ~12:1 regardless
     of what the photograph is doing underneath. */
  background: linear-gradient(to top,
    rgba(4, 16, 31, 0.95) 0%,
    rgba(4, 16, 31, 0.88) 60%,
    rgba(4, 16, 31, 0.45) 85%,
    transparent 100%);
  pointer-events: none;
}

/* the deliberate mosaic breaks */
.shot--feature { grid-column: span 2; grid-row: span 2; }
.shot--feature img { aspect-ratio: 3 / 2.04; }
.shot--feature .shot__cap { font-size: 0.95rem; padding: 34px 20px 18px; }
.shot--wide { grid-column: span 2; }

/* ---- lightbox ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 10, 20, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__inner { position: relative; max-width: 1100px; width: 100%; }
.lightbox img {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--r-sm);
}
.lightbox__cap {
  margin-block-start: 14px;
  text-align: center;
  color: #dfe7f0;
  font-size: 0.92rem;
}
.lightbox__x,
.lightbox__nav {
  position: absolute;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  transition: background var(--t-fast);
}
.lightbox__x:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox__x { inset-block-start: -58px; inset-inline-end: 0; }
.lightbox__nav--prev { inset-inline-end: -58px; inset-block-start: 50%; transform: translateY(-50%); }
.lightbox__nav--next { inset-inline-start: -58px; inset-block-start: 50%; transform: translateY(-50%); }

@media (max-width: 980px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .shot--feature { grid-column: span 2; grid-row: span 1; }
  .shot--wide { grid-column: span 2; }
  .lightbox__nav--prev { inset-inline-end: 4px; }
  .lightbox__nav--next { inset-inline-start: 4px; }
}
@media (max-width: 560px) {
  .gallery { grid-template-columns: 1fr; gap: 10px; }
  .shot--feature, .shot--wide { grid-column: span 1; }
}