/* ==========================================================================
   GrowthX Trading Lab — Design System
   Premium aesthetic: white / cyan, glass surfaces, restrained
   neumorphic relief, deeper cyan on elite tiers. Light mode only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Canvas — white, with a cool tint for recessed bands. */
    --bg:            #ffffff;
    --bg-2:          #f2f6fc;

    /* Translucent glass surfaces sit on white, so they stay white-based. */
    --surface:       rgba(255, 255, 255, .66);
    --surface-2:     rgba(255, 255, 255, .86);

    /* Tints derived from ink — every hairline, fill and hover wash. */
    --tint-a:        rgba(12, 38, 74, .04);
    --tint-b:        rgba(12, 38, 74, .07);
    --tint-c:        rgba(12, 38, 74, .11);
    --tint-d:        rgba(12, 38, 74, .18);
    --tint-e:        rgba(12, 38, 74, .28);
    --stroke:        var(--tint-c);
    --stroke-2:      var(--tint-d);

    /* Specular highlight on glass. */
    --sheen:         rgba(255, 255, 255, .9);
    --sheen-soft:    rgba(255, 255, 255, .55);

    /* Ink — deep navy rather than pure black, to sit with the blue. */
    --ink:           #0b2444;
    --ink-2:         rgba(11, 36, 68, .84);
    --ink-3:         rgba(11, 36, 68, .62);
    --ink-4:         rgba(11, 36, 68, .44);

    /* Accents — one cyan family. The brand tone #26add5 is bright, so it fills
       and decorates; text roles step down the same hue to stay legible on
       white. The --gold-* names are historical and now carry the cyan. */
    --accent:        #26add5;   /* brand tone — fills, icons, gradients */
    --accent-2:      #0f708c;
    --accent-3:      #26add5;
    --gold:          #26add5;
    --gold-2:        #0f708c;
    --gold-hi:       #7fd8ee;
    --gold-fill:     #4ec4e4;
    /* Text-safe steps: #26add5 is only 2.62:1 on white, so anything that sets
       a text colour uses these instead. */
    --blue:          #0f708c;   /* 5.65:1 — body text, links */
    --blue-2:        #0a5c73;   /* 7.52:1 — headings, eyebrows */
    --blue-hi:       #1b93b8;   /* 3.55:1 — large display text only */
    --up:            #12885c;
    --down:          #cf3244;

    /* Brand cyan into a paler tint. The mid stop sits at 70% so a filled
       button stays dark enough for its ink label at every stop. */
    --grad:          linear-gradient(115deg, var(--gold) 0%, var(--gold-fill) 70%, var(--gold-hi) 100%);
    --grad-soft:     linear-gradient(115deg, rgba(38,173,213,.16), rgba(15,112,140,.08) 60%, rgba(38,173,213,.08));
    --grad-gold:     var(--grad);

    /* Ambient mesh stops — cyan wash behind the page. */
    --mesh-1:        rgba(127, 216, 238, .38);
    --mesh-2:        rgba(38, 173, 213, .20);
    --mesh-3:        rgba(127, 216, 238, .26);
    --mesh-4:        rgba(38, 173, 213, .26);
    --mesh-5:        rgba(38, 173, 213, .14);

    /* Opens on the brand cyan and deepens through the text-safe steps, so the
       accent line reads as #26add5 while most of its area clears 3:1. */
    --grad-text:     linear-gradient(115deg, var(--accent) 0%, var(--blue-hi) 45%, var(--blue) 100%);
    /* Clipped to glyphs — darker than the fill gradient so it stays legible. */
    --grad-gold-ink: linear-gradient(115deg, #7fd8ee 0%, var(--accent) 45%, var(--accent-2) 100%);

    /* Type */
    --font-display:  'Sora', 'Segoe UI', system-ui, sans-serif;
    --font-body:     'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:     'JetBrains Mono', ui-monospace, monospace;

    /* Space + form */
    --shell:         1240px;
    --r-sm:          12px;
    --r:             18px;
    --r-lg:          26px;
    --r-xl:          34px;
    /* Applied top AND bottom, so the gap between two sections is double this. */
    --pad-sec:       clamp(44px, 5.5vw, 82px);

    /* Elevation — soft, cool-tinted shadows read as depth on white. */
    --shadow-sm:     0 2px 10px rgba(12, 38, 74, .06);
    --shadow:        0 18px 44px -20px rgba(12, 38, 74, .22);
    --shadow-lg:     0 40px 90px -34px rgba(12, 38, 74, .3);
    --glow:          0 0 0 1px rgba(38, 173, 213, .22), 0 24px 60px -28px rgba(38, 173, 213, .4);

    --neu:           inset 0 1px 0 var(--sheen),
                     inset 0 -1px 0 rgba(12, 38, 74, .05),
                     0 12px 30px -18px rgba(12, 38, 74, .22);

    --ease:          cubic-bezier(.22, 1, .36, 1);
    --ease-io:       cubic-bezier(.65, .05, .36, 1);
    --nav-h:         76px;
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 24px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

/* The UA rule for [hidden] is display:none at element specificity, so any class
   that sets `display` silently beats it. Everything here that toggles `hidden` */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}

.skip-link {
    position: fixed; top: -100px; left: 16px; z-index: 999;
    padding: 12px 18px; border-radius: var(--r-sm);
    background: var(--accent); color: #04222e; font-weight: 600;
    transition: top .25s var(--ease);
}
.skip-link:focus { top: 16px; }

.ic { width: 18px; height: 18px; flex: none; }
.ic--lg { width: 26px; height: 26px; }

/* Type scale */
.h1, .h2, .h3, .h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.035em; line-height: 1.06; margin: 0; }
.h1 { font-size: clamp(2.3rem, 4.7vw, 3.7rem); }
.h2 { font-size: clamp(2rem, 4.1vw, 3.4rem); line-height: 1.08; }
.h3 { font-size: clamp(1.35rem, 2.1vw, 1.85rem); line-height: 1.18; letter-spacing: -.028em; }
.h4 { font-size: 1.08rem; line-height: 1.32; letter-spacing: -.02em; }

/* Capped at a comfortable measure so lines break evenly instead of running the */
.lede {
    color: var(--ink-2);
    font-size: clamp(.94rem, 1.02vw, 1.035rem);
    line-height: 1.68;
    max-width: 64ch;
    text-wrap: pretty;
}
.muted { color: var(--ink-3); }

.grad-text {
    background: var(--grad-text);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: shimmer 7s var(--ease-io) infinite;
}
@keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}


.eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    margin: 0 0 20px;
    font-family: var(--font-mono); font-size: .715rem; font-weight: 500;
    letter-spacing: .19em; text-transform: uppercase; color: var(--ink-3);
}
.eyebrow .ic { width: 15px; height: 15px; color: var(--accent); }

.shell { width: min(100% - 40px, var(--shell)); margin-inline: auto; }
.section { position: relative; padding-block: var(--pad-sec); }
.section__head { max-width: 720px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.section__head--center { margin-inline: auto; text-align: center; }

.section__head .lede { margin-top: 20px; }
/* The measure cap needs re-centring wherever the block itself is centred. */
.section__head--center .lede { margin-inline: auto; }

/* --------------------------------------------------------------------------
   3. Ambient layers
   -------------------------------------------------------------------------- */
.ambient {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none; overflow: hidden;
}

.ambient__mesh {
    position: absolute; inset: -25%;
    background:
        radial-gradient(44% 40% at 16% 10%, var(--mesh-1), transparent 62%),
        radial-gradient(38% 34% at 86% 22%, var(--mesh-2), transparent 64%),
        radial-gradient(48% 44% at 66% 88%, var(--mesh-3), transparent 66%),
        radial-gradient(40% 38% at 4% 58%, var(--mesh-4), transparent 68%),
        radial-gradient(52% 48% at 34% 96%, var(--mesh-5), transparent 70%);
    filter: blur(28px);
    animation: meshDrift 34s var(--ease-io) infinite alternate;
    will-change: transform;
}

@keyframes meshDrift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-3%, 2%, 0) scale(1.08); }
    100% { transform: translate3d(3%, -2%, 0) scale(1.04); }
}

.ambient__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(12, 38, 74, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(12, 38, 74, .05) 1px, transparent 1px);
    background-size: 76px 76px;
    mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
}

/* Background market chart. Lives in the fixed ambient layer, so it is one
   full-screen graphic for the whole site rather than per-section artwork.
   JS writes --chart-y from scroll progress; the transform is the only thing
   that changes, so scrolling stays on the compositor. */
.ambient__chart {
    position: absolute; left: -6%; right: -6%; top: -24%; bottom: -24%;
    opacity: .64;
    transform: translate3d(0, var(--chart-y, 0px), 0);
    will-change: transform;
}
.ambient__chart svg { width: 100%; height: 100%; display: block; }

/* Candles sit behind the moving-average line. Up and down use the market
   colours the rest of the site already uses, held well back so body copy
   never has to compete with them. */
.ambient__chart-candles { opacity: .44; }
.ambient__chart-candles rect { stroke: none; }
.ambient__chart-candles line { stroke-width: 1.6; stroke-linecap: round; }
/* Gold and blue rather than the market green/red — these are decoration, and
   the warm/cool pair sits with the banner wash instead of fighting it. The
   blue is deeper than the cyan trend line so the candles stay distinct
   from it rather than merging into one wash of the same hue. */
.c-up   { fill: #d9a441; }
.c-up-w { stroke: #d9a441; }
.c-dn   { fill: #2f7fb8; }
.c-dn-w { stroke: #2f7fb8; }

/* The moving average reads over the candles as the trend. */
.ambient__chart-line {
    fill: none; stroke: url(#acLine); stroke-width: 3;
    stroke-linecap: round; stroke-linejoin: round;
}

/* Readability scrim. Painted over the mesh, grid and chart so section copy has
   a calm ground; the particles and cursor light sit above it and stay crisp.
   Slightly stronger through the middle band, which is where body text sits. */
.ambient__scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .34) 0%,
            rgba(255, 255, 255, .50) 42%,
            rgba(255, 255, 255, .50) 58%,
            rgba(255, 255, 255, .34) 100%),
        rgba(255, 255, 255, .08);
}

.ambient__particles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .62; }

/* Mouse-follow lighting */
.ambient__cursor {
    position: absolute; top: 0; left: 0;
    width: 620px; height: 620px; margin: -310px 0 0 -310px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(127, 216, 238, .22) 0%, rgba(38, 173, 213, .08) 40%, transparent 68%);
    opacity: 0; transition: opacity .5s var(--ease);
    will-change: transform;
}
body.has-pointer .ambient__cursor { opacity: 1; }

/* Mouse-follow lighting */

/* --------------------------------------------------------------------------
   4. Page-transition curtain
   -------------------------------------------------------------------------- */
.curtain {
    position: fixed; inset: 0; z-index: 900;
    display: grid; place-items: center;
    pointer-events: none;
}

/* Two panels so the exit splits rather than sliding as one slab. */
.curtain__panel {
    position: absolute; left: 0; right: 0; height: 50.5%;
    background: var(--bg);
    transition: transform .85s var(--ease) .18s;
}
.curtain__panel--top { top: 0; }
.curtain__panel--bot { bottom: 0; }

.curtain__inner {
    position: relative; z-index: 1;
    display: grid; justify-items: center; gap: 22px;
    width: min(76vw, 300px);
    transition: opacity .32s var(--ease), transform .32s var(--ease);
}

/* --- the mark --- */
.curtain__mark { width: clamp(132px, 18vw, 168px); height: auto; overflow: visible; }

.curtain__bars rect {
    fill: var(--accent-3);
    transform-box: fill-box; transform-origin: 50% 100%;
    animation: barRise 2.4s var(--ease-io) infinite;
    animation-delay: calc(var(--b) * .09s);
    opacity: .85;
}
@keyframes barRise {
    0%       { transform: scaleY(.06); opacity: .25; }
    28%, 62% { transform: scaleY(1);   opacity: .9; }
    100%     { transform: scaleY(.06); opacity: .25; }
}

.curtain__arrow, .curtain__head {
    stroke: var(--accent);
    filter: drop-shadow(0 0 6px rgba(38, 173, 213, .45));
}
.curtain__arrow {
    stroke-dasharray: 190; stroke-dashoffset: 190;
    animation: arrowDraw 2.4s var(--ease-io) infinite;
}
.curtain__head {
    stroke-dasharray: 32; stroke-dashoffset: 32;
    animation: arrowDraw 2.4s var(--ease-io) .18s infinite;
}
@keyframes arrowDraw {
    0%       { stroke-dashoffset: 190; }
    45%, 68% { stroke-dashoffset: 0; }
    100%     { stroke-dashoffset: -190; }
}

.curtain__logo {
    width: 100%; height: auto;
    opacity: .9;
}

/* --- progress hairline --- */
.curtain__bar {
    position: relative; overflow: hidden;
    width: 88px; height: 2px; border-radius: 2px;
    background: var(--tint-c);
}
.curtain__bar i {
    position: absolute; inset: 0 auto 0 0;
    width: 40%; border-radius: inherit;
    background: var(--grad);
    animation: curtainSweep 1.25s var(--ease-io) infinite;
}
@keyframes curtainSweep {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(250%); }
}

/* markPulse is still used by the terminal's live dot. */
@keyframes markPulse { from { opacity: .35; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }

/* Exit: the mark drops away first, then the panels part. */
body:not(.is-loading) .curtain__inner { opacity: 0; transform: scale(.94); }
body:not(.is-loading) .curtain__panel--top { transform: translateY(-100%); }
body:not(.is-loading) .curtain__panel--bot { transform: translateY(100%); }

body.is-leaving .curtain__panel { transform: none; transition-duration: .5s; transition-delay: 0s; }
body.is-leaving .curtain__inner { opacity: 1; transform: none; transition-delay: .16s; }

/* --------------------------------------------------------------------------
   5. Scroll progress
   -------------------------------------------------------------------------- */
.scroll-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 800;
    background: var(--tint-b);
}
.scroll-progress span {
    display: block; height: 100%; width: 0;
    background: var(--grad);
    box-shadow: 0 0 14px rgba(38, 173, 213, .8);
    transform-origin: left;
}

/* --------------------------------------------------------------------------
   6. Glass + neumorphic surfaces
   -------------------------------------------------------------------------- */
.glass {
    position: relative;
    background: linear-gradient(160deg, var(--surface-2), var(--surface));
    border: 1px solid var(--stroke);
    border-radius: var(--r-lg);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    backdrop-filter: blur(26px) saturate(150%);
    box-shadow: var(--shadow);
}

/* Specular top edge — the detail that sells the glass. A warm tint in the */
.glass::before {
    content: ''; position: absolute; inset: 0;
    border-radius: inherit; pointer-events: none;
    background:
        linear-gradient(180deg, var(--sheen), transparent 30%),
        linear-gradient(180deg, rgba(38, 173, 213, .10), transparent 16%);
    opacity: .85;
}

.glass--soft { background: linear-gradient(160deg, var(--surface), var(--sheen-soft)); }

/* Cards that respond to the pointer with a moving highlight */
.lume { position: relative; overflow: hidden; isolation: isolate; }
.lume::after {
    content: ''; position: absolute; inset: -1px; z-index: -1;
    border-radius: inherit; pointer-events: none;
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
                rgba(38, 173, 213, .18), rgba(38, 173, 213, .07) 42%, transparent 68%);
    opacity: 0; transition: opacity .45s var(--ease);
}
.lume:hover::after, .lume:focus-within::after { opacity: 1; }


.neu {
    background: linear-gradient(165deg, var(--tint-b), var(--tint-a));
    box-shadow: var(--neu);
    border: 1px solid var(--stroke);
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 13px 24px;
    border-radius: 999px;
    font-family: var(--font-display); font-size: .935rem; font-weight: 550;
    letter-spacing: -.01em; white-space: nowrap;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease),
                background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn .ic { transition: transform .4s var(--ease); }

.btn:active { opacity: .8; }
.btn:hover .ic:last-child { transform: translateX(3px); }

.btn--lg { padding: 16px 30px; font-size: 1rem; }
.btn--block { width: 100%; }

.btn--primary {
    color: #04222e;
    background: var(--grad);
    background-size: 180% 180%;
    background-position: 0% 50%;
    box-shadow: 0 12px 34px -12px rgba(38, 173, 213, .55);
    transition: background-position .7s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.btn--primary::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: skewX(-18deg); opacity: 0;
}
.btn--primary:hover::after { animation: sweep .85s var(--ease) forwards; }
.btn--primary:hover {
    background-position: 100% 50%;
    box-shadow: 0 20px 46px -14px rgba(38, 173, 213, .7);
}

/* Sweep highlight */
.btn--primary::after { content: none; }

@keyframes sweep { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 0; } }

.btn--glass {
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--stroke-2);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.btn--glass:hover { background: var(--surface-2); border-color: var(--tint-e); }

.btn--ghost { color: var(--ink-2); padding-inline: 14px; }
.btn--ghost:hover { color: var(--ink); }

/* A schedule note that happens to be clickable. Sits a step below the other
   two so a row of three does not read as three equal calls to action: dashed
   edge, lighter label, and the icon carries the accent. */
.btn--note {
    color: var(--ink-2);
    background: transparent;
    border-style: dashed;
    border-color: var(--stroke-2);
    font-weight: 500;
}
.btn--note .ic { color: var(--accent); }
.btn--note:hover {
    color: var(--ink);
    background: var(--surface);
    border-style: solid;
    border-color: var(--blue);
}

.btn--gold {
    color: #04222e; background: var(--grad-gold);
    box-shadow: 0 12px 34px -14px rgba(38, 173, 213, .55);
}
.btn--gold:hover { background: var(--gold-2); }

/* --------------------------------------------------------------------------
   8. Navigation
   -------------------------------------------------------------------------- */
/* Flush bar: transparent over the hero so the banner reads full-bleed, carried
   by a single hairline. Once the page moves it fades to solid white. */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 700;
    border-bottom: 1px solid var(--stroke);
    transition: background-color .4s var(--ease), border-color .4s var(--ease),
                box-shadow .4s var(--ease);
}
body.is-scrolled .nav {
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border-bottom-color: transparent;
    box-shadow: 0 16px 40px -30px rgba(12, 38, 74, .45);
}
.nav__inner {
    width: min(100% - 40px, var(--shell)); margin-inline: auto;
    height: var(--nav-h);
    display: flex; align-items: center; gap: 22px;
    transition: height .4s var(--ease);
}
body.is-scrolled .nav__inner { height: 62px; }


.brand { display: inline-flex; align-items: center; flex: none; }

/* The logo is a wide 6:1 lockup, so it is sized by height and lets width follow. */
.brand__logo {
    height: 38px; width: auto;
    transition: height .45s var(--ease), transform .5s var(--ease), filter .5s var(--ease);
}
.brand:hover .brand__logo { transform: translateY(-1px); filter: drop-shadow(0 6px 18px rgba(38, 173, 213, .5)); }
body.is-scrolled .nav .brand__logo { height: 32px; }

/* Only the full lockup shows by default; the mark-only crop takes over on phones. */
.brand__logo--mark { display: none; }

.brand--footer .brand__logo { height: 42px; }

.nav__links { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.nav__link {
    position: relative; padding: 9px 15px; border-radius: 999px;
    font-size: .915rem; font-weight: 450; color: var(--ink-2);
    transition: color .3s var(--ease), background-color .3s var(--ease);
}
.nav__link:hover { color: var(--ink); background: var(--tint-b); }
.nav__link.is-active { color: var(--ink); }

/* Underline grows from the centre on hover, and stays put when active. */
.nav__link::after {
    content: ''; position: absolute; left: 50%; bottom: 3px;
    width: 16px; height: 2px; margin-left: -8px; border-radius: 2px;
    background: var(--grad);
    transform: scaleX(0); transform-origin: center;
    transition: transform .35s var(--ease);
}
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.nav__phone { font-family: var(--font-body); font-size: .87rem; }

.nav__burger {
    display: none; width: 42px; height: 42px;
    border-radius: 12px; border: 1px solid var(--stroke);
    background: var(--surface);
    place-items: center; gap: 5px; align-content: center; justify-items: center;
}
.nav__burger span {
    display: block; width: 17px; height: 1.6px; border-radius: 2px; background: var(--ink);
    transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
    position: fixed; inset: 0; z-index: 750;
    background: rgba(11, 36, 68, .38);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    opacity: 0; transition: opacity .4s var(--ease);
}
.drawer[hidden] { display: none; }
.drawer.is-open { opacity: 1; }

.drawer__panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(88vw, 400px);
    border-radius: var(--r-xl) 0 0 var(--r-xl);
    padding: 26px 24px calc(26px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .55s var(--ease);
    overflow-y: auto;
}
.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__close {
    align-self: flex-end; width: 42px; height: 42px; display: grid; place-items: center;
    border-radius: 12px; border: 1px solid var(--stroke); background: var(--surface);
}
.drawer__links { margin-top: 28px; display: flex; flex-direction: column; }
.drawer__link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 17px 4px; border-bottom: 1px solid var(--stroke);
    font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; letter-spacing: -.03em;
    opacity: 0; transform: translateX(22px);
    transition: color .3s var(--ease);
}
.drawer.is-open .drawer__link {
    animation: drawerIn .5s var(--ease) forwards;
    animation-delay: calc(.1s + var(--i) * .06s);
}
@keyframes drawerIn { to { opacity: 1; transform: translateX(0); } }
.drawer__link .ic { color: var(--ink-4); transition: transform .35s var(--ease), color .35s var(--ease); }
.drawer__link:hover .ic { transform: translateX(5px); color: var(--accent); }

.drawer__foot { margin-top: auto; padding-top: 30px; display: grid; gap: 12px; }
.drawer__meta { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: .9rem; }
.drawer__meta .ic { color: var(--accent); }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative; z-index: 1;
    /* Full-screen banner. svh tracks the visible area once mobile browser
       chrome collapses; vh is the fallback for anything that lacks it. */
    min-height: 100vh;
    min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    padding-top: calc(var(--nav-h) + 40px);
    padding-bottom: clamp(26px, 4vh, 54px);
    /* Opaque, so the page-wide ambient mesh, grid and particles stop at the
       banner and this wash is the only thing behind the type.

       Four soft blooms over white: gold warms the upper left, brand cyan the
       upper right, then both echo lower down and settle back to white behind
       the copy. Each stop fades to its OWN colour at zero alpha rather than
       `transparent` — `transparent` is rgba(0,0,0,0), which greys the midpoint
       and leaves a dirty halo. */
    /* Only a light veil. At .86 this base was letting through just 14% of the
       ambient layer, which killed the chart in the banner once the scrim had
       taken its cut too. Kept low so the banner shows the same chart as the
       rest of the site; the wash below still supplies the blue and gold. */
    background: rgba(255, 255, 255, .20);
    overflow: hidden;   /* the drifting blooms must not spill past the banner */
}

/* The wash lives on ::before so it can move. Each bloom is drawn centred and
   then placed by background-position, which lets one animation carry all four
   at different speeds — a single transform would slide them as one slab.
   Every stop fades to its OWN colour at zero alpha rather than `transparent`;
   `transparent` is rgba(0,0,0,0) and would grey the midpoint into a halo. */
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    pointer-events: none;
    background-repeat: no-repeat;
    background-image:
        radial-gradient(34% 42% at 50% 50%, rgba(232, 170, 66, .38) 0%, rgba(232, 170, 66, 0) 70%),
        radial-gradient(34% 42% at 50% 50%, rgba(38, 173, 213, .42) 0%, rgba(38, 173, 213, 0) 70%),
        radial-gradient(38% 44% at 50% 50%, rgba(15, 112, 140, .22) 0%, rgba(15, 112, 140, 0) 72%),
        radial-gradient(30% 36% at 50% 50%, rgba(232, 170, 66, .26) 0%, rgba(232, 170, 66, 0) 70%);
    background-size: 126% 126%, 120% 120%, 134% 134%, 110% 110%;
    /* Each bloom drifts inside its own quadrant. Letting the warm and cool ones
       cross turns the overlap green — alpha compositing mixes yellow over cyan
       — so they are kept apart rather than blended.

       Note the inversion: because background-size is over 100%, a position of
       4% shows the image's LEFT edge, which pushes that bloom's centre to the
       RIGHT of the banner. Net result is cool tones left, warm right. */
    background-position: 4% 8%, 96% 14%, 20% 92%, 88% 88%;
    animation: heroDrift 34s var(--ease-io) infinite alternate;
    will-change: background-position;
}
@keyframes heroDrift {
    to { background-position: 16% 26%, 86% 2%, 6% 74%, 98% 70%; }
}

/* Above the blooms: settles the wash to white before the section boundary,
   otherwise the tint cuts off as a hard horizontal line. */
.hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, .96) 97%);
}

/* Type-led centred stack: kicker over a short gold-rule, headline, supporting
   copy, actions, then credentials under a hairline. */
.hero__copy {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    max-width: 940px; margin-inline: auto;
}

.hero__kicker {
    position: relative;
    margin: 0 0 clamp(26px, 3.4vh, 40px);
    padding-bottom: clamp(14px, 1.8vh, 20px);
    font-family: var(--font-mono);
    font-size: 1rem; font-weight: 600;
    /* Tracking eased as the size went up — .22em was tuned for .84rem and
       starts pulling the words apart at this scale. */
    letter-spacing: .17em; text-transform: uppercase;
    color: var(--blue);
}
/* A short centred hairline reads better under centred type than a full rule. */
.hero__kicker::after {
    content: ""; position: absolute; left: 50%; bottom: 0;
    width: 58px; height: 1px; transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.hero__title {
    margin: 0 0 clamp(22px, 3vh, 34px);
    font-family: var(--font-display);
    font-size: clamp(2.15rem, 5.6vw, 4.2rem);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -.038em;
    text-wrap: balance;
}
.hero__title .ln {
    display: block;
    padding-bottom: .08em; margin-bottom: -.06em;
}
.hero__title .ln > span { display: block; }

/* Word cascade. Only applied once JS has split the text, so the headline is
   fully visible if the script never runs. */
.hero__title.is-words .hw {
    display: inline-block;
    opacity: 0;
    transform: translateY(.42em);
    filter: blur(10px);
}
.hero__title.is-words .ln > span.hw { display: block; }

/* Starts when the curtain parts rather than on a timer — the old fixed delay
   meant this ran and finished while the loader was still covering it. The base
   offset lines the first word up with the panels starting to move (.18s). */
body:not(.is-loading) .hero__title.is-words .hw {
    animation: wordIn .95s var(--ease) forwards;
    animation-delay: calc(240ms + var(--w, 0) * 60ms);
}
@keyframes wordIn {
    to { opacity: 1; transform: none; filter: blur(0); }
}

.hero__lede {
    max-width: 56ch;
    margin: 0 0 clamp(28px, 3.6vh, 42px);
    font-size: clamp(1rem, 1.1vw, 1.1rem);
}

/* Credentials close the block, hung off a hairline narrower than the copy. */
.hero__creds {
    margin: clamp(30px, 4vh, 46px) 0 0;
    padding-top: clamp(18px, 2.2vh, 26px);
    width: min(100%, 620px);
    border-top: 1px solid var(--stroke);
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: center; gap: 6px 14px;
    font-family: var(--font-mono);
    font-size: .82rem; font-weight: 600;
    letter-spacing: .15em; text-transform: uppercase;
    /* The deep step, not the brand tone: even at 600 this sits under the
       large-text threshold, so it needs the 4.5:1 value not the bright cyan. */
    color: var(--blue);
}
/* Separators carry the bright brand cyan — decorative, so contrast is free. */
.hero__creds i { font-style: normal; color: var(--accent); }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Centred only inside the hero — the 404 page shares this class, left-aligned. */
.hero__copy .hero__actions { justify-content: center; }

.hero__badges { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 15px; border-radius: 999px;
    border: 1px solid var(--stroke); background: var(--surface);
    font-size: .805rem; color: var(--ink-2);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.chip .ic { width: 15px; height: 15px; color: var(--accent-3); }
.chip--khda .ic { color: var(--gold); }

/* --------------------------------------------------------------------------
   11. Stat counters
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat {
    padding: 30px 26px; border-radius: var(--r-lg);
    text-align: center;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.stat:hover { transform: translateY(-5px); box-shadow: var(--glow); }
.stat__num {
    font-family: var(--font-display); font-size: clamp(2.1rem, 3.6vw, 3.1rem);
    font-weight: 650; letter-spacing: -.045em; line-height: 1;
    background: var(--grad-gold-ink); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-variant-numeric: tabular-nums;
}
.stat__num.is-done { animation: numFlash .7s var(--ease); }
@keyframes numFlash {
    0%   { filter: brightness(1); }
    35%  { filter: brightness(1.4); }
    100% { filter: brightness(1); }
}
.stat__label {
    margin-top: 12px; font-size: .8rem; color: var(--ink-3);
    letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   12. Split content blocks
   -------------------------------------------------------------------------- */
.split {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(36px, 5vw, 76px); align-items: center;
}
.split--wide { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }

.tick-list { display: grid; gap: 13px; margin-top: 28px; }
.tick-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink-2); font-size: .96rem; }
.tick-list .ic {
    width: 21px; height: 21px; flex: none; padding: 4px; margin-top: 1px;
    border-radius: 50%; color: var(--accent-3);
    background: rgba(62, 198, 234, .12); border: 1px solid rgba(62, 198, 234, .28);
}

.quote-block {
    position: relative;
    padding: 30px 32px; border-radius: var(--r-lg);
    font-family: var(--font-display); font-size: clamp(1.1rem, 1.7vw, 1.4rem);
    font-weight: 400; line-height: 1.48; letter-spacing: -.025em;
    color: var(--ink);
}
.quote-block::before {
    content: ''; position: absolute; left: 0; top: 22px; bottom: 22px; width: 2px;
    border-radius: 2px; background: var(--grad);
}

/* KHDA accreditation seal */
.seal {
    position: relative; max-width: 470px; margin-inline: auto;
    display: grid; place-items: center; border-radius: var(--r-xl);
    padding: clamp(28px, 3.4vw, 44px); text-align: center;
    overflow: hidden;
}
.seal__ring {
    position: absolute; inset: 6%;
    border: 1px solid rgba(38, 173, 213, .2); border-radius: 50%;
    animation: ringSpin2 30s linear infinite;
}
.seal__ring:nth-of-type(2) { inset: 16%; border-style: dashed; border-color: var(--tint-d); animation-duration: 44s; animation-direction: reverse; }
@keyframes ringSpin2 { to { transform: rotate(360deg); } }

.seal__body { position: relative; z-index: 1; width: 100%; }

/* The official marks are dark maroon artwork on transparency, so they are mounted */
.seal__logo {
    display: block;
    width: 100%; max-width: 320px; height: auto; margin: 0 auto 26px;
    padding: 18px 22px;
    border-radius: 16px;
    background: #f8f5ef;
    border: 1px solid var(--tint-c);
    box-shadow: 0 22px 50px -18px rgba(12, 38, 74, .18), inset 0 0 0 1px rgba(0, 0, 0, .06);
}

.seal__title { font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; letter-spacing: -.03em; }
.seal__permit {
    display: inline-block; margin-top: 12px; padding: 6px 14px;
    border-radius: 999px; border: 1px solid rgba(38, 173, 213, .3);
    background: rgba(38, 173, 213, .09);
    font-family: var(--font-mono); font-size: .74rem; color: var(--gold); letter-spacing: .09em;
}
.seal__note { margin-top: 16px; font-size: .84rem; color: var(--ink-3); max-width: 32ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   13. Feature grid
   -------------------------------------------------------------------------- */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 16px; }
.feature {
    padding: 30px 28px; border-radius: var(--r-lg);
    transition: transform .5s var(--ease), border-color .5s var(--ease);
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.feature__ic {
    width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 20px;
    border-radius: 14px; background: var(--grad-soft); border: 1px solid var(--stroke);
    transition: transform .5s var(--ease);
}
.feature:hover .feature__ic { transform: rotate(-8deg) scale(1.08); }
.feature__ic .ic { width: 22px; height: 22px; color: var(--accent); }
.feature h3 { margin: 0 0 9px; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -.025em; }
.feature p { color: var(--ink-3); font-size: .91rem; line-height: 1.62; }

/* Mentorship media — a native scroll-snap slider, so touch swipe, trackpad and */
.mentor-shot { position: relative; margin: 0; padding: 10px; border-radius: var(--r-lg); }

.mentor-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    border-radius: 16px;
    scrollbar-width: none;
}
.mentor-slider::-webkit-scrollbar { display: none; }
.mentor-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.mentor-slide {
    flex: 0 0 100%; margin: 0;
    scroll-snap-align: center; scroll-snap-stop: always;
}
.mentor-slide img {
    display: block; width: 100%; height: auto;
    border-radius: 16px;
}

.mentor-dots {
    display: flex; justify-content: center; gap: 8px;
    margin-top: 14px;
}
.mentor-dot {
    width: 26px; height: 4px; border-radius: 99px;
    background: var(--tint-d);
    transition: background-color .35s var(--ease), width .35s var(--ease);
}
.mentor-dot:hover { background: var(--tint-e); }
.mentor-dot.is-active { width: 38px; background: var(--grad); }

.mentor-note {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    margin-top: 20px;
    font-size: .93rem; color: var(--ink-2);
}
.mentor-note > span { flex: 1 1 220px; }

/* The source icons are full-colour illustrations, so they sit on a light tile */
.mentor-tiles { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.mentor-tile {
    flex: 1 1 180px;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 22px 18px; border-radius: var(--r);
    text-align: center;
    transition: transform .5s var(--ease), border-color .45s var(--ease);
}
.mentor-tile:hover { transform: translateY(-5px); border-color: var(--stroke-2); }
.mentor-tile__ic {
    width: 52px; height: 52px; display: grid; place-items: center;
    border-radius: 15px;
    background: var(--grad-soft);
    border: 1px solid var(--stroke);
    transition: transform .5s var(--ease);
}
.mentor-tile__ic .ic { width: 24px; height: 24px; color: var(--accent); }
.mentor-tile:hover .mentor-tile__ic { transform: rotate(-8deg) scale(1.06); }

/* Second tile picks up the blue so the pair reads as a set, not a repeat. */
.mentor-tiles > :nth-child(2) .mentor-tile__ic {
    background: linear-gradient(150deg, rgba(38, 173, 213, .14), rgba(127, 216, 238, .06));
    border-color: rgba(38, 173, 213, .2);
}
.mentor-tiles > :nth-child(2) .mentor-tile__ic .ic { color: var(--accent-3); }
.mentor-tile b {
    font-family: var(--font-display); font-size: .92rem; font-weight: 600;
    letter-spacing: -.02em; line-height: 1.35; color: var(--ink);
}

/* --------------------------------------------------------------------------
   14. Course cards
   -------------------------------------------------------------------------- */
.courses-rail {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(310px, 1fr);
    gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 6px 2px 22px;
    scrollbar-width: thin; scrollbar-color: var(--stroke-2) transparent;
}
.courses-rail { cursor: grab; }
.courses-rail.is-grabbing { cursor: grabbing; scroll-behavior: auto; }
/* Anything inside must not hijack the drag with its own text selection. */
.courses-rail.is-grabbing * { user-select: none; }
.courses-rail::-webkit-scrollbar { height: 6px; }
.courses-rail::-webkit-scrollbar-thumb { background: var(--stroke-2); border-radius: 99px; }
.courses-rail::-webkit-scrollbar-track { background: transparent; }

.courses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }

.course {
    position: relative; scroll-snap-align: start;
    display: flex; flex-direction: column;
    padding: 30px 26px 26px; border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.course:hover { transform: translateY(-8px); box-shadow: var(--glow); border-color: var(--stroke-2); }

/* Accent rule along the top edge that runs the full width on hover. */
.course__bar {
    position: absolute; top: 0; left: 0; height: 3px; width: 34%;
    border-radius: 0 99px 99px 0;
    background: linear-gradient(90deg, var(--accent-3), rgba(38, 173, 213, 0));
    transition: width .6s var(--ease), opacity .4s var(--ease);
    opacity: .75;
}
.course:hover .course__bar { width: 100%; opacity: 1; }
.course.is-featured .course__bar {
    background: linear-gradient(90deg, var(--gold-hi), var(--accent) 45%, rgba(38, 173, 213, 0));
    width: 100%; opacity: 1;
}

/* Diagonal light sweep on hover, above the content. */
.course__shine {
    position: absolute; inset: 0; z-index: 4;
    border-radius: inherit; overflow: hidden; pointer-events: none;
}
.course__shine::before {
    content: ''; position: absolute;
    top: -60%; left: -80%; width: 45%; height: 220%;
    background: linear-gradient(100deg, transparent, rgba(38, 173, 213, .12), transparent);
    transform: rotate(16deg);
    opacity: 0;
}
.course:hover .course__shine::before { animation: cardShine 1.05s var(--ease) forwards; }
@keyframes cardShine {
    0%   { left: -80%; opacity: 1; }
    100% { left: 150%;  opacity: 0; }
}

/* Ghost numeral — depth without adding another element to read. */
.course__no {
    position: absolute; top: 10px; right: 18px;
    font-family: var(--font-display); font-size: 3.4rem; font-weight: 700;
    letter-spacing: -.06em; line-height: 1;
    color: var(--tint-a);
    pointer-events: none;
    transition: color .5s var(--ease), transform .6s var(--ease);
}
.course:hover .course__no { color: rgba(38, 173, 213, .18); transform: translateY(-3px); }
.course.is-featured .course__no { display: none; }

.course.is-featured { animation: featuredGlow 4.5s var(--ease-io) infinite alternate; }
@keyframes featuredGlow {
    from { box-shadow: 0 0 0 1px rgba(38, 173, 213, .12), 0 18px 50px -26px rgba(38, 173, 213, .3); }
    to   { box-shadow: 0 0 0 1px rgba(38, 173, 213, .28), 0 26px 70px -26px rgba(38, 173, 213, .5); }
}


.course__flag {
    position: absolute; top: 18px; right: 18px;
    padding: 5px 11px; border-radius: 999px;
    background: var(--grad-gold); color: #04222e;
    font-size: .63rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
}

.course__tier {
    display: inline-flex; align-self: flex-start; margin-bottom: 16px;
    padding: 5px 12px; border-radius: 999px;
    border: 1px solid var(--stroke); background: var(--tint-b);
    font-family: var(--font-mono); font-size: .64rem;
    letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3);
}
.course.is-featured .course__tier { color: var(--gold); border-color: rgba(38, 173, 213, .3); }

.course__name { font-family: var(--font-display); font-size: 1.28rem; font-weight: 600; letter-spacing: -.032em; margin: 0 0 8px; }
.course__summary { font-size: .885rem; color: var(--ink-3); line-height: 1.6; margin-bottom: 20px; }

.course__price { display: flex; align-items: baseline; gap: 7px; margin-bottom: 20px; }
.course__price b {
    font-family: var(--font-display); font-size: 2rem; font-weight: 650; letter-spacing: -.045em;
    color: var(--ink);
}
.course.is-featured .course__price b {
    color: var(--gold);
}
.course__price span { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-3); letter-spacing: .08em; }

.course__meta { display: grid; gap: 10px; padding: 16px 0; border-block: 1px solid var(--stroke); margin-bottom: 18px; }
.course__meta div { display: flex; justify-content: space-between; gap: 14px; font-size: .82rem; }
.course__meta dt { color: var(--ink-4); flex: none; }
.course__meta dd { margin: 0; color: var(--ink-2); text-align: right; }

.course__points { display: grid; gap: 10px; margin-bottom: 24px; }
.course__points li {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: .865rem; color: var(--ink-2);
    /* Ripples outward from the first item on hover. */
    transition: transform .45s var(--ease), color .35s var(--ease);
    transition-delay: calc(var(--i, 0) * 45ms);
}
.course:hover .course__points li { transform: translateX(4px); color: var(--ink); }
.course__points .ic {
    width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--accent-3);
    transition: transform .45s var(--ease);
    transition-delay: calc(var(--i, 0) * 45ms);
}
.course:hover .course__points .ic { transform: scale(1.18); }
.course.is-featured .course__points .ic { color: var(--gold); }

[dir="rtl"] .course:hover .course__points li { transform: translateX(-4px); }

.course__cta { margin-top: auto; }

/* Rail controls — replaces the "swipe" text with something usable on desktop. */
.rail-nav {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    margin-top: 6px;
}
.rail-btn {
    width: 42px; height: 42px; flex: none;
    display: grid; place-items: center;
    border-radius: 50%; color: var(--ink-2);
    border: 1px solid var(--stroke); background: var(--surface);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transition: all .35s var(--ease);
}
.rail-btn:hover:not(:disabled) {
    color: #04222e; background: var(--grad); border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -10px rgba(38, 173, 213, .7);
}
.rail-btn:disabled { opacity: .3; cursor: default; }
.rail-btn[data-rail="prev"] .ic { transform: rotate(180deg); }

.rail-track {
    position: relative; height: 3px; width: min(240px, 40vw);
    border-radius: 99px; background: var(--tint-c);
    overflow: hidden;
}
.rail-track i {
    position: absolute; inset: 0 auto 0 0;
    width: 30%; border-radius: inherit;
    background: var(--grad);
    transition: transform .25s var(--ease), width .25s var(--ease);
}

[dir="rtl"] .rail-btn[data-rail="prev"] .ic { transform: none; }
[dir="rtl"] .rail-btn[data-rail="next"] .ic { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   15. Signal plans
   -------------------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; align-items: stretch; }

.plan {
    position: relative; display: flex; flex-direction: column;
    padding: 32px 28px; border-radius: var(--r-lg);
    transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.plan.is-featured {
    border-color: rgba(38, 173, 213, .42);
    box-shadow: 0 0 0 1px rgba(38, 173, 213, .22), 0 34px 84px -36px rgba(38, 173, 213, .5);
}
.plan.is-featured::before { background: linear-gradient(180deg, rgba(38, 173, 213, .22), transparent 28%); }

.plan__flag {
    position: absolute; z-index: 3; top: -12px; left: 50%; transform: translateX(-50%);
    padding: 6px 16px; border-radius: 999px; white-space: nowrap;
    background: var(--grad); color: #04222e;
    font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    box-shadow: 0 10px 26px -10px rgba(15, 112, 140, .85);
}

/* Photographic banner, dimmed and gradient-masked so it reads as texture behind */
.plan__media {
    display: block; position: absolute; inset: 0 0 auto 0; height: 132px;
    border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden;
    opacity: .3;
    mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
    pointer-events: none;
}
.plan__media img { width: 100%; height: 100%; object-fit: cover; }

.plan__name { position: relative; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -.03em; margin: 0; }
.plan__sub, .plan__price, .plan__ratio { position: relative; }
.plan__sub { margin: 6px 0 22px; font-size: .8rem; color: var(--ink-3); }

.plan__price { display: flex; align-items: baseline; gap: 6px; }
.plan__price em { font-style: normal; font-family: var(--font-mono); font-size: .85rem; color: var(--ink-3); }
.plan__price b { font-family: var(--font-display); font-size: 2.5rem; font-weight: 650; letter-spacing: -.05em; }
.plan__price span { font-size: .85rem; color: var(--ink-3); }

.plan__ratio {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    margin: 18px 0 22px; padding: 7px 14px; border-radius: 999px;
    background: rgba(55, 217, 154, .1); border: 1px solid rgba(55, 217, 154, .26);
    font-size: .8rem; color: var(--up); font-weight: 500;
}
.plan__ratio .ic { width: 15px; height: 15px; }

.plan__list { display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid var(--stroke); margin-bottom: 26px; }
.plan__list li { display: flex; gap: 11px; align-items: flex-start; font-size: .875rem; color: var(--ink-2); }
.plan__list li.is-off { color: var(--ink-4); }
.plan__list .ic { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--accent-3); }
.plan__list li.is-off .ic { color: var(--ink-4); }
.plan__cta { margin-top: auto; }

/* --------------------------------------------------------------------------
   16. Events
   -------------------------------------------------------------------------- */
.events { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 16px; }
.event {
    position: relative; overflow: hidden;
    padding: 30px 28px; border-radius: var(--r-lg);
    transition: transform .5s var(--ease);
}
.event:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
/* The seminar banners are dark-on-white artwork, so they get a light plaque. */
.event__media {
    display: block; margin: -6px 0 20px;
    padding: 10px 14px; border-radius: 14px;
    background: #fff; border: 1px solid var(--tint-c);
    box-shadow: 0 14px 34px -16px rgba(12, 38, 74, .18);
}
.event__media img { width: 100%; height: 54px; object-fit: contain; }

.event__kicker {
    font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--accent-3); margin-bottom: 14px;
}
.event h3 { margin: 0 0 12px; font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; letter-spacing: -.03em; }
.event p { font-size: .9rem; color: var(--ink-3); line-height: 1.62; margin-bottom: 20px; }
.event__link {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .875rem; font-weight: 500; color: var(--accent);
}
.event__link .ic { transition: transform .35s var(--ease); }
.event:hover .event__link .ic { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   17. Testimonials
   -------------------------------------------------------------------------- */
.marquee {
    display: flex; gap: 16px; width: max-content;
    animation: marqueeRun 58s linear infinite;
}
.marquee-wrap {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-wrap:hover .marquee { animation-play-state: paused; }
@keyframes marqueeRun { to { transform: translateX(-50%); } }

/* Each review is a captured Google card — a light artwork, so it sits on a small */
.tm {
    width: 340px; flex: none; margin: 0;
    padding: 10px; border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform .55s var(--ease), box-shadow .55s var(--ease);
    border-color: var(--tint-c);
}
.tm:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.tm__shot {
    display: block; width: 100%; height: auto;
    border-radius: 16px;
    background: #f2f2f2; border: 1px solid var(--tint-b);
}

/* --------------------------------------------------------------------------
   18. Contact
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(28px, 4vw, 56px); align-items: start; }

.contact-cards { display: grid; gap: 14px; margin-top: 34px; }
.contact-card {
    display: flex; align-items: flex-start; gap: 15px;
    padding: 20px 22px; border-radius: var(--r);
    transition: transform .45s var(--ease), border-color .45s var(--ease);
}
.contact-card:hover { transform: translateX(5px); border-color: var(--stroke-2); }
.contact-card__ic {
    width: 42px; height: 42px; flex: none; display: grid; place-items: center;
    border-radius: 12px; background: var(--grad-soft); border: 1px solid var(--stroke);
}
.contact-card__ic .ic { color: var(--accent); }
.contact-card b { display: block; font-size: .78rem; color: var(--ink-4); font-weight: 500; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 5px; }
.contact-card span, .contact-card a { font-size: .95rem; color: var(--ink); line-height: 1.55; }
.contact-card a:hover { color: var(--accent); }

.form { padding: clamp(26px, 3.2vw, 40px); border-radius: var(--r-xl); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: block; margin-bottom: 16px; }
.field__label { display: block; margin-bottom: 8px; font-size: .8rem; color: var(--ink-3); letter-spacing: .02em; }
.field__label b { color: var(--accent); }

.input, .textarea, .select {
    width: 100%; padding: 14px 16px;
    border-radius: var(--r-sm);
    border: 1px solid var(--stroke);
    background: var(--tint-a);
    color: var(--ink); font-family: var(--font-body); font-size: .94rem;
    transition: border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
    -webkit-appearance: none; appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: rgba(38, 173, 213, .6);
    background: var(--tint-b);
    box-shadow: 0 0 0 4px rgba(38, 173, 213, .16);
}
.textarea { min-height: 132px; resize: vertical; }
.select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2444' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 17px;
    padding-right: 42px;
}
.select option { background: #ffffff; color: var(--ink); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.field-error { display: block; margin-top: 7px; font-size: .8rem; color: var(--down); }
.input.has-error, .textarea.has-error { border-color: rgba(255, 107, 125, .6); }

.alert {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 15px 18px; border-radius: var(--r-sm); margin-bottom: 22px;
    font-size: .9rem;
}
.alert--ok { background: rgba(55, 217, 154, .1); border: 1px solid rgba(55, 217, 154, .3); color: #0e6b4a; }
.alert--err { background: rgba(255, 107, 125, .1); border: 1px solid rgba(255, 107, 125, .3); color: #a51e2f; }
.alert .ic { flex: none; margin-top: 2px; }

.form__note { margin-top: 14px; font-size: .78rem; color: var(--ink-4); text-align: center; }

/* --------------------------------------------------------------------------
   19. Blog
   -------------------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 40px; }
.filter {
    padding: 8px 16px; border-radius: 999px;
    border: 1px solid var(--stroke); background: var(--surface);
    font-size: .835rem; color: var(--ink-2);
    transition: all .3s var(--ease);
}
.filter:hover { border-color: var(--stroke-2); color: var(--ink); }
.filter.is-active { background: var(--grad); border-color: transparent; color: #04222e; font-weight: 500; }

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

.post-card {
    display: flex; flex-direction: column;
    padding: 26px 26px 24px; border-radius: var(--r-lg);
    transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .45s var(--ease);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.post-card__top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.tag {
    padding: 4px 11px; border-radius: 999px;
    background: var(--grad-soft); border: 1px solid var(--stroke);
    font-family: var(--font-mono); font-size: .63rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--accent);
}
.post-card__date { font-size: .755rem; color: var(--ink-4); font-family: var(--font-mono); }
.post-card h3 {
    margin: 0 0 12px; font-family: var(--font-display); font-size: 1.13rem;
    font-weight: 600; line-height: 1.32; letter-spacing: -.028em;
}
.post-card p { font-size: .885rem; color: var(--ink-3); line-height: 1.65; margin-bottom: 20px; }
.post-card__more {
    margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
    font-size: .855rem; font-weight: 500; color: var(--accent);
}
.post-card__more .ic { transition: transform .35s var(--ease); }
.post-card:hover .post-card__more .ic { transform: translateX(5px); }

/* Article */
.article { max-width: 760px; margin-inline: auto; }
.article__body { font-size: 1.04rem; line-height: 1.82; color: var(--ink-2); }
.article__body h2 {
    margin: 46px 0 18px; font-family: var(--font-display); color: var(--ink);
    font-size: 1.6rem; font-weight: 600; letter-spacing: -.032em; line-height: 1.2;
}
.article__body h3 { margin: 34px 0 14px; font-family: var(--font-display); color: var(--ink); font-size: 1.2rem; font-weight: 600; letter-spacing: -.025em; }
.article__body ul { display: grid; gap: 11px; margin: 20px 0; }
.article__body ul li { display: flex; gap: 12px; }
.article__body ul li::before { content: ''; width: 6px; height: 6px; margin-top: 12px; flex: none; border-radius: 50%; background: var(--grad); }
.article__lead { font-size: 1.18rem; line-height: 1.7; color: var(--ink); margin-bottom: 30px; }

/* Rich body content — everything an author can produce from Markdown or the
   sanitised HTML allow-list. Headings and ul are styled above. */
.article__body h4 { margin: 26px 0 10px; font-family: var(--font-display); color: var(--ink); font-size: 1.04rem; font-weight: 600; letter-spacing: -.02em; }
.article__body p { margin: 0 0 18px; }
.article__body > *:last-child { margin-bottom: 0; }

.article__body a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--tint-d); transition: color .25s var(--ease), text-decoration-color .25s var(--ease); }
.article__body a:hover { color: var(--blue-2); text-decoration-color: currentColor; }

.article__body ol { display: grid; gap: 11px; margin: 20px 0; padding-inline-start: 1.35em; list-style: decimal; }
.article__body ol li::marker { color: var(--blue); font-weight: 600; }
.article__body li > ul, .article__body li > ol { margin: 11px 0 0; }

.article__body strong, .article__body b { color: var(--ink); font-weight: 600; }
.article__body hr { margin: 38px 0; border: 0; border-top: 1px solid var(--stroke); }

.article__body blockquote {
    margin: 26px 0; padding: 4px 0 4px 22px;
    border-inline-start: 3px solid var(--accent);
    color: var(--ink); font-size: 1.08rem; font-style: italic;
}
.article__body blockquote p:last-child { margin-bottom: 0; }

.article__body code {
    padding: .16em .42em; border-radius: 5px;
    background: var(--tint-a); border: 1px solid var(--stroke);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: .88em; color: var(--ink);
}
.article__body pre {
    margin: 24px 0; padding: 18px 20px; overflow-x: auto;
    border-radius: 12px; background: var(--tint-a); border: 1px solid var(--stroke);
    line-height: 1.6;
}
.article__body pre code { padding: 0; border: 0; background: none; font-size: .875rem; }

.article__body img { display: block; margin: 26px auto; border-radius: 14px; }
.article__body figure { margin: 28px 0; }
.article__body figure img { margin: 0; }
.article__body figcaption { margin-top: 10px; text-align: center; font-size: .85rem; color: var(--ink-3); }

.article__body iframe {
    display: block; width: 100%; aspect-ratio: 16 / 9; height: auto;
    margin: 28px 0; border: 0; border-radius: 14px; background: var(--bg-2);
}

/* Tables scroll rather than forcing the page sideways on a phone. */
.article__body .table-wrap { margin: 26px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.article__body table { width: 100%; margin: 26px 0; border-collapse: collapse; font-size: .95rem; }
.article__body .table-wrap table { margin: 0; min-width: 30rem; }
.article__body caption { margin-bottom: 10px; font-size: .85rem; color: var(--ink-3); text-align: start; }
.article__body th, .article__body td { padding: 11px 14px; border-bottom: 1px solid var(--stroke); text-align: start; vertical-align: top; }
.article__body thead th { color: var(--ink); font-weight: 600; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; border-bottom-color: var(--stroke-2); }
.article__body tbody tr:last-child td { border-bottom: 0; }
.article__body tbody tr:hover { background: var(--tint-a); }

/* A .btn written into the body should look like every other button on the site. */
.article__body .btn { margin: 6px 8px 6px 0; text-decoration: none; }
.article__body .btn:hover { text-decoration: none; }

@media (max-width: 640px) {
    /* A table the author did not wrap in .table-wrap scrolls itself rather than
       widening the page. display:block keeps the rows laid out while letting the
       element take its own scrollbar. */
    .article__body > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .article__body .table-wrap table { min-width: 28rem; }
    .article__body blockquote { padding-inline-start: 16px; }
}


.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 26px; }
.back-link { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px; font-size: .875rem; color: var(--ink-3); }
.back-link:hover { color: var(--ink); }
.back-link .ic { transform: rotate(180deg); transition: transform .35s var(--ease); }
.back-link:hover .ic { transform: rotate(180deg) translateX(4px); }

/* --------------------------------------------------------------------------
   19b. Inner-page header, comparison table, steps
   -------------------------------------------------------------------------- */
.page-head {
    position: relative; z-index: 1;
    padding-top: calc(var(--nav-h) + clamp(70px, 9vw, 132px));
    padding-bottom: clamp(40px, 5vw, 70px);
}
.page-head__title { max-width: 18ch; }
.page-head__lede { max-width: 62ch; margin-top: 24px; }
.page-head--article { padding-bottom: 0; }
.page-head--article .h2 { max-width: 22ch; }

.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;
}

.table-wrap { overflow-x: auto; border-radius: var(--r-lg); }
.table { width: 100%; min-width: 720px; border-collapse: collapse; }
.table thead th {
    padding: 18px 20px; text-align: left;
    font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
    letter-spacing: .15em; text-transform: uppercase; color: var(--ink-4);
    border-bottom: 1px solid var(--stroke);
    white-space: nowrap;
}
.table tbody tr { transition: background-color .3s var(--ease); }
.table tbody tr:hover { background: var(--tint-a); }
.table tbody tr + tr th, .table tbody tr + tr td { border-top: 1px solid var(--stroke); }
.table tbody tr.is-featured { background: rgba(38, 173, 213, .05); }
.table tbody th {
    padding: 20px; text-align: left; font-weight: 400;
}
.table tbody th b {
    display: block; font-family: var(--font-display); font-size: 1rem;
    font-weight: 600; letter-spacing: -.025em; color: var(--ink);
}
.table tbody th span {
    display: block; margin-top: 4px;
    font-family: var(--font-mono); font-size: .64rem;
    letter-spacing: .13em; text-transform: uppercase; color: var(--ink-4);
}
.table tbody td { padding: 20px; font-size: .875rem; color: var(--ink-2); vertical-align: middle; }
.table .num { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--ink); letter-spacing: -.03em; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; counter-reset: step; }
.step {
    position: relative; padding: 30px 26px; border-radius: var(--r-lg);
    transition: transform .5s var(--ease);
}
.step:hover { transform: translateY(-3px); }
.step__n {
    display: block; margin-bottom: 16px;
    font-family: var(--font-display); font-size: 2.1rem; font-weight: 650; letter-spacing: -.05em;
    color: var(--ink-4);
}
.step h3 { margin: 0 0 9px; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -.025em; }
.step p { font-size: .9rem; color: var(--ink-3); line-height: 1.62; }

.article__cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
    margin-top: 52px; padding: clamp(26px, 3.2vw, 40px); border-radius: var(--r-xl);
}

@media (max-width: 620px) {
    .article__cta { flex-direction: column; align-items: flex-start; }
    .article__cta .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.footer { position: relative; z-index: 1; padding-top: clamp(60px, 7vw, 100px); padding-bottom: 34px; }

.footer__top {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 30px; padding: clamp(32px, 4vw, 52px); border-radius: var(--r-xl);
    margin-bottom: clamp(50px, 6vw, 82px);
}
.footer__cta { max-width: 520px; }
.footer__cta .lede { margin-top: 14px; }
.footer__cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.footer__grid {
    display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 3.5vw, 52px);
    padding-bottom: 44px;
}
.footer__col--brand .brand { margin-bottom: 20px; }
.footer__about { font-size: .885rem; color: var(--ink-3); line-height: 1.72; max-width: 46ch; }
.footer__social { display: flex; gap: 9px; margin-top: 24px; }
.social {
    width: 40px; height: 40px; display: grid; place-items: center;
    border-radius: 12px; border: 1px solid var(--stroke); background: var(--surface);
    color: var(--ink-2);
    transition: all .4s var(--ease);
}
.social:hover { color: #04222e; border-color: transparent; background: var(--grad); transform: translateY(-3px); }

.footer__title { margin: 0 0 18px; font-family: var(--font-display); font-size: .95rem; font-weight: 600; letter-spacing: -.02em; }
.footer__title--sp { margin-top: 30px; }
.footer__list { display: grid; gap: 11px; }
.footer__list a, .footer__list span {
    display: inline-block;
    font-size: .875rem; color: var(--ink-3);
    transition: color .3s var(--ease), transform .3s var(--ease);
}
.footer__list a:hover { color: var(--accent); transform: translateX(5px); }
.footer__list--contact li { display: flex; }
.footer__list--contact a, .footer__list--contact span { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.footer__list--contact .ic { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--accent); }

.footer__badges {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
    padding: 24px 0; border-top: 1px solid var(--stroke);
}
.footer__accred { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
/* The Dubai Knowledge mark is dark maroon artwork on transparency, so it needs a */
.footer__accred img {
    height: 40px; width: auto;
    padding: 7px 12px; border-radius: 10px;
    background: #f8f5ef; border: 1px solid var(--tint-c);
}

.footer__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* Payment marks. White card per brand, as the processors' own guidelines ask
   for, so each logo sits on the background it was designed against rather than
   on the page tint. */
.pay {
    display: inline-flex; align-items: center; gap: 10px;
    height: 54px; padding: 0 22px; border-radius: 12px;
    background: #fff; border: 1px solid var(--stroke);
    box-shadow: 0 2px 8px rgba(12, 38, 74, .07);
}
.pay b { font-weight: 700; font-size: 1.12rem; letter-spacing: -.01em; line-height: 1; }
.pay__mark { width: 46px; height: 29px; display: block; flex: none; }

/* An official asset, when one has been dropped into assets/img/pay/. */
.pay--asset { padding: 0 16px; }
.pay--asset img { height: 30px; width: auto; display: block; }

/* Brand colours, from each provider's published palette. */
.pay--visa b       { color: #1434CB; font-style: italic; letter-spacing: .02em; }
.pay--mastercard b { color: #231F20; font-weight: 600; font-size: 1.02rem; }
.pay--skrill b     { color: #862165; }
.pay--paypal b     { color: #003087; font-style: italic; }
.pay--neteller b   { color: #00A94F; }

/* Always open. Legal copy that has to be clicked to be read is doing half a
   job, so the text sits on the page rather than behind a toggle. The three
   notes share one glass panel and split into columns: across the full shell a
   footer-sized line of legal copy runs past 150 characters, which is where it
   stops being read. The panel also lifts the text off the chart artwork behind
   the footer, which bare paragraphs on hairlines never did. */
.legal {
    margin: 26px 0 4px;
    padding: clamp(20px, 2.4vw, 30px);
    border-radius: var(--r-lg);
}
.legal__grid { display: grid; gap: 22px; }

.legal__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.legal__ic {
    width: 30px; height: 30px; flex: none; display: grid; place-items: center;
    border-radius: 9px;
    background: linear-gradient(150deg, rgba(38, 173, 213, .12), rgba(127, 216, 238, .06));
    border: 1px solid rgba(38, 173, 213, .18);
}
.legal__ic .ic { width: 16px; height: 16px; color: var(--blue); }
/* Cyan steps alternate down the row, as they do on the feature grid. */
.legal__item:nth-child(2) .legal__ic {
    background: linear-gradient(150deg, rgba(127, 216, 238, .2), rgba(38, 173, 213, .08));
    border-color: rgba(38, 173, 213, .26);
}
.legal__item:nth-child(2) .legal__ic .ic { color: var(--accent-2); }

.legal__title {
    margin: 0;
    font-family: var(--font-display); font-size: .86rem; font-weight: 600; letter-spacing: -.015em;
    color: var(--ink);
}
.legal p { font-size: .79rem; line-height: 1.72; color: var(--ink-3); }

/* Stacked below the breakpoint, so the divider turns with the axis. Logical
   properties keep it on the right edge in the Arabic RTL layout. */
.legal__item + .legal__item { padding-top: 22px; border-top: 1px solid var(--stroke); }

@media (min-width: 980px) {
    .legal__grid { grid-template-columns: repeat(3, 1fr); gap: 0; }
    .legal__item { padding-inline: clamp(18px, 2vw, 28px); }
    .legal__item:first-child { padding-inline-start: 0; }
    .legal__item:last-child { padding-inline-end: 0; }
    .legal__item + .legal__item {
        padding-top: 0; border-top: 0;
        border-inline-start: 1px solid var(--stroke);
    }
}

.footer__bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
    padding-top: 24px; border-top: 1px solid var(--stroke);
    font-size: .8rem; color: var(--ink-4);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 18px; }
.footer__legal a { transition: color .3s var(--ease); }
.footer__legal a:hover { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   21. Floating actions
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   First-visit welcome dialog
   -------------------------------------------------------------------------- */
.welcome {
    position: fixed; inset: 0; z-index: 800;
    display: grid; place-items: center;
    padding: 20px;
}
.welcome[hidden] { display: none; }

.welcome__backdrop {
    position: absolute; inset: 0;
    background: rgba(11, 36, 68, .34);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    opacity: 0; transition: opacity .45s var(--ease);
}
.welcome.is-open .welcome__backdrop { opacity: 1; }

.welcome__card {
    position: relative;
    width: min(100%, 620px);
    max-height: calc(100dvh - 40px); overflow-y: auto;
    padding: clamp(28px, 4vw, 40px);
    border-radius: var(--r-xl);
    text-align: center;
    border-color: rgba(38, 173, 213, .22);
    box-shadow: 0 50px 120px -30px rgba(12, 38, 74, .26), 0 0 0 1px rgba(38, 173, 213, .1);
    opacity: 0; transform: translateY(22px) scale(.95);
    transition: opacity .5s var(--ease), transform .55s var(--ease);
}
.welcome.is-open .welcome__card { opacity: 1; transform: none; }

/* Focused only to anchor screen readers — it should not draw a ring. */
.welcome__card:focus { outline: none; }

.welcome__glow {
    position: absolute; top: -40%; left: 50%;
    width: 380px; height: 380px; margin-left: -190px;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(38, 173, 213, .22), transparent 62%);
    filter: blur(30px);
}

.welcome__close {
    position: absolute; top: 14px; right: 14px;
    width: 36px; height: 36px; display: grid; place-items: center;
    border-radius: 50%; color: var(--ink-3);
    border: 1px solid var(--stroke);
    transition: all .3s var(--ease);
}
.welcome__close:hover { color: var(--ink); background: var(--tint-c); }

.welcome__logo { position: relative; width: 168px; height: auto; margin: 0 auto 16px; }
.welcome__card .eyebrow { margin-bottom: 10px; }
.welcome__card .h3 { margin-bottom: 10px; }
.welcome__card .lede { max-width: 50ch; margin-inline: auto; }

/* Compact reassurance row — the form is the point, so these stay small. */
.welcome__points {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin: 16px 0 20px;
}
.welcome__points li {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--stroke); background: var(--tint-b);
    font-size: .76rem; color: var(--ink-2);
}
.welcome__points .ic { width: 13px; height: 13px; flex: none; color: var(--accent-3); }

.welcome__form { text-align: left; }
.welcome__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.welcome__form .field { margin-bottom: 12px; }
.welcome__form .field__label { font-size: .76rem; margin-bottom: 6px; }
.welcome__form .input,
.welcome__form .select,
.welcome__form .textarea { padding: 11px 13px; font-size: .89rem; }
.textarea--sm { min-height: 84px; }

.welcome__alert {
    margin: 4px 0 14px; padding: 11px 14px; border-radius: var(--r-sm);
    background: rgba(255, 107, 125, .1); border: 1px solid rgba(255, 107, 125, .3);
    color: #a51e2f; font-size: .84rem; text-align: left;
}

.welcome__actions { display: grid; gap: 10px; margin-top: 6px; }
.welcome__actions .btn { width: 100%; }

.welcome__done { display: grid; justify-items: center; gap: 16px; padding: 14px 0 4px; }
.welcome__tick {
    width: 58px; height: 58px; display: grid; place-items: center;
    border-radius: 50%; color: #0d2a1d;
    background: linear-gradient(150deg, #6ee7b7, var(--up));
    box-shadow: 0 16px 40px -14px rgba(55, 217, 154, .8);
}
.welcome__tick .ic { width: 28px; height: 28px; stroke-width: 2.4; }
.welcome__done p { font-size: .95rem; color: var(--ink-2); line-height: 1.6; }

@media (max-width: 480px) {
    .welcome__row { grid-template-columns: 1fr; }
}

.welcome__fine {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 16px;
    font-size: .76rem; color: var(--ink-4);
}
.welcome__fine .ic { width: 14px; height: 14px; color: var(--gold); }

@media (max-width: 480px) {
    .welcome__logo { width: 158px; }
    .welcome__points { font-size: .9rem; }
}

.wa-widget { position: fixed; right: 22px; bottom: 22px; z-index: 690; }

.wa-float {
    position: relative;
    width: 56px; height: 56px; display: grid; place-items: center;
    border-radius: 50%; color: #fff;
    background: linear-gradient(150deg, #29c66b, #128c4a);
    box-shadow: 0 18px 40px -14px rgba(18, 140, 74, .9);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.wa-float:hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 26px 54px -16px rgba(18, 140, 74, 1); }

/* The glyph swaps to a close mark while the panel is open. */
.wa-float__ic {
    grid-area: 1 / 1; display: grid; place-items: center;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.wa-float__ic--close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.wa-float[aria-expanded="true"] .wa-float__ic--chat  { opacity: 0; transform: rotate(90deg) scale(.6); }
.wa-float[aria-expanded="true"] .wa-float__ic--close { opacity: 1; transform: none; }

.wa-float__pulse {
    position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid rgba(41, 198, 107, .6);
    animation: pulseRing 2.6s var(--ease-io) infinite;
}
.wa-float[aria-expanded="true"] .wa-float__pulse { display: none; }

/* ---- Chat panel ---- */
.wa-panel {
    position: absolute; right: 0; bottom: 72px;
    width: min(84vw, 336px);
    border-radius: 18px; overflow: hidden;
    background: #fff;
    box-shadow: 0 30px 70px -18px rgba(12, 38, 74, .2), 0 0 0 1px rgba(0, 0, 0, .06);
    transform-origin: bottom right;
    opacity: 0; transform: translateY(14px) scale(.94);
    transition: opacity .3s var(--ease), transform .34s var(--ease);
}
.wa-panel[hidden] { display: none; }
.wa-panel.is-open { opacity: 1; transform: none; }

.wa-panel__head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 16px 16px 18px;
    background: linear-gradient(160deg, #1d7a5f, #115c46);
    color: #fff;
}
.wa-panel__avatar {
    position: relative; flex: none;
    width: 46px; height: 46px; display: grid; place-items: center;
    border-radius: 50%; background: #f7f8fa;
    box-shadow: 0 4px 12px rgba(12, 38, 74, .09);
}
.wa-panel__avatar img { width: 30px; height: auto; }
.wa-panel__online {
    position: absolute; right: 0; bottom: 1px;
    width: 11px; height: 11px; border-radius: 50%;
    background: #4ade80; border: 2px solid #16694f;
}
.wa-panel__who { display: grid; gap: 2px; min-width: 0; }
.wa-panel__who b {
    font-family: var(--font-display); font-size: .96rem; font-weight: 600;
    letter-spacing: -.02em; line-height: 1.25;
}
.wa-panel__who > span { font-size: .77rem; color: rgba(255, 255, 255, .78); line-height: 1.3; }
.wa-panel__close {
    margin-left: auto; flex: none;
    width: 30px; height: 30px; display: grid; place-items: center;
    border-radius: 50%; color: rgba(255, 255, 255, .85);
    transition: background-color .25s var(--ease), color .25s var(--ease);
}
.wa-panel__close:hover { background: var(--tint-d); color: #fff; }

/* WhatsApp's own chat wallpaper tone, so the panel reads as the real thing. */
.wa-panel__body { padding: 22px 16px; background: #ece5dd; }

.wa-bubble {
    position: relative;
    padding: 14px 16px 22px; border-radius: 0 10px 10px 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(12, 38, 74, .08);
    font-size: .9rem; line-height: 1.55; color: #1f2b32;
}
/* Speech tail on the top-left corner. */
.wa-bubble::before {
    content: ''; position: absolute; top: 0; left: -8px;
    border: 8px solid transparent;
    border-top-color: #fff; border-right-width: 0;
}
.wa-bubble p { margin: 0 0 8px; }
.wa-bubble p:last-of-type { margin-bottom: 0; }
.wa-bubble__hi { font-weight: 500; }
.wa-bubble__who {
    position: absolute; right: 12px; bottom: 6px;
    font-size: .7rem; color: #8d9aa1;
}

.wa-panel__foot { padding: 14px 16px 16px; background: #fff; }
.wa-cta {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 18px; border-radius: 999px;
    background: #4bc463; color: #fff;
    font-family: var(--font-display); font-size: .95rem; font-weight: 600;
    letter-spacing: -.01em;
    transition: background-color .25s var(--ease), transform .3s var(--ease);
}
.wa-cta:hover { background: #3fb457; transform: translateY(-1px); }
.wa-cta .ic { width: 20px; height: 20px; }

/* The back-to-top button lives in the same corner — get it out of the way. */
body.wa-open .to-top { opacity: 0; pointer-events: none; }
@keyframes pulseRing {
    0%   { transform: scale(1); opacity: .8; }
    70%  { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(1.55); opacity: 0; }
}

.to-top {
    position: fixed; right: 22px; bottom: 90px; z-index: 690;
    width: 46px; height: 46px; display: grid; place-items: center;
    border-radius: 50%; border: 1px solid var(--stroke-2);
    background: var(--surface-2); color: var(--ink);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    opacity: 0; pointer-events: none; transform: translateY(12px);
    transition: all .45s var(--ease);
}
body.is-deep .to-top { opacity: 1; pointer-events: auto; transform: translateY(0); }
.to-top:hover { border-color: var(--accent); color: var(--accent); }
.to-top__ic { transform: rotate(-90deg); }

/* --------------------------------------------------------------------------
   22. Scroll reveal
   -------------------------------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .95s var(--ease), transform .95s var(--ease);
    transition-delay: var(--rd, 0ms);
    will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(.955); }
[data-reveal="blur"]  { filter: blur(9px); transform: translateY(18px); }
[data-reveal="blur"].is-in { filter: blur(0); }

/* Per-child stagger — children stand up from a slight backward lean. */
[data-stagger] { perspective: 1200px; }
[data-stagger] > * {
    opacity: 0;
    transform: translateY(26px) rotateX(8deg) scale(.975);
    transform-origin: 50% 100%;
    transition: opacity .85s var(--ease), transform .9s var(--ease);
}
[data-stagger].is-in > * { opacity: 1; transform: none; }

/* The course rail reveals card-by-card rather than as a stagger group. */
.courses-rail, .courses-grid { perspective: 1400px; }

/* Continuous depth while a card travels through the viewport. Uses the
   independent `rotate` property so it composes with — rather than fights — */
[data-card-tilt] {
    rotate: x var(--tilt, 0deg);
    transform-origin: 50% 50%;
}
[data-stagger].is-in > *:nth-child(1) { transition-delay: .05s; }
[data-stagger].is-in > *:nth-child(2) { transition-delay: .13s; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: .21s; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: .29s; }
[data-stagger].is-in > *:nth-child(5) { transition-delay: .37s; }
[data-stagger].is-in > *:nth-child(6) { transition-delay: .45s; }
[data-stagger].is-in > *:nth-child(7) { transition-delay: .53s; }
[data-stagger].is-in > *:nth-child(8) { transition-delay: .61s; }

/* Tilt targets get GPU hinting only while active */

/* Wipe reveals, driven by an ancestor's `.is-in` rather than by observing the
   element itself: an element clipped to zero width never registers as
   intersecting, so a self-observed wipe would stay hidden forever. */
.seal__logo,
[data-stagger] .event__media {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.1s var(--ease) .25s;
}
.seal.is-in .seal__logo,
[data-stagger].is-in .event__media { clip-path: inset(0 0 0 0); }

/* Per-word heading reveal. The padding/margin pair stops `overflow: hidden` */
.split-word {
    display: inline-block; overflow: hidden;
    padding-bottom: .14em; margin-bottom: -.14em;
    vertical-align: bottom;
}
.split-word > span {
    display: inline-block;
    transform: translateY(110%);
    transition: transform .85s var(--ease);
    transition-delay: calc(var(--w, 0) * 55ms);
}
.is-split.is-in .split-word > span { transform: none; }

/* Magnetic buttons — JS writes the transform, so the hover lift is folded in. */
[data-magnetic] { will-change: transform; }

/* Counter finishes with a brief flare. */

/* Hero drifts away as you scroll past it (JS sets --ho / --hy). */
.hero__copy {
    opacity: var(--ho, 1);
    translate: 0 var(--hy, 0px);
}

/* --------------------------------------------------------------------------
   23. Responsive
   -------------------------------------------------------------------------- */
/* Icon-only by design, not as a fallback. .nav__inner is capped at the shell
   width (1240px) whatever the viewport, so the bar never gains room on a wider
   screen — a labelled button here pushes "About Us" onto a second line at every
   size. The tooltip and aria-label carry the meaning; the drawer shows the full
   wording once the burger takes over. */
.nav__login { padding-inline: 13px; }
.nav__login .ic { width: 17px; height: 17px; }
.nav__login span { display: none; }

@media (max-width: 1080px) {
    .nav__login { display: none; }
}

@media (max-width: 1080px) {
    .nav__links { display: none; }
    .nav__phone { display: none; }
    .nav__burger { display: grid; }
    .nav__actions { margin-left: auto; }
    .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer__col--brand { grid-column: 1 / -1; }
    .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    :root { --nav-h: 66px; }
    .split, .split--wide { grid-template-columns: 1fr; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .hero { padding-top: calc(var(--nav-h) + 36px); }
    .footer__top { flex-direction: column; align-items: flex-start; }
    .footer__cta-actions { width: 100%; }
    .footer__cta-actions .btn { flex: 1 1 200px; }
}

@media (max-width: 620px) {
    .shell { width: calc(100% - 32px); }

    /* Keep the brand, CTA and burger inside the nav pill on small phones: */
    .nav__inner { width: min(100% - 28px, var(--shell)); gap: 10px; }
    .nav__actions .btn--primary { padding: 10px 15px; font-size: .84rem; gap: 7px; }
    .nav__actions .btn--primary .ic { display: none; }
    .nav__burger { width: 38px; height: 38px; }

    .nav .brand__logo--full { display: none; }
    .nav .brand__logo--mark { display: block; height: 34px; }
    body.is-scrolled .nav .brand__logo--mark { height: 30px; }

    .brand--footer .brand__logo { height: 36px; }
    .form__row { grid-template-columns: 1fr; }
    .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat { padding: 22px 16px; }
    .tm { width: 300px; }
    .hero__actions .btn { flex: 1 1 100%; }
    .footer__grid { grid-template-columns: 1fr; }
    .footer__bar { flex-direction: column; align-items: flex-start; }
    .wa-widget { right: 16px; bottom: 16px; }
    .wa-float { width: 52px; height: 52px; }
    .wa-panel { bottom: 66px; width: min(88vw, 330px); }
    .to-top { right: 16px; bottom: 80px; }
}

/* --------------------------------------------------------------------------
   24. Motion + capability fallbacks
   -------------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass, .btn--glass, .chip, .to-top { background: rgba(255, 255, 255, .94); }
    body.is-scrolled .nav { background: rgba(255, 255, 255, .97); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; filter: none !important; }
    /* Hold the banner wash at its opening composition rather than letting the
       blanket duration override snap it to the end of the drift. */
    .hero::before { animation: none !important; }
    .seal__logo, .event__media { clip-path: none !important; }
    .hero__title .ln > span { transform: none; }
    .split-word > span { transform: none !important; }
    .split-word { overflow: visible; }
    [data-card-tilt] { rotate: none !important; }
    .hero__copy { opacity: 1 !important; translate: none !important; }
    .curtain { display: none; }
    .ambient__particles, .ambient__cursor { display: none; }
    .marquee { animation: none; }
}

/* --------------------------------------------------------------------------
   24b. Colour layer — brand cyan and its deeper step alternate for tonal
        variation. Kept under [data-theme="light"] for cascade order.
   -------------------------------------------------------------------------- */
[data-theme="light"] {
    /* Alternating section bands give the page rhythm instead of one flat white. */
    --band: linear-gradient(180deg, rgba(38, 173, 213, .045), rgba(38, 173, 213, .012));
}

[data-theme="light"] .eyebrow { color: var(--blue-2); }
[data-theme="light"] .eyebrow .ic { color: var(--accent); }

/* Tier pills read as a progression from blue to gold. */
[data-theme="light"] .course__tier {
    color: var(--blue-2);
    border-color: rgba(38, 173, 213, .28);
    background: rgba(38, 173, 213, .07);
}
[data-theme="light"] .course.is-featured .course__tier {
    color: var(--accent-2);
    border-color: rgba(38, 173, 213, .38);
    background: rgba(127, 216, 238, .16);
}

/* Feature and contact icons alternate the two cyan steps down the grid. */
[data-theme="light"] .feature__ic,
[data-theme="light"] .contact-card__ic {
    background: linear-gradient(150deg, rgba(38, 173, 213, .12), rgba(127, 216, 238, .06));
    border-color: rgba(38, 173, 213, .18);
}
[data-theme="light"] .feature__ic .ic,
[data-theme="light"] .contact-card__ic .ic { color: var(--blue); }
[data-theme="light"] .feature-grid > :nth-child(even) .feature__ic {
    background: linear-gradient(150deg, rgba(127, 216, 238, .2), rgba(38, 173, 213, .08));
    border-color: rgba(38, 173, 213, .26);
}
[data-theme="light"] .feature-grid > :nth-child(even) .feature__ic .ic { color: var(--accent-2); }

/* Stat tiles pick up a blue wash so the row is not four bare numbers on white. */
[data-theme="light"] .stat {
    background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(38, 173, 213, .06));
    border-color: rgba(38, 173, 213, .14);
}

/* Links and secondary buttons carry the blue. */
[data-theme="light"] .footer__list a:hover,
[data-theme="light"] .event__link,
[data-theme="light"] .post-card__more,
[data-theme="light"] .back-link:hover { color: var(--blue); }
[data-theme="light"] .tag { color: var(--blue-2); border-color: rgba(38, 173, 213, .2); }
[data-theme="light"] .filter:hover { border-color: rgba(38, 173, 213, .3); color: var(--blue-2); }
[data-theme="light"] .btn--glass:hover { border-color: rgba(38, 173, 213, .34); color: var(--blue-2); }
[data-theme="light"] .social:hover {
    background: linear-gradient(150deg, var(--blue-hi), var(--blue));
    color: #fff;
}
[data-theme="light"] .tick-list .ic {
    color: var(--blue);
    background: rgba(38, 173, 213, .1);
    border-color: rgba(38, 173, 213, .22);
}
[data-theme="light"] .plan__ratio {
    color: var(--blue-2);
    background: rgba(38, 173, 213, .08);
    border-color: rgba(38, 173, 213, .22);
}

/* --------------------------------------------------------------------------
   24c. Cookie consent
   -------------------------------------------------------------------------- */
.cookies {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 780;
    padding: 16px clamp(16px, 3vw, 26px) calc(16px + env(safe-area-inset-bottom));
    display: flex; justify-content: center;
    pointer-events: none;
}
.cookies[hidden] { display: none; }

.cookies__card {
    width: min(100%, 820px);
    display: flex; align-items: center; gap: clamp(16px, 3vw, 30px);
    padding: 18px 22px;
    border-radius: var(--r-lg);
    pointer-events: auto;
    box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(16px);
    transition: opacity .45s var(--ease), transform .5s var(--ease);
}
.cookies.is-in .cookies__card { opacity: 1; transform: none; }

.cookies__body { flex: 1 1 auto; min-width: 0; }
.cookies__title {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 6px;
    font-family: var(--font-display); font-size: .96rem; font-weight: 600;
    letter-spacing: -.02em; color: var(--ink);
}
.cookies__title .ic { width: 16px; height: 16px; color: var(--accent); }
.cookies__text { margin: 0; font-size: .84rem; line-height: 1.6; color: var(--ink-3); }

.cookies__actions { display: flex; gap: 10px; flex: none; }
.cookies__actions .btn { padding: 11px 20px; font-size: .875rem; }

/* Room for the floating chat button on narrow screens. */
@media (max-width: 860px) {
    .cookies__card { flex-direction: column; align-items: stretch; gap: 14px; }
    .cookies__actions { justify-content: stretch; }
    .cookies__actions .btn { flex: 1; }
}
@media (max-width: 620px) {
    .cookies { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* Reopen control sits in the footer's legal list. */
.footer__linkbtn {
    font-size: .8rem; color: var(--ink-4);
    transition: color .3s var(--ease);
}
.footer__linkbtn:hover { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   25. Language switch + Arabic / RTL
   -------------------------------------------------------------------------- */
.lang-switch {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--stroke); background: var(--surface);
    font-size: .82rem; font-weight: 500; color: var(--ink-2);
    white-space: nowrap;
    transition: all .3s var(--ease);
}
.lang-switch:hover { color: var(--ink); border-color: var(--stroke-2); background: var(--surface-2); }
.lang-switch .ic { width: 15px; height: 15px; color: var(--accent); }
.lang-switch--block { justify-content: center; width: 100%; padding: 12px 16px; }

/* The nav pill is tight; below the desktop breakpoint the drawer carries it. */
@media (max-width: 1080px) { .nav__actions .lang-switch { display: none; } }

/* ---- Arabic ---- */
[lang="ar"] {
    --font-display: 'Tajawal', 'Sora', system-ui, sans-serif;
    --font-body: 'Tajawal', 'Inter', system-ui, sans-serif;
}
/* Arabic script has no descender-heavy Latin rhythm; it needs a touch more */
[lang="ar"] .h1, [lang="ar"] .h2, [lang="ar"] .h3, [lang="ar"] .h4 {
    letter-spacing: 0; line-height: 1.28;
}
[lang="ar"] .lede, [lang="ar"] body { letter-spacing: 0; }
[lang="ar"] .lede { line-height: 1.85; }
[lang="ar"] .eyebrow { letter-spacing: .08em; }
[lang="ar"] .hero__title .ln { padding-bottom: .2em; margin-bottom: -.18em; }
[lang="ar"] .split-word { padding-bottom: .22em; margin-bottom: -.2em; }

/* Numerals, prices and market data stay LTR inside RTL text. */
[dir="rtl"] .stat__num,
[dir="rtl"] .course__price,
[dir="rtl"] .plan__price,
[dir="rtl"] .seal__permit,
[dir="rtl"] .post-card__date,
[dir="rtl"] .table .num,
/* Phone numbers and ratings carry a leading +, / or decimal that RTL
   reordering would move to the wrong end. */
[dir="rtl"] .nav__phone,
[dir="rtl"] .drawer__meta,
[dir="rtl"] .footer__list--contact a[href^="tel"],
[dir="rtl"] .contact-card a[href^="tel"] { direction: ltr; }

[dir="rtl"] .nav__phone,
[dir="rtl"] .drawer__meta,
[dir="rtl"] .contact-card a[href^="tel"] { display: inline-flex; }

[dir="rtl"] .course__price,
[dir="rtl"] .plan__price { justify-content: flex-end; }

/* Mirror the directional bits. */
[dir="rtl"] .btn:hover .ic:last-child { transform: translateX(-4px); }
[dir="rtl"] .btn--primary::after { transform: skewX(18deg); }
[dir="rtl"] .arrow-flip .ic,
[dir="rtl"] .event__link .ic,
[dir="rtl"] .post-card__more .ic,
[dir="rtl"] .btn .ic:last-child,
[dir="rtl"] .drawer__link .ic { scale: -1 1; }
[dir="rtl"] .back-link .ic { transform: none; }
[dir="rtl"] .back-link:hover .ic { transform: translateX(-4px); }
[dir="rtl"] .event:hover .event__link .ic,
[dir="rtl"] .post-card:hover .post-card__more .ic { transform: translateX(-5px); }
[dir="rtl"] .footer__list a:hover { transform: translateX(-5px); }
[dir="rtl"] .contact-card:hover { transform: translateX(-5px); }
[dir="rtl"] .to-top__ic { transform: rotate(-90deg) scaleX(-1); }

[dir="rtl"] .quote-block::before { left: auto; right: 0; }
[dir="rtl"] .quote-block { padding-inline: 32px; }
[dir="rtl"] .course__flag { right: auto; left: 18px; }
[dir="rtl"] .wa-widget { right: auto; left: 22px; }
[dir="rtl"] .to-top { right: auto; left: 22px; }
[dir="rtl"] .wa-panel { right: auto; left: 0; transform-origin: bottom left; }
[dir="rtl"] .wa-panel__close { margin-left: 0; margin-right: auto; }
[dir="rtl"] .wa-bubble { border-radius: 10px 0 10px 10px; }
[dir="rtl"] .wa-bubble::before { left: auto; right: -8px; border-right-width: 8px; border-left-width: 0; }
[dir="rtl"] .wa-bubble__who { right: auto; left: 12px; }
[dir="rtl"] .wa-panel__online { right: auto; left: 0; }
[dir="rtl"] .chat-fab__badge { right: auto; left: -2px; }
[dir="rtl"] .welcome__close { right: auto; left: 14px; }
[dir="rtl"] .drawer__panel { right: auto; left: 0; border-radius: 0 var(--r-xl) var(--r-xl) 0; transform: translateX(-100%); }
[dir="rtl"] .drawer.is-open .drawer__panel { transform: translateX(0); }
[dir="rtl"] .drawer__close { align-self: flex-start; }
[dir="rtl"] .drawer__link { transform: translateX(-22px); }
[dir="rtl"] .skip-link { left: auto; right: 16px; }
[dir="rtl"] .nav__actions { margin-left: 0; margin-right: auto; }
[dir="rtl"] .table thead th, [dir="rtl"] .table tbody th { text-align: right; }
[dir="rtl"] .article__body ul li::before { margin-inline: 0 0; }
[dir="rtl"] .welcome__points { text-align: right; }

/* Marquees keep travelling the same visual direction in both languages. */
[dir="rtl"] .marquee { direction: ltr; }

@media (max-width: 620px) {
    [dir="rtl"] .wa-widget, [dir="rtl"] .to-top { right: auto; left: 16px; }
}

@media print {
    .ambient, .curtain, .nav, .wa-widget, .welcome, .to-top, .scroll-progress { display: none !important; }
    body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   26. Blog media — cover images, added with the admin panel
   -------------------------------------------------------------------------- */
.post-card__media {
    display: block; margin: -4px -4px 16px; border-radius: var(--r) var(--r) 0 0;
    overflow: hidden; aspect-ratio: 16 / 9; background: var(--tint-b);
}
.post-card__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .6s var(--ease);
}
.post-card:hover .post-card__media img { transform: scale(1.04); }

.article__cover {
    margin: 0 0 clamp(24px, 3vw, 38px); border-radius: var(--r-lg); overflow: hidden;
    aspect-ratio: 16 / 9; background: var(--tint-b);
}
.article__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 620px) {
    .pay { height: 44px; padding: 0 16px; gap: 8px; }
    .pay b { font-size: .95rem; }
    .pay--mastercard b { font-size: .88rem; }
    .pay__mark { width: 38px; height: 24px; }
    .pay--asset img { height: 24px; }
    .footer__pay { gap: 10px; }
}